Skip to content

Commit

Permalink
docs: Add example for Buttons and IconButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@JF-Cozy
JF-Cozy committed Oct 14, 2024
1 parent eed43c7 commit 33d58b3
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 12 deletions.
39 changes: 34 additions & 5 deletions react/Buttons/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
import Grid from 'cozy-ui/transpiled/react/Grid'
import Paper from 'cozy-ui/transpiled/react/Paper'
import Icon from 'cozy-ui/transpiled/react/Icon'
import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'

const variants = ['primary', 'secondary', 'ghost', 'text']
const propsArr = [{}, { disabled: true }, { busy: true }]
Expand Down Expand Up @@ -73,7 +72,9 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
import Grid from 'cozy-ui/transpiled/react/Grid'
import Paper from 'cozy-ui/transpiled/react/Paper'
import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
import StopIcon from 'cozy-ui/transpiled/react/Icons/Stop'
import Icon from 'cozy-ui/transpiled/react/Icon'
import ArrowUpIcon from 'cozy-ui/transpiled/react/Icons/ArrowUp'

const variants = ['primary', 'secondary', 'ghost', 'text']
const iconPositions = ['startIcon', 'endIcon']
Expand All @@ -82,30 +83,58 @@ const iconPositions = ['startIcon', 'endIcon']

<Grid container>
{iconPositions.map(iconPosition =>
<Grid item xs={12} sm={4} className="u-mb-1" key={iconPosition}>
<Grid item xs={12} sm={3} className="u-mb-1" key={iconPosition}>
<Stack spacing="s">
<div>{iconPosition}</div>
{variants.map(variant =>
<div key={variant + iconPosition}>
<Button
label={variant}
variant={variant}
{...({[`${iconPosition}`]: <Icon icon={PlusIcon}/>})}
{...({[`${iconPosition}`]: <Icon icon={PlusIcon} />})}
/>
</div>
)}
</Stack>
</Grid>
)}
<Grid item xs={12} sm={4} className="u-mb-1">
<Grid item xs={12} sm={3} className="u-mb-1">
<Stack spacing="s">
<div>label is only icon</div>
{variants.map(variant =>
<div key={variant}>
<Button
className="u-miw-auto"
label={<Icon icon={PlusIcon}/>}
label={<Icon icon={PlusIcon} />}
variant={variant}
/>
<Button
className="u-ml-1 u-miw-auto"
label={<Icon icon={PlusIcon} />}
variant={variant}
disabled
/>
</div>
)}
</Stack>
</Grid>
<Grid item xs={12} sm={3} className="u-mb-1">
<Stack spacing="s">
<div>round icon button</div>
{variants.map(variant =>
<div key={variant}>
<Button
className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
classes={{ label: "u-flex u-w-auto" }}
label={<Icon icon={StopIcon} size={12} />}
variant={variant}
/>
<Button
className="u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
classes={{ label: "u-flex u-w-auto" }}
label={<Icon icon={StopIcon} size={12} />}
variant={variant}
disabled
/>
</div>
)}
Expand Down
20 changes: 20 additions & 0 deletions react/IconButton/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,23 @@ const initialVariants = [{ small: false, medium: true, large: false }]
)}
</Variants>
```

### Example with embedded button

```jsx
import IconButton from 'cozy-ui/transpiled/react/IconButton'
import Icon from 'cozy-ui/transpiled/react/Icon'
import Button from 'cozy-ui/transpiled/react/Buttons'
import StopIcon from 'cozy-ui/transpiled/react/Icons/Stop'

;

<IconButton className="u-p-half">
<Button
component="div"
className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
classes={{ label: "u-flex u-w-auto" }}
label={<Icon icon={StopIcon} size={12} />}
/>
</IconButton>
```
23 changes: 16 additions & 7 deletions react/__snapshots__/examples.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -496,7 +496,7 @@ exports[`Buttons should render examples: Buttons 2`] = `
exports[`Buttons should render examples: Buttons 3`] = `
"<div data-testid=\\"mountNode\\">
<div class=\\"MuiGrid-root MuiGrid-container\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>startIcon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
Expand All @@ -505,7 +505,7 @@ exports[`Buttons should render examples: Buttons 3`] = `
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>endIcon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
Expand All @@ -514,13 +514,22 @@ exports[`Buttons should render examples: Buttons 3`] = `
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4\\">
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>label is only icon</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-ml-1 u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-ml-1 u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-ml-1 u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-ml-1 u-miw-auto MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
</div>
</div>
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3\\">
<div class=\\"styles__Stack--s___22WMg\\">
<div>round icon button</div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
<div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label u-flex u-w-auto\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\"><path d=\\"M.75 1.5A.75.75 0 011.5.75h9a.75.75 0 01.75.75v9a.75.75 0 01-.75.75h-9a.75.75 0 01-.75-.75v-9z\\"></path></svg></span></button></div>
</div>
</div>
</div>
Expand Down

0 comments on commit 33d58b3

Please sign in to comment.