@gitlab/ui 36.4.0 → 36.7.0

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

@@ -1,12 +1,7 @@
 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,
-};
-
 function generateData() {
   let data = [
     [5, 0, 5],
@@ -21,46 +16,68 @@ 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
+const 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,
-        },
-      };
+      :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 },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    components,
-    template: `<gl-heatmap
-      :data-series="data"
-      :x-axis-labels="xAxisLabels"
-      :y-axis-labels="yAxisLabels"
-      :x-axis-name="xAxisName"
-      :y-axis-name="yAxisName"
-      :options="option"
-    />`,
-  }));
+  },
+  argTypes: {
+    showToolbox: { control: { disable: true } },
+    toolboxZoomIconPath: { control: { disable: true } },
+    toolboxBackIconPath: { control: { disable: true } },
+    toolboxRestoreIconPath: { control: { disable: true } },
+    toolboxSaveAsImageIconPath: { control: { disable: true } },
+    dataSeries: { control: { disable: true } },
+    formatTooltipText: { control: { disable: true } },
+    legendAverageText: { control: { disable: true } },
+    legendMaxText: { control: { disable: true } },
+    responsive: { control: { disable: true } },
+  },
+};

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;
 }
@@ -3295,6 +3335,14 @@
   grid-column-start: 1 !important
 }
 
+.gl-grid-template-columns-2 {
+  grid-template-columns: 1fr 1fr
+}
+
+.gl-grid-template-columns-2\! {
+  grid-template-columns: 1fr 1fr !important
+}
+
 .gl-list-style-none {
   list-style-type: 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/utility-mixins/grid.scss

@@ -10,3 +10,7 @@
 @mixin gl-grid-col-start-1 {
   grid-column-start: 1;
 }
+
+@mixin gl-grid-template-columns-2 {
+  grid-template-columns: 1fr 1fr;
+}

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/dist/components/base/drawer/examples/drawer.basic.example.js

@@ -1,58 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      drawerOpened: false
-    };
-  },
-
-  methods: {
-    toggle() {
-      this.drawerOpened = !this.drawerOpened;
-    },
-
-    close() {
-      this.drawerOpened = false;
-    }
-
-  }
-};
-
-/* 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('div',[_c('gl-button',{on:{"click":_vm.toggle}},[_vm._v("Toggle drawer")]),_vm._v(" "),_c('gl-drawer',{attrs:{"open":_vm.drawerOpened},on:{"close":_vm.close},scopedSlots:_vm._u([{key:"header",fn:function(){return [_vm._v("Your Title")]},proxy:true}])},[_vm._v(" "),_c('div',[_c('p',[_vm._v("First Body Item")])])])],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/drawer/examples/index.js

@@ -1,13 +0,0 @@
-import Drawer from './drawer.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'drawer',
-    name: 'Default Drawer',
-    description: 'Drawer',
-    component: Drawer
-  }]
-}];
-
-export default index;

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