@gitlab/ui 32.43.3 → 32.44.0

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

@@ -1,41 +1,19 @@
-import { withKnobs, number, text, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { alignOptions } from '../../../utils/constants';
 import readme from './pagination.md';
 import GlPagination from './pagination.vue';
 
-const components = {
-  GlPagination,
-};
-
-function generateBaseProps() {
-  return {
-    prevText: {
-      default: text('Prev button text', 'Prev'),
-    },
-    nextText: {
-      default: text('Next button text', 'Next'),
-    },
-    disabled: {
-      default: boolean('Disabled', false),
-    },
-  };
-}
+const generateBaseProps = ({ prevText = 'Prev', nextText = 'Next', disabled = false } = {}) => ({
+  prevText,
+  nextText,
+  disabled,
+});
 
-function generateFullProps({ page = 3, perPage = 10, totalItems = 200 } = {}) {
-  return {
-    initialPage: {
-      default: number('current page', page),
-    },
-    perPage: {
-      default: number('per page', perPage),
-    },
-    totalItems: {
-      default: number('total items', totalItems),
-    },
-    ...generateBaseProps(),
-  };
-}
+const generateFullProps = ({ page = 3, perPage = 10, totalItems = 200 } = {}) => ({
+  initialPage: page,
+  perPage,
+  totalItems,
+  ...generateBaseProps(),
+});
 
 const defaults = {
   data() {
@@ -51,13 +29,10 @@ const defaults = {
   },
 };
 
-documentedStoriesOf('base/pagination', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateFullProps(),
-    ...defaults,
-    components,
-    template: `<gl-pagination
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...defaults,
+  template: `<gl-pagination
       v-model="page"
       :per-page="perPage"
       :total-items="totalItems"
@@ -65,84 +40,101 @@ documentedStoriesOf('base/pagination', readme)
       :next-text="nextText"
       :disabled="disabled"
       />`,
-  }))
-  .add('compact', () => ({
-    ...defaults,
-    data() {
-      return {
-        page: 1,
-        alignOptions,
-      };
+});
+Default.args = generateFullProps();
+
+export const Compact = () => ({
+  ...defaults,
+  props: generateFullProps(),
+  data() {
+    return {
+      page: 1,
+      alignOptions,
+    };
+  },
+  computed: {
+    prevPage() {
+      return Math.max(this.page - 1, 0);
     },
-    props: generateBaseProps(),
-    components,
-    computed: {
-      prevPage() {
-        return Math.max(this.page - 1, 0);
-      },
-      nextPage() {
-        const nextPage = this.page + 1;
-        return nextPage > 3 ? 0 : nextPage;
-      },
+    nextPage() {
+      const nextPage = this.page + 1;
+      return nextPage > 3 ? 0 : nextPage;
     },
-    template: `
-    <div class="text-center gl-font-base">
-      <gl-pagination
-        v-model="page"
-        :prev-page="prevPage"
-        :next-page="nextPage"
-        :prev-text="prevText"
-        :next-text="nextText"
-        :disabled="disabled"
-        :align="alignOptions.center"
-      />
-      Page {{ page }} of 3
-    </div>`,
-  }))
-  .add('link based', () => ({
-    props: generateFullProps(),
-    ...defaults,
-    components,
-    methods: {
-      linkGen(page) {
-        return `/page/${page}`;
+  },
+  template: `
+      <div class="text-center gl-font-base">
+        <gl-pagination
+          v-model="page"
+          :prev-page="prevPage"
+          :next-page="nextPage"
+          :prev-text="prevText"
+          :next-text="nextText"
+          :disabled="disabled"
+          :align="alignOptions.center"
+        />
+        Page {{ page }} of 3
+      </div>`,
+});
+
+export const LinkBased = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...defaults,
+  methods: {
+    linkGen(page) {
+      return `/page/${page}`;
+    },
+  },
+  template: `<gl-pagination
+    v-model="page"
+    :per-page="perPage"
+    :total-items="totalItems"
+    :prev-text="prevText"
+    :next-text="nextText"
+    :disabled="disabled"
+    :link-gen="linkGen"
+    />`,
+});
+LinkBased.args = generateFullProps();
+
+export const AlignCenter = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...defaults,
+  template: `<gl-pagination
+    v-model="page"
+    :per-page="perPage"
+    :total-items="totalItems"
+    :prev-text="prevText"
+    :next-text="nextText"
+    :disabled="disabled"
+    :align="alignOptions.center"
+    />`,
+});
+AlignCenter.args = generateFullProps();
+
+export const AlignRight = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...defaults,
+  template: `<gl-pagination
+    v-model="page"
+    :per-page="perPage"
+    :total-items="totalItems"
+    :prev-text="prevText"
+    :next-text="nextText"
+    :disabled="disabled"
+    :align="alignOptions.right"
+    />`,
+});
+AlignRight.args = generateFullProps();
+
+export default {
+  title: 'base/pagination',
+  component: GlPagination,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    template: `<gl-pagination
-      v-model="page"
-      :per-page="perPage"
-      :total-items="totalItems"
-      :prev-text="prevText"
-      :next-text="nextText"
-      :disabled="disabled"
-      :link-gen="linkGen"
-      />`,
-  }))
-  .add('align center', () => ({
-    props: generateFullProps(),
-    ...defaults,
-    components,
-    template: `<gl-pagination
-      v-model="page"
-      :per-page="perPage"
-      :total-items="totalItems"
-      :prev-text="prevText"
-      :next-text="nextText"
-      :disabled="disabled"
-      :align="alignOptions.center"
-      />`,
-  }))
-  .add('align right', () => ({
-    props: generateFullProps(),
-    ...defaults,
-    components,
-    template: `<gl-pagination
-      v-model="page"
-      :per-page="perPage"
-      :total-items="totalItems"
-      :prev-text="prevText"
-      :next-text="nextText"
-      :disabled="disabled"
-      :align="alignOptions.right"
-      />`,
-  }));
+  },
+};

package/src/components/base/pagination/pagination.vue

@@ -26,17 +26,26 @@ export default {
       default: 1,
       validator: (x) => x > 0,
     },
+    /**
+     * Number of items per page
+     */
     perPage: {
       type: Number,
       required: false,
       default: 20,
       validator: (x) => x > 0,
     },
+    /**
+     * Total number of items
+     */
     totalItems: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * The object must contain the xs, sm, md and default keys
+     */
     limits: {
       type: Object,
       required: false,
@@ -51,61 +60,97 @@ export default {
         return missingSizes === 0 ? true : value.default;
       },
     },
+    /**
+     * A function that receives the page number and that returns a string representing the page URL
+     */
     linkGen: {
       type: Function,
       required: false,
       default: null,
     },
+    /**
+     * When using the compact pagination, use this prop to pass the previous page number
+     */
     prevPage: {
       type: Number,
       required: false,
       default: null,
     },
+    /**
+     * Text for the previous button (overridden by "previous" slot)
+     */
     prevText: {
       type: String,
       required: false,
       default: 'Prev',
     },
+    /**
+     * When using the compact pagination, use this prop to pass the next page number
+     */
     nextPage: {
       type: Number,
       required: false,
       default: null,
     },
+    /**
+     * Text for the next button (overridden by "next" slot)
+     */
     nextText: {
       type: String,
       required: false,
       default: 'Next',
     },
+    /**
+     * Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)
+     */
     ellipsisText: {
       type: String,
       required: false,
       default: '…',
     },
+    /**
+     * aria-label for the first page item
+     */
     labelFirstPage: {
       type: String,
       required: false,
       default: 'Go to first page',
     },
+    /**
+     * aria-label for the previous page item
+     */
     labelPrevPage: {
       type: String,
       required: false,
       default: 'Go to previous page',
     },
+    /**
+     * aria-label for the next page item
+     */
     labelNextPage: {
       type: String,
       required: false,
       default: 'Go to next page',
     },
+    /**
+     * aria-label for the last page item
+     */
     labelLastPage: {
       type: String,
       required: false,
       default: 'Go to last page',
     },
+    /**
+     * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
+     */
     labelPage: {
       type: Function,
       required: false,
       default: (page) => `Go to page ${page}`,
     },
+    /**
+     * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
+     */
     align: {
       type: String,
       required: false,
@@ -281,15 +326,28 @@ export default {
     handleClick(event, value) {
       if (!this.isLinkBased) {
         event.preventDefault();
+        /**
+         * Emitted when the page changes
+         * @event input
+         * @arg {number} value The page that just got loaded
+         */
         this.$emit('input', value);
       }
     },
     handlePrevious(event, value) {
       this.handleClick(event, value);
+      /**
+       * Emitted when the "previous" button is clicked
+       * @event previous
+       */
       this.$emit('previous');
     },
     handleNext(event, value) {
       this.handleClick(event, value);
+      /**
+       * Emitted when the "next" button is clicked
+       * @event next
+       */
       this.$emit('next');
     },
   },
@@ -319,6 +377,12 @@ export default {
         :href="isLinkBased ? linkGen(value - 1) : '#'"
         @click="handlePrevious($event, value - 1)"
       >
+        <!-- 
+          @slot Content for the "previous" button. Overrides the "prevText" prop. 
+          @binding {boolean} active
+          @binding {boolean} disabled
+          @binding {number} number
+          -->
         <slot name="previous" v-bind="{ page: value - 1, disabled: prevPageIsDisabled }">
           <gl-icon name="chevron-left" />
           <span>{{ prevText }}</span>
@@ -342,6 +406,21 @@ export default {
         v-bind="item.attrs"
         v-on="item.listeners"
       >
+        <!--
+        Content for page number buttons.
+        @slot page-number
+        @binding {boolean} active
+        @binding {boolean} disabled
+        @binding {number} number
+        -->
+        <!--
+        Content for the left ellipsis. Overrides the "ellipsisText" prop.
+        @slot ellipsis-left
+        -->
+        <!--
+        Content for the right ellipsis. Overrides the "ellipsisText" prop.
+        @slot ellipsis-right
+        -->
         <slot :name="item.slot" v-bind="item.slotData">{{ item.content }}</slot>
       </component>
     </li>
@@ -361,6 +440,12 @@ export default {
         :href="isLinkBased ? linkGen(value + 1) : '#'"
         @click="handleNext($event, value + 1)"
       >
+        <!-- 
+          @slot Content for the "next" button. Overrides the "nextText" prop. 
+          @binding {boolean} active
+          @binding {boolean} disabled
+          @binding {number} number
+          -->
         <slot name="next" v-bind="{ page: value + 1, disabled: nextPageIsDisabled }">
           <span>{{ nextText }}</span>
           <gl-icon name="chevron-right" />

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

@@ -1,12 +1,9 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
 import SearchBoxByClick from './search_box_by_click.vue';
 import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
 
-const localVue = createLocalVue();
-localVue.directive('gl-tooltip', {});
-
 const GlFormInputGroupStub = {
   template: `
     <div>
@@ -24,7 +21,6 @@ describe('search box by click component', () => {
     wrapper = shallowMount(SearchBoxByClick, {
       propsData,
       stubs: { GlFormInputGroup: GlFormInputGroupStub },
-      localVue,
     });
   };
 

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

@@ -1,21 +1,6 @@
-import examples from './examples';
 import description from './segmented_control.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-form-radio-group',
-  events: [
-    {
-      event: 'input',
-      description: 'Emitted when the selection changes',
-      args: [
-        {
-          arg: 'checked',
-          description: 'The selected option',
-        },
-      ],
-    },
-  ],
 };

package/src/components/base/segmented_control/segmented_control.md

@@ -1,3 +1 @@
-# Segmented control
-
 Button group of equal options where only one can be selected and active.

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

@@ -1,52 +1,62 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSegmentedControl } from '../../../../index';
 import readme from './segmented_control.md';
 
-const components = {
-  GlSegmentedControl,
-};
-
 const defaultOptions = [
   { value: 'Pizza', text: 'Pizza' },
   { value: 'Tacos', text: 'Tacos' },
   { value: 'Burger', text: 'Burger', disabled: true },
 ];
 
-function generateProps({ options = defaultOptions } = {}) {
-  const props = {
-    options: {
-      type: Array,
-      default: object('options', options),
-    },
-    initSelected: {
-      type: String,
-      default: text('selected value', 'Tacos'),
-    },
-  };
-
-  return props;
-}
+const generateProps = ({ options = defaultOptions, initSelected = 'Tacos' } = {}) => ({
+  options,
+  initSelected,
+});
 
-documentedStoriesOf('base/segmented control', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    data() {
-      return {
-        selected: this.initSelected,
-      };
-    },
-    watch: {
-      initSelected(val) {
-        this.selected = val;
-      },
+export const Default = (args, { argTypes }) => ({
+  components: { GlSegmentedControl },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      selected: this.initSelected,
+    };
+  },
+  watch: {
+    initSelected(val) {
+      this.selected = val;
     },
-    components,
-    template: `
+  },
+  template: `
      <gl-segmented-control
       :options="options"
       v-model="selected"
      />
     `,
-  }));
+});
+Default.args = generateProps();
+
+export default {
+  title: 'base/segmented control',
+  component: GlSegmentedControl,
+  parameters: {
+    bootstrapComponent: 'b-form-radio-group',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    initSelected: {
+      options: Object.values(defaultOptions)
+        .filter(({ disabled }) => !disabled)
+        .map(({ value }) => value),
+      control: {
+        type: 'radio',
+      },
+      table: {
+        disable: true,
+      },
+    },
+  },
+};

package/src/components/base/segmented_control/segmented_control.vue

@@ -50,6 +50,11 @@ export default {
         if (this.enabledOptions.length) {
           const suggestion =
             oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
+          /**
+           * Emitted when the selection changes
+           * @event input
+           * @argument checked The selected option
+           */
           this.$emit('input', suggestion);
         }
       }

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

@@ -1,12 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import GlDropdown from '../dropdown/dropdown.vue';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlIcon from '../icon/icon.vue';
 import GlSorting from './sorting.vue';
 import GlSortingItem from './sorting_item.vue';
 
-const localVue = createLocalVue();
-
 describe('sorting component', () => {
   let wrapper;
 
@@ -35,7 +33,6 @@ describe('sorting component', () => {
           '<gl-sorting-item>Third item</gl-sorting-item>',
         ],
       },
-      localVue,
       propsData: {
         ...defaultProps,
         ...propsData,

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

@@ -1,8 +1,8 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import GlToast from './toast';
 
-const localVue = createLocalVue();
-localVue.use(GlToast);
+Vue.use(GlToast);
 const Component = {
   template: `<div />`,
 };
@@ -11,9 +11,7 @@ describe('GlToast', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(Component, {
-      localVue,
-    });
+    wrapper = mount(Component);
   });
 
   it('attaches $toast propery', () => {

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

@@ -1,9 +1,7 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import Token from './token.vue';
 
-const localVue = createLocalVue();
-
 const findIcon = (wrapper) => wrapper.findComponent(CloseButton);
 
 describe('Token component', () => {
@@ -13,7 +11,6 @@ describe('Token component', () => {
 
   const createComponent = (propsData) =>
     shallowMount(Token, {
-      localVue,
       propsData,
     });