Skip to content

Commit 66612e9

Browse files
ethanlookpottsethanlookpotts
authored
2024-01-19 PRIME design maintenance (#473)
1 parent 48551f0 commit 66612e9

12 files changed

+85
-185
lines changed

‎packages/storybook/.eslintrc.cjs

+1
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,6 @@ module.exports = {
2020
},
2121
rules: {
2222
'no-console': 'off',
23+
'sonarjs/no-duplicate-string': 'off',
2324
},
2425
};

‎packages/storybook/src/stories/button.mdx

+4-8
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ For user triggered actions.
1111
import { Button } from '@viamrobotics/prime-core';
1212
```
1313

14+
<Canvas>
15+
<Story of={ButtonStories.Group} />
16+
</Canvas>
17+
1418
<Canvas>
1519
<Story of={ButtonStories.Primary} />
1620
</Canvas>
@@ -54,11 +58,3 @@ import { Button } from '@viamrobotics/prime-core';
5458
<Canvas>
5559
<Story of={ButtonStories.IconVariant} />
5660
</Canvas>
57-
58-
<Canvas>
59-
<Story of={ButtonStories.FullWidthButton} />
60-
</Canvas>
61-
62-
<Canvas>
63-
<Story of={ButtonStories.FullWidthButtonWithIcon} />
64-
</Canvas>

‎packages/storybook/src/stories/button.stories.svelte

+7-20
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ import { Button } from '@viamrobotics/prime-core';
55

66
<Meta title="Elements/Button" />
77

8+
<Story name="Group">
9+
<div class="flex flex-row gap-2">
10+
<Button variant="dark">Primary action</Button>
11+
<Button>Secondary action</Button>
12+
</div>
13+
</Story>
14+
815
<Story name="Primary">
916
<Button>Run</Button>
1017
</Story>
@@ -58,23 +65,3 @@ import { Button } from '@viamrobotics/prime-core';
5865
Delete component
5966
</Button>
6067
</Story>
61-
62-
<Story name="Full width button">
63-
<Button width="full">Wiiiiiiiiiiiiiiiiiiiiide</Button>
64-
</Story>
65-
66-
<Story
67-
name="Full width button with icon"
68-
args={{
69-
width: 'full',
70-
label: 'hello',
71-
icon: 'trash-can-outline',
72-
}}
73-
>
74-
<Button
75-
icon="trash-can-outline"
76-
width="full"
77-
>
78-
Iiiiiiiiiiiiiiiicon
79-
</Button>
80-
</Story>

‎packages/storybook/src/stories/icon.stories.svelte

+6-1
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,17 @@ const pathsKeys = Object.keys(paths) as IconName[];
1010
<Meta title="Elements/Icon" />
1111

1212
<Story name="Checkmark">
13-
<Icon name="check-circle" />
13+
<Icon
14+
name="check-circle"
15+
cx="text-gray-6"
16+
/>
1417
</Story>
1518

1619
<Story name="Checkmark 2xl">
1720
<Icon
1821
name="check-circle"
1922
size="2xl"
23+
cx="text-gray-6"
2024
/>
2125
</Story>
2226

@@ -27,6 +31,7 @@ const pathsKeys = Object.keys(paths) as IconName[];
2731
<Icon
2832
{name}
2933
size="lg"
34+
cx="text-gray-6"
3035
/>
3136
<p slot="description">
3237
{name}

‎packages/storybook/src/stories/select.stories.svelte

+21-16
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
<Meta title="Elements/Select" />
1313

1414
<Story name="Basic">
15-
<Select>
15+
<Select cx="max-w-[200px]">
1616
<option>Option 1</option>
1717
<option>Option 2</option>
1818
<option>Option 3</option>
@@ -26,16 +26,17 @@ import {
2626

2727
<Story name="Searchable">
2828
<Label cx="h-[200px]">
29-
Searchable select with limited options
29+
Searchable select
3030
<SearchableSelect
3131
slot="input"
32+
cx="max-w-[200px]"
3233
placeholder="Search options"
3334
options={[
34-
'First Option',
35-
'Option 2',
36-
'C.) Option',
37-
'Something Else',
38-
'With A Whole Lot Of Parts',
35+
'First option',
36+
'Second option',
37+
'Third option',
38+
'Something else',
39+
'With a whole lot of parts',
3940
]}
4041
exclusive
4142
/>
@@ -44,10 +45,11 @@ import {
4445

4546
<Story name="Searchable with arbitrary text">
4647
<Label cx="h-[200px]">
47-
Select with arbitrary text
48+
Searchable select with create
4849
<SearchableSelect
4950
slot="input"
50-
placeholder="Search lyrics or invent your own"
51+
cx="max-w-[200px]"
52+
placeholder="Type to find or create..."
5153
otherOptionPrefix="Other:"
5254
options={['Hello', 'From', 'The other side']}
5355
sort={SortOptions.REDUCE}
@@ -56,15 +58,18 @@ import {
5658
</Story>
5759

5860
<Story name="Multi">
59-
<div class="h-[200px]">
61+
<Label cx="h-[200px]">
62+
Select multiple objects
6063
<Multiselect
64+
slot="input"
65+
cx="max-w-[300px]"
6166
options={[
62-
'First Option',
63-
'Option 2',
64-
'C.) Option',
65-
'Something Else',
66-
'With A Whole Lot Of Parts',
67+
'First option',
68+
'Second option',
69+
'Third option',
70+
'Something else',
71+
'With a whole lot of parts',
6772
]}
6873
/>
69-
</div>
74+
</Label>
7075
</Story>

‎packages/storybook/src/stories/switch.mdx

-8
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,3 @@ import { Switch } from '@viamrobotics/prime-core';
2222
<Canvas>
2323
<Story of={SwitchStories.WithLabel} />
2424
</Canvas>
25-
26-
<Canvas>
27-
<Story of={SwitchStories.Annotated} />
28-
</Canvas>
29-
30-
<Canvas>
31-
<Story of={SwitchStories.CustomAnnotations} />
32-
</Canvas>

‎packages/storybook/src/stories/switch.stories.svelte

+2-13
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,8 @@ import { Label, Switch } from '@viamrobotics/prime-core';
1414
</Story>
1515

1616
<Story name="With label">
17-
<Label position="left">
18-
Switch
17+
<Label position="top">
18+
Enable encryption
1919
<Switch slot="input" />
2020
</Label>
2121
</Story>
22-
23-
<Story name="Annotated">
24-
<Switch annotated />
25-
</Story>
26-
27-
<Story name="Custom annotations">
28-
<Switch annotated>
29-
<svelte:fragment slot="on">Enabled</svelte:fragment>
30-
<svelte:fragment slot="off">Disabled</svelte:fragment>
31-
</Switch>
32-
</Story>

‎packages/storybook/src/stories/toast-banner.stories.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ToastBanner } from '@viamrobotics/prime-core';
77

88
<Story name="Success">
99
<ToastBanner
10-
message="Success message"
10+
message="Saved configuration"
1111
dismiss={() => {
1212
console.log('Clicked close button');
1313
}}
@@ -17,12 +17,12 @@ import { ToastBanner } from '@viamrobotics/prime-core';
1717

1818
<Story name="SuccessWithEmphasizedAction">
1919
<ToastBanner
20-
message="Success message"
20+
message={`Deleted "my-arm"`}
2121
dismiss={() => {
2222
console.log('Clicked close button');
2323
}}
2424
action={{
25-
text: 'action',
25+
text: 'Undo',
2626
handler: () => {
2727
console.log('Clicked action');
2828
},

‎packages/storybook/src/stories/toggle-buttons.mdx

-12
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,6 @@ import { ToggleButtons } from '@viamrobotics/prime-core';
1515
<Story of={ToggleButtonsStories.Basic} />
1616
</Canvas>
1717

18-
<Canvas>
19-
<Story of={ToggleButtonsStories.WithLegend} />
20-
</Canvas>
21-
22-
<Canvas>
23-
<Story of={ToggleButtonsStories.Required} />
24-
</Canvas>
25-
2618
<Canvas>
2719
<Story of={ToggleButtonsStories.Disabled} />
2820
</Canvas>
29-
30-
<Canvas>
31-
<Story of={ToggleButtonsStories.FullWidth} />
32-
</Canvas>

‎packages/storybook/src/stories/toggle-buttons.stories.svelte

+26-48
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,37 @@
11
<script lang="ts">
22
import { Meta, Story } from '@storybook/addon-svelte-csf';
3-
import { ToggleButtons } from '@viamrobotics/prime-core';
3+
import { Label, ToggleButtons } from '@viamrobotics/prime-core';
44
</script>
55

66
<Meta title="Elements/ToggleButtons" />
77

88
<Story name="Basic">
9-
<ToggleButtons
10-
options={['Opt 1', 'Opt 2', 'Opt 3']}
11-
selected="Opt 1"
12-
/>
13-
</Story>
14-
15-
<Story name="With legend">
16-
<ToggleButtons
17-
options={['Opt 1', 'Opt 2']}
18-
selected="Opt 1"
19-
>
20-
<svelte:fragment slot="legend">These are your options</svelte:fragment>
21-
</ToggleButtons>
22-
</Story>
23-
24-
<Story name="Required">
25-
<ToggleButtons
26-
options={['To be', 'Not to be']}
27-
selected="Opt 1"
28-
required
29-
>
30-
<svelte:fragment slot="legend">Answer the question</svelte:fragment>
31-
</ToggleButtons>
9+
<Label>
10+
Favorite animal
11+
<div
12+
class="w-fit"
13+
slot="input"
14+
>
15+
<ToggleButtons
16+
options={['Fan lizard', 'Mountain banshee', 'Buzzard wasp']}
17+
selected="Fan lizard"
18+
/>
19+
</div>
20+
</Label>
3221
</Story>
3322

3423
<Story name="Disabled">
35-
<ToggleButtons
36-
options={['Frank', 'Dave']}
37-
selected="Frank"
38-
disabled
39-
>
40-
<svelte:fragment slot="legend"
41-
>I'm afraid that's something I cannot allow to happen.
42-
</svelte:fragment>
43-
</ToggleButtons>
44-
</Story>
45-
46-
<Story name="Full Width">
47-
<div class="flex flex-row gap-2">
48-
<ToggleButtons
49-
options={['Left', 'Right']}
50-
selected="Left"
51-
/>
52-
53-
<ToggleButtons
54-
options={['Left', 'Right']}
55-
selected="Right"
56-
cx="w-full"
57-
/>
58-
</div>
24+
<Label>
25+
Favorite animal
26+
<div
27+
class="w-fit"
28+
slot="input"
29+
>
30+
<ToggleButtons
31+
options={['Fan lizard', 'Mountain banshee', 'Buzzard wasp']}
32+
selected="Fan lizard"
33+
disabled
34+
/>
35+
</div>
36+
</Label>
5937
</Story>

‎packages/storybook/src/stories/tooltip.mdx

+1-9
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,5 @@ import { Tooltip } from '@viamrobotics/prime-core';
1616
</Canvas>
1717

1818
<Canvas>
19-
<Story of={TooltipStories.RichHTML} />
20-
</Canvas>
21-
22-
<Canvas>
23-
<Story of={TooltipStories.CustomTarget} />
24-
</Canvas>
25-
26-
<Canvas>
27-
<Story of={TooltipStories.HoverDelay} />
19+
<Story of={TooltipStories.MoreActions} />
2820
</Canvas>

0 commit comments

Comments
 (0)