diff --git a/packages/react/src/components/Button/index.mdx b/packages/react/src/components/Button/index.mdx
index 8c0cb13..5ec2a1d 100644
--- a/packages/react/src/components/Button/index.mdx
+++ b/packages/react/src/components/Button/index.mdx
@@ -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`.
-
-
+
-
-
+
You can also use button with only an icon.
-
-
+
## 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.
-
-
+
## Full width
The button can be set to full width. You can use the `fullWidth` prop to do so.
-
-
-
-
+
+
## Size
You can adjust the size of the button by using the `size` prop. Default value is `medium`.
-
-
-
-
-
-
+
+
+
## Props
@@ -78,8 +60,6 @@ You can use all the props of the native html `` element props plus the f
-
+
## Get Started
@@ -39,9 +38,7 @@ This component is a wrapper around the more complicated DataGrid component. It i
Here a quick usage example
-
-
+
### Props
@@ -62,9 +59,7 @@ Sorting etc ...
Take a look at the following example that renders a table of users.
-
-
-
+
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
@@ -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
below the table.
-
-
-
+
As you can see, with `SimpleDataGrid` you can easily add pagination, sorting without have to worry about controlling
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
change.
-
-
+
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.
@@ -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`.
So feel free to use it between page or sorting changes when you are fetching data from a server.
-
-
+
## Empty State
The component automatically displays an empty state when there is no data to display and it is not loading.
-
-
+
## Actions alignment
diff --git a/packages/react/src/components/Forms/Checkbox/index.mdx b/packages/react/src/components/Forms/Checkbox/index.mdx
index cba0811..6f5ffbb 100644
--- a/packages/react/src/components/Forms/Checkbox/index.mdx
+++ b/packages/react/src/components/Forms/Checkbox/index.mdx
@@ -8,9 +8,7 @@ import { Checkbox } from './index';
Cunningham provides a versatile Checkbox component that you can use in your forms.
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
## Default value
You can use the following props to change the default value of the DatePicker component by using the `state` props.
-
-
+
-
-
+
## States
You can use the following props to change the state of the DatePicker component by using the `state` props.
-
-
+
+
## Disabled
As a regular input, you can disable it by using the `disabled` props.
-
-
+
-
+
-
+
-
+
-
+
+
+
## Timezone management
@@ -147,11 +132,11 @@ You can see the list of props below.
### DatePicker
-
-
+
-
-
+
-
-
-
-
-
-
-
+
-
-
-
-
+
-
-
-
-
-
+
-
+
-
+
-
-
-
-
-
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
## 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.
-
-
+
-
+
-
-
-
-
-
-
-
+
-
+
-
+
-
-
+
-
+
## 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.
-
-
+
-
-
-
-
+
+
## Disabled
As a regular select, you can disable it by using the `disabled` props.
-
-
+
## 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.
-
-
+
## 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.
-
-
+
## Clearable
By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
-
-
-
+
## Disabled options
You can disable some options by using the `disabled` props on the `Option` object.
-
-
+
## 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.
-
-
+
## 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
HTML or with its `label`. It is set to `true` by default.
-
-
+
## 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
using the component in a controlled way.
-
-
+
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
-
-
+
## Props
@@ -172,9 +144,7 @@ See also [Field](?path=/story/components-forms-field-doc--page)
## Form Example
-
-
+
##
diff --git a/packages/react/src/components/Forms/Select/multi.mdx b/packages/react/src/components/Forms/Select/multi.mdx
index bb836ab..040d0fa 100644
--- a/packages/react/src/components/Forms/Select/multi.mdx
+++ b/packages/react/src/components/Forms/Select/multi.mdx
@@ -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.
-
-
+
## 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 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.
-
-
-
-
-
+
+
## 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.
-
-
+
## 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.
-
-
+
## 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.
-
-
+
## 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.
-
-
+
## Disabled options
You can disable some options by using the `disabled` props on the `Option` object.
-
-
+
## 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.
-
-
+
## 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.
-
-
+
## 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
HTML or with its `label`. It is set to `true` by default.
-
-
+
## 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
using the component in a controlled way.
-
-
+
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
-
-
+
## Props
diff --git a/packages/react/src/components/Forms/Switch/index.mdx b/packages/react/src/components/Forms/Switch/index.mdx
index 0df129c..53c6785 100644
--- a/packages/react/src/components/Forms/Switch/index.mdx
+++ b/packages/react/src/components/Forms/Switch/index.mdx
@@ -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 * as Stories from './index.stories';
+import { ArgTypes } from '@storybook/blocks';
-
-
+
## Label
@@ -21,15 +19,11 @@ The `label` props is optional, but you can use it to provide a description of th
**Without label**
-
-
+
**With label**
-
-
+
## 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 right**
-
-
+
## Disabled
You can disable the switch by using the `disabled` prop.
-
-
+
+
## States
You can use the following props to change the state of the component by using the `state` props.
-
-
-
-
-
-
-
-
+
+
+
## Width
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.
-
-
-
-
-
+
+
## 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.
-
-
+
## Usage with react-hook-form
You can use this input with [react-hook-form](https://react-hook-form.com/docs)
-
-
+
## Props
The props of this component are as close as possible to the native checkbox component. You can see the list of props below.
-
-
+
-
-
-
-
-
-
-
+
+
+
## Disabled
As a regular textarea, you can disable it by using the `disabled` props.
-
-
+
+
## Texts
You can define a text that will appear below the input by using the `text` props.
-
-
+
You can also independently add a text on the right side by using the `rightText` props.
-
-
+
## 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.
-
-
+
## 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`.
-
-
+
## 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.
-
-
+
## Ref
You can use the `ref` props to get a reference to the textarea element.
-
-
+
## Props
@@ -121,6 +97,4 @@ Here are the custom design tokens defined by the textarea.
## Form Example
-
-
+
diff --git a/packages/react/src/components/Modal/index.mdx b/packages/react/src/components/Modal/index.mdx
index 79acbc3..48cd73a 100644
--- a/packages/react/src/components/Modal/index.mdx
+++ b/packages/react/src/components/Modal/index.mdx
@@ -9,9 +9,7 @@ import { Modal } from './index';
Cunningham provides a versatile Modal component for displaying any kind of information.
-
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
-
-
+
### 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.
Let's make a component that paginate a list of random number.
-
-
-
+
### Set page programmatically
You can also set the page programmatically, for example, if you want to use a query parameter to set the page.
-
-
-
+
### Hide go to input