From 9aa01ce5fbb5ebe9b9b67a504ff4a50bc65cb7cd Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 23 Jul 2020 19:38:09 -0700
Subject: [PATCH] docs: display button variants

---
 docs/cypress.json                        |  2 +-
 docs/cypress/integration/Button.js       | 18 ++++++++
 docs/cypress/support/commands.js         |  6 ++-
 docs/src/routes/_layout.svelte           | 57 +++++++++++++++++++++++-
 docs/src/routes/components/[slug].svelte | 40 ++++++++++++++---
 docs/src/routes/components/index.svelte  | 31 +++++++++++--
 docs/src/routes/examples/Button.svelte   | 41 +++++++++++++++--
 docs/src/routes/examples/_layout.svelte  |  1 -
 docs/yarn.lock                           | 12 ++---
 9 files changed, 184 insertions(+), 24 deletions(-)
 delete mode 100644 docs/src/routes/examples/_layout.svelte

diff --git a/docs/cypress.json b/docs/cypress.json
index f2f24765..66d2b558 100644
--- a/docs/cypress.json
+++ b/docs/cypress.json
@@ -1,5 +1,5 @@
 {
   "baseUrl": "http://localhost:3000",
   "video": false,
-  "defaultCommandTimeout": 1000
+  "defaultCommandTimeout": 20
 }
diff --git a/docs/cypress/integration/Button.js b/docs/cypress/integration/Button.js
index 9eda6102..52372707 100644
--- a/docs/cypress/integration/Button.js
+++ b/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");
+  });
 });
diff --git a/docs/cypress/support/commands.js b/docs/cypress/support/commands.js
index 5003b2cf..163629b8 100644
--- a/docs/cypress/support/commands.js
+++ b/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");
+    },
+  });
 });
diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte
index a8c7cb46..966b9f39 100644
--- a/docs/src/routes/_layout.svelte
+++ b/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 />
diff --git a/docs/src/routes/components/[slug].svelte b/docs/src/routes/components/[slug].svelte
index f6f0076a..3bfb7173 100644
--- a/docs/src/routes/components/[slug].svelte
+++ b/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>
diff --git a/docs/src/routes/components/index.svelte b/docs/src/routes/components/index.svelte
index 348c85ae..5a048cda 100644
--- a/docs/src/routes/components/index.svelte
+++ b/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>
diff --git a/docs/src/routes/examples/Button.svelte b/docs/src/routes/examples/Button.svelte
index b485cc4e..929f60a2 100644
--- a/docs/src/routes/examples/Button.svelte
+++ b/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>
diff --git a/docs/src/routes/examples/_layout.svelte b/docs/src/routes/examples/_layout.svelte
deleted file mode 100644
index 4fa864ce..00000000
--- a/docs/src/routes/examples/_layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/docs/yarn.lock b/docs/yarn.lock
index ded42162..1e8da793 100644
--- a/docs/yarn.lock
+++ b/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"