@gitlab/ui 32.45.0 → 32.48.0

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

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './gauge.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

package/src/components/charts/gauge/gauge.md

@@ -1,5 +1,3 @@
-### Gauge Chart
-
 Some layout problems can be encountered with this component. Specifically, when the gauge chart's
 axis labels or detail text have larger widths, they can overlap with the chart elements.
 

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

@@ -1,5 +1,3 @@
-import { withKnobs, object, number, text as textKnob, array } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { toolbox } from '../../../utils/charts/story_config';
 import readme from './gauge.md';
 import GlGauge from './gauge.vue';
@@ -16,7 +14,7 @@ const template = `
   />
 `;
 
-function generateProps({
+const generateProps = ({
   value = 48,
   min = 0,
   max = 100,
@@ -24,88 +22,74 @@ function generateProps({
   option = {},
   thresholds = [38, 82],
   splitNumber = 10,
-} = {}) {
-  return {
-    option: {
-      default: object('EChart Options', option),
-    },
-    value: {
-      default: number('Value', value),
-    },
-    min: {
-      default: number('Min', min),
-    },
-    max: {
-      default: number('Max', max),
-    },
-    thresholds: {
-      default: array('Thresholds', thresholds),
-    },
-    text: {
-      default: textKnob('Detail Text', text),
-    },
-    splitNumber: {
-      default: number('Split Number', splitNumber),
-    },
-  };
-}
+} = {}) => ({
+  option,
+  value,
+  min,
+  max,
+  thresholds,
+  text,
+  splitNumber,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlGauge },
+  props: Object.keys(argTypes),
+  template,
+});
 
-documentedStoriesOf('charts/gauge-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: { GlGauge },
-    template,
-  }))
-  .add('one threshold', () => ({
-    props: generateProps({
-      value: 65,
-      thresholds: [85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('two thresholds', () => ({
-    props: generateProps({
-      value: 90,
-      thresholds: [60, 85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('no thresholds', () => ({
-    props: generateProps({
-      value: 90,
-      thresholds: [],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('with custom detail text', () => ({
-    props: generateProps({
-      value: 90,
-      text: '90Mbps',
-      thresholds: [60, 85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('with NaN values', () => ({
-    props: generateProps({
-      min: 'not a number value',
-      max: 'not a number value',
-      value: 'not a number value',
-      thresholds: [60, 85],
-    }),
-    components: { GlGauge },
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const OneThreshold = Template.bind({});
+OneThreshold.args = generateProps({
+  value: 65,
+  thresholds: [85],
+});
+
+export const TwoThresholds = Template.bind({});
+TwoThresholds.args = generateProps({
+  value: 90,
+  thresholds: [60, 85],
+});
+
+export const NoThresholds = Template.bind({});
+NoThresholds.args = generateProps({
+  value: 90,
+  thresholds: [],
+});
+
+export const WithCustomDetailText = Template.bind({});
+WithCustomDetailText.args = generateProps({
+  value: 90,
+  text: '90Mbps',
+  thresholds: [60, 85],
+});
+
+export const WithNaNValues = Template.bind({});
+WithNaNValues.args = generateProps({
+  min: 'not a number value',
+  max: 'not a number value',
+  value: 'not a number value',
+  thresholds: [60, 85],
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    toolbox,
+  },
+});
+
+export default {
+  title: 'charts/gauge-chart',
+  component: GlGauge,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-    }),
-    components: { GlGauge },
-    template,
-  }));
+    },
+  },
+};

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/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/components/utilities/intersperse/intersperse.documentation.js

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

package/src/components/utilities/intersperse/intersperse.md

@@ -1,5 +1,3 @@
-## Intersperse
-
 The intersperse component separates a list of elements
 by a given character (the default is `, `).