@gitlab/ui 32.41.0 → 32.43.2

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/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', () => {

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

@@ -1,130 +1,113 @@
-import { withKnobs, object, boolean, radios } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './token_selector.md';
 import GlTokenSelector from './token_selector.vue';
 
-const components = {
-  GlTokenSelector,
-};
-
-const generateProps = () => {
-  const stateRadiosBoolean = (value) => {
-    switch (value) {
-      case 'null':
-        return null;
-      case 'true':
-        return true;
-      case 'false':
-        return false;
-      default:
-        return null;
-    }
-  };
+const template = `
+  <div>
+    <gl-token-selector
+      v-model="selectedTokens"
+      v-bind="$props"
+      @text-input="handleTextInput"
+      @focus="handleFocus" />
+    {{ selectedTokens }}
+  </div>
+`;
 
-  return {
-    dropdownItems: {
-      default: object('Dropdown items', [
-        {
-          id: 1,
-          name: 'Vue.js',
-        },
-        {
-          id: 2,
-          name: 'Ruby On Rails',
-          class: 'gl-text-white! gl-bg-data-viz-magenta-950!',
-        },
-        {
-          id: 3,
-          name: 'GraphQL',
-        },
-        {
-          id: 4,
-          name: 'Redis',
-          class: 'gl-text-white! gl-bg-data-viz-green-700!',
-        },
-        {
-          id: 5,
-          name: 'CSS',
-          class: 'gl-text-red-500!',
-          style: { backgroundColor: '#97acff' },
-        },
-      ]),
+const generateProps = () => ({
+  dropdownItems: [
+    {
+      id: 1,
+      name: 'Vue.js',
     },
-    allowUserDefinedTokens: {
-      default: boolean('Allow user defined tokens', false),
+    {
+      id: 2,
+      name: 'Ruby On Rails',
+      class: 'gl-text-white! gl-bg-data-viz-magenta-950!',
     },
-    loading: {
-      default: boolean('Loading', false),
+    {
+      id: 3,
+      name: 'GraphQL',
     },
-    hideDropdownWithNoItems: {
-      default: boolean('Hide dropdown with no items', false),
+    {
+      id: 4,
+      name: 'Redis',
+      class: 'gl-text-white! gl-bg-data-viz-green-700!',
     },
-    state: {
-      default: stateRadiosBoolean(
-        radios('Validation state', { true: 'true', false: 'false', null: 'null' }, 'null')
-      ),
+    {
+      id: 5,
+      name: 'CSS',
+      class: 'gl-text-red-500!',
+      style: { backgroundColor: '#97acff' },
     },
-  };
-};
+  ],
+});
 
-documentedStoriesOf('base/token_selector', readme)
-  .addDecorator(withKnobs)
-  .addParameters({ storyshots: false })
-  .add('default', () => ({
-    props: generateProps(),
-    data() {
-      return {
-        filteredDropdownItems: [],
-        inputText: '',
-        selectedTokens: [
-          {
-            id: 1,
-            name: 'Vue.js',
-          },
-        ],
-      };
-    },
-    components,
-    mounted() {
-      document.querySelector('.gl-token-selector input[type="text"]').focus();
-    },
-    methods: {
-      handleTextInput(value) {
-        this.inputText = value;
+const Template = (args, { argTypes }) => ({
+  components: { GlTokenSelector },
+  props: Object.keys(argTypes),
+  template,
+  mounted() {
+    document.querySelector('.gl-token-selector input[type="text"]').focus();
+  },
+  data() {
+    return {
+      filteredDropdownItems: [],
+      inputText: '',
+      selectedTokens: [
+        {
+          id: 1,
+          name: 'Vue.js',
+        },
+      ],
+    };
+  },
+  methods: {
+    handleTextInput(value) {
+      this.inputText = value;
 
-        if (this.inputText === '') {
-          this.filteredDropdownItems = this.dropdownItems;
+      if (this.inputText === '') {
+        this.filteredDropdownItems = this.dropdownItems;
 
-          return;
-        }
+        return;
+      }
 
+      this.filterDropdownItems();
+    },
+    handleFocus() {
+      if (this.inputText !== '') {
         this.filterDropdownItems();
+      } else {
+        this.filteredDropdownItems = this.dropdownItems;
+      }
+    },
+    filterDropdownItems() {
+      this.filteredDropdownItems = this.dropdownItems.filter((dropdownItem) => {
+        return dropdownItem.name.toLowerCase().includes(this.inputText.toLowerCase());
+      });
+    },
+  },
+});
+
+export const Default = Template.bind({});
+Default.parameters = { storyshots: { disable: true } };
+Default.args = generateProps();
+
+export default {
+  title: 'base/token_selector',
+  component: GlTokenSelector,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-      handleFocus() {
-        if (this.inputText !== '') {
-          this.filterDropdownItems();
-        } else {
-          this.filteredDropdownItems = this.dropdownItems;
-        }
-      },
-      filterDropdownItems() {
-        this.filteredDropdownItems = this.dropdownItems.filter((dropdownItem) => {
-          return dropdownItem.name.toLowerCase().includes(this.inputText.toLowerCase());
-        });
+    },
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: 'radio',
+        options: [true, false, null],
       },
     },
-    template: `
-      <div>
-        <gl-token-selector
-          v-model="selectedTokens"
-          :dropdown-items="filteredDropdownItems"
-          :allow-user-defined-tokens="allowUserDefinedTokens"
-          :loading="loading"
-          :hide-dropdown-with-no-items="hideDropdownWithNoItems"
-          :state="state"
-          @text-input="handleTextInput"
-          @focus="handleFocus" />
-        {{ selectedTokens }}
-      </div>
-    `,
-  }));
+  },
+};