@gitlab/ui 32.44.0 → 32.47.0

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

package/src/components/charts/heatmap/heatmap.vue

@@ -1,7 +1,6 @@
 <script>
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -49,9 +48,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  directives: {
-    resizeObserver: GlResizeObserverDirective,
-  },
   mixins: [ToolboxMixin],
   props: {
     options: {
@@ -237,9 +233,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    handleResize() {
-      return this.responsive && this.chart.resize();
-    },
     showHideTooltip(mouseEvent) {
       this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
@@ -262,8 +255,8 @@ export default {
 </script>
 
 <template>
-  <div v-resize-observer="handleResize" class="gl-heatmap">
-    <chart :options="computedOptions" @created="onCreated" />
+  <div class="gl-heatmap">
+    <chart v-bind="$attrs" :options="computedOptions" @created="onCreated" v-on="$listeners" />
     <chart-tooltip
       v-if="chart"
       :show="tooltip.show"

package/src/components/charts/sparkline/sparkline.vue

@@ -181,7 +181,13 @@ export default {
   >
     <slot name="default"></slot>
     <div class="gl-flex-grow-1 gl-relative">
-      <chart :height="height" :options="options" @created="onChartCreated" />
+      <chart
+        v-bind="$attrs"
+        :height="height"
+        :options="options"
+        @created="onChartCreated"
+        v-on="$listeners"
+      />
       <chart-tooltip
         v-if="chartInstance"
         :show="tooltip.show"

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

@@ -1,8 +1,6 @@
-import examples from './examples';
 import description from './stacked_column.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
 };

package/src/components/charts/stacked_column/stacked_column.md

@@ -1,5 +1,3 @@
-# Stacked Column Chart
-
 The `presentation` property allows you to change between a stacked and tiled presentation style. It
 is only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.