@gitlab/ui 32.40.0 → 32.43.1

package/src/components/charts/sparkline/sparkline.spec.js

@@ -2,14 +2,13 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 
-const mockResize = jest.fn();
-const mockChartInstance = {
-  subscribedEvents: {},
-  getDom: () => {},
-  convertToPixel: () => [],
-  resize: mockResize,
-};
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
 
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
@@ -22,11 +21,6 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
 
 const localVue = createLocalVue();
 
-const ChartToolTipStub = {
-  name: 'chart-tooltip-stub',
-  template: '<div><slot name="default"></slot><slot name="title"></slot></div>',
-};
-
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
@@ -39,7 +33,7 @@ describe('sparkline chart component', () => {
       },
       scopedSlots: { latestSeriesEntry: jest.fn() },
       stubs: {
-        'chart-tooltip': ChartToolTipStub,
+        'chart-tooltip': ChartTooltipStub,
       },
     };
 
@@ -50,7 +44,7 @@ describe('sparkline chart component', () => {
   const getByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
   const getChart = () => wrapper.findComponent(Chart);
 
-  const getTooltip = () => wrapper.findComponent(ChartToolTipStub);
+  const getTooltip = () => wrapper.findComponent(ChartTooltipStub);
   const getTooltipTitle = () => getByTestId('tooltip-title');
   const getTooltipContent = () => getByTestId('tooltip-content');
 
@@ -72,13 +66,13 @@ describe('sparkline chart component', () => {
   const emitChartCreated = () => getChart().vm.$emit('created', mockChartInstance);
 
   beforeEach(() => {
+    mockChartInstance = createMockChartInstance();
     factory();
     // needs to run after every mount, or the chart-instance is `null` and `beforeDestroy` throws
     emitChartCreated();
   });
 
   afterEach(() => {
-    wrapper.destroy();
     jest.clearAllMocks();
   });
 

package/src/components/charts/stacked_column/stacked_column.spec.js

@@ -9,9 +9,9 @@ import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import * as themeUtils from '../../../utils/charts/theme';
 import StackedColumnChart from './stacked_column.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 
 let mockChartInstance;
@@ -29,18 +29,8 @@ const defaultChartProps = {
   yAxisTitle: 'Commits',
 };
 
-const ChartTooltipStub = {
-  props: ChartTooltip.props,
-  template: `
-     <div>
-       <slot name="title" />
-       <slot />
-     </div>`,
-};
-
 describe('stacked column chart component', () => {
   let wrapper;
-  let options;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
@@ -62,28 +52,10 @@ describe('stacked column chart component', () => {
   };
 
   beforeEach(() => {
-    options = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return options;
-      },
-    };
+    mockChartInstance = createMockChartInstance();
   });
 
   afterEach(() => {
-    wrapper.destroy();
     jest.restoreAllMocks();
   });
 

package/src/components/regions/empty_state/empty_state.vue

@@ -104,8 +104,14 @@ export default {
     </div>
     <div :class="compact ? 'col-sm-9' : 'col-12'">
       <div class="text-content gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
-        <h1 ref="title" :class="compact ? 'h5' : 'h4'">{{ title }}</h1>
-        <p v-if="description || $scopedSlots.description" ref="description">
+        <h1
+          ref="title"
+          class="gl-font-size-h-display gl-line-height-36"
+          :class="compact ? 'h5' : 'h4'"
+        >
+          {{ title }}
+        </h1>
+        <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-3">
           <!--
             @slot Use this slot to customize the empty state's description
             area. Overrides the `description` prop.

package/src/components/shared_components/clear_icon_button/clear_icon_button.spec.js

@@ -17,10 +17,6 @@ describe('Clear Icon Button', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders successfully', () => {
     expect(wrapper.element).toMatchSnapshot();
   });

package/src/components/shared_components/close_button/close_button.spec.js

@@ -16,10 +16,6 @@ describe('Clear Icon Button', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders successfully', () => {
     expect(wrapper.element).toMatchSnapshot();
   });

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

@@ -10,10 +10,6 @@ describe('Friendly wrap component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('wraps text on slashes by default', () => {
     const text = '/some/file/path';
     const textWrapped = '/<wbr>some/<wbr>file/<wbr>path';

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -58,7 +58,7 @@ describe('IntersectionObserver', () => {
       expect(hasPrivateProps(wrapper.vm.$el)).toBe(true);
     });
 
-    describe('when detroyed', () => {
+    describe('when destroyed', () => {
       beforeEach(() => {
         wrapper.destroy();
       });

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

@@ -17,10 +17,6 @@ describe('sprintf component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('plain placeholders', () => {
     it.each`
       message

package/src/components/utilities/truncate/truncate.spec.js

@@ -17,19 +17,12 @@ describe('Truncate component', () => {
   };
 
   const createComponent = (props) => {
-    wrapper = shallowMount(Truncate, {
-      propsData: { ...defaultProps, ...props },
-      directives: {
-        GlTooltip: createMockDirective(),
-      },
-    });
+    wrapper = shallowMount(
+      { extends: Truncate, directives: { GlTooltip: createMockDirective('gl-tooltip') } },
+      { propsData: { ...defaultProps, ...props } }
+    );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('All', () => {
     beforeEach(() => {
       createComponent();
@@ -39,9 +32,9 @@ describe('Truncate component', () => {
       '%s truncation: should have title, class, original text',
       (position) => {
         createComponent({ position });
-
-        expect(wrapper.attributes('title')).toBe(defaultProps.text);
-        expect(wrapper.attributes('class')).toBe('gl-truncate');
+        const element = wrapper.find('span');
+        expect(element.attributes('title')).toBe(defaultProps.text);
+        expect(element.attributes('class')).toBe('gl-truncate');
         expect(removeSpecialChar(wrapper.text())).toBe(defaultProps.text);
       }
     );
@@ -51,7 +44,9 @@ describe('Truncate component', () => {
     });
 
     it('disables the tooltip by default', () => {
-      expect(getBinding(wrapper.element, 'gl-tooltip').value.disabled).toBe(true);
+      expect(getBinding(wrapper.find('.gl-truncate').element, 'gl-tooltip').value.disabled).toBe(
+        true
+      );
     });
   });
 

package/src/directives/hover_load/hover_load.spec.js

@@ -23,7 +23,6 @@ describe('hover load directive', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     jest.restoreAllMocks();
   });
 

package/src/directives/outside/outside.spec.js

@@ -52,10 +52,6 @@ describe('outside directive', () => {
     onClick = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('given a callback', () => {
     it.each`
       target       | expectedCalls

package/src/directives/resize_observer/resize_observer.spec.js

@@ -29,10 +29,6 @@ describe('resize observer directive', () => {
     wrapper = shallowMount(component, { localVue });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shares one observer between multiple directive instances', () => {
     createComponent({
       template: `<div>

package/src/directives/safe_html/safe_html.spec.js

@@ -25,10 +25,6 @@ describe('safe html directive', () => {
     wrapper = shallowMount(component);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     it('should remove the script tag', () => {
       createComponent();

package/src/directives/safe_link/safe_link.spec.js

@@ -33,11 +33,6 @@ describe('safe link directive', () => {
     wrapper = mountFn(component);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default', () => {
     it('should render the anchor tag with given href', () => {
       createComponent({

package/src/scss/utilities.scss

@@ -4384,6 +4384,18 @@
     max-width: 50% !important;
   }
 }
+
+.gl-md-max-w-70p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 70%;
+  }
+}
+
+.gl-md-max-w-70p\! {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 70% !important;
+  }
+}
 .gl-p-0 {
   padding: 0;
 }
@@ -4910,6 +4922,12 @@
 .gl-m-5\! {
   margin: $gl-spacing-scale-5 !important;
 }
+.gl-m-7 {
+  margin: $gl-spacing-scale-7;
+}
+.gl-m-7\! {
+  margin: $gl-spacing-scale-7 !important;
+}
 .gl-m-auto {
   margin: auto;
 }
@@ -6629,6 +6647,14 @@
   z-index: 3 !important
 }
 
+.gl-z-index-200 {
+  z-index: 200
+}
+
+.gl-z-index-200\! {
+  z-index: 200 !important
+}
+
 .gl-z-index-9999 {
   z-index: 9999
 }

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

@@ -314,3 +314,9 @@
     max-width: 50%;
   }
 }
+
+@mixin gl-md-max-w-70p {
+  @include gl-media-breakpoint-up(md) {
+    max-width: 70%;
+  }
+}

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

@@ -354,6 +354,10 @@
   margin: $gl-spacing-scale-5;
 }
 
+@mixin gl-m-7 {
+  margin: $gl-spacing-scale-7;
+}
+
 @mixin gl-m-auto {
   margin: auto;
 }

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

@@ -20,6 +20,10 @@
   z-index: 3;
 }
 
+@mixin gl-z-index-200 {
+  z-index: 200;
+}
+
 @mixin gl-z-index-9999 {
   z-index: 9999;
 }

package/dist/components/base/token_selector/examples/index.js

@@ -1,19 +0,0 @@
-import UserDefinedTokensExample from './token_selector.user_defined_tokens.example';
-import UsersExample from './token_selector.users.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'token-selector-user-defined-tokens',
-    name: 'User Defined Tokens',
-    description: 'User Defined Tokens',
-    component: UserDefinedTokensExample
-  }, {
-    id: 'token-selector-users',
-    name: 'Users',
-    description: 'Users Token Selector',
-    component: UsersExample
-  }]
-}];
-
-export default index;

package/dist/components/base/token_selector/examples/token_selector.user_defined_tokens.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selectedTokens: []
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-token-selector',{attrs:{"allow-user-defined-tokens":"","hide-dropdown-with-no-items":""},model:{value:(_vm.selectedTokens),callback:function ($$v) {_vm.selectedTokens=$$v;},expression:"selectedTokens"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/token_selector/examples/token_selector.users.example.js

@@ -1,202 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      // Generated with https://github.com/marak/Faker.js/
-      users: [{
-        avatar_url: 'https://picsum.photos/id/786/64/64',
-        id: 1,
-        name: 'Jett Kulas',
-        username: '@Vidal_Hilpert'
-      }, {
-        avatar_url: 'https://picsum.photos/id/823/64/64',
-        id: 2,
-        name: 'Blaze Thompson',
-        username: '@Otto_Medhurst'
-      }, {
-        avatar_url: 'https://picsum.photos/id/832/64/64',
-        id: 3,
-        name: 'Russel Rath',
-        username: '@Joy_Sanford30'
-      }, {
-        avatar_url: 'https://picsum.photos/id/838/64/64',
-        id: 4,
-        name: 'Lisandro Stiedemann',
-        username: '@Consuelo_Durgan'
-      }, {
-        avatar_url: 'https://picsum.photos/id/883/64/64',
-        id: 5,
-        name: 'Adela Champlin',
-        username: '@Tiana_Shanahan'
-      }, {
-        avatar_url: 'https://picsum.photos/id/1005/64/64',
-        id: 6,
-        name: 'Keith Rogahn',
-        username: '@Jackeline.Moore'
-      }, {
-        avatar_url: 'https://picsum.photos/id/1011/64/64',
-        id: 7,
-        name: 'Alek Lakin',
-        username: '@Ike98'
-      }, {
-        avatar_url: 'https://picsum.photos/id/1012/64/64',
-        id: 8,
-        name: 'Alek Bogan',
-        username: '@Wilton.Dare'
-      }, {
-        avatar_url: 'https://picsum.photos/id/1027/64/64',
-        id: 9,
-        name: 'Ismael Abbott',
-        username: '@Junius.Lynch58'
-      }, {
-        avatar_url: 'https://picsum.photos/id/1062/64/64',
-        id: 10,
-        name: 'Emil Bartell',
-        username: '@Vergie.Brown78'
-      }, {
-        avatar_url: 'https://picsum.photos/id/1074/64/64',
-        id: 11,
-        name: 'Foster Kutch',
-        username: '@Lyda_Cummerata'
-      }, {
-        avatar_url: 'https://picsum.photos/id/177/64/64',
-        id: 12,
-        name: 'Alexandra Schuppe',
-        username: '@Jana_Fadel'
-      }, {
-        avatar_url: 'https://picsum.photos/id/237/64/64',
-        id: 13,
-        name: 'Ervin Emard',
-        username: '@Hayden24'
-      }, {
-        avatar_url: 'https://picsum.photos/id/375/64/64',
-        id: 14,
-        name: 'Kailey Frami',
-        username: '@Ima46'
-      }, {
-        avatar_url: 'https://picsum.photos/id/550/64/64',
-        id: 15,
-        name: 'Xavier Prohaska',
-        username: '@Theron15'
-      }, {
-        avatar_url: 'https://picsum.photos/id/602/64/64',
-        id: 16,
-        name: 'Freddy Sanford',
-        username: '@Luciano.Kuphal6'
-      }, {
-        avatar_url: 'https://picsum.photos/id/64/64/64',
-        id: 17,
-        name: 'Alvah Rempel',
-        username: '@Bo89'
-      }, {
-        avatar_url: 'https://picsum.photos/id/65/64/64',
-        id: 18,
-        name: 'Gavin Mann',
-        username: '@Cedrick56'
-      }, {
-        avatar_url: 'https://picsum.photos/id/660/64/64',
-        id: 19,
-        name: 'Alexie Hagenes',
-        username: '@Berry_Erdman'
-      }, {
-        avatar_url: 'https://picsum.photos/id/996/64/64',
-        id: 20,
-        name: 'Cortez Wunsch',
-        username: '@Kenyon.Crist3'
-      }],
-      filteredUsers: [],
-      loading: false,
-      inputText: '',
-      selectedTokens: []
-    };
-  },
-
-  computed: {
-    emailIsValid() {
-      return /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.inputText) && !this.filteredUsers.length;
-    }
-
-  },
-  methods: {
-    handleTextInput(value) {
-      this.inputText = value;
-
-      if (this.inputText === '') {
-        this.filteredUsers = this.users;
-        return;
-      }
-
-      this.loading = true;
-      this.filterUsers();
-    },
-
-    handleFocus() {
-      this.loading = true;
-
-      if (this.inputText !== '') {
-        this.filterUsers();
-      } else {
-        setTimeout(() => {
-          this.filteredUsers = this.users;
-          this.loading = false;
-        }, 500);
-      }
-    },
-
-    filterUsers() {
-      setTimeout(() => {
-        this.filteredUsers = this.users.filter(user => {
-          const searchQuery = this.inputText.toLowerCase();
-          return user.name.toLowerCase().includes(searchQuery) || user.username.toLowerCase().includes(searchQuery);
-        });
-        this.loading = false;
-      }, 500);
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-token-selector',{attrs:{"dropdown-items":_vm.filteredUsers,"loading":_vm.loading,"allow-user-defined-tokens":_vm.emailIsValid},on:{"text-input":_vm.handleTextInput,"focus":_vm.handleFocus},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
-var token = ref.token;
-return [(token.avatar_url)?_c('gl-avatar',{attrs:{"src":token.avatar_url,"size":16}}):_vm._e(),_vm._v("\n    "+_vm._s(token.name)+"\n  ")]}},{key:"dropdown-item-content",fn:function(ref){
-var dropdownItem = ref.dropdownItem;
-return [_c('div',{staticClass:"gl-display-flex"},[_c('gl-avatar',{attrs:{"src":dropdownItem.avatar_url,"size":32}}),_vm._v(" "),_c('div',[_c('p',{staticClass:"gl-m-0"},[_vm._v(_vm._s(dropdownItem.name))]),_vm._v(" "),_c('p',{staticClass:"gl-m-0 gl-text-gray-700"},[_vm._v(_vm._s(dropdownItem.username))])])],1)]}},{key:"user-defined-token-content",fn:function(ref){
-var text = ref.inputText;
-return [_vm._v("\n    Invite \""+_vm._s(text)+"\" by email\n  ")]}}]),model:{value:(_vm.selectedTokens),callback:function ($$v) {_vm.selectedTokens=$$v;},expression:"selectedTokens"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;