Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Mar 28, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3a9231
chore: add stories with bold label
DavideMininni-Fincons Mar 27, 2024
b97d891
fix: review
DavideMininni-Fincons Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 40 additions & 40 deletions src/components/checkbox/checkbox/checkbox.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,12 @@ const ariaLabel: InputType = {
},
};

const labelBoldClass: InputType = {
control: {
type: 'boolean',
},
};

const defaultArgTypes: ArgTypes = {
size,
checked,
Expand All @@ -93,6 +99,7 @@ const defaultArgTypes: ArgTypes = {
'icon-name': icon,
'icon-placement': iconPlacement,
'aria-label': ariaLabel,
labelBoldClass,
};

const defaultArgs: Args = {
Expand All @@ -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`
Expand Down Expand Up @@ -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,
Expand All @@ -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 = {
Expand Down
8 changes: 8 additions & 0 deletions src/components/checkbox/checkbox/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
34 changes: 29 additions & 5 deletions src/components/radio-button/radio-button/radio-button.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 = {
Expand All @@ -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>
`;

Expand Down Expand Up @@ -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: {
Expand Down
8 changes: 8 additions & 0 deletions src/components/radio-button/radio-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading