@gitlab/ui 32.43.3 → 32.44.0

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

@@ -1,121 +1,75 @@
-import { select, text, number, withKnobs } from '@storybook/addon-knobs';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './avatar.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
-function generateImageProps() {
-  const defaultSize = avatarSizeOptions[1];
-  const props = {
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, defaultSize),
-    },
-    shape: {
-      type: String,
-      default: select('shape', avatarShapeOptions, 'circle'),
-    },
-  };
-
-  return props;
-}
-
-function generateProjectFallbackProps() {
-  const defaultSize = avatarSizeOptions[1];
-  const props = {
-    entityId: {
-      type: Number,
-      default: number('entityId', 123),
-    },
-    entityName: {
-      type: String,
-      default: text('entityName', 'Some Project'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, defaultSize),
-    },
-  };
+const generateImageProps = ({ size = 64, shape = 'circle' } = {}) => ({
+  size,
+  shape,
+});
 
-  return props;
-}
+const generateProjectFallbackProps = ({
+  size = 64,
+  entityId = 123,
+  entityName = 'Some Project',
+} = {}) => ({
+  entityId,
+  entityName,
+  size,
+});
 
-function generateEmojiProjectProps() {
-  const defaultSize = avatarSizeOptions[1];
-  const props = {
-    entityId: {
-      type: Number,
-      default: number('entityId', 123),
-    },
-    entityName: {
-      type: String,
-      default: text('entityName', '🦊Tanuki'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, defaultSize),
-    },
-  };
+const generateEmojiProjectProps = ({
+  size = 64,
+  entityId = 123,
+  entityName = '🦊Tanuki',
+} = {}) => ({
+  entityId,
+  entityName,
+  size,
+});
 
-  return props;
-}
-
-function generateTooltipProps() {
-  const props = {
-    tooltipText: {
-      type: String,
-      default: text('tooltipText', 'Avatar tooltip'),
-    },
-    placement: {
-      type: String,
-      default: select('placement', tooltipPlacements, 'top'),
-    },
-  };
+const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
+  tooltipText,
+  placement,
+});
 
-  return props;
-}
+const template = `
+<gl-avatar
+  :entity-name="entityName"
+  :entity-id="entityId"
+  :size="size"
+  shape="rect" />
+`;
 
-documentedStoriesOf('base/avatar', readme)
-  .addDecorator(withKnobs)
-  .add('image', () => ({
-    props: generateImageProps(),
-    template: `
+export const Image = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar
         :size="size"
         :shape="shape"
         src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
       />
     `,
-  }))
-  .add('project-fallback', () => ({
-    props: generateProjectFallbackProps(),
-    template: `
-      <gl-avatar
-        :entity-name="entityName"
-        :entity-id="entityId"
-        :size="size"
-        shape="rect" />
-    `,
-  }))
-  .add('emoji-project-name', () => ({
-    props: generateEmojiProjectProps(),
-    template: `
-      <gl-avatar
-        :entity-name="entityName"
-        :entity-id="entityId"
-        :size="size"
-        shape="rect" />
-    `,
-  }))
-  .add('with-tooltip', () => ({
-    props: {
-      ...generateImageProps(),
-      ...generateTooltipProps(),
-    },
-    template: `
+});
+Image.args = generateImageProps();
+
+export const ProjectFallback = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template,
+});
+ProjectFallback.args = generateProjectFallbackProps();
+
+export const EmojiProjectName = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template,
+});
+EmojiProjectName.args = generateEmojiProjectProps();
+
+export const WithTooltip = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar
         :size="size"
         :shape="shape"
@@ -124,4 +78,37 @@ documentedStoriesOf('base/avatar', readme)
         v-gl-tooltip="{ placement }"
       />
     `,
-  }));
+});
+WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
+
+export default {
+  title: 'base/avatar',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      options: avatarSizeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+    shape: {
+      options: avatarShapeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+    placement: {
+      options: tooltipPlacements,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

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

@@ -1,8 +1,6 @@
 import description from './avatar_link.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
 };

package/src/components/base/avatar_link/avatar_link.md

@@ -1,5 +1,3 @@
-## Avatar link
-
 `<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same
 properties as the `<gl-link>` component and it works in the same way too. The main purpose of this
 component is to apply visual enhancements that makes evident that the user can interact with the
@@ -10,20 +8,20 @@ avatar.
 When wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens
 the border that surrounds the avatar image or fallback text when hovering over it.
 
-~~~vue
+```vue
 <gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
   <gl-avatar
     :size="32"
     :src="avatarUrl"
   />
 </gl-avatar-link>
-~~~
+```
 
 When wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines
 the label and sub-label text when hovering over the avatar. It also applies the
 same effects described in the first example.
 
-~~~vue
+```vue
 <gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
   <gl-avatar-labeled
     :size="32"
@@ -32,5 +30,4 @@ same effects described in the first example.
     sub-label="@gitlab"
   />
 </gl-avatar-link>
-
-~~~
+```

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

@@ -1,71 +1,83 @@
-import { select, text, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import readme from './avatar_link.md';
 
-const generateDefaultProps = () => ({
-  href: {
-    type: String,
-    default: text('href', 'https://gitlab.com/gitlab-org/gitlab'),
-  },
-  shape: {
-    type: String,
-    default: select('shape', avatarShapeOptions, 'circle'),
-  },
-  size: {
-    type: Number,
-    default: select('size', avatarSizeOptions, 32),
-  },
+const generateDefaultProps = ({
+  href = 'https://gitlab.com/gitlab-org/gitlab',
+  shape = 'circle',
+  size = 32,
+} = {}) => ({
+  href,
+  shape,
+  size,
 });
 
-const generateLabelsProps = () => ({
-  label: {
-    type: String,
-    default: text('label', 'GitLab User'),
-  },
-  subLabel: {
-    type: String,
-    default: text('subLabel', '@gitlab'),
-  },
+const generateLabelsProps = ({ label = 'GitLab User', subLabel = '@gitlab' } = {}) => ({
+  label,
+  subLabel,
 });
 
-const generateImageProps = () => ({
-  src: {
-    type: String,
-    default: text(
-      'src',
-      'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64'
-    ),
-  },
+const generateImageProps = ({
+  src = 'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
+} = {}) => ({
+  src,
 });
 
-documentedStoriesOf('base/avatar/avatar-link', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: { ...generateDefaultProps(), ...generateImageProps() },
-    template: `
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
     <gl-avatar-link target="blank" :href="href">
       <gl-avatar :src="src" :size="size" :shape="shape" />
     </gl-avatar-link>
     `,
-  }))
-  .add('with labeled avatar', () => ({
-    props: {
-      ...generateDefaultProps(),
-      ...generateLabelsProps(),
-      ...generateImageProps(),
-    },
-    template: `
-    <gl-avatar-link target="blank" :href="href">
-      <gl-avatar-labeled :src="src" :size="size" :shape="shape" :label="label" :sub-label="subLabel" />
-    </gl-avatar-link>
-    `,
-  }))
-  .add('with no-image avatar', () => ({
-    props: { ...generateDefaultProps(), ...generateLabelsProps() },
-    template: `
+});
+Default.args = { ...generateDefaultProps(), ...generateImageProps() };
+
+export const WithLabeledAvatar = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+  <gl-avatar-link target="blank" :href="href">
+    <gl-avatar-labeled :src="src" :size="size" :shape="shape" :label="label" :sub-label="subLabel" />
+  </gl-avatar-link>
+  `,
+});
+WithLabeledAvatar.args = {
+  ...generateDefaultProps({}),
+  ...generateLabelsProps({}),
+  ...generateImageProps({}),
+};
+
+export const WithNoImageAvatar = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
     <gl-avatar-link target="blank" :href="href">
       <gl-avatar-labeled :entity-name="label" :label="label" :sub-label="subLabel" :size="size" :shape="shape" />
     </gl-avatar-link>
     `,
-  }));
+});
+WithNoImageAvatar.args = { ...generateDefaultProps({}), ...generateLabelsProps({}) };
+
+export default {
+  title: 'base/avatar/avatar-link',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    shape: {
+      options: avatarShapeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      options: avatarSizeOptions,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

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

@@ -1,4 +1,5 @@
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
+import { shallowMount, mount } from '@vue/test-utils';
 import GlFilteredSearch from './filtered_search.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
@@ -14,8 +15,7 @@ const FakeToken = {
   render: (h) => h('div'),
 };
 
-const localVue = createLocalVue();
-localVue.directive('GlTooltip', () => {});
+Vue.directive('GlTooltip', () => {});
 
 let wrapper;
 describe('Filtered search', () => {
@@ -23,12 +23,11 @@ describe('Filtered search', () => {
     availableTokens: [{ type: 'faketoken', token: FakeToken }],
   };
 
-  const findSearchBox = () => wrapper.find({ name: 'GlSearchBoxByClickStub' });
+  const findSearchBox = () => wrapper.findComponent({ name: 'GlSearchBoxByClickStub' });
 
   const createComponent = (props) => {
     wrapper = shallowMount(GlFilteredSearch, {
       propsData: { ...defaultProps, ...props },
-      localVue,
       stubs: {
         GlSearchBoxByClick: {
           name: 'GlSearchBoxByClickStub',
@@ -116,11 +115,11 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('activate');
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(FakeToken).props('active')).toBe(true);
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
 
     it('deactivates token when requested', async () => {
@@ -129,8 +128,8 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('activate');
-      wrapper.find(FakeToken).vm.$emit('deactivate');
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
+      wrapper.findComponent(FakeToken).vm.$emit('deactivate');
 
       await wrapper.vm.$nextTick();
 
@@ -148,12 +147,12 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('activate');
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
       wrapper.findAllComponents(FakeToken).at(1).vm.$emit('deactivate');
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(FakeToken).props('active')).toBe(true);
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
     });
 
     it('removes empty term tokens on deactivate', async () => {
@@ -187,7 +186,7 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('destroy');
+      wrapper.findComponent(FakeToken).vm.$emit('destroy');
 
       await wrapper.vm.$nextTick();
 
@@ -203,16 +202,16 @@ describe('Filtered search', () => {
       });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(FakeToken).vm.$emit('destroy');
+      wrapper.findComponent(FakeToken).vm.$emit('destroy');
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(GlFilteredSearchTerm).props('active')).toBe(true);
+      expect(wrapper.findComponent(GlFilteredSearchTerm).props('active')).toBe(true);
     });
 
     it('does not destroy last token', async () => {
       createComponent();
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('destroy');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('destroy');
 
       await wrapper.vm.$nextTick();
 
@@ -224,7 +223,7 @@ describe('Filtered search', () => {
     it('replaces token when requested', async () => {
       createComponent();
       wrapper
-        .find(GlFilteredSearchTerm)
+        .findComponent(GlFilteredSearchTerm)
         .vm.$emit('replace', { type: 'faketoken', value: { data: 'test' } });
 
       await wrapper.vm.$nextTick();
@@ -245,7 +244,7 @@ describe('Filtered search', () => {
       await wrapper.vm.$nextTick();
 
       wrapper
-        .find(GlFilteredSearchTerm)
+        .findComponent(GlFilteredSearchTerm)
         .vm.$emit('replace', { type: 'faketoken', value: { data: 'test' } });
 
       await wrapper.vm.$nextTick();
@@ -258,8 +257,8 @@ describe('Filtered search', () => {
 
     it('inserts single token when requested', async () => {
       createComponent({ value: ['one'] });
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('activate');
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('split');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split');
 
       await wrapper.vm.$nextTick();
 
@@ -273,8 +272,8 @@ describe('Filtered search', () => {
       createComponent({ value: ['one', 'two'] });
       await wrapper.vm.$nextTick();
 
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('activate');
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('split');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split');
 
       await wrapper.vm.$nextTick();
 
@@ -288,11 +287,11 @@ describe('Filtered search', () => {
 
     it('inserts multiple tokens when requested', async () => {
       createComponent({ value: ['one'] });
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('activate');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('activate');
 
       await wrapper.vm.$nextTick();
 
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('split', ['foo', 'bar']);
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('split', ['foo', 'bar']);
 
       await wrapper.vm.$nextTick();
 
@@ -306,7 +305,7 @@ describe('Filtered search', () => {
 
     it('submits entire search when submit is requested', () => {
       createComponent();
-      wrapper.find(GlFilteredSearchTerm).vm.$emit('submit');
+      wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
       expect(wrapper.emitted().submit).toBeDefined();
     });
   });
@@ -315,7 +314,7 @@ describe('Filtered search', () => {
     createComponent({
       value: ['one'],
     });
-    wrapper.find(GlFilteredSearchTerm).vm.$emit('submit');
+    wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
     expect(wrapper.emitted().submit).toBeDefined();
     expect(wrapper.emitted().submit[0][0]).toStrictEqual(['one']);
   });
@@ -324,7 +323,7 @@ describe('Filtered search', () => {
     createComponent({
       value: ['one', 'two', { type: 'faketoken', value: { data: 'smth' } }, 'four', 'five'],
     });
-    wrapper.find(GlFilteredSearchTerm).vm.$emit('submit');
+    wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
     expect(wrapper.emitted().submit).toBeDefined();
     expect(wrapper.emitted().submit[0][0]).toStrictEqual([
       'one two',
@@ -339,7 +338,7 @@ describe('Filtered search', () => {
     });
     await wrapper.vm.$nextTick();
 
-    const fakeTokenInstance = wrapper.find(FakeToken);
+    const fakeTokenInstance = wrapper.findComponent(FakeToken);
     expect(fakeTokenInstance.exists()).toBe(true);
     expect(Object.keys(fakeTokenInstance.attributes())).toEqual(
       expect.arrayContaining(['current-value', 'index', 'config', 'value'])
@@ -383,7 +382,6 @@ describe('Filtered search integration tests', () => {
 
   const mountComponent = (props) => {
     wrapper = mount(GlFilteredSearch, {
-      localVue,
       propsData: {
         availableTokens: testTokens,
         ...props,
@@ -432,7 +430,7 @@ describe('Filtered search integration tests', () => {
     });
 
     it('displays suggestions list', () => {
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
       expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(
         testTokens.filter((t) => !t.disabled).length
@@ -445,7 +443,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
       expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(1);
     });
@@ -456,7 +454,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(true);
       expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(3);
     });
@@ -467,7 +465,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+      const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
       expect(suggestions.exists()).toBe(false);
     });
 
@@ -481,7 +479,7 @@ describe('Filtered search integration tests', () => {
 
       await wrapper.vm.$nextTick();
 
-      const token = wrapper.find(GlFilteredSearchToken);
+      const token = wrapper.findComponent(GlFilteredSearchToken);
       expect(token.exists()).toBe(true);
     });
 
@@ -518,7 +516,7 @@ describe('Filtered search integration tests', () => {
 
     await wrapper.vm.$nextTick();
 
-    const suggestions = wrapper.find(GlFilteredSearchSuggestionList);
+    const suggestions = wrapper.findComponent(GlFilteredSearchSuggestionList);
     expect(suggestions.exists()).toBe(true);
     expect(suggestions.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
   });
@@ -549,7 +547,9 @@ describe('Filtered search integration tests', () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(document.activeElement).toBe(wrapper.find(GlFilteredSearchTerm).find('input').element);
+    expect(document.activeElement).toBe(
+      wrapper.findComponent(GlFilteredSearchTerm).find('input').element
+    );
   });
 
   it('clicking clear button clears component input', async () => {

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

@@ -64,7 +64,7 @@ describe('Filtered search term', () => {
     ({ originalEvent, emittedEvent }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
-      wrapper.find(segmentStub).vm.$emit(originalEvent);
+      wrapper.findComponent(segmentStub).vm.$emit(originalEvent);
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);