@gitlab/ui 32.45.1 → 32.46.0

package/documentation/documented_stories.js

@@ -102,6 +102,8 @@ export const setupStorybookReadme = () =>
         'GlPagination',
         'GlSkeletonLoader',
         'GlLabel',
+        'GlStackedColumnChart',
+        'GlDiscreteScatterChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.45.1",
+  "version": "32.46.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/form/form_group/form_group.scss

@@ -13,6 +13,10 @@
     }
   }
 
+  .optional-label {
+    @include gl-font-weight-normal;
+  }
+
   .invalid-feedback,
   .text-gl-muted {
     @include gl-font-base;

package/src/components/base/form/form_group/form_group.spec.js

@@ -1,17 +1,17 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { BFormGroup } from 'bootstrap-vue';
-import GlFormText from '../form_text/form_text.vue';
 import GlFormGroup from './form_group.vue';
 
 describe('Form group component', () => {
   let wrapper;
 
-  const findDescription = () => {
-    return wrapper.find('[data-testid="label-description"]');
-  };
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+
+  const findLabelDescription = () => findByTestId('label-description');
+  const findOptionalLabel = () => findByTestId('optional-label');
 
-  const createComponent = (options, mountFn = shallowMount) => {
-    wrapper = mountFn(GlFormGroup, {
+  const createComponent = (options) => {
+    wrapper = shallowMount(GlFormGroup, {
       ...options,
     });
   };
@@ -35,73 +35,75 @@ describe('Form group component', () => {
     }
   );
 
-  describe('description slot', () => {
-    it('renders text when label-description prop is defined', () => {
-      const labelDescription = 'description via props';
-
-      createComponent(
-        {
-          propsData: {
-            labelDescription,
-          },
-        },
-        mount
-      );
-
-      expect(findDescription().text()).toBe(labelDescription);
-    });
-
-    it('renders a user provided label-description slot', () => {
-      const labelDescription = 'description via slot';
-
-      createComponent(
-        {
-          slots: {
-            'label-description': 'description via slot',
-          },
-          stubs: {
-            GlFormText,
-          },
-        },
-        mount
-      );
-
-      expect(findDescription().text()).toBe(labelDescription);
-    });
+  describe('label-description slot', () => {
+    const labelDescriptionFromPropOptions = {
+      propsData: { labelDescription: 'label-description from props' },
+    };
+    const labelDescriptionFromSlotOptions = {
+      slots: { 'label-description': 'label-description from slots' },
+    };
+
+    it.each`
+      labelDescriptionFrom | options
+      ${'prop'}            | ${labelDescriptionFromPropOptions}
+      ${'prop'}            | ${labelDescriptionFromPropOptions}
+      ${'slot'}            | ${labelDescriptionFromSlotOptions}
+      ${'slot'}            | ${labelDescriptionFromSlotOptions}
+    `(
+      'when label-description is provided from $labelDescriptionFrom',
+      ({ labelDescriptionFrom, options }) => {
+        createComponent({
+          ...options,
+        });
+
+        expect(findLabelDescription().text()).toContain(
+          `label-description from ${labelDescriptionFrom}`
+        );
+      }
+    );
   });
 
   describe('label slot', () => {
-    it('renders text when label prop is defined', () => {
-      const label = 'label via props';
-
-      createComponent(
-        {
+    const labelFromPropOptions = {
+      propsData: { label: 'label from props' },
+    };
+    const labelFromSlotOptions = {
+      slots: { label: 'label from slots' },
+    };
+
+    it.each`
+      labelFrom | options                 | optional | expectedOptional
+      ${'prop'} | ${labelFromPropOptions} | ${true}  | ${true}
+      ${'prop'} | ${labelFromPropOptions} | ${false} | ${false}
+      ${'slot'} | ${labelFromSlotOptions} | ${true}  | ${false}
+      ${'slot'} | ${labelFromSlotOptions} | ${false} | ${false}
+    `(
+      'when label is provided from $labelFrom, `optional` is $optional',
+      ({ labelFrom, options, optional, expectedOptional }) => {
+        createComponent({
+          ...options,
           propsData: {
-            label,
+            ...options.propsData,
+            optional,
           },
-        },
-        mount
-      );
+        });
 
-      expect(wrapper.text()).toBe(label);
-    });
+        expect(wrapper.text()).toContain(`label from ${labelFrom}`);
+        expect(findOptionalLabel().exists()).toBe(expectedOptional);
+      }
+    );
 
-    it('renders a user provided label slot', () => {
-      const label = 'label via slot';
+    it('renders optionalText when `optional` is true', () => {
+      const optionalText = '(not required)';
 
-      createComponent(
-        {
-          slots: {
-            label: 'label via slot',
-          },
-          stubs: {
-            GlFormText,
-          },
+      createComponent({
+        propsData: {
+          optional: true,
+          optionalText,
         },
-        mount
-      );
+      });
 
-      expect(wrapper.text()).toBe(label);
+      expect(findOptionalLabel().text()).toBe(optionalText);
     });
   });
 });

package/src/components/base/form/form_group/form_group.stories.js

@@ -13,6 +13,8 @@ function generateProps({
   label = 'Label Name',
   description = 'form group description',
   labelDescription = 'form label description',
+  optional = GlFormGroup.props.optional.default,
+  optionalText = GlFormGroup.props.optionalText.default,
   horizontal = false,
 } = {}) {
   return {
@@ -36,6 +38,14 @@ function generateProps({
       type: String,
       default: text('label-description', labelDescription),
     },
+    optional: {
+      type: Boolean,
+      default: boolean('optional', optional),
+    },
+    optionalText: {
+      type: String,
+      default: text('optional-text', optionalText),
+    },
     horizontal: {
       type: Boolean,
       default: boolean('horizontal', horizontal),
@@ -53,6 +63,8 @@ documentedStoriesOf('base/form/form-group', readme)
         :id="id"
         :label="label"
         :label-size="labelSize"
+        :optional="optional"
+        :optional-text="optionalText"
         :description="description"
         :horizontal="horizontal"
         label-for="label1"
@@ -69,6 +81,8 @@ documentedStoriesOf('base/form/form-group', readme)
         id="group-id"
         label="Label Name"
         label-size="sm"
+        :optional="optional"
+        :optional-text="optionalText"
         description="This feature is disabled"
         label-for="input1"
       >
@@ -77,14 +91,21 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with textarea', () => ({
+    props: generateProps({ optional: true }),
     template: `
-      <gl-form-group id="group-id-textarea2" label="Label Name" label-for="textarea2">
+      <gl-form-group
+        id="group-id-textarea2"
+        label="Label Name"
+        label-for="textarea2"
+        :optional="optional"
+        :optional-text="optionalText"
+      >
         <gl-form-textarea id="textarea2" placeholder="Enter something" />
       </gl-form-group>
     `,
   }))
   .add('with label description', () => ({
-    props: generateProps(),
+    props: generateProps({ optional: true }),
     components,
     template: `
       <gl-form-group
@@ -93,6 +114,8 @@ documentedStoriesOf('base/form/form-group', readme)
         :label-size="labelSize"
         :description="description"
         :label-description="labelDescription"
+        :optional="optional"
+        :optional-text="optionalText"
         :horizontal="horizontal"
         label-for="label1"
       >
@@ -125,16 +148,16 @@ documentedStoriesOf('base/form/form-group', readme)
       };
     },
     template: `
-    <gl-form-group
-      :id="id"
-      :label="label"
-      :label-size="labelSize"
-      :description="description"
-      :invalid-feedback="invalidFeedback"
-      :state="state"
-      label-for="label1"
-    >
-      <gl-form-input id="input1" :state="state" v-model.trim="name" />
-    </gl-form-group>
+      <gl-form-group
+        :id="id"
+        :label="label"
+        :label-size="labelSize"
+        :description="description"
+        :invalid-feedback="invalidFeedback"
+        :state="state"
+        label-for="label1"
+      >
+        <gl-form-input id="input1" :state="state" v-model.trim="name" />
+      </gl-form-group>
     `,
   }));

package/src/components/base/form/form_group/form_group.vue

@@ -20,6 +20,16 @@ export default {
       required: false,
       default: '',
     },
+    optional: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    optionalText: {
+      type: String,
+      required: false,
+      default: '(optional)',
+    },
   },
   computed: {
     actualLabelClass() {
@@ -45,11 +55,14 @@ export default {
 </script>
 <template>
   <b-form-group v-bind="$attrs" class="gl-form-group" :label-class="actualLabelClass">
-    <template v-if="hasLabelDescription" #label>
+    <template #label>
       <slot name="label">
         {{ $attrs.label }}
+        <span v-if="optional" class="optional-label" data-testid="optional-label">{{
+          optionalText
+        }}</span>
       </slot>
-      <gl-form-text data-testid="label-description">
+      <gl-form-text v-if="hasLabelDescription" data-testid="label-description">
         <slot name="label-description">{{ labelDescription }}</slot>
       </gl-form-text>
     </template>

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

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

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

@@ -1,13 +1,9 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { GlDiscreteScatterChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import readme from './discrete_scatter.md';
 
-const components = {
-  GlDiscreteScatterChart,
-};
-
-const template = `
+const Template = (args, { argTypes }) => ({
+  components: { GlDiscreteScatterChart },
+  props: Object.keys(argTypes),
+  template: `
   <gl-discrete-scatter-chart
     :data="data"
     :option="option"
@@ -15,9 +11,10 @@ const template = `
     :x-axis-title="xAxisTitle"
     data-testid="discrete-scatter-chart"
   />
-`;
+`,
+});
 
-function generateProps({
+const generateProps = ({
   data = [
     {
       type: 'scatter',
@@ -35,41 +32,32 @@ function generateProps({
   option = {},
   yAxisTitle = 'Pushes per day',
   xAxisTitle = 'Date',
-} = {}) {
-  return {
-    data: {
-      default: object('Chart Data', data),
-    },
-    option: {
-      default: object('EChart Options', option),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-  };
-}
+} = {}) => ({
+  data,
+  option,
+  yAxisTitle,
+  xAxisTitle,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('charts/discrete-scatter-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: 1,
-          },
-        ],
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  option: {
+    dataZoom: [
+      {
+        type: 'slider',
+        startValue: 1,
       },
-    }),
-    components,
-    template,
-  }));
+    ],
+  },
+});
+
+export default {
+  title: 'charts/discrete-scatter-chart',
+  component: GlDiscreteScatterChart,
+  parameters: {
+    knobs: { disable: true },
+  },
+};

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

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

package/src/components/charts/stacked_column/stacked_column.md

@@ -1,5 +1,3 @@
-# Stacked Column Chart
-
 The `presentation` property allows you to change between a stacked and tiled presentation style. It
 is only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.
 

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

@@ -1,6 +1,4 @@
-import { withKnobs, object, text, array, select } from '@storybook/addon-knobs';
 import { GlStackedColumnChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import {
   mockDefaultStackedLineData,
   mockDefaultStackedBarData,
@@ -10,10 +8,6 @@ import { toolbox } from '../../../utils/charts/story_config';
 import { columnOptions } from '../../../utils/constants';
 import readme from './stacked_column.md';
 
-const components = {
-  GlStackedColumnChart,
-};
-
 const template = `
   <gl-stacked-column-chart
     :bars="bars"
@@ -31,7 +25,7 @@ const template = `
 
 const mockSecondaryDataTitle = 'Merges';
 
-function generateProps({
+const generateProps = ({
   bars = mockDefaultStackedBarData,
   lines = [],
   option = {},
@@ -42,98 +36,79 @@ function generateProps({
   presentation = columnOptions.stacked,
   secondaryData = [],
   secondaryDataTitle = '',
-} = {}) {
-  return {
-    bars: {
-      default: object('Bar chart Data', bars),
-    },
-    lines: {
-      default: object('Line chart Data', lines),
-    },
-    option: {
-      default: object('Echart Options', option),
-    },
-    presentation: {
-      default: select('presentation', columnOptions, presentation),
-    },
-    groupBy: {
-      default: array('Group By', groupBy),
-    },
-    xAxisType: {
-      default: text('X Axis Type', xAxisType),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    secondaryDataTitle: {
-      default: text('Secondary Data Title', secondaryDataTitle),
-    },
-    secondaryData: {
-      default: object('Secondary Data', secondaryData),
-    },
-  };
-}
+} = {}) => ({
+  bars,
+  lines,
+  option,
+  presentation,
+  groupBy,
+  xAxisType,
+  xAxisTitle,
+  yAxisTitle,
+  secondaryDataTitle,
+  secondaryData,
+});
 
-documentedStoriesOf('charts/stacked-column-chart', readme)
-  .addDecorator(withKnobs)
-  .add('stacked', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('tiled', () => ({
-    props: generateProps({ presentation: columnOptions.tiled }),
-    components,
-    template,
-  }))
-  .add('stacked with line data', () => ({
-    props: generateProps({ lines: mockDefaultStackedLineData }),
-    components,
-    template,
-  }))
-  .add('tiled with line data', () => ({
-    props: generateProps({ presentation: columnOptions.tiled, lines: mockDefaultStackedLineData }),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            startValue: 1,
-          },
-        ],
+const Template = (args, { argTypes }) => ({
+  components: { GlStackedColumnChart },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Stacked = Template.bind({});
+Stacked.args = generateProps();
+
+export const Tiled = Template.bind({});
+Tiled.args = generateProps({ presentation: columnOptions.tiled });
+
+export const StackedWithLineData = Template.bind({});
+StackedWithLineData.args = generateProps({ lines: mockDefaultStackedLineData });
+
+export const TiledWithLineData = Template.bind({});
+TiledWithLineData.args = generateProps({
+  presentation: columnOptions.tiled,
+  lines: mockDefaultStackedLineData,
+});
+
+export const WithZoomAndScroll = Template.bind({});
+WithZoomAndScroll.args = generateProps({
+  option: {
+    dataZoom: [
+      {
+        startValue: 1,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+    ],
+  },
+});
+
+export const WithToolbox = Template.bind({});
+WithToolbox.args = generateProps({
+  option: {
+    toolbox,
+  },
+});
+
+export const SecondaryYAxis = Template.bind({});
+SecondaryYAxis.args = generateProps({
+  secondaryData: mockSecondaryData,
+  secondaryDataTitle: mockSecondaryDataTitle,
+});
+
+export const SecondaryYAxisLine = Template.bind({});
+SecondaryYAxisLine.args = generateProps({
+  secondaryData: [{ ...mockSecondaryData[0], type: 'line' }],
+  secondaryDataTitle: mockSecondaryDataTitle,
+});
+
+export default {
+  title: 'charts/stacked-column-chart',
+  component: GlStackedColumnChart,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis', () => ({
-    props: generateProps({
-      secondaryData: mockSecondaryData,
-      secondaryDataTitle: mockSecondaryDataTitle,
-    }),
-    components,
-    template,
-  }))
-  .add('secondary Y axis line', () => ({
-    props: generateProps({
-      secondaryData: [{ ...mockSecondaryData[0], type: 'line' }],
-      secondaryDataTitle: mockSecondaryDataTitle,
-    }),
-    components,
-    template,
-  }));
+    },
+  },
+};