@gitlab/ui 80.13.1 → 80.14.0

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

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

@@ -1,225 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlLoadingIcon from '../loading_icon/loading_icon.vue';
-import GlButton from './button.vue';
-
-describe('button component', () => {
-  let wrapper;
-
-  const buildWrapper = (options = {}) => {
-    wrapper = mount(GlButton, options);
-  };
-  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-
-  it('renders a button', () => {
-    buildWrapper();
-
-    expect(wrapper.element.tagName).toBe('BUTTON');
-  });
-
-  describe('ellipsis button', () => {
-    beforeEach(() => {
-      buildWrapper({
-        propsData: {
-          icon: 'ellipsis_h',
-        },
-      });
-    });
-
-    it('should add `button-ellipsis-horizontal` class', () => {
-      expect(wrapper.classes()).toContain('button-ellipsis-horizontal');
-    });
-  });
-
-  describe('label button', () => {
-    describe('default', () => {
-      beforeEach(() => {
-        buildWrapper({
-          propsData: {
-            label: true,
-          },
-        });
-      });
-
-      it('renders as a span', () => {
-        expect(wrapper.element.tagName).toBe('SPAN');
-      });
-
-      it('should add `btn` and `btn-label` classes', () => {
-        const classes = wrapper.classes();
-        expect(classes).toContain('btn');
-        expect(classes).toContain('btn-label');
-      });
-    });
-
-    it.each`
-      size         | expectedClass
-      ${undefined} | ${'btn-md'}
-      ${'small'}   | ${'btn-sm'}
-    `('applies $expectedClass class when size is $size', ({ size, expectedClass }) => {
-      buildWrapper({
-        propsData: {
-          label: true,
-          size,
-        },
-      });
-
-      expect(wrapper.classes()).toContain(expectedClass);
-    });
-  });
-
-  describe('loading indicator', () => {
-    beforeEach(() => {
-      buildWrapper({
-        propsData: {
-          loading: true,
-        },
-      });
-    });
-
-    it('should render the loading indicator', () => {
-      expect(findLoadingIcon().exists()).toBe(true);
-    });
-
-    it('should render the loading indicator with the `gl-button-loading-indicator` class', () => {
-      expect(findLoadingIcon().classes()).toContain('gl-button-loading-indicator');
-    });
-  });
-
-  it.each`
-    variant      | category       | expectedClass
-    ${'default'} | ${'primary'}   | ${'btn-default'}
-    ${'default'} | ${'secondary'} | ${'btn-default-secondary'}
-    ${'default'} | ${'tertiary'}  | ${'btn-default-tertiary'}
-    ${'confirm'} | ${'primary'}   | ${'btn-confirm'}
-    ${'confirm'} | ${'secondary'} | ${'btn-confirm-secondary'}
-    ${'confirm'} | ${'tertiary'}  | ${'btn-confirm-tertiary'}
-    ${'info'}    | ${'primary'}   | ${'btn-info'}
-    ${'info'}    | ${'secondary'} | ${'btn-info-secondary'}
-    ${'info'}    | ${'tertiary'}  | ${'btn-info-tertiary'}
-    ${'success'} | ${'primary'}   | ${'btn-success'}
-    ${'success'} | ${'secondary'} | ${'btn-success-secondary'}
-    ${'success'} | ${'tertiary'}  | ${'btn-success-tertiary'}
-    ${'danger'}  | ${'primary'}   | ${'btn-danger'}
-    ${'danger'}  | ${'secondary'} | ${'btn-danger-secondary'}
-    ${'danger'}  | ${'tertiary'}  | ${'btn-danger-tertiary'}
-  `(
-    'adds $expectedClass class when variant=$variant and category=$category',
-    ({ variant, category, expectedClass }) => {
-      buildWrapper({
-        propsData: {
-          icon: 'ellipsis_h',
-          variant,
-          category,
-        },
-      });
-
-      expect(wrapper.classes()).toContain(expectedClass);
-    }
-  );
-
-  describe('link button', () => {
-    describe('link to #', () => {
-      beforeEach(() => {
-        buildWrapper({
-          propsData: {
-            href: '#',
-          },
-        });
-      });
-
-      it('should not have a target attribute', () => {
-        expect(wrapper.attributes('target')).toBeUndefined();
-      });
-
-      it('should not have a rel attribute', () => {
-        expect(wrapper.attributes('rel')).toBeUndefined();
-      });
-    });
-
-    describe('target blank', () => {
-      it('should set secure rels for hrefs in a different domain', () => {
-        buildWrapper({
-          propsData: {
-            target: '_blank',
-            href: 'http://example.com',
-          },
-        });
-
-        expect(wrapper.attributes('rel')).toBe('noopener noreferrer');
-      });
-
-      it('should set noopener rel for hrefs for the same domain', () => {
-        // This behavior is due to the fact that
-        // bootstrap-vue link component adds rel="noopener" when target is set as "_blank"
-        // https://github.com/bootstrap-vue/bootstrap-vue/pull/418/files#diff-997fcb1eb150236aec5306a4d72229beR25
-        buildWrapper({
-          propsData: {
-            target: '_blank',
-            href: window.location.hostname,
-          },
-        });
-        expect(wrapper.attributes('rel')).toBe('noopener');
-      });
-
-      it('should keep rel attribute for hrefs in the same domain', () => {
-        buildWrapper({ attrs: { rel: 'nofollow', href: window.location.hostname } });
-
-        expect(wrapper.attributes('rel')).toBe('nofollow');
-      });
-    });
-
-    describe('unsafe urls', () => {
-      // eslint-disable-next-line no-script-url
-      const unsafeUrl = 'javascript:alert(1)';
-
-      // GlSafeLinkDirective is actually responsible to handle the unsafe URLs
-      // and GlButton uses this directive to make all the links secure by default
-      it('should set href to blank', () => {
-        buildWrapper({
-          propsData: {
-            href: unsafeUrl,
-          },
-        });
-
-        expect(wrapper.attributes('href')).toBe('about:blank');
-      });
-
-      it('should allow unsafe URL if isUnsafeLink is true', () => {
-        buildWrapper({
-          propsData: {
-            href: unsafeUrl,
-            isUnsafeLink: true,
-          },
-        });
-
-        expect(wrapper.attributes('href')).toBe(unsafeUrl);
-      });
-
-      it.each`
-        description                                       | label    | expectedResult
-        ${'applies block styling'}                        | ${true}  | ${false}
-        ${'does not apply block styling when label=true'} | ${false} | ${true}
-      `('block prop $description', ({ label, expectedResult }) => {
-        buildWrapper({
-          propsData: {
-            label,
-            block: true,
-          },
-        });
-
-        expect(wrapper.classes().includes('btn-block')).toBe(expectedResult);
-      });
-    });
-  });
-
-  it('should correctly detect empty content for icon only mode', () => {
-    const DemoComponent = {
-      components: { GlButton },
-      template: `<gl-button icon="ellipsis_h"><slot><span v-if="false">not-rendered</span></slot></gl-button>`,
-    };
-
-    wrapper = mount(DemoComponent);
-
-    expect(wrapper.classes()).toContain('btn-icon');
-  });
-});