@gitlab/ui 37.3.0 → 37.4.2

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

@@ -1,96 +1,6 @@
-import examples from './examples';
 import description from './search_box_by_click.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input',
-    },
-    historyItems: {
-      type: Array,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      additionalInfo: 'If provided and true, disables the input and controls',
-    },
-    recentSearchesHeader: {
-      type: String,
-      required: false,
-      default: 'Recent searches',
-      additionalInfo: 'i18n for recent searches title within history dropdown',
-    },
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Clear',
-      additionalInfo: 'i18n for clear button title',
-    },
-    closeButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Close',
-      additionalInfo: 'i18n for close button title within history dropdown',
-    },
-    clearRecentSearchesText: {
-      type: String,
-      required: false,
-      default: 'Clear recent searches',
-      additionalInfo: 'i18n for recent searches clear text',
-    },
-    tooltipContainer: {
-      additionalInfo:
-        'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
-    },
-    searchButtonAttributes: {
-      additionalInfo: 'HTML attributes to add to the search button',
-    },
-  },
-  events: [
-    {
-      event: 'clear',
-      description: 'Emitted when search is cleared',
-    },
-    {
-      event: 'submit',
-      args: [
-        {
-          arg: 'value',
-          description: 'Search value',
-        },
-      ],
-      description: 'Emitted when search is submitted',
-    },
-    {
-      event: 'history-item-selected',
-      args: [
-        {
-          arg: 'value',
-          description: 'History item',
-        },
-      ],
-      description: 'Emitted when item from history is selected',
-    },
-    {
-      event: 'clear-history',
-      description: 'Emitted when clear history button is clicked',
-    },
-  ],
-  slots: [
-    {
-      name: 'history-item',
-      description:
-        'Slot to customize history item in history dropdown. Used only with history-items prop',
-    },
-  ],
 };

package/src/components/base/search_box_by_click/search_box_by_click.md

@@ -1,3 +1 @@
-# Search Box By Click
-
 Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

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

@@ -1,57 +1,100 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSearchBoxByClick } from '../../../index';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './search_box_by_click.md';
 
-const components = {
-  GlSearchBoxByClick,
-};
+const template = `
+  <gl-search-box-by-click
+    :value="value"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :history-items="currentHistoryItems"
+    :clearable="clearable"
+    :recent-searches-header="recentSearchesHeader"
+    :clear-button-title="clearButtonTitle"
+    :close-button-title="closeButtonTitle"
+    :clear-recent-searches-text="clearRecentSearchesText"
+    :no-recent-searches-text="noRecentSearchesText"
+    :search-button-attributes="searchButtonAttributes"
+    @clear-history="clearCurrentHistory"
+  />
+`;
 
-function generateProps({ disabled = false, value = '', placeholder = 'Search' } = {}) {
-  return {
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
+const defaultValue = (prop) => GlSearchBoxByClick.props[prop].default;
+
+const generateProps = ({
+  disabled = defaultValue('disabled'),
+  value = defaultValue('value'),
+  placeholder = defaultValue('placeholder'),
+  historyItems = defaultValue('historyItems'),
+  clearable = defaultValue('clearable'),
+  recentSearchesHeader = defaultValue('recentSearchesHeader'),
+  clearButtonTitle = defaultValue('clearButtonTitle'),
+  closeButtonTitle = defaultValue('closeButtonTitle'),
+  clearRecentSearchesText = defaultValue('clearRecentSearchesText'),
+  noRecentSearchesText = defaultValue('noRecentSearchesText'),
+  searchButtonAttributes = defaultValue('searchButtonAttributes')(),
+} = {}) => ({
+  disabled,
+  value,
+  placeholder,
+  historyItems,
+  clearable,
+  recentSearchesHeader,
+  clearButtonTitle,
+  closeButtonTitle,
+  clearRecentSearchesText,
+  noRecentSearchesText,
+  searchButtonAttributes,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSearchBoxByClick,
+  },
+  props: Object.keys(argTypes),
+  template,
+  data() {
+    return {
+      currentHistoryItems: this.historyItems,
+    };
+  },
+  watch: {
+    historyItems(historyItems) {
+      this.currentHistoryItems = historyItems;
     },
-    placeholder: {
-      type: String,
-      default: text('placeholder', placeholder),
+  },
+  methods: {
+    clearCurrentHistory() {
+      this.currentHistoryItems = [];
     },
-  };
-}
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/search-box-by-click', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <gl-search-box-by-click
-        :value="value"
-        :disabled="disabled"
-        :placeholder="placeholder"
-      />
-    `,
-  }))
-  .add('with history', () => ({
-    props: {
-      ...generateProps(),
-      history: {
-        type: Array,
-        default: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
+export const History = Template.bind({});
+History.args = generateProps({
+  historyItems: ['author:@admin', 'assignee:@admin milestone:%12.5', 'label:~test'],
+});
+
+export default {
+  title: 'base/search-box-by-click',
+  component: GlSearchBoxByClick,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    ...disableControls(['tooltipContainer']),
+    historyItems: {
+      control: {
+        type: 'object',
       },
     },
-    components,
-    template: `
-      <gl-search-box-by-click
-        :value="value"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :history-items="history"
-      />
-    `,
-  }));
+  },
+};

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

@@ -26,6 +26,9 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       required: false,
       default: '',
@@ -33,11 +36,17 @@ export default {
       // so we should not force any specific type for value here
       validator: () => true,
     },
+    /**
+     * If provided, used as history items for this component
+     */
     historyItems: {
       type: Array,
       required: false,
       default: null,
     },
+    /**
+     * If provided, used as a placeholder for this component
+     */
     placeholder: {
       type: String,
       required: false,
@@ -48,26 +57,41 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * i18n for recent searches title within history dropdown
+     */
     recentSearchesHeader: {
       type: String,
       required: false,
       default: 'Recent searches',
     },
+    /**
+     * i18n for clear button title
+     */
     clearButtonTitle: {
       type: String,
       required: false,
       default: 'Clear',
     },
+    /**
+     * i18n for close button title within history dropdown
+     */
     closeButtonTitle: {
       type: String,
       required: false,
       default: 'Close',
     },
+    /**
+     * i18n for recent searches clear text
+     */
     clearRecentSearchesText: {
       type: String,
       required: false,
@@ -78,12 +102,18 @@ export default {
       required: false,
       default: "You don't have any recent searches",
     },
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,
       validator: (value) =>
         value === false || typeof value === 'string' || value instanceof HTMLElement,
     },
+    /**
+     * HTML attributes to add to the search button
+     */
     searchButtonAttributes: {
       type: Object,
       required: false,
@@ -130,10 +160,19 @@ export default {
       this.$refs.historyDropdown.hide();
     },
     search(value) {
+      /**
+       * Emitted when search is submitted
+       * @property {*} value Search value
+       */
       this.$emit('submit', value);
     },
     selectHistoryItem(item) {
       this.currentValue = item;
+
+      /**
+       * Emitted when item from history is selected
+       * @property {*} item History item
+       */
       this.$emit('history-item-selected', item);
       setTimeout(() => {
         document.activeElement.blur();
@@ -141,11 +180,20 @@ export default {
     },
     clearInput() {
       this.currentValue = '';
+      /**
+       * Emitted when search is cleared
+       */
       this.$emit('clear');
       if (this.$refs.input) {
         this.$refs.input.$el.focus();
       }
     },
+    emitClearHistory() {
+      /**
+       * Emitted when clear history button is clicked
+       */
+      this.$emit('clear-history');
+    },
   },
 };
 </script>
@@ -187,10 +235,11 @@ export default {
             class="gl-search-box-by-click-history-item"
             @click="selectHistoryItem(item)"
           >
+            <!-- @slot Slot to customize history item in history dropdown. Used only with history-items prop -->
             <slot name="history-item" :historyItem="item">{{ item }}</slot>
           </gl-dropdown-item>
           <gl-dropdown-divider />
-          <gl-dropdown-item ref="clearHistory" @click="$emit('clear-history')">{{
+          <gl-dropdown-item ref="clearHistory" @click="emitClearHistory">{{
             clearRecentSearchesText
           }}</gl-dropdown-item>
         </template>

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

@@ -1,24 +1,6 @@
-import examples from './examples';
 import description from './search_box_by_type.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of search input',
-    },
-    disabled: {
-      additionalInfo: 'If provided and true, disables the input and controls',
-    },
-    isLoading: {
-      additionalInfo: 'Puts search box into loading state, rendering spinner',
-    },
-    tooltipContainer: {
-      additionalInfo:
-        'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
-    },
-  },
-  examples,
-  bootstrapComponent: 'b-form-input',
 };

package/src/components/base/search_box_by_type/search_box_by_type.md

@@ -1,3 +1 @@
-# Search Box By Type
-
 Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

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

@@ -1,49 +1,55 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlSearchBoxByType } from '../../../index';
+import { disableControls } from '../../../utils/stories_utils';
 import readme from './search_box_by_type.md';
 
-const components = {
-  GlSearchBoxByType,
-};
+const template = `
+  <gl-search-box-by-type
+    v-model="searchQuery"
+    :clear-button-title="clearButtonTitle"
+    :disabled="disabled"
+    :is-loading="isLoading"
+    :placeholder="placeholder"
+  />
+`;
+
+const defaultValue = (prop) => GlSearchBoxByType.props[prop].default;
 
-function generateProps({
-  disabled = false,
-  value = '',
+const generateProps = ({
+  clearButtonTitle = defaultValue('clearButtonTitle'),
+  disabled = defaultValue('disabled'),
   placeholder = 'Search',
-  isLoading = false,
-} = {}) {
-  return {
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', disabled),
-    },
-    value: {
-      type: String,
-      default: text('value', value),
-    },
-    placeholder: {
-      type: String,
-      default: text('placeholder', placeholder),
-    },
-    isLoading: {
-      type: Boolean,
-      default: boolean('isLoading', isLoading),
-    },
-  };
-}
+  isLoading = defaultValue('isLoading'),
+} = {}) => ({
+  clearButtonTitle,
+  disabled,
+  placeholder,
+  isLoading,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSearchBoxByType,
+  },
+  props: Object.keys(argTypes),
+  data: () => ({ searchQuery: '' }),
+  template,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
 
-documentedStoriesOf('base/search-box-by-type', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template: `
-      <gl-search-box-by-type
-        :value="value" 
-        :disabled="disabled"
-        :is-loading="isLoading"
-        :placeholder="placeholder"
-      />
-    `,
-  }));
+export default {
+  title: 'base/search-box-by-type',
+  component: GlSearchBoxByType,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-form-input',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    ...disableControls(['value']),
+  },
+};

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

@@ -4,11 +4,6 @@ import GlFormInput from '../form/form_input/form_input.vue';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 
-const model = {
-  prop: 'value',
-  event: 'input',
-};
-
 export default {
   components: {
     GlClearIconButton,
@@ -17,8 +12,14 @@ export default {
     GlLoadingIcon,
   },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
+    /**
+     * If provided, used as value of search input
+     */
     value: {
       type: String,
       required: false,
@@ -29,16 +30,25 @@ export default {
       required: false,
       default: 'Clear',
     },
+    /**
+     * If provided and true, disables the input and controls
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Puts search box into loading state, rendering spinner
+     */
     isLoading: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
+     */
     tooltipContainer: {
       required: false,
       default: false,

package/src/directives/hover_load/hover_load.md

@@ -1,5 +1,3 @@
-# Hover Load
-
 A Vue Directive to help with preloading resources when hovering over an element.
 
 ## Usage

package/src/directives/hover_load/hover_load.stories.js

@@ -1,5 +1,3 @@
-import { text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
 import { GlHoverLoadDirective } from '../../index';
 import readme from './hover_load.md';
 
@@ -8,39 +6,46 @@ const directives = {
 };
 
 // eslint-disable-next-line no-script-url
-function generateProps({ endpoint = 'some/endpoint' } = {}) {
-  return {
-    endpoint: {
-      type: String,
-      default: text('endpoint', endpoint),
+const generateProps = ({ endpoint = 'some/endpoint' } = {}) => ({
+  endpoint,
+});
+
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  directives,
+  data: () => ({
+    isPreloaded: false,
+  }),
+  methods: {
+    handlePreload() {
+      fetch(this.endpoint);
+      this.isPreloaded = true;
     },
-  };
-}
+  },
+  template: `
+  <div>
+    <a
+      :href="endpoint"
+      v-gl-hover-load="handlePreload"
+    >
+        Hover me to preload
+    </a>
+    
+    <span>(Preloaded: {{isPreloaded}})</span>
+    </div>
+    `,
+});
+Default.args = generateProps();
 
-documentedStoriesOf('directives/hover-load-directive', readme)
-  .addParameters({ storyshots: false })
-  .add('default', () => ({
-    props: generateProps(),
-    directives,
-    data: () => ({
-      isPreloaded: false,
-    }),
-    methods: {
-      handlePreload() {
-        fetch(this.endpoint);
-        this.isPreloaded = true;
+export default {
+  title: 'directives/hover-load-directive',
+  component: GlHoverLoadDirective,
+  parameters: {
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    template: `
-    <div>
-      <a
-        :href="endpoint"
-        v-gl-hover-load="handlePreload"
-      >
-          Hover me to preload
-      </a>
-      
-      <span>(Preloaded: {{isPreloaded}})</span>
-      </div>
-      `,
-  }));
+  },
+};

package/src/directives/resize_observer/resize_observer.documentation.js

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

package/src/directives/resize_observer/resize_observer.md

@@ -1,9 +1,3 @@
-# Resize Observer
-
-<!-- STORY -->
-
-## Usage
-
 This directive can be used to get notified whenever a given element's size (width or height) changes
 and to retrieve the updated dimensions.