Dynamic Navigation Component

- Create dyanmic nci-nav vue component
- Create Storybook story for nci-nav component
- Create test for nci-nnav component

[Ticket: NCI-11]

nci/app/components/nci-anchor/index.vue

@@ -26,22 +26,23 @@ const nciAnchor = defineComponent({
       type: String as PropType<string>,
       required: false,
     },
-    active: {
+    selected: {
       type: String as PropType<string>,
       required: false,
       default: "",
     },
   },
   setup: (props) => {
+    console.log("props selected:", props.selected);
     let componentType: string = "";
     let pointer: string = "";
     let styles: string = "";
     props.href.includes("http")
       ? ((componentType = "a"), (pointer = "href"))
       : ((componentType = "nuxt-link"), (pointer = "to"));
 
-    props.active
-      ? (styles = props.styles! + props.active)
+    props.selected
+      ? (styles = props.styles! + props.selected)
       : (styles = props.styles!);
     console.log("componentType:", componentType, pointer, "styles:", styles);
     return () =>
@@ -52,6 +53,9 @@ const nciAnchor = defineComponent({
             [pointer]: props.href,
             class: styles,
           },
+          on: {
+            mouseOver: () => console.log("over"),
+          },
         },
         props.title
       );

nci/app/components/nci-anchor/stories/button/__test__/index.test.ts

@@ -1,5 +1,3 @@
-// tests/unit/Button.spec.js
-
 import { mount } from '@vue/test-utils';
 
 import nciAnchor from '@/nci/app/components/nci-anchor/index.vue';

nci/app/components/nci-nav/__test__/index.test.ts

@@ -34,7 +34,8 @@ describe('nci-nav test', () => {
       propsData: {
         routes: routes,
         styles: "nav",
-        childStyles: "item"
+        childStyles: "item",
+        currentRoute: "/home"
       },
       stubs: ['nuxt-link']
     })

nci/app/components/nci-nav/index.vue

@@ -32,6 +32,11 @@ const nciNav = defineComponent({
       type: String as PropType<string>,
       required: true,
     },
+    selected: {
+      /** Rename this to selectedClass */
+      type: String as PropType<string>,
+      required: false,
+    },
   },
   setup(props) {
     const createComponent = (component: ButtonCompiled) => {
@@ -40,21 +45,21 @@ const nciNav = defineComponent({
       });
     };
 
-    let active: string;
+    let active: string | undefined;
 
     let navComponentArray = [] as object[];
     props.routes.map((route: Route) => {
       route.path === "/" + props.currentRoute
-        ? (active = "active")
-        : (active = "");
+        ? (active = props.selected!)
+        : (active = undefined);
 
       route.path !== "/:index"
         ? navComponentArray.push(
             createComponent({
               href: route.path,
               title: route.name,
               styles: props.childStyles,
-              active: active,
+              selected: active,
             })
           )
         : null;

nci/app/components/nci-nav/stories/nav/__test__/index.test.ts

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils';
+
+import nciNav from '@/nci/app/components/nci-nav/index.vue';
+
+//👇 Imports a specific story for the test
+import { nav } from '@/nci/app/components/nci-nav/stories/nav/index.stories';
+
+it('renders the button in the primary state', () => {
+  const wrapper = mount(nciNav, {
+    propsData: nav.args,
+    stubs: ['nuxt-link']
+  });
+
+  expect(wrapper).toBeTruthy();
+});

nci/app/components/nci-nav/stories/nav/index.stories.ts

@@ -52,6 +52,7 @@ const data = {
   styles: "nav",
   childStyles: props.styles,
   routes: routes,
+  currentRoute: "/home"
 }
 
 console.log('generateprops', generateProps(data), data)

nci/app/components/nci-page/__test__/index.test.ts

@@ -6,15 +6,6 @@ import { Pages, Page } from '@/nci/app/interfaces';
 import Config from '@/nci/data/demo';
 
 import registerComponents from '@/nci/app/testing/registerComponents'
-import { useRoute } from '@nuxtjs/composition-api';
-import createMemoryHistory from 'vue-router'
-
-
-const {
-  VueRouterMock,
-  createRouterMock,
-  injectRouterMock,
-} = require('vue-router-mock')
 
 /** Slide Component Tests */
 /**
@@ -32,42 +23,31 @@ describe('nci-page component', () => {
     registerComponents();
   });
 
-  const router = createRouterMock({ value: { params: { index: '/home' } } })
-  beforeEach(() => {
-    // inject it globally to ensure `useRoute()`, `$route`, etc work
-    // properly and give you access to test specific functions
-    injectRouterMock(router)
-  })
 
   const pages = Config.pages as Pages;
-  const nav = {
-    design: {
-      styles: "nav",
-      childStyles: "blah",
-      size: "sm",
-      color: "primary",
-    },
-    routes: [{
-      path: "/about",
-      name: "route"
-    }]
-  }
+
   Object.keys(pages).forEach(key => {
     test('Testing page:' + key, () => {
 
-      /*jest.mock('vue-router', () => ({
-        useRoute: jest.fn(() => ({ value: { params: { index: '/home' } } }))
-      }))*/
+      const nav = {
+        design: {
+          styles: "nav",
+          childStyles: "blah",
+          size: "sm",
+          color: "primary",
+        },
+        routes: [{
+          path: "/about",
+          name: "route"
+        }],
+        route: key
+      }
       let wrapper = shallowMount(nciPage, {
         propsData: {
           page: pages[key] as Page,
           nav: nav,
         },
-        stubs: ['nuxt-link'],
-        history: createMemoryHistory,
-        mocks: {
-          getCurrentRoute: jest.fn(() => ({ value: { params: { index: '/home' } } }))
-        }
+        stubs: ['nuxt-link']
       })
       /** Check the component mounted */
       expect(wrapper.vm).toBeTruthy();

nci/app/components/nci-page/index.vue

@@ -4,10 +4,6 @@ import { defineComponent, h } from "@nuxtjs/composition-api";
 
 import buildSections from "@/nci/app/factories/sections";
 
-import nav from "@/nci/app/factories/nav";
-
-import { useRoute } from "@nuxtjs/composition-api";
-
 /** NCI-PAGE */
 /**
  * Setup the Index page of the application
@@ -27,15 +23,21 @@ export default defineComponent({
       required: true,
     },
   },
-  methods: {},
   setup(props) {
-    const getCurrentRoute = useRoute().value.params.index;
-
-    return () =>
-      h("div", { class: "page" }, [
-        nav(props.nav.routes, getCurrentRoute, props.nav.design.styles),
-        buildSections(props.page.sections),
-      ]);
+    console.log("nci-page component loaded");
+    /** Render navigation */
+    const nav = h("nci-nav", {
+      props: {
+        routes: props.nav.routes,
+        styles: "nav",
+        childStyles: props.nav.design.styles,
+        currentRoute: props.nav.route,
+        selected: props.nav.design.selected,
+      },
+    });
+    /** Render page sections */
+    const sections = buildSections(props.page.sections);
+    return () => h("div", { class: "page" }, [nav, sections]);
   },
 });
 </script>

nci/app/injectors/injectObject.ts

@@ -14,19 +14,25 @@ const injectObject = (themeObject: ThemeObject, componentObject: any) => { //**
 
           if (componentObject[key2] == key3) {
             if (componentObject)
-
-              /** Inject the value of the theme property into the component */
-              if (!componentObject.styles) { componentObject.styles = '' }
-
-            componentObject.styles = themeObject[key2][key3] + " " + componentObject.styles
-            delete componentObject[key2]
+              if (key2 !== 'selected') {
+                /** Inject the value of the theme property into the component */
+                if (!componentObject.styles) { componentObject.styles = '' }
+
+                componentObject.styles = themeObject[key2][key3] + " " + componentObject.styles
+                delete componentObject[key2]
+              } else {
+                componentObject.selected = themeObject[key2][key3]
+              }
           }
         }
       }
     }
   }
-
+  console.log('componentObject', componentObject)
   return componentObject
 }
 
 export default injectObject
+
+
+

nci/app/interfaces/index.ts

@@ -122,7 +122,7 @@ interface ButtonCompiled {
   href: string
   title: string,
   styles: string,
-  active?: string
+  selected?: string
 }
 
 /**

nci/data/demo.ts

@@ -8,6 +8,7 @@ const ConfigFile = {
     type: "anchor",
     size: "sm",
     color: "nav",
+    selected: "primary",
     styles: ""
   },
   pages: {
@@ -55,22 +56,6 @@ const ConfigFile = {
               color: "primary",
               styles: "button"
             },
-            buttonInfo: {
-              type: "anchor",
-              href: "/about",
-              title: "Contact Us",
-              size: "sm",
-              color: "primary",
-              styles: "button"
-            },
-            buttonInfoB: {
-              type: "anchor",
-              href: "/about",
-              title: "Contact Us",
-              size: "sm",
-              color: "primary",
-              styles: "button"
-            }
           }
         }
       }

nci/theme/default-light.ts

@@ -33,7 +33,7 @@ const Theme = {
   },
   section: {
     layout: {
-      container: "m-auto flex flex-col justify-center items-center max-w-screen-lg",
+      container: "m-auto flex flex-col justify-center items-center max-w-screen-lg xx-r",
       centered: "m-auto flex flex-col justify-center items-center text-center sm:w-5/6 md:w-2/3 lg:w-1/2",
       left: "m-auto flex flex-col justify-center items-center text-center sm:w-4/6 md:grid md:grid-rows-1 md:grid-flow-col md:gap-4 md:text-left md:items-left md:justify-left sm:w-5/6 md:w-2/3 lg:w-1/2"
     }
@@ -72,21 +72,25 @@ const Theme = {
   },
   anchor: {
     size: {
-      xs: "text-xs py-2 px-7 my-4",
-      sm: "text-sm py-3 px-8 my-5",
-      md: "text-md py-4 px-9 my-6",
-      lg: "text-lg py-5 px-10 my-7",
-      xl: "text-xl py-6 px-11 my-8",
-      xl2: "text-xl2 py-7 px-12 my-9",
-      xl3: "text-xl3 py-8 px-13 my-10",
-      xl4: "text-xl4 py-9 px-14 my-11",
+      xs: "text-xs py-2 px-7 my-4 mx-1",
+      sm: "text-sm py-3 px-8 my-5 mx-2",
+      md: "text-md py-4 px-9 my-6 mx-3",
+      lg: "text-lg py-5 px-10 my-7 mx-4",
+      xl: "text-xl py-6 px-11 my-8 mx-5",
+      xl2: "text-xl2 py-7 px-12 my-9 mx-6",
+      xl3: "text-xl3 py-8 px-13 my-10 mx-7",
+      xl4: "text-xl4 py-9 px-14 my-11 mx-8",
     },
     color: {
       primary: "bg-transparent uppercase rounded border border-primary text-primary hover:bg-gray-300 hover:border-transparent hover:text-white",
       secondary: "bg-transparent uppercase rounded text-green-700 border border-green-500 hover:bg-green-500 hover:border-transparent hover:text-white",
       tertiary: "bg-transparent uppercase rounded text-red-700 border border-red-500 hover:bg-red-500 hover:border-transparent hover:text-white",
-      nav: "text-primary hover:text-secondary"
+      nav: "text-primary border-b border-double border-transparent hover:border-current cursor-pointer select-none"
     },
+    selected: {
+      primary: "border-0 border-b border-current border-solid",
+      secondary: "background-black text-white-500"
+    }
   }
 }
 

nuxt.config.ts

@@ -2,7 +2,7 @@ import { NuxtConfig } from "@nuxt/types";
 import ConfigFile from './nci/data/demo'
 const config: NuxtConfig = {
   // Target: https://go.nuxtjs.dev/config-target
-  target: 'static',
+  target: 'server',
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
@@ -38,6 +38,11 @@ const config: NuxtConfig = {
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
   ],
+  generate: {
+    // choose to suit your project
+    interval: 12000,
+  },
+  env: { NODE_ENV: 'dev' },
   storybook: {
     addons: [
       '@storybook/addon-controls',