2024-01-19 PRIME design maintenance (viamrobotics#473)

micheal-parks · Jan 31, 2024 · 66612e9 · 66612e9
1 parent 48551f0
commit 66612e9
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 185 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>