@gitlab/ui 32.45.1 → 32.49.0

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

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

@@ -1,5 +1,3 @@
-import { array, text, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlIntersperse } from '../../../../index';
 import readme from './intersperse.md';
 
@@ -11,44 +9,46 @@ const template = `
   </div>
   `;
 
-function generateProps({
+const generateProps = ({
   separator = ', ',
   lastSeparator = '',
   items = ['Foo', 'Bar', 'Baz', 'Qaz'],
-} = {}) {
-  return {
-    items: {
-      default: array('items', items),
-    },
-    separator: {
-      default: text('separator', separator),
-    },
-    lastSeparator: {
-      default: text('lastSeparator', lastSeparator),
-    },
-  };
-}
+} = {}) => ({
+  separator,
+  lastSeparator,
+  items,
+});
 
-documentedStoriesOf('utilities/intersperse', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: {
-      GlIntersperse,
-    },
-    template,
-  }))
-  .add('custom seperator', () => ({
-    props: generateProps({ separator: '-' }),
-    components: {
-      GlIntersperse,
-    },
-    template,
-  }))
-  .add('custom last separator', () => ({
-    props: generateProps({ lastSeparator: ' and ' }),
-    components: {
-      GlIntersperse,
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlIntersperse,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'utilities/intersperse',
+  component: GlIntersperse,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    template,
-  }));
+  },
+};
+
+export const CustomSeparator = Template.bind({});
+CustomSeparator.args = generateProps({
+  separator: '-',
+});
+
+export const CustomLastSeparator = Template.bind({});
+CustomLastSeparator.args = generateProps({
+  lastSeparator: ' and ',
+});

package/dist/components/base/avatar_labeled/examples/avatar.labeled.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-labeled',{attrs:{"size":32,"src":"https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64","label":"GitLab User","sub-label":"gitlab"}})};
-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__;