@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,209 +0,0 @@
-import range from 'lodash/range';
-import GlBadge from '../../badge/badge.vue';
-import { badgeVariantOptions } from '../../../../utils/constants';
-import GlTab from '../tab/tab.vue';
-import GlScrollableTabs from './scrollable_tabs.vue';
-import GlTabs from './tabs.vue';
-import readme from './tabs.md';
-
-const components = {
-  GlTabs,
-  GlTab,
-};
-
-const generateProps = ({ justified } = {}) => ({
-  justified,
-});
-
-const wrap = (template) => `
-  <gl-tabs
-    :justified="justified"
-  >
-    ${template}
-  </gl-tabs>
-`;
-
-const ScrollableTabsGenerator = {
-  components: {
-    GlTabs,
-    GlScrollableTabs,
-    GlTab,
-  },
-  props: {
-    count: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    tabs() {
-      return range(this.count).map((i) => ({
-        title: `Tab ${i + 1}`,
-        content: `Tab panel ${i + 1} content...`,
-      }));
-    },
-  },
-  template: `
-    <gl-scrollable-tabs v-bind="$attrs">
-      <gl-tab v-for="tab in tabs" :key="tab.title" :title="tab.title">
-        {{ tab.content }}
-      </gl-tab>
-    </gl-scrollable-tabs>
-  `,
-};
-
-export const Default = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: wrap(`
-    <gl-tab title="Tab 1">
-      Tab panel 1
-    </gl-tab>
-    <gl-tab title="Tab 2">
-      Tab panel 2
-    </gl-tab>
-    <gl-tab title="Tab 3">
-      Tab panel 3
-    </gl-tab>
-    <gl-tab title="Tab 4">
-      Tab panel 4
-    </gl-tab>
-    <gl-tab title="Tab 5">
-      Tab panel 5
-    </gl-tab>
-    <gl-tab title="Tab 6">
-      Tab panel 6
-    </gl-tab>
-    <gl-tab title="Tab 7">
-      Tab panel 7
-    </gl-tab>
-    <gl-tab title="Tab 8">
-      Tab panel 8
-    </gl-tab>
-    <gl-tab title="Tab 9">
-      Tab panel 9
-    </gl-tab>
-    <gl-tab title="Tab 10">
-      Tab panel 10
-    </gl-tab>
-    <gl-tab title="Tab 11">
-      Tab panel 11
-    </gl-tab>
-    <gl-tab title="Tab 12">
-      Tab panel 12
-    </gl-tab>
-    <gl-tab title="Tab 13" query-param-value="thirteenth">
-      Tab panel 13
-    </gl-tab>
-    <gl-tab title="Tab 14">
-      Tab panel 14
-    </gl-tab>`),
-});
-Default.args = generateProps();
-
-export const ContentlessTab = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: wrap(`
-    <gl-tab title="Regular tab">
-      <p>Regular tab content.</p>
-      <p>The contentless tab is not selectable, as it has no content. This is useful for displaying things that aren't really tabs after the list of tabs.</p>
-    </gl-tab>
-    <gl-tab title="Another tab">
-      <p>Another tab's content.</p>
-    </gl-tab>
-    <template #tabs-end>
-      <li class="gl-tab-nav-item">
-        Contentless tab
-      </li>
-    </template>`),
-});
-
-export const EmptyState = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: wrap(`
-    <template #empty>
-      This content is only displayed when there are no tabs. Useful for dynamically added/removed tabs.
-    </template>`),
-});
-
-export const JustifiedTabs = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: wrap(`
-    <gl-tab title="Tab 1">
-      <p>Tab panel 1</p>
-    </gl-tab>
-    <gl-tab title="Tab 2">
-      <p>Tab panel 2</p>
-    </gl-tab>`),
-});
-JustifiedTabs.args = generateProps({ justified: true });
-
-export const WithCounterBadges = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlBadge },
-  template: wrap(`
-    <gl-tab
-      v-for="variant in $options.badgeVariantOptions"
-      :key="variant"
-    >
-      <template #title>
-        <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge" :variant="variant">500</gl-badge>
-        <span class="sr-only">items</span>
-      </template>
-      Tab panel {{ variant }}
-    </gl-tab>`),
-  badgeVariantOptions,
-});
-
-export const WithScroll = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    ScrollableTabsGenerator,
-  },
-  template: '<scrollable-tabs-generator :count="50" />',
-});
-
-export const WithScrollAndGrowing = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    ScrollableTabsGenerator,
-  },
-  data() {
-    return {
-      count: 2,
-      intervalId: 0,
-    };
-  },
-  mounted() {
-    this.intervalId = setInterval(() => {
-      this.count += 1;
-    }, 2000);
-  },
-  template: '<scrollable-tabs-generator :count="count" />',
-});
-WithScrollAndGrowing.tags = ['skip-visual-test'];
-
-export default {
-  title: 'base/tabs',
-  component: GlTabs,
-  subcomponents: { GlTab, GlScrollableTabs },
-  parameters: {
-    bootstrapComponent: 'b-tabs',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    contentClass: { control: { disable: true } },
-    navClass: { control: { disable: true } },
-    syncActiveTabWithQueryParams: { control: { disable: true } },
-    queryParamName: { control: { disable: true } },
-    value: { control: { disable: true } },
-  },
-};

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

@@ -1,72 +0,0 @@
-import Vue from 'vue';
-import { mount } from '@vue/test-utils';
-import GlToast from './toast';
-
-Vue.use(GlToast);
-const Component = {
-  template: `<div />`,
-};
-
-describe('GlToast', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = mount(Component);
-  });
-
-  it('attaches $toast propery', () => {
-    expect(wrapper.vm.$toast).toEqual({
-      show: expect.any(Function),
-    });
-  });
-
-  it('show returns a toast object', () => {
-    const toast = wrapper.vm.$toast.show('foo');
-    expect(toast).toEqual({
-      id: expect.any(String),
-      hide: expect.any(Function),
-    });
-  });
-
-  describe('onComplete callback', () => {
-    let onCompleteSpy;
-    let toast;
-
-    beforeEach(() => {
-      onCompleteSpy = jest.fn();
-
-      toast = wrapper.vm.$toast.show('foo', {
-        onComplete: onCompleteSpy,
-      });
-    });
-
-    it('calls onComplete callback only when matching toast hides', () => {
-      expect(onCompleteSpy).not.toHaveBeenCalled();
-
-      // Pretend some other toast was hidden.
-      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: 'some other toast' });
-      expect(onCompleteSpy).not.toHaveBeenCalled();
-
-      // Pretend our toast was hidden.
-      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: toast.id });
-      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('unregisters global listener when toast is hidden', () => {
-      expect(onCompleteSpy).not.toHaveBeenCalled();
-
-      // Pretend the toast was hidden. Can't seem to do this directly in jsdom,
-      // so fake it by emitting the event we listen for.
-      const event = { componentId: toast.id };
-      wrapper.vm.$root.$emit('bv::toast:hidden', event);
-      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
-
-      // This event won't fire more than once in practice, as once the toast is
-      // hidden it'll be destroyed and won't show again. This is here to
-      // indirectly test that the listener was removed when the toast is
-      // hidden the first time.
-      wrapper.vm.$root.$emit('bv::toast:hidden', event);
-      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
-    });
-  });
-});

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

@@ -1,88 +0,0 @@
-import { userEvent, within, waitFor, expect } from '@storybook/test';
-import Vue from 'vue';
-import GlButton from '../button/button.vue';
-import GlToast from './toast';
-import readme from './toast.md';
-
-Vue.use(GlToast);
-
-const components = { GlToast, GlButton };
-
-const play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const button = canvas.getByRole('button');
-  await userEvent.click(button);
-  await waitFor(() => expect(within(canvasElement).getByRole('button')).toHaveFocus());
-  await waitFor(() => expect(within(document).getByRole('status')).toBeVisible());
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-  <gl-button @click="showToast()">
-    Show default toast
-  </gl-button>`,
-  methods: {
-    showToast() {
-      this.$toast.show('This is the default toast.');
-    },
-  },
-});
-
-export const Default = Template.bind({});
-Default.play = play;
-
-export const WithActions = () => ({
-  components,
-  template: `
-  <gl-button @click="showToast()">
-    Show toast with actions
-  </gl-button>`,
-  methods: {
-    showToast() {
-      this.$toast.show('This is a toast with an action.', {
-        action: {
-          text: 'Undo',
-          onClick: () => {},
-        },
-      });
-    },
-  },
-});
-WithActions.play = play;
-
-export const WithLongContent = () => ({
-  components,
-  template: `
-  <gl-button @click="showToast()">
-    Show toast with a long content
-  </gl-button>`,
-  methods: {
-    showToast() {
-      this.$toast.show(
-        'This is a toast with a long content and an action. Notice how the text wraps to multiple lines when the max-width is reached.',
-        {
-          action: {
-            text: 'Undo action',
-            onClick: () => {},
-          },
-        }
-      );
-    },
-  },
-});
-WithLongContent.play = play;
-
-export default {
-  title: 'base/toast',
-  component: GlToast,
-  parameters: {
-    bootstrapComponent: 'toast',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,168 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { toggleLabelPosition } from '../../../utils/constants';
-import Icon from '../icon/icon.vue';
-import LoadingIcon from '../loading_icon/loading_icon.vue';
-import Toggle from './toggle.vue';
-
-describe('toggle', () => {
-  let wrapper;
-
-  const label = 'toggle label';
-  const descriptionText = 'description text';
-  const helpText = 'help text';
-
-  const createWrapper = (props = {}, options = {}) => {
-    wrapper = shallowMount(Toggle, {
-      propsData: {
-        label,
-        ...props,
-      },
-      ...options,
-    });
-  };
-
-  const findButton = () => wrapper.find('button');
-  const findDescriptionElement = () => wrapper.find('[data-testid="toggle-description"]');
-  const findHelpElement = () => wrapper.find('[data-testid="toggle-help"]');
-
-  it('has role=switch', () => {
-    createWrapper();
-
-    expect(findButton().attributes('role')).toBe('switch');
-  });
-
-  describe.each`
-    state    | value    | ariaCheckedExpected | checkedClassExpected
-    ${'on'}  | ${true}  | ${'true'}           | ${true}
-    ${'off'} | ${false} | ${'false'}          | ${false}
-  `('when $state', ({ value, ariaCheckedExpected, checkedClassExpected }) => {
-    beforeEach(() => {
-      createWrapper({ value });
-    });
-
-    it(`${value ? 'has' : 'does not have'} aria-checked`, () => {
-      expect(findButton().attributes('aria-checked')).toBe(ariaCheckedExpected);
-    });
-
-    it(`${value ? 'has' : 'does not have'} checked class`, () => {
-      expect(findButton().classes('is-checked')).toBe(checkedClassExpected);
-    });
-  });
-
-  describe.each`
-    state         | disabled | disabledClassExpected | changeEventPayload | ariaDisabledValue
-    ${'enabled'}  | ${false} | ${false}              | ${[[true]]}        | ${undefined}
-    ${'disabled'} | ${true}  | ${true}               | ${undefined}       | ${'true'}
-  `('when $state', ({ disabled, disabledClassExpected, changeEventPayload, ariaDisabledValue }) => {
-    beforeEach(() => {
-      createWrapper({ disabled });
-    });
-
-    it(`${disabled ? 'has' : 'does not have'} disabled class`, () => {
-      expect(findButton().classes('is-disabled')).toBe(disabledClassExpected);
-    });
-
-    it(`${disabled ? 'does not emit' : 'emits'} change event when clicked`, () => {
-      findButton().trigger('click');
-
-      expect(wrapper.emitted('change')).toEqual(changeEventPayload);
-    });
-
-    it(`sets aria-disabled attribute to ${ariaDisabledValue}`, () => {
-      expect(findButton().attributes('aria-disabled')).toBe(ariaDisabledValue);
-    });
-  });
-
-  describe.each`
-    state            | isLoading
-    ${'loading'}     | ${true}
-    ${'not loading'} | ${false}
-  `('when $state', ({ isLoading }) => {
-    beforeEach(() => {
-      createWrapper({ isLoading });
-    });
-
-    it(`${isLoading ? 'shows' : 'does not show'} loading spinner`, () => {
-      expect(wrapper.findComponent(LoadingIcon).exists()).toBe(isLoading);
-    });
-
-    it(`${isLoading ? 'does not show' : 'shows'} toggle icon`, () => {
-      expect(wrapper.findComponent(Icon).exists()).toBe(!isLoading);
-    });
-  });
-
-  describe.each`
-    state                                        | description        | props                                                                       | options
-    ${'with description'}                        | ${descriptionText} | ${{ description: descriptionText }}                                         | ${undefined}
-    ${'with description in slot'}                | ${descriptionText} | ${undefined}                                                                | ${{ slots: { description: descriptionText } }}
-    ${'without description'}                     | ${undefined}       | ${undefined}                                                                | ${undefined}
-    ${'with description and labelPosition left'} | ${undefined}       | ${{ desciption: descriptionText, labelPosition: toggleLabelPosition.left }} | ${undefined}
-  `('$state', ({ description, props, options }) => {
-    beforeEach(() => {
-      createWrapper(props, options);
-    });
-
-    if (description) {
-      it('shows description', () => {
-        expect(findDescriptionElement().text()).toBe(description);
-      });
-    } else {
-      it('does not show description', () => {
-        expect(findDescriptionElement().exists()).toBe(false);
-      });
-    }
-  });
-
-  describe.each`
-    state                                 | help         | props                                                          | options                          | getAriaDescribedBy
-    ${'with help'}                        | ${helpText}  | ${{ help: helpText }}                                          | ${undefined}                     | ${() => findHelpElement().attributes('id')}
-    ${'with help in slot'}                | ${helpText}  | ${undefined}                                                   | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
-    ${'without help'}                     | ${undefined} | ${undefined}                                                   | ${undefined}                     | ${() => undefined}
-    ${'with help and labelPosition left'} | ${undefined} | ${{ help: helpText, labelPosition: toggleLabelPosition.left }} | ${undefined}                     | ${() => undefined}
-  `('$state', ({ help, props, options, getAriaDescribedBy }) => {
-    beforeEach(() => {
-      createWrapper(props, options);
-    });
-
-    it(`${help ? 'shows' : 'does not show'} help`, () => {
-      expect(findHelpElement().exists()).toBe(Boolean(help));
-      if (help) {
-        expect(findHelpElement().text()).toBe(help);
-      }
-    });
-
-    it(`${help ? 'describes' : 'does not describe'} the toggle button`, () => {
-      expect(findButton().attributes('aria-describedby')).toBe(getAriaDescribedBy());
-    });
-  });
-
-  describe('label position', () => {
-    describe.each`
-      state       | labelPosition                 | hasGlSrOnlyClass | flexDirection
-      ${'top'}    | ${toggleLabelPosition.top}    | ${false}         | ${'gl-flex-direction-column'}
-      ${'left'}   | ${toggleLabelPosition.left}   | ${false}         | ${'gl-toggle-label-inline'}
-      ${'hidden'} | ${toggleLabelPosition.hidden} | ${true}          | ${'gl-flex-direction-column'}
-    `('when $state', ({ labelPosition, hasGlSrOnlyClass, flexDirection }) => {
-      beforeEach(() => {
-        createWrapper({ labelPosition });
-      });
-
-      it(`${flexDirection} class is added to the label`, () => {
-        const cssClasses = wrapper.find('[data-testid="toggle-wrapper"]').classes();
-
-        return expect(cssClasses).toContain(flexDirection);
-      });
-
-      it(`${hasGlSrOnlyClass ? 'adds' : 'does not add'} 'gl-sr-only' class to the label`, () => {
-        const cssClasses = wrapper.find('[data-testid="toggle-label"]').classes();
-        return hasGlSrOnlyClass
-          ? expect(cssClasses).toContain('gl-sr-only')
-          : expect(cssClasses).not.toContain('gl-sr-only');
-      });
-
-      it('has accessible name for the button', () => {
-        expect(findButton().attributes('aria-labelledby')).toBeDefined();
-      });
-    });
-  });
-});

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

@@ -1,106 +0,0 @@
-import { toggleLabelPosition } from '../../../utils/constants';
-import { disableControls } from '../../../utils/stories_utils';
-import GlToggle from './toggle.vue';
-import readme from './toggle.md';
-
-const defaultValue = (prop) => GlToggle.props[prop].default;
-
-const withDescription = 'A dark color theme that is easier on the eyes.';
-
-const longHelp = `This is a toggle component with a long help message.
-  You can notice how the text wraps when the width of the container
-  is not enough to fix the entire text.`;
-
-const generateProps = ({
-  value = true,
-  disabled = defaultValue('disabled'),
-  isLoading = defaultValue('isLoading'),
-  label = 'Dark mode',
-  labelId = 'dark-mode-toggle',
-  description = '',
-  help = 'Toggle dark mode for the website.',
-  labelPosition = defaultValue('labelPosition'),
-} = {}) => ({
-  value,
-  disabled,
-  isLoading,
-  label,
-  labelId,
-  description,
-  help,
-  labelPosition,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlToggle },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      localValue: this.value,
-    };
-  },
-  watch: {
-    value(newValue) {
-      this.localValue = newValue;
-    },
-  },
-  template: `
-  <div class="gl-font-base">
-    <gl-toggle
-      v-model="localValue"
-      :disabled="disabled"
-      :description="description"
-      :help="help"
-      :label-id="labelId"
-      :is-loading="isLoading"
-      :label="label"
-      :label-position="labelPosition"
-    />
-  </div>`,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithDescription = Template.bind({});
-WithDescription.args = generateProps({
-  description: withDescription,
-});
-
-export const WithLongHelp = Template.bind({});
-WithLongHelp.args = generateProps({
-  help: longHelp,
-});
-
-export const LabelPositionLeft = Template.bind({});
-LabelPositionLeft.args = generateProps({
-  labelPosition: 'left',
-});
-
-export default {
-  title: 'base/toggle',
-  component: GlToggle,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls(['name']),
-    labelPosition: {
-      options: Object.keys(toggleLabelPosition),
-      control: 'select',
-    },
-    label: {
-      control: 'text',
-    },
-    description: {
-      control: 'text',
-    },
-    help: {
-      control: 'text',
-    },
-  },
-};

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

@@ -1,48 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
-import Token from './token.vue';
-
-const findIcon = (wrapper) => wrapper.findComponent(CloseButton);
-
-describe('Token component', () => {
-  let wrapper;
-
-  const viewOnlyClass = 'gl-token-view-only';
-
-  const createComponent = (propsData) =>
-    shallowMount(Token, {
-      propsData,
-    });
-
-  it('emits close when "x" is clicked', () => {
-    wrapper = createComponent();
-    findIcon(wrapper).vm.$emit('click');
-    expect(wrapper.emitted('close')).toHaveLength(1);
-  });
-
-  it('hides the icon when view-only', () => {
-    wrapper = createComponent({ viewOnly: true });
-    expect(findIcon(wrapper).exists()).toBe(false);
-  });
-
-  it('includes view-only class when view-only', () => {
-    wrapper = createComponent({ viewOnly: true });
-    expect(wrapper.classes()).toContain(viewOnlyClass);
-  });
-
-  it('does not include view-only class when not view-only', () => {
-    wrapper = createComponent({ viewOnly: false });
-    expect(wrapper.classes()).not.toContain(viewOnlyClass);
-  });
-
-  it.each`
-    variant           | cssClass
-    ${undefined}      | ${'gl-token-default-variant'}
-    ${'default'}      | ${'gl-token-default-variant'}
-    ${'search-type'}  | ${'gl-token-search-type-variant'}
-    ${'search-value'} | ${'gl-token-search-value-variant'}
-  `('sets class .$cssClass when variant is $variant', ({ variant, cssClass }) => {
-    wrapper = createComponent({ viewOnly: true, variant });
-    expect(wrapper.classes()).toContain(cssClass);
-  });
-});