@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,86 +0,0 @@
-import GlAvatar from '../avatar/avatar.vue';
-import GlAvatarLabeled from '../avatar_labeled/avatar_labeled.vue';
-import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
-import avatarPath from '../../../../static/img/avatar.png';
-import GlAvatarLink from './avatar_link.vue';
-import readme from './avatar_link.md';
-
-const components = { GlAvatarLink, GlAvatar, GlAvatarLabeled };
-
-const generateDefaultProps = ({
-  href = 'https://gitlab.com/gitlab-org/gitlab',
-  shape = 'circle',
-  size = 32,
-} = {}) => ({
-  href,
-  shape,
-  size,
-});
-
-const generateLabelsProps = ({ label = 'GitLab User', subLabel = '@gitlab' } = {}) => ({
-  label,
-  subLabel,
-});
-
-const generateImageProps = ({ src = avatarPath } = {}) => ({
-  src,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-    <gl-avatar-link target="blank" :href="href">
-      <gl-avatar :src="src" :size="size" :shape="shape" />
-    </gl-avatar-link>
-    `,
-});
-Default.args = { ...generateDefaultProps(), ...generateImageProps() };
-
-export const WithLabeledAvatar = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-  <gl-avatar-link target="blank" :href="href">
-    <gl-avatar-labeled :src="src" :size="size" :shape="shape" :label="label" :sub-label="subLabel" />
-  </gl-avatar-link>
-  `,
-});
-WithLabeledAvatar.args = {
-  ...generateDefaultProps({}),
-  ...generateLabelsProps({}),
-  ...generateImageProps({}),
-};
-
-export const WithNoImageAvatar = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-    <gl-avatar-link target="blank" :href="href">
-      <gl-avatar-labeled :entity-name="label" :label="label" :sub-label="subLabel" :size="size" :shape="shape" />
-    </gl-avatar-link>
-    `,
-});
-WithNoImageAvatar.args = { ...generateDefaultProps({}), ...generateLabelsProps({}) };
-
-export default {
-  title: 'base/avatar/avatar-link',
-  component: GlAvatarLink,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    shape: {
-      options: avatarShapeOptions,
-      control: 'select',
-    },
-    size: {
-      options: avatarSizeOptions,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,124 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import Avatar from '../avatar/avatar.vue';
-import GlTooltip from '../tooltip/tooltip.vue';
-import AvatarsInline from './avatars_inline.vue';
-
-describe('avatars inline', () => {
-  let wrapper;
-  const avatars = [
-    { src: 'avatar 1', tooltip: 'Avatar 1' },
-    { src: 'avatar 2', tooltip: 'Avatar 2' },
-    { src: 'avatar 3', tooltip: 'Avatar 3' },
-  ];
-  const badgeSrOnlyText = 'additional users';
-
-  const buildWrapper = (propsData = {}) => {
-    wrapper = shallowMount(AvatarsInline, {
-      propsData: {
-        badgeSrOnlyText,
-        ...propsData,
-      },
-      stubs: {
-        GlTooltip,
-      },
-    });
-  };
-
-  const findBadgeTooltip = () => wrapper.findComponent(GlTooltip);
-
-  it('displays all avatars when component is not collapsed', () => {
-    buildWrapper({ avatars, maxVisible: 1, avatarSize: 24, collapsed: false });
-
-    expect(wrapper.findAllComponents(Avatar).length).toBe(avatars.length);
-  });
-
-  describe('when component is collapsed and maxVisible is the number of avatars', () => {
-    beforeEach(() => {
-      buildWrapper({ avatars, maxVisible: avatars.length, avatarSize: 24, collapsed: true });
-    });
-
-    it('displays all avatars', () => {
-      expect(wrapper.findAllComponents(Avatar).length).toBe(avatars.length);
-    });
-  });
-
-  it('hides all additional avatars beyond maxVisible', () => {
-    buildWrapper({ avatars, maxVisible: avatars.length - 1, avatarSize: 24, collapsed: true });
-
-    expect(wrapper.findAllComponents(Avatar).length).toBe(2);
-  });
-
-  it('adds md class selector to badge when avatar size is 24', () => {
-    buildWrapper({ avatars, maxVisible: 1, avatarSize: 24, collapsed: true });
-
-    expect(wrapper.find('.gl-avatars-inline-badge').classes()).toContain('md');
-  });
-
-  it('adds lg class selector to badge when avatar size is 32', () => {
-    buildWrapper({ avatars, maxVisible: 1, avatarSize: 32, collapsed: true });
-
-    expect(wrapper.find('.gl-avatars-inline-badge').classes()).toContain('lg');
-  });
-
-  describe('badge tooltips', () => {
-    describe('when badgeTooltipProp is not set', () => {
-      beforeEach(() => {
-        buildWrapper({ avatars, maxVisible: 1, avatarSize: 24, collapsed: true });
-      });
-
-      it('does not render the tooltip', () => {
-        expect(findBadgeTooltip().exists()).toBe(false);
-      });
-    });
-
-    describe('when badge tooltip prop is set but no max characters are set', () => {
-      beforeEach(() => {
-        buildWrapper({
-          avatars,
-          maxVisible: 1,
-          avatarSize: 24,
-          collapsed: true,
-          badgeTooltipProp: 'tooltip',
-        });
-      });
-
-      it('renders the tooltip with the names of the hidden avatars', () => {
-        expect(findBadgeTooltip().text()).toBe('Avatar 2, Avatar 3');
-      });
-    });
-
-    describe('when badge tooltip prop and max characters are set', () => {
-      beforeEach(() => {
-        buildWrapper({
-          avatars,
-          maxVisible: 1,
-          avatarSize: 24,
-          collapsed: true,
-          badgeTooltipProp: 'tooltip',
-          badgeTooltipMaxChars: 11,
-        });
-      });
-
-      it('renders the tooltip with the truncated names of the hidden avatars', () => {
-        expect(findBadgeTooltip().text()).toBe('Avatar 2...');
-      });
-    });
-  });
-
-  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,83 +0,0 @@
-import GlAvatar from '../avatar/avatar.vue';
-import GlAvatarLink from '../avatar_link/avatar_link.vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import { avatarsInlineSizeOptions } from '../../../utils/constants';
-import GlAvatarsInline from './avatars_inline.vue';
-import readme from './avatars_inline.md';
-
-const defaultAvatars = [
-  { src: './img/avatar_1.png', alt: 'Administrator’s user avatar' },
-  { src: './img/avatar_2.png', alt: 'Ops Manager’s user avatar' },
-  { src: './img/avatar_3.png', alt: 'Developer’s user avatar' },
-  { src: './img/avatar_4.png', alt: 'Business Admin’s user avatar' },
-  { src: './img/avatar_5.png', alt: 'Product designer’s user avatar' },
-];
-
-const generateProps = (
-  avatars = defaultAvatars,
-  {
-    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" :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" :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" />
-        </gl-avatar-link>
-      </template>
-    </gl-avatars-inline>
-    `,
-});
-WithLinksAndTooltips.args = generateProps(
-  defaultAvatars.map((avatar, index) => ({
-    ...avatar,
-    href: '//gitlab.com',
-    tooltip: `Avatar ${index}`,
-  })),
-  { badgeTooltipProp: 'tooltip' }
-);
-
-export default {
-  title: 'base/avatar/avatars-inline',
-  component: GlAvatarsInline,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    avatarSize: {
-      options: avatarsInlineSizeOptions,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,83 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Icon from '../icon/icon.vue';
-import Badge from './badge.vue';
-
-describe('badge', () => {
-  let wrapper;
-
-  const findIcon = () => wrapper.findComponent(Icon);
-
-  const createComponent = ({ attrs = {}, propsData = {}, slots } = {}) => {
-    wrapper = shallowMount(Badge, {
-      propsData,
-      attrs,
-      slots,
-    });
-  };
-
-  describe('with "icon" prop', () => {
-    describe.each`
-      scenario                | hasSlot  | iconName     | iconSize | expectedIconSize | expectedRole | expectedAriaLabel
-      ${'icon-only'}          | ${false} | ${'warning'} | ${'md'}  | ${16}            | ${'img'}     | ${'warning'}
-      ${'16px icon and slot'} | ${true}  | ${'warning'} | ${'md'}  | ${16}            | ${undefined} | ${undefined}
-      ${'12px icon and slot'} | ${true}  | ${'warning'} | ${'sm'}  | ${12}            | ${undefined} | ${undefined}
-    `(
-      'with $scenario',
-      ({ iconName, iconSize, expectedIconSize, hasSlot, expectedRole, expectedAriaLabel }) => {
-        beforeEach(() => {
-          const slots = hasSlot ? { default: 'slot-content' } : undefined;
-          createComponent({ propsData: { icon: iconName, iconSize }, slots });
-        });
-
-        it(`sets badge "role" attribute to ${expectedRole}`, () => {
-          expect(wrapper.attributes('role')).toBe(expectedRole);
-        });
-
-        describe('renders icon', () => {
-          it('with correct props', () => {
-            const icon = findIcon();
-            expect(icon.exists()).toBe(true);
-            expect(icon.props('name')).toBe(iconName);
-          });
-
-          it('with correct class', () => {
-            const icon = findIcon();
-
-            expect(icon.classes('gl-mr-2')).toBe(hasSlot);
-          });
-
-          it('with correct size', () => {
-            expect(findIcon().props('size')).toBe(expectedIconSize);
-          });
-        });
-
-        it('sets aria-label', () => {
-          expect(wrapper.attributes('aria-label')).toBe(expectedAriaLabel);
-        });
-      }
-    );
-  });
-
-  describe('without "icon" prop', () => {
-    const mockSlotContent = 'slot-content';
-    beforeEach(() => {
-      createComponent({ slots: { default: mockSlotContent }, attrs: { 'aria-label': 'Success' } });
-    });
-
-    it('renders slot content', () => {
-      expect(wrapper.html()).toContain(mockSlotContent);
-    });
-
-    it('does not render icon', () => {
-      expect(findIcon().exists()).toBe(false);
-    });
-
-    it('sets badge "role" attribute to undefined', () => {
-      expect(wrapper.attributes('role')).toBe(undefined);
-    });
-
-    it('sets aria-label', () => {
-      expect(wrapper.attributes('aria-label')).toBe('Success');
-    });
-  });
-});

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

@@ -1,184 +0,0 @@
-import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import {
-  badgeSizeOptions,
-  badgeVariantOptions,
-  badgeIconSizeOptions,
-} from '../../../utils/constants';
-import { disableControls } from '../../../utils/stories_utils';
-import GlBadge from './badge.vue';
-import readme from './badge.md';
-
-const template = `
-    <gl-badge
-      :href="href"
-      :variant="variant"
-      :size="size"
-      :icon="icon"
-      :iconSize="iconSize"
-    >{{ content }}</gl-badge>
-  `;
-
-const defaultValue = (prop) => GlBadge.props[prop].default;
-
-const generateProps = ({
-  variant = defaultValue('variant'),
-  size = defaultValue('size'),
-  href = '',
-  content = 'TestBadge',
-  icon = '',
-  iconSize = defaultValue('iconSize'),
-} = {}) => ({
-  variant,
-  size,
-  href,
-  content,
-  icon,
-  iconSize,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlBadge },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-Default.tags = ['skip-visual-test'];
-
-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"
-        :iconSize="iconSize"
-        class="gl-mr-3"
-      >{{ variant }}</gl-badge>
-    </div>
-  `,
-  badgeVariantOptions,
-});
-Variants.args = generateProps({
-  variant: badgeVariantOptions.warning,
-});
-Variants.argTypes = disableControls(['content', 'variant']);
-
-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"
-        :iconSize="iconSize"
-        class="gl-mr-3"
-      >{{ variant }}</gl-badge>
-    </div>
-  `,
-  badgeVariantOptions,
-});
-Actionable.args = generateProps({
-  href: '#foo',
-  variant: badgeVariantOptions.warning,
-});
-Actionable.tags = ['skip-visual-test'];
-Actionable.argTypes = disableControls(['content', 'variant']);
-
-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"
-        :iconSize="iconSize"
-        class="gl-mr-3"
-      >{{ size }}</gl-badge>
-    </div>
-  `,
-  badgeSizeOptions,
-});
-Sizes.args = generateProps({
-  variant: badgeVariantOptions.danger,
-});
-Sizes.argTypes = disableControls(['content', 'size']);
-
-export const BadgeIcon = (args, { argTypes }) => ({
-  components: { GlBadge },
-  props: Object.keys(argTypes),
-  template: `
-    <div class="gl-display-flex gl-gap-3">
-      <gl-badge variant="tier" icon="license">16px icon</gl-badge>
-      <gl-badge variant="tier" icon="license-sm" iconSize="sm">12px icon</gl-badge>
-    </div>
-  `,
-});
-BadgeIcon.argTypes = disableControls(['content', 'iconSize']);
-
-export const IconOnly = (args, { argTypes }) => ({
-  components: { GlBadge },
-  props: Object.keys(argTypes),
-  template: `
-    <div>
-      <gl-badge
-        :href="href"
-        :variant="variant"
-        :size="size"
-        :icon="icon"
-        :iconSize="iconSize"
-      />
-    </div>
-  `,
-});
-IconOnly.args = generateProps({
-  variant: badgeVariantOptions.success,
-  icon: 'calendar',
-});
-
-export default {
-  title: 'base/badge',
-  component: GlBadge,
-  parameters: {
-    bootstrapComponent: 'b-badge',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      options: Object.keys(badgeVariantOptions),
-      control: 'select',
-    },
-    size: {
-      options: Object.keys(badgeSizeOptions),
-      control: 'select',
-    },
-    icon: {
-      options: ['', ...iconSpriteInfo.icons],
-      control: 'select',
-    },
-    iconSize: {
-      options: Object.keys(badgeIconSizeOptions),
-      control: 'select',
-    },
-  },
-};

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

@@ -1,112 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlButton from '../button/button.vue';
-import GlBanner from './banner.vue';
-
-describe('banner component', () => {
-  const propsData = {
-    title: 'Test Title',
-    buttonText: 'Button text',
-    buttonLink: 'http://gitlab.com',
-  };
-  const svgPath = 'https://about.gitlab.com/images/press/logo/svg/gitlab-icon-rgb.svg';
-  let wrapper;
-
-  const createWrapper = ({ props, slots = {} } = {}) => {
-    wrapper = shallowMount(GlBanner, {
-      propsData: { ...propsData, ...props },
-      slots,
-    });
-  };
-
-  const findButton = () => wrapper.findComponent(GlButton);
-
-  describe('Promotion', () => {
-    describe('with only the required props', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
-
-      it('should render the correct title', () => {
-        expect(wrapper.find('h2').text()).toEqual(propsData.title);
-      });
-
-      it('should render the button', () => {
-        const button = findButton();
-
-        expect(button.text()).toEqual(propsData.buttonText);
-        expect(button.attributes('href')).toEqual(propsData.buttonLink);
-      });
-
-      it('should not render the illustration', () => {
-        expect(wrapper.find('img').exists()).toBe(false);
-      });
-
-      it('should emit a `close` event after the close button is clicked', () => {
-        expect(wrapper.emitted('close')).toBe(undefined);
-        wrapper.find('.gl-banner-close').vm.$emit('click');
-        expect(wrapper.emitted('close')).toHaveLength(1);
-      });
-
-      it('should emit a `primary` event when the primary button is clicked', () => {
-        expect(wrapper.emitted('primary')).toBe(undefined);
-        wrapper.find('[data-testid="gl-banner-primary-button"]').vm.$emit('click');
-        expect(wrapper.emitted('primary')).toHaveLength(1);
-      });
-    });
-
-    describe('with image', () => {
-      beforeEach(() => {
-        createWrapper({
-          props: { svgPath },
-        });
-      });
-
-      it('should render the illustration', () => {
-        expect(wrapper.find('img').exists()).toBe(true);
-      });
-    });
-
-    describe('with buttonAttributes', () => {
-      beforeEach(() => {
-        createWrapper({
-          props: {
-            buttonAttributes: {
-              target: '_blank',
-            },
-          },
-        });
-      });
-
-      it('should pass the attributes to the button', () => {
-        expect(findButton().attributes('target')).toBe('_blank');
-      });
-    });
-  });
-
-  describe('Introduction', () => {
-    beforeEach(() => {
-      createWrapper({
-        props: { variant: 'introduction' },
-      });
-    });
-
-    it('should add the `gl-banner-introduction` class', () => {
-      expect(wrapper.classes()).toContain('gl-banner-introduction');
-    });
-  });
-
-  describe('custom actions', () => {
-    it('shows the custom actions', () => {
-      const mockAction = {
-        name: 'MockAction',
-        template: '<span>Mock Action</span>',
-      };
-
-      createWrapper({
-        slots: { actions: mockAction },
-      });
-
-      expect(wrapper.findComponent(mockAction).exists()).toBe(true);
-    });
-  });
-});