@gitlab/ui 36.5.1 → 37.0.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/components/charts/series_label/series_label.documentation.js

@@ -1,7 +1,5 @@
-import examples from './examples';
 import description from './series_label.md';
 
 export default {
   description,
-  examples,
 };

package/src/components/charts/series_label/series_label.md

@@ -1,3 +1 @@
-# Chart Series Label
-
 Displays chart data series name as a label for chart legend, tooltip, etc.

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

@@ -1,6 +1,4 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
 import { GlChartSeriesLabel } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { colorPaletteDefault } from '../../../utils/charts/theme';
 import {
   SERIES_NAME,
@@ -10,67 +8,72 @@ import {
 } from '../../../utils/stories_utils';
 import readme from './series_label.md';
 
-const components = {
-  GlChartSeriesLabel,
-};
-
-const generateProps = ({ color = colorPaletteDefault[0], type = 'solid' } = {}) => ({
-  color: {
-    default: text('Color', color),
-  },
-  type: {
-    default: text('Series Type', type),
-  },
+const generateProps = ({
+  color = colorPaletteDefault[0],
+  type = 'solid',
+  text = SERIES_NAME[SERIES_NAME_SHORT],
+} = {}) => ({
+  color,
+  type,
+  text,
 });
 
-const template = `<gl-chart-series-label
+const template = `
+  <gl-chart-series-label
     :color="color"
     :type="type"
   >
-    {{$options.text}}
+    {{ text }}
   </gl-chart-series-label>`;
 
-documentedStoriesOf('charts/chart-series-label', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps({ color: '' }),
-    template,
-    text: SERIES_NAME[SERIES_NAME_SHORT],
-  }))
-  .add('with long name', () => ({
-    components,
-    props: generateProps({ color: '' }),
-    template,
-    text: SERIES_NAME[SERIES_NAME_LONG],
-  }))
-  .add('with long name with no spaces', () => ({
-    components,
-    props: generateProps({ color: '' }),
-    template,
-    text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
-  }))
-  .add('with color dashed', () => ({
-    components,
-    props: generateProps({ type: 'dashed' }),
-    template,
-    text: SERIES_NAME[SERIES_NAME_SHORT],
-  }))
-  .add('with color', () => ({
-    components,
-    props: generateProps(),
-    template,
-    text: SERIES_NAME[SERIES_NAME_SHORT],
-  }))
-  .add('with color and long name', () => ({
-    components,
-    props: generateProps(),
-    template,
-    text: SERIES_NAME[SERIES_NAME_LONG],
-  }))
-  .add('with color and long name with no spaces', () => ({
-    components,
-    props: generateProps(),
-    template,
-    text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
-  }));
+const Template = (_args, { argTypes }) => ({
+  components: {
+    GlChartSeriesLabel,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({ color: '' });
+
+export const WithLongName = Template.bind({});
+WithLongName.args = generateProps({ color: '', text: SERIES_NAME[SERIES_NAME_LONG] });
+
+export const WithLongNameWithNoSpaces = Template.bind({});
+WithLongNameWithNoSpaces.args = generateProps({
+  color: '',
+  text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
+});
+
+export const WithColorDashed = Template.bind({});
+WithColorDashed.args = generateProps({ type: 'dashed', text: SERIES_NAME[SERIES_NAME_SHORT] });
+
+export const WithColor = Template.bind({});
+WithColor.args = generateProps({ text: SERIES_NAME[SERIES_NAME_SHORT] });
+
+export const WithColorAndLongName = Template.bind({});
+WithColorAndLongName.args = generateProps({ text: SERIES_NAME[SERIES_NAME_LONG] });
+
+export const WithColorAndLongNameWithNoSpaces = Template.bind({});
+WithColorAndLongNameWithNoSpaces.args = generateProps({
+  text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
+});
+
+export default {
+  title: 'charts/chart-series-label',
+  component: GlChartSeriesLabel,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+  },
+};

package/src/scss/utilities.scss

@@ -865,6 +865,46 @@
 .gl-bg-chevron-down\! {
   background-image: url($gl-icon-chevron-down) !important
 }
+.gl-border {
+  border: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border\! {
+  border: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-t {
+  border-top: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-t\! {
+  border-top: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-b {
+  border-bottom: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-b\! {
+  border-bottom: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-l {
+  border-left: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-l\! {
+  border-left: solid $gl-border-size-1 $border-color !important;
+}
+
+.gl-border-r {
+  border-right: solid $gl-border-size-1 $border-color;
+}
+
+.gl-border-r\! {
+  border-right: solid $gl-border-size-1 $border-color !important;
+}
+
 .gl-border-none {
   border-style: none;
 }

package/src/scss/utility-mixins/border.scss

@@ -3,6 +3,27 @@
 *
 * naming convention: gl-border-{position}-{style}
 */
+
+@mixin gl-border {
+  border: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-t {
+  border-top: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-b {
+  border-bottom: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-l {
+  border-left: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-r {
+  border-right: solid $gl-border-size-1 $border-color;
+}
+
 @mixin gl-border-none {
   border-style: none;
 }

package/src/scss/variables.scss

@@ -391,6 +391,8 @@ $gl-fonts: (
   'regular': $gl-regular-font,
 );
 
+$border-color: $gray-100 !default;
+
 // use px for borders rather than rem
 // we don't want borders to scale with font size
 // 1px can end up being rounded to 0 after

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_radio_group/examples/form_radio_group.options_array.example.js

@@ -1,59 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'String option',
-      options: ['String option', {
-        text: 'Object option',
-        value: 'object'
-      }, {
-        html: '<i>HTML</i> option',
-        value: 'html'
-      }, {
-        text: 'Disabled option',
-        value: 'disabledOption',
-        disabled: true
-      }]
-    };
-  }
-
-};
-
-/* 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-radio-group',{attrs:{"options":_vm.options},model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}})};
-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_radio_group/examples/form_radio_group.slots.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selected: 'one'
-    };
-  }
-
-};
-
-/* 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-radio-group',{model:{value:(_vm.selected),callback:function ($$v) {_vm.selected=$$v;},expression:"selected"}},[_c('gl-form-radio',{attrs:{"value":"one"}},[_vm._v("One")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"two"},scopedSlots:_vm._u([{key:"help",fn:function(){return [_vm._v("Help text")]},proxy:true}])},[_vm._v("\n    Two\n    ")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"three"}},[_vm._v("Three")]),_vm._v(" "),_c('gl-form-radio',{attrs:{"value":"four","disabled":""}},[_vm._v("Disabled option")])],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_radio_group/examples/index.js

@@ -1,17 +0,0 @@
-import FormRadioGroupOptionsArray from './form_radio_group.options_array.example';
-import FormRadioGroupSlots from './form_radio_group.slots.example';
-
-var index = [{
-  name: 'Radio Group',
-  items: [{
-    id: 'form-radio-group-slots',
-    name: 'Form Radio Group using Slots',
-    component: FormRadioGroupSlots
-  }, {
-    id: 'form-radio-group-options-array',
-    name: 'Form Radio Group using Options Array',
-    component: FormRadioGroupOptionsArray
-  }]
-}];
-
-export default index;