Skip to content
This repository has been archived by the owner on Jan 20, 2022. It is now read-only.

Commit

Permalink
button docs progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinanastos
justinanastos committed Aug 26, 2019
1 parent b6718e6 commit b50ba23
Show file tree
Hide file tree
Showing 4 changed files with 350 additions and 5 deletions.
1 change: 1 addition & 0 deletions .storybook/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ configure([
addParameters({
docsContainer: DocsContainer,
docs: DocsPage,
framework: "react",
});
317 changes: 314 additions & 3 deletions src/Button/Button.stories.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Button } from "./Button";
import { colors } from "../colors";
import {
Description,
Meta,
Expand All @@ -8,6 +7,8 @@ import {
Preview,
} from "@storybook/addon-docs/blocks";
import { IconShip2 } from "../icons/IconShip2";
import { ButtonLayout } from "./button.stories/ButtonLayout";
import { colors } from "../colors";

<Meta title="Components|Button" component={Button} />

Expand All @@ -30,7 +31,7 @@ Need a button, start with this one. It’s the most common size, not too big, no

<Preview>
<Story inline name="default size">
<Button onClick={() => alert("test")}>Rest click</Button>
<Button>Rest click</Button>
</Story>
<Story inline name="default size icon">
<Button icon={<IconShip2 style={{ width: "100%", height: "100%" }} />} />
Expand All @@ -55,7 +56,7 @@ Used in situations where space might be a constraint, like in a sidebar for exam

#### large

Used in situations where space might be a constraint, like in a sidebar for example.
Large buttons will likely be used in situations with a lot of whitespace, for example, large modals.

<Preview>
<Story inline name="large">
Expand All @@ -68,3 +69,313 @@ Used in situations where space might be a constraint, like in a sidebar for exam
/>
</Story>
</Preview>

## Colors

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.

<Preview>
<Story inline name="color">
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Button>Default</Button>
<Button color={colors.white}>White</Button>
<Button color={colors.indigo.dark}>Indigo</Button>
<Button color={colors.red.base}>Red</Button>
<Button color={colors.green.base}>Green</Button>
<Button color={colors.blue.base}>Blue</Button>
</div>
</Story>
</Preview>

## 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.

<Preview>
<Story inline name="button states light">
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
>
<ButtonLayout theme="light">
<Button theme="light">Rest</Button>
<Button theme="light" data-force-hover-state="true">
Hover
</Button>
<Button theme="light" data-force-active-state="true">
Active
</Button>
<Button theme="light" data-force-focus-state="true">
Focused
</Button>
<Button theme="light" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="light">
<Button color={colors.indigo.dark} theme="light">
sweet
</Button>
<Button
color={colors.indigo.dark}
theme="light"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.indigo.dark}
theme="light"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.indigo.dark}
theme="light"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.indigo.dark} theme="light" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="light">
<Button color={colors.green.base} theme="light">
Rest
</Button>
<Button
color={colors.green.base}
theme="light"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.green.base}
theme="light"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.green.base}
theme="light"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.green.base} theme="light" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="light">
<Button color={colors.red.base} theme="light">
Rest
</Button>
<Button
color={colors.red.base}
theme="light"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.red.base}
theme="light"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.red.base}
theme="light"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.red.base} theme="light" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="light">
<Button color={colors.blue.base} theme="light">
Rest
</Button>
<Button
color={colors.blue.base}
theme="light"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.blue.base}
theme="light"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.blue.base}
theme="light"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.blue.base} theme="light" disabled>
Disabled
</Button>
</ButtonLayout>
</div>
</Story>
</Preview>

### 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.

<Preview>
<Story inline name="button states dark">
<div style={{ margin: "0 auto" }}>
<ButtonLayout theme="dark">
<Button theme="dark">Rest</Button>
<Button theme="dark" data-force-hover-state="true">
Hover
</Button>
<Button theme="dark" data-force-active-state="true">
Active
</Button>
<Button theme="dark" data-force-focus-state="true">
Focused
</Button>
<Button theme="dark" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="dark">
<Button color={colors.indigo.dark} theme="dark">
sweet
</Button>
<Button
color={colors.indigo.dark}
theme="dark"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.indigo.dark}
theme="dark"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.indigo.dark}
theme="dark"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.indigo.dark} theme="dark" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="dark">
<Button color={colors.green.base} theme="dark">
Rest
</Button>
<Button
color={colors.green.base}
theme="dark"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.green.base}
theme="dark"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.green.base}
theme="dark"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.green.base} theme="dark" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="dark">
<Button color={colors.red.base} theme="dark">
Rest
</Button>
<Button
color={colors.red.base}
theme="dark"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.red.base}
theme="dark"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.red.base}
theme="dark"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.red.base} theme="dark" disabled>
Disabled
</Button>
</ButtonLayout>
<ButtonLayout theme="dark">
<Button color={colors.blue.base} theme="dark">
Rest
</Button>
<Button
color={colors.blue.base}
theme="dark"
data-force-hover-state="true"
>
Hover
</Button>
<Button
color={colors.blue.base}
theme="dark"
data-force-active-state="true"
>
Active
</Button>
<Button
color={colors.blue.base}
theme="dark"
data-force-focus-state="true"
>
Focused
</Button>
<Button color={colors.blue.base} theme="dark" disabled>
Disabled
</Button>
</ButtonLayout>
</div>
</Story>
</Preview>
35 changes: 35 additions & 0 deletions src/Button/button.stories/ButtonLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ClassNames } from "@emotion/core";
import React from "react";
import { Button } from "../Button";
import { colors } from "../../colors";

interface Props {
theme: NonNullable<React.ComponentProps<typeof Button>["theme"]>;
}

export const ButtonLayout: React.FC<Props> = ({ children, theme }) => (
<ClassNames>
{({ css, cx }) => (
<div
className={cx(
css({
backgroundColor:
theme === "light" ? colors.white : colors.black.base,
border: "solid 1px #dee2e7",
borderRadius: 8,
// display: "inline-flex",
// flexDirection: "column",
margin: 8,

"> *": {
margin: 8,
display: "block",
},
})
)}
>
{children}
</div>
)}
</ClassNames>
);
2 changes: 0 additions & 2 deletions src/Table/Table.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import { colors } from "../colors";
import * as typography from "../typography";
import { Table } from "./Table";

import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";

interface User {
name: string;
email: string;
Expand Down

0 comments on commit b50ba23

Please sign in to comment.