@gitlab/ui 32.46.0 → 32.50.0

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

@@ -1,62 +1,32 @@
-import { text, withKnobs, select } 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_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
 
-function generateProps() {
-  const props = {
-    label: {
-      type: String,
-      default: text('label', 'GitLab User'),
-    },
-    subLabel: {
-      type: String,
-      default: text('subLabel', '@gitlab'),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarSizeOptions, 32),
-    },
-    shape: {
-      type: String,
-      default: select('shape', avatarShapeOptions, 'circle'),
-    },
-    src: {
-      type: String,
-      default: text(
-        'src',
-        'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64'
-      ),
-    },
-  };
-
-  return props;
-}
-
-function generateTooltipProps() {
-  const props = {
-    tooltipText: {
-      type: String,
-      default: text('tooltipText', 'Avatar tooltip'),
-    },
-    placement: {
-      type: String,
-      default: select('placement', tooltipPlacements, 'top'),
-    },
-  };
+const generateProps = ({
+  label = 'GitLab User',
+  subLabel = '@gitlab',
+  size = 32,
+  shape = 'circle',
+  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+} = {}) => ({
+  label,
+  subLabel,
+  size,
+  shape,
+  src,
+});
 
-  return props;
-}
+const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
+  tooltipText,
+  placement,
+});
 
-documentedStoriesOf('base/avatar/labeled', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -65,13 +35,12 @@ documentedStoriesOf('base/avatar/labeled', readme)
         :sub-label="subLabel"
       />
     `,
-  }))
-  .add('with-tooltip', () => ({
-    props: {
-      ...generateProps(),
-      ...generateTooltipProps(),
-    },
-    template: `
+});
+Default.args = generateProps();
+
+export const WithTooltip = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -82,10 +51,20 @@ documentedStoriesOf('base/avatar/labeled', readme)
         v-gl-tooltip="{ placement }"
       />
     `,
-  }))
-  .add('with-badges', () => ({
-    props: generateProps(),
-    template: `
+});
+WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
+WithTooltip.argTypes = {
+  placement: {
+    control: {
+      type: 'select',
+      options: tooltipPlacements,
+    },
+  },
+};
+
+export const WithBadges = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
       <gl-avatar-labeled
         :shape="shape"
         :size="size"
@@ -103,4 +82,31 @@ documentedStoriesOf('base/avatar/labeled', readme)
         </template>
       </gl-avatar-labeled>
     `,
-  }));
+});
+WithBadges.args = generateProps();
+
+export default {
+  title: 'base/avatar/labeled',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: avatarSizeOptions,
+      },
+    },
+    shape: {
+      control: {
+        type: 'select',
+        options: avatarShapeOptions,
+      },
+    },
+  },
+};

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -49,6 +49,7 @@ export default {
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>
+        <!-- @slot Metadata to add to the avatar. Generally used for badges or user status emoji. -->
         <slot name="meta"></slot>
       </div>
       <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link">

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

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

package/src/components/base/avatars_inline/avatars_inline.md

@@ -1,12 +1,10 @@
-## Avatars inline
-
 Use `<avatars-inline />` to display multiple avatars organized in a single row.
 
 ### Basic usage
 
 The `avatars` property accepts an array of objects that contains the avatar properties. By default,
 `<avatars-inline />` expects each object contained in the array to have the same shape as the
-properties of the  `<avatar />` component. You can customize the display of each avatar by
+properties of the `<avatar />` component. You can customize the display of each avatar by
 overriding the default slot:
 
 ```html

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

@@ -1,7 +1,4 @@
-import { number, boolean, object, select, withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
-
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
@@ -12,53 +9,61 @@ const defaultAvatars = [
   { src: 'https://picsum.photos/id/1012/32' },
 ];
 
-function generateProps(avatars = defaultAvatars) {
-  const props = {
-    maxVisible: {
-      type: Number,
-      default: number('maxVisible', 2),
-    },
-    collapsed: {
-      type: Boolean,
-      default: boolean('collapsed', true),
-    },
-    size: {
-      type: Number,
-      default: select('size', avatarsInlineSizeOptions, 24),
-    },
-    avatars: {
-      type: Array,
-      default: object('avatars', avatars),
-    },
-  };
-
-  return props;
-}
+const generateProps = (
+  avatars = defaultAvatars,
+  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+) => ({
+  maxVisible,
+  collapsed,
+  avatarSize,
+  avatars,
+});
 
-documentedStoriesOf('base/avatar/avatars-inline', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
     </gl-avatars-inline>
     `,
-  }))
-  .add('with links and tooltips', () => ({
-    props: generateProps(
-      defaultAvatars.map((avatar, index) => ({
-        ...avatar,
-        href: '//gitlab.com',
-        tooltip: `Avatar ${index}`,
-      }))
-    ),
-    template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="size" :max-visible="maxVisible">
+});
+Default.args = generateProps();
+
+export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  template: `
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
-          <gl-avatar :src="avatar.src" :size="size" />
+          <gl-avatar :src="avatar.src" :size="avatarSize" />
         </gl-avatar-link>
       </template>
     </gl-avatars-inline>
     `,
-  }));
+});
+WithLinksAndTooltips.args = generateProps(
+  defaultAvatars.map((avatar, index) => ({
+    ...avatar,
+    href: '//gitlab.com',
+    tooltip: `Avatar ${index}`,
+  }))
+);
+
+export default {
+  title: 'base/avatar/avatars-inline',
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    avatarSize: {
+      control: {
+        type: 'select',
+        options: avatarsInlineSizeOptions,
+      },
+    },
+  },
+};

package/src/components/base/form/form_combobox/form_combobox.documentation.js

@@ -1,14 +1,6 @@
-import examples from './examples';
 import * as description from './form_combobox.md';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
-  events: [
-    {
-      event: 'value-selected',
-      description: 'Emitted when a value is selected.',
-    },
-  ],
 };

package/src/components/base/form/form_combobox/form_combobox.md

@@ -1,5 +1,3 @@
-# GlFormCombobox
-
 Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component
 with synchronous autocomplete dropdown. It behaves as follows:
 

package/src/components/base/form/form_combobox/form_combobox.stories.js

@@ -1,41 +1,41 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { tokenList, labelText } from './constants';
 import readme from './form_combobox.md';
 import GlFormCombobox from './form_combobox.vue';
 
-const components = {
-  GlFormCombobox,
-};
-
-const getProps = () => {
-  return {
-    tokenList: {
-      type: Array,
-      default: object('tokens', tokenList),
-    },
-    labelText: {
-      type: String,
-      default: text('label text', labelText),
-    },
-  };
-};
+const getProps = () => ({
+  tokenList,
+  labelText,
+});
 
-documentedStoriesOf('base/form/form-combobox', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: getProps(),
-    data: () => {
-      return {
-        value: '',
-      };
-    },
-    template: `
+const Template = (args) => ({
+  components: { GlFormCombobox },
+  data: () => {
+    return {
+      value: '',
+    };
+  },
+  props: Object.keys(args),
+  template: `
       <gl-form-combobox
         v-model="value"
         :token-list="tokenList"
         :labelText="labelText"
       />
     `,
-  }));
+});
+
+export const Default = Template.bind({});
+Default.args = getProps();
+
+export default {
+  title: 'base/form/form-combobox',
+  component: GlFormCombobox,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -128,6 +128,10 @@ export default {
     selectToken(value) {
       this.$emit('input', value);
       this.closeSuggestions();
+      /**
+       * Emitted when a value is selected.
+       * @event value-selected
+       */
       this.$emit('value-selected', value);
     },
   },

package/src/components/base/form/form_radio/form_radio.documentation.js

@@ -1,37 +1,6 @@
-import examples from './examples';
 import description from './form_radio.md';
 
 export default {
   description,
-  examples,
   followsDesignSystem: true,
-  bootstrapComponent: 'b-form-radio',
-  propsInfo: {
-    checked: {
-      additionalInfo: 'The current value of the radio(s)',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed',
-    },
-    {
-      event: 'change',
-      args: [{ arg: 'checked', description: 'current selected value of radio group' }],
-      description: 'Emitted when the selected value is changed due to user interaction',
-    },
-  ],
-  slots: [
-    {
-      name: 'help',
-      description:
-        'Content provided here will be shown beneath the radio. Typically used for help or descriptive text.',
-    },
-    {
-      name: 'default',
-      description: 'Content to use for the label',
-    },
-  ],
 };

package/src/components/base/form/form_radio/form_radio.md

@@ -1,10 +1,3 @@
-# GlFormRadio
-
-A radio button typically represents a single option in a group of related
-choices. Each radio button is boolean and only one can be selected at a time.
-
-## Usage
-
 `GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.
 
 Below is an example which demonstrates the direct approach. For examples using
@@ -12,13 +5,13 @@ Below is an example which demonstrates the direct approach. For examples using
 
 ```html
 <script>
-export default {
-  data() {
-    return {
-      selected: 'yes',
-    };
-  },
-};
+  export default {
+    data() {
+      return {
+        selected: 'yes',
+      };
+    },
+  };
 </script>
 
 <template>

package/src/components/base/form/form_radio/form_radio.stories.js

@@ -1,48 +1,60 @@
-import { withKnobs, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormRadio } from '../../../../../index';
 import readme from './form_radio.md';
 
-const components = {
-  GlFormRadio,
-};
-
 const defaultOptions = [
   { value: 'Pizza', text: 'Pizza' },
   { value: 'Tacos', text: 'Tacos' },
   { value: 'Burger', text: 'Burger', disabled: true },
 ];
 
-function generateProps({ name = 'radio-group-name' } = {}) {
-  return {
-    name: {
-      type: String,
-      default: text('name', name),
-    },
-  };
-}
+const generateProps = ({ name = 'radio-group-name', checked = defaultOptions[0].value } = {}) => ({
+  name,
+  checked,
+});
 
-documentedStoriesOf('base/form/form-radio', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    data() {
-      return {
-        selected: defaultOptions[0].value,
-        options: defaultOptions,
-      };
-    },
-    template: `
+const Template = (args) => ({
+  components: { GlFormRadio },
+  props: Object.keys(args),
+  template: `
       <div>
         <gl-form-radio
           v-for="option in options"
           :key="option.value"
-          v-model="selected"
+          :checked="checked"
           :value="option.value"
           :disabled="option.disabled"
           :name="name"
         >{{ option.text }}</gl-form-radio>
       </div>
     `,
-  }));
+  data() {
+    return {
+      options: defaultOptions,
+    };
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/form-radio',
+  component: GlFormRadio,
+  parameters: {
+    bootstrapComponent: 'b-form-radio',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    checked: {
+      options: defaultOptions.map(({ value }) => value),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

package/src/components/base/form/form_radio/form_radio.vue

@@ -7,20 +7,45 @@ export default {
   name: 'GlFormRadio',
   components: { BFormRadio },
   inheritAttrs: false,
-  model,
+  model: {
+    prop: model.prop,
+    event: model.event,
+  },
+  props: {
+    /**
+     * Whether the radio is checked
+     */
+    checked: {
+      type: [String, Number, Boolean, Object],
+      required: false,
+      default: false,
+    },
+  },
 };
 </script>
 
 <template>
+  <!--
+  Emitted when the selected value is changed
+  @event input
+  @type {boolean} current selected value of radio group
+
+  Emitted when the selected value is changed due to user interaction
+  @event change
+  @type {boolean} current selected value of radio group
+  -->
   <b-form-radio
     class="gl-form-radio"
+    :checked="checked"
     v-bind="$attrs"
     v-on="$listeners"
     @input="$emit('input', $event)"
     @change="$emit('change', $event)"
   >
+    <!-- @slot Content to use for the label -->
     <slot></slot>
     <p v-if="$scopedSlots.help" class="help-text">
+      <!-- @slot Content provided here will be shown beneath the radio. Typically used for help or descriptive text. -->
       <slot name="help"></slot>
     </p>
   </b-form-radio>

package/src/components/base/form/input_group_text/input_group_text.documentation.js

@@ -1,8 +1,5 @@
-import examples from './examples';
 import * as description from './input_group_text.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {},
 };

package/src/components/base/form/input_group_text/input_group_text.stories.js

@@ -1,25 +1,31 @@
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import readme from './input_group_text.md';
 import GlInputGroupText from './input_group_text.vue';
 
-const components = {
-  GlInputGroupText,
-};
-
-const defaultProps = {};
-
-function generateProps(props = {}) {
-  return {
-    ...defaultProps,
-    ...props,
-  };
-}
+const generateProps = (props = {}) => ({
+  ...props,
+});
 
-documentedStoriesOf('base/form/input-group-text', readme).add('default', () => ({
-  components,
-  props: generateProps(),
-  data: () => ({}),
+const Template = (args) => ({
+  components: { GlInputGroupText },
+  props: Object.keys(args),
   template: `
       <gl-input-group-text>Some text</gl-input-group-text>
     `,
-}));
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/form/input-group-text',
+  component: GlInputGroupText,
+  parameters: {
+    controls: { disable: true },
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};