feat(UsaComboBox): implement UsaComboBox component

ISSUES CLOSED: #97
patrickcate · Jun 12, 2022 · b4d949e · b4d949e
1 parent f83aafb
commit b4d949e
Show file tree

Hide file tree

Showing 9 changed files with 2,318 additions and 10 deletions.
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -51,6 +51,7 @@ module.exports = (on, config) => {
             '^src/**',
             '**/*.test.js',
             '**/*.stories.js',
+            '**/*.fixtures.js',
           ],
           cypress: true,
           requireEnv: false,

diff --git a/src/components/UsaComboBox/UsaComboBox.fixtures.js b/src/components/UsaComboBox/UsaComboBox.fixtures.js
@@ -0,0 +1,75 @@
+export const testData = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'apricot', label: 'Apricot' },
+  { value: 'avocado', label: 'Avocado' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'blackberry', label: 'Blackberry' },
+  { value: 'blood orange', label: 'Blood orange' },
+  { value: 'blueberry', label: 'Blueberry' },
+  { value: 'boysenberry', label: 'Boysenberry' },
+  { value: 'breadfruit', label: 'Breadfruit' },
+  { value: 'buddhas hand citron', label: "Buddha's hand citron" },
+  { value: 'cantaloupe', label: 'Cantaloupe' },
+  { value: 'clementine', label: 'Clementine' },
+  { value: 'crab apple', label: 'Crab apple' },
+  { value: 'currant', label: 'Currant' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'custard apple', label: 'Custard apple' },
+  { value: 'coconut', label: 'Coconut' },
+  { value: 'cranberry', label: 'Cranberry' },
+  { value: 'date', label: 'Date' },
+  { value: 'dragonfruit', label: 'Dragonfruit' },
+  { value: 'durian', label: 'Durian' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'gooseberry', label: 'Gooseberry' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'grapefruit', label: 'Grapefruit' },
+  { value: 'guava', label: 'Guava' },
+  { value: 'honeydew melon', label: 'Honeydew melon' },
+  { value: 'jackfruit', label: 'Jackfruit' },
+  { value: 'kiwifruit', label: 'Kiwifruit' },
+  { value: 'kumquat', label: 'Kumquat' },
+  { value: 'lemon', label: 'Lemon' },
+  { value: 'lime', label: 'Lime' },
+  { value: 'lychee', label: 'Lychee' },
+  { value: 'mandarine', label: 'Mandarine' },
+  { value: 'mango', label: 'Mango' },
+  { value: 'mangosteen', label: 'Mangosteen' },
+  { value: 'marionberry', label: 'Marionberry' },
+  { value: 'nectarine', label: 'Nectarine' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'papaya', label: 'Papaya' },
+  { value: 'passionfruit', label: 'Passionfruit' },
+  { value: 'peach', label: 'Peach' },
+  { value: 'pear', label: 'Pear' },
+  { value: 'persimmon', label: 'Persimmon' },
+  { value: 'plantain', label: 'Plantain' },
+  { value: 'plum', label: 'Plum' },
+  { value: 'pineapple', label: 'Pineapple' },
+  { value: 'pluot', label: 'Pluot' },
+  { value: 'pomegranate', label: 'Pomegranate' },
+  { value: 'pomelo', label: 'Pomelo' },
+  { value: 'quince', label: 'Quince' },
+  { value: 'raspberry', label: 'Raspberry' },
+  { value: 'rambutan', label: 'Rambutan' },
+  { value: 'soursop', label: 'Soursop' },
+  { value: 'starfruit', label: 'Starfruit' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'tamarind', label: 'Tamarind' },
+  { value: 'tangelo', label: 'Tangelo' },
+  { value: 'tangerine', label: 'Tangerine' },
+  { value: 'ugli fruit', label: 'Ugli fruit' },
+  { value: 'watermelon', label: 'Watermelon' },
+  { value: 'white currant', label: 'White currant' },
+  { value: 'yuzu', label: 'Yuzu' },
+]
+
+export const falsyTestData = [
+  { value: '', label: '' },
+  { value: 0, label: 0 },
+  { value: 1, label: 1 },
+  { value: 2, label: 1 },
+  { value: 3, label: 1 },
+  { value: 4, label: 1 },
+]
diff --git a/src/components/UsaComboBox/UsaComboBox.stories.js b/src/components/UsaComboBox/UsaComboBox.stories.js
@@ -0,0 +1,242 @@
+import UsaComboBox from './UsaComboBox.vue'
+import { ref } from 'vue'
+import { testData } from '@/components/UsaComboBox/UsaComboBox.fixtures.js'
+
+const defaultProps = {
+  options: UsaComboBox.props.options.default(),
+  modelValue: UsaComboBox.props.modelValue.default,
+  label: UsaComboBox.props.label.default,
+  required: UsaComboBox.props.required.default,
+  disabled: UsaComboBox.props.disabled.default,
+  error: UsaComboBox.props.error.default,
+  id: UsaComboBox.props.id.default,
+  clearButtonAriaLabel: UsaComboBox.props.clearButtonAriaLabel.default,
+  toggleButtonAriaLabel: UsaComboBox.props.toggleButtonAriaLabel.default,
+  customClasses: UsaComboBox.props.customClasses.default(),
+}
+
+export default {
+  component: UsaComboBox,
+  title: 'Components/UsaComboBox',
+  argTypes: {
+    options: {
+      control: { type: 'object' },
+    },
+    modelValue: {
+      control: { type: 'text' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    error: {
+      control: { type: 'boolean' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+    clearButtonAriaLabel: {
+      control: { type: 'text' },
+    },
+    toggleButtonAriaLabel: {
+      control: { type: 'text' },
+    },
+    customClasses: {
+      control: { type: 'object' },
+    },
+    labelSlot: {
+      control: { type: 'text' },
+    },
+    hintSlot: {
+      control: { type: 'text' },
+    },
+    errorMessageSlot: {
+      control: { type: 'text' },
+    },
+    noResultsSlot: {
+      control: { type: 'text' },
+    },
+    assistiveHintSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    options: defaultProps.options,
+    modelValue: defaultProps.modelValue,
+    label: defaultProps.label,
+    required: defaultProps.required,
+    disabled: defaultProps.disabled,
+    error: defaultProps.error,
+    id: defaultProps.id,
+    clearButtonAriaLabel: defaultProps.clearButtonAriaLabel,
+    toggleButtonAriaLabel: defaultProps.toggleButtonAriaLabel,
+    customClasses: defaultProps.customClasses,
+    labelSlot: '',
+    hintSlot: '',
+    errorMessageSlot: '',
+    noResultsSlot: '',
+    assistiveHintSlot: '',
+  },
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { UsaComboBox },
+  props: Object.keys(argTypes),
+  setup() {
+    const modelValue = ref(args.modelValue)
+    return { ...args, modelValue }
+  },
+  template: `<UsaComboBox
+    :options="options"
+    :label="label"
+    :required="required"
+    :disabled="disabled"
+    :error="error"
+    :id="id"
+    :clear-button-aria-label="clearButtonAriaLabel"
+    :toggle-button-aria-label="toggleButtonAriaLabel"
+    :custom-classes="customClasses"
+    v-model="modelValue"
+  >
+    <template v-if="${!!args.labelSlot}" #label>${args.labelSlot}</template>
+    <template v-if="${!!args.hintSlot}" #hint>${args.hintSlot}</template>
+    <template v-if="${!!args.errorMessageSlot}" #error-message>${
+    args.errorMessageSlot
+  }</template>
+    <template v-if="${!!args.noResultsSlot}" #no-results>${
+    args.noResultsSlot
+  }</template>
+    <template v-if="${!!args.assistiveHintSlot}" #assistive-hint>${
+    args.assistiveHintSlot
+  }</template>
+  </UsaComboBox>`,
+})
+
+export const DefaultComboBox = DefaultTemplate.bind({})
+DefaultComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+}
+DefaultComboBox.storyName = 'Default'
+
+export const DefaultValueComboBox = DefaultTemplate.bind({})
+DefaultValueComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  modelValue: 'raspberry',
+}
+DefaultValueComboBox.storyName = 'Default Value'
+
+export const HintComboBox = DefaultTemplate.bind({})
+HintComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  hintSlot: 'Choose wisely',
+}
+HintComboBox.storyName = 'Hint'
+
+export const ErrorComboBox = DefaultTemplate.bind({})
+ErrorComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  error: true,
+}
+ErrorComboBox.storyName = 'Error'
+
+export const ErrorMessageComboBox = DefaultTemplate.bind({})
+ErrorMessageComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  error: true,
+  errorMessageSlot: 'Error message here',
+}
+ErrorMessageComboBox.storyName = 'Error Message'
+
+export const RequiredComboBox = DefaultTemplate.bind({})
+RequiredComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  required: true,
+}
+RequiredComboBox.storyName = 'Required'
+
+export const CustomIdComboBox = DefaultTemplate.bind({})
+CustomIdComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  id: 'custom-id',
+}
+CustomIdComboBox.storyName = 'Custom ID'
+
+export const ClearButtonAriaLabelComboBox = DefaultTemplate.bind({})
+ClearButtonAriaLabelComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  modelValue: 'pomegranate',
+  clearButtonAriaLabel: 'Custom clear aria label',
+}
+ClearButtonAriaLabelComboBox.storyName = 'Custom Clear Button Aria Label'
+
+export const ToggleButtonAriaLabelComboBox = DefaultTemplate.bind({})
+ToggleButtonAriaLabelComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  toggleButtonAriaLabel: 'Custom toggle aria label',
+}
+ToggleButtonAriaLabelComboBox.storyName = 'Custom Toggle Button Aria Label'
+
+export const LabelSlotComboBox = DefaultTemplate.bind({})
+LabelSlotComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  labelSlot: `<em>Label slot content</em>`,
+}
+LabelSlotComboBox.storyName = 'Label Slot'
+
+export const NoResultsSlotComboBox = DefaultTemplate.bind({})
+NoResultsSlotComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  noResultsSlot: `<em>Sorry, didn't find that.</em>`,
+}
+NoResultsSlotComboBox.storyName = 'No Results Slot'
+
+export const AssistiveHintSlotComboBox = DefaultTemplate.bind({})
+AssistiveHintSlotComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  assistiveHintSlot: `<em>Some custom hint text for screenreaders.</em>`,
+}
+AssistiveHintSlotComboBox.storyName = 'Assistive Hint Slot'
+
+export const CustomClassesComboBox = DefaultTemplate.bind({})
+CustomClassesComboBox.args = {
+  ...defaultProps,
+  label: 'Fruit',
+  options: testData,
+  hintSlot: 'Choose wisely',
+  customClasses: {
+    component: ['test-component-class'],
+    label: ['test-label-class'],
+    input: ['test-input-class'],
+    list: ['test-list-class'],
+  },
+}
+CustomClassesComboBox.storyName = 'Custom CSS Classes'