feat: implement UsaTag component

ISSUES CLOSED: #1
patrickcate · Nov 3, 2021 · 77e4d53 · 77e4d53
1 parent 587cf75
commit 77e4d53
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 0 deletions.
diff --git a/src/components/UsaTag/UsaTag.stories.js b/src/components/UsaTag/UsaTag.stories.js
@@ -0,0 +1,60 @@
+import UsaTag from './UsaTag.vue'
+
+const defaultProps = {
+  size: '',
+}
+
+export default {
+  component: UsaTag,
+  title: 'Components/UsaTag',
+  argTypes: {
+    size: {
+      options: ['', 'big'],
+      control: {
+        type: 'radio',
+        labels: {
+          '': 'default',
+        },
+      },
+    },
+    tag: {
+      control: {
+        type: 'text',
+      },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    tag: 'span',
+    content: 'Test',
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  components: { UsaTag },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `<UsaTag :tag="tag" :size="size">{{ content }}</UsaTag>`,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  ...defaultProps,
+}
+
+export const Big = Template.bind({})
+Big.args = {
+  ...defaultProps,
+  size: 'big',
+}
+
+export const CustomTag = Template.bind({})
+CustomTag.args = {
+  ...defaultProps,
+  tag: 'div',
+  content: 'Test (div)',
+}
diff --git a/src/components/UsaTag/UsaTag.test.js b/src/components/UsaTag/UsaTag.test.js
@@ -0,0 +1,38 @@
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import UsaTag from './UsaTag.vue'
+
+describe('UsaTag', () => {
+  it('renders the component', () => {
+    mount(UsaTag, {
+      slots: {
+        default: () => 'Test',
+      },
+    })
+    cy.get('span.usa-tag').should('exist').contains('Test')
+  })
+
+  it('renders the size class', () => {
+    mount(UsaTag, {
+      slots: {
+        default: () => 'Test',
+      },
+      props: {
+        size: 'big',
+      },
+    })
+    cy.get('.usa-tag--big').should('exist')
+  })
+
+  it('renders as a custom HTML element', () => {
+    mount(UsaTag, {
+      slots: {
+        default: () => 'Test',
+      },
+      props: {
+        tag: 'div',
+      },
+    })
+    cy.get('div.usa-tag').should('exist')
+  })
+})
diff --git a/src/components/UsaTag/UsaTag.vue b/src/components/UsaTag/UsaTag.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: '',
+    validator(size) {
+      return size === '' || size === 'big'
+    },
+  },
+  tag: {
+    type: String,
+    default: 'span',
+  },
+})
+
+const sizeClass = computed(() => (props.size === 'big' ? 'usa-tag--big' : null))
+</script>
+
+<template>
+  <component :is="tag" class="usa-tag" :class="sizeClass"
+    ><slot></slot
+  ></component>
+</template>
diff --git a/src/components/UsaTag/index.js b/src/components/UsaTag/index.js
@@ -0,0 +1,4 @@
+import UsaTag from './UsaTag.vue'
+
+export { UsaTag }
+export default UsaTag