Updates all the packages including react too for the new Header compo…

…nent refactor
AgnosticUI · Sep 27, 2020 · 53c22c2 · 53c22c2
1 parent 8f8a4b7
commit 53c22c2
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 268 deletions.
diff --git a/agnosticui-css/header.css b/agnosticui-css/header.css
@@ -22,56 +22,25 @@
   --agnosticui-default-header-box-shadow-blur: 5px;
   --agnosticui-default-header-box-shadow-spread: 2px;
   --agnosticui-default-header-box-shadow-color: rgba(0, 0, 0, 0.1);
-  --agnosticui-default-header-mobile-height: 96px;
+  --agnosticui-default-header-mobile-height: 128px;
   --agnosticui-default-header-height: 64px;
   --agnosticui-default-header-content-width: 960px;
   --agnosticui-default-header-border-color: #e9e9e9;
   --agnosticui-default-header-background-color: #ffffff;
 
-  background-color: var(
-    --agnosticui-header-background-color,
-    var(--agnosticui-default-header-background-color)
-  );
-  box-shadow: var(
-      --agnosticui-header-box-shadow-hor,
-      var(--agnosticui-default-header-box-shadow-hor)
-    )
-    var(
-      --agnosticui-header-box-shadow-ver,
-      var(--agnosticui-default-header-box-shadow-ver)
-    )
-    var(
-      --agnosticui-header-box-shadow-blur,
-      var(--agnosticui-default-header-box-shadow-blur)
-    )
-    var(
-      --agnosticui-header-box-shadow-spread,
-      var(--agnosticui-default-header-box-shadow-spread)
-    )
-    var(
-      --agnosticui-header-box-shadow-color,
-      var(--agnosticui-default-header-box-shadow-color)
-    );
-  height: var(
-    --agnosticui-header-mobile-height,
-    var(--agnosticui-default-header-mobile-height)
-  );
-  font-family: var(
-    --agnosticui-header-font-family,
-    var(--agnosticui-default-header-font-family)
-  );
-  border-bottom: 1px solid
-    var(
-      --agnosticui-header-border-color,
-      var(--agnosticui-default-header-border-color)
-    );
+  background-color: var(--agnosticui-header-background-color, var(--agnosticui-default-header-background-color));
+  box-shadow: var(--agnosticui-header-box-shadow-hor, var(--agnosticui-default-header-box-shadow-hor))
+    var(--agnosticui-header-box-shadow-ver, var(--agnosticui-default-header-box-shadow-ver))
+    var(--agnosticui-header-box-shadow-blur, var(--agnosticui-default-header-box-shadow-blur))
+    var(--agnosticui-header-box-shadow-spread, var(--agnosticui-default-header-box-shadow-spread))
+    var(--agnosticui-header-box-shadow-color, var(--agnosticui-default-header-box-shadow-color));
+  height: var(--agnosticui-header-mobile-height, var(--agnosticui-default-header-mobile-height));
+  font-family: var(--agnosticui-header-font-family, var(--agnosticui-default-header-font-family));
+  border-bottom: 1px solid var(--agnosticui-header-border-color, var(--agnosticui-default-header-border-color));
 }
 
 .header-content {
-  width: var(
-    --agnosticui-header-content-width,
-    var(--agnosticui-default-header-content-width)
-  );
+  width: var(--agnosticui-header-content-width, var(--agnosticui-default-header-content-width));
   max-width: 100%;
   margin: 0 auto;
 }
@@ -116,9 +85,6 @@
     justify-content: space-between;
   }
   .header {
-    height: var(
-      --agnosticui-header-height,
-      var(--agnosticui-default-header-height)
-    );
+    height: var(--agnosticui-header-height, var(--agnosticui-default-header-height));
   }
 }
diff --git a/agnosticui-css/headernavitem.css b/agnosticui-css/headernavitem.css
@@ -5,18 +5,12 @@
   margin-right: initial;
 }
 .header-nav-item :global(a) {
-  color: var(
-    --agnosticui-header-color,
-    var(--agnosticui-default-header-color)
-  );
+  color: var(--agnosticui-header-color, var(--agnosticui-default-header-color));
   text-decoration: none;
 }
 
 @media (min-width: 960px) {
   .header-nav-item:not(:last-child) {
-    margin-right: var(
-      --agnosticui-header-nav-spacing,
-      var(--agnosticui-default-header-nav-spacing)
-    );
+    margin-right: var(--agnosticui-header-nav-spacing, var(--agnosticui-default-header-nav-spacing));
   }
 }
diff --git a/agnosticui-react/copystyles.js b/agnosticui-react/copystyles.js
@@ -42,10 +42,12 @@ css = fs.readFileSync('../agnosticui-css/header.css', 'utf8');
 fs.writeFileSync('./src/stories/header.css', css, 'utf8');
 
 /**
- * Header Navigation
+ * Header Navigation & Nav Item
  */
 css = fs.readFileSync('../agnosticui-css/headernav.css', 'utf8');
 fs.writeFileSync('./src/stories/headernav.css', css, 'utf8');
+css = fs.readFileSync('../agnosticui-css/headernavitem.css', 'utf8');
+fs.writeFileSync('./src/stories/headernavitem.css', css, 'utf8');
 
 
 /**

diff --git a/agnosticui-react/src/__snapshots__/storybook.test.js.snap b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
@@ -926,23 +926,12 @@ Array [
       >
         LOGO
       </div>
-      <nav
-        className="headerNav"
-      >
+      <nav>
         <ul
-          style={
-            Object {
-              "display": "inline-flex",
-              "listStyle": "none",
-            }
-          }
+          className="headerNav"
         >
           <li
-            style={
-              Object {
-                "marginRight": 8,
-              }
-            }
+            className="headerNavItem"
           >
             <a
               href="#"
@@ -957,11 +946,7 @@ Array [
             </a>
           </li>
           <li
-            style={
-              Object {
-                "marginRight": 8,
-              }
-            }
+            className="headerNavItem"
           >
             <a
               href="#"
@@ -976,11 +961,7 @@ Array [
             </a>
           </li>
           <li
-            style={
-              Object {
-                "marginRight": 8,
-              }
-            }
+            className="headerNavItem"
           >
             <a
               href="#"
@@ -995,11 +976,7 @@ Array [
             </a>
           </li>
           <li
-            style={
-              Object {
-                "marginRight": 8,
-              }
-            }
+            className="headerNavItem"
           >
             <a
               href="#"
@@ -1032,11 +1009,13 @@ Array [
       >
         NO-Skinz
       </div>
-      <nav
-        className="headerNav"
-      >
-        <ul>
-          <li>
+      <nav>
+        <ul
+          className="headerNav"
+        >
+          <li
+            className="headerNavItem"
+          >
             <a
               href="#"
               style={
@@ -1068,11 +1047,13 @@ Array [
       >
         Logo
       </div>
-      <nav
-        className="headerNav"
-      >
-        <ul>
-          <li>
+      <nav>
+        <ul
+          className="headerNav"
+        >
+          <li
+            className="headerNavItem"
+          >
             <a
               href="#"
               style={

diff --git a/agnosticui-react/src/stories/Header.js b/agnosticui-react/src/stories/Header.js
@@ -10,12 +10,28 @@ export const HeaderNav = ({ children, css }) => {
   klasses = klasses.filter((klass) => klass.length);
   klasses = klasses.join(" ");
   return (
-    <nav className={klasses}>
-      {children}
+    <nav>
+      <ul className={klasses}>
+        {children}
+      </ul>
     </nav>
   )
 }
 
+export const HeaderNavItem = ({ children, css }) => {
+  let klasses = [
+    styles.headerNavItem,
+    css ? `${css}` : "",
+  ];
+  klasses = klasses.filter((klass) => klass.length);
+  klasses = klasses.join(" ");
+  return (
+    <li className={klasses}>
+      {children}
+    </li>
+  )
+}
+
 const Header = ({ children, css, isSticky, isSkinned }) => {
   let klasses = [
     isSkinned ? styles.header : styles.headerBase,

diff --git a/agnosticui-react/src/stories/Header.stories.js b/agnosticui-react/src/stories/Header.stories.js
@@ -1,6 +1,6 @@
 
 import React from 'react';
-import Header, { HeaderNav } from './Header.js';
+import Header, { HeaderNav, HeaderNavItem } from './Header.js';
 
 export default {
   title: 'Header',
@@ -13,35 +13,26 @@ export const HeaderAndNav = () => (
       <>
         <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>
+          <HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Home</a></HeaderNavItem>
+          <HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Services</a></HeaderNavItem>
+          <HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">About</a></HeaderNavItem>
+          <HeaderNavItem style={{ marginRight: 8 }}><a style={{ color: "#333333", textDecoration: "none" }} href="#">Contact</a></HeaderNavItem>
         </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>
+          <HeaderNavItem><a style={{ color: "#333333", textDecoration: "none" }} href="#">Not Skinned</a></HeaderNavItem>
         </HeaderNav>
       </>
     </Header>
     <Header isSticky={true}>
       <>
         <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>
+          <HeaderNavItem><a style={{ color: "#333333", textDecoration: "none" }} href="#">Sticky</a></HeaderNavItem>
         </HeaderNav>
       </>
     </Header>

diff --git a/agnosticui-react/src/stories/header.css b/agnosticui-react/src/stories/header.css
@@ -22,56 +22,25 @@
   --agnosticui-default-header-box-shadow-blur: 5px;
   --agnosticui-default-header-box-shadow-spread: 2px;
   --agnosticui-default-header-box-shadow-color: rgba(0, 0, 0, 0.1);
-  --agnosticui-default-header-mobile-height: 96px;
+  --agnosticui-default-header-mobile-height: 128px;
   --agnosticui-default-header-height: 64px;
   --agnosticui-default-header-content-width: 960px;
   --agnosticui-default-header-border-color: #e9e9e9;
   --agnosticui-default-header-background-color: #ffffff;
 
-  background-color: var(
-    --agnosticui-header-background-color,
-    var(--agnosticui-default-header-background-color)
-  );
-  box-shadow: var(
-      --agnosticui-header-box-shadow-hor,
-      var(--agnosticui-default-header-box-shadow-hor)
-    )
-    var(
-      --agnosticui-header-box-shadow-ver,
-      var(--agnosticui-default-header-box-shadow-ver)
-    )
-    var(
-      --agnosticui-header-box-shadow-blur,
-      var(--agnosticui-default-header-box-shadow-blur)
-    )
-    var(
-      --agnosticui-header-box-shadow-spread,
-      var(--agnosticui-default-header-box-shadow-spread)
-    )
-    var(
-      --agnosticui-header-box-shadow-color,
-      var(--agnosticui-default-header-box-shadow-color)
-    );
-  height: var(
-    --agnosticui-header-mobile-height,
-    var(--agnosticui-default-header-mobile-height)
-  );
-  font-family: var(
-    --agnosticui-header-font-family,
-    var(--agnosticui-default-header-font-family)
-  );
-  border-bottom: 1px solid
-    var(
-      --agnosticui-header-border-color,
-      var(--agnosticui-default-header-border-color)
-    );
+  background-color: var(--agnosticui-header-background-color, var(--agnosticui-default-header-background-color));
+  box-shadow: var(--agnosticui-header-box-shadow-hor, var(--agnosticui-default-header-box-shadow-hor))
+    var(--agnosticui-header-box-shadow-ver, var(--agnosticui-default-header-box-shadow-ver))
+    var(--agnosticui-header-box-shadow-blur, var(--agnosticui-default-header-box-shadow-blur))
+    var(--agnosticui-header-box-shadow-spread, var(--agnosticui-default-header-box-shadow-spread))
+    var(--agnosticui-header-box-shadow-color, var(--agnosticui-default-header-box-shadow-color));
+  height: var(--agnosticui-header-mobile-height, var(--agnosticui-default-header-mobile-height));
+  font-family: var(--agnosticui-header-font-family, var(--agnosticui-default-header-font-family));
+  border-bottom: 1px solid var(--agnosticui-header-border-color, var(--agnosticui-default-header-border-color));
 }
 
 .header-content {
-  width: var(
-    --agnosticui-header-content-width,
-    var(--agnosticui-default-header-content-width)
-  );
+  width: var(--agnosticui-header-content-width, var(--agnosticui-default-header-content-width));
   max-width: 100%;
   margin: 0 auto;
 }
@@ -116,9 +85,6 @@
     justify-content: space-between;
   }
   .header {
-    height: var(
-      --agnosticui-header-height,
-      var(--agnosticui-default-header-height)
-    );
+    height: var(--agnosticui-header-height, var(--agnosticui-default-header-height));
   }
 }
diff --git a/agnosticui-react/src/stories/header.module.css b/agnosticui-react/src/stories/header.module.css
@@ -15,5 +15,9 @@
 }
 
 .headerNav {
-  composes: header-nav from './header.css';
-}
+  composes: header-nav from './headernav.css';
+}
+
+.headerNavItem {
+  composes: header-nav-item from './headernavitem.css';
+}