@gitlab/ui 33.1.1 → 35.1.0

package/documentation/components_documentation.js

@@ -9,9 +9,7 @@ export { default as GlFormTextDocumentation } from '../src/components/base/form/
 export { default as GlFormComboboxDocumentation } from '../src/components/base/form/form_combobox/form_combobox.documentation';
 export { default as GlGaugeChartDocumentation } from '../src/components/charts/gauge/gauge.documentation';
 export { default as GlTokenSelectorDocumentation } from '../src/components/base/token_selector/token_selector.documentation';
-export { default as GlNavItemDropdownDocumentation } from '../src/components/base/nav/nav_item_dropdown.documentation';
 export { default as GlNavDocumentation } from '../src/components/base/nav/nav.documentation';
-export { default as GlNavItemDocumentation } from '../src/components/base/nav/nav_item.documentation';
 export { default as GlFormCheckboxTreeDocumentation } from '../src/components/base/form/form_checkbox_tree/form_checkbox_tree.documentation';
 export { default as GlMarkdownDocumentation } from '../src/components/base/markdown/markdown.documentation';
 export { default as GlNavbarDocumentation } from '../src/components/base/navbar/navbar.documentation';

package/documentation/documented_stories.js

@@ -122,6 +122,10 @@ export const setupStorybookReadme = () =>
         'GlIntersectionObserver',
         'GlInfiniteScroll',
         'GlColumnChart',
+        'GlTruncate',
+        'GlNav',
+        'GlNavItem',
+        'GlNavItemDropdown',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "33.1.1",
+  "version": "35.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,21 +85,21 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "10.0.1",
-    "@gitlab/stylelint-config": "3.0.0",
+    "@gitlab/eslint-plugin": "10.0.2",
+    "@gitlab/stylelint-config": "4.0.0",
     "@gitlab/svgs": "2.2.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.14",
-    "@storybook/addon-docs": "6.4.14",
-    "@storybook/addon-essentials": "6.4.14",
+    "@storybook/addon-a11y": "6.4.15",
+    "@storybook/addon-docs": "6.4.15",
+    "@storybook/addon-essentials": "6.4.15",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.14",
-    "@storybook/addon-storyshots-puppeteer": "6.4.14",
-    "@storybook/addon-viewport": "6.4.14",
-    "@storybook/theming": "6.4.14",
-    "@storybook/vue": "6.4.14",
+    "@storybook/addon-storyshots": "6.4.15",
+    "@storybook/addon-storyshots-puppeteer": "6.4.15",
+    "@storybook/addon-viewport": "6.4.15",
+    "@storybook/theming": "6.4.15",
+    "@storybook/vue": "6.4.15",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -129,7 +129,7 @@
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
-    "postcss": "^7.0.30",
+    "postcss": "8.4.5",
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
@@ -147,7 +147,7 @@
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-readme": "5.0.9",
-    "stylelint": "13.9.0",
+    "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
     "vue": "^2.6.11",

package/src/components/base/accordion/accordion.vue

@@ -4,9 +4,12 @@ import { uniqueId } from 'lodash';
 export default {
   name: 'GlAccordion',
   provide() {
+    const accordionId = uniqueId('accordion-set-');
+    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
     return {
-      defaultHeaderLevel: this.headerLevel,
-      accordionSetId: this.autoCollapse && uniqueId('accordion-set-'),
+      defaultHeaderLevel: () => this.headerLevel,
+      accordionSetId: () => this.autoCollapse && accordionId,
     };
   },
   props: {

package/src/components/base/accordion/accordion_item.spec.js

@@ -16,8 +16,8 @@ describe('GlAccordionItem', () => {
         GlCollapseToggle: GlCollapseToggleDirective,
       },
       provide: {
-        defaultHeaderLevel,
-        accordionSetId,
+        defaultHeaderLevel: () => defaultHeaderLevel,
+        accordionSetId: () => accordionSetId,
       },
       propsData: {
         title: defaultTitle,

package/src/components/base/accordion/accordion_item.stories.js

@@ -26,8 +26,8 @@ const Template = (args) => ({
   props: Object.keys(args),
   template,
   provide: {
-    defaultHeaderLevel: defaultValue('headerLevel'),
-    accordionSetId: '1',
+    defaultHeaderLevel: () => defaultValue('headerLevel'),
+    accordionSetId: () => '1',
   },
 });
 

package/src/components/base/accordion/accordion_item.vue

@@ -51,11 +51,11 @@ When set, it will ensure the accordion item is initially visible
   },
   computed: {
     headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel;
+      const level = this.headerLevel || this.defaultHeaderLevel();
       return `h${level}`;
     },
     accordion() {
-      return this.accordionSetId || undefined;
+      return this.accordionSetId() || undefined;
     },
     icon() {
       return this.isVisible ? 'chevron-down' : 'chevron-right';

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

@@ -1,10 +1,13 @@
 import Vue from 'vue';
+import { GlAvatar } from '../../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
+const components = { GlAvatar };
+
 const generateImageProps = ({ size = 64, shape = 'circle' } = {}) => ({
   size,
   shape,
@@ -44,6 +47,7 @@ const template = `
 `;
 
 export const Image = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar
@@ -56,18 +60,21 @@ export const Image = (args, { argTypes }) => ({
 Image.args = generateImageProps();
 
 export const ProjectFallback = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template,
 });
 ProjectFallback.args = generateProjectFallbackProps();
 
 export const EmojiProjectName = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template,
 });
 EmojiProjectName.args = generateEmojiProjectProps();
 
 export const WithTooltip = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar
@@ -83,6 +90,7 @@ WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
 
 export default {
   title: 'base/avatar',
+  component: GlAvatar,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -1,10 +1,13 @@
 import Vue from 'vue';
+import { GlAvatarLabeled, GlBadge } from '../../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
+const components = { GlAvatarLabeled };
+
 const generateProps = ({
   label = 'GitLab User',
   subLabel = '@gitlab',
@@ -25,6 +28,7 @@ const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar-labeled
@@ -39,6 +43,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const WithTooltip = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-avatar-labeled
@@ -63,6 +68,7 @@ WithTooltip.argTypes = {
 };
 
 export const WithBadges = (args, { argTypes }) => ({
+  components: { GlAvatarLabeled, GlBadge },
   props: Object.keys(argTypes),
   template: `
       <gl-avatar-labeled
@@ -87,6 +93,7 @@ WithBadges.args = generateProps();
 
 export default {
   title: 'base/avatar/labeled',
+  component: GlAvatarLabeled,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -1,6 +1,9 @@
+import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../../index';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import readme from './avatar_link.md';
 
+const components = { GlAvatarLink, GlAvatar };
+
 const generateDefaultProps = ({
   href = 'https://gitlab.com/gitlab-org/gitlab',
   shape = 'circle',
@@ -23,6 +26,7 @@ const generateImageProps = ({
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
     <gl-avatar-link target="blank" :href="href">
@@ -33,6 +37,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = { ...generateDefaultProps(), ...generateImageProps() };
 
 export const WithLabeledAvatar = (args, { argTypes }) => ({
+  components: { GlAvatarLink, GlAvatarLabeled },
   props: Object.keys(argTypes),
   template: `
   <gl-avatar-link target="blank" :href="href">
@@ -47,6 +52,7 @@ WithLabeledAvatar.args = {
 };
 
 export const WithNoImageAvatar = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
     <gl-avatar-link target="blank" :href="href">
@@ -58,6 +64,7 @@ WithNoImageAvatar.args = { ...generateDefaultProps({}), ...generateLabelsProps({
 
 export default {
   title: 'base/avatar/avatar-link',
+  component: GlAvatarLink,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -28,6 +28,11 @@ When the `collapse` property value is `true` and the `maxVisible` property value
 than the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars
 and display a badge instead.
 
+### Badge description in screen readers
+
+The `badgeSrOnlyText` property provides a meaningful description of the badge that appears
+when avatars are collapsed for screen reader users.
+
 ### Supported sizes
 
 `<avatars-inline>` only supports avatars with `24` or `32` size.

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

@@ -11,10 +11,14 @@ describe('avatars inline', () => {
     { src: 'avatar 2', tooltip: 'Avatar 2' },
     { src: 'avatar 3', tooltip: 'Avatar 3' },
   ];
+  const badgeSrOnlyText = 'additional users';
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(AvatarsInline, {
-      propsData,
+      propsData: {
+        badgeSrOnlyText,
+        ...propsData,
+      },
       stubs: {
         GlTooltip,
       },
@@ -107,4 +111,20 @@ describe('avatars inline', () => {
       });
     });
   });
+
+  describe('a11y', () => {
+    it('renders screen reader only text for the collapse badge', () => {
+      buildWrapper({ avatars, maxVisible: 1, collapsed: true, avatarSize: 32 });
+
+      expect(wrapper.find('[data-testid="badge-sr-only-text"]').text()).toBe(badgeSrOnlyText);
+    });
+
+    it('hides badge text for screen readers', () => {
+      buildWrapper({ avatars, maxVisible: 1, collapsed: true, avatarSize: 32 });
+
+      expect(
+        wrapper.find('[data-testid="collapsed-avatars-badge"]').attributes('aria-hidden')
+      ).toBe('true');
+    });
+  });
 });

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

@@ -1,37 +1,49 @@
+import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '../../../../index';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
-  { src: 'https://picsum.photos/id/1005/32' },
-  { src: 'https://picsum.photos/id/1006/32' },
-  { src: 'https://picsum.photos/id/1009/32' },
-  { src: 'https://picsum.photos/id/1011/32' },
-  { src: 'https://picsum.photos/id/1012/32' },
+  { src: 'https://picsum.photos/id/1005/32', alt: 'Administrator’s user avatar' },
+  { src: 'https://picsum.photos/id/1006/32', alt: 'Ops Manager’s user avatar' },
+  { src: 'https://picsum.photos/id/1009/32', alt: 'Developer’s user avatar' },
+  { src: 'https://picsum.photos/id/1011/32', alt: 'Business Admin’s user avatar' },
+  { src: 'https://picsum.photos/id/1012/32', alt: 'Product designer’s user avatar' },
 ];
 
 const generateProps = (
   avatars = defaultAvatars,
-  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+  {
+    maxVisible = 2,
+    collapsed = true,
+    avatarSize = 24,
+    badgeTooltipProp = '',
+    badgeSrOnlyText = `${avatars.length - maxVisible} additional users`,
+  } = {}
 ) => ({
   maxVisible,
   collapsed,
   avatarSize,
   avatars,
+  badgeTooltipProp,
+  badgeSrOnlyText,
 });
 
 export const Default = (args, { argTypes }) => ({
+  components: { GlAvatarsInline },
   props: Object.keys(argTypes),
   template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible" :badgeTooltipProp="badgeTooltipProp" :badgeSrOnlyText="badgeSrOnlyText">
     </gl-avatars-inline>
     `,
 });
 Default.args = generateProps();
 
 export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  components: { GlAvatarsInline, GlAvatar, GlAvatarLink },
+  directives: { GlTooltip: GlTooltipDirective },
   props: Object.keys(argTypes),
   template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible" :badgeTooltipProp="badgeTooltipProp" :badgeSrOnlyText="badgeSrOnlyText">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
           <gl-avatar :src="avatar.src" :size="avatarSize" />
@@ -45,11 +57,13 @@ WithLinksAndTooltips.args = generateProps(
     ...avatar,
     href: '//gitlab.com',
     tooltip: `Avatar ${index}`,
-  }))
+  })),
+  { badgeTooltipProp: 'tooltip' }
 );
 
 export default {
   title: 'base/avatar/avatars-inline',
+  component: GlAvatarsInline,
   parameters: {
     knobs: { disable: true },
     docs: {

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -29,6 +29,10 @@ export default {
       required: false,
       default: false,
     },
+    badgeSrOnlyText: {
+      type: String,
+      required: true,
+    },
     badgeTooltipProp: {
       type: String,
       required: false,
@@ -111,9 +115,15 @@ export default {
       <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
         {{ badgeTooltipTitle }}
       </gl-tooltip>
-      <span ref="badge" :class="['gl-avatars-inline-badge', badgeSize]">
+      <span
+        ref="badge"
+        data-testid="collapsed-avatars-badge"
+        :class="['gl-avatars-inline-badge', badgeSize]"
+        aria-hidden="true"
+      >
         {{ badgeLabel }}
       </span>
+      <span data-testid="badge-sr-only-text" class="sr-only">{{ badgeSrOnlyText }}</span>
     </div>
   </div>
 </template>

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

@@ -36,23 +36,128 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = generateProps();
+Default.parameters = {
+  storyshots: { disable: true },
+};
 
-export const ActionableWarning = Template.bind({});
-ActionableWarning.args = generateProps({
+export const Variants = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        v-for="variant in $options.badgeVariantOptions"
+        :key="variant"
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        class="gl-mr-3"
+      >{{ variant }}</gl-badge>
+    </div>
+  `,
+  badgeVariantOptions,
+});
+Variants.args = generateProps({
+  variant: badgeVariantOptions.warning,
+});
+Variants.argTypes = {
+  content: {
+    control: { disable: true },
+  },
+  variant: {
+    control: { disable: true },
+  },
+};
+
+export const Actionable = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        v-for="variant in $options.badgeVariantOptions"
+        :key="variant"
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        class="gl-mr-3"
+      >{{ variant }}</gl-badge>
+    </div>
+  `,
+  badgeVariantOptions,
+});
+Actionable.args = generateProps({
   href: '#foo',
   variant: badgeVariantOptions.warning,
 });
+Actionable.parameters = {
+  storyshots: { disable: true },
+};
+Actionable.argTypes = {
+  content: {
+    control: { disable: true },
+  },
+  variant: {
+    control: { disable: true },
+  },
+};
 
-export const LargeDanger = Template.bind({});
-LargeDanger.args = generateProps({
-  size: badgeSizeOptions.lg,
+export const Sizes = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        v-for="size in $options.badgeSizeOptions"
+        :key="size"
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        class="gl-mr-3"
+      >{{ size }}</gl-badge>
+    </div>
+  `,
+  badgeSizeOptions,
+});
+Sizes.args = generateProps({
   variant: badgeVariantOptions.danger,
 });
+Sizes.argTypes = {
+  content: {
+    control: { disable: true },
+  },
+  size: {
+    control: { disable: true },
+  },
+};
 
-export const BadgeIcon = Template.bind({});
+export const BadgeIcon = (args, { argTypes }) => ({
+  components: { GlBadge },
+  props: Object.keys(argTypes),
+  template: `
+    <div>
+      <gl-badge
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+      >{{ content }}</gl-badge>
+      <gl-badge
+        :href="href"
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+      />
+    </div>
+  `,
+});
 BadgeIcon.args = generateProps({
   variant: badgeVariantOptions.success,
   icon: 'calendar',
+  content: 'Badge icon',
 });
 
 export default {
@@ -68,21 +173,21 @@ export default {
   },
   argTypes: {
     variant: {
+      options: Object.keys(badgeVariantOptions),
       control: {
         type: 'select',
-        options: badgeVariantOptions,
       },
     },
     size: {
+      options: Object.keys(badgeSizeOptions),
       control: {
         type: 'select',
-        options: badgeSizeOptions,
       },
     },
     icon: {
+      options: ['', ...iconSpriteInfo.icons],
       control: {
         type: 'select',
-        options: ['', ...iconSpriteInfo.icons],
       },
     },
   },

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

@@ -29,7 +29,7 @@ const generateProps = ({
 });
 
 const Template = (args, { argTypes }) => ({
-  component: {
+  components: {
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
@@ -39,7 +39,7 @@ export const Default = Template.bind({});
 Default.args = generateProps();
 
 const StackedStory = (args, { argTypes }) => ({
-  component: {
+  components: {
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),