Add button link as styles function, introduce tailwind-merge

packages/core/package.json

@@ -52,7 +52,8 @@
     "lodash-es": "^4.17.21",
     "nanoid": "^5.0.4",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.29.0"
+    "prismjs": "^1.29.0",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.0.0",

packages/core/src/lib/button/button-link.ts

@@ -0,0 +1,34 @@
+/**
+ * Link styled to look like a button.
+ *
+ * Currently, only the "ghost" variant is implemented.
+ *
+ * @function
+ */
+
+import { twMerge, type ClassNameValue } from 'tailwind-merge';
+
+export type ButtonLinkVariant = 'ghost' | 'dark';
+
+export interface ButtonLinkAttributes {
+  variant?: ButtonLinkVariant;
+  extraClasses?: ClassNameValue;
+}
+
+const BUTTON_LINK_CLASSES =
+  'flex h-7.5 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 text-xs';
+
+const BUTTON_LINK_VARIANT_CLASSES = {
+  ghost: 'text-default hover:bg-ghost-light active:bg-ghost-medium',
+  dark: 'border border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000]',
+} as const;
+
+export const buttonLinkStyles = ({
+  variant = 'ghost',
+  extraClasses = '',
+}: ButtonLinkAttributes) =>
+  twMerge(
+    BUTTON_LINK_CLASSES,
+    BUTTON_LINK_VARIANT_CLASSES[variant],
+    extraClasses
+  );

packages/core/src/lib/index.ts

@@ -2,6 +2,11 @@ export { default as Badge } from './badge.svelte';
 export { Banner, BannerVariant, type BannerVariantType } from './banner';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Button } from './button/button.svelte';
+export {
+  buttonLinkStyles,
+  type ButtonLinkAttributes,
+  type ButtonLinkVariant,
+} from './button/button-link';
 export { default as IconButton } from './button/icon-button.svelte';
 export { clickOutside } from './click-outside';
 export { default as CodeSnippet } from './code-snippet.svelte';

packages/core/src/routes/+page.svelte

@@ -1,54 +1,55 @@
 <script lang="ts">
+import { uniqueId } from 'lodash-es';
 import {
+  provideNotify,
+  useNotify,
+  provideToast,
+  ToastVariant,
   Badge,
+  Banner,
   Breadcrumbs,
   Button,
-  IconButton,
+  buttonLinkStyles,
+  CodeSnippet,
   ContextMenu,
   ContextMenuItem,
   ContextMenuSeparator,
   FloatingMenu,
   Icon,
-  Label,
-  Banner,
+  IconButton,
   Input,
+  Label,
+  Modal,
+  Multiselect,
+  NotificationContainer,
+  NumericInput,
   Pill,
-  Switch,
+  Progress,
   Radio,
-  TabsBar,
-  Tab,
-  Tooltip,
-  TooltipContainer,
-  TooltipTarget,
-  TooltipText,
-  TextInput,
-  NumericInput,
+  RangeInput,
   RestrictedTextInput,
+  SearchableSelect,
+  Select,
   SliderInput,
-  VectorInput,
+  Switch,
+  Tab,
   Table,
   TableBody,
   TableCell,
-  TableHeaderCell,
   TableHeader,
+  TableHeaderCell,
   TableRow,
+  TabsBar,
+  TextInput,
   ToastBanner,
   ToastContainer,
-  ToastVariant,
   ToggleButtons,
-  Select,
-  SearchableSelect,
-  Multiselect,
-  NotificationContainer,
-  provideNotify,
-  provideToast,
-  useNotify,
-  Modal,
-  CodeSnippet,
-  RangeInput,
-  Progress,
+  Tooltip,
+  TooltipContainer,
+  TooltipTarget,
+  TooltipText,
+  VectorInput,
 } from '$lib';
-import { uniqueId } from 'lodash-es';
 
 provideNotify();
 
@@ -193,7 +194,6 @@ console.log(\`The FizzBuzz sequence for n = 15 is:\`);
 console.log(sequence); // Outputs: ["1", "2", "Fizz", "4", "Buzz", "Fizz", "7", "8", "Fizz", "Buzz", "11", "Fizz", "13", "14", "FizzBuzz"]`.trim();
 
 const goSnippet = `
-import "fmt"
 
 // FizzBuzz
 //
@@ -465,6 +465,44 @@ const onHoverDelayMsInput = (event: Event) => {
 
 <NotificationContainer />
 
+<div class="container mx-auto my-4 flex flex-col gap-8 p-4">
+  <h2 class="h-2">New stuff!</h2>
+
+  <div class="flex items-center gap-2">
+    <p class="text-xs">Check out this cool thing:</p>
+    <a
+      href="https://design.viam.com"
+      target="_blank"
+      class={buttonLinkStyles({})}
+    >
+      My button link
+    </a>
+  </div>
+
+  <div class="flex items-center gap-2">
+    <p class="text-xs">Check out this cool thing with an icon:</p>
+    <a
+      href="https://design.viam.com"
+      target="_blank"
+      class={buttonLinkStyles({ variant: 'dark' })}
+    >
+      <Icon name="link" />
+      My button link
+    </a>
+  </div>
+
+  <div class="flex items-center gap-2">
+    <p class="text-xs">Check out this pink thing:</p>
+    <a
+      href="https://design.viam.com"
+      target="_blank"
+      class={buttonLinkStyles({ extraClasses: 'text-pink-500' })}
+    >
+      My button link
+    </a>
+  </div>
+</div>
+
 <div class="container mx-auto my-4 flex flex-col gap-8 p-4">
   <!-- Badge -->
   <h1 class="text-2xl">Badge</h1>