@gitlab/ui 36.5.1 → 37.0.0

package/src/components/base/icon/icon.stories.js

@@ -1,6 +1,7 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlIcon } from '../../../index';
 import { iconSizeOptions } from '../../../utils/constants';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './icon.md';
 
 const components = {
@@ -41,6 +42,7 @@ export default {
     storyshots: { disable: true },
   },
   argTypes: {
+    ...disableControls(['useDeprecatedSizes']),
     name: {
       control: {
         type: 'select',
@@ -53,10 +55,5 @@ export default {
         options: iconSizeOptions,
       },
     },
-    useDeprecatedSizes: {
-      control: {
-        disable: true,
-      },
-    },
   },
 };

package/src/components/base/paginated_list/__snapshots__/paginated_list.spec.js.snap

@@ -42,7 +42,7 @@ exports[`Paginated List Pagination renders 1 item on page 7 with page size of 2
     limits="[object Object]"
     nexttext="Next"
     perpage="2"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="7"
   />
@@ -119,7 +119,7 @@ exports[`Paginated List Pagination renders 3 items on page 2 with default page s
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="2"
   />
@@ -222,7 +222,7 @@ exports[`Paginated List Pagination renders 5 items on page 1 for a page size of
     limits="[object Object]"
     nexttext="Next"
     perpage="5"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -390,7 +390,7 @@ exports[`Paginated List Pagination renders 10 items for a default page size of 1
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -597,7 +597,7 @@ exports[`Paginated List Pagination renders 13 items for a default page size of 2
     limits="[object Object]"
     nexttext="Next"
     perpage="20"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="13"
     value="1"
   />
@@ -717,7 +717,7 @@ exports[`Paginated List Search states renders the list filtered by search result
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="2"
     value="1"
   />
@@ -837,7 +837,7 @@ exports[`Paginated List Searchless states renders the list with nested items, wh
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="2"
     value="1"
   />
@@ -888,7 +888,7 @@ exports[`Paginated List props filter filters on default "id" key 1`] = `
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />
@@ -939,7 +939,7 @@ exports[`Paginated List props filter filters on provided "myKey" key 1`] = `
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />
@@ -990,7 +990,7 @@ exports[`Paginated List props filter filters with provided filter function 1`] =
     limits="[object Object]"
     nexttext="Next"
     perpage="10"
-    prevtext="Prev"
+    prevtext="Previous"
     totalitems="1"
     value="1"
   />

package/src/components/base/pagination/pagination.stories.js

@@ -4,7 +4,11 @@ import GlPagination from './pagination.vue';
 
 const components = { GlPagination };
 
-const generateBaseProps = ({ prevText = 'Prev', nextText = 'Next', disabled = false } = {}) => ({
+const generateBaseProps = ({
+  prevText = 'Previous',
+  nextText = 'Next',
+  disabled = false,
+} = {}) => ({
   prevText,
   nextText,
   disabled,

package/src/components/base/pagination/pagination.vue

@@ -82,7 +82,7 @@ export default {
     prevText: {
       type: String,
       required: false,
-      default: 'Prev',
+      default: 'Previous',
     },
     /**
      * When using the compact pagination, use this prop to pass the next page number

package/src/components/base/toggle/toggle.stories.js

@@ -1,5 +1,6 @@
 import { GlToggle } from '../../../index';
 import { toggleLabelPosition } from '../../../utils/constants';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './toggle.md';
 
 const defaultValue = (prop) => GlToggle.props[prop].default;
@@ -53,6 +54,7 @@ export default {
     },
   },
   argTypes: {
+    ...disableControls(['name']),
     labelPosition: {
       control: {
         type: 'select',
@@ -69,8 +71,5 @@ export default {
         type: 'text',
       },
     },
-    name: {
-      control: { disable: true },
-    },
   },
 };

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

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

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

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

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

@@ -1,11 +1,6 @@
 import { GlHeatmap } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { toolbox } from '../../../utils/charts/story_config';
-import readme from '../area/area.md';
-
-const components = {
-  GlHeatmap,
-};
+import { disableControls } from '../../../utils/stories_utils';
 
 function generateData() {
   let data = [
@@ -21,46 +16,65 @@ function generateData() {
   return data;
 }
 
-documentedStoriesOf('charts/heatmap', readme)
-  .add('default', () => ({
-    data() {
-      return {
-        data: generateData(),
-        xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-        yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-        xAxisName: 'Hour',
-        yAxisName: 'Day',
-      };
-    },
-    components,
-    template: `<gl-heatmap
-      :data-series="data"
-      :x-axis-labels="xAxisLabels"
-      :y-axis-labels="yAxisLabels"
-      :x-axis-name="xAxisName"
-      :y-axis-name="yAxisName"
-    />`,
-  }))
-  .add('with toolbox', () => ({
-    data() {
-      return {
-        data: generateData(),
-        xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-        yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-        xAxisName: 'Hour',
-        yAxisName: 'Day',
-        option: {
-          toolbox,
-        },
-      };
-    },
-    components,
-    template: `<gl-heatmap
+const template = `
+    <gl-heatmap
       :data-series="data"
       :x-axis-labels="xAxisLabels"
       :y-axis-labels="yAxisLabels"
       :x-axis-name="xAxisName"
       :y-axis-name="yAxisName"
-      :options="option"
-    />`,
-  }));
+      :options="options"
+    />
+`;
+
+const generateProps = ({
+  data = generateData(),
+  xAxisLabels = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
+  yAxisLabels = ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
+  xAxisName = 'Hour',
+  yAxisName = 'Day',
+  options = {},
+} = {}) => ({
+  data,
+  xAxisLabels,
+  yAxisLabels,
+  xAxisName,
+  yAxisName,
+  options,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlHeatmap,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({ options: { toolbox } });
+
+export default {
+  title: 'charts/heatmap',
+  component: GlHeatmap,
+  parameters: {
+    knobs: { disable: true },
+  },
+  argTypes: {
+    ...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