chore(svelte): include boolean variant

joe-bell · Jul 14, 2023 · 2db9cb8 · 2db9cb8
1 parent f852ab6
commit 2db9cb8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/examples/svelte/src/App.svelte b/examples/svelte/src/App.svelte
@@ -3,29 +3,42 @@
 
   const intents = [undefined, "primary", "secondary"] as const;
   const sizes = [undefined, "medium", "small"] as const;
+  const isDisabled = [false, true] as const;
 </script>
 
 <table class="variant-table">
   <thead>
     <tr>
+      <th />
       <th />
       {#each intents as intent}
         <th scope="col">{intent || "default"}</th>
       {/each}
     </tr>
   </thead>
   <tbody>
-    {#each sizes as size}
-      <tr>
-        <th scope="row">{size || "default"}</th>
-        {#each intents as intent}
-          <td>
-            <Button {...intent && { intent }} {...size && { size }}>
-              {intent || "default"} button
-            </Button>
-          </td>
-        {/each}
-      </tr>
+    {#each isDisabled as disabled}
+      {#each sizes as size, index}
+        <tr>
+          {#if index === 0}
+            <th scope="rowgroup" rowSpan={3}>
+              {disabled ? "disabled" : "enabled"}
+            </th>
+          {/if}
+          <th scope="row">{size || "default"}</th>
+          {#each intents as intent}
+            <td>
+              <Button
+                {...intent && { intent }}
+                {...size && { size }}
+                {...disabled && { disabled }}
+              >
+                {intent || "default"} button
+              </Button>
+            </td>
+          {/each}
+        </tr>
+      {/each}
     {/each}
   </tbody>
 </table>

diff --git a/examples/svelte/src/components/button.svelte b/examples/svelte/src/components/button.svelte
@@ -12,6 +12,10 @@
         small: "small",
         medium: "medium",
       },
+      disabled: {
+        false: "enabled",
+        true: "disabled",
+      },
     },
     compoundVariants: [
       { intent: "primary", size: "medium", class: "primaryMedium" },
@@ -26,9 +30,14 @@
    */
   export let intent: $$Props["intent"] = "primary";
   export let size: $$Props["size"] = "medium";
+  export let disabled: $$Props["disabled"] = false;
 </script>
 
-<button {...$$props} class={button({ intent, size, class: $$props.class })}>
+<button
+  {...$$props}
+  class={button({ intent, size, disabled, class: $$props.class })}
+  {disabled}
+>
   <slot />
 </button>
 
@@ -45,7 +54,7 @@
     border: transparent;
   }
 
-  .primary:hover {
+  .primary.enabled:hover {
     background-color: rgb(37 99 235);
   }
 
@@ -55,7 +64,7 @@
     border-color: rgb(156 163 175);
   }
 
-  .secondary:hover {
+  .secondary.enabled:hover {
     background-color: rgb(243 244 246);
   }
 
@@ -74,4 +83,9 @@
   .primaryMedium {
     text-transform: uppercase;
   }
+
+  .disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 </style>