@gitlab/ui 32.45.1 → 32.49.0

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

@@ -13,6 +13,8 @@ function generateProps({
   label = 'Label Name',
   description = 'form group description',
   labelDescription = 'form label description',
+  optional = GlFormGroup.props.optional.default,
+  optionalText = GlFormGroup.props.optionalText.default,
   horizontal = false,
 } = {}) {
   return {
@@ -36,6 +38,14 @@ function generateProps({
       type: String,
       default: text('label-description', labelDescription),
     },
+    optional: {
+      type: Boolean,
+      default: boolean('optional', optional),
+    },
+    optionalText: {
+      type: String,
+      default: text('optional-text', optionalText),
+    },
     horizontal: {
       type: Boolean,
       default: boolean('horizontal', horizontal),
@@ -53,6 +63,8 @@ documentedStoriesOf('base/form/form-group', readme)
         :id="id"
         :label="label"
         :label-size="labelSize"
+        :optional="optional"
+        :optional-text="optionalText"
         :description="description"
         :horizontal="horizontal"
         label-for="label1"
@@ -69,6 +81,8 @@ documentedStoriesOf('base/form/form-group', readme)
         id="group-id"
         label="Label Name"
         label-size="sm"
+        :optional="optional"
+        :optional-text="optionalText"
         description="This feature is disabled"
         label-for="input1"
       >
@@ -77,14 +91,21 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with textarea', () => ({
+    props: generateProps({ optional: true }),
     template: `
-      <gl-form-group id="group-id-textarea2" label="Label Name" label-for="textarea2">
+      <gl-form-group
+        id="group-id-textarea2"
+        label="Label Name"
+        label-for="textarea2"
+        :optional="optional"
+        :optional-text="optionalText"
+      >
         <gl-form-textarea id="textarea2" placeholder="Enter something" />
       </gl-form-group>
     `,
   }))
   .add('with label description', () => ({
-    props: generateProps(),
+    props: generateProps({ optional: true }),
     components,
     template: `
       <gl-form-group
@@ -93,6 +114,8 @@ documentedStoriesOf('base/form/form-group', readme)
         :label-size="labelSize"
         :description="description"
         :label-description="labelDescription"
+        :optional="optional"
+        :optional-text="optionalText"
         :horizontal="horizontal"
         label-for="label1"
       >
@@ -125,16 +148,16 @@ documentedStoriesOf('base/form/form-group', readme)
       };
     },
     template: `
-    <gl-form-group
-      :id="id"
-      :label="label"
-      :label-size="labelSize"
-      :description="description"
-      :invalid-feedback="invalidFeedback"
-      :state="state"
-      label-for="label1"
-    >
-      <gl-form-input id="input1" :state="state" v-model.trim="name" />
-    </gl-form-group>
+      <gl-form-group
+        :id="id"
+        :label="label"
+        :label-size="labelSize"
+        :description="description"
+        :invalid-feedback="invalidFeedback"
+        :state="state"
+        label-for="label1"
+      >
+        <gl-form-input id="input1" :state="state" v-model.trim="name" />
+      </gl-form-group>
     `,
   }));

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

@@ -20,6 +20,16 @@ export default {
       required: false,
       default: '',
     },
+    optional: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    optionalText: {
+      type: String,
+      required: false,
+      default: '(optional)',
+    },
   },
   computed: {
     actualLabelClass() {
@@ -45,11 +55,14 @@ export default {
 </script>
 <template>
   <b-form-group v-bind="$attrs" class="gl-form-group" :label-class="actualLabelClass">
-    <template v-if="hasLabelDescription" #label>
+    <template #label>
       <slot name="label">
         {{ $attrs.label }}
+        <span v-if="optional" class="optional-label" data-testid="optional-label">{{
+          optionalText
+        }}</span>
       </slot>
-      <gl-form-text data-testid="label-description">
+      <gl-form-text v-if="hasLabelDescription" data-testid="label-description">
         <slot name="label-description">{{ labelDescription }}</slot>
       </gl-form-text>
     </template>

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

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

@@ -1,105 +1,6 @@
-import examples from './examples';
 import * as description from './keyset_pagination.md';
 
 export default {
   description,
   followsDesignSystem: true,
-  bootstrapComponent: false,
-  examples,
-  propsInfo: {
-    hasPreviousPage: {
-      type: Boolean,
-      required: false,
-      default: false,
-      additionalInfo: 'Whether or not the "Prev" button should be enabled',
-    },
-    hasNextPage: {
-      type: Boolean,
-      required: false,
-      default: false,
-      additionalInfo: 'Whether or not the "Next" button should be enabled',
-    },
-    startCursor: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo:
-        'A cursor that points to the first item in the current page. Will be passed as an event parameter when the "prev" event is fired.',
-    },
-    endCursor: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo:
-        'A cursor that points to the last item in the current page. Will be passed as an event parameter when the "next" event is fired.',
-    },
-
-    prevText: {
-      type: String,
-      required: false,
-      default: 'Prev',
-      additionalInfo:
-        'The text that will be rendered inside the "Prev" button. It\'s important to provide this parameter since the default text is not translatable.',
-    },
-    prevButtonLink: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo:
-        'A link that will be used as the "Prev" button\'s "href" attribute. If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.',
-    },
-    nextText: {
-      type: String,
-      required: false,
-      default: 'Next',
-      additionalInfo:
-        'The text that will be rendered inside the "Next" button. It\'s important to provide this parameter since the default text is not translatable.',
-    },
-    nextButtonLink: {
-      type: String,
-      required: false,
-      default: null,
-      additionalInfo:
-        'A link that will be used as the "Next" button\'s "href" attribute. If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.',
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-      additionalInfo:
-        'Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).',
-    },
-  },
-  events: [
-    {
-      event: 'prev',
-      description: 'Emitted when the "Prev" button is clicked',
-      args: [
-        {
-          arg: 'startCursor',
-          description: 'A cursor that points to the first item in the current page.',
-        },
-      ],
-    },
-    {
-      event: 'next',
-      description: 'Emitted when the "Next" button is clicked',
-      args: [
-        {
-          arg: 'endCursor',
-          description: 'A cursor that points to the last item in the current page',
-        },
-      ],
-    },
-  ],
-  slots: [
-    {
-      name: 'previous-button-content',
-      description: 'Used to customize the appearance of the "Prev" button',
-    },
-    {
-      name: 'next-button-content',
-      description: 'Used to customize the appearance of the "Next" button',
-    },
-  ],
 };

package/src/components/base/keyset_pagination/keyset_pagination.md

@@ -1,5 +1,3 @@
-# Keyset Pagination
-
 Pagination is used to help users parse a large number of items on a page,
 whenever there are too many results to show at once. Pagination breaks up
 results into several pages with controls for navigating forward and backward, or

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

@@ -1,65 +1,67 @@
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './keyset_pagination.md';
 import GlKeysetPagination from './keyset_pagination.vue';
 
-const components = {
-  GlKeysetPagination,
-};
+const generateProps = ({
+  hasPreviousPage = false,
+  hasNextPage = true,
+  startCursor = 'eyJpZCI6IjE3NTg1ODciLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDgtMjAgMTQ6NDc6MDguNTQ1MjE1MDAwIFVUQyJ9',
+  endCursor = 'eyJpZCI6IjEyNjcxNzkiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDItMTkgMjE6MDA6MDUuODU5NTQ2MDAwIFVUQyJ9',
+  prevText = 'Prev',
+  nextText = 'Next',
+  prevButtonLink = '',
+  nextButtonLink = '',
+  disabled = false,
+} = {}) => ({
+  hasPreviousPage,
+  hasNextPage,
+  startCursor,
+  endCursor,
+  prevText,
+  nextText,
+  prevButtonLink,
+  nextButtonLink,
+  disabled,
+});
 
-function generateProps() {
-  return {
-    hasPreviousPage: {
-      type: Boolean,
-      default: boolean('hasPreviousPage', false),
-    },
-    hasNextPage: {
-      type: Boolean,
-      default: boolean('hasNextPage', true),
-    },
-    startCursor: {
-      type: String,
-      default: text(
-        'startCursor',
-        'eyJpZCI6IjE3NTg1ODciLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDgtMjAgMTQ6NDc6MDguNTQ1MjE1MDAwIFVUQyJ9'
-      ),
-    },
-    endCursor: {
-      type: String,
-      default: text(
-        'endCursor',
-        'eyJpZCI6IjEyNjcxNzkiLCJyZWxlYXNlZF9hdCI6IjIwMjAtMDItMTkgMjE6MDA6MDUuODU5NTQ2MDAwIFVUQyJ9'
-      ),
-    },
-    prevText: {
-      type: String,
-      default: text('prevText'),
-    },
-    nextText: {
-      type: String,
-      default: text('nextText'),
-    },
-    prevButtonLink: {
-      type: String,
-      default: text('prevButtonLink'),
-    },
-    nextButtonLink: {
-      type: String,
-      default: text('nextButtonLink'),
+const Template = (args, { argTypes }) => ({
+  components: { GlKeysetPagination },
+  props: Object.keys(argTypes),
+  template: `
+      <gl-keyset-pagination v-bind="$props"/>
+    `,
+});
+
+/* eslint-disable no-alert */
+export const Events = (args, { argTypes }) => ({
+  components: { GlKeysetPagination },
+  props: Object.keys(argTypes),
+  methods: {
+    onPrev(startCursor) {
+      alert(`"prev" event fired with start cursor: "${startCursor}"`);
     },
-    disabled: {
-      type: Boolean,
-      default: boolean('disabled', false),
+    onNext(endCursor) {
+      alert(`"next" event fired with end cursor: "${endCursor}"`);
     },
-  };
-}
-
-documentedStoriesOf('base/keyset-pagination', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template: `
-      <gl-keyset-pagination v-bind="$props"/>
+  },
+  template: `
+      <gl-keyset-pagination v-bind="$props" @prev="onPrev($event)" @next="onNext($event)" />
     `,
-  }));
+});
+Events.args = generateProps({ hasPreviousPage: true });
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'base/keyset-pagination',
+  component: GlKeysetPagination,
+  parameters: {
+    bootstrapComponent: false,
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};