From 5c2cd24b272011a0213a9435a837358be93932e8 Mon Sep 17 00:00:00 2001
From: marvinLaubenstein <marvin.laubenstein@telekom.de>
Date: Tue, 25 May 2021 20:42:16 +0200
Subject: [PATCH] feat: init checkbox handle bar template

---
 .../views/checkbox-group.hbs                  | 465 ++++++++++++++++++
 packages/components-sketch/views/index.hbs    |   1 +
 2 files changed, 466 insertions(+)
 create mode 100644 packages/components-sketch/views/checkbox-group.hbs

diff --git a/packages/components-sketch/views/checkbox-group.hbs b/packages/components-sketch/views/checkbox-group.hbs
new file mode 100644
index 0000000000..1694e6d0a9
--- /dev/null
+++ b/packages/components-sketch/views/checkbox-group.hbs
@@ -0,0 +1,465 @@
+<div data-sketch-artboard="Checkbox Groups" class="artboard">
+    <h1 class="title--artboard">Checkbox Groups</h1>
+
+    <h2 class="title--artboard-section">Standard</h2>
+    <div class="agent-states--grid">
+        <div class="agent-states--item">
+            <p class="agent-states--label">:available</p>
+    <scale-checkbox-group data-sketch-key="checkbox-group-1" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-2" label="Checkbox Group Label">
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:hover</p>
+              <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-3" label="Checkbox Group Label">
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:focus</p>
+            <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-4" label="Checkbox Group Label">
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:pressed</p>
+            <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:disabled</p>
+           <scale-checkbox-group data-sketch-key="checkbox-group-5" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+        </div>
+    </div>
+
+    <h2 class="title--artboard-section">Standard Error</h2>
+    <div class="agent-states--grid">
+        <div class="agent-states--item">
+            <p class="agent-states--label">:available</p>
+            <scale-checkbox-group data-sketch-key="checkbox-group-6" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:hover</p>
+           <scale-checkbox-group data-sketch-key="checkbox-group-7" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-8" label="Checkbox Group Label">
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:focus</p>
+           <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:pressed</p>
+           <scale-checkbox-group data-sketch-key="checkbox-group-9" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:disabled</p>
+               <scale-checkbox-group data-sketch-key="checkbox-group-10" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+        </div>
+    </div>
+
+  <h2 class="title--artboard-section">Selected</h2>
+  <div class="agent-states--grid">
+    <div class="agent-states--item">
+      <p class="agent-states--label">:available</p>
+      <scale-checkbox-group data-sketch-key="checkbox-group-11" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-12" label="Checkbox Group Label">
+    </div>
+    <div class="agent-states--item">
+      <p class="agent-states--label">:hover</p>
+      <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-13" label="Checkbox Group Label">
+    </div>
+    <div class="agent-states--item">
+      <p class="agent-states--label">:focus</p>
+     <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group data-sketch-key="checkbox-group-14" label="Checkbox Group Label">
+    </div>
+    <div class="agent-states--item">
+        <p class="agent-states--label">:pressed</p>
+       <scale-checkbox-group>
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+    </div>
+    <div class="agent-states--item">
+      <p class="agent-states--label">:disabled</p>
+      <scale-checkbox-group data-sketch-key="checkbox-group-15" label="Checkbox Group Label">
+      <div slot="checkbox-header">
+        <scale-checkbox
+          input-id="header-checkbox"
+          value="1"
+          label="checkbox"
+          name="nameOfCheckbox"
+          helper-text="helperText"
+        >
+        </scale-checkbox>
+      </div>
+      <div slot="checkbox-list">
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox
+            value="2"
+            label="checkbox"
+            name="nameOfCheckbox"
+          ></scale-checkbox>
+        </div>
+        <div style="margin-top: 0.5rem">
+          <scale-checkbox value="3" name="nameOfCheckbox" checked
+            >Checkbox Slot</scale-checkbox
+          >
+        </div>
+      </div>
+    </scale-checkbox-group>
+    </div>
+  </div>
+</div>
+
+
+<script src="/symbol_names.js"></script>
+<script>
+    Array.from(document.querySelectorAll("scale-checkbox-group")).forEach(btn => {
+        btn.dataset.sketchSymbol = `Checkbox Groups / ${
+                order(1, btn.hasAttribute('checked') ? 'Selected' : 'Standard')
+            }${ btn.hasAttribute('checked')
+                ? ''
+                : ' / ' + order(2, btn.getAttribute('status') === 'error' ? 'Error On' : 'Error Off')
+            } / ${
+                order(4, getStateName(btn))
+            }`;
+    });
+</script>
\ No newline at end of file
diff --git a/packages/components-sketch/views/index.hbs b/packages/components-sketch/views/index.hbs
index 2559a398d4..74a3c5f60c 100644
--- a/packages/components-sketch/views/index.hbs
+++ b/packages/components-sketch/views/index.hbs
@@ -16,6 +16,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
   <p><a href="/breadcrumb">Breadcrumb</a></p>
   <p><a href="/card">Card</a></p>
   <p><a href="/checkbox">Checkbox</a></p>
+  <p><a href="/checkbox-group">Checkbox Group</a></p>
   <p><a href="/divider">Divider</a></p>
   <p><a href="/dropdown">Dropdown</a></p>
   <p><a href="/icons">Icons</a></p>