@gitlab/ui 36.6.0 → 36.7.0

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/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;

package/dist/components/charts/heatmap/examples/heatmap.custom_options.example.js

@@ -1,79 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      series: (() => {
-        const hours = 24;
-        const days = 7;
-        const res = [];
-
-        for (let x = 0; x < hours; x += 1) {
-          for (let y = 0; y < days; y += 1) {
-            let val = Math.random() * 10;
-
-            if (Math.random() > 0.5) {
-              val = '-';
-            }
-
-            res.push([x, y, val]);
-          }
-        }
-
-        return res;
-      })(),
-      xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-      yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun']
-    };
-  }
-
-};
-
-/* 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-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"options":{
-    xAxis: {
-      splitArea: {
-        show: false,
-      },
-    },
-    yAxis: {
-      splitArea: {
-        show: false,
-      },
-    },
-  }}})};
-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/charts/heatmap/examples/heatmap.hourly.example.js

@@ -1,70 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      series: (() => {
-        const hours = 24;
-        const days = 7;
-        const res = [];
-
-        for (let x = 0; x < hours; x += 1) {
-          for (let y = 0; y < days; y += 1) {
-            let val = Math.random() * 10;
-
-            if (Math.random() > 0.7) {
-              val = '-';
-            }
-
-            res.push([x, y, val]);
-          }
-        }
-
-        return res;
-      })(),
-      xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-      yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-      xAxisName: 'Hour',
-      yAxisName: 'Day'
-    };
-  }
-
-};
-
-/* 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-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"x-axis-name":_vm.xAxisName,"y-axis-name":_vm.yAxisName}})};
-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/charts/heatmap/examples/heatmap.responsive.example.js

@@ -1,70 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      series: (() => {
-        const hours = 24;
-        const days = 7;
-        const res = [];
-
-        for (let x = 0; x < hours; x += 1) {
-          for (let y = 0; y < days; y += 1) {
-            let val = Math.random() * 10;
-
-            if (Math.random() > 0.7) {
-              val = '-';
-            }
-
-            res.push([x, y, val]);
-          }
-        }
-
-        return res;
-      })(),
-      xAxisLabels: ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
-      yAxisLabels: ['Sat', 'Fri', 'Thu', 'Wed', 'Tue', 'Mon', 'Sun'],
-      xAxisName: 'Hour',
-      yAxisName: 'Day'
-    };
-  }
-
-};
-
-/* 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-heatmap',{attrs:{"data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels,"y-axis-labels":_vm.yAxisLabels,"x-axis-name":_vm.xAxisName,"y-axis-name":_vm.yAxisName,"responsive":false}})};
-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/charts/heatmap/examples/heatmap.totals.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      series: (() => {
-        const hours = 12;
-        const days = 20;
-        const res = [];
-
-        for (let x = 0; x < hours; x += 1) {
-          for (let y = 0; y < days; y += 1) {
-            const val = Math.ceil(Math.random() * (y % 12) - 3);
-            res.push([x, y, val]);
-          }
-        }
-
-        return res;
-      })(),
-      xAxisLabels: ['7am', '8am', '9am', '10am', '11am', '12pm', '1pm', '2pm', '3pm', '4pm', '5pm', '6pm']
-    };
-  }
-
-};
-
-/* 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-heatmap',{attrs:{"title":"Pageviews per hour","data-series":_vm.series,"x-axis-labels":_vm.xAxisLabels}})};
-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/charts/heatmap/examples/index.js

@@ -1,31 +0,0 @@
-import CustomOptionsExample from './heatmap.custom_options.example';
-import HourlyExample from './heatmap.hourly.example';
-import CustomResponsiveExample from './heatmap.responsive.example';
-import TotalsExample from './heatmap.totals.example';
-
-var index = [{
-  name: 'Calendar',
-  items: [{
-    id: 'heatmap-hourly',
-    name: 'Hourly breakdown',
-    description: 'HourlyExample',
-    component: HourlyExample
-  }, {
-    id: 'heatmap-totals',
-    name: 'Histograms over time',
-    description: 'TotalsExample',
-    component: TotalsExample
-  }, {
-    id: 'heatmap-custom-options',
-    name: 'Heatmap with no background',
-    description: 'CustomOptionsExample',
-    component: CustomOptionsExample
-  }, {
-    id: 'heatmap-responsive',
-    name: 'Heatmap which is non mobile responsive',
-    description: 'CustomResponsiveExample',
-    component: CustomResponsiveExample
-  }]
-}];
-
-export default index;

package/dist/components/charts/series_label/examples/index.js

@@ -1,13 +0,0 @@
-import SeriesLabelBasicExample from './series_label.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'series-label-basic',
-    name: 'Basic',
-    description: 'Basic Series Label',
-    component: SeriesLabelBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/charts/series_label/examples/series_label.basic.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-chart-series-label',{attrs:{"color":"#1F78D1"}},[_vm._v("Series Name")])};
-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__;

package/src/components/base/form/form_radio_group/examples/form_radio_group.options_array.example.vue

@@ -1,27 +0,0 @@
-<script>
-export default {
-  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>
-
-<template>
-  <!--
-  options: [
-    'String option',
-    { text: 'Object option', value: 'object' },
-    { html: '<i>HTML</i> option', value: 'html' },
-    { text: 'Disabled option', value: 'disabledOption', disabled: true },
-  ],
-  -->
-  <gl-form-radio-group v-model="selected" :options="options" />
-</template>

package/src/components/base/form/form_radio_group/examples/form_radio_group.slots.example.vue

@@ -1,21 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      selected: 'one',
-    };
-  },
-};
-</script>
-
-<template>
-  <gl-form-radio-group v-model="selected">
-    <gl-form-radio value="one">One</gl-form-radio>
-    <gl-form-radio value="two">
-      Two
-      <template #help>Help text</template>
-    </gl-form-radio>
-    <gl-form-radio value="three">Three</gl-form-radio>
-    <gl-form-radio value="four" disabled>Disabled option</gl-form-radio>
-  </gl-form-radio-group>
-</template>