@gitlab/ui 32.44.0 → 32.47.0

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

@@ -1,9 +1,6 @@
-import examples from './examples';
 import description from './tooltip.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-popover',
 };

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

@@ -1,11 +1,9 @@
 import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   SERIES_NAME,
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_utils';
-
 import readme from './tooltip.md';
 
 const components = {
@@ -33,10 +31,9 @@ const baseStoryOptions = {
   },
 };
 
-const getStoryOptions = (tooltipContent) => {
-  return {
-    ...baseStoryOptions,
-    template: `<div class="position-relative">
+const getStoryOptions = (tooltipContent) => ({
+  ...baseStoryOptions,
+  template: `<div class="position-relative">
     <gl-chart
       :options="options"
       :height="100"
@@ -57,43 +54,61 @@ const getStoryOptions = (tooltipContent) => {
       ${tooltipContent}
     </gl-chart-tooltip>
 </div>`,
-  };
-};
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions('Example Content'),
+});
+
+export const WithLongSeriesLabel = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions(`
+        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
+      `),
+});
 
-documentedStoriesOf('charts/chart-tooltip', readme)
-  .add('default', () => getStoryOptions('Example Content'))
-  .add('with long series label', () =>
-    getStoryOptions(`
-      <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
-    `)
-  )
-  .add('with long series label with no spaces', () =>
-    getStoryOptions(`
-      <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
-    `)
-  )
+export const WithLongSeriesLabelWithNoSpaces = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...getStoryOptions(`
+        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
+      `),
+});
 
-  // This story exists to avoid regressions as part of
-  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1482, and may be affected
-  // by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1479
-  .add('title prop', () => ({
-    ...baseStoryOptions,
-    template: `
-      <div class="position-relative">
-        <gl-chart
-          :options="options"
-          :height="100"
-          @created="onCreated"
-        />
-        <gl-chart-tooltip
-          v-if="chart"
-          :chart="chart"
-          :show="showTooltip"
-          :top="top"
-          :left="left"
-          title="Title from prop"
-        >
-          Example content
-        </gl-chart-tooltip>
-      </div>`,
-  }));
+export const TitleProp = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...baseStoryOptions,
+  template: `
+        <div class="position-relative">
+          <gl-chart
+            :options="options"
+            :height="100"
+            @created="onCreated"
+          />
+          <gl-chart-tooltip
+            v-if="chart"
+            :chart="chart"
+            :show="showTooltip"
+            :top="top"
+            :left="left"
+            title="Title from prop"
+          >
+            Example content
+          </gl-chart-tooltip>
+        </div>`,
+});
+
+export default {
+  title: 'charts/chart-tooltip',
+  component: GlChartTooltip,
+  parameters: {
+    bootstrapComponent: 'b-popover',
+    knobs: { disable: true },
+    controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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/form/form_combobox/examples/form_combobox.basic.example.js

@@ -1,50 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  tokens: ['giraffe', 'dog', 'dodo', 'komodo dragon', 'hippo', 'platypus', 'jackalope', 'quetzal', 'badger', 'vicuña', 'whale', 'xenarthra'],
-
-  data() {
-    return {
-      inputVal: ''
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-combobox',{attrs:{"token-list":_vm.$options.tokens,"label-text":"Animals We Tolerate"},model:{value:(_vm.inputVal),callback:function ($$v) {_vm.inputVal=$$v;},expression:"inputVal"}})};
-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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/form/form_combobox/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './form_combobox.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'form-combobox-basic',
-    name: 'Basic',
-    description: 'Basic Combobox',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/input_group_text/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './input_group_text.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'input-group-text-basic',
-    name: 'Basic',
-    description: 'Basic Input Group Text',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/form/input_group_text/examples/input_group_text.basic.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-input-group-text',[_vm._v("Some text")])};
-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/label/examples/index.js

@@ -1,19 +0,0 @@
-import LabelBasicExample from './label.basic.example';
-import LabelScopedExample from './label.scoped.example';
-
-var index = [{
-  name: 'Label',
-  items: [{
-    id: 'label-basic',
-    name: 'default',
-    description: 'Basic Label',
-    component: LabelBasicExample
-  }, {
-    id: 'label-scoped',
-    name: 'scoped',
-    description: 'Scoped::Label',
-    component: LabelScopedExample
-  }]
-}];
-
-export default index;

package/dist/components/base/label/examples/label.basic.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-label',{attrs:{"target":"#","background-color":"#D9C2EE","title":"Basic Label"}})};
-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/label/examples/label.scoped.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-label',{attrs:{"target":"#","background-color":"#D9C2EE","title":"Basic::Label","scoped":""}})};
-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/skeleton_loader/examples/ci_header_skeleton.basic.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('div',{staticStyle:{"width":"575px","height":"24px"}},[_c('gl-skeleton-loader',{attrs:{"width":575,"height":24}},[_c('rect',{attrs:{"width":"86","height":"24","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"x":"94","y":"4","width":"300","height":"16","rx":"4"}}),_vm._v(" "),_c('rect',{attrs:{"x":"430","y":"4","width":"145","height":"16","rx":"4"}}),_vm._v(" "),_c('circle',{attrs:{"cx":"414","cy":"12","r":"12"}})])],1)};
-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/skeleton_loader/examples/default_skeleton.basic.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-skeleton-loader')};
-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__;