feat(UsaGraphicListRow): implement UsaGraphicListRow component

ISSUES CLOSED: #38
patrickcate · Dec 23, 2021 · 493d4f4 · 493d4f4
1 parent 635e8cf
commit 493d4f4
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 0 deletions.
diff --git a/src/components/UsaGraphicListRow/UsaGraphicListRow.stories.js b/src/components/UsaGraphicListRow/UsaGraphicListRow.stories.js
@@ -0,0 +1,50 @@
+import UsaGraphicListRow from './UsaGraphicListRow.vue'
+
+const defaultProps = {}
+
+const slotContent = `
+  <div class="usa-media-block tablet:grid-col">
+    <img class="usa-media-block__img" src="/assets/img/circle-124.png" alt="">
+    <div class="usa-media-block__body">
+      <h2 class="usa-graphic-list__heading">Graphic headings can vary.</h2>
+      <p>Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.</p>
+    </div>
+  </div>
+  <div class="usa-media-block tablet:grid-col">
+    <img class="usa-media-block__img" src="/assets/img/circle-124.png" alt="">
+    <div class="usa-media-block__body">
+      <h2 class="usa-graphic-list__heading">Stick to 6 or fewer words.</h2>
+      <p>Keep body text to about 30 words. They can be shorter, but try to be somewhat balanced across all four. It creates a clean appearance with good spacing.</p>
+    </div>
+  </div>
+`
+
+export default {
+  component: UsaGraphicListRow,
+  title: 'Components/UsaGraphicListRow',
+  argTypes: {
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    defaultSlot: slotContent,
+  },
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { UsaGraphicListRow },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `<UsaGraphicListRow class="grid-row grid-gap">${args.defaultSlot}</UsaGraphicListRow>`,
+})
+
+export const DefaultGraphicListRow = DefaultTemplate.bind({})
+DefaultGraphicListRow.args = {
+  ...defaultProps,
+}
+DefaultGraphicListRow.storyName = 'Default'
+
+// TODO: Document grid and `usa-graphic-list__heading` classes needing to be added.
diff --git a/src/components/UsaGraphicListRow/UsaGraphicListRow.test.js b/src/components/UsaGraphicListRow/UsaGraphicListRow.test.js
@@ -0,0 +1,15 @@
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import UsaGraphicListRow from './UsaGraphicListRow.vue'
+
+describe('UsaGraphicListRow', () => {
+  it('renders the component', () => {
+    mount(UsaGraphicListRow, {
+      slots: {
+        default: () => 'Test row',
+      },
+    })
+
+    cy.get('.usa-graphic-list__row').should('contain', 'Test row')
+  })
+})
diff --git a/src/components/UsaGraphicListRow/UsaGraphicListRow.vue b/src/components/UsaGraphicListRow/UsaGraphicListRow.vue
@@ -0,0 +1,7 @@
+<script></script>
+
+<template>
+  <div class="usa-graphic-list__row">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/components/UsaGraphicListRow/index.js b/src/components/UsaGraphicListRow/index.js
@@ -0,0 +1,4 @@
+import UsaGraphicListRow from './UsaGraphicListRow.vue'
+
+export { UsaGraphicListRow }
+export default UsaGraphicListRow