add new link option for pills (viamrobotics#530)

ethanlookpotts · Jul 3, 2024 · 4b60729 · 4b60729
1 parent 23ef504
commit 4b60729
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 2 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.127",
+  "version": "0.0.128",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/__tests__/pill.spec.ts b/packages/core/src/lib/__tests__/pill.spec.ts
@@ -66,4 +66,12 @@ describe('Pill', () => {
     render(Pill, { value: 'test', cx: cxTestArguments });
     expect(screen.getByText('test').parentElement).toHaveClass(cxTestResults);
   });
+
+  it('Renders with the passed href', () => {
+    render(Pill, { value: 'link', href: 'https://www.viam.com' });
+    expect(screen.getByRole('link', { name: 'link' })).toHaveAttribute(
+      'href',
+      'https://www.viam.com'
+    );
+  });
 });
diff --git a/packages/core/src/lib/pill.svelte b/packages/core/src/lib/pill.svelte
@@ -18,6 +18,12 @@ import { createEventDispatcher } from 'svelte';
 /** The text in the pill. */
 export let value = '';
 
+/** Optional URL that the hyperlink points to. */
+export let href = '';
+
+/** Optional target for linked URL. */
+export let target: '_self' | '_blank' | '_parent' | '_top' = '_blank';
+
 /** Whether or not the pill has the aria-readonly attribute. If readonly, there is not a button to remove the pill. */
 export let readonly = false;
 
@@ -69,7 +75,15 @@ const handleRemove = () => {
       size="sm"
     />
   {/if}
-  <span class="truncate">{value}</span>
+  {#if href}
+    <a
+      {href}
+      {target}
+      class="truncate hover:underline">{value}</a
+    >
+  {:else}
+    <span class="truncate">{value}</span>
+  {/if}
   {#if !readonly && removable}
     <button
       type="button"

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1172,6 +1172,18 @@ const onHoverDelayMsInput = (event: Event) => {
       icon="viam-component"
       removable={false}
     />
+    <Pill
+      value="my-machine-123"
+      icon="multiplication-box"
+      href="https://i.imgur.com/aQCBxdr.png"
+      removable={false}
+    />
+    <Pill
+      value="target-self-example"
+      href="https://i.imgur.com/aQCBxdr.png"
+      target="_self"
+      removable={false}
+    />
   </div>
 
   <!-- Prevent Handler -->

diff --git a/packages/storybook/src/stories/pill.mdx b/packages/storybook/src/stories/pill.mdx
@@ -33,3 +33,7 @@ import { Pill } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={PillStories.IconNotRemovable} />
 </Canvas>
+
+<Canvas>
+  <Story of={PillStories.Link} />
+</Canvas>
diff --git a/packages/storybook/src/stories/pill.stories.svelte b/packages/storybook/src/stories/pill.stories.svelte
@@ -66,3 +66,20 @@ import { Pill } from '@viamrobotics/prime-core';
     />
   </div>
 </Story>
+
+<Story name="Link">
+  <div class="flex flex-row gap-1.5">
+    <Pill
+      value="my-machine-123"
+      icon="multiplication-box"
+      href="https://i.imgur.com/aQCBxdr.png"
+      removable={false}
+    />
+    <Pill
+      value="target-self-example"
+      href="https://i.imgur.com/aQCBxdr.png"
+      target="_self"
+      removable={false}
+    />
+  </div>
+</Story>