@gitlab/ui 32.45.0 → 32.48.0

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/base/form/input_group_text/input_group_text.documentation.js

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './input_group_text.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

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

@@ -1,25 +1,31 @@
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import readme from './input_group_text.md';
 import GlInputGroupText from './input_group_text.vue';
 
-const components = {
-  GlInputGroupText,
-};
-
-const defaultProps = {};
-
-function generateProps(props = {}) {
-  return {
-    ...defaultProps,
-    ...props,
-  };
-}
+const generateProps = (props = {}) => ({
+  ...props,
+});
 
-documentedStoriesOf('base/form/input-group-text', readme).add('default', () => ({
-  components,
-  props: generateProps(),
-  data: () => ({}),
+const Template = (args) => ({
+  components: { GlInputGroupText },
+  props: Object.keys(args),
   template: `
       <gl-input-group-text>Some text</gl-input-group-text>
     `,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/input-group-text',
+  component: GlInputGroupText,
+  parameters: {
+    controls: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/label/label.documentation.js

@@ -1,16 +1,6 @@
-import examples from './examples';
+import description from './label.vue';
 
 export default {
   followsDesignSystem: true,
-  examples,
-  events: [
-    {
-      event: 'click',
-      description: 'Emitted when label is clicked',
-    },
-    {
-      event: 'close',
-      description: 'Emitted when x is clicked',
-    },
-  ],
+  description,
 };

package/src/components/base/label/label.md

@@ -1,15 +1,10 @@
-# Label
-
-<!-- STORY -->
-## Usage
-
 Labels are editable objects that allow users to manually categorize other objects, like issues,
 merge requests, and epics. They have a name, description, and a customizable background color.
 They provide a quick way to recognize which categories the labeled object belongs to.
 
 ## Using the component
 
-~~~js
+```js
 <gl-label
   background-color="#D9C2EE"
   title="Label content"
@@ -18,4 +13,4 @@ They provide a quick way to recognize which categories the labeled object belong
   tooltipPlacement="top"
   target="http://some.url"
 />
-~~~
+```

package/src/components/base/label/label.stories.js

@@ -1,110 +1,84 @@
-import { withKnobs, text, color, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlLabel } from '../../../../index';
 import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './label.md';
 
-const components = {
-  GlLabel,
-};
+const template = `
+  <div class="gl-display-flex">
+    <gl-label
+      :background-color="backgroundColor"
+      :size="size"
+      :title="title"
+      :description="description"
+      :tooltip-placement="tooltipPlacement"
+      :target="target"
+      :scoped="scoped"
+      :show-close-button="showCloseButton"
+      :disabled="disabled"
+    />
+  </div>`;
+
+const Template = (args, { argTypes }) => ({
+  components: { GlLabel },
+  props: Object.keys(argTypes),
+  template,
+});
 
 const generateProps = ({
   title = 'Label title',
   size = labelSizeOptions.default,
   tooltipPlacement = tooltipPlacements.top,
   scoped = false,
+  description = '',
+  target = '#',
+  backgroundColor = '#D9C2EE',
   showCloseButton = false,
-} = {}) => {
-  const props = {
-    backgroundColor: {
-      default: color('Background color', '#D9C2EE'),
-    },
-    title: {
-      default: text('Label title', title),
+  disabled = false,
+} = {}) => ({
+  backgroundColor,
+  title,
+  description,
+  size,
+  tooltipPlacement,
+  target,
+  scoped,
+  showCloseButton,
+  disabled,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const Scoped = Template.bind({});
+Scoped.args = generateProps({ title: 'scoped::label', scoped: true });
+
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = generateProps({ showCloseButton: true });
+
+export default {
+  title: 'base/label',
+  component: GlLabel,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    description: {
-      default: text('Label description', ''),
+  },
+  argTypes: {
+    backgroundColor: {
+      control: {
+        type: 'color',
+      },
     },
     size: {
-      type: String,
-      default: select('Size', labelSizeOptions, size),
+      options: labelSizeOptions,
     },
     tooltipPlacement: {
-      type: String,
-      default: select('Tooltip Placement', tooltipPlacements, tooltipPlacement),
-    },
-    target: {
-      default: text('Link to label target', '#'),
-    },
-    scoped: {
-      default: boolean('Label is scoped', scoped),
-    },
-    showCloseButton: {
-      default: boolean('Show close button', showCloseButton),
+      options: tooltipPlacements,
+      control: {
+        type: 'select',
+      },
     },
-    disabled: {
-      default: boolean('Close button disabled', false),
-    },
-  };
-
-  return props;
+  },
 };
-
-documentedStoriesOf('base/label', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>`,
-  }))
-  .add('scoped', () => ({
-    props: generateProps({ title: 'scoped::label', scoped: true }),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>
-    `,
-  }))
-  .add('with close button', () => ({
-    props: generateProps({ showCloseButton: true }),
-    components,
-    template: `
-      <div class="gl-display-flex">
-      <gl-label
-          :background-color="backgroundColor"
-          :size="size"
-          :title="title"
-          :description="description"
-          :tooltip-placement="tooltipPlacement"
-          :target="target"
-          :scoped="scoped"
-          :show-close-button="showCloseButton"
-          :disabled="disabled"
-      />
-      </div>
-    `,
-  }));

package/src/components/base/label/label.vue

@@ -96,6 +96,26 @@ export default {
       this.splitScopedLabelIndex = this.title.lastIndexOf('::');
     },
   },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    },
+  },
 };
 </script>
 
@@ -106,7 +126,7 @@ export default {
     :class="cssClasses"
     :style="cssVariables"
     v-bind="$attrs"
-    @click="$emit('click', $event)"
+    @click="onClick"
   >
     <gl-link :href="target" class="gl-label-link">
       <span class="gl-label-text">
@@ -122,7 +142,7 @@ export default {
       label="Remove label"
       variant="reset"
       :disabled="disabled"
-      @click="$emit('close', $event)"
+      @click="onClose"
     />
     <gl-tooltip
       v-if="description"

package/src/components/base/skeleton_loader/skeleton_loader.documentation.js

@@ -1,33 +1,6 @@
-import examples from './examples';
 import * as description from './skeleton_loader.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    width: {
-      additionalInfo:
-        'It will be set in the viewbox attr in the <svg />. Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used',
-    },
-    height: {
-      additionalInfo:
-        'It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot. Defaults to the combined height of the lines when default skeleton is used',
-    },
-    uniqueKey: {
-      additionalInfo: 'Defaults to unique id',
-    },
-    preserveAspectRatio: {
-      additionalInfo: 'Aspect ratio option of <svg/>',
-    },
-    baseUrl: {
-      additionalInfo: `Required if you're using <base url="/" /> in your <head />. Defaults to an empty string. This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.`,
-    },
-    lines: {
-      additionalInfo: 'Number of lines to show when using the default skeleton',
-    },
-    equalWidthLines: {
-      additionalInfo: 'If the default skeleton lines should all be the same width',
-    },
-  },
 };

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -1,5 +1,3 @@
-## Usage
-
 Skeleton loaders are to be used when pages or sections can be progressively populated with content,
 such as text and images, as they become available. Generally speaking the first batch of content
 will be the lightest to load and is followed by secondary and tertiary content batches. Each loading

package/src/components/base/skeleton_loader/skeleton_loader.stories.js

@@ -1,14 +1,9 @@
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSkeletonLoader } from '../../../../index';
 import readme from './skeleton_loader.md';
 
-const components = {
-  GlSkeletonLoader,
-};
-
-documentedStoriesOf('base/skeleton-loader', readme).add('default', () => ({
-  props: {},
-  components,
+const Template = (args) => ({
+  components: { GlSkeletonLoader },
+  props: Object.keys(args),
   template: `
   <div style="background: #fff; border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 359px; height: 135px; padding: 1rem; border-radius: 0.25rem;">
     <div style="width: 327px; height: 102px;">
@@ -24,4 +19,23 @@ documentedStoriesOf('base/skeleton-loader', readme).add('default', () => ({
       </gl-skeleton-loader>
     </div>
   </div>`,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export default {
+  title: 'base/skeleton-loader',
+  component: GlSkeletonLoader,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+    controls: {
+      disable: true,
+    },
+  },
+};

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -13,36 +13,60 @@ export default {
   name: 'GlSkeletonLoader',
   functional: true,
   props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
     width: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
     height: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * Aspect ratio option of <svg/>
+     */
     preserveAspectRatio: {
       type: String,
       default: 'xMidYMid meet',
       required: false,
     },
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
     baseUrl: {
       type: String,
       default: '',
       required: false,
     },
+    /**
+     * Defaults to unique id
+     */
     uniqueKey: {
       type: String,
       default: () => uid(),
       required: false,
     },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
     lines: {
       type: Number,
       default: 3,
       required: false,
     },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
     equalWidthLines: {
       type: Boolean,
       default: false,

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,
 };