From fcd8ef56875a578e448be2bff10f0f38b9cfea51 Mon Sep 17 00:00:00 2001
From: marvinLaubenstein <marvin.laubenstein@telekom.de>
Date: Tue, 25 May 2021 15:53:23 +0200
Subject: [PATCH] feat: adding handle bar template

---
 packages/components-sketch/views/index.hbs    |   1 +
 .../components-sketch/views/radio-group.hbs   | 481 ++++++++++++++++++
 2 files changed, 482 insertions(+)
 create mode 100644 packages/components-sketch/views/radio-group.hbs

diff --git a/packages/components-sketch/views/index.hbs b/packages/components-sketch/views/index.hbs
index 74a3c5f60c..119ea8e5d7 100644
--- a/packages/components-sketch/views/index.hbs
+++ b/packages/components-sketch/views/index.hbs
@@ -24,6 +24,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
   <p><a href="/progress-bar">Progress Bar</a></p>
   <p><a href="/radio">Radio Button</a></p>
   <p><a href="/rating">Rating Stars</a></p>
+  <p><a href="/radio-group">Radio Button Groups</a></p>
   <p><a href="/sidebar-nav">Sidebar Navigation Example</a></p>
   <p><a href="/sidebar-nav-components">Sidebar Navigation Components</a></p>
   <p><a href="/slider">Slider</a></p>
diff --git a/packages/components-sketch/views/radio-group.hbs b/packages/components-sketch/views/radio-group.hbs
new file mode 100644
index 0000000000..48b12463b4
--- /dev/null
+++ b/packages/components-sketch/views/radio-group.hbs
@@ -0,0 +1,481 @@
+
+
+<div data-sketch-artboard="Radio Button Groups" class="artboard">
+    <h1 class="title--artboard">Radio Button 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-radio-button-group label="Radio Button Group Label" data-sketch-state="available" data-sketch-key="radio-group-standard-1">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                    value="1"
+                    label="Radio Button"
+                    name="radioSelect1"
+                    transparent="true"
+                    input-id="choice1"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="2"
+                    label="Radio Button"
+                    name="radioSelect1"
+                    input-id="choice2"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="3"
+                    label="Radio Button"
+                    name="radioSelect1"
+                    input-id="choice3"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:hover</p>
+            <scale-radio-button-group label="Radio Button Group Label" data-sketch-state="hover" data-sketch-key="radio-group-standard-2">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                    value="1"
+                    label="Radio Button"
+                    name="radioSelect2"
+                    transparent="true"
+                    input-id="choice4"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="2"
+                    label="Radio Button"
+                    name="radioSelect2"
+                    input-id="choice5"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="3"
+                    label="Radio Button"
+                    name="radioSelect2"
+                    input-id="choice6"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:focus</p>
+            <scale-radio-button-group label="Radio Button Group Label" data-sketch-state="focus" data-sketch-key="radio-group-standard-3">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                    value="1"
+                    label="Radio Button"
+                    name="radioSelect3"
+                    transparent="true"
+                    input-id="choice7"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="2"
+                    label="Radio Button"
+                    name="radioSelect3"
+                    input-id="choice8"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="3"
+                    label="Radio Button"
+                    name="radioSelect3"
+                    input-id="choice9"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:pressed</p>
+            <scale-radio-button-group label="Radio Button Group Label" data-sketch-state="active" data-sketch-key="radio-group-standard-4">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                    value="1"
+                    label="Radio Button"
+                    name="radioSelect4"
+                    transparent="true"
+                    input-id="choice10"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="2"
+                    label="Radio Button"
+                    name="radioSelect4"
+                    input-id="choice11"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="3"
+                    label="Radio Button"
+                    name="radioSelect4"
+                    input-id="choice12"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:disabled</p>
+            <scale-radio-button-group label="Radio Button Group Label" disabled data-sketch-key="radio-standard-group-5">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                    value="1"
+                    disabled
+                    label="Radio Button"
+                    name="radioSelect5"
+                    transparent="true"
+                    input-id="choice13"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="2"
+                    disabled
+                    label="Radio Button"
+                    name="radioSelect5"
+                    input-id="choice14"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                    value="3"
+                    disabled
+                    label="Radio Button"
+                    name="radioSelect5"
+                    input-id="choice15"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button-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-radio-button-group status="error" helper-text="Error message" label="Radio Button Label" data-sketch-key="radio-group-error-1"> 
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                        value="1"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError1"
+                        transparent="true"
+                        input-id="choiceOne"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="2"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError1"
+                        input-id="choiceTwo"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="3"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError1"
+                        input-id="choiceThree"
+                        ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:hover</p>
+            <scale-radio-button-group status="error" helper-text="Error message" label="Radio Button Label" data-sketch-state="hover" data-sketch-key="radio-group-error-2">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                        value="1"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError2"
+                        transparent="true"
+                        input-id="choiceOne"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="2"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError2"
+                        input-id="choiceTwo"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="3"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError2"
+                        input-id="choiceThree"
+                        ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:focus</p>
+            <scale-radio-button-group status="error" helper-text="Error message" label="Radio Button Label" data-sketch-state="focus" data-sketch-key="radio-group-error-3">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                        value="1"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError3"
+                        transparent="true"
+                        input-id="choiceOne"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="2"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError3"
+                        input-id="choiceTwo"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="3"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError3"
+                        input-id="choiceThree"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button-group>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:pressed</p>
+             <scale-radio-button-group status="error" helper-text="Error message" label="Radio Button Label" data-sketch-state="pressed" data-sketch-key="radio-group-error-4">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                        value="1"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError4"
+                        transparent="true"
+                        input-id="choiceOne"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="2"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError4"
+                        input-id="choiceTwo"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="3"
+                        status="error"
+                        label="Radio Button"
+                        name="radioError4"
+                        input-id="choiceThree"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button>
+        </div>
+        <div class="agent-states--item">
+            <p class="agent-states--label">:disabled</p>
+                 <scale-radio-button-group status="error" helper-text="Error message" label="Radio Button Label" data-sketch-state="pressed" data-sketch-key="radio-group-error-5">
+                <div slot="radio-button-list">
+                    <scale-radio-button
+                        value="1"
+                        disabled
+                        status="error"
+                        label="Radio Button"
+                        name="radioError5"
+                        transparent="true"
+                        input-id="choiceOne"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="2"
+                        disabled
+                        status="error"
+                        label="Radio Button"
+                        name="radioError5"
+                        input-id="choiceTwo"
+                    ></scale-radio-button>
+                    <div style="margin-top: 0.5rem"></div>
+                    <scale-radio-button
+                        value="3"
+                        disabled
+                        status="error"
+                        label="Radio Button"
+                        name="radioError5"
+                        input-id="choiceThree"
+                    ></scale-radio-button>
+                </div>
+            </scale-radio-button>
+        </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-radio-button-group checked label="Radio Button Group Label" data-sketch-state="available" data-sketch-key="radio-group-selected-1">
+        <div slot="radio-button-list">
+            <scale-radio-button
+            value="1"
+            label="Radio Button"
+            name="radioSelected1"
+            transparent="true"
+            checked
+            input-id="choiceOne"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="2"
+            label="Radio Button"
+            name="radioSelected2"
+            input-id="choiceTwo"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="3"
+            label="Radio Button"
+            name="radioSelected3"
+            input-id="choiceThree"
+            ></scale-radio-button>
+        </div>
+      </scale-radio-button-group>
+    </div>
+    <div class="agent-states--item">
+      <p class="agent-states--label">:hover</p>
+         <scale-radio-button-group hover label="Radio Button Group Label" checked data-sketch-state="hover" data-sketch-key="radio-group-selected-2">
+        <div slot="radio-button-list">
+            <scale-radio-button
+            value="1"
+            label="Radio Button"
+            name="radioSelected4"
+            transparent="true"
+            checked
+            input-id="choiceOne"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="2"
+            label="Radio Button"
+            name="radioSelected5"
+            input-id="choiceTwo"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="3"
+            label="Radio Button"
+            name="radioSelected6"
+            input-id="choiceThree"
+            ></scale-radio-button>
+        </div>
+      </scale-radio-button-group>
+    </div>
+    <div class="agent-states--item">
+      <p class="agent-states--label">:focus</p>
+      <scale-radio-button-group checked label="Radio Button Group Label" data-sketch-state="focus" data-sketch-key="radio-group-selected-3">
+        <div slot="radio-button-list">
+            <scale-radio-button
+            value="1"
+            label="Radio Button"
+            name="radioSelected7"
+            transparent="true"
+            checked
+            input-id="choiceOne"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="2"
+            label="Radio Button"
+            name="radioSelected8"
+            input-id="choiceTwo"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="3"
+            label="Radio Button"
+            name="radioSelected9"
+            input-id="choiceThree"
+            ></scale-radio-button>
+        </div>
+      </scale-radio-button-group>
+    </div>
+    <div class="agent-states--item">
+        <p class="agent-states--label">:pressed</p>
+        <scale-radio-button-group pressed label="Radio Button Group Label" data-sketch-state="pressed" data-sketch-key="radio-group-selected-4">
+        <div slot="radio-button-list">
+            <scale-radio-button
+            value="1"
+            label="Radio Button"
+            name="radioSelected10"
+            transparent="true"
+            checked
+            input-id="choiceOne"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="2"
+            label="Radio Button"
+            name="radioSelected11"
+            input-id="choiceTwo"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="3"
+            label="Radio Button"
+            name="radioSelected12"
+            input-id="choiceThree"
+            ></scale-radio-button>
+        </div>
+      </scale-radio-button-group>
+    </div>
+    <div class="agent-states--item">
+      <p class="agent-states--label">:disabled</p>
+      <scale-radio-button-group checked label="Radio Button Group Label" disabled  data-sketch-key="radio-group-selected-1">
+        <div slot="radio-button-list">
+            <scale-radio-button
+            value="1"
+            disabled
+            label="Radio Button"
+            name="radioSelected13"
+            transparent="true"
+            checked
+            input-id="choiceOne"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="2"
+            disabled
+            label="Radio Button"
+            name="radioSelected14"
+            input-id="choiceTwo"
+            ></scale-radio-button>
+            <div style="margin-top: 0.5rem"></div>
+            <scale-radio-button
+            value="3"
+            disabled
+            label="Radio Button"
+            name="radioSelected15"
+            input-id="choiceThree"
+            ></scale-radio-button>
+        </div>
+      </scale-radio-button-group>
+    </div>
+  </div>
+</div>
+
+
+<script src="/symbol_names.js"></script>
+<script>
+    Array.from(document.querySelectorAll("scale-radio-button-group")).forEach(btn => {
+        btn.dataset.sketchSymbol = `Radio Button Group / ${
+                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