feat(UsaIdentifierMasthead): implement UsaIdentifierMasthead component

patrickcate · Jan 30, 2022 · 8b43e68 · 8b43e68
1 parent fa5921f
commit 8b43e68
Show file tree

Hide file tree

Showing 4 changed files with 271 additions and 0 deletions.
diff --git a/src/components/UsaIdentifierMasthead/UsaIdentifierMasthead.stories.js b/src/components/UsaIdentifierMasthead/UsaIdentifierMasthead.stories.js
@@ -0,0 +1,108 @@
+import UsaIdentifierMasthead from './UsaIdentifierMasthead.vue'
+
+const defaultProps = {
+  ariaLabel: UsaIdentifierMasthead.props.ariaLabel.default,
+  descriptionAriaLabel:
+    UsaIdentifierMasthead.props.descriptionAriaLabel.default,
+}
+
+export default {
+  component: UsaIdentifierMasthead,
+  title: 'Components/UsaIdentifierMasthead',
+  argTypes: {
+    ariaLabel: {
+      control: { type: 'text' },
+    },
+    descriptionAriaLabel: {
+      control: { type: 'text' },
+    },
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    ariaLabel: defaultProps.ariaLabel,
+    descriptionAriaLabel: defaultProps.descriptionAriaLabel,
+    defaultSlot: '',
+    logosSlot: '',
+    domainSlot: '',
+    disclaimerSlot: '',
+  },
+  decorators: [
+    () => ({
+      template: '<div class="usa-identifier"><story /></div>',
+    }),
+  ],
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { UsaIdentifierMasthead },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `<UsaIdentifierMasthead
+    :aria-label="ariaLabel" :description-aria-label="descriptionAriaLabel"
+  >
+    <template #default>${args.defaultSlot}</template>
+    <template #logos>${args.logosSlot}</template>
+    <template #domain>${args.domainSlot}</template>
+    <template #disclaimer>${args.disclaimerSlot}</template>
+  </UsaIdentifierMasthead>`,
+})
+
+export const DefaultIdentifierMasthead = DefaultTemplate.bind({})
+DefaultIdentifierMasthead.args = {
+  ...defaultProps,
+  defaultSlot: `<div class="usa-identifier__logos">
+      <a href="javascript:void(0);" class="usa-identifier__logo">
+        <img class="usa-identifier__logo-img" src="https://designsystem.digital.gov/assets/img/circle-gray-20.svg" alt="Parent agency logo" role="img">
+      </a>
+    </div>
+    <div class="usa-identifier__identity" aria-label="Agency description">
+      <p class="usa-identifier__identity-domain">domain.gov</p>
+      <p class="usa-identifier__identity-disclaimer">
+        An official website of the
+        <a href="javascript:void(0);">Parent agency</a>
+      </p>
+    </div>`,
+}
+DefaultIdentifierMasthead.storyName = 'Default'
+
+export const LogosSlotIdentifierMasthead = DefaultTemplate.bind({})
+LogosSlotIdentifierMasthead.args = {
+  ...defaultProps,
+  logosSlot: `<a href="javascript:void(0);" class="usa-identifier__logo">
+  <img class="usa-identifier__logo-img" src="https://designsystem.digital.gov/assets/img/circle-gray-20.svg" alt="Parent agency logo" role="img">
+</a>`,
+}
+LogosSlotIdentifierMasthead.storyName = 'Logos Slot'
+
+export const DomainSlotIdentifierMasthead = DefaultTemplate.bind({})
+DomainSlotIdentifierMasthead.args = {
+  ...defaultProps,
+  domainSlot: `domain.gov`,
+}
+DomainSlotIdentifierMasthead.storyName = 'Domain Slot'
+
+export const DisclaimerSlotIdentifierMasthead = DefaultTemplate.bind({})
+DisclaimerSlotIdentifierMasthead.args = {
+  ...defaultProps,
+  disclaimerSlot: `An official website of the
+  <a href="javascript:void(0);">Parent agency</a>`,
+}
+DisclaimerSlotIdentifierMasthead.storyName = 'Disclaimer Slot'
+
+export const CustomAriaLabelsIdentifierMasthead = DefaultTemplate.bind({})
+CustomAriaLabelsIdentifierMasthead.args = {
+  ...defaultProps,
+  ariaLabel: 'Custom aria label',
+  descriptionAriaLabel: 'Custom description aria label',
+  logosSlot: `<a href="javascript:void(0);" class="usa-identifier__logo">
+  <img class="usa-identifier__logo-img" src="https://designsystem.digital.gov/assets/img/circle-gray-20.svg" alt="Parent agency logo" role="img">
+  </a>`,
+  domainSlot: `domain.gov`,
+  disclaimerSlot: `An official website of the
+  <a href="javascript:void(0);">Parent agency</a>`,
+}
+CustomAriaLabelsIdentifierMasthead.storyName = 'Custom Aria Labels'
diff --git a/src/components/UsaIdentifierMasthead/UsaIdentifierMasthead.test.js b/src/components/UsaIdentifierMasthead/UsaIdentifierMasthead.test.js
@@ -0,0 +1,118 @@
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import UsaIdentifierMasthead from './UsaIdentifierMasthead.vue'
+
+describe('UsaIdentifierMasthead', () => {
+  it('renders the component', () => {
+    mount(UsaIdentifierMasthead, {})
+
+    cy.get('section.usa-identifier__section--masthead')
+      .should('have.class', 'usa-identifier__section')
+      .and('have.attr', 'aria-label')
+      .and('contain', 'Agency identifier')
+
+    cy.get(
+      '.usa-identifier__section--masthead > .usa-identifier__container'
+    ).should('exist')
+
+    cy.get('.usa-identifier__identity').should('not.exist')
+    cy.get('.usa-identifier__identity-disclaimer').should('not.exist')
+  })
+
+  it('shows default slot content', () => {
+    mount(UsaIdentifierMasthead, {
+      slots: {
+        default: () => 'Test default slot',
+      },
+    })
+
+    cy.get('.usa-identifier__section--masthead').should('exist')
+
+    cy.get(
+      '.usa-identifier__section--masthead > .usa-identifier__container'
+    ).and('contain', 'Test default slot')
+
+    cy.get('.usa-identifier__logos').should('not.exist')
+    cy.get('.usa-identifier__identity').should('not.exist')
+    cy.get('.usa-identifier__identity-domain').should('not.exist')
+    cy.get('.usa-identifier__identity-disclaimer').should('not.exist')
+  })
+
+  it('shows `domain` slot content', () => {
+    mount(UsaIdentifierMasthead, {
+      slots: {
+        domain: () => 'www.test.com',
+      },
+    })
+
+    cy.get('.usa-identifier__identity')
+      .should('have.attr', 'aria-label')
+      .and('contain', 'Agency description')
+
+    cy.get('p.usa-identifier__identity-domain').should(
+      'contain',
+      'www.test.com'
+    )
+
+    cy.get('p.usa-identifier__identity-disclaimer').should('not.exist')
+  })
+
+  it('shows `disclaimer` slot content', () => {
+    mount(UsaIdentifierMasthead, {
+      slots: {
+        disclaimer: () => 'Test disclaimer',
+      },
+    })
+
+    cy.get('p.usa-identifier__identity-disclaimer').should(
+      'contain',
+      'Test disclaimer'
+    )
+
+    cy.get('.usa-identifier__identity-domain').should('not.exist')
+  })
+
+  it('shows `logos` slot content', () => {
+    mount(UsaIdentifierMasthead, {
+      slots: {
+        logos: () => 'Test logo',
+      },
+    })
+
+    cy.get('.usa-identifier__logos').should('contain', 'Test logo')
+  })
+
+  it('use custom aria labels', () => {
+    mount(UsaIdentifierMasthead, {
+      props: {
+        ariaLabel: 'Test aria label',
+        descriptionAriaLabel: 'Test description aria label',
+      },
+      slots: {
+        logos: () => 'Test logo',
+        disclaimer: () => 'Test disclaimer',
+        domain: () => 'www.test.com',
+      },
+    })
+
+    cy.get('section.usa-identifier__section--masthead')
+      .should('have.attr', 'aria-label')
+      .and('contain', 'Test aria label')
+
+    cy.get('.usa-identifier__logos').should('contain', 'Test logo')
+
+    cy.get('.usa-identifier__identity')
+      .should('have.attr', 'aria-label')
+      .and('contain', 'Test description aria label')
+
+    cy.get('p.usa-identifier__identity-domain').should(
+      'contain',
+      'www.test.com'
+    )
+
+    cy.get('p.usa-identifier__identity-disclaimer').should(
+      'contain',
+      'Test disclaimer'
+    )
+  })
+})
diff --git a/src/components/UsaIdentifierMasthead/UsaIdentifierMasthead.vue b/src/components/UsaIdentifierMasthead/UsaIdentifierMasthead.vue
@@ -0,0 +1,41 @@
+<script setup>
+defineProps({
+  ariaLabel: {
+    type: String,
+    default: 'Agency identifier',
+  },
+  descriptionAriaLabel: {
+    type: String,
+    default: 'Agency description',
+  },
+})
+</script>
+
+<template>
+  <section
+    class="usa-identifier__section usa-identifier__section--masthead"
+    :aria-label="ariaLabel"
+  >
+    <div class="usa-identifier__container">
+      <slot>
+        <div v-if="$slots.logos" class="usa-identifier__logos">
+          <slot name="logos"></slot>
+        </div>
+        <div
+          v-if="$slots.domain || $slots.disclaimer"
+          class="usa-identifier__identity"
+          :aria-label="descriptionAriaLabel"
+        >
+          <p v-if="$slots.domain" class="usa-identifier__identity-domain"
+            ><slot name="domain"></slot
+          ></p>
+          <p
+            v-if="$slots.disclaimer"
+            class="usa-identifier__identity-disclaimer"
+            ><slot name="disclaimer"></slot
+          ></p>
+        </div>
+      </slot>
+    </div>
+  </section>
+</template>
diff --git a/src/components/UsaIdentifierMasthead/index.js b/src/components/UsaIdentifierMasthead/index.js
@@ -0,0 +1,4 @@
+import UsaIdentifierMasthead from './UsaIdentifierMasthead.vue'
+
+export { UsaIdentifierMasthead }
+export default UsaIdentifierMasthead