docs: display button variants

docs/src/routes/_layout.svelte

@@ -1,14 +1,67 @@
 <script>
   export let segment = undefined;
 
-  import { Content } from "carbon-components-svelte";
+  import {
+    Grid,
+    Row,
+    Column,
+    Breadcrumb,
+    BreadcrumbItem,
+    Content,
+  } from "carbon-components-svelte";
   import GlobalHeader from "../components/GlobalHeader.svelte";
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  const tail = writable(undefined);
+
+  const urlIds = {
+    about: "About",
+    components: "Components",
+  };
+
+  setContext("navigation", {
+    tail,
+    setTail: (value) => {
+      tail.set(value);
+    },
+  });
 </script>
 
+<style>
+  :global(.bx--content) {
+    padding: 0;
+  }
+</style>
+
 {#if segment !== 'examples'}
   <GlobalHeader {segment} />
   <Content>
-    <slot />
+    <Grid>
+      <Row>
+        <Column>
+          <Breadcrumb style="margin-top: 1rem">
+            <BreadcrumbItem href="." isCurrentPage={!$tail && !segment}>
+              Home
+            </BreadcrumbItem>
+            {#if segment}
+              <BreadcrumbItem href={segment} isCurrentPage={!$tail}>
+                {urlIds[segment]}
+              </BreadcrumbItem>
+            {/if}
+            {#if segment && $tail}
+              <BreadcrumbItem
+                href="{segment}/{$tail.slug}"
+                isCurrentPage
+                hideTrailingSlash>
+                {$tail.title}
+              </BreadcrumbItem>
+            {/if}
+          </Breadcrumb>
+          <slot />
+        </Column>
+      </Row>
+    </Grid>
   </Content>
 {:else}
   <slot />

docs/src/routes/components/[slug].svelte

@@ -14,25 +14,53 @@
 <script>
   export let data = {};
 
-  import { onMount } from "svelte";
+  import { onMount, getContext } from "svelte";
+
+  const ctx = getContext("navigation");
 
   let component = undefined;
 
   onMount(async () => {
+    ctx.setTail(data);
+
     try {
       component = await import(`../examples/${data.title}.svelte`);
     } catch (e) {
-      console.log(e);
+      console.error(e);
     }
+
+    return () => {
+      ctx.setTail(undefined);
+    };
   });
 </script>
 
+<style>
+  .preview {
+    margin-left: -1rem;
+    margin-right: -1rem;
+    padding: 1rem;
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+
+  :global(.preview > div) {
+    margin-bottom: 1rem;
+  }
+
+  h1 {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+</style>
+
 <svelte:head>
   <title>{data.title}</title>
 </svelte:head>
 
 <h1>{data.title}</h1>
-
-{#if component}
-  <svelte:component this={component.default} />
-{/if}
+<div class="preview">
+  {#if component}
+    <svelte:component this={component.default} />
+  {/if}
+</div>

docs/src/routes/components/index.svelte

@@ -1,23 +1,48 @@
 <script context="module">
   export function preload() {
     return this.fetch("components.json")
-      .then(r => r.json())
-      .then(data => ({ data }));
+      .then((r) => r.json())
+      .then((data) => ({ data }));
   }
 </script>
 
 <script>
   export let data = [];
 
+  import { getContext, onMount } from "svelte";
   import { UnorderedList, ListItem, Link } from "carbon-components-svelte";
+
+  const ctx = getContext("navigation");
+
+  let tail = undefined;
+
+  const unsubscribe = ctx.tail.subscribe((value) => {
+    tail = value;
+  });
+
+  onMount(() => {
+    if (tail) {
+      ctx.setTail(undefined);
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  });
 </script>
 
+<style>
+  h1 {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+</style>
+
 <svelte:head>
   <title>Components</title>
 </svelte:head>
 
 <h1>Components</h1>
-
 <UnorderedList>
   {#each data as data, i (data.title)}
     <ListItem>

docs/src/routes/examples/Button.svelte

@@ -1,8 +1,41 @@
 <script>
   import { Button } from "carbon-components-svelte";
+  import Add16 from "carbon-icons-svelte/lib/Add16";
 </script>
 
-<Button kind="primary">Primary button</Button>
-<Button kind="secondary">Secondary button</Button>
-<Button kind="tertiary">Tertiary button</Button>
-<Button kind="ghost">Ghost button</Button>
+<div>
+  <Button
+    data-test="button-primary"
+    kind="primary"
+    on:click={() => console.log('click')}
+    on:mouseover={() => console.log('mouseover')}
+    on:mouseenter={() => console.log('mouseenter')}
+    on:mouseleave={() => console.log('mouseleave')}>
+    Primary button
+  </Button>
+  <Button kind="secondary">Secondary button</Button>
+  <Button kind="tertiary">Tertiary button</Button>
+  <Button kind="ghost">Ghost button</Button>
+  <Button kind="danger">Danger button</Button>
+</div>
+<div>
+  <Button kind="primary" size="field">Primary button</Button>
+  <Button kind="secondary" size="field">Secondary button</Button>
+  <Button kind="tertiary" size="field">Tertiary button</Button>
+  <Button kind="ghost" size="field">Ghost button</Button>
+  <Button kind="danger" size="field">Danger button</Button>
+</div>
+<div>
+  <Button kind="primary" size="small">Primary button</Button>
+  <Button kind="secondary" size="small">Secondary button</Button>
+  <Button kind="tertiary" size="small">Tertiary button</Button>
+  <Button kind="ghost" size="small">Ghost button</Button>
+  <Button kind="danger" size="small">Danger button</Button>
+</div>
+<div>
+  <Button kind="primary" size="small" icon={Add16}>Primary button</Button>
+  <Button kind="secondary" size="small" icon={Add16}>Secondary button</Button>
+  <Button kind="tertiary" size="small" icon={Add16}>Tertiary button</Button>
+  <Button kind="ghost" size="small" icon={Add16}>Ghost button</Button>
+  <Button kind="danger" size="small" icon={Add16}>Danger button</Button>
+</div>

docs/src/routes/examples/_layout.svelte

@@ -1 +0,0 @@
-<slot />