feat: implement UsaProcessListItem component

patrickcate · Nov 11, 2021 · 301528f · 301528f
1 parent af3c8ca
commit 301528f
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 0 deletions.
diff --git a/src/components/UsaProcessListItem/UsaProcessListItem.stories.js b/src/components/UsaProcessListItem/UsaProcessListItem.stories.js
@@ -0,0 +1,81 @@
+import UsaProcessList from '@/components/UsaProcessList'
+import UsaProcessListItem from './UsaProcessListItem.vue'
+
+const defaultProps = {
+  heading: '',
+  headingTag: 'h2',
+  customClasses: {
+    heading: [],
+  },
+}
+
+export default {
+  component: UsaProcessListItem,
+  title: 'Components/UsaProcessListItem',
+  argTypes: {
+    heading: {
+      control: { type: 'text' },
+    },
+    headingTag: {
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: { type: 'select' },
+    },
+    customClasses: {
+      control: { type: 'object' },
+    },
+    headingSlot: {
+      control: { type: 'text' },
+    },
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    heading: defaultProps.heading,
+    headingTag: defaultProps.headingTag,
+    customClasses: defaultProps.customClasses,
+    headingSlot: '',
+    defaultSlot:
+      '<p>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p>',
+  },
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { UsaProcessList, UsaProcessListItem },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `
+    <UsaProcessList>
+      <UsaProcessListItem :heading="heading" :heading-tag="headingTag" :custom-classes="customClasses">
+        <template #heading>${args.headingSlot}</template>
+        <template #default>${args.defaultSlot}</template>
+      </UsaProcessListItem>
+    </UsaProcessList>
+  `,
+})
+
+export const DefaultProcessListItem = DefaultTemplate.bind({})
+DefaultProcessListItem.args = {
+  ...defaultProps,
+  heading: 'Start a process',
+}
+DefaultProcessListItem.storyName = 'Default'
+
+export const CustomClassesProcessListItem = DefaultTemplate.bind({})
+CustomClassesProcessListItem.args = {
+  ...defaultProps,
+  heading: 'Start a process',
+  customClasses: {
+    heading: ['test-heading-class'],
+  },
+}
+CustomClassesProcessListItem.storyName = 'Custom Classes'
+
+export const HeadingSlotProcessListItem = DefaultTemplate.bind({})
+HeadingSlotProcessListItem.args = {
+  ...defaultProps,
+  headingSlot: 'Custom Heading Slot',
+}
+HeadingSlotProcessListItem.storyName = 'Heading Slot'
diff --git a/src/components/UsaProcessListItem/UsaProcessListItem.test.js b/src/components/UsaProcessListItem/UsaProcessListItem.test.js
@@ -0,0 +1,97 @@
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import UsaProcessList from '@/components/UsaProcessList'
+import UsaProcessListItem from './UsaProcessListItem.vue'
+
+describe('UsaProcessListItem', () => {
+  const ProcessListWrapper = {
+    components: { UsaProcessList, UsaProcessListItem },
+    template: `
+      <UsaProcessList>
+        <UsaProcessListItem heading="Test heading 1">
+          <p>Test content 1</p>
+        </UsaProcessListItem>
+        <UsaProcessListItem heading="Test heading 2">
+          <p>Test content 2</p>
+        </UsaProcessListItem>
+        <UsaProcessListItem heading="Test heading 3">
+          <p>Test content 3</p>
+        </UsaProcessListItem>
+      </UsaProcessList>
+    `,
+  }
+
+  it('renders the component', () => {
+    mount(ProcessListWrapper, {})
+
+    cy.get('ol.usa-process-list').should('exist')
+    cy.get('li.usa-process-list__item').should('exist')
+    cy.get('h2.usa-process-list__heading').should('exist')
+
+    cy.get('li:first-child h2').should('contain', 'Test heading 1')
+    cy.get('li:first-child p').should('contain', 'Test content 1')
+
+    cy.get('li:nth-child(2) h2').should('contain', 'Test heading 2')
+    cy.get('li:nth-child(2) p').should('contain', 'Test content 2')
+
+    cy.get('li:last-child h2').should('contain', 'Test heading 3')
+    cy.get('li:last-child p').should('contain', 'Test content 3')
+  })
+
+  it('adds custom CSS classes', () => {
+    const ProcessListWrapper = {
+      components: { UsaProcessList, UsaProcessListItem },
+      template: `
+        <UsaProcessList>
+          <UsaProcessListItem
+          heading="Test heading 1"
+            :custom-classes="{ heading: ['test-heading-class'] }"
+          >
+            <p>Test content 1</p>
+          </UsaProcessListItem>
+        </UsaProcessList>
+      `,
+    }
+
+    mount(ProcessListWrapper, {})
+
+    cy.get('.test-heading-class').should('exist')
+  })
+
+  it('uses the `heading` slot content', () => {
+    const ProcessListWrapper = {
+      components: { UsaProcessList, UsaProcessListItem },
+      template: `
+        <UsaProcessList>
+          <UsaProcessListItem heading="Test heading 1">
+            <template #heading>Test Heading Slot</template>
+            <template #default>
+              <p>Test content 1</p>
+            </template>
+          </UsaProcessListItem>
+        </UsaProcessList>
+      `,
+    }
+
+    mount(ProcessListWrapper, {})
+
+    cy.get('.usa-process-list__heading').contains('Test Heading Slot')
+  })
+
+  it('renders custom heading tag', () => {
+    const ProcessListWrapper = {
+      components: { UsaProcessList, UsaProcessListItem },
+      template: `
+        <UsaProcessList>
+          <UsaProcessListItem heading="Test heading 1" heading-tag="h1">
+            <p>Test content 1</p>
+          </UsaProcessListItem>
+        </UsaProcessList>
+      `,
+    }
+
+    mount(ProcessListWrapper, {})
+
+    cy.get('h1.usa-process-list__heading').should('exist')
+  })
+})
diff --git a/src/components/UsaProcessListItem/UsaProcessListItem.vue b/src/components/UsaProcessListItem/UsaProcessListItem.vue
@@ -0,0 +1,34 @@
+<script setup>
+import BaseHeading from '@/components/BaseHeading'
+
+defineProps({
+  heading: {
+    type: String,
+    default: '',
+  },
+  headingTag: {
+    type: String,
+    default: 'h2',
+  },
+  customClasses: {
+    type: Object,
+    default: () => {
+      return {
+        heading: [],
+      }
+    },
+  },
+})
+</script>
+
+<template>
+  <li class="usa-process-list__item">
+    <BaseHeading
+      class="usa-process-list__heading"
+      :class="customClasses.heading"
+      :tag="headingTag"
+      ><slot name="heading">{{ heading }}</slot></BaseHeading
+    >
+    <slot></slot>
+  </li>
+</template>
diff --git a/src/components/UsaProcessListItem/index.js b/src/components/UsaProcessListItem/index.js
@@ -0,0 +1,4 @@
+import UsaProcessListItem from './UsaProcessListItem.vue'
+
+export { UsaProcessListItem }
+export default UsaProcessListItem