@gitlab/ui 38.0.1 → 38.1.0

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

@@ -1,32 +1,28 @@
-import { withKnobs } from '@storybook/addon-knobs';
 import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../index';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_suggestion_list.md';
 
-documentedStoriesOf('base/filtered-search/suggestion-list', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
-    data() {
-      return {
-        iteration: 1,
-        items: Array.from({ length: 5 }).map((_, idx) => `item-${idx}-iteration-1`),
-      };
+export const Default = () => ({
+  components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
+  data() {
+    return {
+      iteration: 1,
+      items: Array.from({ length: 5 }).map((_, idx) => `item-${idx}-iteration-1`),
+    };
+  },
+  provide,
+  methods: {
+    change() {
+      this.iteration += 1;
+      this.items = Array.from({ length: 3 + Math.floor(Math.random() * 5) }).map(
+        (_, idx) => `item-${idx}-iteration-${this.iteration}`
+      );
     },
-    provide,
-    methods: {
-      change() {
-        this.iteration += 1;
-        this.items = Array.from({ length: 3 + Math.floor(Math.random() * 5) }).map(
-          (_, idx) => `item-${idx}-iteration-${this.iteration}`
-        );
-      },
-    },
-    mounted() {
-      this.$refs.suggestions.nextItem();
-    },
-    template: `
+  },
+  mounted() {
+    this.$refs.suggestions.nextItem();
+  },
+  template: `
       <div>
         <button @click="$refs.suggestions.prevItem()">prev</button>
         <button @click="$refs.suggestions.nextItem()">next</button>
@@ -38,4 +34,16 @@ documentedStoriesOf('base/filtered-search/suggestion-list', readme)
         </gl-filtered-search-suggestion-list>
       </div>
     `,
-  }));
+});
+
+export default {
+  title: 'base/filtered-search/suggestion-list',
+  component: GlFilteredSearchSuggestionList,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+  name: 'GlFilteredSearchSuggestionList',
   inject: ['suggestionsListClass'],
   provide() {
     return {
@@ -7,6 +8,9 @@ export default {
     };
   },
   props: {
+    /**
+     * Value to be initially selected in list.
+     */
     initialValue: {
       required: false,
       validator: () => true,
@@ -84,6 +88,7 @@ export default {
 </script>
 <template>
   <ul :class="listClasses">
+    <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
     <slot></slot>
   </ul>
 </template>

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

@@ -2,45 +2,4 @@ import * as description from './filtered_search_term.md';
 
 export default {
   description,
-  bootstrapComponent: null,
-  propsInfo: {
-    availableTokens: {
-      additionalInfo: 'Tokens available for this filtered search instance',
-    },
-    active: {
-      additionalInfo: 'If this term token is currently active',
-    },
-    value: {
-      additionalInfo: 'Current term value',
-    },
-    searchInputAttributes: {
-      additionalInfo: 'HTML attributes to add to the search input',
-    },
-    isLastToken: {
-      additionalInfo: 'If this is the last token',
-    },
-  },
-  events: [
-    { event: 'activate', description: 'Emitted when this term token is clicked' },
-    { event: 'deactivate', description: 'Emitted when this term token loses its focus' },
-    {
-      event: 'destroy',
-      description: 'Emitted when token value is empty and backspace is pressed',
-    },
-    {
-      event: 'replace',
-      args: [{ arg: 'token', description: '(Object) Replacement token configuration' }],
-      description: 'Emitted when autocomplete entry is selected',
-    },
-    {
-      event: 'split',
-      args: [
-        {
-          arg: 'newTokens',
-          description: '(Array) Token configurations',
-        },
-      ],
-      description: 'Emitted when Space is pressed in-between term text',
-    },
-  ],
 };

package/src/components/base/filtered_search/filtered_search_term.md

@@ -1,5 +1,3 @@
-# Filtered Search Term
-
 The filtered search term is a component for managing "free input" in the filtered search component.
 It is responsible for autocompleting available tokens and "converting" to a relevant
 component when an autocomplete item is selected.

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

@@ -1,7 +1,5 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -13,29 +11,25 @@ const availableTokens = [
   { title: 'Demo2', type: 'demo2', icon: 'rocket', token: {} },
 ];
 
-documentedStoriesOf('base/filtered-search/term', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components: {
-      GlFilteredSearchTerm,
-    },
-    provide,
-    props: {
-      active: {
-        type: Boolean,
-        default: boolean('active', true),
-      },
-    },
-    data() {
-      return {
-        value: { data: 'demo' },
-        availableTokens,
-      };
-    },
-    mounted() {
-      this.$nextTick(() => document.activeElement.blur());
-    },
-    template: `
+const generateProps = ({ active = true } = {}) => ({ active });
+
+// eslint-disable-next-line no-unused-vars
+export const Default = (_args, { argTypes }) => ({
+  props: ['active'],
+  components: {
+    GlFilteredSearchTerm,
+  },
+  provide,
+  data() {
+    return {
+      value: { data: 'demo' },
+      availableTokens,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => document.activeElement.blur());
+  },
+  template: `
       <div>
         <div> {{ value.data }} </div>
         <div class="gl-border-1 gl-border-solid gl-border-gray-200">
@@ -51,4 +45,17 @@ documentedStoriesOf('base/filtered-search/term', readme)
         </div>
       </div>
     `,
-  }));
+});
+Default.args = generateProps();
+
+export default {
+  title: 'base/filtered-search/term',
+  component: GlFilteredSearchTerm,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -4,21 +4,31 @@ import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
 
 export default {
+  name: 'GlFilteredSearchTerm',
   components: {
     GlFilteredSearchTokenSegment,
     GlFilteredSearchSuggestion,
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Tokens available for this filtered search instance.
+     */
     availableTokens: {
       type: Array,
       required: true,
     },
+    /**
+     * Determines if the term is being edited or not.
+     */
     active: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Current term value.
+     */
     value: {
       type: Object,
       required: false,
@@ -29,16 +39,25 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * HTML attributes to add to the search input.
+     */
     searchInputAttributes: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * If this is the last token.
+     */
     isLastToken: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * The current `value` (tokens) of the ancestor GlFilteredSearch component.
+     */
     currentValue: {
       type: Array,
       required: false,
@@ -56,12 +75,25 @@ export default {
         return this.value.data;
       },
       set(data) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
         this.$emit('input', { data });
       },
     },
   },
   methods: {
     onBackspace() {
+      /**
+       * Emitted when token value is empty and backspace is pressed.
+       * Includes user intent to activate previous token.
+       *
+       * @event destroy
+       * @type {object} details The user intent
+       */
       this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
     },
   },
@@ -70,6 +102,28 @@ export default {
 
 <template>
   <div class="gl-h-auto gl-filtered-search-term">
+    <!--
+      Emitted when this term token is clicked.
+      @event activate
+    -->
+    <!--
+      Emitted when this term token will lose its focus.
+      @event deactivate
+    -->
+    <!--
+      Emitted when autocomplete entry is selected.
+      @event replace
+      @property {object} token Replacement token configuration.
+    -->
+    <!--
+      Emitted when the token is submitted.
+      @event submit
+    -->
+    <!--
+      Emitted when Space is pressed in-between term text.
+      @event split
+      @property {array} newTokens Token configurations
+    -->
     <gl-filtered-search-token-segment
       v-model="internalValue"
       class="gl-filtered-search-term-token"

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

@@ -2,30 +2,4 @@ import * as description from './filtered_search_token.md';
 
 export default {
   description,
-  bootstrapComponent: null,
-  propsInfo: {
-    title: {
-      additionalInfo: 'Token title',
-    },
-    config: {
-      additionalInfo: 'Token configuration with available operators and options',
-    },
-    active: {
-      additionalInfo: 'If this token is currently active',
-    },
-    value: {
-      additionalInfo: 'Current value',
-    },
-    replace: {
-      args: [{ arg: 'token', description: '(Object) Replacement token configuration' }],
-      description: 'Emitted when this token is converted to another type',
-    },
-  },
-  slots: [
-    { name: 'view', description: 'Template for token value in inactive state' },
-    {
-      name: 'suggestions',
-      description: 'Slot for rendering autocomplete suggestions when no options are provided.',
-    },
-  ],
 };

package/src/components/base/filtered_search/filtered_search_token.md

@@ -1,5 +1,3 @@
-# Filtered Search Binary Token
-
 Filtered search token is a helper component, intended to
 simplify the creation of filters tokens which consist of a title, operators
 and an editable value with autocomplete. This component abstracts token management
@@ -11,7 +9,7 @@ This component is not intended to be used outside of the `GlFilteredSearch` comp
 
 Make sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:
 
-```js
+```html
 <gl-filtered-search-token
   title="Confidential"
   :active="active"

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

@@ -1,7 +1,5 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlIcon } from '../../../index';
 import { provide } from './common_story_options';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
@@ -10,152 +8,158 @@ import GlFilteredSearchToken from './filtered_search_token.vue';
 
 Vue.use(PortalVue);
 
-documentedStoriesOf('base/filtered-search/token', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components: {
-      GlFilteredSearchToken,
-      GlFilteredSearchSuggestion,
-      GlIcon,
-    },
-    provide,
-    props: {
-      active: {
-        type: Boolean,
-        default: boolean('active', true),
+const generateProps = ({ active = true } = {}) => ({
+  active,
+});
+
+// eslint-disable-next-line no-unused-vars
+export const Default = (args, { argTypes }) => ({
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+    GlIcon,
+  },
+  provide,
+  props: ['active'],
+  data() {
+    return {
+      value: { operator: '=', data: 'Yes' },
+      config: {
+        title: 'Confidential',
       },
-    },
-    data() {
-      return {
-        value: { operator: '=', data: 'Yes' },
-        config: {
-          title: 'Confidential',
-        },
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        document.activeElement.blur();
-      });
-    },
-    template: `
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      document.activeElement.blur();
+    });
+  },
+  template: `
+    <div>
+      <div> {{ value }} </div>
+      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
+        <gl-filtered-search-token
+          v-model="value"
+          class="gl-h-full"
+          :config="config"
+          :active="active"
+        >
+          <template #suggestions>
+            <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
+            <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
+          </template>
+        </gl-filtered-search-token>
+      </div>
       <div>
-        <div> {{ value }} </div>
-        <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-          <gl-filtered-search-token
-            v-model="value"
-            class="gl-h-full"
-            :config="config"
-            :active="active"
-          >
-            <template #suggestions>
-              <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
-              <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
-            </template>
-          </gl-filtered-search-token>
-        </div>
-        <div>
-          <portal-target name="portal" class="gl-relative" />
-        </div>
+        <portal-target name="portal" class="gl-relative" />
       </div>
-    `,
-  }))
-  .add('with custom operators options', () => ({
-    components: {
-      GlFilteredSearchToken,
-      GlFilteredSearchSuggestion,
-    },
-    provide,
-    props: {
-      active: {
-        type: Boolean,
-        default: boolean('active', true),
-      },
-    },
-    data() {
-      return {
-        value: { operator: '=', data: 'Yes' },
-        config: {
-          title: 'Confidential',
-        },
+    </div>
+  `,
+});
+Default.args = generateProps();
+
+// eslint-disable-next-line no-unused-vars
+export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+  },
+  provide,
+  props: ['active'],
+  data() {
+    return {
+      value: { operator: '!', data: 'Yes' },
+      config: {
+        title: 'Confidential',
         operators: [
           { value: '^', description: 'or' },
           { value: '!', description: 'is not', default: 'true' },
         ],
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        document.activeElement.blur();
-      });
-    },
-    template: `
-      <div>
-        <div> {{ value }} </div>
-        <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-          <gl-filtered-search-token
-            v-model="value"
-            class="gl-h-full"
-            :config="config"
-            :active="active"
-            :operators="operators"
-          >
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      document.activeElement.blur();
+    });
+  },
+  template: `
+    <div>
+      <div> {{ value }} </div>
+      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
+        <gl-filtered-search-token
+          v-model="value"
+          class="gl-h-full"
+          :config="config"
+          :active="active"
+        >
           <template #suggestions>
             <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
             <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
           </template>
-        </div>
-        <div>
-          <portal-target name="portal" class="gl-relative" />
-        </div>
+        </gl-filtered-search-token>
       </div>
-    `,
-  }))
-  .add('with static options', () => ({
-    components: {
-      GlFilteredSearchToken,
-      GlFilteredSearchSuggestion,
-    },
-    provide,
-    props: {
-      active: {
-        type: Boolean,
-        default: boolean('active', true),
-      },
-    },
-    data() {
-      return {
-        value: { operator: '=', data: 'first' },
-        config: {
-          title: 'Confidential',
-        },
+      <div>
+        <portal-target name="portal" class="gl-relative" />
+      </div>
+    </div>
+  `,
+});
+WithCustomOperatorsOptions.args = generateProps();
+
+// eslint-disable-next-line no-unused-vars
+export const WithStaticOptions = (args, { argTypes }) => ({
+  components: {
+    GlFilteredSearchToken,
+    GlFilteredSearchSuggestion,
+  },
+  provide,
+  props: ['active'],
+  data() {
+    return {
+      value: { operator: '=', data: 'first' },
+      config: {
+        title: 'Confidential',
         options: [
           { icon: 'hourglass', title: 'first', value: 'one' },
           { title: 'second-without-icon', value: 'two' },
           { icon: 'issues', title: 'third', value: 'three' },
         ],
-      };
-    },
-    mounted() {
-      this.$nextTick(() => {
-        document.activeElement.blur();
-      });
-    },
-    template: `
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      document.activeElement.blur();
+    });
+  },
+  template: `
+    <div>
+      <div> {{ value }} </div>
+      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
+        <gl-filtered-search-token
+          v-model="value"
+          class="gl-h-full"
+          :config="config"
+          :active="active"
+        />
+      </div>
       <div>
-        <div> {{ value }} </div>
-        <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-          <gl-filtered-search-token
-            v-model="value"
-            class="gl-h-full"
-            :config="config"
-            :active="active"
-            :options="options"
-          />
-        </div>
-        <div>
-          <portal-target name="portal" class="gl-relative" />
-        </div>
+        <portal-target name="portal" class="gl-relative" />
       </div>
-    `,
-  }));
+    </div>
+  `,
+});
+WithStaticOptions.args = generateProps();
+
+export default {
+  title: 'base/filtered-search/token',
+  component: GlFilteredSearchToken,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};