@gitlab/ui 32.43.3 → 32.46.0

package/src/components/base/form/form_input/form_input.stories.js

@@ -1,13 +1,7 @@
-import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormInput } from '../../../../../index';
 import { formInputSizes } from '../../../../utils/constants';
 import readme from './form_input.md';
 
-const components = {
-  GlFormInput,
-};
-
 const template = `
   <gl-form-input
     type="text"
@@ -16,51 +10,65 @@ const template = `
     :size="size"
   />`;
 
-function generateProps({
+const generateProps = ({
   size = GlFormInput.props.size.default,
   value = '',
   disabled = false,
-} = {}) {
-  return {
-    size: {
-      type: String,
-      default: select('size', formInputSizes, size),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
-    },
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-  };
-}
+} = {}) => ({
+  size,
+  value,
+  disabled,
+});
+
+const Template = (args) => ({
+  components: { GlFormInput },
+  props: Object.keys(args),
+  template,
+});
 
-documentedStoriesOf('base/form/form-input', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }))
-  .add('disabled', () => ({
-    components,
-    props: generateProps({ value: 'some text', disabled: true }),
-    template,
-  }))
-  .add('sizes', () => ({
-    components,
-    data: () => ({
-      formInputSizes,
-    }),
-    template: `
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Disabled = Template.bind({});
+Disabled.args = generateProps({ value: 'some text', disabled: true });
+
+export const Sizes = (args, { argTypes }) => ({
+  components: { GlFormInput },
+  props: Object.keys(argTypes),
+  data: () => ({
+    formInputSizes,
+  }),
+  template: `
       <div>
         <gl-form-input
           v-for="(size, name) in formInputSizes"
+          :key="size"
           :size="size"
           :value="name"
         />
       </div>
     `,
-  }));
+});
+Sizes.args = {};
+
+export default {
+  title: 'base/form/form-input',
+  component: GlFormInput,
+  parameters: {
+    bootstrapComponent: 'b-form-input',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      options: formInputSizes,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

package/src/components/base/form/form_input/form_input.vue

@@ -2,18 +2,22 @@
 import { BFormInput } from 'bootstrap-vue';
 import { formInputSizes } from '../../../../utils/constants';
 
-const model = {
-  prop: 'value',
-  event: 'input',
-};
+const MODEL_PROP = 'value';
+const MODEL_EVENT = 'input';
 
 export default {
   components: {
     BFormInput,
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: MODEL_PROP,
+    event: MODEL_EVENT,
+  },
   props: {
+    /**
+     * Maximum width of the input
+     */
     size: {
       type: String,
       required: false,
@@ -33,10 +37,23 @@ export default {
         // Swap purpose of input and update events from underlying BFormInput.
         // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
         input: (...args) => {
+          /**
+           * Emitted to update the v-model
+           *
+           * @event update
+           * @property {string} value new value
+           */
           this.$emit('update', ...args);
         },
         update: (...args) => {
-          this.$emit(model.event, ...args);
+          /**
+           * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
+           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
+           *
+           * @event input
+           * @property {string} value new value
+           */
+          this.$emit(MODEL_EVENT, ...args);
         },
       };
     },

package/src/components/base/form/form_input_group/form_input_group.spec.js

@@ -15,7 +15,7 @@ describe('Input Group', () => {
   it('renders without errors', () => {
     createWrapper();
     expect(wrapper.findComponent(BInputGroup).exists()).toBe(true);
-    expect(global.console.error).not.toHaveBeenCalled();
+    expect(wrapper).not.toHaveLoggedVueErrors();
   });
 
   it('renders prepend and append texts properly in the slots', () => {
@@ -87,8 +87,6 @@ describe('Input Group', () => {
       });
 
       expect(global.console).toHaveLoggedVueErrors();
-
-      global.console.error.mockReset();
     });
 
     it('are rendered when supplied', () => {

package/src/components/base/form/form_text/form_text.documentation.js

@@ -1,9 +1,7 @@
-import examples from './examples';
 import * as description from './form_text.md';
 
 export default {
   description,
-  examples,
   bootstrapComponent: 'b-form-text',
   propsInfo: {},
 };

package/src/components/base/form/form_text/form_text.md

@@ -1,6 +1,4 @@
-# FormText
-
-<!-- STORY -->
+# Usage
 
 The component used to render form group descriptions. Useful for when you need
 to add additional form text elements to a form group.

package/src/components/base/form/form_text/form_text.stories.js

@@ -1,16 +1,28 @@
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import readme from './form_text.md';
 import GlFormText from './form_text.vue';
 
-const components = {
-  GlFormText,
-};
-
-documentedStoriesOf('base/form/form-text', readme).add('default', () => ({
-  components,
+const Template = (args) => ({
+  components: { GlFormText },
+  props: Object.keys(args),
   template: `
       <div class="gl-form-group">
         <gl-form-text>Some form text</gl-form-text>
       </div>
     `,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export default {
+  title: 'base/form/form-text',
+  component: GlFormText,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/icon/icon.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Icon from './icon.vue';
 import { iconSizeOptions } from '~/utils/constants';
 
@@ -6,8 +6,6 @@ const ICONS_PATH = '/path/to/icons.svg';
 const TEST_SIZE = 8;
 const TEST_NAME = 'check-circle';
 
-const localVue = createLocalVue();
-
 jest.mock('@gitlab/svgs/dist/icons.svg', () => '/path/to/icons.svg');
 
 describe('Icon component', () => {
@@ -21,7 +19,6 @@ describe('Icon component', () => {
         name: TEST_NAME,
         ...props,
       },
-      localVue,
     });
   };
 

package/src/components/base/infinite_scroll/infinite_scroll.spec.js

@@ -1,11 +1,9 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import throttle from 'lodash/throttle';
 import InfiniteScroll, { adjustScrollGap } from './infinite_scroll.vue';
 
 jest.mock('lodash/throttle', () => jest.fn((fn) => fn));
 
-const localVue = createLocalVue();
-
 const INITIAL_HEIGHT = 500;
 const INITIAL_SCROLL_TOP = 0;
 const ADJUST_SCROLL_GAP = adjustScrollGap;
@@ -25,7 +23,6 @@ describe('Infinite Scroll component', () => {
 
   const createComponent = ({ propsData = props, listeners = {} } = {}) => {
     wrapper = shallowMount(InfiniteScroll, {
-      localVue,
       propsData,
       listeners,
       attachTo: document.body,

package/src/components/base/label/label.documentation.js

@@ -1,16 +1,6 @@
-import examples from './examples';
+import description from './label.vue';
 
 export default {
   followsDesignSystem: true,
-  examples,
-  events: [
-    {
-      event: 'click',
-      description: 'Emitted when label is clicked',
-    },
-    {
-      event: 'close',
-      description: 'Emitted when x is clicked',
-    },
-  ],
+  description,
 };

package/src/components/base/label/label.md

@@ -1,15 +1,10 @@
-# Label
-
-<!-- STORY -->
-## Usage
-
 Labels are editable objects that allow users to manually categorize other objects, like issues,
 merge requests, and epics. They have a name, description, and a customizable background color.
 They provide a quick way to recognize which categories the labeled object belongs to.
 
 ## Using the component
 
-~~~js
+```js
 <gl-label
   background-color="#D9C2EE"
   title="Label content"
@@ -18,4 +13,4 @@ They provide a quick way to recognize which categories the labeled object belong
   tooltipPlacement="top"
   target="http://some.url"
 />
-~~~
+```

package/src/components/base/label/label.stories.js

@@ -1,110 +1,84 @@
-import { withKnobs, text, color, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlLabel } from '../../../../index';
 import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './label.md';
 
-const components = {
-  GlLabel,
-};
+const template = `
+  <div class="gl-display-flex">
+    <gl-label
+      :background-color="backgroundColor"
+      :size="size"
+      :title="title"
+      :description="description"
+      :tooltip-placement="tooltipPlacement"
+      :target="target"
+      :scoped="scoped"
+      :show-close-button="showCloseButton"
+      :disabled="disabled"
+    />
+  </div>`;
+
+const Template = (args, { argTypes }) => ({
+  components: { GlLabel },
+  props: Object.keys(argTypes),
+  template,
+});
 
 const generateProps = ({
   title = 'Label title',
   size = labelSizeOptions.default,
   tooltipPlacement = tooltipPlacements.top,
   scoped = false,
+  description = '',
+  target = '#',
+  backgroundColor = '#D9C2EE',
   showCloseButton = false,
-} = {}) => {
-  const props = {
-    backgroundColor: {
-      default: color('Background color', '#D9C2EE'),
-    },
-    title: {
-      default: text('Label title', title),
+  disabled = false,
+} = {}) => ({
+  backgroundColor,
+  title,
+  description,
+  size,
+  tooltipPlacement,
+  target,
+  scoped,
+  showCloseButton,
+  disabled,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Scoped = Template.bind({});
+Scoped.args = generateProps({ title: 'scoped::label', scoped: true });
+
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = generateProps({ showCloseButton: true });
+
+export default {
+  title: 'base/label',
+  component: GlLabel,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    description: {
-      default: text('Label description', ''),
+  },
+  argTypes: {
+    backgroundColor: {
+      control: {
+        type: 'color',
+      },
     },
     size: {
-      type: String,
-      default: select('Size', labelSizeOptions, size),
+      options: labelSizeOptions,
     },
     tooltipPlacement: {
-      type: String,
-      default: select('Tooltip Placement', tooltipPlacements, tooltipPlacement),
-    },
-    target: {
-      default: text('Link to label target', '#'),
-    },
-    scoped: {
-      default: boolean('Label is scoped', scoped),
-    },
-    showCloseButton: {
-      default: boolean('Show close button', showCloseButton),
+      options: tooltipPlacements,
+      control: {
+        type: 'select',
+      },
     },
-    disabled: {
-      default: boolean('Close button disabled', false),
-    },
-  };
-
-  return props;
+  },
 };
-
-documentedStoriesOf('base/label', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>`,
-  }))
-  .add('scoped', () => ({
-    props: generateProps({ title: 'scoped::label', scoped: true }),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>
-    `,
-  }))
-  .add('with close button', () => ({
-    props: generateProps({ showCloseButton: true }),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>
-    `,
-  }));

package/src/components/base/label/label.vue

@@ -96,6 +96,26 @@ export default {
       this.splitScopedLabelIndex = this.title.lastIndexOf('::');
     },
   },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    },
+  },
 };
 </script>
 
@@ -106,7 +126,7 @@ export default {
     :class="cssClasses"
     :style="cssVariables"
     v-bind="$attrs"
-    @click="$emit('click', $event)"
+    @click="onClick"
   >
     <gl-link :href="target" class="gl-label-link">
       <span class="gl-label-text">
@@ -122,7 +142,7 @@ export default {
       label="Remove label"
       variant="reset"
       :disabled="disabled"
-      @click="$emit('close', $event)"
+      @click="onClose"
     />
     <gl-tooltip
       v-if="description"

package/src/components/base/modal/modal.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { BModal } from 'bootstrap-vue';
 import { merge } from 'lodash';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
@@ -6,23 +6,20 @@ import Button from '../button/button.vue';
 import Modal from './modal.vue';
 import { modalButtonDefaults } from '~/utils/constants';
 
-const localVue = createLocalVue();
-const BModalStub = localVue.extend(
-  merge({}, BModal.options, {
-    methods: {
-      onCancel: jest.fn(function cancel() {
-        this.$emit('cancel');
-      }),
-      onClose: jest.fn(),
-      onOk: jest.fn(function ok() {
-        this.$emit('ok');
-      }),
-    },
-    render(h) {
-      return h('div', Object.values(this.$slots));
-    },
-  })
-);
+const BModalStub = merge({}, BModal.options, {
+  methods: {
+    onCancel: jest.fn(function cancel() {
+      this.$emit('cancel');
+    }),
+    onClose: jest.fn(),
+    onOk: jest.fn(function ok() {
+      this.$emit('ok');
+    }),
+  },
+  render(h) {
+    return h('div', Object.values(this.$slots));
+  },
+});
 
 describe('Modal component', () => {
   let wrapperListeners;
@@ -45,7 +42,6 @@ describe('Modal component', () => {
     };
 
     wrapper = shallowMount(Modal, {
-      localVue,
       propsData: {
         modalId: 'modal-id',
         ...props,
@@ -158,7 +154,7 @@ describe('Modal component', () => {
       });
 
       it('should emit canceled event', () => {
-        expect(BModalStub.options.methods.onCancel).toHaveBeenCalledTimes(1);
+        expect(BModalStub.methods.onCancel).toHaveBeenCalledTimes(1);
         expect(wrapperListeners.canceled).toHaveBeenCalledTimes(1);
       });
     });
@@ -169,7 +165,7 @@ describe('Modal component', () => {
       });
 
       it('should emit primary event', () => {
-        expect(BModalStub.options.methods.onOk).toHaveBeenCalledTimes(1);
+        expect(BModalStub.methods.onOk).toHaveBeenCalledTimes(1);
         expect(wrapperListeners.primary).toHaveBeenCalledTimes(1);
       });
     });
@@ -184,7 +180,7 @@ describe('Modal component', () => {
       });
 
       it('should close modal', () => {
-        expect(BModalStub.options.methods.onClose).toHaveBeenCalledTimes(1);
+        expect(BModalStub.methods.onClose).toHaveBeenCalledTimes(1);
       });
     });
 
@@ -198,7 +194,7 @@ describe('Modal component', () => {
       });
 
       it('should close modal', () => {
-        expect(BModalStub.options.methods.onClose).not.toHaveBeenCalled();
+        expect(BModalStub.methods.onClose).not.toHaveBeenCalled();
       });
     });
   });