[PWA-156] Added Drawer Footer Styleguide. (#2093)

* Add color page

* Add new tones

* Update colors

* Add tokens for new tones

* Add sections

* Adjust break styles

* Adjust heading size

* Add button section to styleguide

* Add buttons page

* Add button component

* Add glow

* Add examples

* Added footer skeleton to styleguide.

* Updated webpack to support venia-ui linking.

* Update snapshot

* Removing venia-ui connections.

* Temp.

* Added sample usage.

* Added couple behaviors.

* Added another behavior.

* Added placeholder notes for sections.

* PR changes.

* mdx -> md

* Minor.

Co-authored-by: Jimmy Sanford <[email protected]>
Co-authored-by: Andy Terranova <[email protected]>
Co-authored-by: Devagouda <[email protected]>

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

@@ -0,0 +1,9 @@
+.root {
+    align-items: center;
+    background-color: rgb(var(--venia-global-color-gray-50));
+    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/Routes/routes.yml

@@ -14,10 +14,12 @@ groups: !!pairs
     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/pages/color/colors.yml

@@ -0,0 +1,30 @@
+---
+
+hues: !!pairs
+- gray: !!pairs
+  - 50: "255 255 255"
+  - 75: "250 250 250"
+  - 100: "245 245 245"
+  - 200: "235 235 235"
+  - 300: "224 224 224"
+  - 400: "204 204 204"
+  - 500: "163 163 163"
+  - 600: "122 122 122"
+  - 700: "82 82 82"
+  - 800: "61 61 61"
+  - 900: "31 31 31"
+- red: !!pairs
+  - 400: "197 27 72"
+  - 500: "188 16 62"
+  - 600: "176 7 52"
+  - 700: "163 0 44"
+- sea: !!pairs
+  - 400: 224 246 242
+  - 500: 215 244 239
+  - 600: 206 243 236
+  - 700: 197 242 234
+- teal: !!pairs
+  - 400: "22 155 162"
+  - 500: "13 143 150"
+  - 600: "6 131 137"
+  - 700: "0 115 120"

packages/venia-styleguide/src/pages/drawer-footer/DrawerFooter.md

@@ -0,0 +1,17 @@
+import Article from '../../components/Article';
+import Section from '../../components/Section';
+import TableOfContents from '../../components/TableOfContents';
+
+import About from './sections/About/index.md';
+import Behaviors from './sections/Behaviors/index.md';
+
+<About />
+<Section title="Table of Contents">
+    <TableOfContents />
+</Section>
+<Section title="Behaviors">
+    <Behaviors />
+</Section>
+
+export const title = 'Drawer Footer';
+export default Article;

packages/venia-styleguide/src/pages/drawer-footer/index.js

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

packages/venia-styleguide/src/pages/drawer-footer/sections/About/index.md

@@ -0,0 +1 @@
+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.

packages/venia-styleguide/src/pages/drawer-footer/sections/Behaviors/FormButtonsLayout.md

@@ -0,0 +1,3 @@
+#### Form Buttons Layout
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor.

packages/venia-styleguide/src/pages/drawer-footer/sections/Behaviors/SingleButtonLayout.md

@@ -0,0 +1,3 @@
+#### Single Button Layout
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor.

packages/venia-styleguide/src/pages/drawer-footer/sections/Behaviors/TwoButtonLayout.md

@@ -0,0 +1,3 @@
+#### Two Button Layout
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis euismod nisi. Morbi metus mauris, volutpat ac aliquet eget, laoreet vel tortor.

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

@@ -0,0 +1,38 @@
+import Columns from '../../../../components/Columns';
+import ExampleGroup from '../../../../components/ExampleGroup';
+
+import SingleButtonLayout from './SingleButtonLayout.md';
+import TwoButtonLayout from './TwoButtonLayout.md';
+import FormButtonsLayout from './FormButtonsLayout.md';
+
+import DrawerFooter from '../../../../components/DrawerFooter/DrawerFooter';
+import Button from '../../../../components/Button';
+
+<Columns reverse>
+    <SingleButtonLayout />
+    <ExampleGroup>
+        <DrawerFooter>
+            <Button priority="high">Sign In</Button>
+        </DrawerFooter>
+    </ExampleGroup>
+</Columns>
+
+<Columns reverse>
+    <TwoButtonLayout />
+    <ExampleGroup>
+        <DrawerFooter>
+            <Button priority="normal">Back</Button>
+            <Button priority="normal">Next</Button>
+        </DrawerFooter>
+    </ExampleGroup>
+</Columns>
+
+<Columns reverse>
+    <FormButtonsLayout />
+    <ExampleGroup>
+        <DrawerFooter>
+            <Button priority="normal">Cancel</Button>
+            <Button priority="high">Submit</Button>
+        </DrawerFooter>
+    </ExampleGroup>
+</Columns>

yarn.lock

@@ -2267,7 +2267,7 @@
     request "^2.83.0"
     request-promise "^4.2.2"
 
-"@mdx-js/loader@~1.5.1":
+"@mdx-js/loader@~1.5.3":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.5.3.tgz#0bfec6528a17b618763d2d86a5e0c9d351ac19be"
   integrity sha512-m3bT9b9xY8wU1sQwHhSuFiIwFm0LP7onDpm2rb3xikHzXNY7yfL1/lV9XF4iecSmd86/4I1L6RKE61Dq1jLqjA==