docs: display button variants

docs/cypress.json

@@ -1,5 +1,5 @@
 {
   "baseUrl": "http://localhost:3000",
   "video": false,
-  "defaultCommandTimeout": 1000
+  "defaultCommandTimeout": 20
 }

docs/cypress/integration/Button.js

@@ -8,4 +8,22 @@ describe("Button", () => {
       expect($.length).to.eql(4);
     });
   });
+
+  it.only("clicks", () => {
+    cy.get('[data-test="button-primary"]')
+      .as("btn")
+      .contains("Primary button");
+
+    cy.get("@btn").trigger("click");
+    cy.get("@log").should("be.calledWith", "click");
+
+    cy.get("@btn").trigger("mouseover");
+    cy.get("@log").should("be.calledWith", "mouseover");
+
+    cy.get("@btn").trigger("mouseenter");
+    cy.get("@log").should("be.calledWith", "mouseenter");
+
+    cy.get("@btn").trigger("mouseleave");
+    cy.get("@log").should("be.calledWith", "mouseleave");
+  });
 });

docs/cypress/support/commands.js

@@ -1,3 +1,7 @@
 Cypress.Commands.add("examples", (component) => {
-  cy.visit(`/examples/${component}`);
+  cy.visit(`/examples/${component}`, {
+    onBeforeLoad(win) {
+      cy.stub(win.console, "log").as("log");
+    },
+  });
 });

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 />

docs/yarn.lock

@@ -633,15 +633,15 @@ camel-case@^3.0.0:
     upper-case "^1.1.1"
 
 carbon-components-svelte@../:
-  version "0.7.6"
+  version "0.8.5"
   dependencies:
-    carbon-icons-svelte "^10.13.0"
+    carbon-icons-svelte "^10.14.0"
     flatpickr "4.6.3"
 
-carbon-icons-svelte@^10.13.0:
-  version "10.13.0"
-  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.13.0.tgz#fbb3d863901bee94418e8caf2959777655edfa78"
-  integrity sha512-WXEr+cE1IXtYQspp3cwE2l2qlYUeHWd46wyqYM2PJ3Qw5n4tPD7OCs+MZa6hmOaziv/fns+uYMeeisGvJp5Slg==
+carbon-icons-svelte@^10.14.0:
+  version "10.14.0"
+  resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.14.0.tgz#a26984db41bb3b04afcabfdbcf481d0387c4763b"
+  integrity sha512-Ucfy6A0GtvCxBPNCuUaFj7QsxV6hN/R8E8L/RMoytdrkZFD+tkl5pUVOHypcmYYZF7Dumnxr6ePr2bvwyTs5lg==
 
 caseless@~0.12.0:
   version "0.12.0"