From 77e4d534faea860228cb113f2da6788d85d77465 Mon Sep 17 00:00:00 2001
From: Patrick Cate <patrickcate@users.noreply.github.com>
Date: Tue, 2 Nov 2021 23:17:57 -0400
Subject: [PATCH] feat: implement `UsaTag` component

ISSUES CLOSED: #1
---
 src/components/UsaTag/UsaTag.stories.js | 60 +++++++++++++++++++++++++
 src/components/UsaTag/UsaTag.test.js    | 38 ++++++++++++++++
 src/components/UsaTag/UsaTag.vue        | 25 +++++++++++
 src/components/UsaTag/index.js          |  4 ++
 4 files changed, 127 insertions(+)
 create mode 100644 src/components/UsaTag/UsaTag.stories.js
 create mode 100644 src/components/UsaTag/UsaTag.test.js
 create mode 100644 src/components/UsaTag/UsaTag.vue
 create mode 100644 src/components/UsaTag/index.js

diff --git a/src/components/UsaTag/UsaTag.stories.js b/src/components/UsaTag/UsaTag.stories.js
new file mode 100644
index 00000000..ed2b04f1
--- /dev/null
+++ 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
new file mode 100644
index 00000000..79c9bc37
--- /dev/null
+++ 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
new file mode 100644
index 00000000..0faa8e90
--- /dev/null
+++ 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
new file mode 100644
index 00000000..ff6d01a9
--- /dev/null
+++ b/src/components/UsaTag/index.js
@@ -0,0 +1,4 @@
+import UsaTag from './UsaTag.vue'
+
+export { UsaTag }
+export default UsaTag