@gitlab/ui 32.38.0 → 32.42.0

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: {

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

@@ -18,10 +18,6 @@ describe('GlNavItemDropdown', () => {
 
   const findBNavItemDropdown = () => wrapper.findComponent(BNavItemDropdown);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     it('renders BNavItemDropdown', () => {
       const expectedText = 'Hello!';

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

@@ -15,12 +15,6 @@ describe('Paginated List', () => {
     `;
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-
-    wrapper = null;
-  });
-
   const createComponent = (props = {}) => {
     wrapper = shallowMount(PaginatedList, {
       scopedSlots: {

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

@@ -35,7 +35,6 @@ describe('pagination component', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     debounce.mockClear();
   });
 

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

@@ -44,11 +44,6 @@ describe('Path', () => {
     wrapper = createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it('matches the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
   });

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

@@ -16,11 +16,6 @@ describe('GlPopover', () => {
 
   const findBVPopover = () => wrapper.findComponent({ ref: 'bPopover' });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each(tooltipActionEvents)('passes through the %s event to the bvPopover instance', (event) => {
     createWrapper();
     wrapper.vm.$emit(event);

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

@@ -30,10 +30,6 @@ describe('search box by click component', () => {
 
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits input event when input changes', async () => {
     createComponent({ value: 'somevalue' });
 

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -94,6 +94,7 @@ export default {
   computed: {
     inputAttributes() {
       const attributes = {
+        type: 'search',
         placeholder: this.placeholder,
         ...this.$attrs,
       };
@@ -210,6 +211,7 @@ export default {
       :title="clearButtonTitle"
       :tooltip-container="tooltipContainer"
       class="gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button"
+      data-testid="filtered-search-clear-button"
       @click="clearInput"
     />
     <template #append class="gl-search-box-by-click-input-group-control">

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

@@ -16,11 +16,6 @@ describe('search box by type component', () => {
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
   const findInput = () => wrapper.findComponent({ ref: 'input' });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('clear icon component', () => {
     beforeEach(() => {
       createComponent({ value: 'somevalue' });

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -49,7 +49,7 @@ export default {
   computed: {
     inputAttributes() {
       const attributes = {
-        type: 'text',
+        type: 'search',
         placeholder: 'Search',
         ...this.$attrs,
       };

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

@@ -41,10 +41,6 @@ describe('segmented control', () => {
     consoleWarnSpy.mockClear();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const warning = 'Segmented button should always have valid option selected';
   describe('with options and valid value', () => {
     beforeEach(() => {

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

@@ -11,11 +11,6 @@ describe('GlSkeletonLoader', () => {
     wrapper = shallowMount(GlSkeletonLoader, options);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('when default skeleton is used', () => {
     it('adds `gl-w-full` and `gl-h-full` CSS classes', () => {
       createComponent();

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

@@ -47,10 +47,6 @@ describe('sorting component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should display default text in dropdown', () => {
     createComponent();
 

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

@@ -27,10 +27,6 @@ describe('sorting item component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('should render and display the supplied text', () => {
     createComponent();
 

package/src/components/base/tabs/tabs/scrollable_tabs.spec.js

@@ -32,11 +32,6 @@ describe('GlScrollableTabs', () => {
     inputSpy = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   const findScrollRightButton = () => wrapper.find('[aria-label="Scroll right"]');
   const findScrollLeftButton = () => wrapper.find('[aria-label="Scroll left"]');
   const findNav = () => wrapper.find(`.${NAV_CLASS}`);

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

@@ -22,10 +22,6 @@ describe('toggle', () => {
   const findButton = () => wrapper.find('button');
   const findHelpElement = () => wrapper.find('[data-testid="toggle-help"]');
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('has role=switch', () => {
     createWrapper();
 

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

@@ -17,10 +17,6 @@ describe('Token component', () => {
       propsData,
     });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('emits close when "x" is clicked', () => {
     wrapper = createComponent();
     findIcon(wrapper).vm.$emit('click');

package/src/components/base/token_selector/token_container.spec.js

@@ -50,8 +50,6 @@ describe('GlTokenContainer', () => {
   const blurActiveElement = () => document.activeElement?.blur?.();
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
     blurActiveElement();
   });
 

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

@@ -1,142 +1,5 @@
-import examples from './examples';
 import * as description from './token_selector.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    dropdownItems: {
-      additionalInfo: 'Items to display in dropdown',
-    },
-    selectedTokens: {
-      additionalInfo:
-        'Tokens that are selected. This prop will automatically be added when using `v-model`',
-    },
-    allowUserDefinedTokens: {
-      additionalInfo: 'Should users be allowed to add tokens that are not in `dropdown-items`',
-    },
-    loading: {
-      additionalInfo: 'Dropdown items are loading, can be used when requesting new dropdown items',
-    },
-    hideDropdownWithNoItems: {
-      additionalInfo:
-        'Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`',
-    },
-    containerClass: {
-      additionalInfo:
-        'CSS classes to add to the main token selector container (`.gl-token-selector`)',
-    },
-    menuClass: {
-      additionalInfo: 'CSS classes to add to dropdown menu `ul` element',
-    },
-    textInputAttrs: {
-      additionalInfo:
-        'HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes',
-    },
-    state: {
-      additionalInfo:
-        'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
-    },
-  },
-  slots: [
-    {
-      name: 'no-results-content',
-      description:
-        'Content to display when `dropdown-items` is empty and `allow-user-defined-tokens` is `false`',
-      default: 'No matches found',
-      scopedProps: '',
-    },
-    {
-      name: 'user-defined-token-content',
-      description: 'Content to display when adding a user defined token',
-      default: 'Add "{{ inputText }}"',
-      scopedProps: 'inputText (String)',
-    },
-    {
-      name: 'token-content',
-      description:
-        'Content to pass to the token component slot. Can be used to add an avatar to the token',
-      default: '{{ token.name }}',
-      scopedProps: 'token (Object)',
-    },
-    {
-      name: 'dropdown-item-content',
-      description: 'Dropdown item content',
-      default: '{{ dropdownItem.name }}',
-      scopedProps: 'dropdownItem (Object)',
-    },
-    {
-      name: 'dropdown-footer',
-      description:
-        'Content to add to the bottom of the dropdown. Can be used in conjunction with `gl-intersection-observer` to load more items as the user scrolls',
-    },
-    {
-      name: 'loading-content',
-      description: 'Content to display when `loading` prop is `true`',
-      default: 'Searching...',
-      scopedProps: '',
-    },
-  ],
-  events: [
-    {
-      event: 'text-input',
-      args: [
-        {
-          arg: 'inputText',
-          description: '(String)',
-        },
-      ],
-      description: 'Fired when user types in the token selector',
-    },
-    {
-      event: 'input',
-      args: [
-        {
-          arg: 'selectedTokens',
-          description: '(Array)',
-        },
-      ],
-      description: 'Fired when a token is added or removed',
-    },
-    {
-      event: 'focus',
-      args: [
-        {
-          arg: 'event',
-          description: '(FocusEvent)',
-        },
-      ],
-      description: 'Fired when the token selector is focused',
-    },
-    {
-      event: 'blur',
-      args: [
-        {
-          arg: 'event',
-          description: '(FocusEvent)',
-        },
-      ],
-      description: 'Fired when the token selector is blurred',
-    },
-    {
-      event: 'token-add',
-      args: [
-        {
-          arg: 'token',
-          description: '(Object)',
-        },
-      ],
-      description: 'Fired when a token is added',
-    },
-    {
-      event: 'token-remove',
-      args: [
-        {
-          arg: 'token',
-          description: '(Object)',
-        },
-      ],
-      description: 'Fired when a token is removed',
-    },
-  ],
 };

package/src/components/base/token_selector/token_selector.md

@@ -1,9 +1,3 @@
-# GlTokenSelector
-
-<!-- STORY -->
-
-## Usage
-
 Choose from a provided list of tokens or add a user defined token.
 
 ```html

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

@@ -96,11 +96,6 @@ describe('GlTokenSelector', () => {
     }
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('props', () => {
     describe('dropdownItems', () => {
       it('renders dropdown items', () => {