feat(components): add ListBox

Closes #88

README.md

@@ -48,6 +48,12 @@ Currently, the following components are supported:
   - IconSkeleton
 - InlineLoading
 - Link
+- ListBox
+  - ListBoxField
+  - ListBoxMenu
+  - ListBoxMenuIcon
+  - ListBoxMenuItem
+  - ListBoxSelection
 - ListItem
 - Loading
 - Modal

src/components/ListBox/ListBox.svelte

@@ -0,0 +1,33 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let size = undefined;
+  export let type = 'default';
+  export let disabled = false;
+  export let invalid = false;
+  export let invalidText = '';
+  export let open = false;
+  export let light = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div
+  role="listbox"
+  tabindex="-1"
+  data-invalid={invalid || undefined}
+  class={cx('--list-box', size && `--list-box--${size}`, type === 'inline' && '--list-box--inline', disabled && '--list-box--disabled', open && '--list-box--expanded', light && '--list-box--light', className)}
+  on:keydown
+  on:keydown={event => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+    }
+  }}
+  on:click|preventDefault|stopPropagation
+  {style}>
+  <slot />
+</div>
+{#if invalid}
+  <div class={cx('--form-requirement')}>{invalidText}</div>
+{/if}

src/components/ListBox/ListBoxField.svelte

@@ -0,0 +1,32 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random();
+  export let tabindex = '-1';
+  export let role = 'combobox';
+  export let disabled = false;
+  export const translationIds = { close: 'close', open: 'open' };
+  export let translateWithId = id => defaultTranslations[id];
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  const defaultTranslations = {
+    [translationIds.close]: 'Close menu',
+    [translationIds.open]: 'Open menu'
+  };
+
+  $: ariaExpanded = $$props['aria-expanded'];
+  $: menuId = `menu-${id}`;
+</script>
+
+<div
+  role={ariaExpanded ? 'combobox' : role}
+  aria-owns={(ariaExpanded && menuId) || undefined}
+  aria-controls={(ariaExpanded && menuId) || undefined}
+  aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
+  tabindex={disabled ? '-1' : tabindex}
+  class={cx('--list-box__field', className)}
+  {style}>
+  <slot />
+</div>

src/components/ListBox/ListBoxMenu.svelte

@@ -0,0 +1,14 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = Math.random(); // TODO: Use context to re-use same id per ListBox
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+
+  $: menuId = `menu-${id}`;
+</script>
+
+<div role="listbox" id={menuId} class={cx('--list-box__menu', className)} {style}>
+  <slot />
+</div>

src/components/ListBox/ListBoxMenuIcon.svelte

@@ -0,0 +1,22 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let open = false;
+  export const translationIds = { close: 'close', open: 'open' };
+  export let translateWithId = id => defaultTranslations[id];
+  export let style = undefined;
+
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
+  import { cx } from '../../lib';
+
+  const defaultTranslations = {
+    [translationIds.close]: 'Close menu',
+    [translationIds.open]: 'Open menu'
+  };
+
+  $: description = open ? translateWithId('close') : translateWithId('open');
+</script>
+
+<div class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)} {style}>
+  <ChevronDown16 name="chevron--down" aria-label={description} title={description} />
+</div>

src/components/ListBox/ListBoxMenuItem.svelte

@@ -0,0 +1,17 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let active = false;
+  export let highlighted = false;
+  export let style = undefined;
+
+  import { cx } from '../../lib';
+</script>
+
+<div
+  class={cx('--list-box__menu-item', active && '--list-box__menu-item--active', highlighted && '--list-box__menu-item--highlighted', className)}
+  {style}>
+  <div class={cx('--list-box__menu-item__option')}>
+    <slot />
+  </div>
+</div>

src/components/ListBox/ListBoxSelection.svelte

@@ -0,0 +1,45 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let disabled = false;
+  export let selectionCount = undefined;
+  export const translationIds = { clearAll: 'clearAll', clearSelection: 'clearSelection' };
+  export let translateWithId = id => defaultTranslations[id];
+  export let style = undefined;
+
+  import { createEventDispatcher } from 'svelte';
+  import Close16 from 'carbon-icons-svelte/lib/Close16';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+
+  const defaultTranslations = {
+    [translationIds.clearAll]: 'Clear all selected items',
+    [translationIds.clearSelection]: 'Clear selected item'
+  };
+
+  $: description = selectionCount ? translateWithId('clearAll') : translateWithId('clearSelection');
+</script>
+
+<div
+  role="button"
+  aria-label="Clear Selection"
+  tabindex={disabled ? '-1' : '0'}
+  title={description}
+  class={cx('--list-box__selection', selectionCount && '--tag--filter', selectionCount && '--list-box__selection--multi', className)}
+  on:click
+  on:click|stopPropagation={event => {
+    if (!disabled) {
+      dispatch('clear', event);
+    }
+  }}
+  on:keydown
+  on:keydown|stopPropagation={event => {
+    if (!disabled && event.key === 'Enter') {
+      dispatch('clear', event);
+    }
+  }}
+  {style}>
+  {selectionCount}
+  <Close16 />
+</div>

src/components/ListBox/index.js

@@ -0,0 +1,8 @@
+import ListBox from './ListBox.svelte';
+
+export default ListBox;
+export { default as ListBoxField } from './ListBoxField.svelte';
+export { default as ListBoxMenu } from './ListBoxMenu.svelte';
+export { default as ListBoxMenuIcon } from './ListBoxMenuIcon.svelte';
+export { default as ListBoxMenuItem } from './ListBoxMenuItem.svelte';
+export { default as ListBoxSelection } from './ListBoxSelection.svelte';

src/index.js

@@ -22,6 +22,13 @@ import FormLabel from './components/FormLabel';
 import Icon, { IconSkeleton } from './components/Icon';
 import InlineLoading from './components/InlineLoading';
 import Link from './components/Link';
+import ListBox, {
+  ListBoxField,
+  ListBoxMenu,
+  ListBoxMenuIcon,
+  ListBoxMenuItem,
+  ListBoxSelection
+} from './components/ListBox';
 import ListItem from './components/ListItem';
 import Loading from './components/Loading';
 import Modal from './components/Modal';
@@ -117,6 +124,12 @@ export {
   Modal,
   InlineNotification,
   Link,
+  ListBox,
+  ListBoxField,
+  ListBoxMenu,
+  ListBoxMenuIcon,
+  ListBoxMenuItem,
+  ListBoxSelection,
   ListItem,
   Loading,
   NotificationActionButton,