diff --git a/new-docs/src/components/button.stories.tsx b/new-docs/src/components/button.stories.tsx new file mode 100644 index 00000000..1348eab8 --- /dev/null +++ b/new-docs/src/components/button.stories.tsx @@ -0,0 +1,147 @@ +import { Meta } from "@storybook/react"; +import { GoPlus } from "react-icons/go"; +import { Button, Dialog } from "../../../core/src"; +import { GalleryButton1, GalleryButton2 } from "../../../gallery/src"; +import { Utils } from "../utils/utils"; + +const meta: Meta = { + title: "Components/Button", + component: Button, + argTypes: { + busy: Utils.arg("boolean", "Visual"), + disabled: Utils.arg("boolean", "Visual"), + fill: Utils.arg("boolean", "Visual"), + highlight: Utils.arg("boolean", "Visual"), + minWidth: Utils.arg("boolean", "Visual"), + selected: Utils.arg("boolean", "Visual"), + size: Utils.arg(Button.sizes, "Visual"), + style: Utils.arg(Button.styles, "Visual"), + color: Utils.arg(Button.colors, "Visual"), + + children: Utils.arg(null, "Content"), + icon: Utils.arg(null, "Content"), + iconLabel: Utils.arg(null, "Content"), + iconRight: Utils.arg(null, "Content"), + + type: Utils.arg(null, "Button"), + forwardedRef: Utils.arg(null, "Button"), + onClick: Utils.arg(null, "Button"), + onFocus: Utils.arg(null, "Button"), + onBlur: Utils.arg(null, "Button"), + autoFocus: Utils.arg(null, "Button"), + dangerouslySetTabIndex: Utils.arg(null, "Button"), + + target: Utils.arg(null, "Link"), + href: Utils.arg(null, "Link"), + rel: Utils.arg(null, "Link"), + download: Utils.arg(null, "Link"), + }, +}; + +Utils.page.component(meta, { + primary: "sticky", + shots: [, ], +}); + +export default meta; + +interface Props { + style?: string; + size?: string; + color?: string; + fill?: boolean; + highlight?: boolean; + selected?: boolean; + busy?: boolean; + iconRight?: boolean; + disabled?: boolean; +} + +export const Primary = (props: Props): JSX.Element => ( + +); + +/** + * Icons can be used in buttons via the \`icon\` prop. This follows our [Icon + * standard][1], which supports any SVG icons. The icon is on the left side by + * default, with the \`iconRight\` prop to move it to the right. + * + * It's [intentional][3] that [screen readers][2] would skip the icon and only + * announce the label of a button (i.e. the text inside the \`children\` prop). + * If your button doesn't have a \`children\` defined (i.e. icon-only buttons), + * provide the \`iconLabel\` prop so screen readers can announce it. + * + * Out of the box, icon-only buttons look like rectangles due to the unequal + * paddings. To make them squares, set the \`size\` prop to one with an \`Icon\` + * suffix, like \`Button.sizes.mediumIcon\`. + * + * [1]: /docs/guides-icons--docs + * [2]: https://en.wikipedia.org/wiki/Screen_reader + * [3]: https://www.sarasoueidan.com/blog/accessible-icon-buttons/#icon-sitting-next-to-text + */ +export const Icon = (): JSX.Element => ( + // Icons are imported from external libraries, like: + // import { GoPlus } from "react-icons/go"; + +
+ {/* Basic usage with icon */} +
+); + +/** + * Buttons with \`href\` prop are rendered as [HTML \`a\`][1] elements instead of + * the usual \`button\`. This helps you have links that look like buttons (e.g. + * with strong appearance to attract attention) but still preserve all [built-in + * behaviours][3] of links. + * + * For example, you can right click the below button to copy the URL or open it + * in a new tab: + * + * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a + * [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button + * [3]: https://www.nngroup.com/articles/command-links + */ +export const Link = (): JSX.Element => ( +