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

52
packages/react/src/components/Forms/TextArea/index.mdx
View File

@@ -8,9 +8,7 @@ import { TextArea } from '.';
Cunningham provides a versatile TextArea component that you can use in your forms.
<Canvas>
<Story id="components-forms-textarea--default"/>
</Canvas>
<Canvas of={Stories.Default}/>
<Source
language='ts'
@@ -23,74 +21,52 @@ Cunningham provides a versatile TextArea component that you can use in your form
You can use the following props to change the state of the TextArea component by using the `state` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--default"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-textarea--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-textarea--error"/>
</Canvas>
<Canvas of={Stories.Default}/>
<Canvas of={Stories.Success}/>
<Canvas of={Stories.Error}/>
## Disabled
As a regular textarea, you can disable it by using the `disabled` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--disabled-empty"/>
<Story id="components-forms-textarea--disabled-filled"/>
</Canvas>
<Canvas of={Stories.DisabledEmpty}/>
<Canvas of={Stories.DisabledFilled}/>
## Texts
You can define a text that will appear below the input by using the `text` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--with-text"/>
</Canvas>
<Canvas of={Stories.WithText}/>
You can also independently add a text on the right side by using the `rightText` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--with-both-texts"/>
</Canvas>
<Canvas of={Stories.WithBothTexts}/>
## Width
By default, the textarea has a default width, like all inputs. But you can force it to take the full width of its container by using the `fullWidth` props.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--full-width"/>
</Canvas>
<Canvas of={Stories.FullWidth}/>
## Chars Counter
You can display a counter of the number of characters entered in the textarea by using the `charsCounter` props. Please bare
in mind to also define `charCounterMax`.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--char-counter"/>
</Canvas>
<Canvas of={Stories.CharCounter}/>
## Controlled / Non Controlled
Like a native textarea, you can use the TextArea component in a controlled or non controlled way. You can see the example below
using the component in a controlled way.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--controlled"/>
</Canvas>
<Canvas of={Stories.Controlled}/>
## Ref
You can use the `ref` props to get a reference to the textarea element.
<Canvas sourceState="shown">
<Story id="components-forms-textarea--with-ref"/>
</Canvas>
<Canvas of={Stories.WithRef}/>
## Props
@@ -121,6 +97,4 @@ Here are the custom design tokens defined by the textarea.
## Form Example
<Canvas>
<Story id="components-forms-textarea--form-example"/>
</Canvas>
<Canvas of={Stories.FormExample}/>