React Header

AgnosticUI · Sep 18, 2020 · 8c69229 · 8c69229
1 parent 8615092
commit 8c69229
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 10 deletions.
diff --git a/agnosticui-react/src/__snapshots__/storybook.test.js.snap b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
@@ -668,6 +668,189 @@ Array [
 ]
 `;
 
+exports[`Storyshots Header Header And Nav 1`] = `
+Array [
+  <header
+    className="header custom-global-css-class"
+  >
+    <div
+      className="headerContent"
+    >
+      <div
+        style={
+          Object {
+            "padding": 24,
+          }
+        }
+      >
+        LOGO
+      </div>
+      <nav
+        className="headerNav"
+      >
+        <ul
+          style={
+            Object {
+              "display": "inline-flex",
+              "listStyle": "none",
+            }
+          }
+        >
+          <li
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <a
+              href="#"
+              style={
+                Object {
+                  "color": "#333333",
+                  "textDecoration": "none",
+                }
+              }
+            >
+              Home
+            </a>
+          </li>
+          <li
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <a
+              href="#"
+              style={
+                Object {
+                  "color": "#333333",
+                  "textDecoration": "none",
+                }
+              }
+            >
+              Services
+            </a>
+          </li>
+          <li
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <a
+              href="#"
+              style={
+                Object {
+                  "color": "#333333",
+                  "textDecoration": "none",
+                }
+              }
+            >
+              About
+            </a>
+          </li>
+          <li
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <a
+              href="#"
+              style={
+                Object {
+                  "color": "#333333",
+                  "textDecoration": "none",
+                }
+              }
+            >
+              Contact
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </header>,
+  <header
+    className="headerBase"
+  >
+    <div
+      className="headerContent"
+    >
+      <div
+        style={
+          Object {
+            "padding": 24,
+          }
+        }
+      >
+        NO-Skinz
+      </div>
+      <nav
+        className="headerNav"
+      >
+        <ul>
+          <li>
+            <a
+              href="#"
+              style={
+                Object {
+                  "color": "#333333",
+                  "textDecoration": "none",
+                }
+              }
+            >
+              Not Skinned
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </header>,
+  <header
+    className="header sticky"
+  >
+    <div
+      className="headerContent"
+    >
+      <div
+        style={
+          Object {
+            "padding": 24,
+          }
+        }
+      >
+        Logo
+      </div>
+      <nav
+        className="headerNav"
+      >
+        <ul>
+          <li>
+            <a
+              href="#"
+              style={
+                Object {
+                  "color": "#333333",
+                  "textDecoration": "none",
+                }
+              }
+            >
+              Sticky
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </header>,
+]
+`;
+
 exports[`Storyshots Progress All 1`] = `
 Array [
   <progress

diff --git a/agnosticui-react/src/stories/Header.js b/agnosticui-react/src/stories/Header.js
@@ -2,6 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './header.module.css';
 
+export const HeaderNav = ({ children, css }) => {
+  let klasses = [
+    styles.headerNav,
+    css ? `${css}` : "",
+  ];
+  klasses = klasses.filter((klass) => klass.length);
+  klasses = klasses.join(" ");
+  return (
+    <nav className={klasses}>
+      {children}
+    </nav>
+  )
+}
+
 const Header = ({ children, css, isSticky, isSkinned }) => {
   let klasses = [
     isSkinned ? styles.header : styles.headerBase,
@@ -14,7 +28,6 @@ const Header = ({ children, css, isSticky, isSkinned }) => {
   return (
     <header className={klasses}>
       <div className={styles['headerContent']}>
-        foo bar
         {children}
       </div>
     </header>

diff --git a/agnosticui-react/src/stories/Header.stories.js b/agnosticui-react/src/stories/Header.stories.js
@@ -1,17 +1,48 @@
 
 import React from 'react';
-import Header from './Header.js';
+import Header, { HeaderNav } from './Header.js';
 
 export default {
   title: 'Header',
   component: Header,
 }
-export const All = () => (
+
+export const HeaderAndNav = () => (
   <>
-    <Header>
+    <Header css="custom-global-css-class">
+      <>
+        <div style={{ padding: 24 }}>LOGO</div>
+        <HeaderNav>
+          {/* Ignore these inline styles -- you can use css-in-js, css modules, or whatever you'd like here :) */}
+          <ul style={{ listStyle: "none", display: "inline-flex" }}>
+            <li style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Home</a></li>
+            <li style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Services</a></li>
+            <li style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">About</a></li>
+            <li style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Contact</a></li>
+          </ul>
+        </HeaderNav>
+      </>
+    </Header>
+    <Header isSkinned={false}>
+      <>
+        <div style={{ padding: 24 }}>NO-Skinz</div>
+        <HeaderNav>
+          {/* Ignore these inline styles -- you can use css-in-js, css modules, or whatever you'd like here :) */}
+          <ul>
+            <li><a style={{ color: "#333333", textDecoration: "none" }} href="#">Not Skinned</a></li>
+          </ul>
+        </HeaderNav>
+      </>
+    </Header>
+    <Header isSticky={true}>
       <>
-        <div style={{ padding: 24 }}>Default</div>
-        <div style={{ padding: 24 }}>Card</div>
+        <div style={{ padding: 24 }}>Logo</div>
+        <HeaderNav>
+          {/* Ignore these inline styles -- you can use css-in-js, css modules, or whatever you'd like here :) */}
+          <ul>
+            <li><a style={{ color: "#333333", textDecoration: "none" }} href="#">Sticky</a></li>
+          </ul>
+        </HeaderNav>
       </>
     </Header>
   </>

diff --git a/agnosticui-react/src/stories/header.module.css b/agnosticui-react/src/stories/header.module.css
@@ -1,15 +1,19 @@
 .headerBase {
-  background: blue;
+  composes: header-base from './header.css';
 }
 
 .header {
-  outline: 10px solid hotpink;
+  composes: header from './header.css';
 }
 
 .headerContent {
-  background: red;
+  composes: header-content from './header.css';
 }
 
 .sticky {
-  background: green;
+  composes: header-sticky from './header.css';
+}
+
+.headerNav {
+  composes: header-nav from './header.css';
 }