@gitlab/ui 33.1.0 → 35.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "33.1.0",
+  "version": "35.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -41,6 +41,7 @@
     "test:unit:watch": "yarn test:unit --watch --notify",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js'",
+    "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "NODE_ENV=test IS_VISUAL_TEST=true JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js --updateSnapshot'",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
@@ -60,7 +61,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.4",
+    "dompurify": "^2.3.5",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
@@ -90,15 +91,15 @@
     "@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",
@@ -113,6 +114,7 @@
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "file-loader": "^4.2.0",
+    "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
     "jest": "^26.6.3",

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),

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

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../index';
+import { GlButton, GlButtonGroup, GlBadge, GlDropdown, GlDropdownItem } from '../../../../index';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -111,7 +111,7 @@ IconButton.args = generateProps({
 
 export const DropdownButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         text="Some dropdown"
@@ -129,7 +129,7 @@ DropdownButton.args = generateProps();
 
 export const DropdownIconButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="download"
@@ -149,7 +149,7 @@ DropdownIconButton.args = generateProps();
 
 export const DropdownIconTextButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="notifications"
@@ -168,7 +168,7 @@ DropdownIconTextButton.args = generateProps();
 
 export const DropdownIconOnlyButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="ellipsis_v"
@@ -191,7 +191,7 @@ DropdownIconOnlyButton.args = generateProps({
 
 export const DropdownSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         split
@@ -210,7 +210,7 @@ DropdownSplitButton.args = generateProps({ category: 'primary', variant: 'confir
 
 export const DropdownIconSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         split
@@ -230,7 +230,7 @@ DropdownIconSplitButton.args = generateProps({ category: 'secondary', variant: '
 
 export const DropdownLoadingButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: `
       <gl-dropdown text="Some dropdown" :category="category" :loading="true">
         <gl-dropdown-item>Dropdown item</gl-dropdown-item>
@@ -333,7 +333,7 @@ BorderlessTertiary.args = generateProps({ category: 'tertiary' });
 
 export const LabelButton = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlButtonGroup },
   template: `
       <div>
         <gl-button label>Label</gl-button>
@@ -451,7 +451,7 @@ Sizes.parameters = { controls: { disable: true } };
 
 export const Badges = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlBadge },
   variants: Object.keys(badgeForButtonOptions),
   categories: buttonCategoryOptions,
   style: {
@@ -483,7 +483,7 @@ Badges.parameters = { controls: { disable: true } };
 
 export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlBadge },
   template: `    
       <gl-button variant="confirm" buttonTextClasses="gl-display-flex gl-align-items-center">
           Submit review