-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(theme/Button): creating theming from new DS
- Loading branch information
1 parent
740611b
commit 7669ef0
Showing
7 changed files
with
190 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,115 @@ | ||
| import * as React from "react" | ||
| import { HStack, IconButton, ThemingProps, VStack } from "@chakra-ui/react" | ||
| import { getThemingArgTypes } from "@chakra-ui/storybook-addon" | ||
| import { Meta, StoryObj } from "@storybook/react" | ||
| import { MdExpandMore, MdChevronRight } from "react-icons/md" | ||
| import Button from "." | ||
| import theme from "../../@chakra-ui/gatsby-plugin/theme" | ||
|
|
||
| export default { | ||
| component: Button, | ||
| } as Meta<typeof Button> | ||
| type ButtonType = typeof Button | ||
|
|
||
| export const Solid: StoryObj<typeof Button> = { | ||
| const meta: Meta<ButtonType> = { | ||
| title: "Atoms / Forms / Buttons", | ||
| component: Button, | ||
| args: { | ||
| children: "What is Ethereum?", | ||
| }, | ||
| argTypes: { | ||
| isSecondary: { | ||
| defaultValue: false, | ||
| type: "boolean", | ||
| name: "Is a secondary color?", | ||
| if: { arg: "variant", neq: "solid" }, | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| export const Outline: StoryObj<typeof Button> = { | ||
| args: { | ||
| children: "More on digital money", | ||
| variant: "outline", | ||
| export default meta | ||
|
|
||
| type Story = StoryObj<ButtonType> | ||
|
|
||
| const variants: ThemingProps<"Button">["variant"][] = [ | ||
| "solid", | ||
| "outline", | ||
| "ghost", | ||
| "link", | ||
| ] | ||
|
|
||
| export const StyleVariants: Story = { | ||
| argTypes: { | ||
| size: { | ||
| //@ts-expect-error | ||
| ...getThemingArgTypes(theme, "Button")?.size, | ||
| defaultValue: "md", | ||
| }, | ||
| }, | ||
| render: (args) => ( | ||
| <VStack spacing={4}> | ||
| {variants.map((variant, idx) => { | ||
| if (args.isSecondary && variant === "solid") return | ||
| return <Button key={idx} variant={variant} {...args} /> | ||
| })} | ||
| </VStack> | ||
| ), | ||
| } | ||
|
|
||
| export const OutlineColor: StoryObj<typeof Button> = { | ||
| args: { | ||
| children: "More on digital money", | ||
| variant: "outline-color", | ||
| export const IconVariants: Story = { | ||
| argTypes: { | ||
| variant: { | ||
| control: "radio", | ||
| options: ["solid", "outline", "ghost", "link"], | ||
| }, | ||
| }, | ||
| render: (args) => ( | ||
| <HStack> | ||
| <VStack> | ||
| <Button {...args} /> | ||
| <Button size="sm" {...args} /> | ||
| </VStack> | ||
| <VStack> | ||
| <Button leftIcon={<MdExpandMore />} {...args} /> | ||
| <Button leftIcon={<MdExpandMore />} size="sm" {...args} /> | ||
| </VStack> | ||
| <VStack> | ||
| <Button rightIcon={<MdChevronRight />} {...args} /> | ||
| <Button rightIcon={<MdChevronRight />} size="sm" {...args} /> | ||
| </VStack> | ||
| <VStack> | ||
| <IconButton aria-label="next" icon={<MdChevronRight />} {...args} /> | ||
| <IconButton | ||
| aria-label="next" | ||
| icon={<MdChevronRight />} | ||
| size="sm" | ||
| {...args} | ||
| /> | ||
| </VStack> | ||
| </HStack> | ||
| ), | ||
| } | ||
|
|
||
| export const Disabled: StoryObj<typeof Button> = { | ||
| export const MultiLineText: Story = { | ||
| args: { | ||
| children: "I am disabled", | ||
| isDisabled: true, | ||
| children: "Button label can have two lines", | ||
| }, | ||
| render: (args) => ( | ||
| <HStack> | ||
| <VStack maxW="171px"> | ||
| <Button variant="outline" isSecondary {...args} /> | ||
| <Button variant="outline" size="sm" isSecondary {...args} /> | ||
| </VStack> | ||
| <VStack maxW="171px"> | ||
| <Button {...args} /> | ||
| <Button size="sm" isSecondary {...args} /> | ||
| </VStack> | ||
| <VStack maxW="180px"> | ||
| <Button rightIcon={<MdChevronRight />} {...args} /> | ||
| <Button | ||
| rightIcon={<MdChevronRight />} | ||
| size="sm" | ||
| isSecondary | ||
| {...args} | ||
| /> | ||
| </VStack> | ||
| </HStack> | ||
| ), | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters