@gitlab/ui 32.67.0 → 33.1.0

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

@@ -1,6 +1,4 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { GlColumnChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   mockDefaultLineData,
   mockDefaultBarData,
@@ -8,11 +6,6 @@ import {
   mockSecondaryTrendlineData,
 } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';
-import readme from './column.md';
-
-const components = {
-  GlColumnChart,
-};
 
 const template = `
   <gl-column-chart
@@ -27,7 +20,7 @@ const template = `
   />
   `;
 
-function generateProps({
+const generateProps = ({
   bars = mockDefaultBarData,
   lines = [],
   option = {},
@@ -36,85 +29,65 @@ function generateProps({
   xAxisType = 'category',
   secondaryData = [],
   secondaryDataTitle = '',
-} = {}) {
-  return {
-    bars: {
-      default: object('Chart Data', bars),
-    },
-    lines: {
-      default: object('Line chart Data', lines),
-    },
-    secondaryData: {
-      default: object('Secondary Data', secondaryData),
-    },
-    option: {
-      default: object('Echart Options', option),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    secondaryDataTitle: {
-      default: text('Secondary Y Axis Title', secondaryDataTitle),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-    xAxisType: {
-      default: text('X Axis Type', xAxisType),
-    },
-  };
-}
+} = {}) => ({
+  bars,
+  lines,
+  option,
+  yAxisTitle,
+  xAxisTitle,
+  xAxisType,
+  secondaryData,
+  secondaryDataTitle,
+});
 
-documentedStoriesOf('charts/column-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with line series', () => ({
-    props: generateProps({ lines: mockDefaultLineData }),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: 1,
-          },
-        ],
-      },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+const Template = (args, { argTypes }) => ({
+  components: { GlColumnChart },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const WithLineSeries = Template.bind({});
+WithLineSeries.args = generateProps({
+  lines: mockDefaultLineData,
+});
+
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  option: {
+    dataZoom: [
+      {
+        type: 'slider',
+        startValue: 1,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis', () => ({
-    props: generateProps({
-      legend: true,
-      secondaryData: mockSecondaryBarData,
-      secondaryDataTitle: 'New bar data',
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis line', () => ({
-    props: generateProps({
-      legend: true,
-      secondaryData: mockSecondaryTrendlineData,
-      secondaryDataTitle: 'New line data',
-    }),
-    components,
-    template,
-  }));
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    toolbox,
+  },
+});
+
+export const SecondaryYAxis = Template.bind({});
+SecondaryYAxis.args = generateProps({
+  legend: true,
+  secondaryData: mockSecondaryBarData,
+  secondaryDataTitle: 'New bar data',
+});
+
+export const SecondaryYAxisLine = Template.bind({});
+SecondaryYAxisLine.args = generateProps({
+  legend: true,
+  secondaryData: mockSecondaryTrendlineData,
+  secondaryDataTitle: 'New line data',
+});
+
+export default {
+  title: 'charts/column-chart',
+  component: GlColumnChart,
+};

package/src/scss/utilities.scss

@@ -2908,18 +2908,6 @@
   }
 }
 
-.gl-flex-sm-wrap {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: wrap;
-  }
-}
-
-.gl-flex-sm-wrap\! {
-  @include gl-media-breakpoint-up(sm) {
-  flex-wrap: wrap !important;
-  }
-}
-
 .gl-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -3196,13 +3184,13 @@
   justify-content: flex-start !important;
 }
 
-.gl-justify-content-md-start {
+.gl-md-justify-content-start {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-start;
   }
 }
 
-.gl-justify-content-md-start\! {
+.gl-md-justify-content-start\! {
   @include gl-media-breakpoint-up(md) {
   justify-content: flex-start !important;
   }
@@ -3967,6 +3955,14 @@
   width: $gl-spacing-scale-20 !important;
 }
 
+.gl-w-28 {
+  width: $gl-spacing-scale-28;
+}
+
+.gl-w-28\! {
+  width: $gl-spacing-scale-28 !important;
+}
+
 .gl-w-eighth {
   width: 12.5%;
 }
@@ -4339,6 +4335,14 @@
   min-width: $gl-spacing-scale-8 !important;
 }
 
+.gl-min-w-9 {
+  min-width: $gl-spacing-scale-9;
+}
+
+.gl-min-w-9\! {
+  min-width: $gl-spacing-scale-9 !important;
+}
+
 .gl-min-w-10 {
   min-width: $gl-spacing-scale-10;
 }
@@ -4820,16 +4824,6 @@
 .gl-pt-2\! {
   padding-top: $gl-spacing-scale-2 !important;
 }
-.gl-pt-md-2 {
-  @include gl-media-breakpoint-up(md) {
-    padding-top: $gl-spacing-scale-2;
-  }
-}
-.gl-pt-md-2\! {
-  @include gl-media-breakpoint-up(md) {
-    padding-top: $gl-spacing-scale-2 !important;
-  }
-}
 .gl-pt-3 {
   padding-top: $gl-spacing-scale-3;
 }
@@ -5092,12 +5086,12 @@
 .gl-mt-n1\! {
   margin-top: -$gl-spacing-scale-1 !important;
 }
-.gl-mt-md-n2 {
+.gl-md-mt-n2 {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
   }
 }
-.gl-mt-md-n2\! {
+.gl-md-mt-n2\! {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2 !important;
   }

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

@@ -79,13 +79,6 @@
   }
 }
 
-// Deprecated, prefer `gl-sm-flex-wrap`
-@mixin gl-flex-sm-wrap {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-flex-wrap;
-  }
-}
-
 @mixin gl-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -224,7 +217,7 @@
   justify-content: flex-start;
 }
 
-@mixin gl-justify-content-md-start {
+@mixin gl-md-justify-content-start {
   @include gl-media-breakpoint-up(md) {
     @include gl-justify-content-start;
   }

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

@@ -65,6 +65,10 @@
   width: $gl-spacing-scale-20;
 }
 
+@mixin gl-w-28 {
+  width: $gl-spacing-scale-28;
+}
+
 @mixin gl-w-eighth {
   width: 12.5%;
 }
@@ -267,6 +271,10 @@
   min-width: $gl-spacing-scale-8;
 }
 
+@mixin gl-min-w-9 {
+  min-width: $gl-spacing-scale-9;
+}
+
 @mixin gl-min-w-10 {
   min-width: $gl-spacing-scale-10;
 }

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

@@ -202,12 +202,6 @@
   padding-top: $gl-spacing-scale-2;
 }
 
-@mixin gl-pt-md-2 {
-  @include gl-media-breakpoint-up(md) {
-    padding-top: $gl-spacing-scale-2;
-  }
-}
-
 @mixin gl-pt-3 {
   padding-top: $gl-spacing-scale-3;
 }
@@ -386,7 +380,7 @@
   margin-top: -$gl-spacing-scale-1;
 }
 
-@mixin gl-mt-md-n2 {
+@mixin gl-md-mt-n2 {
   @include gl-media-breakpoint-up(md) {
     margin-top: -$gl-spacing-scale-2;
   }

package/src/scss/variables.scss

@@ -19,6 +19,7 @@ $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 $gl-spacing-scale-26: 26 * $grid-size;
+$gl-spacing-scale-28: 28 * $grid-size;
 $gl-spacing-scale-62: 62 * $grid-size;
 
 // Responsive breakpoints

package/dist/components/charts/column/examples/column.basic.example.js

@@ -1,49 +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-column-chart',{attrs:{"bars":[
-    {
-      name: 'Full',
-      data: [
-        ['Joe', 1220],
-        ['Sarah', 932],
-        ['Tom', 901],
-        ['Mary', 934],
-        ['Mike', 1290],
-        ['Ben', 1330],
-        ['Jane', 1320] ],
-    } ],"option":{},"y-axis-title":"Pushes by day","x-axis-title":"User","x-axis-type":"category"}})};
-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/dist/components/charts/column/examples/index.js

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

package/src/components/charts/column/column.md

@@ -1 +0,0 @@
-### Column Chart

package/src/components/charts/column/examples/column.basic.example.vue

@@ -1,22 +0,0 @@
-<template>
-  <gl-column-chart
-    :bars="[
-      {
-        name: 'Full',
-        data: [
-          ['Joe', 1220],
-          ['Sarah', 932],
-          ['Tom', 901],
-          ['Mary', 934],
-          ['Mike', 1290],
-          ['Ben', 1330],
-          ['Jane', 1320],
-        ],
-      },
-    ]"
-    :option="{}"
-    y-axis-title="Pushes by day"
-    x-axis-title="User"
-    x-axis-type="category"
-  />
-</template>

package/src/components/charts/column/examples/index.js

@@ -1,15 +0,0 @@
-import ColumnChartBasicExample from './column.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'column-basic',
-        name: 'Basic',
-        description: 'Basic Column Chart',
-        component: ColumnChartBasicExample,
-      },
-    ],
-  },
-];