From bd6bd15c7936fabb304a191c07f56f058eaccaf6 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 24 Jul 2020 17:14:12 -0700
Subject: [PATCH] feat: support skeleton prop

---
 src/Accordion/Accordion.svelte     |  7 ++-
 src/Breadcrumb/Breadcrumb.svelte   | 38 ++++++++----
 src/Button/Button.svelte           | 96 +++++++++++++++++-------------
 src/Checkbox/Checkbox.svelte       | 71 ++++++++++++----------
 src/CodeSnippet/CodeSnippet.svelte | 12 +++-
 5 files changed, 136 insertions(+), 88 deletions(-)

diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index d08817c4..57bf1171 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -6,7 +6,12 @@
 </script>
 
 {#if skeleton}
-  <AccordionSkeleton {...$$restProps} />
+  <AccordionSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
 {:else}
   <ul
     class:bx--accordion={true}
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index df66126d..b49c9e28 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -1,17 +1,29 @@
 <script>
   export let noTrailingSlash = false;
+  export let skeleton = false;
+
+  import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
 </script>
 
-<nav
-  aria-label="Breadcrumb"
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave>
-  <ol
-    class:bx--breadcrumb={true}
-    class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
-    <slot />
-  </ol>
-</nav>
+{#if skeleton}
+  <BreadcrumbSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  <nav
+    aria-label="Breadcrumb"
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <ol
+      class:bx--breadcrumb={true}
+      class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
+      <slot />
+    </ol>
+  </nav>
+{/if}
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 6622f0b2..01330a2e 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -1,5 +1,6 @@
 <script>
   export let as = undefined;
+  export let skeleton = false;
   export let disabled = false;
   export let href = undefined;
   export let icon = undefined;
@@ -14,6 +15,7 @@
   export let ref = null;
 
   import { getContext } from "svelte";
+  import ButtonSkeleton from "./Button.Skeleton.svelte";
 
   const ctx = getContext("ComposedModal");
 
@@ -40,54 +42,66 @@
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,
-      $$restProps.class
+      $$restProps.class,
     ]
       .filter(Boolean)
-      .join(" ")
+      .join(" "),
   };
 </script>
 
-{#if as}
-  <slot props={buttonProps} />
-{:else if href && !disabled}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <a
-    bind:this={ref}
-    {...buttonProps}
+{#if skeleton}
+  <ButtonSkeleton
+    {href}
+    small={size === 'small'}
+    {...$$restProps}
+    style={hasIconOnly && 'width: 3rem;'}
     on:click
     on:mouseover
     on:mouseenter
-    on:mouseleave>
-    {#if hasIconOnly}
-      <span class:bx--assistive-text={true}>{iconDescription}</span>
-    {/if}
-    <slot />
-    {#if icon}
-      <svelte:component
-        this={icon}
-        aria-hidden="true"
-        class="bx--btn__icon"
-        aria-label={iconDescription} />
-    {/if}
-  </a>
+    on:mouseleave />
 {:else}
-  <button
-    bind:this={ref}
-    {...buttonProps}
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave>
-    {#if hasIconOnly}
-      <span class:bx--assistive-text={true}>{iconDescription}</span>
-    {/if}
-    <slot />
-    {#if icon}
-      <svelte:component
-        this={icon}
-        aria-hidden="true"
-        class="bx--btn__icon"
-        aria-label={iconDescription} />
-    {/if}
-  </button>
+  {#if as}
+    <slot props={buttonProps} />
+  {:else if href && !disabled}
+    <!-- svelte-ignore a11y-missing-attribute -->
+    <a
+      bind:this={ref}
+      {...buttonProps}
+      on:click
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
+      {#if hasIconOnly}
+        <span class:bx--assistive-text={true}>{iconDescription}</span>
+      {/if}
+      <slot />
+      {#if icon}
+        <svelte:component
+          this={icon}
+          aria-hidden="true"
+          class="bx--btn__icon"
+          aria-label={iconDescription} />
+      {/if}
+    </a>
+  {:else}
+    <button
+      bind:this={ref}
+      {...buttonProps}
+      on:click
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
+      {#if hasIconOnly}
+        <span class:bx--assistive-text={true}>{iconDescription}</span>
+      {/if}
+      <slot />
+      {#if icon}
+        <svelte:component
+          this={icon}
+          aria-hidden="true"
+          class="bx--btn__icon"
+          aria-label={iconDescription} />
+      {/if}
+    </button>
+  {/if}
 {/if}
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index a2d34c57..27346df6 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -1,4 +1,5 @@
 <script>
+  export let skeleton = false;
   export let indeterminate = false;
   export let readonly = false;
   export let checked = false;
@@ -11,39 +12,49 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
+  import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
 
   const dispatch = createEventDispatcher();
 
   $: dispatch("check", checked);
 </script>
 
-<div
-  class:bx--form-item={true}
-  class:bx--checkbox-wrapper={true}
-  {...$$restProps}
-  on:click
-  on:mouseover
-  on:mouseenter
-  on:mouseleave>
-  <input
-    bind:this={ref}
-    type="checkbox"
-    {checked}
-    {disabled}
-    {id}
-    {indeterminate}
-    {name}
-    {readonly}
-    class:bx--checkbox={true}
-    on:change
-    on:change={() => {
-      checked = !checked;
-    }} />
-  <label class:bx--checkbox-label={true} for={id} {title}>
-    <span
-      class:bx--checkbox-label-text={true}
-      class:bx--visually-hidden={hideLabel}>
-      {labelText}
-    </span>
-  </label>
-</div>
+{#if skeleton}
+  <CheckboxSkeleton
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
+{:else}
+  <div
+    class:bx--form-item={true}
+    class:bx--checkbox-wrapper={true}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave>
+    <input
+      bind:this={ref}
+      type="checkbox"
+      {checked}
+      {disabled}
+      {id}
+      {indeterminate}
+      {name}
+      {readonly}
+      class:bx--checkbox={true}
+      on:change
+      on:change={() => {
+        checked = !checked;
+      }} />
+    <label class:bx--checkbox-label={true} for={id} {title}>
+      <span
+        class:bx--checkbox-label-text={true}
+        class:bx--visually-hidden={hideLabel}>
+        {labelText}
+      </span>
+    </label>
+  </div>
+{/if}
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
index c0887296..49246e9a 100644
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@@ -1,6 +1,7 @@
 <script>
   export let type = "single"; // "single" | "inline" | "multi"
   export let code = undefined;
+  export let expanded = false;
   export let light = false;
   export let skeleton = false;
   export let copyButtonDescription = undefined;
@@ -9,6 +10,7 @@
   export let feedbackTimeout = 2000;
   export let showLessText = "Show less";
   export let showMoreText = "Show more";
+  export let showMoreLess = false;
   export let id = "ccs-" + Math.random().toString(36);
   export let ref = null;
 
@@ -19,8 +21,6 @@
   import { CopyButton } from "../CopyButton";
   import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
 
-  $: showMoreLess = false;
-  $: expanded = false;
   $: expandText = expanded ? showLessText : showMoreText;
 
   afterUpdate(() => {
@@ -31,7 +31,13 @@
 </script>
 
 {#if skeleton}
-  <CodeSnippetSkeleton {type} {...$$restProps} />
+  <CodeSnippetSkeleton
+    {type}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave />
 {:else}
   {#if type === 'inline'}
     <Copy