Add a button section to the styleguide (#2088)

packages/venia-styleguide/src/components/Button/Button.css

@@ -0,0 +1,47 @@
+.root {
+    --color: var(--venia-global-color-gray-900);
+    background: none;
+    border-color: rgb(var(--color));
+    border-radius: 1.5rem;
+    border-style: solid;
+    border-width: 1px;
+    color: rgb(var(--color));
+    font-size: var(--venia-global-text-fontSize-100);
+    font-weight: var(--venia-global-text-fontWeight-bold);
+    height: 2rem;
+    line-height: var(--venia-global-text-lineHeight-300);
+    max-width: 100%;
+    min-width: 7.5rem;
+    outline: none;
+    padding: 0 1rem;
+    transition-duration: 384ms;
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--venia-global-anim-standard);
+}
+
+.root:hover {
+    --color: var(--venia-brand-color-1-700);
+}
+
+.root:focus {
+    box-shadow: 0 0 0 2px rgb(var(--venia-pattern-glow-color)),
+        0 0 0.5rem 2px rgb(var(--color) / 0.2);
+    --color: var(--venia-brand-color-1-700);
+}
+
+.root--priority-high {
+    composes: root;
+    background-color: rgb(var(--color));
+    color: rgb(var(--venia-global-color-gray-50));
+}
+
+.root--priority-normal {
+    composes: root;
+}
+
+.content {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: clip;
+    white-space: nowrap;
+}

packages/venia-styleguide/src/components/Button/Button.js

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+
+import finalizeClasses from '../../util/finalizeClasses';
+import classes from './Button.css';
+
+const Button = props => {
+    const { children, priority, ...rest } = props;
+
+    const finalClasses = useMemo(() => {
+        return finalizeClasses(classes, { priority });
+    }, [priority]);
+
+    return (
+        <button {...rest} className={finalClasses.get('root')}>
+            <span className={classes.content}>{children}</span>
+        </button>
+    );
+};
+
+export default Button;
+
+Button.defaultProps = {
+    priority: 'normal',
+    type: 'button'
+};

packages/venia-styleguide/src/components/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

packages/venia-styleguide/src/components/Columns/Columns.css

@@ -12,8 +12,11 @@
 }
 
 .figure {
-    background-color: rgb(250 250 250);
+    align-items: center;
+    background-color: rgb(var(--venia-global-color-gray-75));
     border-radius: 4px;
+    display: grid;
+    justify-items: center;
     min-height: 10rem;
     padding: 3rem 5rem;
 }

packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.css

@@ -0,0 +1,6 @@
+.root {
+    align-items: center;
+    display: grid;
+    gap: 2rem;
+    justify-items: center;
+}

packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import classes from './ExampleGroup.css';
+
+const ExampleGroup = props => <div {...props} className={classes.root} />;
+
+export default ExampleGroup;

packages/venia-styleguide/src/components/ExampleGroup/index.js

@@ -0,0 +1 @@
+export { default } from './ExampleGroup';

packages/venia-styleguide/src/components/Routes/routes.yml

@@ -10,8 +10,13 @@ groups: !!pairs
     - "design-tokens"
     - "color"
     - "typography"
+- components:
+    label: "Components"
+    items:
+    - "button"
 
 pages: !!pairs
+- button: "Button"
 - color: "Color"
 - design-tokens: "Design tokens"
 - principles: "Principles"

packages/venia-styleguide/src/components/Section/Section.css

@@ -8,10 +8,9 @@
 }
 
 .rule {
-    background-color: rgb(75 75 75);
+    background-color: rgb(var(--venia-global-color-gray-800));
     border: none;
-    border-radius: 2px;
-    height: 4px;
+    height: 2px;
     margin: 0.5rem 0 2.5rem;
 }
 

packages/venia-styleguide/src/pages/button/Button.md

@@ -0,0 +1,29 @@
+import Article from "../../components/Article"
+import Section from "../../components/Section"
+import TableOfContents from "../../components/TableOfContents"
+
+import Behaviors from "./sections/Behaviors"
+import Options from "./sections/Options"
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
+quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget,
+laoreet vel tortor. Pellentesque commodo tellus nibh, vitae
+varius lectus pharetra in. Aliquam quis nisi ligula. Proin sit
+amet mauris ac lacus efficitur varius eget in urna. Ut sagittis
+feugiat ex et dictum. Nam ut tempor urna, at dapibus erat.
+Aenean ac dui a tellus venenatis accumsan.
+
+***
+
+<Section title="Table of contents">
+    <TableOfContents />
+</Section>
+<Section title="Options">
+    <Options />
+</Section>
+<Section title="Behaviors">
+    <Behaviors />
+</Section>
+
+export const title = "Button"
+export default Article

packages/venia-styleguide/src/pages/button/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

packages/venia-styleguide/src/pages/button/sections/Behaviors/FlexibleWidth.md

@@ -0,0 +1,3 @@
+#### Flexible width
+
+A button derives its width from the text.

packages/venia-styleguide/src/pages/button/sections/Behaviors/MinimumWidth.md

@@ -0,0 +1,3 @@
+#### Minimum width
+
+Standard buttons have a minimum width of `7.5rem`, ensuring their shape is easily identifiable even when the text is short. Quiet buttons have no minimum width.

packages/venia-styleguide/src/pages/button/sections/Behaviors/TextOverflow.md

@@ -0,0 +1,3 @@
+#### Text overflow
+
+If the text overflows, it will clip, not wrap to a second line. To avoid clipping, keep the text as concise as possible.

packages/venia-styleguide/src/pages/button/sections/Behaviors/index.md

@@ -0,0 +1,27 @@
+import Button from "../../../../components/Button"
+import Columns from "../../../../components/Columns"
+import ExampleGroup from "../../../../components/ExampleGroup"
+import FlexibleWidth from "./FlexibleWidth"
+import MinimumWidth from "./MinimumWidth"
+import TextOverflow from "./TextOverflow"
+
+<Columns reverse>
+  <FlexibleWidth />
+  <ExampleGroup>
+    <Button>Send</Button>
+    <Button>Create Account</Button>
+    <Button>Enter Registration Code</Button>
+  </ExampleGroup>
+</Columns>
+<Columns reverse>
+  <MinimumWidth />
+  <ExampleGroup>
+    <Button>Go</Button>
+  </ExampleGroup>
+</Columns>
+<Columns reverse>
+  <TextOverflow />
+  <ExampleGroup>
+    <Button>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi</Button>
+  </ExampleGroup>
+</Columns>

packages/venia-styleguide/src/pages/button/sections/Options/HighPriority.md

@@ -0,0 +1,3 @@
+#### High priority
+
+A high priority button is more prominent than other buttons, attracting the user's attention and inviting them to consider taking a particular action. Avoid having more than one high priority button on the screen at once.

packages/venia-styleguide/src/pages/button/sections/Options/NormalPriority.md

@@ -0,0 +1,3 @@
+#### Normal priority
+
+A normal button presents the user with an optional or less preferable action.

packages/venia-styleguide/src/pages/button/sections/Options/OptionsTable.md

@@ -0,0 +1,9 @@
+#### Table of options
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
+quis euismod nisi.
+
+Property | Values | Default Value
+:--- | :--- | :---
+priority | high / normal | normal
+quiet | true / false | false

packages/venia-styleguide/src/pages/button/sections/Options/index.md

@@ -0,0 +1,24 @@
+import Button from "../../../../components/Button"
+import Columns from "../../../../components/Columns"
+import ExampleGroup from "../../../../components/ExampleGroup"
+import HighPriority from "./HighPriority"
+import NormalPriority from "./NormalPriority"
+import OptionsTable from "./OptionsTable"
+
+<Columns reverse>
+  <HighPriority />
+  <ExampleGroup>
+    <Button priority="high">
+      Submit
+    </Button>
+  </ExampleGroup>
+</Columns>
+<Columns reverse>
+  <NormalPriority />
+  <ExampleGroup>
+    <Button priority="normal">
+      Cancel
+    </Button>
+  </ExampleGroup>
+</Columns>
+<OptionsTable />

packages/venia-styleguide/src/styles/reset.css

@@ -50,16 +50,22 @@
     border-collapse: collapse;
     border-spacing: 0;
     font-size: var(--venia-typography-body-S-fontSize);
+    margin: 2rem 0 1rem;
     width: 100%;
 }
 
+:global table:first-child {
+    margin-top: 0;
+}
+
 :global td {
     border: 0 solid rgb(225 225 225);
     border-width: 1px 0;
     padding: 1em 1rem;
 }
 
 :global th {
+    color: rgb(var(--venia-global-color-gray-700));
     font-size: var(--venia-typography-detail-S-fontSize);
     font-weight: var(--venia-global-text-fontWeight-bold);
     line-height: var(--venia-typography-detail-lineHeight);

packages/venia-styleguide/src/styles/tokens.css

@@ -1,5 +1,10 @@
 /* global tokens */
 :global :root {
+    /* animation */
+    --venia-global-anim-in: cubic-bezier(0, 0, 0.2, 1);
+    --venia-global-anim-out: cubic-bezier(0.4, 0, 1, 1);
+    --venia-global-anim-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
     /* color */
     --venia-global-color-gray-50: 255 255 255; /*   ffffff  100%   1.09 */
     --venia-global-color-gray-75: 250 250 250; /*   fafafa   98%   1.04 */
@@ -59,6 +64,7 @@
     /* colors */
     --venia-brand-color-1-400: var(--venia-global-color-teal-400);
     --venia-brand-color-1-700: var(--venia-global-color-teal-700);
+    --venia-pattern-glow-color: var(--venia-global-color-sea-500);
     /* typography */
     /* heading */
     --venia-typography-heading-XL-fontSize: var(