feat: complete CvComboBox

.storybook/main.js

@@ -2,7 +2,11 @@ const path = require('path');
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+  ],
   core: {
     builder: 'webpack5',
   },

.yarnrc.yml

@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

package.json

@@ -44,12 +44,13 @@
     "@babel/eslint-parser": "^7.17.0",
     "@commitlint/cli": "^16.2.4",
     "@commitlint/config-conventional": "^16.2.4",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@storybook/vue3": "^6.4.22",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/vue3": "^6.5.10",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/user-event": "^14.2.0",
     "@testing-library/vue": "^6",
@@ -74,7 +75,7 @@
     "pinst": "^3.0.0",
     "postcss": "^8.4.13",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "sass": "^1.51.0",

src/components/CvCheckbox/CvCheckbox.stories.js

@@ -74,8 +74,10 @@ Default.parameters = storyParametersObject(
   template,
   Default.args
 );
-let modelValue = ref(false);
-const template2 = `<div>
+
+// v-model story
+const modelValue = ref(false);
+const templateVModel = `<div>
 <cv-checkbox @change="onChange" v-bind='args' v-model="modelValue">
 </cv-checkbox>
 <div style="margin-top:1rem; background-color: #888888;  padding:1rem"><div style="font-size: 150%">Sample interaction</div>
@@ -86,24 +88,24 @@ const template2 = `<div>
 </div>
   `;
 
-const Template2 = args => {
+const TemplateVModel = args => {
   return {
     components: { CvCheckbox },
     setup: () => ({
       args,
       modelValue,
       onChange: action('change'),
     }),
-    template: template2,
+    template: templateVModel,
   };
 };
-export const vModel = Template2.bind({});
+export const vModel = TemplateVModel.bind({});
 vModel.args = {
   label: 'checkbox',
   value: 'check-1',
 };
 vModel.parameters = storyParametersObject(
   vModel.parameters,
-  template2,
+  templateVModel,
   vModel.args
 );

src/components/CvComboBox/CvComboBox.stories.js

@@ -0,0 +1,171 @@
+import { sbCompPrefix, storyParametersObject } from '@/global/storybook-utils';
+
+import { CvComboBox } from '.';
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+
+const fruits = [
+  'Apple',
+  'Banana',
+  'Cherry',
+  'Date',
+  'Elderberry',
+  'Fig',
+  'Grape',
+  'Kiwi Fruit',
+  'Lemon',
+  'Lime',
+  'Mango',
+  'Orange',
+  'Passion Fruit',
+  'Raisin',
+  'Satsuma',
+  'Tangerine',
+  'Ugli Fruit',
+  'Watermelon',
+].map(item => {
+  const nameVal = item.replace(/\W/, '_').toLowerCase();
+  return {
+    name: nameVal,
+    label: item,
+    value: `val-${nameVal}`,
+  };
+});
+const initArgs = {
+  title: 'Combo Box title',
+  options: fruits,
+  helperText: 'Combobox helper text',
+};
+
+export default {
+  title: `${sbCompPrefix}/CvComboBox`,
+  component: CvComboBox,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'aria-input-field-name',
+            selector: '.bx--combo-box',
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  },
+  argTypes: {
+    title: { type: String, description: 'Combo Box title' },
+    options: { type: Array, description: 'Combo Box options' },
+  },
+};
+
+const template = `
+<div style='width: 18.75rem'>
+<cv-combo-box aria-label='Choose a fruit' @change='onChange' @onFilter='onFilter' v-bind='args' >
+</cv-combo-box>
+</div>
+`;
+const Template = args => {
+  return {
+    components: { CvComboBox },
+    setup: () => ({
+      args,
+      onChange: action('change'),
+      onFilter: action('filter'),
+    }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = initArgs;
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+/**
+ * Slots
+ */
+const use_invalidMessageSlot = ref(false);
+const use_helperTextSlot = ref(false);
+const templateSlots = `
+<div style='width: 18.75rem'>
+<cv-combo-box aria-label='Choose a fruit' @change='onChange' @onFilter='onFilter' v-bind='args' >
+<template v-if="use_helperTextSlot" #helper-text>Some helpful text</template>
+<template v-if="use_invalidMessageSlot" #invalid-message>Invalid message text</template>
+</cv-combo-box>
+</div>
+`;
+const TemplateSlots = args => {
+  return {
+    components: { CvComboBox },
+    setup: () => ({
+      args,
+      use_helperTextSlot: args.use_helperTextSlot,
+      use_invalidMessageSlot: args.use_invalidMessageSlot,
+      onChange: action('change'),
+      onFilter: action('filter'),
+    }),
+    template: templateSlots,
+  };
+};
+export const slots = TemplateSlots.bind({});
+slots.args = {
+  use_helperTextSlot: use_helperTextSlot.value,
+  use_invalidMessageSlot: use_invalidMessageSlot.value,
+  title: 'Combo Box title',
+  options: fruits,
+};
+slots.parameters = storyParametersObject(
+  slots.parameters,
+  templateSlots,
+  slots.args
+);
+
+/**
+ * v-model story
+ */
+const modelValue = ref('val-fig');
+const templateVModel = `
+<div style='width: 50%'>
+  <div style='width: 18.75rem'>
+    <cv-combo-box aria-label='Choose a fruit'  @change='onChange' @onFilter='onFilter' v-bind='args' v-model="modelValue">
+    </cv-combo-box>
+  </div>
+  <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
+    <div style="font-size: 150%;">Sample interaction</div>
+    <label for="fruits" style='margin: 0.5rem'>V-model:</label>
+    <select style='margin: 0.5rem' name="fruits" id="fruits" @change="(ev) => {modelValue = ev.currentTarget.value}">
+      <option value="val-elderberry">Elderberry</option>
+      <option value="val-fig">Fig</option>
+      <option value="val-grape">Grape</option>
+      <option value="val-apple">Apple</option>
+    </select>
+    <div style='margin: 0.5rem'>Value: <span style="font-weight: bold;">{{modelValue}}</span></div>
+  </div>
+</div>
+  `;
+
+const TemplateVModel = args => {
+  return {
+    components: { CvComboBox },
+    setup: () => ({
+      args,
+      modelValue,
+      onChange: action('change'),
+      onFilter: action('filter'),
+    }),
+    template: templateVModel,
+  };
+};
+export const vModel = TemplateVModel.bind({});
+vModel.args = initArgs;
+vModel.parameters = storyParametersObject(
+  vModel.parameters,
+  templateVModel,
+  vModel.args
+);