@gitlab/ui 32.43.3 → 32.44.0

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

@@ -1,37 +1,6 @@
-import examples from './examples/form_input';
 import description from './form_input.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-input',
   followsDesignSystem: true,
-  propsInfo: {
-    size: {
-      additionalInfo: 'Maximum width of the input',
-      enum: 'formInputSizes',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: 'Emitted to update the v-model',
-    },
-    {
-      event: 'update',
-      args: [
-        {
-          arg: 'value',
-          description: '(String)',
-        },
-      ],
-      description: `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.`,
-    },
-  ],
 };

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

@@ -1,3 +1 @@
-# Form Input
-
 General user input to be used in forms.

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/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();
       });
     });
   });

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -37,7 +37,7 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -114,7 +114,7 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -217,7 +217,7 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -385,7 +385,7 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -592,7 +592,7 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -712,7 +712,7 @@ exports[`Paginated List Search states renders the list filtered by search result
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -832,7 +832,7 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -883,7 +883,7 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -934,7 +934,7 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"
@@ -985,7 +985,7 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
     labelfirstpage="Go to first page"
     labellastpage="Go to last page"
     labelnextpage="Go to next page"
-    labelpage="page => \`Go to page \${page}\`"
+    labelpage="[Function]"
     labelprevpage="Go to previous page"
     limits="[object Object]"
     nexttext="Next"

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

@@ -1,106 +1,6 @@
-import examples from './examples';
 import description from './pagination.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    perPage: {
-      additionalInfo: 'Number of items per page',
-    },
-    totalItems: {
-      additionalInfo: 'Total number of items',
-    },
-    limits: {
-      additionalInfo: 'The object must contain the xs, sm, md and default keys',
-    },
-    linkGen: {
-      additionalInfo:
-        'A function that receives the page number and that returns a string representing the page URL',
-    },
-    prevPage: {
-      additionalInfo:
-        'When using the compact pagination, use this prop to pass the previous page number',
-    },
-    prevText: {
-      additionalInfo: 'Text for the previous button (overridden by "previous" slot)',
-    },
-    nextPage: {
-      additionalInfo:
-        'When using the compact pagination, use this prop to pass the next page number',
-    },
-    nextText: {
-      additionalInfo: 'Text for the next button (overridden by "next" slot)',
-    },
-    ellipsisText: {
-      additionalInfo:
-        'Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)',
-    },
-    labelFirstPage: {
-      additionalInfo: 'aria-label for the first page item',
-    },
-    labelPrevPage: {
-      additionalInfo: 'aria-label for the previous page item',
-    },
-    labelNextPage: {
-      additionalInfo: 'aria-label for the next page item',
-    },
-    labelLastPage: {
-      additionalInfo: 'aria-label for the last page item',
-    },
-    labelPage: {
-      additionalInfo:
-        'aria-label getter for numbered page items, defaults to "Go to page <page_number>"',
-    },
-    align: {
-      additionalInfo:
-        'Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      description: 'Emitted when the page changes',
-      args: [
-        {
-          arg: 'value',
-          description: 'The page that just got loaded',
-        },
-      ],
-    },
-    {
-      event: 'next',
-      description: 'Emitted when the "next" button is clicked',
-    },
-    {
-      event: 'previous',
-      description: 'Emitted when the "previous" button is clicked',
-    },
-  ],
-  slots: [
-    {
-      name: 'previous',
-      description: `Content for the "previous" button. Overrides the "prevText" prop.`,
-      scopedProps: `{ active: boolean, disabled: boolean, page: number }`,
-    },
-    {
-      name: 'next',
-      description: `Content for the "next" button. Overrides the "nextText" prop.`,
-      scopedProps: `{ active: boolean, disabled: boolean, page: number }`,
-    },
-    {
-      name: 'page-number',
-      description: `Content for page number buttons.`,
-      scopedProps: `{ active: boolean, disabled: boolean, page: number }`,
-    },
-    {
-      name: 'ellipsis-left',
-      description: `Content for the left ellipsis. Overrides the "ellipsisText" prop.`,
-    },
-    {
-      name: 'ellipsis-right',
-      description: `Content for the right ellipsis. Overrides the "ellipsisText" prop.`,
-    },
-  ],
 };

package/src/components/base/pagination/pagination.md

@@ -1,18 +1,14 @@
-# Pagination
-
-<!-- STORY -->
-
 ## Current page
 
 The current page's value should be bound using `v-model`, e.g.:
 
 ```html
 <script>
-export default {
-  data: () => ({
-    page: 2,
-  }),
-};
+  export default {
+    data: () => ({
+      page: 2,
+    }),
+  };
 </script>
 
 <template>

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

@@ -1,12 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import debounce from 'lodash/debounce';
 import Pagination from './pagination.vue';
 import { breakpoints } from '~/utils/breakpoints';
 
 jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
 
-const localVue = createLocalVue();
-
 const expectClassActive = expect.arrayContaining(['active']);
 const mockResizeWidth = (width) => {
   window.innerWidth = width;
@@ -29,7 +27,6 @@ describe('pagination component', () => {
         itemsPerPage: 20,
         ...props,
       },
-      localVue,
       ...options,
     });
   };