feat: v3 improve story source for CvButton (carbon-design-system#1128)

* feat: v3 improve story source for CvButton * chore: storybook package bump Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
lee-chase · Feb 21, 2021 · 2805cbb · 2805cbb
1 parent e05ca9a
commit 2805cbb
Show file tree

Hide file tree

Showing 14 changed files with 341 additions and 72 deletions.
diff --git a/.yarn-offline-mirror/storybook-6.2.0-alpha.29.tgz b/.yarn-offline-mirror/storybook-6.2.0-alpha.29.tgz
diff --git a/packages/v3/.storybook/_styles.scss b/packages/v3/.storybook/_styles.scss
@@ -41,5 +41,5 @@ $carbon--theme: $carbon--theme--white;
 @import '~carbon-components/scss/globals/scss/typography';
 @import '~carbon-components/scss/globals/scss/vars';
 
-// @import '~carbon-components/css/carbon-components.min.css';
-@import '~carbon-components/scss/globals/scss/styles';
+@import '~carbon-components/css/carbon-components.min.css';
+// @import '~carbon-components/scss/globals/scss/styles';
diff --git a/packages/v3/.storybook/preview.js b/packages/v3/.storybook/preview.js
@@ -1,6 +1,7 @@
 // export const parameters = {
-// does not really work for
-//   actions: { argTypesRegex: "^on[A-Z].*" },
-// }
+//   does not really work for Vue as it adds onClick as a property
+//   actions: { argTypesRegex: '^on[A-Z].*' },
+//   actions: { argTypesRegex: '^(v-on:)|(@)[a-zA-Z].*' },
+// };
 
 import './_styles.scss';
diff --git a/packages/v3/package.json b/packages/v3/package.json
@@ -24,7 +24,6 @@
     "carbon-components": "^10.28.0",
     "core-js": "^3.6.5",
     "flatpickr": "^4.6.9",
-    "storybook": "^6.2.0-alpha.24",
     "stylelint-config-property-sort-order-smacss": "^7.0.0",
     "stylelint-config-sass-guidelines": "^7.1.0",
     "vue": "^3.0.0"
@@ -56,6 +55,7 @@
     "postcss-loader": "^5.0.0",
     "prettier": "^1.19.1",
     "sass-loader": "^8.0.2",
+    "storybook": "^6.2.0-alpha.29",
     "typescript": "~3.9.3",
     "vue-jest": "^5.0.0-0",
     "vue-loader": "^16.0.0"

diff --git a/packages/v3/src/components/CvButton/CvButton.stories.js b/packages/v3/src/components/CvButton/CvButton.stories.js
@@ -1,9 +1,10 @@
-import { shallowRef } from '@vue/reactivity';
-
+import { action } from '@storybook/addon-actions';
 import { CvButton } from './';
 import { buttonKinds, buttonSizes } from './consts.js';
-import { storybookControlsFromProps } from '../../global/storybook-utils';
-
+import {
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
 import { props as commonCvButtonProps } from './CvButtonCommon';
 import {
   Bee20,
@@ -32,62 +33,77 @@ export default {
     kind: { control: { type: 'select', options: buttonKinds } },
     size: { control: { type: 'select', options: buttonSizes } },
   },
-  parameters: {
-    actions: {
-      handles: ['mouseover', 'mousedown .bx--btn', 'click'],
-    },
-  },
 };
 
+const template = `<cv-button @click="onClick" v-bind="newArgs">{{defaultSlot}}</cv-button>`;
 const Template = (args, { argTypes }) => {
+  const newArgs = { ...args, icon: icons[args.icon] };
   return {
     props: Object.keys(argTypes),
     components: { CvButton },
-    template: `<cv-button :data-test="label" v-bind="$props" :icon="icon">{{label}}</cv-button>`,
-    setup(props) {
-      const icon = shallowRef(icons[props.icon]);
-
-      if (icon.value === undefined) {
-        // assigning an icon seem sto need a kick
-        setTimeout(() => {
-          console.log(props.icon);
-          icon.value === icons[props.icon];
-          console.dir(icon.value);
-        }, 1);
-      }
-
-      return { icon };
+    setup() {
+      return { newArgs, onClick: action('click') };
     },
+    template,
   };
 };
 
 export const Primary = Template.bind({});
 Primary.args = {
   kind: 'primary',
-  label: 'primary',
-  banana: 'banana',
+  defaultSlot: 'Primary',
 };
+Primary.parameters = storyParametersObject(
+  Primary.parameters,
+  template,
+  Primary.args,
+  'v-bind="newArgs"'
+);
 
 export const Secondary = Template.bind({});
 Secondary.args = {
   kind: 'secondary',
-  label: 'Secondary',
+  defaultSlot: 'Secondary',
 };
+Secondary.parameters = storyParametersObject(
+  Secondary.parameters,
+  template,
+  Secondary.args,
+  'v-bind="newArgs"'
+);
 
 export const Field = Template.bind({});
 Field.args = {
-  label: 'Field size',
+  defaultSlot: 'Field size',
   size: 'field',
 };
+Field.parameters = storyParametersObject(
+  Field.parameters,
+  template,
+  Field.args,
+  'v-bind="newArgs"'
+);
 
 export const Small = Template.bind({});
 Small.args = {
-  label: 'sm',
+  defaultSlot: 'sm',
   size: 'sm',
 };
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args,
+  'v-bind="newArgs"'
+);
 
 export const Large = Template.bind({});
 Large.args = {
-  label: 'Large size',
-  size: 'large',
+  defaultSlot: 'Large size',
+  size: 'lg',
 };
+Large.parameters = storyParametersObject(
+  Large.parameters,
+  template,
+  Large.args,
+  'v-bind="newArgs"'
+);
diff --git a/packages/v3/src/components/CvButton/CvButtonSet.stories.js b/packages/v3/src/components/CvButton/CvButtonSet.stories.js
@@ -1,21 +1,32 @@
 import { CvButtonSet, CvButton } from './';
 
+import { storyParametersObject } from '../../global/storybook-utils';
+
 export default {
   title: 'Components/CvButtonSet',
   component: CvButtonSet,
 };
 
+const template = `
+<cv-button-set v-bind="$props">
+  <cv-button>One</cv-button>
+  <cv-button kind="secondary">Two</cv-button>
+  <cv-button kind="danger">Three</cv-button>
+</cv-button-set>`;
 const Template = (args, { argTypes }) => {
   return {
     props: Object.keys(argTypes),
     components: { CvButtonSet, CvButton },
-    template: `
-      <cv-button-set v-bind="$props">
-        <cv-button>One</cv-button>
-        <cv-button kind="secondary">Two</cv-button>
-        <cv-button kind="danger">Three</cv-button>
-      </cv-button-set>`,
+    template,
+    setup() {
+      return { args };
+    },
   };
 };
 
 export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
diff --git a/packages/v3/src/components/CvButton/CvIconButton.stories.js b/packages/v3/src/components/CvButton/CvIconButton.stories.js
@@ -1,7 +1,10 @@
-import { computed } from 'vue';
+import { action } from '@storybook/addon-actions';
 import { CvIconButton } from './';
 import { buttonKinds, buttonSizes } from './consts.js';
-import { storybookControlsFromProps } from '../../global/storybook-utils';
+import {
+  storybookControlsFromProps,
+  storyParametersObject,
+} from '../../global/storybook-utils';
 
 import { props as commonCvButtonProps } from './CvButtonCommon';
 import {
@@ -45,21 +48,17 @@ export default {
      */
     size: { control: { type: 'select', options: buttonSizes } },
   },
-  parameters: {
-    actions: {
-      handles: ['mouseover', 'mousedown .bx--btn', 'click'],
-    },
-  },
 };
 
+const template = `<cv-icon-button @click="onClick" v-bind="newArgs" />`;
 const Template = (args, { argTypes }) => {
+  const newArgs = { ...args, icon: icons[args.icon] };
   return {
     props: Object.keys(argTypes),
     components: { CvIconButton },
-    template: `<cv-icon-button v-bind="$props" :icon="theIcon"/>`,
-    setup(props) {
-      const theIcon = computed(() => icons[props.icon]);
-      return { theIcon };
+    template,
+    setup() {
+      return { newArgs, onClick: action('click') };
     },
   };
 };
@@ -70,31 +69,61 @@ Primary.args = {
   label: 'primary',
   icon: 'Bee20',
 };
+Primary.parameters = storyParametersObject(
+  Primary.parameters,
+  template,
+  Primary.args,
+  'v-bind="newArgs"'
+);
 
 export const Secondary = Template.bind({});
 Secondary.args = {
   kind: 'secondary',
   label: 'Secondary',
   icon: 'Bee20',
 };
+Secondary.parameters = storyParametersObject(
+  Secondary.parameters,
+  template,
+  Secondary.args,
+  'v-bind="newArgs"'
+);
 
 export const Field = Template.bind({});
 Field.args = {
   label: 'Field size',
   size: 'field',
   icon: 'Bee20',
 };
+Field.parameters = storyParametersObject(
+  Field.parameters,
+  template,
+  Field.args,
+  'v-bind="newArgs"'
+);
 
 export const Small = Template.bind({});
 Small.args = {
   label: 'sm',
   size: 'sm',
   icon: 'Bee20',
 };
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args,
+  'v-bind="newArgs"'
+);
 
 export const Large = Template.bind({});
 Large.args = {
   label: 'Large size',
   size: 'lg',
   icon: 'Bee20',
 };
+Large.parameters = storyParametersObject(
+  Large.parameters,
+  template,
+  Large.args,
+  'v-bind="newArgs"'
+);
diff --git a/packages/v3/src/components/CvSvg/_CvSvg.vue b/packages/v3/src/components/CvSvg/_CvSvg.vue
@@ -11,7 +11,7 @@ export default {
         if (!val || typeof val === 'string') {
           return true;
         }
-        const result = val.render !== undefined;
+        const result = val.render !== undefined || val.setup !== undefined;
         if (!result) {
           console.error(
             'Expected a Vue icon component, SVG, SVG Symbol or SVG file'

diff --git a/.../global/__tests__/storybook-utils.spec.js → ...ils/__tests__/controls-from-props.spec.js b/.../global/__tests__/storybook-utils.spec.js → ...ils/__tests__/controls-from-props.spec.js
@@ -1,4 +1,4 @@
-import { storybookControlsFromProps } from '../storybook-utils';
+import { storybookControlsFromProps } from '..';
 
 const props = {
   boolean_0: true,
@@ -40,7 +40,7 @@ const expectedResult = {
   errNotSure2: { control: { type: 'text', default: '' } },
 };
 
-describe('global/storybook-utils', () => {
+describe('global/storybook-utils/controls-from-props', () => {
   it('Should convert common props to storybook control types', () => {
     const controls = storybookControlsFromProps(props);