chore: lift components folder

src/Accordion/Accordion.Skeleton.svelte

@@ -0,0 +1,40 @@
+<script>
+  export let count = 4;
+  export let open = true;
+
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import { SkeletonText } from "../SkeletonText";
+</script>
+
+<ul
+  class:bx--accordion={true}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#if open}
+    <li
+      class:bx--accordion__item={true}
+      class:bx--accordion__item--active={true}>
+      <span class:bx--accordion__heading={true}>
+        <ChevronRight16 class="bx--accordion__arrow" />
+        <SkeletonText class="bx--accordion__title" />
+      </span>
+      <div class="bx--accordion__content">
+        <SkeletonText width="90%" />
+        <SkeletonText width="80%" />
+        <SkeletonText width="95%" />
+      </div>
+    </li>
+  {/if}
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
+    <li class="bx--accordion__item">
+      <span class="bx--accordion__heading">
+        <ChevronRight16 class="bx--accordion__arrow" />
+        <SkeletonText class="bx--accordion__title" />
+      </span>
+    </li>
+  {/each}
+</ul>

src/Accordion/Accordion.Story.svelte

@@ -0,0 +1,56 @@
+<script>
+  export let story = undefined;
+  export let title = undefined;
+  export let open = undefined;
+  export let count = undefined;
+
+  import Accordion from "./Accordion.svelte";
+  import AccordionItem from "./AccordionItem.svelte";
+  import AccordionSkeleton from "./Accordion.Skeleton.svelte";
+</script>
+
+{#if story === 'skeleton'}
+  <div style="width: 500px">
+    <AccordionSkeleton {open} {count} />
+  </div>
+{:else}
+  <Accordion>
+    <AccordionItem {title} {open}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 2 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 3 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem>
+      <div slot="title">
+        Section 4 title (
+        <em>the title can be a node</em>
+        )
+      </div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+  </Accordion>
+{/if}

src/Accordion/Accordion.stories.js

@@ -0,0 +1,32 @@
+import {
+  withKnobs,
+  text,
+  boolean,
+  number,
+  select,
+} from "@storybook/addon-knobs";
+import Component from "./Accordion.Story.svelte";
+
+export default { title: "Accordion", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    align: select(
+      "Accordion heading alignment (align)",
+      ["start", "end"],
+      "end"
+    ),
+    title: text("The title (title)", "Section 1 title"),
+    open: boolean("Open the section (open)", false),
+  },
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: {
+    story: "skeleton",
+    open: boolean("Show first item opened (open)", true),
+    count: number("Set number of items (count)", 4),
+  },
+});

src/Accordion/Accordion.svelte

@@ -0,0 +1,21 @@
+<script>
+  export let align = "end"; // "start" | "end"
+  export let skeleton = false;
+
+  import AccordionSkeleton from "./Accordion.Skeleton.svelte";
+</script>
+
+{#if skeleton}
+  <AccordionSkeleton {...$$restProps} />
+{:else}
+  <ul
+    class:bx--accordion={true}
+    class="bx--accordion--{align}"
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <slot />
+  </ul>
+{/if}

src/Accordion/AccordionItem.svelte

@@ -0,0 +1,47 @@
+<script>
+  export let title = "title";
+  export let open = false;
+  export let iconDescription = "Expand/Collapse";
+
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+
+  $: animation = undefined;
+</script>
+
+<li
+  class:bx--accordion__item={true}
+  class:bx--accordion__item--active={open}
+  class="bx--accordion__item--${animation}"
+  {...$$restProps}
+  on:animationend
+  on:animationend={() => {
+    animation = undefined;
+  }}>
+  <button
+    type="button"
+    class:bx--accordion__heading={true}
+    title={iconDescription}
+    aria-expanded={open}
+    on:click
+    on:click={() => {
+      open = !open;
+      animation = open ? 'expanding' : 'collapsing';
+    }}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+    on:keydown={({ key }) => {
+      if (open && key === 'Escape') {
+        open = false;
+      }
+    }}>
+    <ChevronRight16 class="bx--accordion__arrow" aria-label={iconDescription} />
+    <div class="bx--accordion__title">
+      <slot name="title">{title}</slot>
+    </div>
+  </button>
+  <div class="bx--accordion__content">
+    <slot />
+  </div>
+</li>

src/Accordion/index.js

@@ -0,0 +1,3 @@
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { default as AccordionSkeleton } from "./Accordion.Skeleton.svelte";