Another pass at Header component for Vue / Svelte and updates showcase.

AgnosticUI · Sep 27, 2020 · 93d0be3 · 93d0be3
1 parent 3a691ae
commit 93d0be3
Show file tree

Hide file tree

Showing 15 changed files with 246 additions and 165 deletions.
diff --git 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
@@ -3,36 +3,17 @@
   --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;
   flex-direction: column;
   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)
-    );
-  }
-}
+}
diff --git a/agnosticui-css/headernavitem.css 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)
+    );
+  }
+}
diff --git a/agnosticui-react/src/stories/headernav.css b/agnosticui-react/src/stories/headernav.css
@@ -3,36 +3,17 @@
   --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;
   flex-direction: column;
   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)
-    );
-  }
-}
+}
diff --git 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');
diff --git a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
@@ -761,19 +761,43 @@ 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"
             >
               Home
             </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
@@ -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
@@ -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,41 +11,25 @@
   --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;
   flex-direction: column;
   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
@@ -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
@@ -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
@@ -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({});