Skip to content

Commit

Permalink
feat(storybook): add radio group docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@bar-tay
bar-tay committed Dec 12, 2023
1 parent dbc2dff commit 83553f1
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 33 deletions.
131 changes: 100 additions & 31 deletions packages/ui-library/src/components/forms/radio/radio-input-group/index.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { PureIconKeys } from '@boiler/icons';
import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
import { html } from 'lit';
import { BlrRadioGroupRenderFunction, BlrRadioGroupType } from '../radio-input-group';
import { action } from '@storybook/addon-actions';

const sharedStyles = html`
<style>
Expand All @@ -27,14 +28,14 @@ export default {
direction: {
description: 'Choose direction of the component.',
table: {
category: 'Content / Settings',
category: 'Appearance',
},
options: ['horizontal', 'vertical'],
control: {
type: 'radio',
},
},
hasLegend: {
showLegend: {
description: 'Choose if component has a legend. ',
table: {
category: 'Content / Settings',
Expand Down Expand Up @@ -65,7 +66,7 @@ export default {
category: 'Content / Settings',
},
},
groupHintMessageIcon: {
groupHintIcon: {
description: 'Select an icon which is displayed in front of the hint message.',
if: { arg: 'hasHint', eq: true },
options: [undefined, ...PureIconKeys],
Expand All @@ -74,6 +75,15 @@ export default {
category: 'Content / Settings',
},
},
options: {
name: 'options',
description:
'Enter an array containing information about the label, value and disabled prop for all options that are part of the select.',
control: 'array',
table: {
category: 'Content / Settings',
},
},
disabled: {
name: 'disabled',
description:
Expand Down Expand Up @@ -175,7 +185,7 @@ export default {
options: Themes,
control: { type: 'select' },
table: {
category: 'Technical Attributes',
category: 'Appearance',
},
},
},
Expand Down Expand Up @@ -210,9 +220,19 @@ export const BlrRadioGroup = (params: BlrRadioGroupType) => BlrRadioGroupRenderF

BlrRadioGroup.storyName = 'Radio Group';

const defaultParams: BlrRadioGroupType = {
const defaultParams: BlrRadioGroupType & {
direction: 'horizontal' | 'vertical';
ariaLabel: string;
radioGroupId: string;
} = {
theme: 'Light',
size: 'md',
checked: false,
direction: 'horizontal',
showLegend: true,
legend: 'Legend-text',
hasHint: false,
groupHintMessage: 'This is a small hint',
groupHintIcon: 'blrInfo',
options: [
{
value: '0',
Expand Down Expand Up @@ -243,19 +263,18 @@ const defaultParams: BlrRadioGroupType = {
hintMessage: 'This is a small hint',
},
],
hasHint: false,
groupHintMessage: 'This is a small hint',
groupHintIcon: 'blrInfo',
disabled: false,
readonly: false,
hasError: false,
groupErrorMessage: 'This is a sample error message',
groupErrorIcon: undefined,
name: 'Radio Group Button',
errorIcon: 'blr360',
hideLabel: true,
required: false,
theme: 'Light',
hasError: false,
groupErrorMessage: '',
groupErrorIcon: 'blrErrorFilled',
ariaLabel: 'Radio Group',
radioGroupId: 'Radio Group',
name: 'Radio Group ',
onChange: () => action('onFocus'),
onFocus: () => action('onFocus'),
onBlur: () => action('onBlur'),
};

BlrRadioGroup.args = defaultParams;
Expand All @@ -272,59 +291,89 @@ export const SizeVariant = () => {
${BlrRadioGroup({
...defaultParams,
size: 'sm',
legend: 'Radio Group SM',
})}
</div>
<div class="wrapper">
${BlrRadioGroup({
...defaultParams,
size: 'md',
legend: 'Radio Group MD',
})}
</div>
<div class="wrapper">
${BlrRadioGroup({
...defaultParams,
size: 'lg',
legend: 'Radio Group LG',
})}
</div>
`;
};

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>
`;
};

/**
* ## Content / Settings
* ### Checked
* The Radio component can be checked or unchecked. The checked state indicates that the Radio component is selected or enabled. The unchecked state indicates that the Radio component is not selected. */
* ### Has Legend
*The Radio Group component can display a legend or no legend.
*/

export const Checked = () =>
export const HasLegend = () =>
html`
<div class="wrapper">
${BlrRadioGroup({
...defaultParams,
checked: true,
showLegend: true,
legend: 'With Legend',
})}
</div>
<div class="wrapper">
${BlrRadioGroup({
...defaultParams,
checked: false,
showLegend: false,
})}
</div>
`;

Checked.story = { name: ' ' };
HasLegend.story = { name: ' ' };

/**
* ## States
* Apart from states like rest, hover, pressed and focus, the Radio component can also be disabled or readonly. The error state is documented under [Validation](#validation).
* Apart from states like rest, hover, pressed and focus, the Radio Group component can also be disabled or readonly. The error state is documented under [Validation](#validation).
* ### Disabled
* The Radio component in the disabled state can not be interacted with. This means it can not receive focus or be selected.
* The Radio Group component in the disabled state can not be interacted with. This means it can not receive focus or be selected.
*/

export const Disabled = () => {
return html`
${sharedStyles}
${BlrRadioGroup({
...defaultParams,
legend: 'Disabled',
disabled: true,
})}
`;
Expand All @@ -333,55 +382,75 @@ export const Disabled = () => {
Disabled.story = { name: ' ' };

/**
* The Radio component in the readonly state can not be interacted with, but it can still be selected and receive focus.
* The Radio Group component in the readonly state can not be interacted with, but it can still be selected and receive focus.
*/
export const Readonly = () => {
return html`
${sharedStyles}
${BlrRadioGroup({
...defaultParams,
legend: 'Readonly',
readonly: true,
})}
`;
};

/**
* ## Validation
* ### Has error
* The Radio component can be set as required. If set as required, an error should be thrown, when the Radio component was not filled, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](#form-label) component in the dependencies section below.
* ### Required
*The Radio Group component can be set as required. If set as required, an error should be thrown, when the Radio Group component was not filled, before it was submitted. It is recommended to indicate in the leged appendix, whether a component is required or not.
*/

export const Required = () => {
return html`
${sharedStyles}
${BlrRadioGroup({
...defaultParams,
legend: 'Required',
required: true,
})}
`;
};

Required.story = { name: ' ' };
/**
* The Radio Group component can be set as required. If set as required, an error should be thrown, when the Radio component was not filled, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Caption Group](#form-caption-group) component in the dependencies section below.
*/
export const HasError = () => {
return html`
${sharedStyles}
${BlrRadioGroup({
...defaultParams,
legend: 'Error',
groupErrorMessage: "OMG it's an error",
hasError: true,
})}
`;
};

HasError.story = { name: ' ' };

/**
* ## Dependencies
* ### Form Caption Group
* The Radio component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Label Caption](?path=/docs/design-system-web-components-internal-components-formlabel--docs) component.
* The Radio Group component can display an optional hint message and error message with icons. Both captions can be combined. For more information have a look at the internal [Form Caption Group](?path=/docs/design-system-web-components-internal-components-formcaptiongroup--docs) component.
*/
export const FormCaptionGroup = () => {
return html`
${sharedStyles}
<div class="wrapper">
${BlrRadioGroup({
...defaultParams,
legend: 'Hint message',
hasHint: true,
})}
</div>
<div class="wrapper">
${BlrRadioGroup({
...defaultParams,
hasError: true,
legend: 'Hint and error message',
errorIcon: 'blr360',
groupErrorMessage: "OMG it's an error",
hasHint: true,
hasError: true,
})}
</div>
`;
Expand Down
6 changes: 4 additions & 2 deletions packages/ui-library/src/components/forms/radio/radio-input-group/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,16 @@ export class BlrRadioGroup extends LitElement {
@property() onFocus?: HTMLElement['focus'];
@property() hasError?: boolean;
@property() errorIcon?: SizelessIconType;
@property() hideLabel!: boolean;
@property() hideLabel?: boolean;
@property() options!: RadioOption[];
@property() hasHint = true;
@property() groupHintIcon?: SizelessIconType;
@property() groupErrorMessage?: string;
@property() groupHintMessage?: string;
@property() groupErrorIcon?: SizelessIconType;
@property() showLegend?: boolean = true;
@property() legend?: string;
@property() direction?: 'vertical' | 'horizontal';

@property() theme: ThemeType = 'Light';

Expand Down Expand Up @@ -93,7 +95,7 @@ export class BlrRadioGroup extends LitElement {
${dynamicStyles.map((style) => style)}
</style>
${this.showLegend
? html`<div class="${legendWrapperClasses}"><legend class="${legendClasses}">Choose any option</legend></div>`
? html`<div class="${legendWrapperClasses}"><legend class="${legendClasses}">${this.legend}</legend></div>`
: nothing}
<div class="blr-radio-group ${classes}">
Expand Down

0 comments on commit 83553f1

Please sign in to comment.