Docs(web): Add Radio demo #DS-905

- Radio demo in web is now same as demo in web-react and web-twig
lmc-eu · Sep 18, 2023 · 3267e02 · 3267e02
1 parent 7d23e21
commit 3267e02
Showing 1 changed file with 29 additions and 6 deletions.
diff --git a/packages/web/src/scss/components/Radio/index.html b/packages/web/src/scss/components/Radio/index.html
@@ -1,9 +1,11 @@
 {{#> layout/plain }}
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Default</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioDefault" class="Radio">
       <input type="radio" id="radioDefault" class="Radio__input" name="default" />
       <span class="Radio__text">
@@ -17,40 +19,52 @@ <h2 class="docs-Heading">Default</h2>
         <span class="Radio__label">Radio Label</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Hidden Label</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioHiddenLabel" class="Radio">
       <input type="radio" id="radioHiddenLabel" class="Radio__input" name="hiddenLabel" />
       <span class="Radio__text">
         <span class="Radio__label Radio__label--hidden">Radio Label</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Helper Text</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioHelperText" class="Radio">
       <input type="radio" id="radioHelperText" class="Radio__input" name="helperText" />
       <span class="Radio__text">
         <span class="Radio__label">Radio Label</span>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Disabled</h2>
 
-  <div class="docs-FormFieldGrid">
+  <div class="docs-Stack docs-Stack--start">
+
     <label for="radioDisabled" class="Radio Radio--disabled">
       <input type="radio" id="radioDisabled" class="Radio__input" name="disabled" disabled />
       <span class="Radio__text">
@@ -65,13 +79,17 @@ <h2 class="docs-Heading">Disabled</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Validation State</h2>
 
-  <div class="docs-FormFieldGrid">
+   <div class="docs-Stack docs-Stack--start">
+
     <label for="radioSuccess" class="Radio Radio--success">
       <input type="radio" id="radioSuccess" class="Radio__input" name="validation" />
       <span class="Radio__text">
@@ -100,13 +118,16 @@ <h2 class="docs-Heading">Validation State</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 <section class="docs-Section">
+
   <h2 class="docs-Heading">Item</h2>
 
-  <div class="docs-FormFieldGrid">
+   <div class="docs-Stack docs-Stack--start">
     <label for="radioItemDefault" class="Radio Radio--item">
       <input type="radio" id="radioItemDefault" class="Radio__input" name="item" />
       <span class="Radio__text">
@@ -150,7 +171,9 @@ <h2 class="docs-Heading">Item</h2>
         <span class="Radio__helperText">Helper text</span>
       </span>
     </label>
+
   </div>
+
 </section>
 
 {{/layout/plain }}