feat(styles): add segmented-button styles

swisspost · Nov 15, 2024 · 070c167 · 070c167
1 parent 0ae33d3
commit 070c167
Show file tree

Hide file tree

Showing 2 changed files with 372 additions and 177 deletions.
diff --git a/packages/styles/index.html b/packages/styles/index.html
@@ -33,7 +33,7 @@ <h1>Styles package playground</h1>
     <!-- Place your component markup here -->
     <button class="btn btn-primary">Primary button</button>
 
-    <div class="segmented-button-container">
+    <!-- <div class="segmented-button-container">
       <fieldset class="segmented-button segmented-button-5">
     
         <input id="five-1" tabindex="-1" name="five" type="radio" />
@@ -51,6 +51,33 @@ <h1>Styles package playground</h1>
         <input id="five-5" name="five" tabindex="-1" type="radio" />
         <label for="five-5" tabindex="0">The Great</label>
       </fieldset>
+    </div> -->
+
+    <div style="padding: 2rem">
+      <div class="segmented-button-container">
+        <fieldset class="segmented-button">
+          <label>
+            <input type="radio" name="{uuid}" />
+            The Good</label
+          >
+          <label>
+            <input type="radio" name="{uuid}" />
+            The Bad</label
+          >
+          <label>
+            <input type="radio" name="{uuid}" />
+            The Ugly</label
+          >
+          <label>
+            <input type="radio" name="{uuid}" />
+            The Beauty</label
+          >
+          <label>
+            <input type="radio" name="{uuid}" />
+            The Small</label
+          >
+        </fieldset>
+      </div>
     </div>
   </body>
 </html>