@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,33 +0,0 @@
-import readme from './markdown.md';
-import GlMarkdown from './markdown.vue';
-import markdownTypescaleDemoContent from './markdown_typescale_demo.html';
-
-const template = `
-  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown>
-  `;
-
-const generateProps = ({ compact = false } = {}) => ({ compact });
-
-const Template = (args, { argTypes }) => ({
-  components: { GlMarkdown },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Documentation = Template.bind({});
-Documentation.args = generateProps();
-
-export const Compact = Template.bind({});
-Compact.args = generateProps({ compact: true });
-
-export default {
-  title: 'base/markdown',
-  component: GlMarkdown,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,265 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BModal } from 'bootstrap-vue';
-import merge from 'lodash/merge';
-import { modalButtonDefaults } from '~/utils/constants';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
-import Button from '../button/button.vue';
-import { logWarning } from '../../../utils/utils';
-import Modal from './modal.vue';
-
-const BModalStub = merge({}, BModal.options, {
-  methods: {
-    onCancel: jest.fn(function cancel() {
-      this.$emit('cancel');
-    }),
-    onClose: jest.fn(),
-    onOk: jest.fn(function ok() {
-      this.$emit('ok');
-    }),
-  },
-  render(h) {
-    return h('div', Object.values(this.$slots));
-  },
-});
-
-jest.mock('../../../utils/utils', () => ({
-  logWarning: jest.fn(),
-}));
-
-describe('Modal component', () => {
-  let wrapperListeners;
-  let wrapper;
-
-  const findModal = () => wrapper.findComponent(BModalStub);
-  const findPrimaryButton = () => wrapper.find('.js-modal-action-primary');
-  const findSecondaryButton = () => wrapper.find('.js-modal-action-secondary');
-  const findCancelButton = () => wrapper.find('.js-modal-action-cancel');
-
-  const expectCloseButton = () => expect(wrapper.findComponent(CloseButton).exists()).toBe(true);
-
-  const createComponent = ({ props = {}, slots = {}, stubModal = true } = {}) => {
-    wrapperListeners = {
-      canceled: jest.fn(),
-      close: jest.fn(),
-      hidden: jest.fn(),
-      primary: jest.fn(),
-      secondary: jest.fn(),
-    };
-
-    wrapper = shallowMount(Modal, {
-      propsData: {
-        modalId: 'modal-id',
-        ...props,
-      },
-      slots,
-      listeners: wrapperListeners,
-      stubs: {
-        'b-modal': stubModal ? BModalStub : BModal,
-      },
-    });
-  };
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('default', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders BModal', () => {
-      expect(findModal().exists()).toBe(true);
-    });
-
-    it('applies default modal class', () => {
-      expect(findModal().props('modalClass')).toContain('gl-modal');
-    });
-  });
-
-  describe('slots', () => {
-    const title = 'A custom title';
-    const slot = `<h4 class="custom-title">${title}</h4>`;
-
-    it('renders modal-header slot properly', () => {
-      createComponent({
-        slots: { 'modal-header': slot },
-      });
-      const defaultHeader = wrapper.find('h2.modal-title');
-      const customHeader = wrapper.find('h4.custom-title');
-
-      expect(defaultHeader.exists()).toBe(false);
-      expect(customHeader.exists()).toBe(true);
-      expect(customHeader.text()).toBe(title);
-      expectCloseButton();
-    });
-
-    it('renders modal-title slot properly', () => {
-      createComponent({
-        slots: { 'modal-title': slot },
-      });
-      const defaultHeader = wrapper.find('h2.modal-title');
-      const customTitle = defaultHeader.find('h4.custom-title');
-
-      expect(defaultHeader.exists()).toBe(true);
-      expect(customTitle.exists()).toBe(true);
-      expect(customTitle.text()).toBe(title);
-      expectCloseButton();
-    });
-  });
-
-  describe('modal footer', () => {
-    const props = {
-      actionPrimary: {
-        text: 'Primary',
-        attributes: { variant: 'info' },
-      },
-      actionSecondary: {
-        text: 'Secondary',
-      },
-      actionCancel: {
-        text: 'Cancel',
-        attributes: { variant: 'danger' },
-      },
-    };
-
-    beforeEach(() => {
-      createComponent({ props });
-    });
-
-    it('should render three buttons', () => {
-      expect(wrapper.findAllComponents(Button)).toHaveLength(3);
-    });
-
-    it('buttons should render prop text', () => {
-      expect(findPrimaryButton().text()).toBe('Primary');
-      expect(findSecondaryButton().text()).toBe('Secondary');
-      expect(findCancelButton().text()).toBe('Cancel');
-    });
-
-    it('attributes array to be returned', () => {
-      const attributes = wrapper.vm.buttonBinding(props.actionPrimary, 'actionPrimary');
-      expect(attributes).toBe(props.actionPrimary.attributes);
-    });
-
-    it('default attributes to be returned', () => {
-      const attributes = wrapper.vm.buttonBinding(props.actionSecondary, 'actionSecondary');
-      expect(attributes).toBe(modalButtonDefaults.actionSecondary);
-    });
-
-    it('does not emit anything', () => {
-      Object.keys(wrapperListeners).forEach((evt) => {
-        expect(wrapperListeners[evt]).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('when cancel is clicked', () => {
-      beforeEach(() => {
-        findCancelButton().vm.$emit('click');
-      });
-
-      it('should emit canceled event', () => {
-        expect(BModalStub.methods.onCancel).toHaveBeenCalledTimes(1);
-        expect(wrapperListeners.canceled).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('when primary is clicked', () => {
-      beforeEach(() => {
-        findPrimaryButton().vm.$emit('click');
-      });
-
-      it('should emit primary event', () => {
-        expect(BModalStub.methods.onOk).toHaveBeenCalledTimes(1);
-        expect(wrapperListeners.primary).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('when secondary is clicked', () => {
-      beforeEach(() => {
-        findSecondaryButton().vm.$emit('click');
-      });
-
-      it('should emit secondary', () => {
-        expect(wrapperListeners.secondary).toHaveBeenCalledTimes(1);
-      });
-
-      it('should close modal', () => {
-        expect(BModalStub.methods.onClose).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    describe('when secondary is clicked with default prevented', () => {
-      beforeEach(() => {
-        findSecondaryButton().vm.$emit('click', { defaultPrevented: true });
-      });
-
-      it('should emit secondary', () => {
-        expect(wrapperListeners.secondary).toHaveBeenCalledTimes(1);
-      });
-
-      it('should close modal', () => {
-        expect(BModalStub.methods.onClose).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  it('accepts custom modal class', () => {
-    createComponent({ props: { modalClass: 'modal-class-override another-override' } });
-    expect(findModal().props('modalClass')).toContain('gl-modal');
-    expect(findModal().props('modalClass')).toContain('modal-class-override another-override');
-  });
-
-  describe('when closed', () => {
-    beforeEach(() => {
-      createComponent();
-      findModal().vm.$emit('close');
-    });
-
-    it('should emit closed', () => {
-      expect(wrapperListeners.secondary).not.toHaveBeenCalled();
-      expect(wrapperListeners.close).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('accessible name warning', () => {
-    it.each`
-      description                                            | title            | ariaLabel        | showWarning
-      ${'is logged when there is no title or ariaLabel'}     | ${undefined}     | ${undefined}     | ${true}
-      ${'is not logged when there is a title'}               | ${'modal title'} | ${undefined}     | ${false}
-      ${'is not logged when there is an ariaLabel'}          | ${undefined}     | ${'modal title'} | ${false}
-      ${'is not logged when there is a title and ariaLabel'} | ${'modal title'} | ${'modal title'} | ${false}
-    `('$description', ({ title, ariaLabel, showWarning }) => {
-      createComponent({ props: { title, ariaLabel } });
-
-      const calledTimes = showWarning ? 1 : 0;
-      expect(logWarning).toHaveBeenCalledTimes(calledTimes);
-    });
-  });
-
-  it('binds visible property to the BModal visible property', async () => {
-    createComponent({ stubModal: false });
-
-    expect(wrapper.props().visible).toBe(false);
-    expect(wrapper.findComponent(BModal).props().visible).toBe(false);
-
-    await wrapper.setProps({ visible: true });
-
-    expect(wrapper.findComponent(BModal).props().visible).toBe(true);
-  });
-
-  it('sets visible property and change event as the component models', () => {
-    expect(Modal.model).toEqual({
-      prop: 'visible',
-      event: 'change',
-    });
-  });
-
-  it('emits change event when base modal component emits change event', () => {
-    createComponent();
-
-    findModal().vm.$emit('change');
-
-    expect(wrapper.emitted('change')).toHaveLength(1);
-  });
-});

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

@@ -1,197 +0,0 @@
-import { userEvent, within, waitFor, expect } from '@storybook/test';
-import { GlModalDirective } from '../../../directives/modal';
-import GlButton from '../button/button.vue';
-import { variantOptionsWithNoDefault } from '../../../utils/constants';
-import GlModal from './modal.vue';
-import readme from './modal.md';
-
-const play =
-  (expectFinalState = () => Promise.resolve()) =>
-  async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const button = canvas.getByRole('button');
-    await userEvent.click(button);
-    await expectFinalState();
-  };
-
-const generateTemplate = ({ props = {}, slots = {} } = {}) => {
-  const extraProps = Object.entries(props)
-    .map(([key, value]) => `:${key}="${value}"`)
-    .join('\n        ');
-
-  return `
-    <div>
-      <gl-button v-gl-modal-directive="'test-modal-id'" category="primary" variant="confirm">
-        Open modal
-      </gl-button>
-      <gl-modal
-        :header-bg-variant="headerBgVariant"
-        :header-border-variant="headerBorderVariant"
-        :header-text-variant="headerTextVariant"
-        :body-bg-variant="bodyBgVariant"
-        :body-text-variant="bodyTextVariant"
-        :footer-bg-variant="footerBgVariant"
-        :footer-border-variant="footerBorderVariant"
-        :footer-text-variant="footerTextVariant"
-        ${extraProps}
-        :action-primary="{text: 'Okay'}"
-        :action-secondary="{text: 'Discard Changes'}"
-        :action-cancel="{text: 'Cancel'}"
-        :scrollable="scrollable"
-        :no-focus-on-show="noFocusOnShow"
-        modal-id="test-modal-id"
-        title="Example title"
-        no-fade
-      >
-      <p v-for="n in contentParagraphs">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      </p>
-      ${Object.entries(slots).map(
-        ([slot, contents]) => `<template #${slot}>${contents}</template>`
-      )}
-      </gl-modal>
-    </div>
-  `;
-};
-
-const Template = (args, { argTypes, viewMode }) => ({
-  components: { GlModal, GlButton },
-  directives: { GlModalDirective },
-  props: Object.keys(argTypes),
-  template: generateTemplate(),
-  viewMode,
-});
-
-const generateProps = ({
-  variant = variantOptionsWithNoDefault.default,
-  contentPagraphs = 1,
-  scrollable = false,
-  noFocusOnShow = false,
-} = {}) => ({
-  headerBgVariant: variant,
-  headerBorderVariant: variant,
-  headerTextVariant: variant,
-  bodyBgVariant: variant,
-  bodyTextVariant: variant,
-  footerBgVariant: variant,
-  footerBorderVariant: variant,
-  footerTextVariant: variant,
-  contentParagraphs: contentPagraphs,
-  scrollable,
-  noFocusOnShow,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-Default.play = play(() =>
-  waitFor(() =>
-    expect(
-      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Cancel' })
-    ).toHaveFocus()
-  )
-);
-
-export const WithScrollingContent = Template.bind({});
-WithScrollingContent.args = generateProps({
-  contentPagraphs: 100,
-  scrollable: true,
-});
-WithScrollingContent.play = play(() =>
-  waitFor(() =>
-    expect(
-      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Cancel' })
-    ).toHaveFocus()
-  )
-);
-
-export const WithAHeader = (args, { argTypes, viewMode }) => ({
-  components: { GlModal, GlButton },
-  directives: { GlModalDirective },
-  props: Object.keys(argTypes),
-  template: generateTemplate({
-    slots: {
-      'modal-header': '<h4>A custom header</h4>',
-    },
-  }),
-  viewMode,
-});
-WithAHeader.args = generateProps();
-WithAHeader.play = play(() =>
-  waitFor(() =>
-    expect(
-      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Cancel' })
-    ).toHaveFocus()
-  )
-);
-
-export const WithoutAFooter = (args, { argTypes, viewMode }) => ({
-  components: { GlModal, GlButton },
-  directives: { GlModalDirective },
-  props: Object.keys(argTypes),
-  template: generateTemplate({
-    props: { 'hide-footer': true },
-  }),
-  viewMode,
-});
-WithoutAFooter.args = generateProps();
-WithoutAFooter.play = play(() =>
-  waitFor(() =>
-    expect(
-      within(within(document).getByRole('dialog')).getByRole('button', { name: 'Close' })
-    ).toHaveFocus()
-  )
-);
-
-export const WithoutFocus = Template.bind({});
-WithoutFocus.args = generateProps({
-  noFocusOnShow: true,
-});
-WithoutFocus.play = play();
-
-export default {
-  title: 'base/modal',
-  component: GlModal,
-  directives: { GlModalDirective },
-  bootstrapComponent: 'b-modal',
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerBgVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    headerBorderVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    headerTextVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    bodyBgVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    bodyTextVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    footerBgVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    footerBorderVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-    footerTextVariant: {
-      options: variantOptionsWithNoDefault,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,19 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlNav from './nav.vue';
-import GlNavItem from './nav_item.vue';
-
-describe('GlNav', () => {
-  let wrapper;
-
-  describe('Nav style', () => {
-    it('renders slot content', () => {
-      wrapper = shallowMount(GlNav, {
-        slots: {
-          default: [GlNavItem, GlNavItem],
-        },
-      });
-
-      expect(wrapper.findAllComponents(GlNavItem).exists()).toBe(true);
-    });
-  });
-});

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

@@ -1,57 +0,0 @@
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import GlDropdownDivider from '../dropdown/dropdown_divider.vue';
-import GlIcon from '../icon/icon.vue';
-import GlNavItemDropdown from './nav_item_dropdown.vue';
-import GlNavItem from './nav_item.vue';
-import GlNav from './nav.vue';
-import readme from './nav.md';
-
-export const Default = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    GlNav,
-    GlNavItem,
-    GlNavItemDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
-    GlIcon,
-  },
-  template: `
-    <div style="height: 150px">
-      <gl-nav>
-        <gl-nav-item active>Active</gl-nav-item>
-        <gl-nav-item>Link</gl-nav-item>
-        <gl-nav-item-dropdown text="Dropdown">
-          <gl-dropdown-item>Above divider</gl-dropdown-item>
-          <gl-dropdown-divider />
-          <gl-dropdown-item>Below divider</gl-dropdown-item>
-        </gl-nav-item-dropdown>
-        <gl-nav-item-dropdown text="Dropdown">
-          <template #button-content>
-            <gl-icon name="question" />
-            <gl-icon name="chevron-down" />
-          </template>
-          <gl-dropdown-item>One</gl-dropdown-item>
-          <gl-dropdown-item>Two</gl-dropdown-item>
-        </gl-nav-item-dropdown>
-        <gl-nav-item disabled>Disabled</gl-nav-item>
-      </gl-nav>
-    </div>`,
-});
-
-export default {
-  title: 'base/nav',
-  component: GlNav,
-  subcomponents: {
-    GlNavItem,
-    GlNavItemDropdown,
-  },
-  parameters: {
-    bootstrapComponent: 'b-nav',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/base/nav/nav_item.spec.js

@@ -1,16 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlNavItem from './nav_item.vue';
-
-describe('GlNavItem', () => {
-  let wrapper;
-
-  it('renders the text', () => {
-    wrapper = shallowMount(GlNavItem, {
-      slots: {
-        default: 'Hello, World!',
-      },
-    });
-
-    expect(wrapper.findComponent(GlNavItem).text()).toBe('Hello, World!');
-  });
-});

package/src/components/base/nav/nav_item_dropdown.spec.js

@@ -1,58 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BNavItemDropdown } from 'bootstrap-vue';
-import GlIcon from '../icon/icon.vue';
-import GlNavItemDropdown from './nav_item_dropdown.vue';
-
-describe('GlNavItemDropdown', () => {
-  let wrapper;
-
-  const factory = (propsData = {}, slots = {}) => {
-    wrapper = shallowMount(GlNavItemDropdown, {
-      propsData,
-      slots,
-      stubs: {
-        BNavItemDropdown,
-      },
-    });
-  };
-
-  const findBNavItemDropdown = () => wrapper.findComponent(BNavItemDropdown);
-
-  describe('default', () => {
-    it('renders BNavItemDropdown', () => {
-      const expectedText = 'Hello!';
-
-      factory({ text: expectedText });
-
-      const navItemDropdown = findBNavItemDropdown();
-
-      expect(navItemDropdown.exists()).toBe(true);
-      expect(navItemDropdown.find('.dropdown-toggle').text()).toBe(expectedText);
-    });
-
-    describe('button-content slot', () => {
-      it('renders default template', () => {
-        factory();
-
-        const glIcon = wrapper.findComponent(GlIcon);
-
-        expect(glIcon.exists()).toBe(true);
-        expect(glIcon.classes('dropdown-chevron')).toBe(true);
-      });
-
-      it('renders custom template', () => {
-        factory(
-          {},
-          {
-            'button-content': '<div class="foo">Custom button-content</div>',
-          }
-        );
-
-        const buttonContentSlot = wrapper.find('.foo');
-
-        expect(buttonContentSlot.exists()).toBe(true);
-        expect(buttonContentSlot.text()).toBe('Custom button-content');
-      });
-    });
-  });
-});

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

@@ -1,21 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlNavbar from './navbar.vue';
-
-describe('Navbar Component', () => {
-  const propsData = {
-    variant: 'dark',
-  };
-  let wrapper;
-
-  describe('Dark Navbar', () => {
-    beforeEach(() => {
-      wrapper = mount(GlNavbar, {
-        propsData: { ...propsData, type: 'dark' },
-      });
-    });
-
-    it('should add the `navbar-dark` class', () => {
-      expect(wrapper.find('.navbar-dark').exists()).toBe(true);
-    });
-  });
-});

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

@@ -1,28 +0,0 @@
-import { BNavbarBrand } from 'bootstrap-vue';
-import GlNavbar from './navbar.vue';
-import readme from './navbar.md';
-
-const Template = (args, { argTypes }) => ({
-  components: { GlNavbar, BNavbarBrand },
-  props: Object.keys(argTypes),
-  template: `
-  <gl-navbar variant="dark" type="dark">
-    <b-navbar-brand tag="h1" class="mb-0">Gitlab</b-navbar-brand>
-  </gl-navbar>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export default {
-  title: 'base/navbar',
-  component: GlNavbar,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-    bootstrapComponent: 'b-navbar',
-  },
-};