Add spectrum checkbox component

packages/bbui/package.json

@@ -39,9 +39,10 @@
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/button": "^3.0.1",
     "@spectrum-css/buttongroup": "^3.0.1",
-    "@spectrum-css/checkbox": "^3.0.1",
+    "@spectrum-css/checkbox": "^3.0.2",
     "@spectrum-css/dialog": "^3.0.1",
     "@spectrum-css/divider": "^1.0.1",
+    "@spectrum-css/fieldgroup": "^3.0.2",
     "@spectrum-css/fieldlabel": "^3.0.1",
     "@spectrum-css/icon": "^3.0.1",
     "@spectrum-css/label": "^2.0.9",
@@ -53,8 +54,8 @@
     "@spectrum-css/progressbar": "^1.0.2",
     "@spectrum-css/progresscircle": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
-    "@spectrum-css/textfield": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
+    "@spectrum-css/textfield": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
     "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",

packages/bbui/src/Form/Checkbox.svelte

@@ -1,140 +1,22 @@
 <script>
+  import Field from "./Field.svelte"
+  import Checkbox from "./Core/Checkbox.svelte"
   import { createEventDispatcher } from "svelte"
 
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let text = null
+  export let disabled = false
+  export let error = null
+
   const dispatch = createEventDispatcher()
-
+  const onChange = e => {
-  export let checked = false
+    dispatch("change", e.detail)
-  export let value
+    value = e.detail
-  export let name
-  export let disabled
-
-  function handleChange() {
-    if (disabled) return
-    checked = !checked
-    dispatch("change", checked)
   }
 </script>
 
-<div class="container">
+<Field {label} {labelPosition} {disabled} {error}>
-  <input
+  <Checkbox {error} {disabled} {text} {value} on:change={onChange} />
-    {disabled}
+</Field>
-    on:change={handleChange}
-    {value}
-    bind:checked
-    type="checkbox"
-    {name}
-    class="checkbox"
-    id={value} />
-  <div class="checkbox-container" on:click={handleChange}>
-    <div class:disabled class="check-div" class:checked>
-      <div class="tick_mark" />
-    </div>
-  </div>
-  <slot />
-</div>
-
-<style>
-  .container {
-    display: flex;
-    gap: var(--spacing-s);
-  }
-  .checkbox-container {
-    position: relative;
-    z-index: 0;
-  }
-
-  .checkbox {
-    display: none;
-  }
-
-  .check-div {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    background-color: var(--grey-2);
-    cursor: pointer;
-    transition: 0.2s ease transform, 0.2s ease background-color,
-      0.2s ease box-shadow;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-
-  .check-div:before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    left: 0;
-    width: 12px;
-    height: 12px;
-    margin: 0 auto;
-    background-color: var(--background);
-    transform: translateY(-50%);
-    transition: 0.2s ease width, 0.2s ease height;
-    border-radius: 2px;
-  }
-
-  .check-div:active {
-    transform: translateY(-50%) scale(0.9);
-  }
-
-  .tick_mark {
-    position: absolute;
-    top: 50%;
-    left: 6px;
-    width: 5px;
-    height: 4px;
-    margin: 0 auto;
-    transform: rotateZ(-40deg);
-  }
-
-  .tick_mark:before,
-  .tick_mark:after {
-    content: "";
-    position: absolute;
-    background-color: var(--ink);
-    border-radius: 2px;
-    opacity: 0;
-    transition: 0.2s ease transform, 0.2s ease opacity;
-  }
-
-  .tick_mark:before {
-    left: 0;
-    bottom: 0;
-    width: 2px;
-    height: 6px;
-    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
-    transform: translateY(-68px);
-  }
-
-  .tick_mark:after {
-    left: 0;
-    bottom: 0;
-    width: 12px;
-    height: 2px;
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
-    transform: translateX(78px);
-  }
-
-  .check-div.disabled:active {
-    transform: none;
-  }
-
-  .checked {
-    background-color: var(--grey-2);
-  }
-  .checked.disabled {
-    background-color: var(--grey-5);
-  }
-
-  .checked:before {
-    width: 0;
-    height: 0;
-  }
-
-  .checked .tick_mark:before,
-  .checked .tick_mark:after {
-    transform: translate(0);
-    opacity: 1;
-  }
-</style>

packages/bbui/src/Form/Core/Checkbox.svelte

@@ -0,0 +1,43 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let error = null
+  export let fieldId = null
+  export let text = null
+  export let disabled = false
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+  class:is-invalid={!!error}>
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    id={fieldId} />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+  <span class="spectrum-Checkbox-label">{text || ''}</span>
+</label>

packages/bbui/src/Form/Core/index.js

@@ -1,3 +1,4 @@
 export { default as CoreTextField } from "./TextField.svelte"
 export { default as CoreSelect } from "./Select.svelte"
 export { default as CoreMultiselect } from "./Multiselect.svelte"
+export { default as Checkbox } from "./Checkbox.svelte"

packages/bbui/yarn.lock

@@ -84,7 +84,7 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-3.0.2.tgz#fd3387973ca3131609e32112de42a1c0400a48d8"
   integrity sha512-Wu7B4GJ/SAeVHz9SUGAkeIH8pLaZh4t+w2ykSKOPQIRuK2jCBoudkEClVxviNVwqekccf5XLFXg9GpYF1a3Uaw==
 
-"@spectrum-css/checkbox@^3.0.1":
+"@spectrum-css/checkbox@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.2.tgz#53ca2fba0d9faa1fead10e7206eb1f6cdcfd6ddd"
   integrity sha512-hPbGcnm7kJvJS4jp/P/bdaZvbyR1eIE9mteuZqcBgdmyp9m/k6+mW5jmsbtqb3Y4mMPWvOJFfz/sIvWJP0F0Zg==
@@ -101,6 +101,11 @@
   dependencies:
     "@spectrum-css/vars" "^3.0.2"
 
+"@spectrum-css/fieldgroup@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldgroup/-/fieldgroup-3.0.2.tgz#1c1afd3c444d8650fefac275dc66a7a913933846"
+  integrity sha512-Vyw0kQJdLW18J6w4H+YAsoLntvkw5rXmW3CH5H3SDTXkBztxtHSSe3e106Nw5MoZxTfHlom6CxbYXYCTjQfqGw==
+
 "@spectrum-css/fieldlabel@^3.0.1":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.2.tgz#9c6d28e2c43f019cafa2bb75b54c8bc540669912"
@@ -2355,6 +2360,7 @@ simple-swizzle@^0.2.2:
     is-arrayish "^0.3.1"
 
 "source-map-fast@npm:source-map@0.7.3", source-map@~0.7.2:
+  name source-map-fast
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==