feat(UsaNavPrimaryItem): implement UsaNavPrimaryItem component

ISSUES CLOSED: #93
patrickcate · Mar 12, 2022 · db5ca2f · db5ca2f
1 parent d146173
commit db5ca2f
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 0 deletions.
diff --git a/src/components/UsaNavPrimaryItem/UsaNavPrimaryItem.stories.js b/src/components/UsaNavPrimaryItem/UsaNavPrimaryItem.stories.js
@@ -0,0 +1,63 @@
+import UsaNavPrimaryItem from './UsaNavPrimaryItem.vue'
+
+const defaultProps = {
+  href: UsaNavPrimaryItem.props.href.default,
+  to: UsaNavPrimaryItem.props.to.default,
+  routerComponentName: UsaNavPrimaryItem.props.routerComponentName.default,
+}
+
+export default {
+  component: UsaNavPrimaryItem,
+  title: 'Components/UsaNavPrimaryItem',
+  argTypes: {
+    href: {
+      control: { type: 'text' },
+    },
+    to: {
+      control: { type: 'text' },
+    },
+    routerComponentName: {
+      control: { type: 'text' },
+    },
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    href: defaultProps.href,
+    to: defaultProps.to,
+    routerComponentName: defaultProps.routerComponentName,
+    defaultSlot: 'Test nav link',
+  },
+  decorators: [
+    () => ({
+      template: '<story />',
+      provide: {
+        closeAllDropdowns: e => {
+          e.preventDefault()
+        },
+      },
+    }),
+  ],
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { UsaNavPrimaryItem },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `<UsaNavPrimaryItem
+    v-bind="$attrs"
+    :href="href"
+    :to="to"
+    :router-component-name="routerComponentName"
+  >${args.defaultSlot}</UsaNavPrimaryItem>`,
+})
+
+export const DefaultNavPrimaryItem = DefaultTemplate.bind({})
+DefaultNavPrimaryItem.args = {
+  ...defaultProps,
+  href: '/test-page',
+}
+DefaultNavPrimaryItem.storyName = 'Default'
diff --git a/src/components/UsaNavPrimaryItem/UsaNavPrimaryItem.test.js b/src/components/UsaNavPrimaryItem/UsaNavPrimaryItem.test.js
@@ -0,0 +1,63 @@
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import UsaNavPrimaryItem from './UsaNavPrimaryItem.vue'
+
+describe('UsaNavPrimaryItem', () => {
+  it('renders the component', () => {
+    mount(UsaNavPrimaryItem, {
+      props: {
+        href: '#',
+      },
+      attrs: {
+        'data-test': 'test-attr',
+      },
+      slots: {
+        default: () => 'Test nav link',
+      },
+      global: {
+        provide: {
+          closeAllDropdowns: cy.stub().as('closeAllDropdowns'),
+        },
+      },
+    })
+
+    cy.get('li.usa-nav__primary-item')
+      .as('item')
+      .should('not.have.attr', 'data-test')
+
+    cy.get('@item')
+      .find('a')
+      .as('link')
+      .should('have.class', 'usa-nav__link')
+      .and('have.attr', 'data-test')
+      .and('contain', 'test-attr')
+
+    cy.get('@link').should('have.attr', 'href').and('contain', '#')
+    cy.get('@link').find('span').should('contain', 'Test nav link')
+
+    cy.get('@closeAllDropdowns').should('not.be.called')
+
+    cy.get('@link').click()
+
+    cy.get('@closeAllDropdowns').should('be.called')
+  })
+
+  it('renders as vue router link', () => {
+    mount(UsaNavPrimaryItem, {
+      props: {
+        to: '/test',
+        'router-component-name': 'router-link',
+      },
+      slots: {
+        default: () => 'Test nav link',
+      },
+      global: {
+        provide: {
+          closeAllDropdowns: () => {},
+        },
+      },
+    })
+
+    cy.get('router-link').should('have.attr', 'to').and('contain', '/test')
+  })
+})
diff --git a/src/components/UsaNavPrimaryItem/UsaNavPrimaryItem.vue b/src/components/UsaNavPrimaryItem/UsaNavPrimaryItem.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script setup>
+import { inject } from 'vue'
+import BaseLink from '@/components/BaseLink'
+
+defineProps({
+  ...BaseLink.props,
+})
+
+const closeAllDropdowns = inject('closeAllDropdowns')
+</script>
+
+<template>
+  <li class="usa-nav__primary-item">
+    <BaseLink
+      v-bind="$attrs"
+      class="usa-nav__link"
+      :href="href"
+      :to="to"
+      :router-component-name="routerComponentName"
+      @click="closeAllDropdowns"
+    >
+      <span><slot></slot></span>
+    </BaseLink>
+  </li>
+</template>
diff --git a/src/components/UsaNavPrimaryItem/index.js b/src/components/UsaNavPrimaryItem/index.js
@@ -0,0 +1,4 @@
+import UsaNavPrimaryItem from './UsaNavPrimaryItem.vue'
+
+export { UsaNavPrimaryItem }
+export default UsaNavPrimaryItem
diff --git a/src/composables/useAccordion.js b/src/composables/useAccordion.js
@@ -49,11 +49,22 @@ export default (_accordionItems, multiselectable) => {
     }
   }
 
+  const closeAllItems = () => {
+    const items = Object.keys(accordionItems)
+
+    items.forEach(accordionId => {
+      if (accordionItems[accordionId]) {
+        accordionItems[accordionId] = false
+      }
+    })
+  }
+
   return {
     registerAccordionItem,
     unregisterAccordionItem,
     openItem,
     closeItem,
     toggleItem,
+    closeAllItems,
   }
 }