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

38
packages/react/src/components/Button/index.mdx
View File

@@ -23,19 +23,13 @@ You can use icons within the button by passing the icon name as a prop.
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`. > Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.IconLeft}/>
<Story id="components-button--icon-left"/>
</Canvas>
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.IconRight}/>
<Story id="components-button--icon-right"/>
</Canvas>
You can also use button with only an icon. You can also use button with only an icon.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.IconOnly}/>
<Story id="components-button--icon-only"/>
</Canvas>
## Disabled ## Disabled
@@ -43,34 +37,22 @@ The button can be disabled. The disabled button will render the same no matter w
> Keep in the mind that a disabled button will never call `onClick` if it is provided. > Keep in the mind that a disabled button will never call `onClick` if it is provided.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.Disabled}/>
<Story id="components-button--disabled"/>
</Canvas>
## Full width ## Full width
The button can be set to full width. You can use the `fullWidth` prop to do so. The button can be set to full width. You can use the `fullWidth` prop to do so.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.FullWidth}/>
<Story id="components-button--full-width"/> <Canvas sourceState="shown" of={Stories.FullWidthWithIcon}/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--full-width-with-icon"/>
</Canvas>
## Size ## Size
You can adjust the size of the button by using the `size` prop. Default value is `medium`. You can adjust the size of the button by using the `size` prop. Default value is `medium`.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.Primary}/>
<Story id="components-button--primary"/> <Canvas sourceState="shown" of={Stories.Small}/>
</Canvas> <Canvas sourceState="shown" of={Stories.Nano}/>
<Canvas sourceState="shown">
<Story id="components-button--small"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-button--nano"/>
</Canvas>
## Props ## Props
@@ -78,8 +60,6 @@ You can use all the props of the native html `<button>` element props plus the f
<ArgTypes of={Button} /> <ArgTypes of={Button} />
## Design tokens ## Design tokens
Here a the custom design tokens defined by the button. Here a the custom design tokens defined by the button.

29
packages/react/src/components/DataGrid/index.mdx
View File

@@ -2,6 +2,7 @@ import { Canvas, Meta, Source, ArgTypes } from '@storybook/blocks';
import { DataGrid } from './index'; import { DataGrid } from './index';
import { SimpleDataGrid } from './SimpleDataGrid'; import { SimpleDataGrid } from './SimpleDataGrid';
import { DataList } from './DataList'; import { DataList } from './DataList';
import * as Stories from './index.stories'; import * as Stories from './index.stories';
<Meta of={Stories}/> <Meta of={Stories}/>
@@ -11,9 +12,7 @@ import * as Stories from './index.stories';
Cunningham provides a DataGrid component that can be used to display data in a tabular format. The DataGrid component Cunningham provides a DataGrid component that can be used to display data in a tabular format. The DataGrid component
is built on top of [Tan Stack Table](https://tanstack.com/table/v8). It can be used for client only data or server side data. is built on top of [Tan Stack Table](https://tanstack.com/table/v8). It can be used for client only data or server side data.
<Canvas> <Canvas of={Stories.FullServerSide}/>
<Story id="components-datagrid--full-server-side"/>
</Canvas>
## Get Started ## Get Started
@@ -39,9 +38,7 @@ This component is a wrapper around the more complicated DataGrid component. It i
Here a quick usage example Here a quick usage example
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.DataListOnly}/>
<Story id="components-datagrid--data-list-only"/>
</Canvas>
### Props ### Props
@@ -62,9 +59,7 @@ Sorting etc ...
Take a look at the following example that renders a table of users. Take a look at the following example that renders a table of users.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.ClientSideWithoutPagination}/>
<Story id="components-datagrid--client-side-without-pagination"/>
</Canvas>
As you can see in this example there is no pagination, but we can simply add it by adding a `defaultPaginationParams` props. As you can see in this example there is no pagination, but we can simply add it by adding a `defaultPaginationParams` props.
We will also enable a default sorting on the `price` column with the `defaultSortModel` props, along with the row selection We will also enable a default sorting on the `price` column with the `defaultSortModel` props, along with the row selection
@@ -73,9 +68,7 @@ with `enableRowSelection`, `rowSelection` and `onRowSelectionChange` props.
> Please click on checkboxes to select rows to see hows the `onRowSelectionChange` prop works, selected ids are displayed > Please click on checkboxes to select rows to see hows the `onRowSelectionChange` prop works, selected ids are displayed
below the table. below the table.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.ClientSideWithPagination}/>
<Story id="components-datagrid--client-side-with-pagination"/>
</Canvas>
As you can see, with `SimpleDataGrid` you can easily add pagination, sorting without have to worry about controlling As you can see, with `SimpleDataGrid` you can easily add pagination, sorting without have to worry about controlling
their states. their states.
@@ -93,9 +86,7 @@ pagination, sorting etc ...
Please take a look at the following example that simulates a server side data that's re-fetched on each page and sorting Please take a look at the following example that simulates a server side data that's re-fetched on each page and sorting
change. change.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.FullServerSide}/>
<Story id="components-datagrid--full-server-side"/>
</Canvas>
As you can see, in this example the pagination and sorting are now controlled, this is more verbose but gives you more As you can see, in this example the pagination and sorting are now controlled, this is more verbose but gives you more
control over the state of the table, like being able to use `useEffect` to fetch data when the state changes. control over the state of the table, like being able to use `useEffect` to fetch data when the state changes.
@@ -151,17 +142,13 @@ outside the grid component ( for example to delete selected rows ).
The component provides out of the box a loading state that can be enabled by setting the `isLoading` props to `true`. The component provides out of the box a loading state that can be enabled by setting the `isLoading` props to `true`.
So feel free to use it between page or sorting changes when you are fetching data from a server. So feel free to use it between page or sorting changes when you are fetching data from a server.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.Loading}/>
<Story id="components-datagrid--loading"/>
</Canvas>
## Empty State ## Empty State
The component automatically displays an empty state when there is no data to display and it is not loading. The component automatically displays an empty state when there is no data to display and it is not loading.
<Canvas sourceState="shown"> <Canvas sourceState="shown" of={Stories.Empty}/>
<Story id="components-datagrid--empty"/>
</Canvas>
## Actions alignment ## Actions alignment

54
packages/react/src/components/Forms/Checkbox/index.mdx
View File

@@ -8,9 +8,7 @@ import { Checkbox } from './index';
Cunningham provides a versatile Checkbox component that you can use in your forms. Cunningham provides a versatile Checkbox component that you can use in your forms.
<Canvas> <Canvas of={Stories.Group} />
<Story id="components-forms-checkbox--group"/>
</Canvas>
## Label ## Label
@@ -18,80 +16,58 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label** **Without label**
<Canvas sourceState="shown"> <Canvas of={Stories.Default} />
<Story id="components-forms-checkbox--default"/>
</Canvas>
**With label** **With label**
<Canvas sourceState="shown"> <Canvas of={Stories.WithLabel} />
<Story id="components-forms-checkbox--with-label"/>
</Canvas>
## Value ## Value
You can set the value of the checkbox in 3 different ways. You can set the value of the checkbox in 3 different ways.
<Canvas sourceState="shown"> <Canvas of={Stories.Default} />
<Story id="components-forms-checkbox--default"/> <Canvas of={Stories.Indeterminate} />
<Story id="components-forms-checkbox--indeterminate"/> <Canvas of={Stories.Checked} />
<Story id="components-forms-checkbox--checked"/>
</Canvas>
## Texts ## 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 checkbox. As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown"> <Canvas of={Stories.WithTexts} />
<Story id="components-forms-checkbox--with-texts"/>
</Canvas>
## Disabled ## Disabled
As a regular checkbox, you can disable it by using the `disabled` props. As a regular checkbox, you can disable it by using the `disabled` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Disabled} />
<Story id="components-forms-checkbox--disabled"/>
</Canvas>
## States ## States
You can use the following props to change the state of the Input component by using the `state` props. You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.WithTexts} />
<Story id="components-forms-checkbox--with-texts"/>
</Canvas>
<Canvas sourceState="shown"> <Canvas of={Stories.Success} />
<Story id="components-forms-checkbox--success"/>
</Canvas>
<Canvas sourceState="shown"> <Canvas of={Stories.Error} />
<Story id="components-forms-checkbox--error"/>
</Canvas>
## Group ## Group
It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so. It will happen often that you will need to use multiple grouped checkboxes. You can use the `CheckboxGroup` component to do so.
<Canvas sourceState="shown"> <Canvas of={Stories.Group} />
<Story id="components-forms-checkbox--group"/>
</Canvas>
You can also define `state`, `text` props on the group component You can also define `state`, `text` props on the group component
<Canvas sourceState="shown"> <Canvas of={Stories.GroupError} />
<Story id="components-forms-checkbox--group-error"/> <Canvas of={Stories.GroupSuccess} />
<Story id="components-forms-checkbox--group-success"/>
</Canvas>
## Usage with react-hook-form ## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs) You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown"> <Canvas of={Stories.ReactHookForm} />
<Story id="components-forms-checkbox--react-hook-form"/>
</Canvas>
### Props ### Props

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

@@ -1,9 +1,10 @@
import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
import { DatePicker } from "./index"; import { DatePicker } from "./index";
import { DateRangePicker } from "./index"; import { DateRangePicker } from "./index";
import * as Stories from "./index.stories"
import { ArgTypes } from '@storybook/blocks';
<Meta title="Components/Forms/DatePicker/Doc" component={DatePicker}/> <Meta of={Stories}/>
# DatePicker # DatePicker
@@ -26,16 +27,13 @@ UI components provided by [React-Spectrum](https://react-spectrum.adobe.com/reac
`} `}
/> />
<Canvas> <Canvas of={Stories.Default}/>
<Story id="components-forms-datepicker--default"/>
</Canvas>
## Default value ## Default value
You can use the following props to change the default value of the DatePicker component by using the `state` props. You can use the following props to change the default value of the DatePicker component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.DefaultValue} sourceState="shown"/>
<Story id="components-forms-datepicker--default-value"/>
</Canvas>
## Range ## Range
@@ -65,62 +63,47 @@ Ex: If a `DateRangePicker` is named `"subscription"`, you would access its value
`} `}
/> />
<Canvas> <Canvas of={Stories.RangeDefault}/>
<Story id="components-forms-datepicker--range-default"/>
</Canvas>
## States ## States
You can use the following props to change the state of the DatePicker component by using the `state` props. You can use the following props to change the state of the DatePicker component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Error}/>
<Story id="components-forms-datepicker--error"/> <Canvas of={Stories.Success}/>
<Story id="components-forms-datepicker--success"/>
</Canvas>
## Disabled ## Disabled
As a regular input, you can disable it by using the `disabled` props. As a regular input, you can disable it by using the `disabled` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Disabled} sourceState="shown"/>
<Story id="components-forms-datepicker--disabled"/> <Canvas of={Stories.DisabledValue} sourceState="shown"/>
<Story id="components-forms-datepicker--disabled-value"/>
</Canvas>
## Texts ## 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 checkbox. As the component uses [Field](?path=/story/components-forms-field-doc--page), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown"> <Canvas of={Stories.WithText} sourceState="shown"/>
<Story id="components-forms-datepicker--with-text"/>
</Canvas>
## Controlled / Non Controlled ## Controlled / Non Controlled
Like a native input, you can use the DatePicker component in a controlled or non controlled way. You can see the example below Like a native input, you can use the DatePicker component in a controlled or non controlled way. You can see the example below
using the component in a controlled way. using the component in a controlled way.
<Canvas sourceState="shown"> <Canvas of={Stories.Controlled} sourceState="shown"/>
<Story id="components-forms-datepicker--controlled"/> <Canvas of={Stories.RangeControlled} sourceState="shown"/>
<Story id="components-forms-datepicker--range-controlled"/>
</Canvas>
## MinValue / MaxValue ## MinValue / MaxValue
You can pass a date range that are valid using the `minValue` and `maxValue` props. You can pass a date range that are valid using the `minValue` and `maxValue` props.
<Canvas sourceState="shown"> <Canvas of={Stories.MinMaxValue} sourceState="shown"/>
<Story id="components-forms-datepicker--min-max-value"/>
</Canvas>
## Invalid date ## Invalid date
When passing an invalid date, for example outside of the valid range, the DatePicker component would render invalid. When passing an invalid date, for example outside of the valid range, the DatePicker component would render invalid.
<Canvas sourceState="shown"> <Canvas of={Stories.InvalidValue} sourceState="shown"/>
<Story id="components-forms-datepicker--invalid-value"/>
</Canvas>
## International calendars ## International calendars
@@ -131,6 +114,8 @@ By default, the DatePicker component uses the CunninghamProvider locale.
<Story id="components-forms-datepicker--custom-locale"/> <Story id="components-forms-datepicker--custom-locale"/>
<Story id="components-forms-datepicker--cunningham-locale"/> <Story id="components-forms-datepicker--cunningham-locale"/>
</Canvas> </Canvas>
<Canvas of={Stories.CustomLocale}/>
<Canvas of={Stories.CunninghamLocale}/>
## Timezone management ## Timezone management
@@ -147,11 +132,11 @@ You can see the list of props below.
### DatePicker ### DatePicker
<ArgsTable of={DatePicker} /> <ArgTypes of={DatePicker} />
### DateRangePicker ### DateRangePicker
<ArgsTable of={DateRangePicker} /> <ArgTypes of={DateRangePicker} />
## Design tokens ## Design tokens

49
packages/react/src/components/Forms/FileUploader/index.mdx
View File

@@ -8,10 +8,7 @@ import { FileUploader } from './index';
Cunningham provides a file uploader component that you can use in your forms. Cunningham provides a file uploader component that you can use in your forms.
<Canvas of={Stories.Mono}/>
<Canvas>
<Story id="components-forms-fileuploader--mono"/>
</Canvas>
<Source <Source
language='ts' language='ts'
@@ -24,38 +21,22 @@ Cunningham provides a file uploader component that you can use in your forms.
The file uploader comes with a multi version to handle multiple files. The file uploader comes with a multi version to handle multiple files.
<Canvas sourceState="shown"> <Canvas of={Stories.MultiWihFiles} sourceState="shown"/>
<Story id="components-forms-fileuploader--multi-wih-files"/>
</Canvas>
## States ## States
You can use the following props to change the state of the FileUploader component by using the `state` props. You can use the following props to change the state of the FileUploader component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.MultiWithFileSuccess} sourceState="shown"/>
<Story id="components-forms-fileuploader--mono-with-file-success"/> <Canvas of={Stories.MonoError} sourceState="shown"/>
</Canvas> <Canvas of={Stories.MonoUploading} sourceState="shown"/>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-error"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-uploading"/>
</Canvas>
## Texts ## Texts
You can customize displayed texts by using `bigText` and `text` props. You can customize displayed texts by using `bigText` and `text` props.
<Canvas sourceState="shown"> <Canvas of={Stories.MonoWithText} sourceState="shown"/>
<Story id="components-forms-fileuploader--mono-with-text"/> <Canvas of={Stories.MonoWithBigText} sourceState="shown"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-with-big-text"/>
</Canvas>
## Icons ## Icons
@@ -63,15 +44,9 @@ You can customize the icons used by the FileUploader using `icon`, `successIcon`
> You can also disable the icon animation on hover by using `animateIcon` props. > You can also disable the icon animation on hover by using `animateIcon` props.
<Canvas sourceState="shown"> <Canvas of={Stories.MonoCustomIcons} sourceState="shown"/>
<Story id="components-forms-fileuploader--mono-custom-icons"/> <Canvas of={Stories.MonoCustomIconsSuccess} sourceState="shown"/>
</Canvas> <Canvas of={Stories.MonoCustomIconsUploading} sourceState="shown"/>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-custom-icons-success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-fileuploader--mono-custom-icons-uploading"/>
</Canvas>
## Controlled / Non Controlled ## Controlled / Non Controlled
@@ -83,9 +58,7 @@ You can also reset the input by using the `reset` method available via the ref.
It works the same for multiple or mono version. It works the same for multiple or mono version.
<Canvas sourceState="shown"> <Canvas of={Stories.MultiValue} sourceState="shown"/>
<Story id="components-forms-fileuploader--multi-value"/>
</Canvas>
## Props ## Props

60
packages/react/src/components/Forms/Input/index.mdx
View File

@@ -8,9 +8,7 @@ import * as Stories from './index.stories';
Cunningham provides a versatile Input component that you can use in your forms. Cunningham provides a versatile Input component that you can use in your forms.
<Canvas> <Canvas of={Stories.Default} sourceState="shown"/>
<Story id="components-forms-input--default"/>
</Canvas>
<Source <Source
language='ts' language='ts'
@@ -23,96 +21,68 @@ Cunningham provides a versatile Input component that you can use in your forms.
You can use the following props to change the state of the Input component by using the `state` props. You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Default} sourceState="shown"/>
<Story id="components-forms-input--default"/> <Canvas of={Stories.Success} sourceState="shown"/>
</Canvas> <Canvas of={Stories.Error} sourceState="shown"/>
<Canvas sourceState="shown">
<Story id="components-forms-input--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-input--error"/>
</Canvas>
## Disabled ## Disabled
As a regular input, you can disable it by using the `disabled` props. As a regular input, you can disable it by using the `disabled` props.
<Canvas sourceState="shown"> <Canvas of={Stories.DisabledEmpty} sourceState="shown"/>
<Story id="components-forms-input--disabled-empty"/> <Canvas of={Stories.DisabledFilled} sourceState="shown"/>
<Story id="components-forms-input--disabled-filled"/>
</Canvas>
## Icons ## Icons
You can define an icon that will appear on the left side of the input by using the `icon` props. You can define an icon that will appear on the left side of the input by using the `icon` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Icon} 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. You can also independently add an icon on the right side by using the `rightIcon` props.
<Canvas sourceState="shown"> <Canvas of={Stories.IconRight} sourceState="shown"/>
<Story id="components-forms-input--icon-right"/>
</Canvas>
## Texts ## Texts
You can define a text that will appear below the input by using the `text` props. You can define a text that will appear below the input by using the `text` props.
<Canvas sourceState="shown"> <Canvas of={Stories.WithText} 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. You can also independently add a text on the right side by using the `rightText` props.
<Canvas sourceState="shown"> <Canvas of={Stories.WithBothTexts} sourceState="shown"/>
<Story id="components-forms-input--with-both-texts"/>
</Canvas>
## Width ## 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. 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"> <Canvas of={Stories.FullWidth} sourceState="shown"/>
<Story id="components-forms-input--full-width"/>
</Canvas>
## Chars Counter ## Chars Counter
You can display a counter of the number of characters entered in the input by using the `charsCounter` props. Please bare 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`. in mind to also define `charCounterMax`.
<Canvas sourceState="shown"> <Canvas of={Stories.CharCounter} sourceState="shown"/>
<Story id="components-forms-input--char-counter"/>
</Canvas>
## Controlled / Non Controlled ## 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 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. using the component in a controlled way.
<Canvas sourceState="shown"> <Canvas of={Stories.Controlled} sourceState="shown"/>
<Story id="components-forms-input--controlled"/>
</Canvas>
## Ref ## Ref
You can use the `ref` props to get a reference to the input element. You can use the `ref` props to get a reference to the input element.
<Canvas sourceState="shown"> <Canvas of={Stories.WithRef} sourceState="shown"/>
<Story id="components-forms-input--with-ref"/>
</Canvas>
## Usage with react-hook-form ## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs) You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown"> <Canvas of={Stories.ReactHookForm} sourceState="shown"/>
<Story id="components-forms-input--react-hook-form"/>
</Canvas>
## Props ## Props

55
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. 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> <Canvas of={Stories.Group} sourceState="shown"/>
<Story id="components-forms-radio--group"/>
</Canvas>
## Label ## Label
@@ -18,80 +16,55 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label** **Without label**
<Canvas sourceState="shown"> <Canvas of={Stories.Default} sourceState="shown"/>
<Story id="components-forms-radio--default"/>
</Canvas>
**With label** **With label**
<Canvas sourceState="shown"> <Canvas of={Stories.WithLabel} sourceState="shown"/>
<Story id="components-forms-radio--with-label"/>
</Canvas>
## Value ## Value
You can set the value of the radio with the `checked` attribute. You can set the value of the radio with the `checked` attribute.
<Canvas sourceState="shown"> <Canvas of={Stories.Default}/>
<Story id="components-forms-radio--default"/> <Canvas of={Stories.Checked}/>
<Story id="components-forms-radio--checked"/>
</Canvas>
## Texts ## 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. 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"> <Canvas of={Stories.WithText} sourceState="shown"/>
<Story id="components-forms-radio--with-text"/>
</Canvas>
## Disabled ## Disabled
As a regular radio, you can disable it by using the `disabled` props. As a regular radio, you can disable it by using the `disabled` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Disabled} sourceState="shown"/>
<Story id="components-forms-radio--disabled"/>
</Canvas>
## States ## States
You can use the following props to change the state of the Input component by using the `state` props. You can use the following props to change the state of the Input component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.WithText} sourceState="shown"/>
<Story id="components-forms-radio--with-text"/> <Canvas of={Stories.Success} sourceState="shown"/>
</Canvas> <Canvas of={Stories.Error} sourceState="shown"/>
<Canvas sourceState="shown">
<Story id="components-forms-radio--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-radio--error"/>
</Canvas>
## Group ## Group
Here is how you can leverage the `RadioGroup` component to create a group of radio buttons. Here is how you can leverage the `RadioGroup` component to create a group of radio buttons.
<Canvas sourceState="shown"> <Canvas of={Stories.Group} sourceState="shown"/>
<Story id="components-forms-radio--group"/>
</Canvas>
You can also define `state`, `text` props on the group component You can also define `state`, `text` props on the group component
<Canvas sourceState="shown"> <Canvas of={Stories.GroupError} sourceState="shown"/>
<Story id="components-forms-radio--group-error"/> <Canvas of={Stories.GroupSuccess} sourceState="shown"/>
<Story id="components-forms-radio--group-success"/>
</Canvas>
## Usage with react-hook-form ## Usage with react-hook-form
You can use this radio with [react-hook-form](https://react-hook-form.com/docs) You can use this radio with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown"> <Canvas of={Stories.ReactHookForm} sourceState="shown"/>
<Story id="components-forms-radio--react-hook-form"/>
</Canvas>
### Props ### Props

58
packages/react/src/components/Forms/Select/mono.mdx
View File

@@ -11,9 +11,7 @@ using [Downshift](https://www.downshift-js.com/), so that mean there is no `sele
> You can also use the [multi version](?path=/docs/components-forms-select-multi--docs) if you need > You can also use the [multi version](?path=/docs/components-forms-select-multi--docs) if you need
<Canvas> <Canvas of={Stories.Uncontrolled}/>
<Story id="components-forms-select-mono--uncontrolled"/>
</Canvas>
## Options ## Options
@@ -36,9 +34,7 @@ As you can see the `value` is optional, if not provided, the `label` will be use
You can enable the text live filtering simply by using the `searchable` props. You can enable the text live filtering simply by using the `searchable` props.
<Canvas sourceState="shown"> <Canvas of={Stories.SearchableUncontrolled} />
<Story id="components-forms-select-mono--searchable-uncontrolled"/>
</Canvas>
> You can use `onSearchInputChange` to get the value of the input when the user is typing. > You can use `onSearchInputChange` to get the value of the input when the user is typing.
@@ -46,54 +42,38 @@ You can enable the text live filtering simply by using the `searchable` props.
You can use the following props to change the state of the Select component by using the `state` props. You can use the following props to change the state of the Select component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Success}/>
<Story id="components-forms-select-mono--success"/> <Canvas of={Stories.Error}/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-select-mono--error"/>
</Canvas>
## Disabled ## Disabled
As a regular select, you can disable it by using the `disabled` props. As a regular select, you can disable it by using the `disabled` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Disabled}/>
<Story id="components-forms-select-mono--disabled"/>
</Canvas>
## Texts ## Texts
As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox. As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown"> <Canvas of={Stories.WithText}/>
<Story id="components-forms-select-mono--with-text"/>
</Canvas>
## Width ## Width
By default, the select 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. By default, the select 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"> <Canvas of={Stories.FullWidth}/>
<Story id="components-forms-select-mono--full-width"/>
</Canvas>
## Clearable ## Clearable
By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props. By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
<Canvas sourceState="shown"> <Canvas of={Stories.NotClearable}/>
<Story id="components-forms-select-mono--not-clearable"/>
</Canvas>
## Disabled options ## Disabled options
You can disable some options by using the `disabled` props on the `Option` object. You can disable some options by using the `disabled` props on the `Option` object.
<Canvas sourceState="shown"> <Canvas of={Stories.DisabledOptions}/>
<Story id="components-forms-select-mono--disabled-options"/>
</Canvas>
## Hide label ## Hide label
@@ -101,9 +81,7 @@ For some reasons you might want to hide the label of the select. You can do that
> It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM. > It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
<Canvas sourceState="shown"> <Canvas of={Stories.HiddenLabel}/>
<Story id="components-forms-select-mono--hidden-label"/>
</Canvas>
## Custom render option ## Custom render option
@@ -114,26 +92,20 @@ You can give customize the look of the options by providing `render` callback.
Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
HTML or with its `label`. It is set to `true` by default. HTML or with its `label`. It is set to `true` by default.
<Canvas sourceState="shown"> <Canvas of={Stories.CustomRender}/>
<Story id="components-forms-select-mono--custom-render"/>
</Canvas>
## Controlled / Non Controlled ## Controlled / Non Controlled
Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
using the component in a controlled way. using the component in a controlled way.
<Canvas sourceState="shown"> <Canvas of={Stories.Controlled}/>
<Story id="components-forms-select-mono--controlled"/>
</Canvas>
## Usage with react-hook-form ## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs) You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown"> <Canvas of={Stories.ReactHookForm}/>
<Story id="components-forms-select-mono--react-hook-form"/>
</Canvas>
## Props ## Props
@@ -172,9 +144,7 @@ See also [Field](?path=/story/components-forms-field-doc--page)
## Form Example ## Form Example
<Canvas> <Canvas of={Stories.FormExample}/>
<Story id="components-forms-select-mono--form-example"/>
</Canvas>
## ##

57
packages/react/src/components/Forms/Select/multi.mdx
View File

@@ -10,9 +10,7 @@ using [Downshift](https://www.downshift-js.com/), so that mean there is no `sele
The Multi-Select leverages the regular [Select](?path=/docs/components-forms-select-mono--docs) component, you just have to add the `multi` props. The Multi-Select leverages the regular [Select](?path=/docs/components-forms-select-mono--docs) component, you just have to add the `multi` props.
<Canvas> <Canvas of={Stories.FullWidth}/>
<Story id="components-forms-select-multi--full-width"/>
</Canvas>
## Options ## Options
@@ -22,9 +20,7 @@ The `options` props works the same as the `options` props in the [Select](?path=
You can enable the text live filtering simply by using the `searchable` props. You can enable the text live filtering simply by using the `searchable` props.
<Canvas sourceState="shown"> <Canvas of={Stories.SearchableUncontrolled}/>
<Story id="components-forms-select-multi--searchable-uncontrolled"/>
</Canvas>
> You can use `onSearchInputChange` to get the value of the input when the user is typing. > You can use `onSearchInputChange` to get the value of the input when the user is typing.
@@ -32,53 +28,38 @@ You can enable the text live filtering simply by using the `searchable` props.
You can use the following props to change the state of the Multi-Select component by using the `state` props. You can use the following props to change the state of the Multi-Select component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Success}/>
<Story id="components-forms-select-multi--success"/> <Canvas of={Stories.Error}/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-select-multi--error"/>
</Canvas>
## Disabled ## Disabled
As a regular select, you can disable it by using the `disabled` props. In this mode the user can't select nor unselect existing options. As a regular select, you can disable it by using the `disabled` props. In this mode the user can't select nor unselect existing options.
<Canvas sourceState="shown"> <Canvas of={Stories.Disabled}/>
<Story id="components-forms-select-multi--disabled"/>
</Canvas>
## Texts ## Texts
As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox. As the component uses [Field](?path=/docs/components-forms-field--docs), you can use the `text` props to provide a description of the checkbox.
<Canvas sourceState="shown"> <Canvas of={Stories.WithText}/>
<Story id="components-forms-select-multi--with-text"/>
</Canvas>
## Width ## Width
By default, the Multi-Select 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. By default, the Multi-Select 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"> <Canvas of={Stories.FullWidth}/>
<Story id="components-forms-select-multi--full-width"/>
</Canvas>
## Clearable ## Clearable
By default, the Multi-Select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props. By default, the Multi-Select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
<Canvas sourceState="shown"> <Canvas of={Stories.NotClearable}/>
<Story id="components-forms-select-multi--not-clearable"/>
</Canvas>
## Disabled options ## Disabled options
You can disable some options by using the `disabled` props on the `Option` object. You can disable some options by using the `disabled` props on the `Option` object.
<Canvas sourceState="shown"> <Canvas of={Stories.DisabledOptions}/>
<Story id="components-forms-select-multi--disabled-options"/>
</Canvas>
## Hide label ## Hide label
@@ -86,9 +67,7 @@ For some reasons you might want to hide the label of the Multi-Select. You can d
> It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM. > It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
<Canvas sourceState="shown"> <Canvas of={Stories.HiddenLabel}/>
<Story id="components-forms-select-multi--hidden-label"/>
</Canvas>
## Monoline ## Monoline
@@ -98,9 +77,7 @@ always see the full list of selected options without having to scroll.
> At the moment this props cannot be used in conjunction with `searchable` props. > At the moment this props cannot be used in conjunction with `searchable` props.
<Canvas sourceState="shown"> <Canvas of={Stories.Monoline}/>
<Story id="components-forms-select-multi--monoline"/>
</Canvas>
## Custom render option ## Custom render option
@@ -111,26 +88,20 @@ You can give customize the look of the options by providing `render` callback.
Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom Feel free to use the attribute `showLabelWhenSelected` to choose whether you want to display selected option with the custom
HTML or with its `label`. It is set to `true` by default. HTML or with its `label`. It is set to `true` by default.
<Canvas sourceState="shown"> <Canvas of={Stories.SearchableCustomRender}/>
<Story id="components-forms-select-multi--searchable-custom-render"/>
</Canvas>
## Controlled / Non Controlled ## Controlled / Non Controlled
Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below
using the component in a controlled way. using the component in a controlled way.
<Canvas sourceState="shown"> <Canvas of={Stories.Controlled}/>
<Story id="components-forms-select-multi--controlled"/>
</Canvas>
## Usage with react-hook-form ## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs) You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown"> <Canvas of={Stories.ReactHookForm}/>
<Story id="components-forms-select-multi--react-hook-form"/>
</Canvas>
## Props ## Props

63
packages/react/src/components/Forms/Switch/index.mdx
View File

@@ -1,6 +1,7 @@
import { Canvas, Story, Meta, ArgsTable, Source } from '@storybook/addon-docs'; import { Canvas, Story, Meta, Source } from '@storybook/addon-docs';
import { Switch } from './index'; import { Switch } from './index';
import * as Stories from './index.stories'; import * as Stories from './index.stories';
import { ArgTypes } from '@storybook/blocks';
<Meta of={Stories}/> <Meta of={Stories}/>
@@ -10,10 +11,7 @@ Cunningham provides a Switch component that can be used in a variety of ways.
> To better understand the Switch component, keep in mind that it is kind of a wrapper around the native HTML checkbox element. > To better understand the Switch component, keep in mind that it is kind of a wrapper around the native HTML checkbox element.
<Canvas> <Canvas of={Stories.FormExample}/>
<Story id="components-forms-switch--form-example"/>
</Canvas>
## Label ## Label
@@ -21,15 +19,11 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label** **Without label**
<Canvas sourceState="shown"> <Canvas of={Stories.Default}/>
<Story id="components-forms-switch--default"/>
</Canvas>
**With label** **With label**
<Canvas sourceState="shown"> <Canvas of={Stories.WithLabel}/>
<Story id="components-forms-switch--with-label"/>
</Canvas>
## Label Side ## Label Side
@@ -39,53 +33,34 @@ You can decide where to place the label by using the `labelSide` prop.
**Label on the left (default)** **Label on the left (default)**
<Canvas sourceState="shown"> <Canvas of={Stories.WithLabel}/>
<Story id="components-forms-switch--with-label"/>
</Canvas>
**Label on the right** **Label on the right**
<Canvas sourceState="shown"> <Canvas of={Stories.WithLabelRight}/>
<Story id="components-forms-switch--with-label-right"/>
</Canvas>
## Disabled ## Disabled
You can disable the switch by using the `disabled` prop. You can disable the switch by using the `disabled` prop.
<Canvas sourceState="shown"> <Canvas of={Stories.Disabled}/>
<Story id="components-forms-switch--disabled"/> <Canvas of={Stories.DisabledChecked}/>
<Story id="components-forms-switch--disabled-checked"/>
</Canvas>
## States ## States
You can use the following props to change the state of the component by using the `state` props. You can use the following props to change the state of the component by using the `state` props.
<Canvas sourceState="shown"> <Canvas of={Stories.WithText}/>
<Story id="components-forms-switch--with-text"/> <Canvas of={Stories.Success}/>
</Canvas> <Canvas of={Stories.Error}/>
<Canvas sourceState="shown">
<Story id="components-forms-switch--success"/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-switch--error"/>
</Canvas>
## Width ## Width
By default, the Switch will automatically take the minimum needed width. But you can force it to take the full width of By default, the Switch will automatically take the minimum needed width. But you can force it to take the full width of
its container by using the `fullWidth` prop. its container by using the `fullWidth` prop.
<Canvas sourceState="shown"> <Canvas of={Stories.FullWidth}/>
<Story id="components-forms-switch--full-width"/> <Canvas of={Stories.WithLabelRightAndFullWidth}/>
</Canvas>
<Canvas sourceState="shown">
<Story id="components-forms-switch--with-label-right-and-full-width"/>
</Canvas>
## Controlled / Non Controlled ## Controlled / Non Controlled
@@ -95,23 +70,19 @@ In order to control the value of the switch, you can use the `checked` or `defau
> If you use the `defaultChecked` prop, the switch will be uncontrolled. > If you use the `defaultChecked` prop, the switch will be uncontrolled.
<Canvas sourceState="shown"> <Canvas of={Stories.Controlled}/>
<Story id="components-forms-switch--controlled"/>
</Canvas>
## Usage with react-hook-form ## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs) You can use this input with [react-hook-form](https://react-hook-form.com/docs)
<Canvas sourceState="shown"> <Canvas of={Stories.ReactHookForm}/>
<Story id="components-forms-switch--react-hook-form"/>
</Canvas>
## Props ## Props
The props of this component are as close as possible to the native checkbox component. You can see the list of props below. The props of this component are as close as possible to the native checkbox component. You can see the list of props below.
<ArgsTable of={Switch} /> <ArgTypes of={Switch} />
## Design tokens ## Design tokens

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

73
packages/react/src/components/Modal/index.mdx
View File

@@ -9,9 +9,7 @@ import { Modal } from './index';
Cunningham provides a versatile Modal component for displaying any kind of information. Cunningham provides a versatile Modal component for displaying any kind of information.
<Canvas> <Canvas of={Stories.ThreeButtons} story={{inline: false}}/>
<Story of={Stories.ThreeButtons} inline={false}/>
</Canvas>
<Source <Source
language='ts' language='ts'
@@ -98,36 +96,25 @@ You can set the size of the modal by passing the `size` prop.
### Small ### Small
<Canvas of={Stories.Small} story={{inline: false}}/>
<Canvas>
<Story of={Stories.Small} inline={false}/>
</Canvas>
### Medium ### Medium
<Canvas> <Canvas of={Stories.Medium} story={{inline: false}}/>
<Story of={Stories.Medium} inline={false}/>
</Canvas>
### Large ### Large
<Canvas> <Canvas of={Stories.Large} story={{inline: false}}/>
<Story of={Stories.Large} inline={false}/>
</Canvas>
### Full ### Full
<Canvas> <Canvas of={Stories.FullWithContent} story={{inline: false}}/>
<Story of={Stories.FullWithContent} inline={false}/>
</Canvas>
## Close button ## Close button
You can hide the close button by passing the `hideCloseButton` prop. You can hide the close button by passing the `hideCloseButton` prop.
<Canvas> <Canvas of={Stories.HideCloseButton} story={{inline: false}}/>
<Story of={Stories.HideCloseButton} inline={false}/>
</Canvas>
## Buttons ## Buttons
@@ -135,42 +122,32 @@ You can hide the close button by passing the `hideCloseButton` prop.
You can add buttons on the right side of the modal by passing the `rightActions` prop. You can add buttons on the right side of the modal by passing the `rightActions` prop.
<Canvas> <Canvas of={Stories.PrimaryButton} story={{inline: false}}/>
<Story of={Stories.PrimaryButton} inline={false}/>
</Canvas>
### Left buttons ### Left buttons
You can add buttons on the left side of the modal by passing the `leftActions` prop. You can add buttons on the left side of the modal by passing the `leftActions` prop.
<Canvas> <Canvas of={Stories.ThreeButtons} story={{inline: false}}/>
<Story of={Stories.ThreeButtons} inline={false}/>
</Canvas>
### Center buttons ### Center buttons
You can add buttons on the center of the modal by passing the `actions` prop. You can add buttons on the center of the modal by passing the `actions` prop.
<Canvas> <Canvas of={Stories.CenterButtons} story={{inline: false}}/>
<Story of={Stories.CenterButtons} inline={false}/>
</Canvas>
## Icon ## Icon
You can add an icon to the modal by passing the `titleIcon` prop. You can add an icon to the modal by passing the `titleIcon` prop.
<Canvas> <Canvas of={Stories.ExampleApplication} story={{inline: false}}/>
<Story of={Stories.ExampleApplication} inline={false}/>
</Canvas>
## Close on click outside ## Close on click outside
By default, the modal will not be closed when you click outside of it in order to match the default behavior of the `<dialog/>` element. By default, the modal will not be closed when you click outside of it in order to match the default behavior of the `<dialog/>` element.
You can change this behavior by passing the `closeOnClickOutside` prop. You can change this behavior by passing the `closeOnClickOutside` prop.
<Canvas> <Canvas of={Stories.CloseOnClickOutside} story={{inline: false}}/>
<Story of={Stories.CloseOnClickOutside} inline={false}/>
</Canvas>
## Pre Built Modals ## Pre Built Modals
@@ -208,15 +185,11 @@ const App = () => {
### Confirmation modal ### Confirmation modal
<Canvas> <Canvas of={PreBuiltStories.ConfirmationModal} story={{inline: false}}/>
<Story of={PreBuiltStories.ConfirmationModal} inline={false}/>
</Canvas>
### Delete confirmation modal ### Delete confirmation modal
<Canvas> <Canvas of={PreBuiltStories.DeleteConfirmationModal} story={{inline: false}}/>
<Story of={PreBuiltStories.DeleteConfirmationModal} inline={false}/>
</Canvas>
### Message modal ### Message modal
@@ -224,21 +197,11 @@ This modal can be used to display a message to the user. It is possible to use m
#### Neutral #### Neutral
<Canvas> <Canvas of={PreBuiltStories.NeutralModal} story={{inline: false}}/>
<Story of={PreBuiltStories.NeutralModal} inline={false}/> <Canvas of={PreBuiltStories.SuccessModal} story={{inline: false}}/>
</Canvas> <Canvas of={PreBuiltStories.InfoModal} story={{inline: false}}/>
<Canvas> <Canvas of={PreBuiltStories.ErrorModal} story={{inline: false}}/>
<Story of={PreBuiltStories.SuccessModal} inline={false}/> <Canvas of={PreBuiltStories.WarningModal} story={{inline: false}}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.InfoModal} inline={false}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.ErrorModal} inline={false}/>
</Canvas>
<Canvas>
<Story of={PreBuiltStories.WarningModal} inline={false}/>
</Canvas>
## Props ## Props

16
packages/react/src/components/Pagination/index.mdx
View File

@@ -11,9 +11,7 @@ for synchronous loading as well as asynchronous loading. You can paginate your a
fetch it from a server, the component is really versatile. fetch it from a server, the component is really versatile.
<Canvas sourceState="none"> <Canvas sourceState="none" of={Stories.Basic}/>
<Story id="components-pagination--basic"/>
</Canvas>
<Source <Source
language='ts' language='ts'
@@ -31,9 +29,7 @@ The most basic usage you can make of it is this one, defining a pagination with
### Basic ### Basic
<Canvas sourceState="shown"> <Canvas sourceState="none" of={Stories.Basic}/>
<Story id="components-pagination--basic"/>
</Canvas>
### List of items ### List of items
@@ -41,17 +37,13 @@ The most basic usage you can make of it is this one, defining a pagination with
But this won't make you really happy if you want to paginate your list of items, so you can wire things a bit better. But this won't make you really happy if you want to paginate your list of items, so you can wire things a bit better.
Let's make a component that paginate a list of random number. Let's make a component that paginate a list of random number.
<Canvas sourceState="shown"> <Canvas sourceState="none" of={Stories.List}/>
<Story id="components-pagination--list"/>
</Canvas>
### Set page programmatically ### Set page programmatically
You can also set the page programmatically, for example, if you want to use a query parameter to set the page. You can also set the page programmatically, for example, if you want to use a query parameter to set the page.
<Canvas sourceState="shown"> <Canvas sourceState="none" of={Stories.ForcePage}/>
<Story id="components-pagination--force-page"/>
</Canvas>
### Hide go to input ### Hide go to input