feat(ui-library): radio group - use slots instead of options array

deven-org · Jul 11, 2024 · 6ac4a33 · 6ac4a33
1 parent 35fc644
commit 6ac4a33
Show file tree

Hide file tree

Showing 17 changed files with 348 additions and 176 deletions.
diff --git a/packages/js-example-app/src/index.client.ts b/packages/js-example-app/src/index.client.ts
@@ -9,6 +9,7 @@ import {
   BlrTabBar,
   BlrTextarea,
   BlrToggleSwitch,
+  BlrRadioGroup,
 } from '@boiler/ui-library';
 
 async function hydrate() {
@@ -44,6 +45,7 @@ function init() {
   const blrInputFieldNumber = document.getElementsByTagName('blr-input-field-number')[0] as BlrInputFieldNumber;
   const blrTextArea = document.getElementsByTagName('blr-textarea')[0] as BlrTextarea;
   const blrRadio = document.getElementsByTagName('blr-radio')[0] as BlrRadio;
+  const blrRadioGroup = document.getElementsByTagName('blr-radio-group')[0] as BlrRadioGroup;
   const blrToggleSwitch = document.getElementsByTagName('blr-label-toggleswitch')[0] as BlrToggleSwitch;
   const blrTabBar = document.getElementsByTagName('blr-tab-bar')[0] as BlrTabBar;
 
@@ -185,6 +187,10 @@ function init() {
     addLog('blr-radio changed: ' + e.detail.selectedValue);
   });
 
+  blrRadioGroup.addEventListener('blrSelectedValueChange', (e) => {
+    addLog('blr-radio value changed blrRadioGroupValueChange: ' + e.detail.selectedValue);
+  });
+
   blrToggleSwitch.addEventListener('blrFocus', () => {
     addLog('blr-toggleswitch focused');
   });

diff --git a/packages/js-example-app/src/index.server.ts b/packages/js-example-app/src/index.server.ts
@@ -177,7 +177,7 @@ export function* renderIndex() {
               <blr-radio
                 theme="Light"
                 size-variant="md"
-                value=""
+                value="radioValue"
                 label="Label"
                 aria-label=""
                 radio-id="radioId"
@@ -186,6 +186,23 @@ export function* renderIndex() {
               </blr-radio>
             </div>
 
+            <div class="component">
+              <p>Radio Group</p>
+              <blr-radio-group
+                theme="Light"
+                size-variant="md"
+                value=""
+                label="Label"
+                aria-label=""
+                radio-id="radioId"
+                name="Radio Group"
+              >
+                <blr-radio label="male" value="male" checked></blr-radio>
+                <blr-radio label="female" value="female"></blr-radio>
+                <blr-radio label="other" value="other"></blr-radio>
+              </blr-radio-group>
+            </div>
+
             <div class="component">
               <p>Tab Bar</p>
               <blr-tab-bar

diff --git a/packages/ui-library/.babelrc b/packages/ui-library/.babelrc
@@ -1,6 +1,14 @@
 // Used by Storybook
 {
   "sourceType": "unambiguous",
-  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
-  "plugins": [["@babel/plugin-proposal-decorators", { "version": "2023-05" }]]
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ],
+    ["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
+  ]
 }
diff --git a/packages/ui-library/package.json b/packages/ui-library/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@boiler/icons": "0.0.1",
     "@floating-ui/dom": "^1.6.3",
+    "@lit-labs/preact-signals": "1.0.2",
     "@lit-labs/react": "^1.1.1",
     "lit": "^3.1.2",
     "nested-css-to-flat": "^1.0.5"

diff --git a/packages/ui-library/src/components/radio-group/index.css.ts b/packages/ui-library/src/components/radio-group/index.css.ts
@@ -7,11 +7,18 @@ export const staticStyles = css`
     margin: 0 1rem;
   }
 
-  .vertical {
-    flex-direction: column;
+  .blr-legend {
+    padding: 0;
   }
 
-  .horizontal {
+  .horizontal > slot {
+    display: flex;
     flex-direction: row;
+    column-gap: 1rem;
+    height: 40px;
+  }
+
+  .vertical > slot {
+    flex-direction: column;
   }
 `;
diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts
@@ -223,7 +223,12 @@ export default {
   },
 };
 
-export const BlrRadioGroup = (params: BlrRadioGroupType) => BlrRadioGroupRenderFunction(params);
+const radioButtonsAsChildren = html`
+  <blr-radio label="male" value="male" @blrSelectedValueChange=${(e) => e.detail.selectedValue}></blr-radio>
+  <blr-radio label="female" value="female" @blrSelectedValueChange=${(e) => e.detail.selectedValue}></blr-radio>
+  <blr-radio label="other" value="other" @blrSelectedValueChange=${(e) => e.detail.selectedValue}></blr-radio>
+`;
+export const BlrRadioGroup = (params: BlrRadioGroupType) => BlrRadioGroupRenderFunction(params, radioButtonsAsChildren);
 
 BlrRadioGroup.storyName = 'Radio Group';
 
@@ -233,42 +238,12 @@ const defaultParams: BlrRadioGroupType & {
 } = {
   theme: 'Light',
   sizeVariant: 'md',
-  direction: 'horizontal',
+  direction: 'vertical',
   hasLegend: true,
   legend: 'Legend-text',
   hasHint: false,
   groupHintMessage: 'This is a small hint',
   groupHintMessageIcon: 'blrInfo',
-  options: [
-    {
-      value: '0',
-      label: 'Option 1',
-      checked: false,
-      errorMessage: 'OMG! An error!',
-      hintMessage: 'This is a small hint',
-    },
-    {
-      value: '1',
-      label: 'Option 2',
-      checked: false,
-      errorMessage: 'OMG! An error!',
-      hintMessage: 'This is a small hint',
-    },
-    {
-      value: '2',
-      label: 'Option 3',
-      checked: true,
-      errorMessage: 'OMG! An error!',
-      hintMessage: 'This is a small hint',
-    },
-    {
-      value: '4',
-      label: 'Option 4',
-      checked: false,
-      errorMessage: 'OMG! An error!',
-      hintMessage: 'This is a small hint',
-    },
-  ],
   disabled: false,
   readonly: false,
   required: false,
@@ -278,7 +253,6 @@ const defaultParams: BlrRadioGroupType & {
   ariaLabel: 'Radio Group',
   radioGroupId: 'Radio Group',
   name: 'Radio Group ',
-  blrChange: () => action('blrChange'),
   blrFocus: () => action('blrFocus'),
   blrBlur: () => action('blrBlur'),
 };
@@ -322,25 +296,25 @@ SizeVariant.story = { name: ' ' };
 // /**
 //  * The Radio Group component can have a horizontal or a vertical direction.
 //  *  */
-// export const Direction = () => {
-//   return html`
-//     ${sharedStyles}
-//     <div class="wrapper">
-//       ${BlrRadioGroup({
-//         ...defaultParams,
-//         direction: 'vertical',
-//         legend: 'Vertical',
-//       })}
-//     </div>
-//     <div class="wrapper">
-//       ${BlrRadioGroup({
-//         ...defaultParams,
-//         direction: 'horizontal',
-//         legend: 'Horizontal',
-//       })}
-//     </div>
-//   `;
-// };
+export const Direction = () => {
+  return html`
+    ${sharedStyles}
+    <div class="wrapper">
+      ${BlrRadioGroup({
+        ...defaultParams,
+        direction: 'vertical',
+        legend: 'Vertical',
+      })}
+    </div>
+    <div class="wrapper">
+      ${BlrRadioGroup({
+        ...defaultParams,
+        direction: 'horizontal',
+        legend: 'Horizontal',
+      })}
+    </div>
+  `;
+};
 
 /**
  * ## Content / Settings
@@ -456,7 +430,7 @@ export const FormCaptionGroup = () => {
         groupErrorMessage: "OMG it's an error",
         hasHint: true,
         hasError: true,
-        groupErrorIcon: 'blrErrorFilled',
+        groupHintMessageIcon: 'blrErrorFilled',
       })}
     </div>
   `;

diff --git a/packages/ui-library/src/components/radio-group/index.test.ts b/packages/ui-library/src/components/radio-group/index.test.ts
@@ -2,9 +2,10 @@ import '@boiler/ui-library';
 
 import { BlrRadioGroupRenderFunction } from './renderFunction.js';
 
-import { fixture, expect } from '@open-wc/testing';
+import { fixture, expect, aTimeout } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
 import { BlrRadioGroupType } from './index.js';
+import { html } from 'lit-html';
 
 const sampleParams: BlrRadioGroupType = {
   theme: 'Light',
@@ -13,11 +14,6 @@ const sampleParams: BlrRadioGroupType = {
   name: 'Default Name',
   required: false,
   readonly: false,
-  options: [
-    { label: 'Multi-line option 1', value: 'option1', hintMessage: 'Hint 1', errorMessage: 'Error Message 1' },
-    { label: 'Option 2', value: 'option2', hintMessage: 'Hint 2', errorMessage: 'Error Message 2' },
-    { label: 'Option 3', value: 'option3', hintMessage: 'Hint 3', errorMessage: 'Error Message 3' },
-  ],
   hasHint: true,
   groupHintMessage: 'This is a sample hint message',
   groupHintMessageIcon: 'blrInfo',
@@ -27,9 +23,16 @@ const sampleParams: BlrRadioGroupType = {
   direction: 'horizontal',
 };
 
+const radioButtonsAsChildren = html`
+  <blr-radio label="Option 1"></blr-radio>
+  <blr-radio label="Option 2"> </blr-radio>
+  <blr-radio label="Option 3"> </blr-radio>
+  <blr-radio label="Option 4"> </blr-radio>
+`;
+
 describe('blr-radio-group', () => {
   it('is having a radioGroup containing the right className', async () => {
-    const element = await fixture(BlrRadioGroupRenderFunction(sampleParams));
+    const element = await fixture(BlrRadioGroupRenderFunction(sampleParams, radioButtonsAsChildren));
 
     const radioGroup = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement);
     const className = radioGroup?.className;
@@ -38,7 +41,7 @@ describe('blr-radio-group', () => {
   });
 
   it('has a size md by default', async () => {
-    const element = await fixture(BlrRadioGroupRenderFunction(sampleParams));
+    const element = await fixture(BlrRadioGroupRenderFunction(sampleParams, radioButtonsAsChildren));
 
     const radioGroup = querySelectorDeep('.blr-radio-group', element.getRootNode() as HTMLElement);
     const className = radioGroup?.className;
@@ -47,7 +50,9 @@ describe('blr-radio-group', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrRadioGroupRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
+    const element = await fixture(
+      BlrRadioGroupRenderFunction({ ...sampleParams, sizeVariant: 'sm' }, radioButtonsAsChildren)
+    );
 
     const radioGroup = querySelectorDeep('.blr-radio-group', element.getRootNode() as HTMLElement);
     const className = radioGroup?.className;
@@ -57,24 +62,30 @@ describe('blr-radio-group', () => {
 
   it('has a error state if hasError is true', async () => {
     const element = await fixture(
-      BlrRadioGroupRenderFunction({
-        ...sampleParams,
-        hasError: true,
-      })
+      BlrRadioGroupRenderFunction(
+        {
+          ...sampleParams,
+          hasError: true,
+        },
+        radioButtonsAsChildren
+      )
     );
 
     const radioGroup = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement);
+    await aTimeout(100);
     const className = radioGroup?.className;
-
     expect(className).to.contain('error');
   });
 
   it('does not have a error state if hasError is false', async () => {
     const element = await fixture(
-      BlrRadioGroupRenderFunction({
-        ...sampleParams,
-        hasError: false,
-      })
+      BlrRadioGroupRenderFunction(
+        {
+          ...sampleParams,
+          hasError: false,
+        },
+        radioButtonsAsChildren
+      )
     );
 
     const radioGroup = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement);