From a3a9231fc4daf9b1e3788f45cb421ebde6356f4c Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Wed, 27 Mar 2024 10:31:54 +0100
Subject: [PATCH 1/2] chore: add stories with bold label

---
 .../checkbox/checkbox/checkbox.stories.ts     | 80 +++++++++----------
 .../radio-button/radio-button.stories.ts      | 34 ++++++--
 2 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/src/components/checkbox/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox/checkbox.stories.ts
index 7f2e7f8245..9e85b3f925 100644
--- a/src/components/checkbox/checkbox/checkbox.stories.ts
+++ b/src/components/checkbox/checkbox/checkbox.stories.ts
@@ -82,6 +82,12 @@ const ariaLabel: InputType = {
   },
 };
 
+const bold: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   size,
   checked,
@@ -93,6 +99,7 @@ const defaultArgTypes: ArgTypes = {
   'icon-name': icon,
   'icon-placement': iconPlacement,
   'aria-label': ariaLabel,
+  bold,
 };
 
 const defaultArgs: Args = {
@@ -106,14 +113,17 @@ const defaultArgs: Args = {
   'icon-name': undefined,
   'icon-placement': undefined,
   'aria-label': undefined,
+  bold: false,
 };
 
 // We use property and attribute for `checked` to provide consistency to storybook controls.
 // Otherwise, after first user manipulation, the storybook control gets ignored.
 // If only using property, the reset mechanism does not work as expected.
 
-const Template = ({ label, checked, ...args }: Args): TemplateResult => html`
-  <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>${label}</sbb-checkbox>
+const Template = ({ label, checked, bold, ...args }: Args): TemplateResult => html`
+  <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>
+    ${bold ? html`<span class="sbb-text--bold">${label}</span>` : label}
+  </sbb-checkbox>
 `;
 
 const TemplateWithForm = (args: Args): TemplateResult => html`
@@ -147,49 +157,32 @@ const TemplateWithForm = (args: Args): TemplateResult => html`
 export const defaultUnchecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-  },
+  args: { ...defaultArgs },
 };
 export const defaultChecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    checked: true,
-  },
+  args: { ...defaultArgs, checked: true },
 };
 export const defaultIndeterminate: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    indeterminate: true,
-  },
+  args: { ...defaultArgs, indeterminate: true },
 };
 export const sizeM: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    size: size.options[0],
-  },
+  args: { ...defaultArgs, size: size.options[0] },
 };
 export const longLabel: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    label: longLabelText,
-  },
+  args: { ...defaultArgs, label: longLabelText },
 };
 export const withIconEnd: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    'icon-name': 'tickets-class-small',
-  },
+  args: { ...defaultArgs, 'icon-name': 'tickets-class-small' },
 };
 export const checkedWithIconStart: StoryObj = {
   render: Template,
@@ -204,34 +197,41 @@ export const checkedWithIconStart: StoryObj = {
 export const disabledChecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    disabled: true,
-    checked: true,
-  },
+  args: { ...defaultArgs, disabled: true, checked: true },
 };
 export const disabledUnchecked: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    disabled: true,
-  },
+  args: { ...defaultArgs, disabled: true },
 };
 export const disabledIndeterminate: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: {
-    ...defaultArgs,
-    disabled: true,
-    indeterminate: true,
-  },
+  args: { ...defaultArgs, disabled: true, indeterminate: true },
 };
 
 export const withForm: StoryObj = {
   render: TemplateWithForm,
   argTypes: defaultArgTypes,
-  args: defaultArgs,
+  args: { ...defaultArgs },
+};
+
+export const defaultUncheckedBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, bold: true },
+};
+
+export const defaultCheckedBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, checked: true, bold: true },
+};
+
+export const defaultIndeterminateBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, indeterminate: true, bold: true },
 };
 
 const meta: Meta = {
diff --git a/src/components/radio-button/radio-button/radio-button.stories.ts b/src/components/radio-button/radio-button/radio-button.stories.ts
index abe380ee73..1f5d795824 100644
--- a/src/components/radio-button/radio-button/radio-button.stories.ts
+++ b/src/components/radio-button/radio-button/radio-button.stories.ts
@@ -8,6 +8,9 @@ import { sbbSpread } from '../../core/dom';
 import readme from './readme.md?raw';
 import './radio-button';
 
+const longLabel: string =
+  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
+
 const value: InputType = {
   control: {
     type: 'text',
@@ -39,12 +42,19 @@ const ariaLabel: InputType = {
   },
 };
 
+const bold: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   value,
   checked,
   disabled,
   size,
   'aria-label': ariaLabel,
+  bold,
 };
 
 const defaultArgs: Args = {
@@ -53,15 +63,17 @@ const defaultArgs: Args = {
   disabled: false,
   size: size.options[0],
   'aria-label': undefined,
+  bold: false,
 };
 
-const DefaultTemplate = (args: Args): TemplateResult =>
-  html`<sbb-radio-button ${sbbSpread(args)}>Value</sbb-radio-button>`;
+const DefaultTemplate = ({ bold, ...args }: Args): TemplateResult =>
+  html`<sbb-radio-button ${sbbSpread(args)}>
+    ${bold ? html`<span class="sbb-text--bold">Value</span>` : 'Value'}
+  </sbb-radio-button>`;
 
-const MultilineLabelTemplate = (args: Args): TemplateResult => html`
+const MultilineLabelTemplate = ({ bold, ...args }: Args): TemplateResult => html`
   <sbb-radio-button ${sbbSpread(args)}>
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
-    the industry's standard dummy text ever since the 1500s.
+    ${bold ? html`<span class="sbb-text--bold">${longLabel}</span>` : longLabel}
   </sbb-radio-button>
 `;
 
@@ -101,6 +113,18 @@ export const MultilineLabel: StoryObj = {
   args: { ...defaultArgs, checked: true },
 };
 
+export const DefaultBold: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, bold: true },
+};
+
+export const CheckedBold: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, checked: true, bold: true },
+};
+
 const meta: Meta = {
   decorators: [(story) => html` <div style="padding: 2rem; max-width: 1050px;">${story()}</div> `],
   parameters: {

From b97d8917ab5fa1da66780b6076827114afc5751b Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Wed, 27 Mar 2024 16:46:28 +0100
Subject: [PATCH 2/2] fix: review

---
 .../checkbox/checkbox/checkbox.stories.ts      | 16 ++++++++--------
 src/components/checkbox/checkbox/readme.md     |  8 ++++++++
 .../radio-button/radio-button.stories.ts       | 18 +++++++++---------
 .../radio-button/radio-button/readme.md        |  8 ++++++++
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src/components/checkbox/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox/checkbox.stories.ts
index 9e85b3f925..b8c2904c9f 100644
--- a/src/components/checkbox/checkbox/checkbox.stories.ts
+++ b/src/components/checkbox/checkbox/checkbox.stories.ts
@@ -82,7 +82,7 @@ const ariaLabel: InputType = {
   },
 };
 
-const bold: InputType = {
+const labelBoldClass: InputType = {
   control: {
     type: 'boolean',
   },
@@ -99,7 +99,7 @@ const defaultArgTypes: ArgTypes = {
   'icon-name': icon,
   'icon-placement': iconPlacement,
   'aria-label': ariaLabel,
-  bold,
+  labelBoldClass,
 };
 
 const defaultArgs: Args = {
@@ -113,16 +113,16 @@ const defaultArgs: Args = {
   'icon-name': undefined,
   'icon-placement': undefined,
   'aria-label': undefined,
-  bold: false,
+  labelBoldClass: false,
 };
 
 // We use property and attribute for `checked` to provide consistency to storybook controls.
 // Otherwise, after first user manipulation, the storybook control gets ignored.
 // If only using property, the reset mechanism does not work as expected.
 
-const Template = ({ label, checked, bold, ...args }: Args): TemplateResult => html`
+const Template = ({ label, checked, labelBoldClass, ...args }: Args): TemplateResult => html`
   <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>
-    ${bold ? html`<span class="sbb-text--bold">${label}</span>` : label}
+    ${labelBoldClass ? html`<span class="sbb-text--bold">${label}</span>` : label}
   </sbb-checkbox>
 `;
 
@@ -219,19 +219,19 @@ export const withForm: StoryObj = {
 export const defaultUncheckedBold: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, bold: true },
+  args: { ...defaultArgs, labelBoldClass: true },
 };
 
 export const defaultCheckedBold: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, checked: true, bold: true },
+  args: { ...defaultArgs, checked: true, labelBoldClass: true },
 };
 
 export const defaultIndeterminateBold: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, indeterminate: true, bold: true },
+  args: { ...defaultArgs, indeterminate: true, labelBoldClass: true },
 };
 
 const meta: Meta = {
diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md
index eca790b1bf..9c45d680b9 100644
--- a/src/components/checkbox/checkbox/readme.md
+++ b/src/components/checkbox/checkbox/readme.md
@@ -49,6 +49,14 @@ The component has two `size`, named `s` (default) and `m`.
 <sbb-checkbox value="size" size="m">Size</sbb-checkbox>
 ```
 
+The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:
+
+```html
+<sbb-checkbox value="bold">
+  <span class="sbb-text--bold">Bold label</span>
+</sbb-checkbox>
+```
+
 ## Events
 
 Consumers can listen to the native `change` event on the `sbb-checkbox` component to intercept the input's change;
diff --git a/src/components/radio-button/radio-button/radio-button.stories.ts b/src/components/radio-button/radio-button/radio-button.stories.ts
index 1f5d795824..cc6c61e62c 100644
--- a/src/components/radio-button/radio-button/radio-button.stories.ts
+++ b/src/components/radio-button/radio-button/radio-button.stories.ts
@@ -42,7 +42,7 @@ const ariaLabel: InputType = {
   },
 };
 
-const bold: InputType = {
+const labelBoldClass: InputType = {
   control: {
     type: 'boolean',
   },
@@ -54,7 +54,7 @@ const defaultArgTypes: ArgTypes = {
   disabled,
   size,
   'aria-label': ariaLabel,
-  bold,
+  labelBoldClass,
 };
 
 const defaultArgs: Args = {
@@ -63,17 +63,17 @@ const defaultArgs: Args = {
   disabled: false,
   size: size.options[0],
   'aria-label': undefined,
-  bold: false,
+  labelBoldClass: false,
 };
 
-const DefaultTemplate = ({ bold, ...args }: Args): TemplateResult =>
+const DefaultTemplate = ({ labelBoldClass, ...args }: Args): TemplateResult =>
   html`<sbb-radio-button ${sbbSpread(args)}>
-    ${bold ? html`<span class="sbb-text--bold">Value</span>` : 'Value'}
+    ${labelBoldClass ? html`<span class="sbb-text--bold">Value</span>` : 'Value'}
   </sbb-radio-button>`;
 
-const MultilineLabelTemplate = ({ bold, ...args }: Args): TemplateResult => html`
+const MultilineLabelTemplate = ({ labelBoldClass, ...args }: Args): TemplateResult => html`
   <sbb-radio-button ${sbbSpread(args)}>
-    ${bold ? html`<span class="sbb-text--bold">${longLabel}</span>` : longLabel}
+    ${labelBoldClass ? html`<span class="sbb-text--bold">${longLabel}</span>` : longLabel}
   </sbb-radio-button>
 `;
 
@@ -116,13 +116,13 @@ export const MultilineLabel: StoryObj = {
 export const DefaultBold: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, bold: true },
+  args: { ...defaultArgs, labelBoldClass: true },
 };
 
 export const CheckedBold: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, checked: true, bold: true },
+  args: { ...defaultArgs, checked: true, labelBoldClass: true },
 };
 
 const meta: Meta = {
diff --git a/src/components/radio-button/radio-button/readme.md b/src/components/radio-button/radio-button/readme.md
index 8a28fac903..aecc3b77f5 100644
--- a/src/components/radio-button/radio-button/readme.md
+++ b/src/components/radio-button/radio-button/readme.md
@@ -38,6 +38,14 @@ The component has two different sizes, which can be changed using the `size` pro
 <sbb-radio-button value="small" size="s">Size</sbb-radio-button>
 ```
 
+The component's label can be displayed in bold using the `sbb-text--bold` class on a wrapper tag:
+
+```html
+<sbb-radio-button value="bold">
+  <span class="sbb-text--bold">Bold label</span>
+</sbb-radio-button>
+```
+
 <!-- Auto Generated Below -->
 
 ## Properties