@gitlab/ui 32.38.0 → 32.42.0

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>
-    `,
-  }));
+  },
+};

package/src/components/base/token_selector/token_selector.vue

@@ -14,6 +14,9 @@ export default {
     event: 'input',
   },
   props: {
+    /**
+     * Items to display in dropdown
+     */
     dropdownItems: {
       type: Array,
       // All items need to have an `id` key
@@ -21,57 +24,89 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Should users be allowed to add tokens that are not in `dropdown-items`
+     */
     allowUserDefinedTokens: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Dropdown items are loading, can be used when requesting new dropdown items
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
+     */
     hideDropdownWithNoItems: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * CSS classes to add to the main token selector container (`.gl-token-selector`)
+     */
     containerClass: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * CSS classes to add to dropdown menu `ul` element
+     */
     menuClass: {
       type: [String, Array, Object],
       required: false,
       default: '',
     },
+    /**
+     * The autocomplete attribute value for the underlying `input` element
+     */
     autocomplete: {
       type: String,
       required: false,
       default: 'off',
     },
+    /**
+     * The `aria-labelledby` attribute value for the underlying `input` element
+     */
     ariaLabelledby: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * The `placeholder` attribute value for the underlying `input` element
+     */
     placeholder: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     */
     textInputAttrs: {
       type: Object,
       required: false,
       default: null,
     },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
     state: {
       type: Boolean,
       required: false,
       default: null,
     },
-    // Used for custom `v-model`
+    /**
+     * Tokens that are selected. This prop will automatically be added when using `v-model`
+     */
     selectedTokens: {
       type: Array,
       // All tokens need to have an `id` key
@@ -134,6 +169,11 @@ export default {
   watch: {
     inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
+        /**
+         * Fired when user types in the token selector
+         *
+         * @property {string} inputText
+         */
         this.$emit('text-input', newValue);
 
         this.resetFocusedDropdownItem();
@@ -159,6 +199,11 @@ export default {
   },
   methods: {
     handleFocus(event) {
+      /**
+       * Fired when the token selector is focused
+       *
+       * @property {FocusEvent} event
+       */
       this.$emit('focus', event);
 
       this.openDropdown();
@@ -170,6 +215,11 @@ export default {
       }
     },
     handleBlur(event) {
+      /**
+       * Fired when the token selector is blurred
+       *
+       * @property {FocusEvent} event
+       */
       this.$emit('blur', event);
 
       this.inputFocused = false;
@@ -234,18 +284,38 @@ export default {
               name: this.inputText,
             };
 
+      /**
+       * Fired when a token is added or removed
+       *
+       * @property {array} selectedTokens
+       */
       this.$emit('input', [...this.selectedTokens, token]);
 
       this.inputText = '';
       this.closeDropdown();
 
+      /**
+       * Fired when a token is added
+       *
+       * @property {object} token
+       */
       this.$emit('token-add', token);
     },
     removeToken(token) {
+      /**
+       * Fired when user types in the token selector
+       *
+       * @property {string} inputText
+       */
       this.$emit(
         'input',
         this.selectedTokens.filter((selectedToken) => selectedToken.id !== token.id)
       );
+      /**
+       * Fired when a token is removed
+       *
+       * @property {object} token
+       */
       this.$emit('token-remove', token);
     },
     cancelTokenFocus() {
@@ -296,6 +366,10 @@ export default {
         @cancel-focus="cancelTokenFocus"
       >
         <template #token-content="{ token }">
+          <!-- @slot Content to pass to the token component slot. Can be used
+            to add an avatar to the token. Default content is "{{ token.name }}".
+               @binding {object} token
+          -->
           <slot name="token-content" :token="token"></slot>
         </template>
         <template #text-input>
@@ -342,18 +416,32 @@ export default {
       @show="openDropdown"
     >
       <template #loading-content>
+        <!-- @slot Content to display when `loading` prop is `true`. Default
+          content is "Searching..." -->
         <slot name="loading-content"></slot>
       </template>
       <template #user-defined-token-content>
+        <!-- @slot Content to display when adding a user defined token. Default content is 'Add "{{ inputText }}"'.
+             @binding {string} inputText
+        -->
         <slot name="user-defined-token-content" :input-text="inputText"></slot>
       </template>
       <template #no-results-content>
+        <!-- @slot Content to display when `dropdown-items` is empty and
+          `allow-user-defined-tokens` is `false`. Default content is "No matches found". -->
         <slot name="no-results-content"></slot>
       </template>
       <template #dropdown-item-content="{ dropdownItem }">
+        <!-- @slot Dropdown item content. Default content is "{{ dropdownItem.name }}".
+             @binding {object} dropdownItem
+        -->
         <slot name="dropdown-item-content" :dropdown-item="dropdownItem"></slot>
       </template>
       <template #dropdown-footer>
+        <!-- @slot 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.
+        -->
         <slot name="dropdown-footer"></slot>
       </template>
     </gl-token-selector-dropdown>

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

@@ -75,11 +75,6 @@ describe('GlTokenSelectorDropdown', () => {
     }
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('props', () => {
     describe('show', () => {
       it('displays dropdown when `true`', () => {

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

@@ -1,9 +1,6 @@
-import examples from './examples';
 import description from './tooltip.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  bootstrapComponent: 'b-tooltip',
 };

package/src/components/base/tooltip/tooltip.md

@@ -1,8 +1,6 @@
-## Usage
-
 Using the tooltip component is recommended if you have HTML content.
 It is also currently required if the tooltip content needs to change while it's visible
-(see [this upstream issue]). In all other cases, please use the directive.
+(see [this upstream issue][this upstream issue]). In all other cases, please use the directive.
 
 [this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142
 
@@ -43,11 +41,11 @@ export default {
 
 ## Directive attributes
 
-`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`].
+`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`][`v-b-tooltip`].
 
 ## Under the hood
 
-Tooltip uses [`<b-tooltip>`] and [`v-b-tooltip`] internally.
+Tooltip uses [`<b-tooltip>`][`<b-tooltip>`] and [`v-b-tooltip`][`v-b-tooltip`] internally.
 
 [`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip
 

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

@@ -19,11 +19,6 @@ describe('GlTooltip', () => {
     createWrapper();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   it.each(tooltipActionEvents)('passes through the %s event to the bvTooltip instance', (event) => {
     wrapper.vm.$emit(event);
 

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

@@ -1,34 +1,58 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlTooltipDirective } from '../../../../index';
+import { GlTooltip, GlTooltipDirective } from '../../../../index';
 import readme from './tooltip.md';
 
-const directives = {
-  GlTooltip: GlTooltipDirective,
-};
-
 function makeTooltip(modifier = '') {
-  return () => ({
-    directives,
+  return {
+    directives: {
+      GlTooltip: GlTooltipDirective,
+    },
     template: `
-      <div class="d-flex align-items-center justify-content-center p-5 m-5">
-        <gl-button
-          v-gl-tooltip${modifier}
-          title="some tooltip text"
-        >
-            Tooltip
-        </gl-button>
-      </div>
-    `,
+    <div class="gl-display-flex gl-align-items-center gl-justify-content-center gl-p-7 gl-m-7">
+      <gl-button
+        v-gl-tooltip${modifier}
+        title="some tooltip text"
+      >
+          Tooltip
+      </gl-button>
+    </div>
+  `,
     mounted() {
       this.$nextTick(() => this.$el.querySelector('button').focus());
     },
-  });
+  };
 }
 
-documentedStoriesOf('base/tooltip', readme)
-  .addDecorator(withKnobs)
-  .add('top (default)', makeTooltip())
-  .add('right', makeTooltip('.right'))
-  .add('bottom', makeTooltip('.bottom'))
-  .add('left', makeTooltip('.left'));
+export const TopDefault = (args, argTypes) => ({
+  ...makeTooltip(),
+  props: Object.keys(argTypes),
+});
+
+export const Right = (args, argTypes) => ({
+  ...makeTooltip('.right'),
+  props: Object.keys(argTypes),
+});
+
+export const Bottom = (args, argTypes) => ({
+  ...makeTooltip('.bottom'),
+  props: Object.keys(argTypes),
+});
+
+export const Left = (args, argTypes) => ({
+  ...makeTooltip('.left'),
+  props: Object.keys(argTypes),
+});
+
+// A default export contains higher-level info about the component and the stories' settings.
+export default {
+  title: 'base/tooltip',
+  component: GlTooltip,
+  parameters: {
+    bootstrapComponent: 'b-tooltip',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/tooltip/tooltip.vue

@@ -23,6 +23,7 @@ export default {
     :delay="$options.tooltipDelay"
     v-on="$listeners"
   >
+    <!-- @slot Tooltip content -->
     <slot></slot>
   </b-tooltip>
 </template>

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

@@ -5,6 +5,7 @@ import ChartLegend from '../legend/legend.vue';
 import AreaChart from './area.vue';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 
 let mockChartInstance;
 
@@ -14,7 +15,6 @@ jest.mock('echarts', () => ({
 
 describe('area component', () => {
   let wrapper;
-  let option;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
@@ -24,33 +24,17 @@ describe('area component', () => {
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
   const createShallowWrapper = (props = {}) => {
-    wrapper = shallowMount(AreaChart, { propsData: { option, data: [], ...props } });
+    wrapper = shallowMount(AreaChart, {
+      propsData: { option: { series: [] }, data: [], ...props },
+      stubs: {
+        'chart-tooltip': ChartTooltipStub,
+      },
+    });
     emitChartCreated();
   };
 
   beforeEach(() => {
-    option = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return option;
-      },
-    };
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
+    mockChartInstance = createMockChartInstance();
   });
 
   it('emits `created`, with the chart instance', async () => {