@gitlab/ui 32.43.3 → 32.46.0

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

@@ -108,7 +108,7 @@ describe('gauge component', () => {
       createComponent({ value: 'not a number' });
 
       return wrapper.vm.$nextTick().then(() => {
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
         expect(findDetailText()).toBe(placeholder);
       });
     });
@@ -196,7 +196,7 @@ describe('gauge component', () => {
       it('if some of them are invalid values they are skipped', () => {
         createComponent({ thresholds: [undefined, 95, 'a string', NaN, 50, 15, 25] });
 
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
 
         expect(findAxisColor().length).toBe(3);
       });
@@ -215,7 +215,7 @@ describe('gauge component', () => {
       it('when some values are invalid', () => {
         createComponent({ thresholds: [NaN, 95, undefined, 'a string', 50, 15, 25] });
 
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
 
         expect(findAxisColor().length).toBe(3);
         expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
@@ -235,12 +235,12 @@ describe('gauge component', () => {
     });
 
     describe('when thresholds that are not numbers are set, they will not show on the arc', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createComponent({ thresholds: ['not a number', NaN, undefined] });
 
-        return wrapper.vm.$nextTick().then(() => {
-          global.console.error.mockReset();
-        });
+        await wrapper.vm.$nextTick();
+        // eslint-disable-next-line jest/no-standalone-expect
+        expect(wrapper).toHaveLoggedVueErrors();
       });
 
       it('axis has a single color set', () => {

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.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
@@ -19,14 +19,11 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
   },
 }));
 
-const localVue = createLocalVue();
-
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
   const factory = () => {
     componentOptions = {
-      localVue,
       propsData: {
         data: [[]],
         variant: null,

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`.
 

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

@@ -1,6 +1,4 @@
-import { withKnobs, object, text, array, select } from '@storybook/addon-knobs';
 import { GlStackedColumnChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   mockDefaultStackedLineData,
   mockDefaultStackedBarData,
@@ -10,10 +8,6 @@ import { toolbox } from '../../../utils/charts/story_config';
 import { columnOptions } from '../../../utils/constants';
 import readme from './stacked_column.md';
 
-const components = {
-  GlStackedColumnChart,
-};
-
 const template = `
   <gl-stacked-column-chart
     :bars="bars"
@@ -31,7 +25,7 @@ const template = `
 
 const mockSecondaryDataTitle = 'Merges';
 
-function generateProps({
+const generateProps = ({
   bars = mockDefaultStackedBarData,
   lines = [],
   option = {},
@@ -42,98 +36,79 @@ function generateProps({
   presentation = columnOptions.stacked,
   secondaryData = [],
   secondaryDataTitle = '',
-} = {}) {
-  return {
-    bars: {
-      default: object('Bar chart Data', bars),
-    },
-    lines: {
-      default: object('Line chart Data', lines),
-    },
-    option: {
-      default: object('Echart Options', option),
-    },
-    presentation: {
-      default: select('presentation', columnOptions, presentation),
-    },
-    groupBy: {
-      default: array('Group By', groupBy),
-    },
-    xAxisType: {
-      default: text('X Axis Type', xAxisType),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    secondaryDataTitle: {
-      default: text('Secondary Data Title', secondaryDataTitle),
-    },
-    secondaryData: {
-      default: object('Secondary Data', secondaryData),
-    },
-  };
-}
+} = {}) => ({
+  bars,
+  lines,
+  option,
+  presentation,
+  groupBy,
+  xAxisType,
+  xAxisTitle,
+  yAxisTitle,
+  secondaryDataTitle,
+  secondaryData,
+});
 
-documentedStoriesOf('charts/stacked-column-chart', readme)
-  .addDecorator(withKnobs)
-  .add('stacked', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('tiled', () => ({
-    props: generateProps({ presentation: columnOptions.tiled }),
-    components,
-    template,
-  }))
-  .add('stacked with line data', () => ({
-    props: generateProps({ lines: mockDefaultStackedLineData }),
-    components,
-    template,
-  }))
-  .add('tiled with line data', () => ({
-    props: generateProps({ presentation: columnOptions.tiled, lines: mockDefaultStackedLineData }),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            startValue: 1,
-          },
-        ],
+const Template = (args, { argTypes }) => ({
+  components: { GlStackedColumnChart },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Stacked = Template.bind({});
+Stacked.args = generateProps();
+
+export const Tiled = Template.bind({});
+Tiled.args = generateProps({ presentation: columnOptions.tiled });
+
+export const StackedWithLineData = Template.bind({});
+StackedWithLineData.args = generateProps({ lines: mockDefaultStackedLineData });
+
+export const TiledWithLineData = Template.bind({});
+TiledWithLineData.args = generateProps({
+  presentation: columnOptions.tiled,
+  lines: mockDefaultStackedLineData,
+});
+
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  option: {
+    dataZoom: [
+      {
+        startValue: 1,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    toolbox,
+  },
+});
+
+export const SecondaryYAxis = Template.bind({});
+SecondaryYAxis.args = generateProps({
+  secondaryData: mockSecondaryData,
+  secondaryDataTitle: mockSecondaryDataTitle,
+});
+
+export const SecondaryYAxisLine = Template.bind({});
+SecondaryYAxisLine.args = generateProps({
+  secondaryData: [{ ...mockSecondaryData[0], type: 'line' }],
+  secondaryDataTitle: mockSecondaryDataTitle,
+});
+
+export default {
+  title: 'charts/stacked-column-chart',
+  component: GlStackedColumnChart,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis', () => ({
-    props: generateProps({
-      secondaryData: mockSecondaryData,
-      secondaryDataTitle: mockSecondaryDataTitle,
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis line', () => ({
-    props: generateProps({
-      secondaryData: [{ ...mockSecondaryData[0], type: 'line' }],
-      secondaryDataTitle: mockSecondaryDataTitle,
-    }),
-    components,
-    template,
-  }));
+    },
+  },
+};

package/src/components/utilities/friendly_wrap/friendly_wrap.spec.js

@@ -115,12 +115,9 @@ describe('Friendly wrap component', () => {
     });
 
     // Assert prop validation failed
-    expect(global.console).toHaveLoggedVueErrors();
+    expect(wrapper).toHaveLoggedVueErrors();
 
     // But it still rendered
     expect(wrapper.text()).toBe('');
-
-    // Prevent test failure due to console.error calls
-    global.console.error.mockReset();
   });
 });

package/src/components/utilities/intersperse/intersperse.spec.js

@@ -1,14 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Intersperse from './intersperse.vue';
 
-const localVue = createLocalVue();
-
 describe('Intersperse Component', () => {
   let wrapper;
 
   const createComponent = (defaultSlot = [], options = {}) => {
     wrapper = shallowMount(Intersperse, {
-      localVue,
       slots: {
         default: defaultSlot,
       },

package/src/directives/hover_load/hover_load.spec.js

@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { HoverLoadDirective as hoverLoad } from './hover_load';
 
 describe('hover load directive', () => {
   let wrapper;
-  const localVue = createLocalVue();
   const findTarget = () => wrapper.find('.target');
 
   const createComponent = (handleLoad) => {
@@ -19,7 +18,7 @@ describe('hover load directive', () => {
       template: `<div v-hover-load="handleLoad" class="target"></div>`,
     };
 
-    wrapper = shallowMount(component, { localVue });
+    wrapper = shallowMount(component);
   };
 
   afterEach(() => {
@@ -48,16 +47,6 @@ describe('hover load directive', () => {
     }
   );
 
-  it.each([3, '', undefined, null, false, {}, []])(
-    'throws if the handler is %p instead of a function',
-    (directiveValue) => {
-      // we are going to throw, so we need to suppress error messages in jest output
-      jest.spyOn(global.console, 'error').mockImplementation(() => {});
-
-      expect(() => createComponent(directiveValue)).toThrow(TypeError);
-    }
-  );
-
   it('cleans up the mouseover event when component is destroyed', () => {
     createComponent(jest.fn());
 

package/src/directives/outside/outside.spec.js

@@ -121,9 +121,6 @@ describe('outside directive', () => {
 
       expect(global.console).toHaveLoggedVueErrors();
       expect(document.addEventListener).not.toHaveBeenCalled();
-
-      // Prevent test failure due to console.error calls
-      global.console.error.mockReset();
     });
 
     it('attaches the global listener on first initialisation', async () => {
@@ -212,9 +209,6 @@ describe('outside directive', () => {
         find('outside').trigger('click');
 
         expect(onClick.mock.calls).toEqual([]);
-
-        // Prevent test failure due to console.error calls
-        global.console.error.mockReset();
       }
     );
   });
@@ -313,6 +307,7 @@ describe('outside directive', () => {
         throw new Error('mock error');
       });
 
+      jest.spyOn(global.console, 'error');
       await createComponent({
         methods: {
           onClickThrow,

package/src/directives/resize_observer/resize_observer.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { GlResizeObserverDirective } from './resize_observer';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
@@ -6,8 +6,6 @@ describe('resize observer directive', () => {
   const { trigger, observersCount, observesElement } = useMockResizeObserver();
 
   const mockHandleResize = jest.fn();
-
-  const localVue = createLocalVue();
   let wrapper;
 
   const createComponent = ({ template, data = {} } = {}) => {
@@ -26,7 +24,7 @@ describe('resize observer directive', () => {
       },
     };
 
-    wrapper = shallowMount(component, { localVue });
+    wrapper = shallowMount(component);
   };
 
   it('shares one observer between multiple directive instances', () => {
@@ -102,11 +100,6 @@ describe('resize observer directive', () => {
   });
 
   describe('check directive value', () => {
-    afterEach(() => {
-      // we are going to throw, so we need to suppress Vue error messages in jest output
-      global.console.error.mockReset();
-    });
-
     it.each([3, '', undefined, null, false, {}, []])(
       'throws if the handler is %p instead of a function',
       (directiveValue) => {
@@ -123,8 +116,9 @@ describe('resize observer directive', () => {
         };
 
         expect(() => {
-          wrapper = shallowMount(testComponentWithoutHandler, { localVue });
+          wrapper = shallowMount(testComponentWithoutHandler);
         }).toThrow(TypeError);
+        expect(wrapper).toHaveLoggedVueErrors();
       }
     );
   });

package/src/scss/storybook.scss

@@ -12,3 +12,11 @@
 @import 'utilities';
 
 @import 'components';
+
+/**
+ * Custom padding for docs pages. This improves the integration in Pajamas pages.
+ */
+.sbdocs-wrapper {
+  padding-top: $gl-spacing-scale-2 !important;
+  padding-bottom: 0 !important;
+}

package/src/scss/utilities.scss

@@ -6113,6 +6113,14 @@
   transform: translateX(100%) !important
 }
 
+.gl-translate-x-n50 {
+  transform: translateX(-50%)
+}
+
+.gl-translate-x-n50\! {
+  transform: translateX(-50%) !important
+}
+
 .gl-translate-y-0 {
   transform: translateY(0)
 }

package/src/scss/utility-mixins/transform.scss

@@ -13,6 +13,10 @@
   transform: translateX(100%);
 }
 
+@mixin gl-translate-x-n50 {
+  transform: translateX(-50%);
+}
+
 @mixin gl-translate-y-0 {
   transform: translateY(0);
 }

package/dist/components/base/avatar/examples/avatar.fallback.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"entity-name":"Some Project","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.image.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"src":"https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.rect.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"src":"https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.tooltip.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"entity-name":"Some Project","title":"Some Project","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;