@gitlab/ui 37.2.0 → 37.4.1

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.
 

package/src/directives/resize_observer/resize_observer.stories.js

@@ -1,60 +1,79 @@
-import { withKnobs, select } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlResizeObserverDirective } from '../../index';
+import { GlResizeObserverDirective as GlResizeObserver } from '../../index';
 import readme from './resize_observer.md';
 
-documentedStoriesOf('directives/resize-observer-directive', readme)
-  .addParameters({ storyshots: false })
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {
-      elementWidth: {
-        default: select('elementWidth', ['100%', '75%', '50%'], '100%'),
-      },
-      elementHeight: {
-        default: select('elementHeight', ['100%', '75%', '50%'], '100%'),
-      },
-    },
-    directives: {
-      'gl-resize-observer': GlResizeObserverDirective,
-    },
-    data() {
+const generateProps = ({ elementWidth = '100%', elementHeight = '100%' } = {}) => ({
+  elementWidth,
+  elementHeight,
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  directives: {
+    GlResizeObserver,
+  },
+  data() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+  computed: {
+    wrapperStyles() {
       return {
-        width: 0,
-        height: 0,
+        height: '400px',
       };
     },
-    computed: {
-      wrapperStyles() {
-        return {
-          height: '400px',
-        };
-      },
-      elementStyles() {
-        return {
-          height: this.elementHeight,
-          width: this.elementWidth,
-        };
-      },
+    elementStyles() {
+      return {
+        height: this.elementHeight,
+        width: this.elementWidth,
+      };
     },
-    methods: {
-      handleResize({ contentRect: { width, height } }) {
-        this.width = Math.round(width);
-        this.height = Math.round(height);
-      },
+  },
+  methods: {
+    handleResize({ contentRect: { width, height } }) {
+      this.width = Math.round(width);
+      this.height = Math.round(height);
     },
-    template: `
+  },
+  template: `
+    <div
+      :style="wrapperStyles"
+      class="d-flex justify-content-center align-items-center">
       <div
-        :style="wrapperStyles"
-        class="d-flex justify-content-center align-items-center">
-        <div
-          v-gl-resize-observer="handleResize"
-          :style="elementStyles"
-          class="d-flex position-relative justify-content-center align-items-center bg-light text-dark">
-            <span class="d-inline-block p-2">
-              I am {{ width }}px wide and {{ height }}px high.
-            </span>
-        </div>
+        v-gl-resize-observer="handleResize"
+        :style="elementStyles"
+        class="d-flex position-relative justify-content-center align-items-center bg-light text-dark">
+          <span class="d-inline-block p-2">
+            I am {{ width }}px wide and {{ height }}px high.
+          </span>
       </div>
-    `,
-  }));
+    </div>
+  `,
+});
+Default.args = generateProps();
+
+const makeControl = () => ({
+  options: ['100%', '75%', '50%'],
+  control: {
+    type: 'select',
+  },
+});
+
+export default {
+  title: 'directives/resize-observer-directive',
+  component: GlResizeObserver,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    elementWidth: makeControl(),
+    elementHeight: makeControl(),
+  },
+};

package/src/directives/safe_html/safe_html.md

@@ -1,9 +1,5 @@
-# Safe Html
-
 A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.
 
-<!-- STORY -->
-
 ## Usage
 
 This directive can be used to sanitize HTML code which may contain user input, to prevent cross-site

package/src/directives/safe_html/safe_html.stories.js

@@ -1,50 +1,59 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
 import { sanitize } from 'dompurify';
-import { escape } from 'lodash';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
-import { GlSafeHtmlDirective } from '../../index';
+import { GlSafeHtmlDirective as GlSafeHtml } from '../../index';
 import readme from './safe_html.md';
 
-documentedStoriesOf('directives/safe-html-directive', readme)
-  .addDecorator(withKnobs)
-  .addParameters({ storyshots: false, knobs: { escapeHTML: false } })
-  .add('default', () => ({
-    directives: {
-      'gl-safe-html': GlSafeHtmlDirective,
-    },
-    props: {
-      unsafeHTML: {
-        type: String,
-        default: text('Unsafe HTML', '<a href="javascript:alert(document.domain)">Click me</a>'),
-      },
+const generateProps = ({
+  unsafeHTML = '<a href="javascript:alert(document.domain)">Click me</a>',
+} = {}) => ({
+  unsafeHTML,
+});
+
+export const Default = (_args, { argTypes }) => ({
+  directives: {
+    GlSafeHtml,
+  },
+  props: Object.keys(argTypes),
+  computed: {
+    sanitizedHtml() {
+      return sanitize(this.unsafeHTML);
     },
-    computed: {
-      sanitizedHtml() {
-        return sanitize(this.unsafeHTML);
+  },
+  template: `
+  <table class="gl-table">
+    <thead>
+      <tr>
+        <th>Directive</th>
+        <th>Output</th>
+        <th>Rendered</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><strong>v-html</strong></td>
+        <td><code>{{ unsafeHTML }}</code></td>
+        <td>N/A for security reasons</td>
+      </tr>
+      <tr>
+        <td><strong>v-safe-html</strong></td>
+        <td><code>{{ sanitizedHtml }}</code></td>
+        <td v-gl-safe-html="unsafeHTML"></td>
+      </tr>
+    </tbody>
+  </table>
+  `,
+});
+Default.args = generateProps();
+
+export default {
+  title: 'directives/safe-html-directive',
+  component: GlSafeHtml,
+  parameters: {
+    storyshots: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    escape,
-    template: `
-    <table class="gl-table">
-      <thead>
-        <tr>
-          <th>Directive</th>
-          <th>Output</th>
-          <th>Rendered</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><strong>v-html</strong></td>
-          <td><code v-html="$options.escape(unsafeHTML)"></code></td>
-          <td>N/A for security reasons</td>
-        </tr>
-        <tr>
-          <td><strong>v-safe-html</strong></td>
-          <td><code v-html="$options.escape(sanitizedHtml)"></code></td>
-          <td v-gl-safe-html="unsafeHTML"></td>
-        </tr>
-      </tbody>
-    </table>
-    `,
-  }));
+  },
+};