feat: Add Stack component and styles

newrelic · Jun 3, 2020 · dde2f10 · dde2f10
1 parent 10df676
commit dde2f10
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
@@ -41,11 +41,11 @@ const EXAMPLE_CSS = `
   margin-left: 0.5rem;
 }
 
-.nr1-RedBox {
-  color: red;
-  background: rgba(255, 0, 0, 0.15);
-  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
-
+.nr1-Box,
+.nr1-RedBox,
+.nr1-Box--a,
+.nr1-Box--b,
+.nr1-Box--c {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,6 +54,41 @@ const EXAMPLE_CSS = `
   width: 100%;
   height: 100%;
 }
+
+.nr1-RedBox {
+  color: red;
+  background: rgba(255, 0, 0, 0.15);
+  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.5);
+  margin-bottom: 0.5rem;
+}
+
+[class^=nr1-Example--stack--direction],
+[class^=nr1-Example--stack--horizontal],
+[class^=nr1-Example--stack--gap],
+[class^=nr1-Example--stack--vertical] {
+  margin-bottom: 1.25rem;
+}
+
+.nr1-Example--stack--title {
+  display: block;
+  font-size: 1.5em;
+  margin-bottom: 1.25rem;
+}
+
+.nr1-Box--a {
+  min-height: 70px;
+  min-width: 70px;
+}
+
+.nr1-Box--b {
+  min-height: 90px;
+  min-width: 40px;
+}
+
+.nr1-Box--c {
+  min-height: 40px;
+  min-width: 90px;
+}
 `;
 
 const ComponentExample = ({

diff --git a/src/data/sidenav.json b/src/data/sidenav.json
@@ -47,6 +47,10 @@
           {
             "displayName": "Grid",
             "url": "/components/grid"
+          },
+          {
+            "displayName": "Stack",
+            "url": "/components/stack"
           }
         ]
       },

diff --git a/src/markdown-pages/components/stack.mdx b/src/markdown-pages/components/stack.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/stack'
+title: 'Stack'
+description: 'A Stack component!'
+component: 'Stack'
+template: 'ReferenceTemplate'
+---