Add stories and cleanup

viamrobotics · Aug 29, 2023 · a3cc86c · a3cc86c
1 parent 2383925
commit a3cc86c
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 10 deletions.
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -11,6 +11,7 @@ export { default as Pill } from './pill.svelte';
 export { default as Switch } from './switch.svelte';
 export { default as Radio } from './radio.svelte';
 export { default as Tabs } from './tabs.svelte';
+export { useUniqueId } from './unique-id';
 
 export {
   default as Tooltip,
@@ -34,12 +35,13 @@ export {
   type TextInputTypes,
 } from './input/text-input.svelte';
 
+export { default as Select, type SelectState } from './select/select.svelte';
+export { default as SearchableSelect } from './select/searchable-select.svelte';
+export { type SortOptions } from './select/search';
+
 export { default as Table, type TableVariant } from './table/table.svelte';
 export { default as TableHeader } from './table/table-header.svelte';
 export { default as TableHeaderCell } from './table/table-header-cell.svelte';
 export { default as TableBody } from './table/table-body.svelte';
 export { default as TableRow } from './table/table-row.svelte';
 export { default as TableCell } from './table/table-cell.svelte';
-export { default as Select, type SelectState } from './select/select.svelte';
-
-export * from './unique-id';
diff --git a/packages/core/src/lib/select/searchable-select.svelte b/packages/core/src/lib/select/searchable-select.svelte
@@ -19,8 +19,8 @@ export let options: string[] = [];
 export let value: string | undefined = undefined;
 export let disabled = false;
 export let state: SelectState = 'none';
-export let button: { text: string; icon: string } | undefined = undefined;
 export let sort: SortOptions = 'default';
+export let button: { text: string; icon: string } | undefined = undefined;
 export let heading = '';
 
 const dispatch = createEventDispatcher<{
@@ -31,8 +31,6 @@ const dispatch = createEventDispatcher<{
 }>();
 
 const menuId = useUniqueId('searchable-select');
-
-let wrapper: Element;
 let menu: HTMLUListElement;
 
 let open = false;
@@ -166,7 +164,6 @@ $: {
 </script>
 
 <div
-  bind:this={wrapper}
   class="relative flex w-full"
   use:clickOutside={closeMenu}
 >
@@ -175,7 +172,7 @@ $: {
       bind:value
       role="combobox"
       aria-controls={menuId}
-      aria-expanded={open ? true : undefined}
+      aria-expanded={open}
       readonly={disabled ? true : undefined}
       aria-disabled={disabled ? true : undefined}
       type="text"

diff --git a/packages/storybook/src/stories/select/labeled-searchable-select.svelte b/packages/storybook/src/stories/select/labeled-searchable-select.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+import {
+  Label,
+  SearchableSelect,
+  type SelectState,
+  type SortOptions,
+} from '@viamrobotics/prime-core';
+
+export let options: string[] = [];
+export let value: string | undefined = undefined;
+export let disabled = false;
+export let state: SelectState = 'none';
+export let sort: SortOptions = 'default';
+export let button: { text: string; icon: string } | undefined = undefined;
+export let heading = '';
+</script>
+
+<Label>
+  Options:
+  <SearchableSelect
+    slot="input"
+    {options}
+    {value}
+    {disabled}
+    {state}
+    {sort}
+    {button}
+    {heading}
+  />
+</Label>
diff --git a/packages/storybook/src/stories/select/searchable-select.stories.mdx b/packages/storybook/src/stories/select/searchable-select.stories.mdx
@@ -0,0 +1,109 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { SearchableSelect } from '@viamrobotics/prime-core';
+import LabeledSelect from './labeled-searchable-select.svelte';
+
+<Meta
+  title='Elements/Select/SearchableSelect'
+  argTypes={{
+    value: {
+      description: "The select's value",
+      control: { type: 'text' },
+      table: { defaultValue: { summary: '' } },
+    },
+    options: {
+      description: 'The select options',
+      control: { type: 'object' },
+      table: {
+        defaultValue: {
+          summary: '[]',
+        },
+      },
+    },
+    disabled: {
+      description: 'If the select should be readonly and inoperable',
+      control: { type: 'boolean' },
+      table: { defaultValue: { summary: false } },
+    },
+    state: {
+      description: 'The state of the select',
+      control: { type: 'select' },
+      options: ['warn', 'error', 'none'],
+      table: { defaultValue: { summary: 'none' } },
+    },
+    sort: {
+      description: 'The sorting/filtering behavior for the select',
+      control: { type: 'select' },
+      options: ['default', 'reduce', 'off'],
+      table: { defaultValue: { summary: 'default' } },
+    },
+    button: {
+      description: 'An optional action button for the select',
+      control: { type: 'object' },
+      table: {
+        defaultValue: { summary: { text: 'Do Something', icon: 'alert' } },
+      },
+    },
+    value: {
+      description: 'An optional heading to put at the top of the select menu',
+      control: { type: 'text' },
+      table: { defaultValue: { summary: 'Search results' } },
+    },
+  }}
+/>
+
+# Searchable Select
+
+A simple user input for selecting from a list of options. This is an implementation
+of the native HTML `<select />` with our styles applied.
+
+<Canvas>
+  <Story
+    name='SearchableSelect'
+    args={{
+      options: [
+        'First Option',
+        'Option 2',
+        'C.) Option',
+        'Something Else',
+        'With A Whole Lot Of Parts',
+      ],
+    }}
+  >
+    {(props) => ({
+      Component: SearchableSelect,
+      props,
+    })}
+  </Story>
+</Canvas>
+
+## Labels
+
+For accessibility, consider wrapping your `<SearchableSelect />` in a `<Label />`. Make
+to pass it `slot="input"` to correctly slot it in.
+
+<Canvas>
+  <Story
+    name='Labeled Select'
+    args={{
+      options: [
+        'First Option',
+        'Option 2',
+        'C.) Option',
+        'Something Else',
+        'With A Whole Lot Of Parts',
+      ],
+    }}
+  >
+    {(props) => ({
+      Component: LabeledSelect,
+      options: [
+        'First Option',
+        'Option 2',
+        'C.) Option',
+        'Something Else',
+        'With A Whole Lot Of Parts',
+      ],
+      props,
+    })}
+  </Story>
+</Canvas>
diff --git a/packages/storybook/src/stories/select/select.stories.mdx b/packages/storybook/src/stories/select/select.stories.mdx
@@ -19,7 +19,7 @@ import LabeledSelect from './labeled-select.svelte';
     state: {
       description: 'The state of the select',
       control: { type: 'select' },
-      options: ['info', 'warn', 'error', 'none'],
+      options: ['warn', 'error', 'none'],
       table: { defaultValue: { summary: 'none' } },
     },
   }}
@@ -42,7 +42,7 @@ of the native HTML `<select />` with our styles applied.
 ## Labels
 
 For accessibility, consider wrapping your `<Select />` in a `<Label />`. Make
-to pass it `slot="select"` to correctly slot it in.
+to pass it `slot="input"` to correctly slot it in.
 
 <Canvas>
   <Story name='Labeled Select'>