Skip to content

Commit

Permalink
Add all variants to button dev story (#3360)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliawegmayr
juliawegmayr authored Feb 19, 2025
1 parent 0feb568 commit 457c62d
Showing 1 changed file with 207 additions and 11 deletions.
218 changes: 207 additions & 11 deletions storybook/src/admin/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, ButtonProps } from "@comet/admin";
import { Add, Favorite, Wrench } from "@comet/admin-icons";
import { Box, Stack } from "@mui/material";
import { Add, ArrowRight, Favorite, Wrench } from "@comet/admin-icons";
import { Box, Chip, Stack } from "@mui/material";
import { ReactNode } from "react";

export default {
Expand Down Expand Up @@ -75,14 +75,210 @@ export const Default = {
export const AllVariants = {
render: () => {
return (
<Stack direction="row" spacing={2}>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="success">Success</Button>
<Button variant="textLight">Text Light</Button>
<Button variant="textDark">Text Dark</Button>
<Stack spacing={10}>
<Stack direction="row" alignItems="center" spacing={8}>
<Button>Button</Button>
<Button startIcon={<ArrowRight />}>Button</Button>
<Button endIcon={<ArrowRight />}>Button</Button>
<Button endIcon={<Chip label="5" />}>Button</Button>
<Button startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button>
<ArrowRight />
</Button>
</Stack>
<Stack direction="row" alignItems="center" spacing={8}>
<Button variant="secondary">Button</Button>
<Button variant="secondary" startIcon={<ArrowRight />}>
Button
</Button>
<Button variant="secondary" endIcon={<ArrowRight />}>
Button
</Button>
<Button variant="secondary" endIcon={<Chip label="5" />}>
Button
</Button>
<Button variant="secondary" startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
variant="secondary"
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button variant="secondary">
<ArrowRight />
</Button>
</Stack>
<Stack direction="row" alignItems="center" spacing={8}>
<Button variant="outlined">Button</Button>
<Button variant="outlined" startIcon={<ArrowRight />}>
Button
</Button>
<Button variant="outlined" endIcon={<ArrowRight />}>
Button
</Button>
<Button variant="outlined" endIcon={<Chip label="5" />}>
Button
</Button>
<Button variant="outlined" startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
variant="outlined"
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button variant="outlined">
<ArrowRight />
</Button>
</Stack>
<Stack direction="row" alignItems="center" spacing={8}>
<Button variant="destructive">Button</Button>
<Button variant="destructive" startIcon={<ArrowRight />}>
Button
</Button>
<Button variant="destructive" endIcon={<ArrowRight />}>
Button
</Button>
<Button variant="destructive" endIcon={<Chip label="5" />}>
Button
</Button>
<Button variant="destructive" startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
variant="destructive"
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button variant="destructive">
<ArrowRight />
</Button>
</Stack>
<Stack direction="row" alignItems="center" spacing={8}>
<Button variant="success">Button</Button>
<Button variant="success" startIcon={<ArrowRight />}>
Button
</Button>
<Button variant="success" endIcon={<ArrowRight />}>
Button
</Button>
<Button variant="success" endIcon={<Chip label="5" />}>
Button
</Button>
<Button variant="success" startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
variant="success"
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button variant="success">
<ArrowRight />
</Button>
</Stack>
<Stack
direction="row"
alignItems="center"
spacing={8}
paddingTop={8}
paddingBottom={8}
sx={{ backgroundColor: (theme) => theme.palette.grey[800] }}
>
<Button variant="textLight">Button</Button>
<Button variant="textLight" startIcon={<ArrowRight />}>
Button
</Button>
<Button variant="textLight" endIcon={<ArrowRight />}>
Button
</Button>
<Button variant="textLight" endIcon={<Chip label="5" />}>
Button
</Button>
<Button variant="textLight" startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
variant="textLight"
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button variant="textLight">
<ArrowRight />
</Button>
</Stack>
<Stack direction="row" alignItems="center" spacing={8}>
<Button variant="textDark">Button</Button>
<Button variant="textDark" startIcon={<ArrowRight />}>
Button
</Button>
<Button variant="textDark" endIcon={<ArrowRight />}>
Button
</Button>
<Button variant="textDark" endIcon={<Chip label="5" />}>
Button
</Button>
<Button variant="textDark" startIcon={<ArrowRight />} endIcon={<Chip label="5" />}>
Button
</Button>
<Button
variant="textDark"
endIcon={
<>
<ArrowRight />
<Chip label="5" />
</>
}
>
Button
</Button>
<Button variant="textDark">
<ArrowRight />
</Button>
</Stack>
</Stack>
);
},
Expand Down Expand Up @@ -132,7 +328,7 @@ export const Responsive = {
const customMobileIcon = <Favorite />;

return (
<Stack direction="row" spacing={2}>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
responsive
startIcon={startIcon ? <Wrench /> : undefined}
Expand Down

0 comments on commit 457c62d

Please sign in to comment.