@gitlab/ui 32.39.0 → 32.43.0

package/documentation/documented_stories.js

@@ -91,6 +91,9 @@ export const setupStorybookReadme = () =>
         'GlDaterangePicker',
         'GlBarChart',
         'GlCarousel',
+        'GlMarkdown',
+        'GlTokenSelector',
+        'GlTooltip',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.39.0",
+  "version": "32.43.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,21 +82,21 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "9.4.0",
+    "@gitlab/eslint-plugin": "10.0.0",
     "@gitlab/stylelint-config": "2.6.0",
-    "@gitlab/svgs": "1.220.0",
+    "@gitlab/svgs": "1.225.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-docs": "6.3.12",
-    "@storybook/addon-essentials": "6.3.12",
-    "@storybook/addon-knobs": "6.3.1",
-    "@storybook/addon-storyshots": "6.3.12",
-    "@storybook/addon-storyshots-puppeteer": "6.3.12",
-    "@storybook/addon-viewport": "6.3.12",
-    "@storybook/theming": "6.3.12",
-    "@storybook/vue": "6.3.12",
+    "@storybook/addon-a11y": "6.4.5",
+    "@storybook/addon-docs": "6.4.5",
+    "@storybook/addon-essentials": "6.4.5",
+    "@storybook/addon-knobs": "6.4.0",
+    "@storybook/addon-storyshots": "6.4.5",
+    "@storybook/addon-storyshots-puppeteer": "6.4.5",
+    "@storybook/addon-viewport": "6.4.5",
+    "@storybook/theming": "6.4.5",
+    "@storybook/vue": "6.4.5",
     "@vue/test-utils": "1.1.3",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -129,7 +129,7 @@
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
     "pug": "^2.0.3",
-    "puppeteer": "^10.4.0",
+    "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",

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

@@ -6,10 +6,6 @@ import GlAccordionItem from './accordion_item.vue';
 describe('GlAccordion', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = ({ headerLevel = 3, autoCollapse = false } = {}) => {
     wrapper = mount(
       Vue.extend({

package/src/components/base/accordion/accordion_item.spec.js

@@ -10,10 +10,6 @@ describe('GlAccordionItem', () => {
   const defaultTitle = 'Item 1';
   const defaultSlot = 'Hello';
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const createComponent = (props = {}, { defaultHeaderLevel = 3, accordionSetId = false } = {}) => {
     wrapper = mount(GlAccordionItem, {
       directives: {

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

@@ -26,10 +26,6 @@ describe('Alert component', () => {
   const findActionsContainer = () => wrapper.find('.gl-alert-actions');
   const findActionButtons = () => wrapper.findAll('.gl-alert-action');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('by default', () => {
     beforeEach(() => {
       createComponent({ slots: { default: DummyComponent } });

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

@@ -20,8 +20,6 @@ describe('avatar labeled', () => {
     });
   };
 
-  afterEach(() => wrapper.destroy());
-
   it('sets avatar alt attribute to an empty string', () => {
     const altText = 'alt text';
 

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

@@ -23,8 +23,6 @@ describe('avatars inline', () => {
 
   const findBadgeTooltip = () => wrapper.findComponent(GlTooltip);
 
-  afterEach(() => wrapper.destroy());
-
   it('displays all avatars when component is not collapsed', () => {
     buildWrapper({ avatars, maxVisible: 1, avatarSize: 24, collapsed: false });
 

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

@@ -15,8 +15,6 @@ describe('badge', () => {
     });
   };
 
-  afterEach(() => wrapper.destroy());
-
   describe('with "icon" prop', () => {
     describe.each`
       scenario           | hasSlot  | iconName     | expectedRole

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

@@ -14,10 +14,6 @@ describe('Broadcast message component', () => {
     createComponent({ slots: { default: 'some message' } });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('clicking on dismiss button emits a dismiss event', () => {
     findDismissButton().vm.$emit('click');
 

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

@@ -10,11 +10,6 @@ describe('button component', () => {
   };
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders a button', () => {
     buildWrapper();
 

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

@@ -20,11 +20,6 @@ describe('GlCard', () => {
   const findHeader = () => wrapper.find('.gl-card-header');
   const findFooter = () => wrapper.find('.gl-card-footer');
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('with just the body content', () => {
     beforeEach(() => {
       createWrapper({

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

@@ -17,10 +17,6 @@ describe('Carousel component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders a BCarousel component', () => {
       expect(wrapper.findComponent(BCarousel).exists()).toBe(true);
     });

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

@@ -17,10 +17,6 @@ describe('Collapse component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     it('renders a BCollapse', () => {
       expect(wrapper.findComponent(BCollapse).exists()).toBe(true);
     });

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

@@ -148,10 +148,6 @@ describe('datepicker component', () => {
         clearButton = findClearButton(wrapper);
       };
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
-
       it('renders clear button', async () => {
         await setup();
 

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

@@ -24,11 +24,6 @@ describe('Daterange Picker', () => {
   const findStartPicker = () => wrapper.findAllComponents(Datepicker).at(0);
   const findEndPicker = () => wrapper.findAllComponents(Datepicker).at(1);
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders two datepickers', () => {
     factory();
     expect(findStartPicker().exists()).toBe(true);

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

@@ -7,10 +7,6 @@ describe('drawer component', () => {
     wrapper = shallowMount(Drawer, { propsData: props, slots });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default settings', () => {
     describe('when open is true', () => {
       it('makes gl-drawer visible when open is true', () => {

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

@@ -24,8 +24,6 @@ describe('new dropdown', () => {
     });
   };
 
-  afterEach(() => wrapper.destroy());
-
   const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
 
   const findSplitButton = () => wrapper.find('.btn:not(.gl-dropdown-toggle)');

package/src/components/base/dropdown/dropdown_item.spec.js

@@ -14,8 +14,6 @@ describe('dropdown item', () => {
 
   const findCheckbox = () => wrapper.find('[data-testid="dropdown-item-checkbox"]');
 
-  afterEach(() => wrapper.destroy());
-
   describe('checkbox', () => {
     it.each`
       props                                       | shouldExist

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

@@ -39,11 +39,6 @@ describe('Filtered search', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('value manipulation', () => {
     it('creates term when empty', () => {
       createComponent();
@@ -423,11 +418,6 @@ describe('Filtered search integration tests', () => {
     }
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when first term is clicked', () => {
     beforeEach(async () => {
       mountComponent();

package/src/components/base/filtered_search/filtered_search_suggestion.spec.js

@@ -25,11 +25,6 @@ describe('Filtered search suggestion component', () => {
     });
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
       HTMLElement.prototype.scrollIntoView = jest.fn();

package/src/components/base/filtered_search/filtered_search_suggestion_list.spec.js

@@ -12,11 +12,6 @@ describe('Filtered search suggestion list component', () => {
       });
     });
 
-    afterEach(() => {
-      wrapper.destroy();
-      wrapper = null;
-    });
-
     it('has expected public methods', () => {
       expect(wrapper.vm.register).toBeInstanceOf(Function);
       expect(wrapper.vm.unregister).toBeInstanceOf(Function);

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -29,11 +29,6 @@ describe('Filtered search term', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -38,11 +38,6 @@ describe('Filtered search token', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when activated', () => {
     it('emits activate when operator segment is clicked', () => {
       createComponent();

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js

@@ -108,11 +108,6 @@ describe('GlFormCheckboxTree', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe.each`
     description     | shape               | expected | initiallyChecked    | indeterminateBoxes
     ${'non-nested'} | ${SHAPE.NO_NESTING} | ${5}     | ${['1', '2', '3']}  | ${[]}

package/src/components/base/form/form_combobox/form_combobox.spec.js

@@ -48,10 +48,6 @@ describe('GlFormCombobox', () => {
   const setInput = (val) => findInput().setValue(val);
   const arrowDown = () => findInput().trigger('keydown.down');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('match and filter functionality', () => {
     beforeEach(() => {
       createComponent();

package/src/components/base/form/form_input/form_input.spec.js

@@ -14,11 +14,6 @@ describe('GlFormInput', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('size prop', () => {
     // Exclude the default null value
     const sizes = Object.values(formInputSizes).filter(Boolean);

package/src/components/base/form/form_input_group/form_input_group.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { BInputGroup } from 'bootstrap-vue';
+import { BInputGroup, BFormInput } from 'bootstrap-vue';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import InputGroup from './form_input_group.vue';
 
@@ -12,10 +12,6 @@ describe('Input Group', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders without errors', () => {
     createWrapper();
     expect(wrapper.findComponent(BInputGroup).exists()).toBe(true);
@@ -54,6 +50,23 @@ describe('Input Group', () => {
     expect(wrapper.emitted('input')).toBeUndefined();
   });
 
+  describe('`inputClass` prop', () => {
+    it.each`
+      inputClass
+      ${'foo-bar baz'}
+      ${['foo-bar', 'baz']}
+      ${{ 'foo-bar': true, baz: true }}
+    `('correctly adds classes to input when `inputClass` prop is $inputClass', ({ inputClass }) => {
+      createWrapper({
+        propsData: { inputClass },
+      });
+
+      expect(wrapper.findComponent(BFormInput).classes()).toEqual(
+        expect.arrayContaining(['gl-form-input', 'foo-bar', 'baz'])
+      );
+    });
+  });
+
   describe('predefined options', () => {
     const options = [
       { name: 'Foo', value: 'foo.com' },

package/src/components/base/form/form_input_group/form_input_group.vue

@@ -32,6 +32,11 @@ export default {
       required: false,
       default: undefined,
     },
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -73,7 +78,7 @@ export default {
         <b-form-input
           ref="input"
           v-model="localValue"
-          class="gl-form-input"
+          :class="['gl-form-input', inputClass]"
           :aria-label="label"
           v-bind="$attrs"
           v-on="$listeners"

package/src/components/base/form/form_radio/form_radio.spec.js

@@ -44,10 +44,6 @@ describe('GlFormRadio', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('checks the radio button correctly on mount', () => {
     const radio = findRadio(firstOption.value);
     expect(radio.element.checked).toBe(true);

package/src/components/base/form/form_radio_group/form_radio_group.spec.js

@@ -35,10 +35,6 @@ describe('GlFormRadioGroup', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('checks the radio button correctly on mount', () => {
     const radio = findRadio(firstOption.value);
     expect(radio.element.checked).toBe(true);

package/src/components/base/form/form_select/form_select.spec.js

@@ -15,11 +15,6 @@ describe('GlFormSelect', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('state prop', () => {
     it.each`
       state                       | expectedClasses

package/src/components/base/form/form_textarea/form_textarea.spec.js

@@ -13,11 +13,6 @@ describe('GlFormTextArea', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('v-model', () => {
     describe('value binding', () => {
       beforeEach(() => {

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

@@ -29,8 +29,6 @@ describe('Icon component', () => {
   const validateName = (name) => Icon.props.name.validator(name);
 
   afterEach(() => {
-    wrapper.destroy();
-
     if (consoleSpy) {
       consoleSpy.mockRestore();
     }

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

@@ -60,7 +60,6 @@ describe('Infinite Scroll component', () => {
 
   afterEach(() => {
     throttle.mockClear();
-    wrapper.destroy();
   });
 
   it('emits nothing on creation', () => {

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

@@ -17,11 +17,6 @@ describe('GlKeysetPagination', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findPrevButton = () => wrapper.find('[data-testid="prevButton"]');
   const findNextButton = () => wrapper.find('[data-testid="nextButton"]');
 

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

@@ -35,10 +35,6 @@ describe('Label component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findLink = () => wrapper.findComponent(GlLink);
   const findTitle = () => wrapper.find('.gl-label-text');
   const findSubTitle = () => wrapper.find('.gl-label-text-scoped');

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

@@ -8,11 +8,6 @@ describe('link component', () => {
     wrapper = mount(Link, options);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default settings', () => {
     beforeEach(() => {
       createWrapper();

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

@@ -11,10 +11,6 @@ describe('loading icon component', () => {
   const findSpinnerEl = () => wrapper.find(`.${baseCssClass}`);
   const getSpinnerClasses = () => findSpinnerEl().classes();
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('display', () => {
     it('should render as a block by default', () => {
       createComponent();

package/src/components/base/markdown/markdown.documentation.js

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './markdown.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

package/src/components/base/markdown/markdown.md

@@ -1,5 +1,3 @@
-# GlMarkdown
-
 The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown
 [styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
 

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

@@ -1,30 +1,31 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './markdown.md';
 import GlMarkdown from './markdown.vue';
 import markdownTypescaleDemoContent from './markdown_typescale_demo.html';
 
-const components = {
-  GlMarkdown,
-};
+const template = `
+  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown> 
+  `;
+
+const generateProps = ({ compact = false } = {}) => ({ compact });
+
+const Template = (args, { argTypes }) => ({
+  components: { GlMarkdown },
+  props: Object.keys(argTypes),
+  template,
+});
 
-documentedStoriesOf('base/markdown', readme)
-  .addDecorator(withKnobs)
-  .add(
-    'typescale',
-    () => ({
-      components,
-      props: {
-        compact: {
-          type: Boolean,
-          default: boolean('compact', false),
-        },
+export const Typescale = Template.bind({});
+Typescale.args = generateProps();
+
+export default {
+  title: 'base/markdown',
+  component: GlMarkdown,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
       },
-      template: `
-      <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown>
-    `,
-    }),
-    {
-      viewport: { defaultViewport: 'breakpointExtraLarge' },
-    }
-  );
+    },
+    knobs: { disabled: true },
+  },
+};

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

@@ -59,7 +59,6 @@ describe('Modal component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     jest.clearAllMocks();
   });
 

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

@@ -5,10 +5,6 @@ import GlNavItem from './nav_item.vue';
 describe('GlNav', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('Nav style', () => {
     it('renders slot content', () => {
       wrapper = shallowMount(GlNav, {

package/src/components/base/nav/nav_item.spec.js

@@ -4,10 +4,6 @@ import GlNavItem from './nav_item.vue';
 describe('GlNavItem', () => {
   let wrapper;
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders the text', () => {
     wrapper = shallowMount(GlNavItem, {
       slots: {