@gitlab/ui 80.13.1 → 80.14.0

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -1,345 +0,0 @@
-import {
-  buttonCategoryOptions,
-  buttonSizeOptions,
-  buttonVariantOptions,
-  dropdownPlacements,
-} from '../../../../utils/constants';
-import GlBadge from '../../badge/badge.vue';
-import GlToggle from '../../toggle/toggle.vue';
-import GlAvatar from '../../avatar/avatar.vue';
-import GlModal from '../../modal/modal.vue';
-import GlIcon from '../../icon/icon.vue';
-import GlTooltip from '../../tooltip/tooltip.vue';
-import { makeContainer } from '../../../../utils/story_decorators/container';
-import GlDisclosureDropdown from './disclosure_dropdown.vue';
-import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
-import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
-import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS } from './constants';
-import readme from './disclosure_dropdown.md';
-import {
-  mockItems,
-  mockItemsCustomItem,
-  mockGroups,
-  mockProfileGroups,
-  mockGroupsCustomItem,
-} from './mock_data';
-
-const makeBindings = (overrides = {}) =>
-  Object.entries({
-    ':items': 'items',
-    ':category': 'category',
-    ':variant': 'variant',
-    ':size': 'size',
-    ':disabled': 'disabled',
-    ':loading': 'loading',
-    ':no-caret': 'noCaret',
-    ':placement': 'placement',
-    ':toggle-id': 'toggleId',
-    ':toggle-text': 'toggleText',
-    ':text-sr-only': 'textSrOnly',
-    ':icon': 'icon',
-    ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
-    ':list-aria-labelled-by': 'listAriaLabelledBy',
-    ':block': 'block',
-    ':fluid-width': 'fluidWidth',
-    ':auto-close': 'autoClose',
-    ':positioning-strategy': 'positioningStrategy',
-    ':start-opened': 'startOpened',
-
-    ...overrides,
-  })
-    .map(([key, value]) => `${key}="${value}"`)
-    .join('\n');
-
-const template = (content = '', { bindingOverrides = {}, after = '' } = {}) => `
-  <div>
-    <gl-disclosure-dropdown
-      ref="disclosure"
-      ${makeBindings(bindingOverrides)}
-    >
-      ${content}
-    </gl-disclosure-dropdown>
-    ${after}
-  </div>
-`;
-
-const TOGGLE_ID = 'custom-toggle-id';
-export const Default = (args, { argTypes }) => ({
-  toggleId: TOGGLE_ID,
-  props: Object.keys(argTypes),
-  components: {
-    GlDisclosureDropdown,
-    GlTooltip,
-  },
-  template: `
-    <div>
-      ${template()}
-      <gl-tooltip :target="$options.toggleId" placement="right">
-        This is a default disclosure
-      </gl-tooltip>
-    </div>
-  `,
-});
-Default.args = {
-  items: mockItems,
-  icon: 'ellipsis_v',
-  noCaret: true,
-  toggleText: 'Disclosure',
-  textSrOnly: true,
-  toggleId: TOGGLE_ID,
-};
-Default.decorators = [makeContainer({ height: '200px' })];
-
-export const CustomListItem = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    GlDisclosureDropdown,
-    GlBadge,
-  },
-  template: template(
-    `
-      <template #list-item="{ item }">
-        <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-          {{ item.text }}
-          <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
-        </span>
-      </template>
-    `,
-    {
-      bindingOverrides: {
-        class: 'gl-display-block! gl-text-center',
-      },
-    }
-  ),
-});
-
-CustomListItem.args = {
-  items: mockItemsCustomItem,
-  toggleText: 'Merge requests',
-  placement: 'center',
-};
-CustomListItem.decorators = [makeContainer({ height: '200px' })];
-
-const makeGroupedExample = (changes) => {
-  const story = (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: {
-      GlBadge,
-      GlDisclosureDropdown,
-      GlDisclosureDropdownGroup,
-      GlDisclosureDropdownItem,
-      GlToggle,
-      GlAvatar,
-      GlModal,
-      GlIcon,
-    },
-    ...changes,
-  });
-
-  story.args = { items: mockGroups };
-  story.decorators = [makeContainer({ height: '340px' })];
-
-  return story;
-};
-
-export const Groups = makeGroupedExample({
-  template: template(''),
-});
-Groups.args = {
-  icon: 'plus-square',
-  items: mockGroups,
-  toggleText: 'Create new',
-  textSrOnly: true,
-};
-
-export const CustomGroupsAndItems = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    GlDisclosureDropdown,
-    GlBadge,
-  },
-  methods: {
-    getTotalMrs(items) {
-      return items.reduce((acc, item) => acc + item.count, 0);
-    },
-  },
-  template: template(
-    `
-      <template #group-label="{ group }">
-        {{ group.name }} <gl-badge pill size="sm" variant="neutral">{{ getTotalMrs(group.items) }}</gl-badge>
-      </template>
-      <template #list-item="{ item }">
-        <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-          {{ item.text }}
-          <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
-        </span>
-      </template>
-    `
-  ),
-});
-
-CustomGroupsAndItems.args = {
-  items: mockGroupsCustomItem,
-  toggleText: 'Merge requests',
-  block: true,
-};
-CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
-
-export const CustomGroupsItemsAndToggle = makeGroupedExample({
-  template: template(
-    `
-      <template #toggle>
-     <button class="gl-rounded-base gl-border-none gl-p-2 gl-bg-gray-50 ">
-        <span class="gl-sr-only">
-          Orange Fox user's menu
-        </span>
-        <gl-avatar :size="32" entity-name="Orange Fox" aria-hidden="true"/>
-      </button>
-      </template>
-      <gl-disclosure-dropdown-group>
-        <gl-disclosure-dropdown-item @action="closeDropdown">
-          <template #list-item>
-            <span class="gl-display-flex gl-flex-direction-column">
-              <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
-              <span class="gl-text-subtle">@thefox</span>
-            </span>
-          </template>
-        </gl-disclosure-dropdown-item>
-      </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition" :group="$options.groups[0]" @action="closeDropdown">
-        <template #list-item="{ item }">
-          <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
-            {{item.text}}
-            <gl-icon v-if="item.icon" :name="item.icon"/>
-          </span>
-        </template>
-      </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition">
-        <template #group-label>
-          <span class="gl-font-sm">Navigation redesign</span>
-          <gl-badge size="sm" variant="info">Beta</gl-badge>
-        </template>
-        <gl-disclosure-dropdown-item @action="toggleNewNavigation">
-          <div  class="gl-new-dropdown-item-content">
-            <div class="gl-new-dropdown-item-text-wrapper">
-              <gl-toggle label="New navigation" label-position="left" :value="newNavigation"/>
-            </div>
-          </div>
-        </gl-disclosure-dropdown-item>
-        <gl-disclosure-dropdown-item @action="toggleModalVisibility(true)">
-          <template #list-item>Provide feedback</template>
-        </gl-disclosure-dropdown-item>
-      </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition" :group="$options.groups[1]" @action="closeDropdown"/>
-    `,
-    {
-      after: `
-      <gl-modal :visible="feedBackModalVisible" @change="toggleModalVisibility" modal-id="feedbackModal" size="sm">
-        <textarea class="gl-w-full">Tell us what you think!</textarea>
-      </gl-modal>
-    `,
-    }
-  ),
-  data() {
-    return {
-      newNavigation: true,
-      feedBackModalVisible: false,
-    };
-  },
-  methods: {
-    closeDropdown() {
-      this.$refs.disclosure.closeAndFocus();
-    },
-    toggleModalVisibility(value) {
-      this.feedBackModalVisible = value;
-      this.closeDropdown();
-    },
-    toggleNewNavigation() {
-      this.newNavigation = !this.newNavigation;
-      // eslint-disable-next-line no-restricted-globals
-      setTimeout(() => {
-        this.closeDropdown();
-      }, 500);
-    },
-  },
-  groups: mockProfileGroups,
-});
-CustomGroupsItemsAndToggle.args = {
-  icon: 'plus-square',
-  toggleText: 'User profile menu',
-  textSrOnly: true,
-  autoClose: false,
-  bordered: true,
-  borderPosition: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top,
-};
-CustomGroupsItemsAndToggle.argTypes = {
-  borderPosition: {
-    options: DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS,
-    control: {
-      type: 'select',
-    },
-  },
-};
-
-CustomGroupsItemsAndToggle.decorators = [makeContainer({ height: '400px' })];
-
-export const MiscellaneousContent = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: {
-    GlDisclosureDropdown,
-  },
-  template: template(
-    `
-      <div class="gl-p-3">A disclosure dropdown is a button that toggles a panel containing a list of items and/or links.</div>
-    `
-  ),
-});
-
-MiscellaneousContent.args = {
-  icon: 'doc-text',
-  toggleText: 'Miscellaneous content',
-  textSrOnly: true,
-  fluidWidth: true,
-};
-MiscellaneousContent.decorators = [makeContainer({ height: '200px' })];
-
-export default {
-  title: 'base/dropdown/disclosure-dropdown',
-  component: GlDisclosureDropdown,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    category: {
-      control: {
-        type: 'select',
-      },
-      options: buttonCategoryOptions,
-    },
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: buttonVariantOptions,
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: Object.keys(buttonSizeOptions),
-    },
-    placement: {
-      control: {
-        type: 'select',
-      },
-      options: Object.keys(dropdownPlacements),
-    },
-  },
-  args: {
-    startOpened: true,
-  },
-};

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js

@@ -1,84 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlDisclosureDropdownGroup, { BORDER_CLASSES } from './disclosure_dropdown_group.vue';
-import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
-import { mockGroups, mockProfileGroups } from './mock_data';
-import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS as borderPositions } from './constants';
-
-describe('GlDisclosureDropdownGroup', () => {
-  let wrapper;
-
-  const buildWrapper = ({ propsData, slots } = {}) => {
-    wrapper = shallowMount(GlDisclosureDropdownGroup, {
-      propsData: {
-        group: mockGroups[0],
-        ...propsData,
-      },
-      stubs: {
-        GlDisclosureDropdownItem,
-      },
-      slots,
-    });
-  };
-
-  const findGroup = () => wrapper.find('ul');
-  const findItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
-  const findByTestId = (testid, root = wrapper) => root.find(`[data-testid="${testid}"]`);
-  const findLabelElement = () => {
-    const labelElementId = findGroup().attributes('aria-labelledby');
-    return wrapper.find(`#${labelElementId}`);
-  };
-
-  it('renders default slot content', () => {
-    buildWrapper({ slots: { default: '<li data-testid="default-slot-content"></li>' } });
-
-    expect(findByTestId('default-slot-content').exists()).toBe(true);
-  });
-
-  it('renders list of items if default content was not provided', () => {
-    buildWrapper();
-
-    expect(findItems()).toHaveLength(mockGroups[0].items.length);
-  });
-
-  it('renders `list-item` content in a `list-item` slot of `GlDisclosureDropdownItem`', () => {
-    buildWrapper({
-      slots: { 'list-item': '<span data-testid="list-item-content"></span>' },
-    });
-
-    expect(findItems()).toHaveLength(mockGroups[0].items.length);
-
-    expect(findItems().at(0).find('[data-testid="list-item-content"]').exists()).toBe(true);
-  });
-
-  describe('label', () => {
-    it('labels the group when label provided', () => {
-      buildWrapper();
-      expect(findLabelElement().text()).toBe(mockGroups[0].name);
-    });
-
-    it('does not label the group when label is not provided', () => {
-      buildWrapper({ propsData: { group: mockProfileGroups[0] } });
-      expect(findLabelElement().exists()).toBe(false);
-    });
-
-    it('allows arbitrary content for group label', () => {
-      buildWrapper({ slots: { 'group-label': '<i data-testid="custom-name"></i>' } });
-
-      expect(findByTestId('custom-name', findLabelElement()).exists()).toBe(true);
-    });
-  });
-
-  it.each`
-    bordered | borderPosition            | classes
-    ${true}  | ${borderPositions.top}    | ${BORDER_CLASSES[borderPositions.top].split(' ')}
-    ${true}  | ${borderPositions.bottom} | ${BORDER_CLASSES[borderPositions.bottom].split(' ')}
-    ${false} | ${borderPositions.top}    | ${[]}
-    ${false} | ${borderPositions.bottom} | ${[]}
-  `(
-    'adds border classes `$classes` when bordered=$bordered and borderPosition=$borderPosition',
-    ({ bordered, borderPosition, classes }) => {
-      buildWrapper({ propsData: { bordered, borderPosition } });
-      expect(wrapper.classes()).toEqual(classes);
-    }
-  );
-});

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -1,200 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { BLink } from 'bootstrap-vue';
-import { ENTER, SPACE } from '../constants';
-import { mockItems } from './mock_data';
-
-import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
-
-describe('GlDisclosureDropdownItem', () => {
-  let wrapper;
-
-  const clone = (i) => JSON.parse(JSON.stringify(i));
-
-  const buildWrapper = (propsData, slots = {}) => {
-    wrapper = mount(GlDisclosureDropdownItem, {
-      propsData,
-      slots,
-    });
-  };
-  const findItem = () => wrapper.find('[data-testid="disclosure-dropdown-item"]');
-
-  describe('when default slot content provided', () => {
-    const content = 'This is an item';
-    const slots = { default: content };
-    const item = clone(mockItems[1]);
-
-    beforeEach(() => {
-      buildWrapper({ item }, slots);
-    });
-
-    it('renders it', () => {
-      expect(wrapper.text()).toContain(content);
-    });
-
-    it.each`
-      trigger                                                 | event
-      ${() => findItem().trigger('click')}                    | ${'click'}
-      ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
-      ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
-    `(`$event should emit 'action' event`, ({ trigger }) => {
-      trigger();
-      const emittedAction = wrapper.emitted('action');
-      expect(emittedAction).toHaveLength(1);
-      expect(emittedAction).toEqual([[item]]);
-    });
-
-    it('sets tabIndex on li element', () => {
-      expect(findItem().attributes('tabindex')).toBe('0');
-    });
-  });
-
-  describe.each`
-    prop      | mockItem
-    ${'href'} | ${0}
-    ${'to'}   | ${2}
-  `('when item has a `$prop`', ({ prop, mockItem }) => {
-    const item = mockItems[mockItem];
-
-    beforeEach(() => {
-      buildWrapper({ item });
-    });
-
-    const findLink = () => wrapper.findComponent(BLink);
-
-    it('should render a link', () => {
-      expect(findLink().exists()).toBe(true);
-    });
-
-    it('should set correct class', () => {
-      expect(findLink().classes()).toContain('gl-new-dropdown-item-content');
-    });
-
-    it('should set correct props and attributes', () => {
-      expect(findLink().props(prop)).toBe(item[prop]);
-      expect(findLink().attributes()).toEqual(expect.objectContaining(item.extraAttrs));
-    });
-
-    it('should apply the default classes to the item wrapper', () => {
-      expect(findItem().classes()).toEqual(['gl-new-dropdown-item']);
-    });
-
-    it('should emit `action` on `click`', () => {
-      findLink().trigger('click');
-      const emittedAction = wrapper.emitted('action');
-      expect(emittedAction).toHaveLength(1);
-      expect(emittedAction).toEqual([[item]]);
-    });
-
-    it.each`
-      trigger                                                 | event
-      ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
-      ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
-    `(`$event on parent will execute 'action' event`, ({ trigger }) => {
-      trigger();
-      const emittedAction = wrapper.emitted('action');
-      expect(emittedAction).toHaveLength(1);
-      expect(emittedAction).toEqual([[item]]);
-    });
-
-    it('sets tabIndex on link element', () => {
-      expect(findLink().attributes('tabindex')).toBe('-1');
-    });
-  });
-
-  describe('when item has an `action`', () => {
-    const item = mockItems[3];
-    const action = jest.spyOn(item, 'action');
-
-    beforeEach(() => {
-      buildWrapper({ item });
-      action.mockClear();
-    });
-
-    const findButton = () => wrapper.find('button[type="button"].gl-new-dropdown-item-content');
-
-    it('should render a button', () => {
-      expect(findButton().exists()).toBe(true);
-    });
-
-    it('should set correct attributes', () => {
-      const attrs = { ...item.extraAttrs };
-      delete attrs.class;
-      expect(findButton().classes()).toContain(item.extraAttrs.class);
-      expect(findButton().attributes()).toMatchObject(attrs);
-    });
-
-    it('should call `action` on `click` and emit `action` event', () => {
-      findButton().trigger('click');
-      expect(action).toHaveBeenCalledTimes(1);
-
-      const actionThisArg = action.mock.contexts[0];
-      expect(actionThisArg).toBe(undefined);
-
-      const actionArgs = action.mock.calls[0];
-      expect(actionArgs).toEqual([item]);
-
-      const emittedAction = wrapper.emitted('action');
-      expect(emittedAction).toHaveLength(1);
-      expect(emittedAction).toEqual([[item]]);
-    });
-
-    it.each`
-      trigger                                                 | event
-      ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
-      ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
-    `(`$event on parent will execute action and emit 'action' event`, ({ trigger }) => {
-      trigger();
-      expect(action).toHaveBeenCalledTimes(1);
-      expect(action.mock.calls[0]).toEqual([item]);
-
-      const emittedAction = wrapper.emitted('action');
-      expect(emittedAction).toHaveLength(1);
-      expect(emittedAction).toEqual([[item]]);
-    });
-
-    it('should apply the default classes to the item wrapper', () => {
-      expect(findItem().classes()).toEqual(['gl-new-dropdown-item']);
-    });
-
-    it('sets tabIndex on link element', () => {
-      expect(findButton().attributes('tabindex')).toBe('-1');
-    });
-  });
-
-  describe('when item has wrapperClass', () => {
-    const TEST_CLASS = 'just-a-test-class';
-    beforeEach(() => {
-      buildWrapper({
-        item: {
-          ...mockItems[0],
-          wrapperClass: TEST_CLASS,
-        },
-      });
-    });
-
-    it('should add the extra class to the item wrapper', () => {
-      expect(findItem().classes()).toContain(TEST_CLASS);
-    });
-  });
-
-  describe('when item has disabled attribute', () => {
-    const extraAttrs = {
-      disabled: true,
-    };
-    beforeEach(() => {
-      buildWrapper({
-        item: {
-          ...mockItems[3],
-          extraAttrs,
-        },
-      });
-    });
-
-    it('should not set tabIndex to elements', () => {
-      const findButton = () => wrapper.find('button[type="button"].gl-new-dropdown-item-content');
-
-      expect(findItem().attributes('tabindex')).toBeUndefined();
-      expect(findButton().attributes('tabindex')).toBeUndefined();
-    });
-  });
-});

package/src/components/base/new_dropdowns/disclosure/utils.spec.js

@@ -1,74 +0,0 @@
-import { itemsValidator, isItem, isGroup } from './utils';
-import { mockItems, mockGroups } from './mock_data';
-
-describe('isItem', () => {
-  it.each([null, undefined, {}, { text: null }, { text: 'group', items: [] }])(
-    'isItem(%p) === false',
-    (notAnItem) => {
-      expect(isItem(notAnItem)).toBe(false);
-    }
-  );
-
-  it.each([
-    { text: 'Action' },
-    { text: 'Action', href: 'gitlab.com' },
-    {
-      text: 'Action',
-      action: () => {},
-    },
-    {
-      text: 'Action',
-      href: 'gitlab.com',
-      action: () => {},
-    },
-  ])('isItem(%p) === true', (item) => {
-    expect(isItem(item)).toBe(true);
-  });
-});
-
-describe('isGroup', () => {
-  it.each([null, undefined, {}, { name: null }, { name: 'group', items: [] }])(
-    'isGroup(%p) === false',
-    (notAGroup) => {
-      expect(isGroup(notAGroup)).toBe(false);
-    }
-  );
-
-  it.each([
-    {
-      name: 'group',
-      items: [
-        { text: 'Action', href: 'gitlab.com' },
-        {
-          text: 'Action',
-          action: () => {},
-        },
-      ],
-    },
-    {
-      items: [
-        { text: 'Action', href: 'gitlab.com' },
-        {
-          text: 'Action',
-          action: () => {},
-        },
-      ],
-    },
-  ])('isGroup(%p) === true', (group) => {
-    expect(isGroup(group)).toBe(true);
-  });
-});
-
-describe('itemsValidator', () => {
-  it.each`
-    description                   | value                                        | expected
-    ${'valid flat items'}         | ${mockItems}                                 | ${true}
-    ${'valid grouped items'}      | ${mockGroups}                                | ${true}
-    ${'empty list'}               | ${[]}                                        | ${true}
-    ${'invalid items'}            | ${[{ foo: true }]}                           | ${false}
-    ${'group with invalid items'} | ${[{ name: 'foo', items: [{ foo: true }] }]} | ${false}
-    ${'sibling groups and items'} | ${[...mockItems, ...mockGroups]}             | ${false}
-  `('returns $expected given $description', ({ value, expected }) => {
-    expect(itemsValidator(value)).toBe(expected);
-  });
-});