From 66612e92aca2b5bb0473b9ac22448cbc2269cc83 Mon Sep 17 00:00:00 2001
From: Ethan Look <ethan.look@gmail.com>
Date: Wed, 31 Jan 2024 10:36:43 -0500
Subject: [PATCH] 2024-01-19 PRIME design maintenance (#473)

---
 packages/storybook/.eslintrc.cjs              |  1 +
 packages/storybook/src/stories/button.mdx     | 12 +--
 .../src/stories/button.stories.svelte         | 27 ++-----
 .../storybook/src/stories/icon.stories.svelte |  7 +-
 .../src/stories/select.stories.svelte         | 37 ++++++----
 packages/storybook/src/stories/switch.mdx     |  8 --
 .../src/stories/switch.stories.svelte         | 15 +---
 .../src/stories/toast-banner.stories.svelte   |  6 +-
 .../storybook/src/stories/toggle-buttons.mdx  | 12 ---
 .../src/stories/toggle-buttons.stories.svelte | 74 +++++++------------
 packages/storybook/src/stories/tooltip.mdx    | 10 +--
 .../src/stories/tooltip.stories.svelte        | 61 ++++-----------
 12 files changed, 85 insertions(+), 185 deletions(-)

diff --git a/packages/storybook/.eslintrc.cjs b/packages/storybook/.eslintrc.cjs
index 83531cfc..7a562824 100644
--- a/packages/storybook/.eslintrc.cjs
+++ b/packages/storybook/.eslintrc.cjs
@@ -20,5 +20,6 @@ module.exports = {
   },
   rules: {
     'no-console': 'off',
+    'sonarjs/no-duplicate-string': 'off',
   },
 };
diff --git a/packages/storybook/src/stories/button.mdx b/packages/storybook/src/stories/button.mdx
index 99110236..cb49c9be 100644
--- a/packages/storybook/src/stories/button.mdx
+++ b/packages/storybook/src/stories/button.mdx
@@ -11,6 +11,10 @@ For user triggered actions.
 import { Button } from '@viamrobotics/prime-core';
 ```
 
+<Canvas>
+  <Story of={ButtonStories.Group} />
+</Canvas>
+
 <Canvas>
   <Story of={ButtonStories.Primary} />
 </Canvas>
@@ -54,11 +58,3 @@ import { Button } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={ButtonStories.IconVariant} />
 </Canvas>
-
-<Canvas>
-  <Story of={ButtonStories.FullWidthButton} />
-</Canvas>
-
-<Canvas>
-  <Story of={ButtonStories.FullWidthButtonWithIcon} />
-</Canvas>
diff --git a/packages/storybook/src/stories/button.stories.svelte b/packages/storybook/src/stories/button.stories.svelte
index 30dbf810..8fa6e3c6 100644
--- a/packages/storybook/src/stories/button.stories.svelte
+++ b/packages/storybook/src/stories/button.stories.svelte
@@ -5,6 +5,13 @@ import { Button } from '@viamrobotics/prime-core';
 
 <Meta title="Elements/Button" />
 
+<Story name="Group">
+  <div class="flex flex-row gap-2">
+    <Button variant="dark">Primary action</Button>
+    <Button>Secondary action</Button>
+  </div>
+</Story>
+
 <Story name="Primary">
   <Button>Run</Button>
 </Story>
@@ -58,23 +65,3 @@ import { Button } from '@viamrobotics/prime-core';
     Delete component
   </Button>
 </Story>
-
-<Story name="Full width button">
-  <Button width="full">Wiiiiiiiiiiiiiiiiiiiiide</Button>
-</Story>
-
-<Story
-  name="Full width button with icon"
-  args={{
-    width: 'full',
-    label: 'hello',
-    icon: 'trash-can-outline',
-  }}
->
-  <Button
-    icon="trash-can-outline"
-    width="full"
-  >
-    Iiiiiiiiiiiiiiiicon
-  </Button>
-</Story>
diff --git a/packages/storybook/src/stories/icon.stories.svelte b/packages/storybook/src/stories/icon.stories.svelte
index 66397827..42ac44e9 100644
--- a/packages/storybook/src/stories/icon.stories.svelte
+++ b/packages/storybook/src/stories/icon.stories.svelte
@@ -10,13 +10,17 @@ const pathsKeys = Object.keys(paths) as IconName[];
 <Meta title="Elements/Icon" />
 
 <Story name="Checkmark">
-  <Icon name="check-circle" />
+  <Icon
+    name="check-circle"
+    cx="text-gray-6"
+  />
 </Story>
 
 <Story name="Checkmark 2xl">
   <Icon
     name="check-circle"
     size="2xl"
+    cx="text-gray-6"
   />
 </Story>
 
@@ -27,6 +31,7 @@ const pathsKeys = Object.keys(paths) as IconName[];
         <Icon
           {name}
           size="lg"
+          cx="text-gray-6"
         />
         <p slot="description">
           {name}
diff --git a/packages/storybook/src/stories/select.stories.svelte b/packages/storybook/src/stories/select.stories.svelte
index 5886ab36..18361ecf 100644
--- a/packages/storybook/src/stories/select.stories.svelte
+++ b/packages/storybook/src/stories/select.stories.svelte
@@ -12,7 +12,7 @@ import {
 <Meta title="Elements/Select" />
 
 <Story name="Basic">
-  <Select>
+  <Select cx="max-w-[200px]">
     <option>Option 1</option>
     <option>Option 2</option>
     <option>Option 3</option>
@@ -26,16 +26,17 @@ import {
 
 <Story name="Searchable">
   <Label cx="h-[200px]">
-    Searchable select with limited options
+    Searchable select
     <SearchableSelect
       slot="input"
+      cx="max-w-[200px]"
       placeholder="Search options"
       options={[
-        'First Option',
-        'Option 2',
-        'C.) Option',
-        'Something Else',
-        'With A Whole Lot Of Parts',
+        'First option',
+        'Second option',
+        'Third option',
+        'Something else',
+        'With a whole lot of parts',
       ]}
       exclusive
     />
@@ -44,10 +45,11 @@ import {
 
 <Story name="Searchable with arbitrary text">
   <Label cx="h-[200px]">
-    Select with arbitrary text
+    Searchable select with create
     <SearchableSelect
       slot="input"
-      placeholder="Search lyrics or invent your own"
+      cx="max-w-[200px]"
+      placeholder="Type to find or create..."
       otherOptionPrefix="Other:"
       options={['Hello', 'From', 'The other side']}
       sort={SortOptions.REDUCE}
@@ -56,15 +58,18 @@ import {
 </Story>
 
 <Story name="Multi">
-  <div class="h-[200px]">
+  <Label cx="h-[200px]">
+    Select multiple objects
     <Multiselect
+      slot="input"
+      cx="max-w-[300px]"
       options={[
-        'First Option',
-        'Option 2',
-        'C.) Option',
-        'Something Else',
-        'With A Whole Lot Of Parts',
+        'First option',
+        'Second option',
+        'Third option',
+        'Something else',
+        'With a whole lot of parts',
       ]}
     />
-  </div>
+  </Label>
 </Story>
diff --git a/packages/storybook/src/stories/switch.mdx b/packages/storybook/src/stories/switch.mdx
index f4621b7a..ce400366 100644
--- a/packages/storybook/src/stories/switch.mdx
+++ b/packages/storybook/src/stories/switch.mdx
@@ -22,11 +22,3 @@ import { Switch } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={SwitchStories.WithLabel} />
 </Canvas>
-
-<Canvas>
-  <Story of={SwitchStories.Annotated} />
-</Canvas>
-
-<Canvas>
-  <Story of={SwitchStories.CustomAnnotations} />
-</Canvas>
diff --git a/packages/storybook/src/stories/switch.stories.svelte b/packages/storybook/src/stories/switch.stories.svelte
index b3e72631..9e9fdb24 100644
--- a/packages/storybook/src/stories/switch.stories.svelte
+++ b/packages/storybook/src/stories/switch.stories.svelte
@@ -14,19 +14,8 @@ import { Label, Switch } from '@viamrobotics/prime-core';
 </Story>
 
 <Story name="With label">
-  <Label position="left">
-    Switch
+  <Label position="top">
+    Enable encryption
     <Switch slot="input" />
   </Label>
 </Story>
-
-<Story name="Annotated">
-  <Switch annotated />
-</Story>
-
-<Story name="Custom annotations">
-  <Switch annotated>
-    <svelte:fragment slot="on">Enabled</svelte:fragment>
-    <svelte:fragment slot="off">Disabled</svelte:fragment>
-  </Switch>
-</Story>
diff --git a/packages/storybook/src/stories/toast-banner.stories.svelte b/packages/storybook/src/stories/toast-banner.stories.svelte
index dc8d02e0..a419bb5c 100644
--- a/packages/storybook/src/stories/toast-banner.stories.svelte
+++ b/packages/storybook/src/stories/toast-banner.stories.svelte
@@ -7,7 +7,7 @@ import { ToastBanner } from '@viamrobotics/prime-core';
 
 <Story name="Success">
   <ToastBanner
-    message="Success message"
+    message="Saved configuration"
     dismiss={() => {
       console.log('Clicked close button');
     }}
@@ -17,12 +17,12 @@ import { ToastBanner } from '@viamrobotics/prime-core';
 
 <Story name="SuccessWithEmphasizedAction">
   <ToastBanner
-    message="Success message"
+    message={`Deleted "my-arm"`}
     dismiss={() => {
       console.log('Clicked close button');
     }}
     action={{
-      text: 'action',
+      text: 'Undo',
       handler: () => {
         console.log('Clicked action');
       },
diff --git a/packages/storybook/src/stories/toggle-buttons.mdx b/packages/storybook/src/stories/toggle-buttons.mdx
index a06bb9fa..1dc31c81 100644
--- a/packages/storybook/src/stories/toggle-buttons.mdx
+++ b/packages/storybook/src/stories/toggle-buttons.mdx
@@ -15,18 +15,6 @@ import { ToggleButtons } from '@viamrobotics/prime-core';
   <Story of={ToggleButtonsStories.Basic} />
 </Canvas>
 
-<Canvas>
-  <Story of={ToggleButtonsStories.WithLegend} />
-</Canvas>
-
-<Canvas>
-  <Story of={ToggleButtonsStories.Required} />
-</Canvas>
-
 <Canvas>
   <Story of={ToggleButtonsStories.Disabled} />
 </Canvas>
-
-<Canvas>
-  <Story of={ToggleButtonsStories.FullWidth} />
-</Canvas>
diff --git a/packages/storybook/src/stories/toggle-buttons.stories.svelte b/packages/storybook/src/stories/toggle-buttons.stories.svelte
index 0065a63b..96dc5a65 100644
--- a/packages/storybook/src/stories/toggle-buttons.stories.svelte
+++ b/packages/storybook/src/stories/toggle-buttons.stories.svelte
@@ -1,59 +1,37 @@
 <script lang="ts">
 import { Meta, Story } from '@storybook/addon-svelte-csf';
-import { ToggleButtons } from '@viamrobotics/prime-core';
+import { Label, ToggleButtons } from '@viamrobotics/prime-core';
 </script>
 
 <Meta title="Elements/ToggleButtons" />
 
 <Story name="Basic">
-  <ToggleButtons
-    options={['Opt 1', 'Opt 2', 'Opt 3']}
-    selected="Opt 1"
-  />
-</Story>
-
-<Story name="With legend">
-  <ToggleButtons
-    options={['Opt 1', 'Opt 2']}
-    selected="Opt 1"
-  >
-    <svelte:fragment slot="legend">These are your options</svelte:fragment>
-  </ToggleButtons>
-</Story>
-
-<Story name="Required">
-  <ToggleButtons
-    options={['To be', 'Not to be']}
-    selected="Opt 1"
-    required
-  >
-    <svelte:fragment slot="legend">Answer the question</svelte:fragment>
-  </ToggleButtons>
+  <Label>
+    Favorite animal
+    <div
+      class="w-fit"
+      slot="input"
+    >
+      <ToggleButtons
+        options={['Fan lizard', 'Mountain banshee', 'Buzzard wasp']}
+        selected="Fan lizard"
+      />
+    </div>
+  </Label>
 </Story>
 
 <Story name="Disabled">
-  <ToggleButtons
-    options={['Frank', 'Dave']}
-    selected="Frank"
-    disabled
-  >
-    <svelte:fragment slot="legend"
-      >I'm afraid that's something I cannot allow to happen.
-    </svelte:fragment>
-  </ToggleButtons>
-</Story>
-
-<Story name="Full Width">
-  <div class="flex flex-row gap-2">
-    <ToggleButtons
-      options={['Left', 'Right']}
-      selected="Left"
-    />
-
-    <ToggleButtons
-      options={['Left', 'Right']}
-      selected="Right"
-      cx="w-full"
-    />
-  </div>
+  <Label>
+    Favorite animal
+    <div
+      class="w-fit"
+      slot="input"
+    >
+      <ToggleButtons
+        options={['Fan lizard', 'Mountain banshee', 'Buzzard wasp']}
+        selected="Fan lizard"
+        disabled
+      />
+    </div>
+  </Label>
 </Story>
diff --git a/packages/storybook/src/stories/tooltip.mdx b/packages/storybook/src/stories/tooltip.mdx
index 8f9b0e7d..0842d1a2 100644
--- a/packages/storybook/src/stories/tooltip.mdx
+++ b/packages/storybook/src/stories/tooltip.mdx
@@ -16,13 +16,5 @@ import { Tooltip } from '@viamrobotics/prime-core';
 </Canvas>
 
 <Canvas>
-  <Story of={TooltipStories.RichHTML} />
-</Canvas>
-
-<Canvas>
-  <Story of={TooltipStories.CustomTarget} />
-</Canvas>
-
-<Canvas>
-  <Story of={TooltipStories.HoverDelay} />
+  <Story of={TooltipStories.MoreActions} />
 </Canvas>
diff --git a/packages/storybook/src/stories/tooltip.stories.svelte b/packages/storybook/src/stories/tooltip.stories.svelte
index 279e80e0..0f41f08c 100644
--- a/packages/storybook/src/stories/tooltip.stories.svelte
+++ b/packages/storybook/src/stories/tooltip.stories.svelte
@@ -1,12 +1,6 @@
 <script lang="ts">
 import { Meta, Story } from '@storybook/addon-svelte-csf';
-import {
-  Tooltip,
-  TooltipContainer,
-  TooltipTarget,
-  TooltipText,
-  Icon,
-} from '@viamrobotics/prime-core';
+import { Tooltip, Icon, IconButton } from '@viamrobotics/prime-core';
 </script>
 
 <Meta title="Elements/Tooltip" />
@@ -14,57 +8,30 @@ import {
 <Story name="Plain Text">
   <div class="flex pt-5">
     <Tooltip let:tooltipID>
-      <p aria-describedby={tooltipID}>This element has a tooltip.</p>
-      <p slot="description">This is the tooltip text!</p>
-    </Tooltip>
-  </div>
-</Story>
-
-<Story name="Rich HTML">
-  <div class="flex pt-5">
-    <Tooltip let:tooltipID>
-      <p aria-describedby={tooltipID}>
-        This <b>element</b> has a <em>tooltip</em>.
-      </p>
+      <Icon
+        aria-describedby={tooltipID}
+        name="information-outline"
+        cx="cursor-pointer text-gray-6"
+      />
       <p slot="description">
-        This is the <b class="underline">tooltip text!</b>
+        This is some helpful but not critical information
       </p>
     </Tooltip>
   </div>
 </Story>
 
-<Story name="Custom Target">
-  <div class="flex">
-    <TooltipContainer let:tooltipID>
-      <p
-        aria-describedby={tooltipID}
-        class="flex items-center gap-1"
-      >
-        This element has a tooltip on the icon.
-        <TooltipTarget>
-          <Icon
-            name="information-outline"
-            label="information"
-            cx="cursor-pointer"
-          />
-        </TooltipTarget>
-      </p>
-
-      <TooltipText location="right">This is the tooltip text!</TooltipText>
-    </TooltipContainer>
-  </div>
-</Story>
-
-<Story name="Hover Delay">
+<Story name="More actions">
   <div class="flex pt-5">
     <Tooltip
       let:tooltipID
       hoverDelayMS={1000}
     >
-      <p aria-describedby={tooltipID}>
-        This element has a tooltip that shows up if you're patient.
-      </p>
-      <p slot="description">Thanks for waiting!</p>
+      <IconButton
+        aria-describedby={tooltipID}
+        icon="dots-horizontal"
+        label="More actions"
+      />
+      <p slot="description">More actions</p>
     </Tooltip>
   </div>
 </Story>