Add Astro Radio Component (#2191)

Co-authored-by: Uyen Doan <smmr-dn@users.noreply.github.com>
iTwin · Aug 19, 2024 · ab45cb7 · ab45cb7
1 parent c977e9f
commit ab45cb7
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 300 deletions.
diff --git a/apps/css-workshop/src/components/Radio.astro b/apps/css-workshop/src/components/Radio.astro
@@ -0,0 +1,43 @@
+---
+type Props = {
+  status?: 'positive' | 'warning' | 'negative';
+  disabled?: boolean;
+  checked?: boolean;
+  labelPosition?: 'left' | 'right';
+  value: string;
+  name: string;
+} & astroHTML.JSX.HTMLAttributes;
+
+const { disabled, status, class: className, labelPosition, ...props } = Astro.props;
+---
+
+<label
+  class:list={[
+    'iui-radio-wrapper',
+    {
+      'iui-disabled': disabled,
+      [`iui-${status}`]: !!status,
+    },
+  ]}
+>
+  {
+    labelPosition === 'left' && (
+      <>
+        <span class='iui-radio-label'>
+          <slot />
+        </span>
+      </>
+    )
+  }
+  <input class:list={['iui-radio', className]} type='radio' disabled={disabled} {...props} />
+  {
+    labelPosition === 'right' ||
+      (!labelPosition && (
+        <>
+          <span class='iui-radio-label'>
+            <slot />
+          </span>
+        </>
+      ))
+  }
+</label>
diff --git a/apps/css-workshop/src/pages/dialog.astro b/apps/css-workshop/src/pages/dialog.astro
@@ -2,6 +2,7 @@
 import Layout from './_layout.astro';
 import Button_ from '../components/Button.astro';
 import IconButton_ from '../components/IconButton.astro';
+import Radio_ from '../components/Radio.astro';
 ---
 
 <Layout title='Dialog'>
@@ -34,26 +35,11 @@ import IconButton_ from '../components/IconButton.astro';
   <div class='iui-input-grid iui-inline-label'>
     <div class='iui-input-label'>Dialog Placement</div>
     <div class='iui-input-group'>
-      <label class='iui-radio-wrapper'>
-        <input class='iui-radio' type='radio' name='dialog-placement' value='' checked />
-        <span class='iui-radio-label'>Centered</span>
-      </label>
-      <label class='iui-radio-wrapper'>
-        <input class='iui-radio' type='radio' name='dialog-placement' value='top-left' />
-        <span class='iui-radio-label'>Top-left</span>
-      </label>
-      <label class='iui-radio-wrapper'>
-        <input class='iui-radio' type='radio' name='dialog-placement' value='top-right' />
-        <span class='iui-radio-label'>Top-right</span>
-      </label>
-      <label class='iui-radio-wrapper'>
-        <input class='iui-radio' type='radio' name='dialog-placement' value='bottom-left' />
-        <span class='iui-radio-label'>Bottom-left</span>
-      </label>
-      <label class='iui-radio-wrapper'>
-        <input class='iui-radio' type='radio' name='dialog-placement' value='bottom-right' />
-        <span class='iui-radio-label'>Bottom-right</span>
-      </label>
+      <Radio_ name='dialog-placement' checked value=''>Centered</Radio_>
+      <Radio_ name='dialog-placement' value='top-left'>Top-left</Radio_>
+      <Radio_ name='dialog-placement' value='top-right'>Top-right</Radio_>
+      <Radio_ name='dialog-placement' value='bottom-left'>Bottom-left</Radio_>
+      <Radio_ name='dialog-placement' value='bottom-right'>Bottom-right</Radio_>
     </div>
   </div>
 

diff --git a/apps/css-workshop/src/pages/fieldset.astro b/apps/css-workshop/src/pages/fieldset.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from './_layout.astro';
 import Icon_ from '../components/Icon.astro';
+import Radio_ from '../components/Radio.astro';
 ---
 
 <Layout title='Fieldset'>
@@ -37,24 +38,9 @@ import Icon_ from '../components/Icon.astro';
       <div class='iui-input-grid' data-iui-label-placement='inline'>
         <div class='iui-input-label'>Color theme</div>
         <div class='iui-input-group'>
-          <label class='iui-radio-wrapper'>
-            <input class='iui-radio' type='radio' name='radio-demo-1' value='light' />
-            <span class='iui-radio-label'>Light</span>
-          </label>
-          <label class='iui-radio-wrapper'>
-            <input class='iui-radio' type='radio' name='radio-demo-1' value='dark' />
-            <span class='iui-radio-label'>Dark</span>
-          </label>
-          <label class='iui-radio-wrapper'>
-            <input
-              class='iui-radio'
-              type='radio'
-              name='radio-demo-1'
-              value='match-device'
-              checked
-            />
-            <span class='iui-radio-label'>Match device</span>
-          </label>
+          <Radio_ name='radio-demo-1' value='light'>Light</Radio_>
+          <Radio_ name='radio-demo-1' value='Dark'>Dark</Radio_>
+          <Radio_ name='radio-demo-1' checked value='match-device'>Match device</Radio_>
         </div>
       </div>