Multi select list box + dropdown examples (#44)

Author: mikeldking

stories/Dropdown.stories.tsx

@@ -11,6 +11,8 @@ import {
   Button,
   Radio,
   RadioGroup,
+  ListBox,
+  Item,
 } from '../src';
 
 const meta: Meta = {
@@ -154,3 +156,41 @@ export const Controlled = () => {
     </Provider>
   );
 };
+
+export const DropdownWithListBox = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selectedKeys, setSelectedKeys] = useState(['dogs']);
+  return (
+    <Provider>
+      <Dropdown
+        triggerProps={{
+          isOpen: isOpen,
+          onOpenChange: open => setIsOpen(open),
+        }}
+        menu={
+          <ListBox
+            style={{ width: 200 }}
+            aria-label="Pick your favorite"
+            selectionMode="multiple"
+            selectedKeys={selectedKeys}
+            onSelectionChange={selected =>
+              // @ts-ignore we know the keys are strings
+              setSelectedKeys(Array.from(selected))
+            }
+          >
+            <Item key="Aardvark">Aardvark</Item>
+            <Item key="Kangaroo">Kangaroo</Item>
+            <Item key="Snake">Snake</Item>
+            <Item key="Danni">Danni</Item>
+            <Item key="Devon">Devon</Item>
+            <Item key="Ross">Ross</Item>
+          </ListBox>
+        }
+      >
+        {selectedKeys.length < 2
+          ? selectedKeys.join(', ')
+          : `${selectedKeys.length} selected`}
+      </Dropdown>
+    </Provider>
+  );
+};

stories/ListBox.stories.tsx

@@ -82,3 +82,22 @@ const ListBoxWithSections: Story<ListBoxProps<string>> = args => {
 };
 
 export const listBoxWithSections = ListBoxWithSections.bind({});
+
+const ListBoxMultiSelect: Story<ListBoxProps<string>> = args => {
+  return (
+    <ListBox
+      style={{ width: 200 }}
+      aria-label="Pick your favorite"
+      selectionMode="multiple"
+    >
+      <Item key="Aardvark">Aardvark</Item>
+      <Item key="Kangaroo">Kangaroo</Item>
+      <Item key="Snake">Snake</Item>
+      <Item key="Danni">Danni</Item>
+      <Item key="Devon">Devon</Item>
+      <Item key="Ross">Ross</Item>
+    </ListBox>
+  );
+};
+
+export const listBoxMultiSelect = ListBoxMultiSelect.bind({});