@gitlab/ui 32.43.2 → 32.45.1

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/skeleton_loader/skeleton_loader.documentation.js

@@ -1,33 +1,6 @@
-import examples from './examples';
 import * as description from './skeleton_loader.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    width: {
-      additionalInfo:
-        'It will be set in the viewbox attr in the <svg />. Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used',
-    },
-    height: {
-      additionalInfo:
-        'It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot. Defaults to the combined height of the lines when default skeleton is used',
-    },
-    uniqueKey: {
-      additionalInfo: 'Defaults to unique id',
-    },
-    preserveAspectRatio: {
-      additionalInfo: 'Aspect ratio option of <svg/>',
-    },
-    baseUrl: {
-      additionalInfo: `Required if you're using <base url="/" /> in your <head />. Defaults to an empty string. This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.`,
-    },
-    lines: {
-      additionalInfo: 'Number of lines to show when using the default skeleton',
-    },
-    equalWidthLines: {
-      additionalInfo: 'If the default skeleton lines should all be the same width',
-    },
-  },
 };

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -1,5 +1,3 @@
-## Usage
-
 Skeleton loaders are to be used when pages or sections can be progressively populated with content,
 such as text and images, as they become available. Generally speaking the first batch of content
 will be the lightest to load and is followed by secondary and tertiary content batches. Each loading

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

@@ -1,14 +1,9 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSkeletonLoader } from '../../../../index';
 import readme from './skeleton_loader.md';
 
-const components = {
-  GlSkeletonLoader,
-};
-
-documentedStoriesOf('base/skeleton-loader', readme).add('default', () => ({
-  props: {},
-  components,
+const Template = (args) => ({
+  components: { GlSkeletonLoader },
+  props: Object.keys(args),
   template: `
   <div style="background: #fff; border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 359px; height: 135px; padding: 1rem; border-radius: 0.25rem;">
     <div style="width: 327px; height: 102px;">
@@ -24,4 +19,23 @@ documentedStoriesOf('base/skeleton-loader', readme).add('default', () => ({
       </gl-skeleton-loader>
     </div>
   </div>`,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export default {
+  title: 'base/skeleton-loader',
+  component: GlSkeletonLoader,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+    controls: {
+      disable: true,
+    },
+  },
+};