@gitlab/ui 39.3.2 → 39.5.1

package/src/components/base/new_dropdowns/listbox/listbox_item.spec.js

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils';
+import GLIcon from '../../icon/icon.vue';
+
+import { ENTER, SPACE } from '../constants';
+import GlListboxItem from './listbox_item.vue';
+
+describe('GlListboxItem', () => {
+  let wrapper;
+
+  const buildWrapper = (propsData, slots = {}) => {
+    wrapper = mount(GlListboxItem, {
+      propsData,
+      slots,
+    });
+  };
+  const findItem = () => wrapper.find('[role="option"]');
+  const findCheckIcon = () => findItem().findComponent(GLIcon);
+
+  describe('toggleSelection', () => {
+    describe('when selected ', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: true });
+      });
+
+      it('should set `aria-selected` attribute on the list item to `true`', () => {
+        expect(findItem().attributes('aria-selected')).toBe('true');
+      });
+
+      it('should display check icon', () => {
+        expect(findCheckIcon().classes()).not.toContain('gl-visibility-hidden');
+      });
+
+      it('should emit the `select` event when clicked', async () => {
+        await findItem().trigger('click');
+        expect(wrapper.emitted('select')[0][0]).toBe(false);
+      });
+
+      it('should emit the `select` event on `ENTER` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: SPACE });
+        expect(wrapper.emitted('select')[0][0]).toBe(false);
+      });
+
+      it('should emit the `select` event on `SPACE` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: SPACE });
+        expect(wrapper.emitted('select')[0][0]).toBe(false);
+      });
+    });
+
+    describe('when not selected ', () => {
+      beforeEach(() => {
+        buildWrapper({ isSelected: false });
+      });
+
+      it('should set `aria-selected` attribute on the list item to `false`', () => {
+        expect(findItem().attributes('aria-selected')).toBeUndefined();
+      });
+
+      it('should not  display check icon', () => {
+        expect(findCheckIcon().classes()).toContain('gl-visibility-hidden');
+      });
+
+      it('should emit the `select` event when clicked', async () => {
+        await findItem().trigger('click');
+        expect(wrapper.emitted('select')[0][0]).toBe(true);
+      });
+
+      it('should emit the `select` event on `ENTER` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: ENTER });
+        expect(wrapper.emitted('select')[0][0]).toBe(true);
+      });
+
+      it('should emit the `select` event on `SPACE` keydown event', async () => {
+        await findItem().trigger('click');
+        findItem().trigger('keydown', { code: SPACE });
+        expect(wrapper.emitted('select')[0][0]).toBe(true);
+      });
+    });
+  });
+
+  describe('tabindex', () => {
+    it('should set tabindex to `-1` when item is not focused', () => {
+      buildWrapper({ isFocused: false });
+      expect(wrapper.attributes('tabindex')).toBe('-1');
+    });
+
+    it('should set tabindex to `0` when item is focused', () => {
+      buildWrapper({ isFocused: true });
+      expect(wrapper.attributes('tabindex')).toBe('0');
+    });
+  });
+
+  describe('when default slot content provided', () => {
+    const content = 'This is an item';
+    const slots = { default: content };
+
+    it('renders it', () => {
+      buildWrapper({}, slots);
+      expect(wrapper.text()).toContain(content);
+    });
+  });
+});

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -0,0 +1,59 @@
+<script>
+import GlIcon from '../../icon/icon.vue';
+import { ENTER, SPACE } from '../constants';
+import { stopEvent } from '../../../../utils/utils';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    isSelected: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    isFocused: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  methods: {
+    toggleSelection() {
+      this.$emit('select', !this.isSelected);
+    },
+    onKeydown(event) {
+      const { code } = event;
+
+      if (code === ENTER || code === SPACE) {
+        stopEvent(event);
+        this.toggleSelection();
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    class="gl-new-dropdown-item"
+    role="option"
+    :tabindex="isFocused ? 0 : -1"
+    :aria-selected="isSelected"
+    @click="toggleSelection"
+    @keydown="onKeydown"
+  >
+    <span class="dropdown-item">
+      <gl-icon
+        name="mobile-issue-close"
+        data-testid="dropdown-item-checkbox"
+        class="gl-mt-3 gl-align-self-start"
+        :class="['gl-new-dropdown-item-check-icon', { 'gl-visibility-hidden': !isSelected }]"
+      />
+      <span class="gl-new-dropdown-item-text-wrapper">
+        <slot></slot>
+      </span>
+    </span>
+  </li>
+</template>

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -12,26 +12,26 @@ const generateProps = ({ text = '', symbols = defaultValue('symbols')() } = {})
   symbols,
 });
 
-const makeStory = (options = {}) => (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  ...options,
-});
+const makeStory =
+  (options = {}) =>
+  (args, { argTypes }) => ({
+    components,
+    props: Object.keys(argTypes),
+    ...options,
+  });
 
 export const Default = makeStory({
   template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
 });
 Default.args = generateProps({
-  text:
-    '/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/Aenean/tincidunt/urna/ac/tellus/cursus/laoreet/aenean/blandit/erat/vel/est/maximus/porta/Sed/id/nunc/non/sapien/cursus/ullamcorper',
+  text: '/lorem/ipsum/dolor/sit/amet/consectetur/adipiscing/elit/Aenean/tincidunt/urna/ac/tellus/cursus/laoreet/aenean/blandit/erat/vel/est/maximus/porta/Sed/id/nunc/non/sapien/cursus/ullamcorper',
 });
 
 export const BreakWord = makeStory({
   template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
 });
 BreakWord.args = generateProps({
-  text:
-    'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
+  text: 'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
   symbols: ['dolor'],
 });
 
@@ -39,8 +39,7 @@ export const MultipleSymbols = makeStory({
   template: `<gl-friendly-wrap :text="text" :symbols="symbols" />`,
 });
 MultipleSymbols.args = generateProps({
-  text:
-    'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
+  text: 'LoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitametLoremipsumdolorsitamet',
   symbols: ['e', 'o'],
 });
 

package/src/components/utilities/sprintf/sprintf.stories.js

@@ -6,15 +6,17 @@ const generateProps = ({ message = 'Written by %{author}', placeholders } = {})
   placeholders,
 });
 
-const makeStory = (options) => (args, { argTypes }) => ({
-  components: {
-    GlSprintf,
-    GlButton,
-    GlLink,
-  },
-  props: Object.keys(argTypes),
-  ...options,
-});
+const makeStory =
+  (options) =>
+  (args, { argTypes }) => ({
+    components: {
+      GlSprintf,
+      GlButton,
+      GlLink,
+    },
+    props: Object.keys(argTypes),
+    ...options,
+  });
 
 export const SentenceWithLink = makeStory({
   template: `

package/src/index.js

@@ -54,6 +54,10 @@ export { default as GlDropdownSectionHeader } from './components/base/dropdown/d
 export { default as GlDropdownDivider } from './components/base/dropdown/dropdown_divider.vue';
 export { default as GlDropdownText } from './components/base/dropdown/dropdown_text.vue';
 export { default as GlDropdown } from './components/base/dropdown/dropdown.vue';
+// new components aiming to replace GlDropdown  - start
+export { default as GlListbox } from './components/base/new_dropdowns/listbox/listbox.vue';
+export { default as GlListboxItem } from './components/base/new_dropdowns/listbox/listbox_item.vue';
+// new components aiming to replace GlDropdown  - end
 export { default as GlPath } from './components/base/path/path.vue';
 export { default as GlTable } from './components/base/table/table.vue';
 export { default as GlBreadcrumb } from './components/base/breadcrumb/breadcrumb.vue';

package/src/scss/utilities.scss

@@ -2484,6 +2484,16 @@
     filter: invert(0.8) hue-rotate(180deg) !important;
   }
 }
+.gl--flex-center{
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center
+}
+.gl--flex-center\!{
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center
+}
 .gl-content-empty {
   content: ''
 }

package/src/scss/utility-mixins/composite.scss

@@ -0,0 +1,20 @@
+//
+// Composite utilities
+//
+// naming convention: gl--{name}
+// purpose: This is for composite classes that provide significant readability and maintainability profit.
+//
+// PLEASE NOTE: When considering to abstract a set of utility classes, please prefer, in order:
+//   1. Not abstracting
+//   2. Create a component
+//   3. Create a constant scoped within a specific module
+//   4. Create a composite class if there are many preexisting occurrences with a clear design responsibility
+//
+// notes:
+//   - Composite classes should be very short and not have any nested rules.
+//
+@mixin gl--flex-center {
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-justify-content-center;
+}

package/src/scss/utility-mixins/index.scss

@@ -22,6 +22,7 @@
 @import './border';
 @import './box-shadow';
 @import './color';
+@import './composite';
 @import './content';
 @import './cursor';
 @import './display';

package/src/utils/data_utils.js

@@ -2,27 +2,8 @@ import curry from 'lodash/fp/curry';
 
 const getRepeatingValue = (index) => {
   const values = [
-    100,
-    500,
-    400,
-    200,
-    100,
-    800,
-    400,
-    500,
-    600,
-    300,
-    800,
-    900,
-    110,
-    700,
-    400,
-    300,
-    500,
-    300,
-    400,
-    600,
-    700,
+    100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400,
+    600, 700,
   ];
   return index < values.length ? values[index] : values[index % values.length];
 };

package/src/utils/utils.js

@@ -122,3 +122,21 @@ export function logWarning(message = '') {
     console.warn(message); // eslint-disable-line no-console
   }
 }
+
+/**
+ * Stop default event handling and propagation
+ */
+export function stopEvent(
+  event,
+  { preventDefault = true, stopPropagation = true, stopImmediatePropagation = false } = {}
+) {
+  if (preventDefault) {
+    event.preventDefault();
+  }
+  if (stopPropagation) {
+    event.stopPropagation();
+  }
+  if (stopImmediatePropagation) {
+    event.stopImmediatePropagation();
+  }
+}

package/src/utils/utils.spec.js

@@ -1,4 +1,4 @@
-import { isElementFocusable, focusFirstFocusableElement } from './utils';
+import { isElementFocusable, focusFirstFocusableElement, stopEvent } from './utils';
 
 describe('isElementFocusable', () => {
   const myBtn = () => document.querySelector('button');
@@ -77,3 +77,43 @@ describe('focusFirstFocusableElement', () => {
     expect(document.activeElement).toBe(myInput());
   });
 });
+
+describe('stopEvent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const event = {
+    preventDefault: jest.fn(),
+    stopPropagation: jest.fn(),
+    stopImmediatePropagation: jest.fn(),
+  };
+
+  it('calls preventDefault and stopPropagation by default', () => {
+    stopEvent(event);
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(event.stopPropagation).toHaveBeenCalledTimes(1);
+    expect(event.stopImmediatePropagation).not.toHaveBeenCalled();
+  });
+
+  it('completely stops the event when stopImmediatePropagation is true', () => {
+    stopEvent(event, { stopImmediatePropagation: true });
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(1);
+    expect(event.stopPropagation).toHaveBeenCalledTimes(1);
+    expect(event.stopImmediatePropagation).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls event stop methods set to true', () => {
+    stopEvent(event, {
+      preventDefault: false,
+      stopPropagation: false,
+      stopImmediatePropagation: true,
+    });
+
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(event.stopPropagation).not.toHaveBeenCalled();
+    expect(event.stopImmediatePropagation).toHaveBeenCalledTimes(1);
+  });
+});