@gitlab/ui 32.43.3 → 32.46.0

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,
+    },
+  },
+};

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -13,36 +13,60 @@ export default {
   name: 'GlSkeletonLoader',
   functional: true,
   props: {
+    /**
+     * 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
+     */
     width: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * 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
+     */
     height: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * Aspect ratio option of <svg/>
+     */
     preserveAspectRatio: {
       type: String,
       default: 'xMidYMid meet',
       required: false,
     },
+    /**
+     * 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.
+     */
     baseUrl: {
       type: String,
       default: '',
       required: false,
     },
+    /**
+     * Defaults to unique id
+     */
     uniqueKey: {
       type: String,
       default: () => uid(),
       required: false,
     },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
     lines: {
       type: Number,
       default: 3,
       required: false,
     },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
     equalWidthLines: {
       type: Boolean,
       default: false,

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,
     });
 

package/src/components/base/token_selector/token_container.spec.js

@@ -40,12 +40,12 @@ describe('GlTokenContainer', () => {
   };
 
   const findTokenByName = (name) => {
-    const tokenWrappers = wrapper.findAllComponents({ ref: 'tokens' });
+    const tokenWrappers = wrapper.findAll('[role=option]');
 
     return tokenWrappers.wrappers.find((tokenWrapper) => tokenWrapper.text() === name);
   };
 
-  const findTokenContainer = () => wrapper.find({ ref: 'tokenContainer' });
+  const findTokenContainer = () => wrapper.findComponent({ ref: 'tokenContainer' });
 
   const blurActiveElement = () => document.activeElement?.blur?.();
 
@@ -173,7 +173,6 @@ describe('GlTokenContainer', () => {
     describe('when escape key is pressed', () => {
       it('fires `cancel-focus` event', async () => {
         await setup(0, keyboard.escape);
-
         expect(wrapper.emitted('cancel-focus')).toBeTruthy();
       });
     });

package/src/components/charts/chart/chart.spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
 import Chart from './chart.vue';
 import createTheme from '~/utils/charts/theme';
+import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
 const defaultHeight = 400;
 
@@ -21,11 +22,12 @@ describe('chart component', () => {
   const themeName = 'gitlab';
   let wrapper;
 
-  beforeEach(() => {
+  const { trigger: triggerResize } = useMockResizeObserver();
+
+  it('initializes chart using $refs.chart', async () => {
     wrapper = shallowMount(...mountArgs);
-  });
+    await wrapper.vm.$nextTick();
 
-  it('initializes chart using $refs.chart', () => {
     expect(echarts.init).toHaveBeenCalledWith(
       wrapper.findComponent({ ref: 'chart' }).element,
       themeName,
@@ -37,11 +39,34 @@ describe('chart component', () => {
     );
   });
 
-  it('emits "created" after initializing chart', () => {
+  it('does not resize the chart when responsive = false', async () => {
+    wrapper = shallowMount(...mountArgs);
+    await wrapper.vm.$nextTick();
+    // initial call when chart gets created
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+
+    triggerResize(wrapper.element);
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+  });
+
+  it('resizes the chart when responsive = true', async () => {
+    wrapper = shallowMount(Chart, { propsData: { options: {}, responsive: true } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+
+    triggerResize(wrapper.element);
+
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(2);
+  });
+
+  it('emits "created" after initializing chart', async () => {
+    wrapper = shallowMount(...mountArgs);
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('created')).toEqual([[wrapper.vm.chart]]);
   });
 
   it('uses GitLab theme', () => {
+    wrapper = shallowMount(...mountArgs);
     const [firstRegisterThemeCall] = echarts.registerTheme.mock.calls;
     expect(firstRegisterThemeCall[0]).toBe(themeName);
     expect(JSON.stringify(firstRegisterThemeCall[1])).toEqual(JSON.stringify(createTheme()));
@@ -87,6 +112,10 @@ describe('chart component', () => {
   });
 
   describe('methods', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(...mountArgs);
+    });
+
     describe('draw method', () => {
       it('sets chart options', () => {
         wrapper.vm.draw();

package/src/components/charts/chart/chart.vue

@@ -2,8 +2,12 @@
 import * as echarts from 'echarts';
 import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
 export default {
+  directives: {
+    resizeObserver: GlResizeObserverDirective,
+  },
   props: {
     options: {
       type: Object,
@@ -42,6 +46,11 @@ export default {
         return validRenderers.includes(renderer);
       },
     },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -80,7 +89,7 @@ export default {
       echarts.connect(this.groupId);
     }
 
-    this.chart.on('click', this.clickHandler);
+    this.chart.on('click', this.handleClick);
     /**
      * Emitted after calling `echarts.init`
      */
@@ -89,7 +98,7 @@ export default {
     this.setChartSize();
   },
   beforeDestroy() {
-    this.chart.off('click', this.clickHandler);
+    this.chart.off('click', this.handleClick);
   },
   methods: {
     draw() {
@@ -105,7 +114,7 @@ export default {
         height: this.height || defaultHeight,
       });
     },
-    clickHandler(params) {
+    handleClick(params) {
       /**
        * Emitted when clicked on a data item in the chart (e.g., a bar/column).
        *
@@ -114,10 +123,13 @@ export default {
        */
       this.$emit('chartItemClicked', { chart: this.chart, params });
     },
+    handleResize() {
+      if (this.responsive) this.chart.resize();
+    },
   },
 };
 </script>
 
 <template>
-  <div ref="chart"></div>
+  <div ref="chart" v-resize-observer="handleResize"></div>
 </template>

package/src/components/charts/discrete_scatter/discrete_scatter.documentation.js

@@ -1,8 +1,3 @@
-import description from './discrete_scatter.md';
-import examples from './examples';
-
 export default {
   followsDesignSystem: true,
-  description,
-  examples,
 };

package/src/components/charts/discrete_scatter/discrete_scatter.stories.js

@@ -1,13 +1,9 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { GlDiscreteScatterChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import readme from './discrete_scatter.md';
 
-const components = {
-  GlDiscreteScatterChart,
-};
-
-const template = `
+const Template = (args, { argTypes }) => ({
+  components: { GlDiscreteScatterChart },
+  props: Object.keys(argTypes),
+  template: `
   <gl-discrete-scatter-chart
     :data="data"
     :option="option"
@@ -15,9 +11,10 @@ const template = `
     :x-axis-title="xAxisTitle"
     data-testid="discrete-scatter-chart"
   />
-`;
+`,
+});
 
-function generateProps({
+const generateProps = ({
   data = [
     {
       type: 'scatter',
@@ -35,41 +32,32 @@ function generateProps({
   option = {},
   yAxisTitle = 'Pushes per day',
   xAxisTitle = 'Date',
-} = {}) {
-  return {
-    data: {
-      default: object('Chart Data', data),
-    },
-    option: {
-      default: object('EChart Options', option),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-  };
-}
+} = {}) => ({
+  data,
+  option,
+  yAxisTitle,
+  xAxisTitle,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('charts/discrete-scatter-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: 1,
-          },
-        ],
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  option: {
+    dataZoom: [
+      {
+        type: 'slider',
+        startValue: 1,
       },
-    }),
-    components,
-    template,
-  }));
+    ],
+  },
+});
+
+export default {
+  title: 'charts/discrete-scatter-chart',
+  component: GlDiscreteScatterChart,
+  parameters: {
+    knobs: { disable: true },
+  },
+};