@gitlab/ui 36.7.1 → 37.0.0

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

@@ -1,16 +1,11 @@
-import { withKnobs, object, array, boolean } from '@storybook/addon-knobs';
 import { times } from 'lodash';
 import { GlAreaChart } 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 readme from './area.md';
+import { disableControls } from '../../../utils/stories_utils';
 
-const components = {
-  GlAreaChart,
-};
 const defaultData = [
   {
     name: 'First Series',
@@ -32,6 +27,7 @@ const defaultOptions = {
     type: 'category',
   },
 };
+
 const template = `<gl-area-chart
   :data="data"
   :option="option"
@@ -40,136 +36,140 @@ const template = `<gl-area-chart
   :includeLegendAvgMax="includeLegendAvgMax"
 />`;
 
-function generateProps({
+const generateProps = ({
   data = defaultData,
   option = defaultOptions,
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
-} = {}) {
-  return {
-    option: {
-      default: object('EChart Options', option),
-    },
-    thresholds: {
-      default: array('Thresholds', thresholds),
+} = {}) => ({
+  data,
+  option,
+  thresholds,
+  annotations,
+  includeLegendAvgMax,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlAreaChart,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithThreshold = Template.bind({});
+WithThreshold.args = generateProps({
+  thresholds: [{ threshold: 1200, operator: '>' }],
+});
+
+export const WithAnnotationsAsProps = Template.bind({});
+WithAnnotationsAsProps.storyName = 'With annotations as props (recommended)';
+WithAnnotationsAsProps.args = generateProps({
+  ...mockAnnotationsConfigs,
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
     },
-    annotations: {
-      default: object('Annotations', annotations),
+  ],
+  option: {
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
     },
-    data: {
-      default: object('Chart Data', data),
+  },
+});
+
+export const WithAnnotationsAsOptionSeries = Template.bind({});
+WithAnnotationsAsOptionSeries.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
     },
-    includeLegendAvgMax: {
-      default: boolean('Include Legend Avg Max', includeLegendAvgMax),
+  ],
+  option: {
+    ...mockAnnotationsSeries,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
     },
-  };
-}
+  },
+});
 
-documentedStoriesOf('charts/area-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with threshold', () => ({
-    props: generateProps({
-      thresholds: [{ threshold: 1200, 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,
-          },
-        },
-      },
-    }),
-    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: [
-          {
-            startValue: '2018-03-01T00:00:00.000',
-          },
-        ],
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
+    },
+  ],
+  option: {
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        xAxis: {
-          name: 'Time',
-          type: 'category',
-        },
-        toolbox,
+    },
+    dataZoom: [
+      {
+        startValue: '2018-03-01T00:00:00.000',
       },
-    }),
-    components,
-    template,
-  }))
-  .add('mult-series', () => ({
-    props: generateProps({
-      data: times(10, (index) => ({
-        name: index,
-        data: defaultData[0].data.map(([label, value]) => [label, value * index]),
-      })),
-    }),
-    components,
-    template,
-  }));
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    xAxis: {
+      name: 'Time',
+      type: 'category',
+    },
+    toolbox,
+  },
+});
+
+export const MultSeries = Template.bind({});
+MultSeries.args = generateProps({
+  data: times(10, (index) => ({
+    name: index,
+    data: defaultData[0].data.map(([label, value]) => [label, value * index]),
+  })),
+});
+
+export default {
+  title: 'charts/area-chart',
+  component: GlAreaChart,
+  parameters: {
+    knobs: { disable: true },
+  },
+  argTypes: {
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+      'dataSeries',
+      'formatTooltipText',
+      'legendAverageText',
+      'legendMaxText',
+      'legendMinText',
+      'legendCurrentText',
+      'legendLayout',
+    ]),
+  },
+};

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

@@ -1,4 +1,5 @@
 import { GlBarChart } from '../../../charts';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './bar.md';
 
 const Template = (args, { argTypes }) => ({
@@ -49,11 +50,13 @@ export default {
   title: 'charts/bar-chart',
   component: GlBarChart,
   argTypes: {
-    showToolbox: { control: { disable: true } },
-    toolboxZoomIconPath: { control: { disable: true } },
-    toolboxBackIconPath: { control: { disable: true } },
-    toolboxRestoreIconPath: { control: { disable: true } },
-    toolboxSaveAsImageIconPath: { control: { disable: true } },
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+    ]),
   },
   parameters: {
     knobs: { disable: true },

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

@@ -1,6 +1,6 @@
 import { GlHeatmap } from '../../../charts';
 import { toolbox } from '../../../utils/charts/story_config';
-import readme from '../area/area.md';
+import { disableControls } from '../../../utils/stories_utils';
 
 function generateData() {
   let data = [
@@ -62,22 +62,19 @@ export default {
   component: GlHeatmap,
   parameters: {
     knobs: { disable: true },
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
   },
   argTypes: {
-    showToolbox: { control: { disable: true } },
-    toolboxZoomIconPath: { control: { disable: true } },
-    toolboxBackIconPath: { control: { disable: true } },
-    toolboxRestoreIconPath: { control: { disable: true } },
-    toolboxSaveAsImageIconPath: { control: { disable: true } },
-    dataSeries: { control: { disable: true } },
-    formatTooltipText: { control: { disable: true } },
-    legendAverageText: { control: { disable: true } },
-    legendMaxText: { control: { disable: true } },
-    responsive: { control: { disable: true } },
+    ...disableControls([
+      'showToolbox',
+      'toolboxZoomIconPath',
+      'toolboxBackIconPath',
+      'toolboxRestoreIconPath',
+      'toolboxSaveAsImageIconPath',
+      'dataSeries',
+      'formatTooltipText',
+      'legendAverageText',
+      'legendMaxText',
+      'responsive',
+    ]),
   },
 };

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

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

package/src/components/charts/line/line.md

@@ -1,5 +1,3 @@
-### Line Chart
-
 This is a basic line chart.
 
 ### Implementation Details

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