feat(UsaValidation): allow actual validations to be run with component

ISSUES CLOSED: #439
patrickcate · Nov 5, 2022 · 104de29 · 104de29
1 parent c65f3da
commit 104de29
Show file tree

Hide file tree

Showing 9 changed files with 617 additions and 49 deletions.
diff --git a/src/components/UsaChecklist/UsaChecklist.stories.js b/src/components/UsaChecklist/UsaChecklist.stories.js
@@ -3,17 +3,20 @@ import UsaChecklist from './UsaChecklist.vue'
 const testItems = [
   {
     id: 'item1',
+    text: 'Use at least one uppercase character',
     checked: false,
-    text: 'Test item 1',
+    ariaLabel: 'is valid',
   },
   {
     id: 'item2',
+    text: 'Use at least one number',
     checked: true,
-    text: 'Test item 2',
+    ariaLabel: 'is valid',
   },
   {
+    text: 'Use at least one symbol',
     checked: false,
-    text: 'Test item 3',
+    ariaLabel: 'is invalid',
   },
 ]
 

diff --git a/src/components/UsaChecklist/UsaChecklist.test.js b/src/components/UsaChecklist/UsaChecklist.test.js
@@ -26,15 +26,18 @@ describe('UsaChecklist', () => {
         id: 'item1',
         checked: false,
         text: 'Test item 1',
+        ariaLabel: 'Test item 1: invalid',
       },
       {
         id: 'item2',
         checked: true,
         text: 'Test item 2',
+        ariaLabel: 'Test item 2: valid',
       },
       {
         checked: false,
         text: 'Test item 3',
+        ariaLabel: 'Test item 3: invalid',
       },
     ])
 
@@ -44,27 +47,27 @@ describe('UsaChecklist', () => {
       },
     })
 
-    cy.get('.usa-checklist li').should('have.length', 3)
+    cy.get('.usa-checklist li')
+      .should('have.length', 3)
+      .and('have.attr', 'tabindex', '0')
 
     cy.get('li:nth-of-type(1)')
-      .should('have.attr', 'aria-checked', 'false')
+      .should('have.attr', 'aria-label', 'Test item 1: invalid')
       .and('contain', 'Test item 1')
 
     cy.get('li:nth-of-type(2)')
       .should('have.class', 'usa-checklist__item--checked')
-      .and('have.attr', 'aria-checked', 'true')
+      .and('have.attr', 'aria-label', 'Test item 2: valid')
       .and('contain', 'Test item 2')
 
     cy.get('li:nth-of-type(3)')
       .as('item3')
-      .should('have.attr', 'aria-checked', 'false')
+      .should('have.attr', 'aria-label', 'Test item 3: invalid')
       .and('contain', 'Test item 3')
       .then(() => {
         testItems.value[2].checked = true
 
-        cy.get('@item3')
-          .should('have.attr', 'aria-checked', 'true')
-          .and('have.class', 'usa-checklist__item--checked')
+        cy.get('@item3').should('have.class', 'usa-checklist__item--checked')
       })
   })
 })
diff --git a/src/components/UsaChecklist/UsaChecklist.vue b/src/components/UsaChecklist/UsaChecklist.vue
@@ -16,6 +16,7 @@ defineProps({
         v-for="item in items"
         :key="item?.id || item.text"
         :checked="item.checked"
+        :aria-label="item.ariaLabel"
         >{{ item.text }}</UsaChecklistItem
       >
     </slot>

diff --git a/src/components/UsaChecklistItem/UsaChecklistItem.stories.js b/src/components/UsaChecklistItem/UsaChecklistItem.stories.js
@@ -11,13 +11,13 @@ export default {
     checked: {
       control: { type: 'boolean' },
     },
-    defaultSlot: {
+    ariaLabel: {
       control: { type: 'text' },
     },
   },
   args: {
     checked: defaultProps.checked,
-    defaultSlot: '',
+    ariaLabel: '',
   },
   decorators: [
     () => ({
@@ -33,7 +33,7 @@ const DefaultTemplate = (args, { argTypes }) => ({
   setup() {
     return { ...args }
   },
-  template: `<UsaChecklistItem :checked="checked">
+  template: `<UsaChecklistItem :checked="checked" :aria-label="ariaLabel">
     <template v-if="${!!args.defaultSlot}" #default>${
     args.defaultSlot
   }</template>
@@ -54,3 +54,11 @@ CheckedChecklistItem.args = {
   checked: true,
 }
 CheckedChecklistItem.storyName = 'Checked'
+
+export const CustomAriaLabelChecklistItem = DefaultTemplate.bind({})
+CustomAriaLabelChecklistItem.args = {
+  ...defaultProps,
+  defaultSlot: 'Test item',
+  ariaLabel: 'is invalid',
+}
+CustomAriaLabelChecklistItem.storyName = 'Custom Aria Label'
diff --git a/src/components/UsaChecklistItem/UsaChecklistItem.test.js b/src/components/UsaChecklistItem/UsaChecklistItem.test.js
@@ -5,20 +5,24 @@ import UsaChecklistItem from './UsaChecklistItem.vue'
 describe('UsaChecklistItem', () => {
   it('renders the component', () => {
     mount(UsaChecklistItem, {
+      props: {
+        checked: false,
+        ariaLabel: 'invalid',
+      },
       slots: {
         default: () => 'Test item 1',
       },
     }).as('wrapper')
 
     cy.get('li.usa-checklist__item')
       .as('item1')
-      .should('have.attr', 'aria-checked', 'false')
+      .should('have.attr', 'aria-label', 'invalid')
       .and('contain', 'Test item 1')
 
-    cy.get('@wrapper').invoke('setProps', { checked: true })
+    cy.get('@wrapper').invoke('setProps', { checked: true, ariaLabel: 'valid' })
 
     cy.get('@item1')
-      .should('have.attr', 'aria-checked', 'true')
+      .should('have.attr', 'aria-label', 'valid')
       .and('have.class', 'usa-checklist__item--checked')
   })
 })
diff --git a/src/components/UsaChecklistItem/UsaChecklistItem.vue b/src/components/UsaChecklistItem/UsaChecklistItem.vue
@@ -6,6 +6,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  ariaLabel: {
+    type: String,
+    default: '',
+  },
 })
 
 const classes = computed(() => [
@@ -14,7 +18,11 @@ const classes = computed(() => [
 </script>
 
 <template>
-  <li class="usa-checklist__item" :class="classes" :aria-checked="checked"
+  <li
+    class="usa-checklist__item"
+    :aria-label="ariaLabel"
+    :class="classes"
+    tabindex="0"
     ><slot></slot
   ></li>
 </template>
diff --git a/src/components/UsaValidation/UsaValidation.stories.js b/src/components/UsaValidation/UsaValidation.stories.js
@@ -4,48 +4,69 @@ const testItems = [
   {
     id: 'item1',
     text: 'Use at least one uppercase character',
-    checked: false,
+    validator: /[A-Z]/,
   },
   {
     id: 'item2',
     text: 'Use at least one number',
-    checked: true,
+    validator: '\\d',
   },
   {
-    id: 'item3',
     text: 'Use at least one symbol',
-    checked: false,
+    validator: value => value.length > 6,
   },
 ]
 
 const defaultProps = {
-  items: UsaValidation.props.items.default(),
+  validations: UsaValidation.props.validations.default(),
+  validationValue: UsaValidation.props.validationValue.default,
   heading: UsaValidation.props.heading.default,
   headingTag: UsaValidation.props.headingTag.default,
+  validLabel: UsaValidation.props.validLabel.default,
+  invalidLabel: UsaValidation.props.invalidLabel.default,
+  id: UsaValidation.props.id.default,
   customClasses: UsaValidation.props.customClasses.default(),
 }
 
 export default {
   component: UsaValidation,
   title: 'Components/UsaValidation',
   argTypes: {
-    items: {
+    validations: {
       control: { type: 'object' },
     },
+    validationValue: {
+      control: { type: 'text' },
+    },
     heading: {
       control: { type: 'text' },
     },
     headingTag: {
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
       control: { type: 'select' },
     },
+    validLabel: {
+      control: { type: 'text' },
+    },
+    invalidLabel: {
+      control: { type: 'text' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    customClasses: {
+      control: { type: 'object' },
+    },
   },
   args: {
-    items: defaultProps.items,
+    validations: defaultProps.validations,
+    validationValue: defaultProps.validationValue,
     heading: defaultProps.heading,
     headingTag: defaultProps.headingTag,
+    validLabel: defaultProps.validLabel,
+    invalidLabel: defaultProps.invalidLabel,
+    id: defaultProps.id,
     customClasses: defaultProps.customClasses,
-    defaultSlot: '',
   },
 }
 
@@ -56,18 +77,22 @@ const DefaultTemplate = (args, { argTypes }) => ({
     return { ...args }
   },
   template: `<UsaValidation
-    :items="items"
+    :validations="validations"
+    :validationValue="validationValue"
     :heading="heading"
     :heading-tag="headingTag"
+    :validLabel="validLabel"
+    :invalidLabel="invalidLabel"
+    :id="id"
     :custom-classes="customClasses"
-    >${args.defaultSlot}</UsaValidation>`,
+    ></UsaValidation>`,
 })
 
 export const DefaultValidation = DefaultTemplate.bind({})
 DefaultValidation.args = {
   ...defaultProps,
   heading: 'Code requirements',
-  items: testItems,
+  validations: testItems,
 }
 DefaultValidation.storyName = 'Default'
 
@@ -76,18 +101,38 @@ HeadingTagValidation.args = {
   ...defaultProps,
   heading: 'Custom Heading Tag',
   headingTag: 'h4',
-  items: testItems,
+  validations: testItems,
 }
 HeadingTagValidation.storyName = 'Custom Heading Tag'
 
+export const CustomIdValidation = DefaultTemplate.bind({})
+CustomIdValidation.args = {
+  ...defaultProps,
+  heading: 'Custom Heading Tag',
+  id: 'test-id',
+  validations: testItems,
+}
+CustomIdValidation.storyName = 'Custom ID'
+
+export const CustomValidityLabelsValidation = DefaultTemplate.bind({})
+CustomValidityLabelsValidation.args = {
+  ...defaultProps,
+  heading: 'Custom Heading Tag',
+  validLabel: 'is valid',
+  invalidLabel: 'is invalid',
+  validations: testItems,
+}
+CustomValidityLabelsValidation.storyName = 'Custom Validity Labels'
+
 export const CustomClassesValidation = DefaultTemplate.bind({})
 CustomClassesValidation.args = {
   ...defaultProps,
   heading: 'Custom CSS classes',
-  items: testItems,
+  validations: testItems,
   customClasses: {
     body: ['test-body-class'],
     heading: ['test-heading-class'],
+    checklist: ['test-checklist-class'],
   },
 }
 CustomClassesValidation.storyName = 'Custom Classes'