chore: lift components folder

src/Dropdown/Dropdown.Skeleton.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let inline = false;
+</script>
+
+<div
+  class:bx--skeleton={true}
+  class:bx--dropdown-v2={true}
+  class:bx--list-box={true}
+  class:bx--form-item={true}
+  class:bx--list-box--inline={inline}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <div role="button" class:bx--list-box__field={true}>
+    <span class:bx--list-box__label={true} />
+  </div>
+</div>

src/Dropdown/Dropdown.Story.svelte

@@ -0,0 +1,44 @@
+<script>
+  export let story = undefined;
+
+  import { Button } from "../Button";
+  import Dropdown from "./Dropdown.svelte";
+  import DropdownSkeleton from "./Dropdown.Skeleton.svelte";
+
+  $: items = [
+    { id: "option-0", text: "Option 1" },
+    { id: "option-1", text: "Option 2" },
+    { id: "option-2", text: "Option 3" },
+    { id: "option-3", text: "Option 4" }
+  ];
+  $: selectedIndex = -1;
+</script>
+
+{#if story === 'skeleton'}
+  <div style="width: 300px">
+    <DropdownSkeleton />
+    &nbsp;
+    <DropdownSkeleton inline />
+  </div>
+{:else}
+  <p>Currently, this component does not support items as slots.</p>
+  <p>
+    <code>items</code>
+    must be an array of objects; mandatory fields are `id` and `text`.
+  </p>
+  <pre style="margin-top: 1rem;">
+    <code>{'items = Array<{ id: string; text: string; }>'}</code>
+  </pre>
+  <div style="margin-top: 2rem; margin-bottom: 2rem;">
+    <Button
+      size="small"
+      on:click={() => {
+        selectedIndex = selectedIndex > -1 ? -1 : 1;
+      }}>
+      {selectedIndex > -1 ? 'Clear selected item' : "Set item to 'Option 2'"}
+    </Button>
+  </div>
+  <div style="width: 300px">
+    <Dropdown {...$$props} bind:selectedIndex {items} />
+  </div>
+{/if}

src/Dropdown/Dropdown.stories.js

@@ -0,0 +1,41 @@
+import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
+import Component from "./Dropdown.Story.svelte";
+
+export default { title: "Dropdown", decorators: [withKnobs] };
+
+const types = {
+  "Default (default)": "default",
+  "Inline (inline)": "inline",
+};
+
+const sizes = {
+  "Extra large size (xl)": "xl",
+  "Regular size (lg)": "",
+  "Small size (sm)": "sm",
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    id: text("Dropdown id", "carbon-dropdown-id"),
+    name: text("Dropdown name", "carbon-dropdown-name"),
+    type: select("Dropdown type (type)", types, "default"),
+    size: select("Field size (size)", sizes, "") || undefined,
+    label: text("Label (label)", "Dropdown menu options"),
+    "aria-label": text("Aria Label (aria-label)", "Dropdown"),
+    disabled: boolean("Disabled (disabled)", false),
+    light: boolean("Light variant (light)", false),
+    titleText: text("Title (titleText)", "This is not a dropdown title."),
+    helperText: text(
+      "Helper text (helperText)",
+      "This is not some helper text."
+    ),
+    invalid: boolean("Show form validation UI (invalid)", false),
+    invalidText: text(
+      "Form validation UI content (invalidText)",
+      "A valid value is required"
+    ),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/Dropdown/Dropdown.svelte

@@ -0,0 +1,155 @@
+<script>
+  export let selectedIndex = -1;
+  export let open = false;
+  export let inline = false;
+  export let light = false;
+  export let disabled = false;
+  export let invalid = false;
+  export let items = [];
+  export let itemToString = item => item.text || item.id;
+  export let type = "default"; // "default" | "inline"
+  export let size = undefined; // "sm" | "lg" | "xl"
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let invalidText = "";
+  export let helperText = "";
+  export let label = undefined;
+  export let titleText = "";
+  export let translateWithId = undefined;
+  export let ref = null;
+
+  import { setContext } from "svelte";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import {
+    ListBox,
+    ListBoxMenu,
+    ListBoxMenuIcon,
+    ListBoxMenuItem
+  } from "../ListBox";
+
+  let selectedId = undefined;
+  let highlightedIndex = -1;
+
+  function change(direction) {
+    let index = highlightedIndex + direction;
+
+    if (index < 0) {
+      index = items.length - 1;
+    } else if (index >= items.length) {
+      index = 0;
+    }
+
+    highlightedIndex = index;
+  }
+
+  $: inline = type === "inline";
+  $: selectedItem = items[selectedIndex];
+  $: if (!open) {
+    highlightedIndex = -1;
+  }
+</script>
+
+<svelte:body
+  on:click={({ target }) => {
+    if (open && ref && !ref.contains(target)) {
+      open = false;
+    }
+  }} />
+
+<div
+  class:bx--dropdown__wrapper={true}
+  class:bx--list-box__wrapper={true}
+  class:bx--dropdown__wrapper--inline={inline}
+  class:bx--list-box__wrapper--inline={inline}
+  class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
+  {...$$restProps}>
+  {#if titleText}
+    <label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
+      {titleText}
+    </label>
+  {/if}
+  {#if !inline && helperText}
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}>
+      {helperText}
+    </div>
+  {/if}
+  <ListBox
+    {type}
+    {size}
+    {id}
+    {name}
+    aria-label={$$props['aria-label']}
+    class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
+    {open && 'bx--dropdown--open'}
+    {inline && 'bx--dropdown--inline'}
+    {disabled && 'bx--dropdown--disabled'}
+    {light && 'bx--dropdown--light'}"
+    on:click={({ target }) => {
+      open = ref.contains(target) ? !open : false;
+    }}
+    {disabled}
+    {open}
+    {invalid}
+    {invalidText}
+    {light}>
+    {#if invalid}
+      <WarningFilled16 class="bx--list-box__invalid-icon" />
+    {/if}
+    <button
+      bind:this={ref}
+      class:bx--list-box__field={true}
+      tabindex="0"
+      role="button"
+      aria-expanded={open}
+      on:keydown={({ key }) => {
+        if (key === 'Enter') {
+          open = !open;
+          if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
+            selectedIndex = highlightedIndex;
+            open = false;
+          }
+        } else if (key === 'Tab') {
+          open = false;
+          ref.blur();
+        } else if (key === 'ArrowDown') {
+          change(1);
+        } else if (key === 'ArrowUp') {
+          change(-1);
+        }
+      }}
+      on:blur={({ relatedTarget }) => {
+        if (relatedTarget) {
+          ref.focus();
+        }
+      }}
+      {disabled}
+      {translateWithId}
+      {id}>
+      <span class="bx--list-box__label">
+        {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
+      </span>
+      <ListBoxMenuIcon {open} {translateWithId} />
+    </button>
+    {#if open}
+      <ListBoxMenu aria-labelledby={id} {id}>
+        {#each items as item, i (item.id || i)}
+          <ListBoxMenuItem
+            id={item.id}
+            active={selectedIndex === i || selectedId === item.id}
+            highlighted={highlightedIndex === i || selectedIndex === i}
+            on:click={() => {
+              selectedId = item.id;
+              selectedIndex = i;
+            }}
+            on:mouseenter={() => {
+              highlightedIndex = i;
+            }}>
+            {itemToString(item)}
+          </ListBoxMenuItem>
+        {/each}
+      </ListBoxMenu>
+    {/if}
+  </ListBox>
+</div>

src/Dropdown/index.js

@@ -0,0 +1,2 @@
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as DropdownSkeleton } from "./Dropdown.Skeleton.svelte";