From 93d0be381d5582d4250f6370919981eb95bf8be3 Mon Sep 17 00:00:00 2001
From: Rob Levin <roblevintennis@gmail.com>
Date: Sun, 27 Sep 2020 01:31:29 -0700
Subject: [PATCH] Another pass at Header component for Vue / Svelte and updates
 showcase.

---
 agnosticui-css/header.html                    | 17 ++++---
 agnosticui-css/headernav.css                  | 27 ++--------
 agnosticui-css/headernavitem.css              | 22 ++++++++
 agnosticui-react/src/stories/headernav.css    | 27 ++--------
 agnosticui-svelte/copystyles.js               | 11 ++--
 .../src/__snapshots__/Storyshots.test.js.snap | 36 ++++++++++---
 .../src/stories/HeaderExample.svelte          | 17 +++++--
 .../src/stories/HeaderNav.svelte              | 34 ++++---------
 .../src/stories/HeaderNavItem.svelte          | 35 +++++++++++++
 agnosticui-vue/copystyles.js                  |  7 ++-
 agnosticui-vue/src/stories/Header.stories.js  |  6 ++-
 agnosticui-vue/src/stories/HeaderNav.vue      | 32 +++---------
 agnosticui-vue/src/stories/HeaderNavItem.vue  | 48 ++++++++++++++++++
 .../__snapshots__/HeaderNav.test.js.snap      | 50 ++++++++++---------
 showcase/src/views/AppHeader.vue              | 42 ++++++++--------
 15 files changed, 246 insertions(+), 165 deletions(-)
 create mode 100644 agnosticui-css/headernavitem.css
 create mode 100644 agnosticui-svelte/src/stories/HeaderNavItem.svelte
 create mode 100644 agnosticui-vue/src/stories/HeaderNavItem.vue

diff --git a/agnosticui-css/header.html b/agnosticui-css/header.html
index 9ae405b04..f4172a42b 100644
--- a/agnosticui-css/header.html
+++ b/agnosticui-css/header.html
@@ -6,9 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./header.css">
   <link rel="stylesheet" href="./headernav.css">
+  <link rel="stylesheet" href="./headernavitem.css">
   <title>Header</title>
 
   <style>
+    :root {
+      --agnosticui-header-mobile-height: 200px;
+    }
+
     html,
     body {
       margin: 0;
@@ -56,18 +61,18 @@
         </svg>
       </a>
       <!-- Header Navigation Component -->
-      <nav class="header-nav">
-        <ul>
-          <li>
+      <nav>
+        <ul class="header-nav">
+          <li class="header-nav-item">
             <a href="#">Home</a>
           </li>
-          <li>
+          <li class="header-nav-item">
             <a href="#">About</a>
           </li>
-          <li>
+          <li class="header-nav-item">
             <a href="#">Work</a>
           </li>
-          <li>
+          <li class="header-nav-item">
             <a href="#">Contact</a>
           </li>
         </ul>
diff --git a/agnosticui-css/headernav.css b/agnosticui-css/headernav.css
index 63e152dc7..0395632bf 100644
--- a/agnosticui-css/headernav.css
+++ b/agnosticui-css/headernav.css
@@ -3,12 +3,8 @@
   --agnosticui-default-header-nav-spacing: 32px;
 }
 
-.header-nav a {
-  color: var(--agnosticui-header-color, var(--agnosticui-default-header-color));
-  text-decoration: none;
-}
-
-.header-nav ul {
+/* Goes on the <ul> */
+.header-nav {
   margin: 0;
   padding: 0;
   display: flex;
@@ -16,23 +12,8 @@
   align-items: center;
 }
 
-.header-nav li {
-  display: inline-block;
-}
-
-.header-nav li:not(:last-child) {
-  margin-right: initial;
-}
-
 @media (min-width: 960px) {
-  .header-nav ul {
+  .header-nav {
     flex-direction: row;
   }
-
-  .header-nav li:not(:last-child) {
-    margin-right: var(
-      --agnosticui-header-nav-spacing,
-      var(--agnosticui-default-header-nav-spacing)
-    );
-  }
-}
\ No newline at end of file
+}
diff --git a/agnosticui-css/headernavitem.css b/agnosticui-css/headernavitem.css
new file mode 100644
index 000000000..43fe5e84a
--- /dev/null
+++ b/agnosticui-css/headernavitem.css
@@ -0,0 +1,22 @@
+.header-nav-item {
+  display: inline-block;
+}
+.header-nav-item:not(:last-child) {
+  margin-right: initial;
+}
+.header-nav-item :global(a) {
+  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)
+    );
+  }
+}
\ No newline at end of file
diff --git a/agnosticui-react/src/stories/headernav.css b/agnosticui-react/src/stories/headernav.css
index 63e152dc7..0395632bf 100644
--- a/agnosticui-react/src/stories/headernav.css
+++ b/agnosticui-react/src/stories/headernav.css
@@ -3,12 +3,8 @@
   --agnosticui-default-header-nav-spacing: 32px;
 }
 
-.header-nav a {
-  color: var(--agnosticui-header-color, var(--agnosticui-default-header-color));
-  text-decoration: none;
-}
-
-.header-nav ul {
+/* Goes on the <ul> */
+.header-nav {
   margin: 0;
   padding: 0;
   display: flex;
@@ -16,23 +12,8 @@
   align-items: center;
 }
 
-.header-nav li {
-  display: inline-block;
-}
-
-.header-nav li:not(:last-child) {
-  margin-right: initial;
-}
-
 @media (min-width: 960px) {
-  .header-nav ul {
+  .header-nav {
     flex-direction: row;
   }
-
-  .header-nav li:not(:last-child) {
-    margin-right: var(
-      --agnosticui-header-nav-spacing,
-      var(--agnosticui-default-header-nav-spacing)
-    );
-  }
-}
\ No newline at end of file
+}
diff --git a/agnosticui-svelte/copystyles.js b/agnosticui-svelte/copystyles.js
index ea40ca708..70467d54f 100644
--- a/agnosticui-svelte/copystyles.js
+++ b/agnosticui-svelte/copystyles.js
@@ -61,13 +61,14 @@ fs.writeFileSync('./src/stories/Header.svelte', headerSynchronized, 'utf8');
 
 
 /**
- * Header Navigation
+ * Header Navigation & Header Nav Item
  */
 css = fs.readFileSync('../agnosticui-css/headernav.css', 'utf8');
-css = css.replace(/(.*header-nav )(a)/, '$1:global($2)')
-css = css.replace(/(.*header-nav )(ul)/, '$1:global($2)')
-css = css.replace(/(.*header-nav )(li)/, '$1:global($2)')
-css = css.replace(/(.*header-nav )(li:not\(:last-child\))/, '$1:global($2)')
 const headerNavSvelte = fs.readFileSync('./src/stories/HeaderNav.svelte', 'utf8');
 const headerNavSynchronized = headerNavSvelte.replace(styleRegex, `<style>\n${css}\n</style>`);
 fs.writeFileSync('./src/stories/HeaderNav.svelte', headerNavSynchronized, 'utf8');
+
+css = fs.readFileSync('../agnosticui-css/headernavitem.css', 'utf8');
+const headerNavItemSvelte = fs.readFileSync('./src/stories/HeaderNavItem.svelte', 'utf8');
+const headerNavItemSynchronized = headerNavItemSvelte.replace(styleRegex, `<style>\n${css}\n</style>`);
+fs.writeFileSync('./src/stories/HeaderNavItem.svelte', headerNavItemSynchronized, 'utf8');
\ No newline at end of file
diff --git a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
index 43005a8e2..b843d5822 100644
--- a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
+++ b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
@@ -761,11 +761,13 @@ exports[`Storyshots Header Example Header Test 1`] = `
       </div>
        
        
-      <nav
-        class="header-nav"
-      >
-        <ul>
-          <li>
+      <nav>
+        <ul
+          class="header-nav nav-overrides"
+        >
+          <li
+            class="header-nav-item"
+          >
             <a
               href="#home"
             >
@@ -773,7 +775,29 @@ exports[`Storyshots Header Example Header Test 1`] = `
             </a>
           </li>
            
-          <li>
+          <li
+            class="header-nav-item"
+          >
+            <a
+              href="#products"
+            >
+              Products
+            </a>
+          </li>
+           
+          <li
+            class="header-nav-item"
+          >
+            <a
+              href="#services"
+            >
+              Services
+            </a>
+          </li>
+           
+          <li
+            class="header-nav-item"
+          >
             <a
               href="#about"
             >
diff --git a/agnosticui-svelte/src/stories/HeaderExample.svelte b/agnosticui-svelte/src/stories/HeaderExample.svelte
index 83ec76b53..df5beb53d 100644
--- a/agnosticui-svelte/src/stories/HeaderExample.svelte
+++ b/agnosticui-svelte/src/stories/HeaderExample.svelte
@@ -1,15 +1,22 @@
 <script>
   import Header from "./Header.svelte";
   import HeaderNav from "./HeaderNav.svelte";
+  import HeaderNavItem from "./HeaderNavItem.svelte";
 </script>
 
+<style>
+  :root {
+    --agnosticui-header-mobile-height: 175px;
+  }
+</style>
+
 <Header isSticky={true}>
   <div slot="logoleft">logo left</div>
-  <HeaderNav>
-    <ul>
-      <li><a href="#home">Home</a></li>
-      <li><a href="#about">About</a></li>
-    </ul>
+  <HeaderNav css="nav-overrides">
+    <HeaderNavItem><a href="#home">Home</a></HeaderNavItem>
+    <HeaderNavItem><a href="#products">Products</a></HeaderNavItem>
+    <HeaderNavItem><a href="#services">Services</a></HeaderNavItem>
+    <HeaderNavItem><a href="#about">About</a></HeaderNavItem>
   </HeaderNav>
   <div slot="logoright">logo right</div>
 </Header>
diff --git a/agnosticui-svelte/src/stories/HeaderNav.svelte b/agnosticui-svelte/src/stories/HeaderNav.svelte
index 1349f3c8d..54b00d883 100644
--- a/agnosticui-svelte/src/stories/HeaderNav.svelte
+++ b/agnosticui-svelte/src/stories/HeaderNav.svelte
@@ -1,7 +1,7 @@
 <script>
   export let css = "";
   let klasses = ["header-nav", css ? `${css}` : ""];
-  klasses = klasses.filter(klass => klass.length);
+  klasses = klasses.filter((klass) => klass.length);
   klasses = klasses.join(" ");
 </script>
 
@@ -11,12 +11,8 @@
   --agnosticui-default-header-nav-spacing: 32px;
 }
 
-.header-nav :global(a) {
-  color: var(--agnosticui-header-color, var(--agnosticui-default-header-color));
-  text-decoration: none;
-}
-
-.header-nav :global(ul) {
+/* Goes on the <ul> */
+.header-nav {
   margin: 0;
   padding: 0;
   display: flex;
@@ -24,28 +20,16 @@
   align-items: center;
 }
 
-.header-nav :global(li) {
-  display: inline-block;
-}
-
-.header-nav :global(li:not(:last-child)) {
-  margin-right: initial;
-}
-
 @media (min-width: 960px) {
-  .header-nav ul {
+  .header-nav {
     flex-direction: row;
   }
-
-  .header-nav li:not(:last-child) {
-    margin-right: var(
-      --agnosticui-header-nav-spacing,
-      var(--agnosticui-default-header-nav-spacing)
-    );
-  }
 }
+
 </style>
 
-<nav class={klasses}>
-  <slot />
+<nav>
+  <ul class={klasses}>
+    <slot />
+  </ul>
 </nav>
diff --git a/agnosticui-svelte/src/stories/HeaderNavItem.svelte b/agnosticui-svelte/src/stories/HeaderNavItem.svelte
new file mode 100644
index 000000000..4722b74f7
--- /dev/null
+++ b/agnosticui-svelte/src/stories/HeaderNavItem.svelte
@@ -0,0 +1,35 @@
+<script>
+  export let css = "";
+  let klasses = ["header-nav-item", css ? `${css}` : ""];
+  klasses = klasses.filter((klass) => klass.length);
+  klasses = klasses.join(" ");
+</script>
+
+<style>
+.header-nav-item {
+  display: inline-block;
+}
+.header-nav-item:not(:last-child) {
+  margin-right: initial;
+}
+.header-nav-item :global(a) {
+  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)
+    );
+  }
+}
+</style>
+
+<li class={klasses}>
+  <slot />
+</li>
diff --git a/agnosticui-vue/copystyles.js b/agnosticui-vue/copystyles.js
index bbc8f4cc1..fad0a72ab 100644
--- a/agnosticui-vue/copystyles.js
+++ b/agnosticui-vue/copystyles.js
@@ -48,13 +48,16 @@ const headerSynchronized = headerVue.replace(styleRegex, `<style module>\n${css}
 fs.writeFileSync('./src/stories/Header.vue', headerSynchronized, 'utf8');
 
 /**
- * Header Navigation
+ * Header Navigation & Header Nav Item
  */
 css = fs.readFileSync('../agnosticui-css/headernav.css', 'utf8');
 const headerNavVue = fs.readFileSync('./src/stories/HeaderNav.vue', 'utf8');
 const headerNavSynchronized = headerNavVue.replace(styleRegex, `<style module>\n${css}\n</style>`);
 fs.writeFileSync('./src/stories/HeaderNav.vue', headerNavSynchronized, 'utf8');
-
+css = fs.readFileSync('../agnosticui-css/headernavitem.css', 'utf8');
+const headerNavItemVue = fs.readFileSync('./src/stories/HeaderNavItem.vue', 'utf8');
+const headerNavItemSynchronized = headerNavItemVue.replace(styleRegex, `<style module>\n${css}\n</style>`);
+fs.writeFileSync('./src/stories/HeaderNavItem.vue', headerNavItemSynchronized, 'utf8');
 
 /**
  * FlexGrid
diff --git a/agnosticui-vue/src/stories/Header.stories.js b/agnosticui-vue/src/stories/Header.stories.js
index e2c49e234..80735427a 100644
--- a/agnosticui-vue/src/stories/Header.stories.js
+++ b/agnosticui-vue/src/stories/Header.stories.js
@@ -1,11 +1,13 @@
 import AgnosticHeader from "./Header.vue";
 import AgnosticHeaderNav from "./HeaderNav.vue";
+import AgnosticHeaderNavItem from "./HeaderNavItem.vue";
 
 export default {
   title: 'Header',
   components: [
     AgnosticHeader,
     AgnosticHeaderNav,
+    AgnosticHeaderNavItem,
   ],
   argTypes: {
     isSkinned: { control: 'boolean' },
@@ -16,8 +18,8 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { AgnosticHeader, AgnosticHeaderNav },
-  template: '<agnostic-header v-bind="$props"><template v-slot:logoleft><a href="#">Logo on Left</a></template><template v-slot:headernav><agnostic-header-nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li></ul></agnostic-header-nav></template><template v-slot:logoright><a href="#">Logo on Right</a></template></agnostic-header>'
+  components: { AgnosticHeader, AgnosticHeaderNav, AgnosticHeaderNavItem },
+  template: '<AgnosticHeader v-bind="$props"><template v-slot:logoleft><a href="#">Logo on Left</a></template><template v-slot:headernav><AgnosticHeaderNav><AgnosticHeaderNavItem><a href="#">Home</a></AgnosticHeaderNavItem><AgnosticHeaderNavItem><a href="#">About</a></AgnosticHeaderNavItem></AgnosticHeaderNav></template><template v-slot:logoright><a href="#">Logo on Right</a></template></AgnosticHeader>'
 });
 
 export const HeaderDefault = Template.bind({});
diff --git a/agnosticui-vue/src/stories/HeaderNav.vue b/agnosticui-vue/src/stories/HeaderNav.vue
index a06445f2f..d5851dab0 100644
--- a/agnosticui-vue/src/stories/HeaderNav.vue
+++ b/agnosticui-vue/src/stories/HeaderNav.vue
@@ -4,12 +4,8 @@
   --agnosticui-default-header-nav-spacing: 32px;
 }
 
-.header-nav a {
-  color: var(--agnosticui-header-color, var(--agnosticui-default-header-color));
-  text-decoration: none;
-}
-
-.header-nav ul {
+/* Goes on the <ul> */
+.header-nav {
   margin: 0;
   padding: 0;
   display: flex;
@@ -17,30 +13,18 @@
   align-items: center;
 }
 
-.header-nav li {
-  display: inline-block;
-}
-
-.header-nav li:not(:last-child) {
-  margin-right: initial;
-}
-
 @media (min-width: 960px) {
-  .header-nav ul {
+  .header-nav {
     flex-direction: row;
   }
-
-  .header-nav li:not(:last-child) {
-    margin-right: var(
-      --agnosticui-header-nav-spacing,
-      var(--agnosticui-default-header-nav-spacing)
-    );
-  }
 }
+
 </style>
 <template>
-  <nav :class="classes">
-    <slot />
+  <nav>
+    <ul :class="classes">
+      <slot />
+    </ul>
   </nav>
 </template>
 <script>
diff --git a/agnosticui-vue/src/stories/HeaderNavItem.vue b/agnosticui-vue/src/stories/HeaderNavItem.vue
new file mode 100644
index 000000000..6f2d64712
--- /dev/null
+++ b/agnosticui-vue/src/stories/HeaderNavItem.vue
@@ -0,0 +1,48 @@
+<style module>
+.header-nav-item {
+  display: inline-block;
+}
+.header-nav-item:not(:last-child) {
+  margin-right: initial;
+}
+.header-nav-item :global(a) {
+  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)
+    );
+  }
+}
+</style>
+<template>
+  <li :class="classes">
+    <slot />
+  </li>
+</template>
+<script>
+export default {
+  name: "agnosticui-header-nav-item",
+  props: {
+    css: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        [this.$style["header-nav-item"]]: true,
+        [`${this.css}`]: !!this.css,
+      };
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/agnosticui-vue/src/stories/__snapshots__/HeaderNav.test.js.snap b/agnosticui-vue/src/stories/__snapshots__/HeaderNav.test.js.snap
index 41577413d..db68a8784 100644
--- a/agnosticui-vue/src/stories/__snapshots__/HeaderNav.test.js.snap
+++ b/agnosticui-vue/src/stories/__snapshots__/HeaderNav.test.js.snap
@@ -4,7 +4,33 @@ exports[`snapshot 1`] = `
 Object {
   "baseElement": <body>
     <div>
-      <nav
+      <nav>
+        <ul
+          class="header-nav"
+        >
+          <ul>
+            <li>
+              <a
+                href="#"
+              >
+                Home
+              </a>
+            </li>
+            <li>
+              <a
+                href="#"
+              >
+                About
+              </a>
+            </li>
+          </ul>
+        </ul>
+      </nav>
+    </div>
+  </body>,
+  "container": <div>
+    <nav>
+      <ul
         class="header-nav"
       >
         <ul>
@@ -23,28 +49,6 @@ Object {
             </a>
           </li>
         </ul>
-      </nav>
-    </div>
-  </body>,
-  "container": <div>
-    <nav
-      class="header-nav"
-    >
-      <ul>
-        <li>
-          <a
-            href="#"
-          >
-            Home
-          </a>
-        </li>
-        <li>
-          <a
-            href="#"
-          >
-            About
-          </a>
-        </li>
       </ul>
     </nav>
   </div>,
diff --git a/showcase/src/views/AppHeader.vue b/showcase/src/views/AppHeader.vue
index 7dad63a03..a2823e646 100644
--- a/showcase/src/views/AppHeader.vue
+++ b/showcase/src/views/AppHeader.vue
@@ -19,26 +19,25 @@
           />
         </svg>
       </a>
-
+    </template>
+    <template v-slot:headernav>
       <HeaderNav css="HeaderNavOverrides">
-        <ul class="menu">
-          <li>
-            <a href="#" class="pre-pipe">Theming</a>
-            <span class="pipe"></span>
-          </li>
-          <li>
-            <a href="#system">System</a>
-          </li>
-          <li>
-            <a href="#inputs">Inputs</a>
-          </li>
-          <li>
-            <a href="#layoutsandnavigation">Layout &amp; Navigation</a>
-          </li>
-          <li>
-            <a href="#tables">Tables</a>
-          </li>
-        </ul>
+        <HeaderNavItem>
+          <a href="#" class="pre-pipe">Theming</a>
+          <span class="pipe"></span>
+        </HeaderNavItem>
+        <HeaderNavItem>
+          <a href="#system">System</a>
+        </HeaderNavItem>
+        <HeaderNavItem>
+          <a href="#inputs">Inputs</a>
+        </HeaderNavItem>
+        <HeaderNavItem>
+          <a href="#layoutsandnavigation">Layout &amp; Navigation</a>
+        </HeaderNavItem>
+        <HeaderNavItem>
+          <a href="#tables">Tables</a>
+        </HeaderNavItem>
       </HeaderNav>
     </template>
   </Header>
@@ -47,11 +46,13 @@
 <script>
 import Header from "agnosticui/Header.vue";
 import HeaderNav from "agnosticui/HeaderNav.vue";
+import HeaderNavItem from "agnosticui/HeaderNavItem.vue";
 export default {
   name: "AppHeader",
   components: {
     Header,
     HeaderNav,
+    HeaderNavItem,
   },
 };
 </script>
@@ -67,12 +68,11 @@ export default {
 }
 .HeaderOverrides .logo {
   margin-bottom: var(--Space-24);
-  /* margin-top: var(--Space-32); */
   line-height: 0;
 }
 
 .HeaderOverrides .logo,
-.HeaderNavOverrides .menu a {
+.HeaderNavOverrides a {
   background: initial;
   font-weight: 300;
 }