Merge pull request #65 from ONSdigital/feature/design-system-checkboxes

Feature/design system checkboxes - ticket#85
ONSdigital · Nov 18, 2021 · 3d149ab · 3d149ab
2 parents 8ce47ee + 30b9fff
commit 3d149ab
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 23 deletions.
diff --git a/src/data/test/mockDSData.js b/src/data/test/mockDSData.js
@@ -13,4 +13,10 @@ let cities=[
   { value: "oxford", label: "Oxford" },
 ]
 
-export {ethnicity,cities}
+let checkboxData=[
+    {id:"laptop", value:"laptop", label:"Laptop"},
+    {id:"mobile", value:"mobile", label:"Mobile"},
+    {id:"tablet", value:"tablet", label:"Tablet"},
+] 
+
+export {ethnicity, cities, checkboxData}
diff --git a/src/routes/DesignSystemApp.svelte b/src/routes/DesignSystemApp.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ethnicity, cities } from "../data/test/mockDSData";
+  import { ethnicity, cities, checkboxData  } from "../data/test/mockDSData";
   import ONSCensusApp from "../ui/ons/ONSCensusApp.svelte";
   import ONSAccordion from "../ui/ons/ONSAccordion.svelte";
   import ONSAccordionPanel from "../ui/ons/partials/ONSAccordionPanel.svelte";
@@ -29,6 +29,8 @@
   let selectValue;
   let textFieldValue = "";
   let inputErrorValue = "";
+  let selections = [];
+  let errorSelection = [];
 </script>
 
 <svelte:head>
@@ -88,16 +90,83 @@
 
   <DesignSystemPanel
     title="Checkboxes"
-    code={`<ONSCheckboxes>
-  <ONSCheckbox id="mobile">Mobile</ONSCheckbox>
-  <ONSCheckbox id="laptop">Laptop</ONSCheckbox>
-  <ONSCheckbox id="tablet">Tablet</ONSCheckbox>
-</ONSCheckboxes>`}
+    code={`<ONSCheckboxes
+        name="devices"
+        title="What devices do you own?"
+        checkboxesLabel="Select all that apply"
+        id="1-fieldset"
+        legendIsQuestionTitle
+      >
+        {#each checkboxData as option}
+          <ONSCheckbox
+            id={option.id}
+            value={option.value}
+            labelText={option.label}
+            bind:bindGroup={selections}
+            onChange={(selections) => console.log("User selections: ", selections.join(", "))}
+          />
+        {/each}
+      </ONSCheckboxes>`}
   >
-    <ONSCheckboxes>
-      <ONSCheckbox id="mobile">Mobile</ONSCheckbox>
-      <ONSCheckbox id="laptop">Laptop</ONSCheckbox>
-      <ONSCheckbox id="tablet">Tablet</ONSCheckbox>
+    <ONSCheckboxes
+      name="devices"
+      title="What devices do you own?"
+      checkboxesLabel="Select all that apply"
+      id="1-fieldset"
+      legendIsQuestionTitle
+    >
+      {#each checkboxData as option}
+        <ONSCheckbox
+          id={option.id}
+          value={option.value}
+          labelText={option.label}
+          bind:bindGroup={selections}
+          onChange={(selections) => console.log("User selections: ", selections.join(", "))}
+        />
+      {/each}
+    </ONSCheckboxes>
+    <br />
+    <p>Checkboxes: <strong>{selections}</strong></p>
+  </DesignSystemPanel>
+
+  <DesignSystemPanel
+    title="Checkboxes - error message"
+    code={`<ONSCheckboxes
+        name="devices"
+        title="What devices do you own?"
+        checkboxesLabel="Select all that apply"
+        id="2-fieldset"
+        legendIsQuestionTitle
+        renderError
+      >
+        {#each checkboxData as option}
+          <ONSCheckbox
+            id={option.id}
+            value={option.value}
+            labelText={option.label}
+            bind:bindGroup={errorSelection}
+            onChange={(errorSelection) => console.log("User selections: ", errorSelection.join(", "))}
+          />
+        {/each}
+      </ONSCheckboxes>`}
+  >
+    <ONSCheckboxes
+      name="devices"
+      title="What devices do you own?"
+      checkboxesLabel="Select all that apply"
+      id="2-fieldset"
+      legendIsQuestionTitle
+      renderError
+    >
+      {#each checkboxData as option}
+        <ONSCheckbox
+          id={option.id}
+          value={option.value}
+          labelText={option.label}
+          bind:bindGroup={errorSelection}
+          onChange={(errorSelection) => console.log("User selections: ", errorSelection.join(", "))}
+        />
+      {/each}
     </ONSCheckboxes>
   </DesignSystemPanel>
 

diff --git a/src/ui/ons/ONSCheckboxes.svelte b/src/ui/ons/ONSCheckboxes.svelte
@@ -1,6 +1,26 @@
-<div class="ons-input-items">
-  <p class="ons-checkboxes__label">Select all that apply</p>
-  <div class="ons-checkboxes__items">
-    <slot />
+<script>
+  import { setContext } from "svelte";
+  import ONSError from "./partials/ONSError.svelte";
+  export let checkboxesLabel, title, id, name, renderError;
+  setContext("name", name);
+  export let legendIsQuestionTitle = false;
+  export let errorText = "Select [whatever it is]";
+</script>
+
+<ONSError {errorText} id={name} {renderError}>
+  <div class="ons-question ons-u-mt-no">
+    <fieldset {id} class="ons-fieldset">
+      {#if legendIsQuestionTitle}
+        <legend class="ons-fieldset__legend">
+          <h1 id="{id}-legend-title" class="ons-fieldset__legend-title ">{title}</h1>
+        </legend>
+      {/if}
+      <div class="ons-input-items">
+        <p class="ons-checkboxes__label">{checkboxesLabel}</p>
+        <div class="ons-checkboxes__items">
+          <slot />
+        </div>
+      </div>
+    </fieldset>
   </div>
-</div>
+</ONSError>
diff --git a/src/ui/ons/partials/ONSCheckbox.svelte b/src/ui/ons/partials/ONSCheckbox.svelte
@@ -1,12 +1,34 @@
 <script>
-  export let id;
-  export let value;
-  export let checked = false;
+  import { getContext } from "svelte";
+  export let id, value, labelText, onChange;
+  let name = getContext("name");
+  export let bindGroup = [];
+
+  function onChangeBindGroup({ target }) {
+    const { value, checked } = target;
+    if (checked) {
+      bindGroup = [...bindGroup, value];
+    } else {
+      bindGroup = bindGroup.filter((item) => item !== value);
+    }
+  }
 </script>
 
-<p class="ons-checkboxes__item">
+<span class="ons-checkboxes__item">
   <span class="ons-checkbox ">
-    <input type="checkbox" {id} class="ons-checkbox__input ons-js-checkbox " bind:checked />
-    <label class="ons-checkbox__label" for={id} id="{id}-label"><slot /></label>
+    <input
+      type="checkbox"
+      {id}
+      class="ons-checkbox__input ons-js-checkbox "
+      {value}
+      {name}
+      checked={bindGroup.includes(value)}
+      on:change={(e) => {
+        onChangeBindGroup(e);
+        onChange(bindGroup);
+      }}
+    />
+    <label class="ons-checkbox__label  " for={id} id="{id}-label">{labelText} </label>
   </span>
-</p>
+</span>
+<br />