♻️(react) fix Storybook source blocks
Due to the recent upgrade to Storybook 7, the source blocks of Canvases were broken, they were only showing args. This was mainly due to the fact that as of Storybook 7 the meta tags of the MDX files have changed, thus causing the issue. These are now based on imports. We also needed to rename index.stories.mdx files to index.mdx because Storybook was throwing errors, maybe due to a conflicts with index.stories.tsx files and new imports. Anyway this way of naming MDX files seems to be the recommend one based on the official documentation.
This commit is contained in:
Nathan Vasse
159
packages/react/src/components/Forms/Input/index.mdx
Normal file
159
packages/react/src/components/Forms/Input/index.mdx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
|
||||
import { Input } from "./index";
|
||||
import * as Stories from './index.stories';
|
||||
|
||||
<Meta of={Stories}/>
|
||||
|
||||
# Input
|
||||
|
||||
Cunningham provides a versatile Input component that you can use in your forms.
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-forms-input--default"/>
|
||||
</Canvas>
|
||||
|
||||
<Source
|
||||
language='ts'
|
||||
dark
|
||||
format={false}
|
||||
code={`import { Input } from "@openfun/cunningham-react";`}
|
||||
/>
|
||||
|
||||
## 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-input--default"/>
|
||||
</Canvas>
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--success"/>
|
||||
</Canvas>
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--error"/>
|
||||
</Canvas>
|
||||
|
||||
## Disabled
|
||||
|
||||
As a regular input, you can disable it by using the `disabled` props.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--disabled-empty"/>
|
||||
<Story id="components-forms-input--disabled-filled"/>
|
||||
</Canvas>
|
||||
|
||||
## Icons
|
||||
|
||||
You can define an icon that will appear on the left side of the input by using the `icon` props.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--icon"/>
|
||||
</Canvas>
|
||||
|
||||
You can also independently add an icon on the right side by using the `rightIcon` props.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--icon-right"/>
|
||||
</Canvas>
|
||||
|
||||
## Texts
|
||||
|
||||
You can define a text that will appear below the input by using the `text` props.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--with-text"/>
|
||||
</Canvas>
|
||||
|
||||
You can also independently add a text on the right side by using the `rightText` props.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--with-both-texts"/>
|
||||
</Canvas>
|
||||
|
||||
## Width
|
||||
|
||||
By default, the input 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-input--full-width"/>
|
||||
</Canvas>
|
||||
|
||||
## Chars Counter
|
||||
|
||||
You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare
|
||||
in mind to also define `charCounterMax`.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--char-counter"/>
|
||||
</Canvas>
|
||||
|
||||
## Controlled / Non Controlled
|
||||
|
||||
Like a native input, you can use the Input 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-input--controlled"/>
|
||||
</Canvas>
|
||||
|
||||
## Ref
|
||||
|
||||
You can use the `ref` props to get a reference to the input element. The ref to the native input is nested inside the `input` attribute.
|
||||
|
||||
<Canvas sourceState="shown">
|
||||
<Story id="components-forms-input--with-ref"/>
|
||||
</Canvas>
|
||||
|
||||
## Props
|
||||
|
||||
You can use all the props of the native html `<input>` element props plus the following.
|
||||
|
||||
<ArgsTable of={Input} />
|
||||
|
||||
## Design tokens
|
||||
|
||||
Here are the custom design tokens defined by the button.
|
||||
|
||||
| Token | Description |
|
||||
|--------------- |----------------------------- |
|
||||
| font-weight | Value font weight |
|
||||
| font-size | Value font size |
|
||||
| color | Value color |
|
||||
| border-radius | Border radius of the input |
|
||||
| border-radius--hover | Border radius of the input on mouse hover |
|
||||
| border-radius--focus | Border radius of the input when focused |
|
||||
| border-width | Border width of the input |
|
||||
| border-color | Border color of the input |
|
||||
| border-color--hover | Border color of the input on mouse hover |
|
||||
| border-color--focus | Border color of the input when focus |
|
||||
| border-style | Border style of the input |
|
||||
|
||||
See also [Field](?path=/story/components-forms-field-doc--page)
|
||||
|
||||
## Form Example
|
||||
|
||||
<Canvas>
|
||||
<Story id="components-forms-input--form-example"/>
|
||||
</Canvas>
|
||||
|
||||
##
|
||||
|
||||
<img src="components/Forms/Input/resources/dd_1.svg"/>
|
||||
|
||||
##
|
||||
|
||||
<img src="components/Forms/Input/resources/dd_2.svg"/>
|
||||
|
||||
##
|
||||
|
||||
<img src="components/Forms/Input/resources/dd_3.svg"/>
|
||||
|
||||
##
|
||||
|
||||
<img src="components/Forms/Input/resources/dd_4.svg"/>
|
||||
|
||||
##
|
||||
|
||||
<img src="components/Forms/Input/resources/dd_5.svg"/>
|
||||
Reference in New Issue
Block a user