DT-2347 - support multiselect in combobox (#2352)

* support multiselect in combobox

* fix styles

* clean up styles

* fix styles and use badge for multiselect text when no chips

src/lib/holocene/combobox/combobox-option.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import Checkbox from '$lib/holocene/checkbox.svelte';
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
 
+  const dispatch = createEventDispatcher<{ click: undefined }>();
+
   interface Props {
     selected?: boolean;
     disabled?: boolean;
+    multiselect?: boolean;
+    label: string;
   }
 
   interface DisabledProps {
+    label: string;
     disabled: true;
     selected?: never;
   }
@@ -15,6 +23,8 @@
 
   export let selected = false;
   export let disabled = false;
+  export let multiselect = false;
+  export let label: string;
 </script>
 
 <MenuItem
@@ -23,10 +33,14 @@
   class="break-all"
   aria-selected={selected}
   aria-disabled={disabled}
+  selected={!multiselect && selected}
   {disabled}
-  {selected}
 >
-  <slot slot="leading" name="leading" />
-  <slot />
+  <slot slot="leading" name="leading">
+    {#if multiselect}
+      <Checkbox on:change={() => dispatch('click')} checked={selected} />
+    {/if}
+  </slot>
+  {label}
   <slot slot="trailing" name="trailing" />
 </MenuItem>

src/lib/holocene/combobox/combobox.stories.svelte

@@ -122,3 +122,20 @@
     expect(noResults).toBeInTheDocument();
   }}
 />
+
+<Story
+  name="Multiselect"
+  args={{
+    options: [
+      'English',
+      'English (UK)',
+      'German',
+      'French',
+      'Japanese',
+      'Spanish',
+      'Portuguese',
+    ],
+    multiselect: true,
+    value: [],
+  }}
+/>