@gitlab/ui 32.45.0 → 32.48.0

package/documentation/documented_stories.js

@@ -60,6 +60,7 @@ export const setupStorybookReadme = () =>
         'GlTableLite',
         'GlAlert',
         'GlSparklineChart',
+        'GlAvatarsInline',
         'GlSprintf',
         'GlLink',
         'GlChart',
@@ -88,7 +89,9 @@ export const setupStorybookReadme = () =>
         'GlFormCheckbox',
         'GlAccordion',
         'GlAccordionItem',
+        'GlIntersperse',
         'GlDaterangePicker',
+        'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
         'GlMarkdown',
@@ -100,6 +103,14 @@ export const setupStorybookReadme = () =>
         'GlAvatar',
         'GlAvatarLink',
         'GlPagination',
+        'GlSkeletonLoader',
+        'GlLabel',
+        'GlStackedColumnChart',
+        'GlDiscreteScatterChart',
+        'GlFormCombobox',
+        'GlChartTooltip',
+        'GlInputGroupText',
+        'GlGaugeChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

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

@@ -1,15 +1,6 @@
 import description from './avatar_labeled.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  slots: [
-    {
-      name: 'meta',
-      description:
-        'Meta data to add to the avatar. Generally used for badges or user status emoji.',
-    },
-  ],
 };

package/src/components/base/avatar_labeled/avatar_labeled.md

@@ -1,6 +1,3 @@
-# Avatar labeled
-
-<!-- STORY -->
 ## Usage
 
 Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases,
@@ -12,7 +9,7 @@ properties as the avatar component to modify the avatar’s shape and size.
 
 ## Using the component
 
-~~~js
+```js
 <gl-avatar-labeled
   :shape="shape"
   :size="size"
@@ -20,4 +17,4 @@ properties as the avatar component to modify the avatar’s shape and size.
   :label="label"
   :sub-label="subLabel"
 />
-~~~
+```

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

@@ -1,62 +1,32 @@
-import { text, withKnobs, select } from '@storybook/addon-knobs';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
-function generateProps() {
-  const props = {
-    label: {
-      type: String,
-      default: text('label', 'GitLab User'),
-    },
-    subLabel: {
-      type: String,
-      default: text('subLabel', '@gitlab'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, 32),
-    },
-    shape: {
-      type: String,
-      default: select('shape', avatarShapeOptions, 'circle'),
-    },
-    src: {
-      type: String,
-      default: text(
-        'src',
-        'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64'
-      ),
-    },
-  };
-
-  return props;
-}
-
-function generateTooltipProps() {
-  const props = {
-    tooltipText: {
-      type: String,
-      default: text('tooltipText', 'Avatar tooltip'),
-    },
-    placement: {
-      type: String,
-      default: select('placement', tooltipPlacements, 'top'),
-    },
-  };
+const generateProps = ({
+  label = 'GitLab User',
+  subLabel = '@gitlab',
+  size = 32,
+  shape = 'circle',
+  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+} = {}) => ({
+  label,
+  subLabel,
+  size,
+  shape,
+  src,
+});
 
-  return props;
-}
+const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
+  tooltipText,
+  placement,
+});
 
-documentedStoriesOf('base/avatar/labeled', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -65,13 +35,12 @@ documentedStoriesOf('base/avatar/labeled', readme)
         :sub-label="subLabel"
       />
     `,
-  }))
-  .add('with-tooltip', () => ({
-    props: {
-      ...generateProps(),
-      ...generateTooltipProps(),
-    },
-    template: `
+});
+Default.args = generateProps();
+
+export const WithTooltip = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -82,10 +51,20 @@ documentedStoriesOf('base/avatar/labeled', readme)
         v-gl-tooltip="{ placement }"
       />
     `,
-  }))
-  .add('with-badges', () => ({
-    props: generateProps(),
-    template: `
+});
+WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
+WithTooltip.argTypes = {
+  placement: {
+    control: {
+      type: 'select',
+      options: tooltipPlacements,
+    },
+  },
+};
+
+export const WithBadges = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -103,4 +82,31 @@ documentedStoriesOf('base/avatar/labeled', readme)
         </template>
       </gl-avatar-labeled>
     `,
-  }));
+});
+WithBadges.args = generateProps();
+
+export default {
+  title: 'base/avatar/labeled',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: avatarSizeOptions,
+      },
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: avatarShapeOptions,
+      },
+    },
+  },
+};

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -49,6 +49,7 @@ export default {
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>
+        <!-- @slot Metadata to add to the avatar. Generally used for badges or user status emoji. -->
         <slot name="meta"></slot>
       </div>
       <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link">

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

@@ -1,8 +1,6 @@
 import * as description from './avatars_inline.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
 };

package/src/components/base/avatars_inline/avatars_inline.md

@@ -1,12 +1,10 @@
-## Avatars inline
-
 Use `<avatars-inline />` to display multiple avatars organized in a single row.
 
 ### Basic usage
 
 The `avatars` property accepts an array of objects that contains the avatar properties. By default,
 `<avatars-inline />` expects each object contained in the array to have the same shape as the
-properties of the  `<avatar />` component. You can customize the display of each avatar by
+properties of the `<avatar />` component. You can customize the display of each avatar by
 overriding the default slot:
 
 ```html

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

@@ -1,7 +1,4 @@
-import { number, boolean, object, select, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
-
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
@@ -12,53 +9,61 @@ const defaultAvatars = [
   { src: 'https://picsum.photos/id/1012/32' },
 ];
 
-function generateProps(avatars = defaultAvatars) {
-  const props = {
-    maxVisible: {
-      type: Number,
-      default: number('maxVisible', 2),
-    },
-    collapsed: {
-      type: Boolean,
-      default: boolean('collapsed', true),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarsInlineSizeOptions, 24),
-    },
-    avatars: {
-      type: Array,
-      default: object('avatars', avatars),
-    },
-  };
-
-  return props;
-}
+const generateProps = (
+  avatars = defaultAvatars,
+  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+) => ({
+  maxVisible,
+  collapsed,
+  avatarSize,
+  avatars,
+});
 
-documentedStoriesOf('base/avatar/avatars-inline', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
     </gl-avatars-inline>
     `,
-  }))
-  .add('with links and tooltips', () => ({
-    props: generateProps(
-      defaultAvatars.map((avatar, index) => ({
-        ...avatar,
-        href: '//gitlab.com',
-        tooltip: `Avatar ${index}`,
-      }))
-    ),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+});
+Default.args = generateProps();
+
+export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
-          <gl-avatar :src="avatar.src" :size="size" />
+          <gl-avatar :src="avatar.src" :size="avatarSize" />
         </gl-avatar-link>
       </template>
     </gl-avatars-inline>
     `,
-  }));
+});
+WithLinksAndTooltips.args = generateProps(
+  defaultAvatars.map((avatar, index) => ({
+    ...avatar,
+    href: '//gitlab.com',
+    tooltip: `Avatar ${index}`,
+  }))
+);
+
+export default {
+  title: 'base/avatar/avatars-inline',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    avatarSize: {
+      control: {
+        type: 'select',
+        options: avatarsInlineSizeOptions,
+      },
+    },
+  },
+};

package/src/components/base/form/form_combobox/form_combobox.documentation.js

@@ -1,14 +1,6 @@
-import examples from './examples';
 import * as description from './form_combobox.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  events: [
-    {
-      event: 'value-selected',
-      description: 'Emitted when a value is selected.',
-    },
-  ],
 };

package/src/components/base/form/form_combobox/form_combobox.md

@@ -1,5 +1,3 @@
-# GlFormCombobox
-
 Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component
 with synchronous autocomplete dropdown. It behaves as follows:
 

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

@@ -1,41 +1,41 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { tokenList, labelText } from './constants';
 import readme from './form_combobox.md';
 import GlFormCombobox from './form_combobox.vue';
 
-const components = {
-  GlFormCombobox,
-};
-
-const getProps = () => {
-  return {
-    tokenList: {
-      type: Array,
-      default: object('tokens', tokenList),
-    },
-    labelText: {
-      type: String,
-      default: text('label text', labelText),
-    },
-  };
-};
+const getProps = () => ({
+  tokenList,
+  labelText,
+});
 
-documentedStoriesOf('base/form/form-combobox', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: getProps(),
-    data: () => {
-      return {
-        value: '',
-      };
-    },
-    template: `
+const Template = (args) => ({
+  components: { GlFormCombobox },
+  data: () => {
+    return {
+      value: '',
+    };
+  },
+  props: Object.keys(args),
+  template: `
       <gl-form-combobox
         v-model="value"
         :token-list="tokenList"
         :labelText="labelText"
       />
     `,
-  }));
+});
+
+export const Default = Template.bind({});
+Default.args = getProps();
+
+export default {
+  title: 'base/form/form-combobox',
+  component: GlFormCombobox,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -128,6 +128,10 @@ export default {
     selectToken(value) {
       this.$emit('input', value);
       this.closeSuggestions();
+      /**
+       * Emitted when a value is selected.
+       * @event value-selected
+       */
       this.$emit('value-selected', value);
     },
   },

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