@gitlab/ui 36.7.1 → 37.2.0

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

@@ -1,10 +1,9 @@
-import { withKnobs, object, boolean, array } from '@storybook/addon-knobs';
 import { GlLineChart } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
 import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './line.md';
 
 const components = {
@@ -50,6 +49,7 @@ const defaultData = [
 ];
 
 const defaultOptions = {
+  animation: false,
   xAxis: {
     name: 'Time',
     type: 'category',
@@ -64,127 +64,138 @@ const template = `<gl-line-chart
   :includeLegendAvgMax="includeLegendAvgMax"
 />`;
 
-function generateProps({
+const generateProps = ({
   data = defaultData,
   option = defaultOptions,
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
-} = {}) {
-  return {
-    includeLegendAvgMax: {
-      default: boolean('Include Legend Avg Max', includeLegendAvgMax),
-    },
-    option: {
-      default: object('EChart Options', option),
+} = {}) => ({
+  includeLegendAvgMax,
+  option,
+  thresholds,
+  annotations,
+  data,
+});
+
+const Template = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithThreshold = Template.bind({});
+WithThreshold.args = generateProps({
+  thresholds: [{ threshold: 1350, operator: '>' }],
+});
+
+export const WithAnnotationsAsProps = Template.bind({});
+WithAnnotationsAsProps.storyNane = 'with annotations as props (recommended)';
+WithAnnotationsAsProps.args = generateProps({
+  ...mockAnnotationsConfigs,
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
     },
-    thresholds: {
-      default: object('Thresholds', thresholds),
+  ],
+  option: {
+    animation: false,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
     },
-    annotations: {
-      default: array('Annotations', annotations),
+  },
+});
+
+export const WithAnnotationsAsOptionSeries = Template.bind({});
+WithAnnotationsAsOptionSeries.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
     },
-    data: {
-      default: object('Chart Data', data),
+  ],
+  option: {
+    ...mockAnnotationsSeries,
+    animation: false,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
     },
-  };
-}
+  },
+});
 
-documentedStoriesOf('charts/line-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with threshold', () => ({
-    props: generateProps({
-      thresholds: [{ threshold: 1350, operator: '>' }],
-    }),
-    components,
-    template,
-  }))
-  .add('with annotations as props (recommended)', () => ({
-    props: generateProps({
-      ...mockAnnotationsConfigs,
-      data: [
-        {
-          name: 'Time Series',
-          data: generateTimeSeries(),
-        },
-      ],
-      option: {
-        xAxis: {
-          type: 'time',
-          name: 'Time',
-          axisLabel: {
-            formatter: timeSeriesDateFormatter,
-          },
-        },
-      },
-    }),
-    components,
-    template,
-  }))
-  .add('with annotations as option series', () => ({
-    props: generateProps({
-      data: [
-        {
-          name: 'Time Series',
-          data: generateTimeSeries(),
-        },
-      ],
-      option: {
-        ...mockAnnotationsSeries,
-        xAxis: {
-          type: 'time',
-          name: 'Time',
-          axisLabel: {
-            formatter: timeSeriesDateFormatter,
-          },
-        },
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
+    },
+  ],
+  option: {
+    animation: false,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      data: [
-        {
-          name: 'Time Series',
-          data: generateTimeSeries(),
-        },
-      ],
-      option: {
-        xAxis: {
-          type: 'time',
-          name: 'Time',
-          axisLabel: {
-            formatter: timeSeriesDateFormatter,
-          },
-        },
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: '2018-03-01T00:00:00.000',
-          },
-        ],
+    },
+    dataZoom: [
+      {
+        type: 'slider',
+        startValue: '2018-03-01T00:00:00.000',
       },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        xAxis: {
-          name: 'Time',
-          type: 'category',
-        },
-        toolbox,
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    animation: false,
+    xAxis: {
+      name: 'Time',
+      type: 'category',
+    },
+    toolbox,
+  },
+});
+
+export default {
+  title: 'charts/line-chart',
+  component: GlLineChart,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
       },
-    }),
-    components,
-    template,
-  }));
+    },
+  },
+  argTypes: {
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+      'formatTooltipText',
+      'legendAverageText',
+      'legendMaxText',
+      'legendMinText',
+      'legendCurrentText',
+      'legendLayout',
+    ]),
+  },
+};

package/src/utils/stories_utils.js

@@ -12,3 +12,9 @@ export const SERIES_NAME = {
   [SERIES_NAME_LONG_WITHOUT_SPACES]:
     'Series_name_long._Lorem_ipsum_dolor_sit_amet,_consectetur_adipiscing_elit._Sed_tincidunt_interdum_sapien_ut_blandit._Nulla_fermentum_nisi_id_euismod_vulputate._END',
 };
+
+/**
+ * Builds the parameters object disable one or multiple controls.
+ */
+export const disableControls = (controls = []) =>
+  Object.fromEntries(controls.map((control) => [control, { control: { disable: true } }]));

package/src/utils/stories_utils.spec.js

@@ -0,0 +1,18 @@
+import { disableControls } from './stories_utils';
+
+describe('stories utils', () => {
+  describe('disableControls', () => {
+    const DISABLE_CONTROL_PARAMETER = { control: { disable: true } };
+
+    it('returns an empty object if no argument is given', () => {
+      expect(disableControls()).toEqual({});
+    });
+
+    it('returns parameters object when given an array of strings', () => {
+      expect(disableControls(['foo', 'bar'])).toEqual({
+        foo: DISABLE_CONTROL_PARAMETER,
+        bar: DISABLE_CONTROL_PARAMETER,
+      });
+    });
+  });
+});

package/dist/components/base/form/form_input_group/examples/form_input_group.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-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
-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/form/form_input_group/examples/form_input_group.predefined_options.example.js

@@ -1,54 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      optionValues: [{
-        name: 'Embed',
-        value: 'https://embed.com'
-      }, {
-        name: 'Share',
-        value: 'https://share.org'
-      }]
-    };
-  }
-
-};
-
-/* 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-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}])})};
-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_input_group/examples/form_input_group.predefined_reactive.example.js

@@ -1,55 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      testVal: 'foo',
-      optionValues: [{
-        name: 'Embed',
-        value: 'https://embed.com'
-      }, {
-        name: 'Share',
-        value: 'https://share.org'
-      }]
-    };
-  }
-
-};
-
-/* 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('div',[_c('label',[_vm._v("\n      Data outside of the component\n      "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.testVal),expression:"testVal"}],staticClass:"gl-form-input",attrs:{"type":"text"},domProps:{"value":(_vm.testVal)},on:{"input":function($event){if($event.target.composing){ return; }_vm.testVal=$event.target.value;}}})]),_vm._v(" "),_c('gl-form-input-group',{attrs:{"predefined-options":_vm.optionValues},scopedSlots:_vm._u([{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],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_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_input_group/examples/form_input_group.reactive.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      testVal: 'foo'
-    };
-  }
-
-};
-
-/* 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('div',[_c('label',[_vm._v("\n    Data outside of the component\n    "),_c('gl-form-input',{attrs:{"type":"text"},model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],1),_vm._v(" "),_c('gl-form-input-group',{scopedSlots:_vm._u([{key:"prepend",fn:function(){return [_c('gl-input-group-text',[_vm._v("Username")])]},proxy:true},{key:"append",fn:function(){return [_c('gl-button',{attrs:{"variant":"success"}},[_vm._v("Add")])]},proxy:true}]),model:{value:(_vm.testVal),callback:function ($$v) {_vm.testVal=$$v;},expression:"testVal"}})],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_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_input_group/examples/index.js

@@ -1,27 +0,0 @@
-import BasicExample from './form_input_group.basic.example';
-import PredefinedOptionsExample from './form_input_group.predefined_options.example';
-import PredefinedReactiveExample from './form_input_group.predefined_reactive.example';
-import ReactiveExample from './form_input_group.reactive.example';
-
-var index = [{
-  name: 'Text Input Group',
-  items: [{
-    id: 'input-text-group',
-    name: 'Basic',
-    component: BasicExample
-  }, {
-    id: 'input-text-group-reactive',
-    name: 'Reactive update of/from the component',
-    component: ReactiveExample
-  }, {
-    id: 'input-text-group-predefined-options',
-    name: 'With predefined options',
-    component: PredefinedOptionsExample
-  }, {
-    id: 'input-text-group-predefined-reactive',
-    name: 'With predefined options and reactive updates',
-    component: PredefinedReactiveExample
-  }]
-}];
-
-export default index;

package/dist/components/base/tabs/tab/examples/index.js

@@ -1,13 +0,0 @@
-import BasicTabExample from './tab.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'tab-basic',
-    name: 'Basic',
-    description: 'Basic Tab',
-    component: BasicTabExample
-  }]
-}];
-
-export default index;

package/dist/components/base/tabs/tab/examples/tab.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-tabs',[_c('gl-tab',{attrs:{"title":"First"}},[_vm._v("first content")])],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/tabs/tab/tab.documentation.js

@@ -1,18 +0,0 @@
-import examples from './examples';
-
-var description = "### GlTab Component cannot be used alone\n\nIt must be used with `tabs` as the parent\n";
-
-var tab_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-tab',
-  followsDesignSystem: true,
-  propsInfo: {
-    queryParamValue: {
-      additionalInfo: 'Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.',
-      type: String
-    }
-  }
-};
-
-export default tab_documentation;

package/dist/components/base/tabs/tabs/examples/index.js

@@ -1,60 +0,0 @@
-import BasicTabsExample from './tabs.basic.example';
-import ContentlessTabExample from './tabs.contentless_tab.example';
-import TabsWithCounterBadgesExample from './tabs.counterbadges.example';
-import CustomTitleExample from './tabs.custom_title.example';
-import DisabledTabExample from './tabs.disabled.example';
-import JustifiedTabsExample from './tabs.justified.example';
-import NoTabsExample from './tabs.no_tabs.example';
-import TabsScrollableExample from './tabs.scrollable.example';
-import TabsStylesOnlyExample from './tabs.styles_only.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'tabs-basic',
-    name: 'Basic',
-    description: 'Basic Tabs',
-    component: BasicTabsExample
-  }, {
-    id: 'tabs-disabled',
-    name: 'Disabled',
-    description: 'Disabled Tab',
-    component: DisabledTabExample
-  }, {
-    id: 'tabs-custom-title',
-    name: 'Custom Title',
-    description: 'Custom Title Tab',
-    component: CustomTitleExample
-  }, {
-    id: 'tabs-contentless-tab',
-    name: 'Contentless Tab',
-    description: 'Contentless Tab',
-    component: ContentlessTabExample
-  }, {
-    id: 'tabs-no-tabs',
-    name: 'Empty state when no tabs',
-    description: 'Empty state/content for when there are no tabs',
-    component: NoTabsExample
-  }, {
-    id: 'tabs-with-counter-badges',
-    name: 'Tabs with counter badges',
-    component: TabsWithCounterBadgesExample
-  }, {
-    id: 'tabs-styles-only',
-    name: 'Tabs styles only',
-    component: TabsStylesOnlyExample
-  }, {
-    id: 'justified-tabs',
-    name: 'Justified tabs',
-    component: JustifiedTabsExample
-  }]
-}, {
-  name: 'Scrollable',
-  items: [{
-    id: 'tabs-scrollable',
-    name: 'Scrollable tabs with lots of tabs',
-    component: TabsScrollableExample
-  }]
-}];
-
-export default index;