@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,109 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import Avatar from '../avatar/avatar.vue';
-import GlLink from '../link/link.vue';
-import AvatarLabeled from './avatar_labeled.vue';
-
-describe('avatar labeled', () => {
-  let wrapper;
-
-  const label = 'avatar label';
-  const subLabel = 'avatar label';
-
-  const buildWrapper = (propsData, slots) => {
-    wrapper = shallowMount(AvatarLabeled, {
-      propsData: {
-        label: '',
-        ...propsData,
-      },
-      slots,
-    });
-  };
-
-  it('sets avatar alt attribute to an empty string', () => {
-    const altText = 'alt text';
-
-    buildWrapper({ alt: altText });
-
-    expect(wrapper.findComponent(Avatar).props('alt')).not.toEqual(altText);
-  });
-
-  it('displays the avatar label', () => {
-    buildWrapper({ label });
-
-    expect(wrapper.find('.gl-avatar-labeled-label').text()).toEqual(label);
-  });
-
-  it('displays the avatar sub label', () => {
-    buildWrapper({ subLabel });
-
-    expect(wrapper.find('.gl-avatar-labeled-sublabel').text()).toEqual(subLabel);
-  });
-
-  it('displays `meta` slot', () => {
-    buildWrapper(
-      { label, subLabel },
-      { meta: '<span data-testid="user-meta" class="gl-p-1">Foo Bar</span>' }
-    );
-
-    expect(wrapper.find('[data-testid="user-meta"]').exists()).toBe(true);
-  });
-
-  it('displays `default` slot', () => {
-    buildWrapper(
-      { label, subLabel },
-      { default: '<span data-testid="default-slot">Foo Bar</span>' }
-    );
-
-    expect(wrapper.find('[data-testid="default-slot"]').exists()).toBe(true);
-  });
-
-  describe('with labels as rows', () => {
-    it('adds the correct css classes', () => {
-      buildWrapper({ label, subLabel, inlineLabels: true });
-
-      expect(wrapper.find('.gl-avatar-labeled-labels').classes('inline-labels')).toBe(true);
-    });
-  });
-
-  describe('with label links', () => {
-    beforeEach(() => {
-      buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });
-    });
-
-    describe('with label link', () => {
-      const findLabelLink = () => wrapper.findAllComponents(GlLink).at(0);
-
-      it('displays the label link', () => {
-        const labelLink = findLabelLink();
-        expect(labelLink.text()).toBe(label);
-        expect(labelLink.attributes('href')).toBe('http://label');
-      });
-
-      it('navigates to label link when avatar is clicked', () => {
-        const labelLink = findLabelLink();
-        const labelLinkClickSpy = jest.spyOn(labelLink.element, 'click');
-
-        wrapper.findComponent(Avatar).vm.$emit('click');
-
-        expect(labelLinkClickSpy).toHaveBeenCalled();
-      });
-    });
-
-    it('displays the sub-label link', () => {
-      const subLabelLink = wrapper.findAllComponents(GlLink).at(1);
-      expect(subLabelLink.text()).toBe(subLabel);
-      expect(subLabelLink.attributes('href')).toBe('http://subLabel');
-    });
-  });
-
-  describe('without label links', () => {
-    beforeEach(() => {
-      buildWrapper({ label, subLabel });
-    });
-
-    it('does not display any link', () => {
-      expect(wrapper.findAllComponents(GlLink).exists()).toBe(false);
-    });
-  });
-});

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

@@ -1,187 +0,0 @@
-import Vue from 'vue';
-import GlBadge from '../badge/badge.vue';
-import GlButton from '../button/button.vue';
-import GlIcon from '../icon/icon.vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
-import avatarPath from '../../../../static/img/avatar.png';
-import GlAvatarLabeled from './avatar_labeled.vue';
-import readme from './avatar_labeled.md';
-
-Vue.directive('gl-tooltip', GlTooltipDirective);
-
-const components = { GlAvatarLabeled };
-
-const generateProps = ({
-  label = 'GitLab User',
-  subLabel = '@gitlab',
-  size = 32,
-  shape = 'circle',
-  src = avatarPath,
-  inlineLabels = false,
-  labelLink,
-} = {}) => ({
-  label,
-  subLabel,
-  size,
-  shape,
-  src,
-  inlineLabels,
-  labelLink,
-});
-
-const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
-  tooltipText,
-  placement,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-      />
-    `,
-});
-Default.args = generateProps();
-
-export const WithInlineLabels = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-        :inline-labels="inlineLabels"
-      />
-    `,
-});
-WithInlineLabels.args = generateProps({ inlineLabels: true });
-
-export const WithTooltip = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-        :title="tooltipText"
-        v-gl-tooltip="{ placement }"
-      />
-    `,
-});
-WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
-WithTooltip.argTypes = {
-  placement: {
-    options: tooltipPlacements,
-    control: 'select',
-  },
-};
-
-export const WithBadges = (args, { argTypes }) => ({
-  components: { GlAvatarLabeled, GlBadge },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-      >
-        <template #meta>
-          <div class="gl-p-1">
-            <gl-badge class="gl-display-flex!" size="sm" variant="info">2FA</gl-badge>
-          </div>
-          <div class="gl-p-1">
-            <gl-badge class="gl-display-flex!" size="sm" variant="danger">Blocked</gl-badge>
-          </div>
-        </template>
-      </gl-avatar-labeled>
-    `,
-});
-WithBadges.args = generateProps();
-
-export const WithDefaultSlot = (args, { argTypes }) => ({
-  components: { GlAvatarLabeled, GlButton },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-      >
-        <template>
-          <gl-button class="gl-mt-3 gl-align-self-start" size="small">Follow</gl-button>
-        </template>
-      </gl-avatar-labeled>
-    `,
-});
-WithDefaultSlot.args = generateProps({ size: 64 });
-
-export const WithLinks = (args, { argTypes }) => ({
-  components: { GlAvatarLabeled, GlBadge, GlIcon },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :label-link="labelLink"
-        :src="src"
-        :label="label"
-      >
-        <template #meta>
-          <gl-icon
-            v-gl-tooltip="'Public - The project can be accessed without any authentication.'"
-            name="earth"
-            class="gl-text-secondary gl-ml-2"
-          />
-        </template>
-        <div class="gl-max-w-75">
-          <p class="gl-mb-0 gl-mt-2 gl-font-sm">GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider.</p>
-        </div>
-      </gl-avatar-labeled>
-    `,
-});
-WithLinks.args = generateProps({
-  size: 48,
-  shape: 'rect',
-  label: 'GitLab.org / GitLab',
-  subLabel: '',
-  labelLink: 'https://gitlab.com/gitlab-org/gitlab',
-});
-
-export default {
-  title: 'base/avatar/labeled',
-  component: GlAvatarLabeled,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      options: avatarSizeOptions,
-      control: 'select',
-    },
-    shape: {
-      options: avatarShapeOptions,
-      control: 'select',
-    },
-  },
-};

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