feat: initial commit

src/components/Accordion/Accordion.Skeleton.svelte

@@ -0,0 +1,39 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let open = true;
+  export let count = 4;
+  export let props = {};
+
+  import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
+  import { cx } from '../../lib';
+  import SkeletonText from '../SkeletonText';
+
+  const _class = cx('--accordion', '--skeleton', className);
+  const skeletonItems = Array.from({ length: open ? count - 1 : count });
+</script>
+
+<ul class={_class} {...props}>
+  {#if open}
+    <li class={cx('--accordion__item', '--accordion__item--active')}>
+      <span class={cx('--accordion__heading')}>
+        <ChevronRight16 class={cx('--accordion__arrow')} />
+        <SkeletonText class={cx('--accordion__title')} />
+      </span>
+      <div class={cx('--accordion__content')}>
+        <SkeletonText width="90%" />
+        <SkeletonText width="80%" />
+        <SkeletonText width="95%" />
+      </div>
+    </li>
+  {/if}
+
+  {#each skeletonItems as item}
+    <li class={cx('--accordion__item')}>
+      <span class={cx('--accordion__heading')}>
+        <ChevronRight16 class={cx('--accordion__arrow')} />
+        <SkeletonText class={cx('--accordion__title')} />
+      </span>
+    </li>
+  {/each}
+</ul>

src/components/Accordion/Accordion.Story.svelte

@@ -0,0 +1,55 @@
+<script>
+  export let story = undefined;
+  export let title = undefined;
+  export let open = undefined;
+  export let count = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Accordion from './Accordion.svelte';
+  import AccordionItem from './AccordionItem.svelte';
+  import AccordionSkeleton from './Accordion.Skeleton.svelte';
+</script>
+
+<Layout>
+  {#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}
+</Layout>

src/components/Accordion/Accordion.stories.js

@@ -0,0 +1,21 @@
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import Component from './Accordion.Story.svelte';
+
+export default { title: 'Accordion', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    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/components/Accordion/Accordion.svelte

@@ -0,0 +1,11 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let props = {};
+
+  import { cx } from '../../lib';
+</script>
+
+<ul {...props} class={cx('--accordion', className)}>
+  <slot />
+</ul>

src/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,62 @@
+<script>
+  // NOTE: no 'renderExpando'; use 'expando' named slot
+  // TODO: change 'expando' to something more intuitive?
+  let className = undefined;
+  export { className as class };
+  export let title = undefined;
+  export let iconDescription = 'Expand/Collapse';
+  export let open = false;
+  export let props = {};
+
+  import { createEventDispatcher } from 'svelte';
+  import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
+  import { cx } from '../../lib';
+
+  const dispatch = createEventDispatcher();
+  let animation = undefined;
+
+  function handleAnimationEnd(event) {
+    animation = undefined;
+  }
+
+  function handleClick(event) {
+    animation = open ? 'collapsing' : 'expanding';
+    open = !open;
+    dispatch('headingclick', { open, event });
+  }
+
+  function handleKeyDown(event) {
+    if (open && event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  $: _class = cx(
+    '--accordion__item',
+    open && '--accordion__item--active',
+    animation && `--accordion__item--${animation}`,
+    className
+  );
+  $: accordionItemProps = {
+    type: 'button',
+    class: cx('--accordion__heading'),
+    title: iconDescription,
+    'aria-expanded': open,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  };
+</script>
+
+<li class={_class} {...props} on:animationend on:animationend={handleAnimationEnd}>
+  <slot name="expando" props={accordionItemProps}>
+    <button {...accordionItemProps} on:click={handleClick} on:keydown={handleKeyDown}>
+      <ChevronRight16 class={cx('--accordion__arrow')} aria-label={iconDescription} />
+      <div class={cx('--accordion__title')}>
+        <slot name="title">{title}</slot>
+      </div>
+    </button>
+  </slot>
+  <div class={cx('--accordion__content')}>
+    <slot />
+  </div>
+</li>

src/components/Accordion/index.js

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