[PWA-156] Added Drawer Footer Styleguide.

packages/peregrine/lib/PeregrineContextProvider/__tests__/__snapshots__/peregrineContextProvider.spec.js.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render wraps children with all peregrine context providers 1`] = `
-<Memo(ConnectFunction)>
-  <Memo(ConnectFunction)>
-    <Memo(ConnectFunction)>
-      <Memo(ConnectFunction)>
-        <Memo(ConnectFunction)>
-          <Memo(ConnectFunction)>
+<Memo(Connect(ErrorContextProvider))>
+  <Memo(Connect(AppContextProvider))>
+    <Memo(Connect(UserContextProvider))>
+      <Memo(Connect(CatalogContextProvider))>
+        <Memo(Connect(CartContextProvider))>
+          <Memo(Connect(CheckoutContextProvider))>
             <i />
-          </Memo(ConnectFunction)>
-        </Memo(ConnectFunction)>
-      </Memo(ConnectFunction)>
-    </Memo(ConnectFunction)>
-  </Memo(ConnectFunction)>
-</Memo(ConnectFunction)>
+          </Memo(Connect(CheckoutContextProvider))>
+        </Memo(Connect(CartContextProvider))>
+      </Memo(Connect(CatalogContextProvider))>
+    </Memo(Connect(UserContextProvider))>
+  </Memo(Connect(AppContextProvider))>
+</Memo(Connect(ErrorContextProvider))>
 `;

packages/venia-styleguide/package.json

@@ -35,9 +35,8 @@
     "@babel/plugin-syntax-jsx": "~7.2.0",
     "@babel/plugin-transform-react-jsx": "~7.3.0",
     "@babel/plugin-transform-runtime": "~7.4.4",
-    "@babel/preset-env": "~7.3.4",
     "@magento/babel-preset-peregrine": "~1.0.0",
-    "@mdx-js/loader": "~1.5.1",
+    "@mdx-js/loader": "~1.5.3",
     "babel-core": "~7.0.0-bridge.0",
     "babel-jest": "~24.1.0",
     "babel-loader": "~8.0.5",

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/DrawerFooter/DrawerFooter.css

@@ -0,0 +1,9 @@
+.root {
+    align-items: center;
+    background-color: rgb(var(--venia-global-color-gray-75));
+    display: grid;
+    gap: 0.75rem;
+    grid-auto-flow: column;
+    height: 5.5rem;
+    justify-items: center;
+}

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

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

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

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

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/Palette/Hue.css

@@ -0,0 +1,8 @@
+.root {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fill, 12rem);
+    justify-content: center;
+    max-width: 52.5rem;
+    min-width: 12rem;
+}

packages/venia-styleguide/src/components/Palette/Hue.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Tone from './Tone';
+import classes from './Hue.css';
+
+const Hue = props => {
+    const { hue, tones } = props;
+
+    const toneElements = Array.from(tones, ([tone, value]) => (
+        <Tone key={tone} hue={hue} tone={tone} value={value} />
+    ));
+
+    return <div className={classes.root}>{toneElements}</div>;
+};
+
+export default Hue;

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

@@ -0,0 +1,9 @@
+.root {
+    background-color: rgb(var(--venia-global-color-gray-100));
+    border-radius: 4px;
+    display: grid;
+    gap: 4.5rem;
+    justify-content: center;
+    margin-bottom: 5rem;
+    padding: 3rem 1.5rem;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Hue from './Hue';
+import classes from './Palette.css';
+
+const Palette = props => {
+    const { colors } = props;
+    const { hues } = colors;
+
+    const hueElements = Array.from(hues, ([hue, tones]) => (
+        <Hue key={hue} hue={hue} tones={tones} />
+    ));
+
+    return <figure className={classes.root}>{hueElements}</figure>;
+};
+
+export default Palette;

packages/venia-styleguide/src/components/Palette/Tone.css

@@ -0,0 +1,31 @@
+.root {
+    composes: detail from '../../styles/typography.css';
+    align-content: start;
+    background-color: rgb(var(--tone));
+    border: 1px solid rgb(var(--venia-global-color-gray-300));
+    border-radius: 4px;
+    display: grid;
+    font-weight: var(--venia-global-text-fontWeight-bold);
+    height: 6.75rem;
+    padding: 1rem;
+    text-transform: uppercase;
+    width: 12rem;
+}
+
+.root--balance-light {
+    composes: root;
+}
+
+.root--balance-dark {
+    composes: root;
+    color: white;
+}
+
+.label {
+    font-size: var(--venia-typography-detail-S-fontSize);
+    letter-spacing: 0.5px;
+}
+
+.value {
+    font-size: var(--venia-typography-detail-L-fontSize);
+}

packages/venia-styleguide/src/components/Palette/Tone.js

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+
+import finalizeClasses from '../../util/finalizeClasses';
+import classes from './Tone.css';
+
+const getHex = channel => parseInt(channel).toString(16);
+
+const getSRGB = channel => {
+    const factor = channel / 255;
+
+    return factor <= 0.03928
+        ? factor / 12.92
+        : Math.pow((factor + 0.055) / 1.055, 2.4);
+};
+
+const getLightness = channels => {
+    const [r, g, b] = channels.map(getSRGB);
+
+    return r * 0.2126 + g * 0.7152 + b * 0.0722;
+};
+
+const WHITE = getLightness([255, 255, 255]);
+
+const Tone = props => {
+    const { hue, tone, value } = props;
+    const style = { '--tone': value };
+
+    const channels = useMemo(() => value.split(' '), [value]);
+    const lightness = getLightness(channels);
+    const ratio = WHITE / (lightness + 0.05);
+    const balance = ratio < 3 ? 'light' : 'dark';
+
+    const finalClasses = finalizeClasses(classes, { balance });
+    const hex = channels.map(channel => getHex(channel)).join('');
+
+    return (
+        <div className={finalClasses.get('root')} style={style}>
+            <span className={classes.label}>{`${hue} ${tone}`}</span>
+            <span className={classes.value}>{`#${hex}`}</span>
+        </div>
+    );
+};
+
+export default Tone;

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

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

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

@@ -10,9 +10,16 @@ groups: !!pairs
     - "design-tokens"
     - "color"
     - "typography"
+- components:
+    label: "Components"
+    items:
+    - "button"
+    - "drawer-footer"
 
 pages: !!pairs
+- button: "Button"
 - color: "Color"
 - design-tokens: "Design tokens"
 - principles: "Principles"
 - typography: "Typography"
+- drawer-footer: 'Drawer Footer'

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/components/ThematicBreak/ThematicBreak.css

@@ -1,5 +1,5 @@
 .root {
     border: none;
-    height: 1rem;
+    height: 2rem;
     margin: 1rem;
 }

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.