fix: stories with label bold for sbb-checkbox and sbb-radio-button (#…

…2528)
sbb-design-systems · Mar 28, 2024 · 9e85be5 · 9e85be5
1 parent b74e15b
commit 9e85be5
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 45 deletions.
diff --git a/src/components/checkbox/checkbox/checkbox.stories.ts b/src/components/checkbox/checkbox/checkbox.stories.ts
@@ -82,6 +82,12 @@ const ariaLabel: InputType = {
   },
 };
 
+const labelBoldClass: 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,
+  labelBoldClass,
 };
 
 const defaultArgs: Args = {
@@ -106,14 +113,17 @@ const defaultArgs: Args = {
   'icon-name': undefined,
   'icon-placement': undefined,
   'aria-label': undefined,
+  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, ...args }: Args): TemplateResult => html`
-  <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>${label}</sbb-checkbox>
+const Template = ({ label, checked, labelBoldClass, ...args }: Args): TemplateResult => html`
+  <sbb-checkbox .checked=${checked} ?checked=${checked} ${sbbSpread(args)}>
+    ${labelBoldClass ? 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, labelBoldClass: true },
+};
+
+export const defaultCheckedBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, checked: true, labelBoldClass: true },
+};
+
+export const defaultIndeterminateBold: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  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
@@ -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
@@ -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 labelBoldClass: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const defaultArgTypes: ArgTypes = {
   value,
   checked,
   disabled,
   size,
   'aria-label': ariaLabel,
+  labelBoldClass,
 };
 
 const defaultArgs: Args = {
@@ -53,15 +63,17 @@ const defaultArgs: Args = {
   disabled: false,
   size: size.options[0],
   'aria-label': undefined,
+  labelBoldClass: false,
 };
 
-const DefaultTemplate = (args: Args): TemplateResult =>
-  html`<sbb-radio-button ${sbbSpread(args)}>Value</sbb-radio-button>`;
+const DefaultTemplate = ({ labelBoldClass, ...args }: Args): TemplateResult =>
+  html`<sbb-radio-button ${sbbSpread(args)}>
+    ${labelBoldClass ? html`<span class="sbb-text--bold">Value</span>` : 'Value'}
+  </sbb-radio-button>`;
 
-const MultilineLabelTemplate = (args: Args): TemplateResult => html`
+const MultilineLabelTemplate = ({ labelBoldClass, ...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.
+    ${labelBoldClass ? 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, labelBoldClass: true },
+};
+
+export const CheckedBold: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, checked: true, labelBoldClass: true },
+};
+
 const meta: Meta = {
   decorators: [(story) => html` <div style="padding: 2rem; max-width: 1050px;">${story()}</div> `],
   parameters: {

diff --git 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