feat: implement UsaCollectionHeading component

ISSUES CLOSED: #20
patrickcate · Nov 23, 2021 · 3c9df87 · 3c9df87
1 parent 19a3c2a
commit 3c9df87
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 0 deletions.
diff --git a/src/components/UsaCollectionHeading/UsaCollectionHeading.stories.js b/src/components/UsaCollectionHeading/UsaCollectionHeading.stories.js
@@ -0,0 +1,98 @@
+import UsaCollectionHeading from './UsaCollectionHeading.vue'
+
+const defaultProps = {
+  heading: 'Collection Item Heading',
+  headingTag: 'h2',
+  href: '/test-page',
+  to: '',
+  routerComponentName: '',
+  customClasses: {
+    link: [],
+  },
+}
+
+export default {
+  component: UsaCollectionHeading,
+  title: 'Components/UsaCollectionHeading',
+  argTypes: {
+    heading: {
+      control: { type: 'text' },
+    },
+    headingTag: {
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: {
+        type: 'select',
+      },
+    },
+    href: {
+      control: { type: 'text' },
+    },
+    to: {
+      control: { type: 'text' },
+    },
+    routerComponentName: {
+      control: { type: 'text' },
+    },
+    customClasses: {
+      control: { type: 'object' },
+    },
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    heading: defaultProps.heading,
+    headingTag: defaultProps.headingTag,
+    href: defaultProps.href,
+    to: defaultProps.to,
+    routerComponentName: defaultProps.routerComponentName,
+    customClasses: defaultProps.customClasses,
+    defaultSlot: '',
+  },
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { UsaCollectionHeading },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `<UsaCollectionHeading
+    :heading="heading"
+    :heading-tag="headingTag"
+    :href="href"
+    :to="to"
+    :router-component-name="routerComponentName"
+    :custom-classes="customClasses"
+  >${args.defaultSlot}</UsaCollectionHeading>`,
+})
+
+export const DefaultCollectionItemHeading = DefaultTemplate.bind({})
+DefaultCollectionItemHeading.args = {
+  ...defaultProps,
+}
+DefaultCollectionItemHeading.storyName = 'Default'
+
+export const CustomHeadingCollectionItemHeading = DefaultTemplate.bind({})
+CustomHeadingCollectionItemHeading.args = {
+  ...defaultProps,
+  headingTag: 'h4',
+  heading: 'Custom heading tag',
+}
+CustomHeadingCollectionItemHeading.storyName = 'Custom Heading Tag'
+
+export const HeadingSlotCollectionItemHeading = DefaultTemplate.bind({})
+HeadingSlotCollectionItemHeading.args = {
+  ...defaultProps,
+  defaultSlot: 'Custom header slot',
+}
+HeadingSlotCollectionItemHeading.storyName = 'Header Slot'
+
+export const CustomClassesCollectionItemHeading = DefaultTemplate.bind({})
+CustomClassesCollectionItemHeading.args = {
+  ...defaultProps,
+  customClasses: {
+    link: ['test-link-class'],
+  },
+}
+CustomClassesCollectionItemHeading.storyName = 'Custom Classes'
diff --git a/src/components/UsaCollectionHeading/UsaCollectionHeading.test.js b/src/components/UsaCollectionHeading/UsaCollectionHeading.test.js
@@ -0,0 +1,71 @@
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import UsaCollectionHeading from './UsaCollectionHeading.vue'
+
+describe('UsaCollectionHeading', () => {
+  it('renders the component', () => {
+    mount(UsaCollectionHeading, {
+      props: {
+        header: 'Test header text',
+        href: '/test-page',
+      },
+    })
+
+    cy.get('h2.usa-collection__heading a')
+      .should('have.class', 'usa-link')
+      .and('have.attr', 'href')
+      .and('contain', '/test-page')
+  })
+
+  it('uses the `heading` slot content', () => {
+    mount(UsaCollectionHeading, {
+      props: {
+        header: 'Test header text',
+      },
+      slots: {
+        default: () => 'Custom slot heading text',
+      },
+    })
+
+    cy.get('.usa-collection__heading').should(
+      'contain',
+      'Custom slot heading text'
+    )
+  })
+
+  it('renders custom heading tag', () => {
+    mount(UsaCollectionHeading, {
+      props: {
+        header: 'Test header text',
+        headingTag: 'h4',
+      },
+    })
+
+    cy.get('h4.usa-collection__heading').should('exist')
+  })
+
+  it('renders the custom router link tag and props', () => {
+    mount(UsaCollectionHeading, {
+      props: {
+        heading: 'Test header text',
+        to: '/test-page',
+        routerComponentName: 'router-link',
+      },
+    })
+
+    cy.get('router-link').should('have.attr', 'to').and('contain', '/test-page')
+  })
+
+  it('adds custom CSS classes', () => {
+    mount(UsaCollectionHeading, {
+      props: {
+        header: 'Test header text',
+        customClasses: {
+          link: ['test-link-class'],
+        },
+      },
+    })
+
+    cy.get('a.test-link-class').should('exist')
+  })
+})
diff --git a/src/components/UsaCollectionHeading/UsaCollectionHeading.vue b/src/components/UsaCollectionHeading/UsaCollectionHeading.vue
@@ -0,0 +1,48 @@
+<script setup>
+import BaseHeading from '@/components/BaseHeading'
+import BaseLink from '@/components/BaseLink'
+
+defineProps({
+  heading: {
+    type: String,
+    default: '',
+  },
+  headingTag: {
+    type: String,
+    default: 'h2',
+  },
+  href: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: [String, Object],
+    default: '',
+  },
+  routerComponentName: {
+    type: String,
+    default: '',
+  },
+  customClasses: {
+    type: Object,
+    default: () => {
+      return {
+        link: [],
+      }
+    },
+  },
+})
+</script>
+
+<template>
+  <BaseHeading :tag="headingTag" class="usa-collection__heading"
+    ><BaseLink
+      :href="href"
+      :to="to"
+      :router-component-name="routerComponentName"
+      class="usa-link"
+      :class="customClasses?.link"
+      ><slot>{{ heading }}</slot></BaseLink
+    ></BaseHeading
+  >
+</template>
diff --git a/src/components/UsaCollectionHeading/index.js b/src/components/UsaCollectionHeading/index.js
@@ -0,0 +1,4 @@
+import UsaCollectionHeading from './UsaCollectionHeading.vue'
+
+export { UsaCollectionHeading }
+export default UsaCollectionHeading