@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,59 +0,0 @@
-import GlSegmentedControl from './segmented_control.vue';
-import readme from './segmented_control.md';
-
-const defaultOptions = [
-  { value: 'Pizza', text: 'Pizza' },
-  { value: 'Tacos', text: 'Tacos' },
-  { value: 'Burger', text: 'Burger', disabled: true },
-];
-
-const generateProps = ({ options = defaultOptions, initSelected = 'Tacos' } = {}) => ({
-  options,
-  initSelected,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components: { GlSegmentedControl },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      selected: this.initSelected,
-    };
-  },
-  watch: {
-    initSelected(val) {
-      this.selected = val;
-    },
-  },
-  template: `
-     <gl-segmented-control
-      :options="options"
-      v-model="selected"
-     />
-    `,
-});
-Default.args = generateProps();
-
-export default {
-  title: 'base/segmented control',
-  component: GlSegmentedControl,
-  parameters: {
-    bootstrapComponent: 'b-form-radio-group',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    initSelected: {
-      options: Object.values(defaultOptions)
-        .filter(({ disabled }) => !disabled)
-        .map(({ value }) => value),
-      control: 'radio',
-      table: {
-        disable: true,
-      },
-    },
-  },
-};

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

@@ -1,151 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlSkeletonLoader from './skeleton_loader.vue';
-
-describe('GlSkeletonLoader', () => {
-  let wrapper;
-
-  const findDefaultLines = () => wrapper.findAll('clipPath rect');
-  const findSvg = () => wrapper.find('svg');
-
-  const createComponent = ({ propsData, slots, reducedMotion } = {}) => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: jest.fn().mockImplementation(() => ({
-        matches: reducedMotion,
-      })),
-    });
-
-    wrapper = shallowMount(GlSkeletonLoader, { propsData, slots });
-  };
-
-  describe('when default skeleton is used', () => {
-    it('adds `gl-w-full` and `gl-h-full` CSS classes', () => {
-      createComponent();
-
-      const svgClasses = findSvg().classes();
-
-      expect(svgClasses).toContain('gl-w-full');
-      expect(svgClasses).toContain('gl-h-full');
-    });
-
-    it('renders 3 lines by default', () => {
-      createComponent();
-
-      expect(findDefaultLines()).toHaveLength(3);
-    });
-
-    it('renders the number of lines passed', () => {
-      createComponent({
-        propsData: {
-          lines: 5,
-        },
-      });
-
-      expect(findDefaultLines()).toHaveLength(5);
-    });
-
-    it('spaces the lines out evenly', () => {
-      createComponent();
-
-      const lines = findDefaultLines().wrappers;
-
-      expect(lines[0].attributes('y')).toBe('0');
-      expect(lines[1].attributes('y')).toBe('14');
-      expect(lines[2].attributes('y')).toBe('28');
-    });
-
-    it('sets svg viewBox to the combined size of the lines', () => {
-      createComponent({
-        propsData: {
-          lines: 5,
-        },
-      });
-
-      expect(findSvg().attributes('viewBox')).toBe('0 0 235 66');
-    });
-
-    describe('when equal-width-lines is `true`', () => {
-      it('renders all the lines with 100% width', () => {
-        createComponent({
-          propsData: {
-            equalWidthLines: true,
-          },
-        });
-
-        findDefaultLines().wrappers.forEach((defaultLine) => {
-          expect(defaultLine.attributes('width')).toBe('100%');
-        });
-      });
-    });
-
-    describe('when `width` and `height` props are set', () => {
-      it('overrides the calculated container size and svg viewBox', () => {
-        createComponent({
-          propsData: {
-            width: 500,
-            height: 400,
-          },
-        });
-
-        expect(wrapper.element.style.width).toBe('500px');
-        expect(wrapper.element.style.height).toBe('400px');
-        expect(findSvg().attributes('viewBox')).toBe('0 0 500 400');
-      });
-    });
-  });
-
-  describe('when skeleton is passed via the slot', () => {
-    it('does not render a container around the svg', () => {
-      createComponent({
-        slots: {
-          default: '<rect width="86" height="24" rx="4" />',
-        },
-      });
-
-      expect(wrapper.element.tagName).toBe('svg');
-    });
-
-    describe('when `width` and `height` props are set', () => {
-      it('sets the viewBox to those values', () => {
-        createComponent({
-          slots: {
-            default: '<rect width="86" height="24" rx="4" />',
-          },
-          propsData: {
-            width: 500,
-            height: 300,
-          },
-        });
-
-        expect(wrapper.attributes('viewBox')).toBe('0 0 500 300');
-      });
-    });
-
-    describe('when `width` and `height` props are not set', () => {
-      it('sets the viewBox to the default values', () => {
-        createComponent({
-          slots: {
-            default: '<rect width="86" height="24" rx="4" />',
-          },
-        });
-
-        expect(wrapper.attributes('viewBox')).toBe('0 0 400 130');
-      });
-    });
-  });
-
-  it.each`
-    reducedMotion | hasLinearGradient
-    ${false}      | ${'has'}
-    ${true}       | ${'does not have'}
-  `(
-    '$hasLinearGradient linear-gradient when reduced motion is $reducedMotion',
-    ({ reducedMotion }) => {
-      createComponent({ reducedMotion });
-
-      const gradient = wrapper.find('linearGradient');
-
-      expect(gradient.exists()).toBe(!reducedMotion);
-    }
-  );
-});

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

@@ -1,86 +0,0 @@
-import { makeContainer } from '../../../utils/story_decorators/container';
-import GlSkeletonLoader from './skeleton_loader.vue';
-import readme from './skeleton_loader.md';
-
-const defaultValue = (prop) => GlSkeletonLoader.props[prop].default;
-
-const generateProps = ({
-  width = defaultValue('width'),
-  height = defaultValue('height'),
-  preserveAspectRatio = defaultValue('preserveAspectRatio'),
-  lines = defaultValue('lines'),
-  equalWidthLines = defaultValue('equalWidthLines'),
-} = {}) => ({
-  width,
-  height,
-  preserveAspectRatio,
-  lines,
-  equalWidthLines,
-});
-
-const template = (slotContent = '') => `
-    <gl-skeleton-loader
-      :width="width"
-      :height="height"
-      :preserveAspectRatio="preserveAspectRatio"
-      :lines="lines"
-      :equalWidthLines="equalWidthLines"
-    >${slotContent}</gl-skeleton-loader>
-`;
-
-export const Default = (args) => ({
-  components: { GlSkeletonLoader },
-  props: Object.keys(args),
-  template: template(),
-});
-Object.assign(Default, {
-  args: generateProps(),
-  parameters: {
-    controls: {
-      // When not providing custom shapes in the default slot, these are the
-      // only props you're likely to want to modify.
-      include: ['width', 'lines', 'equalWidthLines'],
-    },
-  },
-});
-
-export const WithCustomShapes = (args) => ({
-  components: { GlSkeletonLoader },
-  props: Object.keys(args),
-  template: template(`
-    <rect width="276" height="16" rx="4" />
-    <rect y="18" width="237" height="16" rx="4" />
-    <rect y="42" width="118" height="16" rx="8" />
-    <rect x="122" y="42" width="130" height="16" rx="8" />
-    <rect y="62" width="106" height="16" rx="8" />
-    <rect x="110" y="62" width="56" height="16" rx="8" />
-    <rect x="256" y="42" width="71" height="16" rx="8" />
-    <rect y="86" width="38" height="16" rx="4" />
-  `),
-});
-Object.assign(WithCustomShapes, {
-  args: generateProps({
-    width: 327,
-    height: 102,
-  }),
-  parameters: {
-    controls: {
-      // With custom shapes, other props become useful, although they're a bit
-      // counterintuitive.
-      include: ['width', 'height', 'preserveAspectRatio'],
-    },
-  },
-  decorators: [makeContainer({ width: '250px' })],
-});
-
-export default {
-  title: 'base/skeleton-loader',
-  component: GlSkeletonLoader,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,170 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { useMockIntersectionObserver } from '~/utils/use_mock_intersection_observer';
-import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
-import GlIcon from '../icon/icon.vue';
-import GlSorting from './sorting.vue';
-
-describe('sorting component', () => {
-  let wrapper;
-
-  const defaultDropdownText = 'Sorting component';
-  const isAscending = false;
-
-  const defaultProps = {
-    text: defaultDropdownText,
-    isAscending,
-  };
-
-  const selectDropdownButton = () => wrapper.find('button');
-  const selectDirectionButton = () => wrapper.findAll('button').at(1);
-  const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
-  const findListboxItem = (text) =>
-    wrapper
-      .findAll('[role="option"]')
-      .filter((w) => w.text().includes(text))
-      .at(0);
-
-  const createComponent = (propsData) => {
-    wrapper = mount(GlSorting, {
-      propsData: {
-        ...defaultProps,
-        ...propsData,
-      },
-    });
-  };
-
-  describe('using listbox', () => {
-    useMockIntersectionObserver();
-
-    it('should display given toggle text in dropdown', () => {
-      createComponent({ sortOptions: [] });
-
-      expect(selectDropdownButton().text()).toBe(defaultDropdownText);
-    });
-
-    it('should show new text value when passed in as a prop', () => {
-      const newDropdownText = 'Some new text';
-
-      createComponent({
-        text: newDropdownText,
-      });
-
-      expect(selectDropdownButton().text()).toBe(newDropdownText);
-    });
-
-    it('should use the selected sort option text in dropdown if text is not given', () => {
-      createComponent({ text: null, sortOptions: [{ value: 0, text: 'Foo' }], sortBy: 0 });
-
-      expect(selectDropdownButton().text()).toBe('Foo');
-    });
-
-    it('renders the given sort options', () => {
-      createComponent({
-        sortOptions: [
-          { value: 'foo', text: 'Foo' },
-          { value: 'bar', text: 'Bar' },
-        ],
-      });
-
-      expect(findListboxItem('Foo').exists()).toBe(true);
-      expect(findListboxItem('Bar').exists()).toBe(true);
-    });
-
-    it('emits sortByChange event when user changes sort option', async () => {
-      createComponent({
-        sortOptions: [
-          { value: 'foo', text: 'Foo' },
-          { value: 'bar', text: 'Bar' },
-        ],
-        sortBy: 'foo',
-      });
-
-      await findListboxItem('Foo').trigger('click');
-      expect(wrapper.emitted('sortByChange')).toBe(undefined);
-
-      await findListboxItem('Bar').trigger('click');
-      expect(wrapper.emitted('sortByChange')).toEqual([['bar']]);
-    });
-
-    it('should have a default sort direction of desc and displays the descending icon', () => {
-      createComponent({ sortOptions: [] });
-
-      expect(selectDirectionButton().findComponent(GlIcon).props('name')).toBe('sort-highest');
-    });
-
-    it('should accept isAscending true as a default sort direction and display the ascending icon', () => {
-      createComponent({
-        sortOptions: [],
-        isAscending: true,
-      });
-
-      expect(selectDirectionButton().findComponent(GlIcon).props('name')).toBe('sort-lowest');
-    });
-
-    it('should emit the sortDirectionChange event when direction button is clicked', () => {
-      createComponent({ sortOptions: [] });
-
-      selectDirectionButton().trigger('click');
-
-      expect(wrapper.emitted('sortDirectionChange')[0]).toEqual([true]);
-    });
-
-    it('should allow custom sort tooltip to be applied', () => {
-      const newDirectionTooltip = 'New tooltip text';
-
-      createComponent({
-        sortDirectionToolTip: newDirectionTooltip,
-      });
-
-      expect(selectDirectionButton().attributes('title')).toBe(newDirectionTooltip);
-      expect(selectDirectionButton().attributes('aria-label')).toBe(newDirectionTooltip);
-    });
-
-    it('adds classes passed in `dropdownClass` prop to dropdown', () => {
-      createComponent({
-        sortOptions: [],
-        dropdownClass: 'foo-bar',
-      });
-
-      expect(findListbox().classes()).toContain('foo-bar');
-    });
-
-    it('adds classes passed in `dropdownToggleClass` prop to dropdown toggle', () => {
-      createComponent({
-        sortOptions: [],
-        dropdownToggleClass: 'foo-bar',
-      });
-
-      expect(selectDropdownButton().classes()).toEqual(expect.arrayContaining(['foo-bar']));
-    });
-
-    it('adds classes passed in `sortDirectionToggleClass` prop to sort direction toggle', () => {
-      createComponent({
-        sortOptions: [],
-        sortDirectionToggleClass: 'foo-bar',
-      });
-
-      expect(selectDirectionButton().classes()).toEqual(
-        expect.arrayContaining(['sorting-direction-button', 'foo-bar'])
-      );
-    });
-
-    it('passes `block` prop to listbox', () => {
-      createComponent({
-        block: true,
-      });
-
-      expect(findListbox().props('block')).toBe(true);
-    });
-
-    it('sets aria-label of sort direction button', async () => {
-      createComponent({ sortOptions: [] });
-
-      expect(selectDirectionButton().attributes('aria-label')).toBe('Sort direction: descending');
-
-      await wrapper.setProps({ isAscending: true });
-
-      expect(selectDirectionButton().attributes('aria-label')).toBe('Sort direction: ascending');
-    });
-  });
-});

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

@@ -1,98 +0,0 @@
-import { userEvent, within, waitFor, expect } from '@storybook/test';
-import { makeContainer } from '../../../utils/story_decorators/container';
-import GlSorting from './sorting.vue';
-import readme from './sorting.md';
-
-const components = {
-  GlSorting,
-};
-
-const propDefault = (prop) => GlSorting.props[prop].default;
-
-const generateProps = ({
-  text = 'Sorting options',
-  sortOptions = propDefault('sortOptions'),
-  sortBy = propDefault('sortBy'),
-  isAscending = propDefault('isAscending'),
-  sortDirectionToolTip = propDefault('sortDirectionToolTip'),
-  dropdownClass = propDefault('dropdownClass'),
-  dropdownToggleClass = propDefault('dropdownToggleClass'),
-  sortDirectionToggleClass = propDefault('sortDirectionToggleClass'),
-} = {}) => ({
-  text,
-  sortOptions,
-  sortBy,
-  isAscending,
-  sortDirectionToolTip,
-  dropdownClass,
-  dropdownToggleClass,
-  sortDirectionToggleClass,
-});
-
-const template = `
-  <gl-sorting
-    :text="text"
-    :sort-options="sortOptions"
-    :sort-by="sortBy"
-    :is-ascending="isAscending"
-    :sort-direction-tool-tip="sortDirectionToolTip"
-    :dropdown-class="dropdownClass"
-    :dropdown-toggle-class="dropdownToggleClass"
-    :sort-direction-toggle-class="sortDirectionToggleClass"
-  />
-`;
-
-const Template = (args) => ({
-  components,
-  props: Object.keys(args),
-  template,
-});
-
-export const Default = Template.bind({});
-Object.assign(Default, {
-  args: generateProps({
-    text: '',
-    sortOptions: [
-      {
-        value: 'first',
-        text: 'First item',
-      },
-      {
-        value: 'second',
-        text: 'Second item',
-      },
-      {
-        value: 'third',
-        text: 'Third item',
-      },
-    ],
-    sortBy: 'first',
-  }),
-  parameters: {},
-});
-Default.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const button = canvas.getByTestId('base-dropdown-toggle');
-  await userEvent.click(button);
-  await waitFor(() => expect(canvas.getByRole('listbox')).toBeVisible());
-};
-
-export default {
-  title: 'base/sorting',
-  component: GlSorting,
-  decorators: [
-    makeContainer({
-      height: '150px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'flex-start',
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};