@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,103 +0,0 @@
-import emptyServiceDeskCallout from '@gitlab/svgs/dist/illustrations/empty-state/empty-service-desk-md.svg';
-import GlButton from '../button/button.vue';
-import { bannerVariants } from '../../../utils/constants';
-import GlBanner from './banner.vue';
-import readme from './banner.md';
-
-const template = `
-    <gl-banner
-      :title="title"
-      :button-attributes="buttonAttributes"
-      :button-text="buttonText"
-      :button-link="buttonLink"
-      :svg-path="svgPath"
-      :variant="variant"
-    >
-      <p>GitLab Service Desk is a simple way to allow people to create issues in your GitLab instance without needing their own user account. It provides a unique email address for end users to create issues in a project, and replies can be sent either though the GitLab interface or by email. End users will only see the thread though email.</p>
-    </gl-banner>
-`;
-
-const generateProps = ({
-  title = 'Upgrade your plan to activate Service Desk',
-  buttonAttributes = { target: '_blank' },
-  buttonText = 'Upgrade your plan',
-  buttonLink = 'https://gitlab.com',
-  svgPath = emptyServiceDeskCallout,
-  variant = GlBanner.props.variant.default,
-} = {}) => ({
-  title,
-  buttonAttributes,
-  buttonText,
-  buttonLink,
-  svgPath,
-  variant,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlBanner,
-  },
-  props: Object.keys(argTypes),
-  template,
-});
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const NoImage = Template.bind({});
-NoImage.args = generateProps({
-  svgPath: null,
-});
-
-export const Introduction = Template.bind({});
-Introduction.args = generateProps({
-  svgPath: emptyServiceDeskCallout,
-  variant: bannerVariants[1],
-});
-
-export const WithActions = (args, { argTypes }) => ({
-  components: {
-    GlBanner,
-    GlButton,
-  },
-  props: Object.keys(argTypes),
-  template: `
-    <gl-banner
-      :title="title"
-      :button-attributes="buttonAttributes"
-      :button-text="buttonText"
-      :button-link="buttonLink"
-      :svg-path="svgPath"
-      :variant="variant"
-    >
-      <p>There should be a primary button and a link button below this text.</p>
-      <template #actions>
-        <gl-button class="gl-ml-3" variant="link">Ask again later</gl-button>
-      </template>
-    </gl-banner>`,
-});
-WithActions.args = generateProps({
-  title: 'Button with actions banner',
-  buttonText: 'Primary Button',
-  svgPath: null,
-});
-
-export default {
-  title: 'base/banner',
-  component: GlBanner,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      options: bannerVariants,
-      control: 'select',
-    },
-    svgPath: {
-      control: 'text',
-    },
-  },
-};

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

@@ -1,240 +0,0 @@
-import { mount } from '@vue/test-utils';
-import avatarPath1 from '../../../../static/img/avatar.png';
-import avatarPath3 from '../../../../static/img/avatar_1.png';
-import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
-import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue';
-import GlBreadcrumb from './breadcrumb.vue';
-import GlBreadcrumbItem from './breadcrumb_item.vue';
-
-describe('Breadcrumb component', () => {
-  let wrapper;
-
-  const items = [
-    {
-      text: 'first_breadcrumb',
-      href: 'https://gitlab.com',
-      avatarPath: avatarPath1,
-    },
-    {
-      text: 'second_breadcrumb',
-      to: 'to_value',
-    },
-    {
-      text: 'third_breadcrumb',
-      href: 'https://about.gitlab.com',
-      avatarPath: avatarPath3,
-    },
-  ];
-
-  const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]');
-  const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
-  const findOverflowDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
-  const findOverflowingItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
-
-  const findVisibleBreadcrumbItems = () =>
-    findBreadcrumbItems().wrappers.filter((item) => item.isVisible());
-
-  const createComponent = (propsData = { items }) => {
-    wrapper = mount(GlBreadcrumb, {
-      propsData,
-      stubs: {
-        GlBreadcrumbItem,
-        GlDisclosureDropdown,
-      },
-    });
-  };
-
-  const mockElementWidth = (element, widthInPx) => {
-    Object.defineProperty(element, 'clientWidth', {
-      get: () => widthInPx,
-    });
-  };
-
-  const mockWideWrapperWidth = () => {
-    mockElementWidth(wrapper.element, 1000);
-  };
-
-  const mockSmallWrapperWidth = () => {
-    mockElementWidth(wrapper.element, 1);
-  };
-
-  const mockItemsWidths = () => {
-    findBreadcrumbItems().wrappers.forEach((item) => {
-      mockElementWidth(item.element, 100);
-    });
-  };
-
-  describe('items', () => {
-    it('has one breadcrumb-item for each item in the items props', async () => {
-      createComponent();
-      await wrapper.vm.$nextTick();
-
-      expect(findBreadcrumbItems()).toHaveLength(items.length);
-    });
-  });
-
-  describe('ariaLabel', () => {
-    it('uses prop if provided', () => {
-      createComponent({ items, ariaLabel: 'Folder breadcrumbs' });
-
-      expect(wrapper.attributes('aria-label')).toBe('Folder breadcrumbs');
-    });
-
-    it('uses default if prop not provided', () => {
-      createComponent();
-
-      expect(wrapper.attributes('aria-label')).toBe('Breadcrumb');
-    });
-  });
-
-  describe('showMoreLabel', () => {
-    describe('when provided', () => {
-      beforeEach(async () => {
-        createComponent({ items, showMoreLabel: 'More...' });
-        mockSmallWrapperWidth();
-        mockItemsWidths();
-        await wrapper.vm.$nextTick();
-      });
-
-      it('uses prop', () => {
-        expect(findOverflowDropdown().props('toggleText')).toBe('More...');
-      });
-    });
-
-    describe('when not provided', () => {
-      beforeEach(async () => {
-        createComponent();
-        mockSmallWrapperWidth();
-        mockItemsWidths();
-        await wrapper.vm.$nextTick();
-      });
-
-      it('uses default', () => {
-        expect(findOverflowDropdown().props('toggleText')).toBe('Show more breadcrumbs');
-      });
-    });
-  });
-
-  describe('autoResize', () => {
-    describe('by default', () => {
-      beforeEach(async () => {
-        createComponent();
-        mockSmallWrapperWidth();
-        mockItemsWidths();
-        await wrapper.vm.$nextTick();
-      });
-
-      it('moves overflowing items into dropdown', () => {
-        expect(findOverflowDropdown().exists()).toBe(true);
-        expect(findOverflowingItems().length).toBeGreaterThan(0);
-      });
-
-      it('reacts to prop changing to false', async () => {
-        expect(findOverflowDropdown().exists()).toBe(true);
-        await wrapper.setProps({ autoResize: false });
-        await wrapper.vm.$nextTick();
-        expect(findOverflowDropdown().exists()).toBe(false);
-        expect(findBreadcrumbItems().length).toEqual(items.length);
-      });
-    });
-
-    describe('when set to false', () => {
-      beforeEach(async () => {
-        createComponent({ items, autoResize: false });
-        mockSmallWrapperWidth();
-        mockItemsWidths();
-        await wrapper.vm.$nextTick();
-      });
-
-      it('keeps all items visible', () => {
-        expect(findOverflowDropdown().exists()).toBe(false);
-        expect(findBreadcrumbItems().length).toEqual(items.length);
-      });
-
-      it('reacts to prop changing to true', async () => {
-        expect(findOverflowDropdown().exists()).toBe(false);
-        await wrapper.setProps({ autoResize: true });
-        await wrapper.vm.$nextTick();
-        await wrapper.vm.$nextTick(); // otherwise test fails with VUE_VERSION=3
-        expect(findOverflowDropdown().exists()).toBe(true);
-        expect(findOverflowingItems().length).toBeGreaterThan(0);
-      });
-    });
-  });
-
-  describe('avatars', () => {
-    it('renders 2 avatars when 2 avatarPaths are passed', async () => {
-      createComponent();
-      await wrapper.vm.$nextTick();
-
-      expect(findAllAvatars()).toHaveLength(2);
-    });
-  });
-
-  describe('bindings', () => {
-    beforeEach(() => {
-      createComponent();
-      mockWideWrapperWidth();
-    });
-
-    it('first breadcrumb has text, href && ariaCurrent=`false` bound', () => {
-      expect(findBreadcrumbItems().at(0).props()).toMatchObject({
-        text: items[0].text,
-        href: items[0].href,
-        ariaCurrent: false,
-      });
-    });
-
-    it('second breadcrumb has text, to && ariaCurrent=`false` bound', () => {
-      expect(findBreadcrumbItems().at(1).props()).toMatchObject({
-        text: items[1].text,
-        to: items[1].to,
-        ariaCurrent: false,
-      });
-    });
-
-    it('last breadcrumb has text, to && ariaCurrent=`page` bound', () => {
-      expect(findBreadcrumbItems().at(2).props()).toMatchObject({
-        text: items[2].text,
-        href: items[2].href,
-        ariaCurrent: 'page',
-      });
-    });
-  });
-
-  describe('collapsible', () => {
-    describe(`when there is enough room to fit all items`, () => {
-      beforeEach(() => {
-        createComponent();
-        mockWideWrapperWidth();
-      });
-
-      it('should not display collapsed list expander', () => {
-        expect(findOverflowDropdown().exists()).toBe(false);
-      });
-
-      it('should display all items visible', () => {
-        expect(findVisibleBreadcrumbItems()).toHaveLength(items.length);
-      });
-    });
-
-    describe(`when there is NOT enough room to fit all items`, () => {
-      beforeEach(async () => {
-        createComponent();
-        mockSmallWrapperWidth();
-        mockItemsWidths();
-        await wrapper.vm.$nextTick();
-      });
-
-      it('should display overflow dropdown', () => {
-        expect(findOverflowDropdown().exists()).toBe(true);
-      });
-
-      it('moves the overflowing items into the dropdown', () => {
-        const fittingItems = findBreadcrumbItems().length;
-        const overflowingItems = wrapper.findAllComponents(GlDisclosureDropdownItem).length;
-        expect(fittingItems + overflowingItems).toEqual(items.length);
-      });
-    });
-  });
-});

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

@@ -1,100 +0,0 @@
-import avatarPath1 from '../../../../static/img/avatar_1.png';
-import avatarPath2 from '../../../../static/img/avatar_2.png';
-import GlBreadcrumb from './breadcrumb.vue';
-import readme from './breadcrumb.md';
-
-const template = `
-    <gl-breadcrumb
-        :items="items"
-        :aria-label="ariaLabel"
-        :auto-resize="autoResize"
-    />
-  `;
-
-const collapsedTemplate = `
-  <div style="max-width: 300px">
-    <gl-breadcrumb
-        :items="items"
-        :aria-label="ariaLabel"
-        :auto-resize="autoResize"
-    />
-  </div>
-`;
-
-const defaultItems = [
-  {
-    text: 'First item',
-    href: '#',
-    avatarPath: avatarPath1,
-  },
-  {
-    text: 'Second item',
-    href: '#',
-  },
-  {
-    text: 'Third item',
-    href: '#',
-    avatarPath: avatarPath2,
-  },
-  {
-    text: 'Fourth item',
-    to: { name: 'fourth-item' },
-  },
-];
-
-const generateProps = ({ items = defaultItems } = {}) => ({
-  items,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlBreadcrumb,
-  },
-  props: Object.keys(argTypes),
-  template,
-});
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-const CollapsedTemplate = (args, { argTypes }) => ({
-  components: {
-    GlBreadcrumb,
-  },
-  props: Object.keys(argTypes),
-  template: collapsedTemplate,
-});
-
-export default {
-  title: 'base/breadcrumb',
-  component: GlBreadcrumb,
-  parameters: {
-    bootstrapComponent: 'b-breadcrumb',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};
-
-const extraItems = [
-  {
-    text: 'Fifth item',
-    href: '#',
-  },
-  {
-    text: 'Sixth item',
-    href: '#',
-  },
-  {
-    text: 'Seventh item',
-    href: '#',
-  },
-  {
-    text: 'Eighth item',
-    href: '#',
-  },
-];
-
-export const CollapsedItems = CollapsedTemplate.bind({});
-CollapsedItems.args = generateProps({ items: [...defaultItems, ...extraItems] });

package/src/components/base/breadcrumb/breadcrumb_item.spec.js

@@ -1,45 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BLink } from 'bootstrap-vue';
-import BreadcrumbItem from './breadcrumb_item.vue';
-
-describe('Breadcrumb Item Component', () => {
-  let wrapper;
-
-  const item = { href: 'http://about.gitlab.com', to: { name: 'about' }, ariaCurrent: 'page' };
-
-  const findBLink = () => wrapper.findComponent(BLink);
-  const findDefaultSlot = () => wrapper.find('[data-testid="default-slot"]');
-
-  const createComponent = () => {
-    wrapper = shallowMount(BreadcrumbItem, {
-      propsData: {
-        href: item.href,
-        to: item.to,
-        ariaCurrent: item.ariaCurrent,
-      },
-      slots: {
-        default: '<div data-testid="default-slot"></div>',
-      },
-    });
-  };
-
-  describe('slots', () => {
-    it('renders provided content to default slot', () => {
-      createComponent();
-
-      expect(findDefaultSlot().exists()).toBe(true);
-    });
-  });
-
-  describe('bindings', () => {
-    it('passes provided props down to BLink', () => {
-      createComponent();
-
-      const bLink = findBLink();
-
-      expect(bLink.props('to')).toMatchObject(item.to);
-      expect(bLink.props('href')).toBe(item.href);
-      expect(bLink.attributes('aria-current')).toBe(item.ariaCurrent);
-    });
-  });
-});

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

@@ -1,32 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlBroadcastMessage from './broadcast_message.vue';
-import { TYPE_NOTIFICATION } from './constants';
-
-describe('Broadcast message component', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(GlBroadcastMessage, {
-      slots: { default: 'some message' },
-      propsData,
-    });
-  };
-
-  const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
-
-  it('clicking on dismiss button emits a dismiss event', () => {
-    createComponent();
-    findDismissButton().vm.$emit('click');
-    expect(wrapper.emitted('dismiss')).toHaveLength(1);
-  });
-
-  it('dismiss button does not appear when dismissible is false', () => {
-    createComponent({ dismissible: false });
-    expect(findDismissButton().exists()).toBe(false);
-  });
-
-  it('dismiss button always appears for notification broadcast messages', () => {
-    createComponent({ dismissible: false, type: TYPE_NOTIFICATION });
-    expect(findDismissButton().exists()).toBe(true);
-  });
-});

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

@@ -1,112 +0,0 @@
-import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { colorThemes } from '../../../utils/constants';
-import GlBroadcastMessage from './broadcast_message.vue';
-import { TYPE_LIST, TYPE_NOTIFICATION } from './constants';
-import readme from './broadcast_message.md';
-
-const template = `
-    <gl-broadcast-message
-      :icon-name="iconName"
-      :dismissible="dismissible"
-      :dismiss-label="dismissLabel"
-      :theme="theme"
-      :type="type">
-      {{ text }}
-    </gl-broadcast-message>
-  `;
-
-const templateWithTheme = (theme) => `
-  <gl-broadcast-message
-    :icon-name="iconName"
-    :dismissible="dismissible"
-    :dismiss-label="dismissLabel"
-    theme="${theme}"
-    :type="type">
-    {{ text }}
-  </gl-broadcast-message>
-`;
-
-const defaultValue = (prop) => GlBroadcastMessage.props[prop].default;
-
-const generateProps = ({
-  text = 'Tuesday June 12th, at 14:30 UTC we will perform database maintenance that will require up to 1 minute of downtime.',
-  iconName = defaultValue('iconName'),
-  dismissible = defaultValue('dismissible'),
-  dismissLabel = defaultValue('dismissLabel'),
-  theme = defaultValue('theme'),
-  type = defaultValue('type'),
-} = {}) => ({
-  text,
-  iconName,
-  dismissible,
-  dismissLabel,
-  theme,
-  type,
-});
-
-const DefaultStory = (args, { argTypes }) => ({
-  components: {
-    GlBroadcastMessage,
-  },
-  props: Object.keys(argTypes),
-  template: `<div>${template}</div>`,
-});
-export const Default = DefaultStory.bind({});
-Default.args = generateProps();
-
-const NotificationStory = (args, { argTypes }) => ({
-  components: {
-    GlBroadcastMessage,
-  },
-  props: Object.keys(argTypes),
-  template: `<div>${template}</div>`,
-});
-export const Notification = NotificationStory.bind({});
-Notification.args = generateProps({ type: TYPE_NOTIFICATION });
-
-const StackedStory = (args, { argTypes }) => ({
-  components: {
-    GlBroadcastMessage,
-  },
-  props: Object.keys(argTypes),
-  // eslint-disable-next-line unicorn/no-array-callback-reference
-  template: `<div>${Object.keys(colorThemes).map(templateWithTheme).join('')}</div>`,
-});
-export const Stacked = StackedStory.bind({});
-Stacked.args = generateProps();
-Stacked.tags = ['skip-visual-test'];
-
-export const IncreasedSpacing = (args, { argTypes }) => ({
-  components: {
-    GlBroadcastMessage,
-  },
-  props: Object.keys(argTypes),
-  template: `<div style="--gl-broadcast-message-padding-x: 0.5rem;">${template}</div>`,
-});
-IncreasedSpacing.args = generateProps();
-
-export default {
-  title: 'base/broadcast message',
-  component: GlBroadcastMessage,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    iconName: {
-      options: iconSpriteInfo.icons,
-      control: 'select',
-    },
-    theme: {
-      options: Object.keys(colorThemes),
-      control: 'select',
-    },
-    type: {
-      options: TYPE_LIST,
-      control: 'select',
-    },
-  },
-};