studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝(react) upgrade stories for Storybook 8

Browse Source 
The old way of using Canvas is deprecated, we need to migrate all the
stories to the new standard.
This commit is contained in:
Nathan Vasse
2024-03-14 17:17:30 +01:00
committed by NathanVss
parent 1f80674717
commit c63aff4861
13 changed files with 175 additions and 490 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/react/src/components/Forms/Radio/index.mdx
View File

@@ -8,9 +8,7 @@ import * as Stories from './index.stories';
Cunningham provides a versatile Radio component that can be used in a variety of ways. The radio component is a form element that allows the user to select one option from a set of options.
<Canvas>
<Story id="components-forms-radio--group"/>
</Canvas>
<Canvas of={Stories.Group} sourceState="shown"/>
## Label
@@ -18,80 +16,55 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
<Canvas sourceState="shown">
<Story id="components-forms-radio--default"/>
</Canvas>
<Canvas of={Stories.Default} sourceState="shown"/>
**With label**
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-label"/>
</Canvas>
<Canvas of={Stories.WithLabel} sourceState="shown"/>
## Value
You can set the value of the radio with the `checked` attribute.
<Canvas sourceState="shown">
<Story id="components-forms-radio--default"/>
<Story id="components-forms-radio--checked"/>
</Canvas>
<Canvas of={Stories.Default}/>
<Canvas of={Stories.Checked}/>
## Texts
As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the radio.
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-text"/>
</Canvas>
<Canvas of={Stories.WithText} sourceState="shown"/>
## Disabled
As a regular radio, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-radio--disabled"/>
</Canvas>
<Canvas of={Stories.Disabled} sourceState="shown"/>
## States
You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-radio--with-text"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-radio--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-radio--error"/>
</Canvas>
<Canvas of={Stories.WithText} sourceState="shown"/>
<Canvas of={Stories.Success} sourceState="shown"/>
<Canvas of={Stories.Error} sourceState="shown"/>
## Group
Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
<Canvas sourceState="shown">
<Story id="components-forms-radio--group"/>
</Canvas>
<Canvas of={Stories.Group} sourceState="shown"/>
You can also define `state`, `text` props on the group component
<Canvas sourceState="shown">
<Story id="components-forms-radio--group-error"/>
<Story id="components-forms-radio--group-success"/>
</Canvas>
<Canvas of={Stories.GroupError} sourceState="shown"/>
<Canvas of={Stories.GroupSuccess} sourceState="shown"/>
## Usage with react-hook-form
You can use this radio with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown">
<Story id="components-forms-radio--react-hook-form"/>
</Canvas>
<Canvas of={Stories.ReactHookForm} sourceState="shown"/>
### Props
@@ -120,4 +93,4 @@ See also [Field](?path=/story/components-forms-field-doc--page)
##
<img src="components/Forms/Radio/resources/dd_3.svg"/>
<img src="components/Forms/Radio/resources/dd_3.svg"/>