diff --git a/src/Button/Button.stories.mdx b/src/Button/Button.stories.mdx new file mode 100644 index 00000000..98f86871 --- /dev/null +++ b/src/Button/Button.stories.mdx @@ -0,0 +1,715 @@ +import { Button } from "./Button"; +import { + Description, + Meta, + Story, + Props, + Preview, +} from "@storybook/addon-docs/blocks"; +import { IconShip2 } from "../icons/IconShip2"; +import { ButtonLayout } from "./button.stories/ButtonLayout"; +import { colors } from "../colors"; + +export const SampleIcon = () => ( + +); + + + +# Button + + + +## Sizes + +There are three different sizes of buttons, with the most common button being the default size. Small and large buttons are available for specific settings. + + + + + + + + + + + + + + + + + + + + + + +## Buttons and States + +The states for our buttons are formulaic. You pass a `color` (from the Space Kit palette) and a `theme` (light or dark) and the button states will be automatically configured to show hover states, borders, focus borders, and disabled state. + +### Light Theme + +Light themed buttons have a border. The hover state is a shade darker than the rest color. + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +### Dark Theme + +For dark themed buttons, the borders are completely removed to make the colors look sharper on the background. The focus state border is same color as the button and reduced to it's lighest shade. + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +## Icon Buttons + +Icon buttons are a good way to communicate more information about the button’s action. + +### Buttons with icons + +Pass a `React.ReactElement` to the `icon` prop alongside `children` to render an icon to the left of a button. + + + + + + + + + + + + + + +### Icons only + +Pass a `React.ReactElement` to the `icon` prop and no `children` to render an icon-only button. + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + +### Flat Color Button + +Showing how we could potentially use color with the simple button. + + + +
+ + + + + + +
+ + + + + +
+ + + + + + + + + + + + + + +
+ + + +### Flat Color Button with Icon + +Showing how we could potentially use color with the simple button. + + + +
+ + + + + + +
+ + + + + +
+ + + + + + + + + + + + + + +
+ + + +## Props + +This component extends `HTMLElement` so that most props you'd want to pass to any element can be passed to this component. + + diff --git a/src/Button/Button.story.tsx b/src/Button/Button.story.tsx deleted file mode 100644 index dfc7a274..00000000 --- a/src/Button/Button.story.tsx +++ /dev/null @@ -1,344 +0,0 @@ -import * as CSS from "csstype"; -import { ClassNames } from "@emotion/core"; -import React, { ComponentProps } from "react"; -import { storiesOf } from "@storybook/react"; -import { Button } from "./Button"; -import { IconShip2 } from "../icons/IconShip2"; -import { colors } from "../colors"; -import { DemoSection, DemoGroup, DemoGroupProps } from "../shared/DemoSection"; -import classnames from "classnames"; - -const iconElement = ; - -/** - * Wrap children with a rounded border - */ -const ButtonWrapper: React.FC<{ className?: string }> = ({ - children, - className, - ...otherProps -}) => ( - - {({ css, cx }) => ( -
- {children} -
- )} - -); - -// Restrict our stories to only allow customizing the color. Everything else -// should be handled by passing the `color` prop directly to our `Button`. -interface AllowedCss { - color: CSS.ColorProperty; -} - -const VerticalButtonGroup: React.FC< - { - buttonCss?: AllowedCss; - buttonProps?: Partial, "children">>; - darkButtonCss?: AllowedCss; - } & DemoGroupProps -> = ({ - buttonProps = {}, - children, - buttonCss = {}, - darkButtonCss = {}, - ...otherProps -}) => ( - - {({ css, cx }) => ( - - - {React.Children.map(children, child => ( -
- {React.cloneElement(child as any, { - ...buttonProps, - calssName: classnames( - buttonProps.className, - cx(css({ ...buttonCss })) - ), - })} -
- ))} - - - {React.Children.map(children, child => { - return ( -
- {React.cloneElement(child as any, { - ...buttonProps, - className: classnames( - buttonProps.className, - cx(css({ ...buttonCss, ...darkButtonCss })) - ), - theme: "dark", - })} -
- ); - })} - - - )} - -); - -const DummyNavLink: React.FC<{ to: string; className?: string }> = ({ - to, - ...otherProps -}) => ; - -storiesOf("Button", module) - .addParameters({ component: Button }) - .addParameters({ - options: { - showPanel: false, - }, - }) - .add("Catalog", () => ( -
- - - - - - - - - - - - - - - - - - - - {({ css, cx }) => ( - - )} - - - - - - {({ css, cx }) => ( - - )} - - - - - - {({ css, cx }) => ( - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- )); diff --git a/src/Button/button.stories/ButtonLayout.tsx b/src/Button/button.stories/ButtonLayout.tsx new file mode 100644 index 00000000..3a458757 --- /dev/null +++ b/src/Button/button.stories/ButtonLayout.tsx @@ -0,0 +1,34 @@ +import { ClassNames } from "@emotion/core"; +import React from "react"; +import { Button } from "../Button"; +import { colors } from "../../colors"; + +interface Props { + theme: NonNullable["theme"]>; +} + +export const ButtonLayout: React.FC = ({ children, theme }) => ( + + {({ css, cx }) => ( +
*": { + margin: 8, + display: "block", + }, + }) + )} + > + {children} +
+ )} + +);