@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,86 +0,0 @@
-import GlInputGroupText from '../input_group_text/input_group_text.vue';
-import { disableControls } from '../../../../utils/stories_utils';
-import GlFormInputGroup from './form_input_group.vue';
-import readme from './form_input_group.md';
-
-const template = `
-  <gl-form-input-group
-    :readonly="readonly"
-    :select-on-click="selectOnClick"
-    :predefined-options="predefinedOptions"
-    :label="label"
-    :inputClass="inputClass">
-    <template #prepend v-if="prepend">
-      <gl-input-group-text>{{prepend}}</gl-input-group-text>
-    </template>
-    <template #append v-if="append">
-      <gl-input-group-text>{{append}}</gl-input-group-text>
-    </template>
-  </gl-form-input-group>
-`;
-
-const defaultValue = (prop) => GlFormInputGroup.props[prop].default;
-
-const generateProps = ({
-  prepend = 'Username',
-  append = 'Add',
-  readonly = false,
-  selectOnClick = false,
-  predefinedOptions = defaultValue('predefinedOptions')(),
-  label = '',
-  inputClass = '',
-} = {}) => ({
-  prepend,
-  append,
-  readonly,
-  selectOnClick,
-  predefinedOptions,
-  label,
-  inputClass,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlFormInputGroup, GlInputGroupText },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const PredefinedOptions = Template.bind({});
-PredefinedOptions.args = generateProps({
-  prepend: '',
-  predefinedOptions: [
-    { name: 'Embed', value: 'https://embed.com' },
-    { name: 'Share', value: 'https://share.org' },
-  ],
-});
-
-export default {
-  title: 'base/form/form-input-group',
-  component: GlFormInputGroup,
-  parameters: {
-    bootstrapComponent: 'b-form-input',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls(['value']),
-    prepend: {
-      control: 'text',
-    },
-    append: {
-      control: 'text',
-    },
-    inputClass: {
-      control: 'text',
-    },
-    label: {
-      control: 'text',
-    },
-  },
-};

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

@@ -1,116 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlFormRadio from './form_radio.vue';
-
-describe('GlFormRadio', () => {
-  let wrapper;
-  let options;
-  let eventHandlers;
-
-  const firstOption = {
-    text: 'One',
-    value: 'one',
-  };
-  const secondOption = {
-    text: 'Two',
-    value: 'two',
-  };
-
-  const createWrapper = () => {
-    options = [firstOption, secondOption];
-    eventHandlers = {
-      input: jest.fn(),
-      change: jest.fn(),
-    };
-
-    wrapper = mount({
-      data() {
-        return {
-          selected: firstOption.value,
-          options,
-        };
-      },
-      components: { GlFormRadio },
-      template: `
-        <div>
-          <gl-form-radio
-            v-for="option in options"
-            :key="option.value"
-            v-model="selected"
-            :value="option.value"
-            @change="changeHandler"
-            @input="inputHandler"
-          >{{ option.text }}</gl-form-radio>
-        </div>
-      `,
-      methods: {
-        changeHandler: eventHandlers.change,
-        inputHandler: eventHandlers.input,
-      },
-    });
-  };
-
-  const findRadio = (value) => wrapper.find(`input[type="radio"][value="${value}"]`);
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  it('checks the radio button correctly on mount', () => {
-    const radio = findRadio(firstOption.value);
-    expect(radio.element.checked).toBe(true);
-  });
-
-  describe('when the selected value is changed programmatically', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = secondOption.value;
-    });
-
-    it('emits an input event, but not a change event on each radio', () => {
-      wrapper.findAllComponents(GlFormRadio).wrappers.forEach((radio) => {
-        expect(radio.emitted()).toEqual({
-          input: [[secondOption.value]],
-        });
-      });
-    });
-
-    it('checks the correct radio', () => {
-      expect(findRadio(secondOption.value).element.checked).toBe(true);
-    });
-  });
-
-  describe('when the selected value is changed by the user', () => {
-    let radio;
-
-    beforeEach(async () => {
-      radio = findRadio(secondOption.value);
-
-      // NOTE: We can't use "setChecked" here because
-      // it sets value programmatically under the hood and this
-      // does not pass value for the "change" event.
-      await radio.trigger('click');
-      await radio.trigger('change');
-    });
-
-    it('emits an input event on each radio, and a change event on the newly selected radio', () => {
-      const { input, change } = eventHandlers;
-      const { value: clickedRadioValue } = secondOption;
-
-      // The input handler is called twice because each radio emits one input event.
-      expect(input).toHaveBeenCalledTimes(2);
-      expect(input).toHaveBeenNthCalledWith(1, clickedRadioValue);
-      expect(input).toHaveBeenNthCalledWith(2, clickedRadioValue);
-
-      // The change handler is only called once, since only the newly selected radio emits a change event.
-      expect(change).toHaveBeenCalledTimes(1);
-      expect(change).toHaveBeenCalledWith(clickedRadioValue);
-    });
-
-    it('updates the bound value', () => {
-      expect(wrapper.vm.selected).toBe(secondOption.value);
-    });
-
-    it('checks the radio', () => {
-      expect(radio.element.checked).toBe(true);
-    });
-  });
-});

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

@@ -1,70 +0,0 @@
-import GlFormRadio from './form_radio.vue';
-import readme from './form_radio.md';
-
-const defaultOptions = [
-  { value: 'Option', name: 'radio-group' },
-  { value: 'Slot option', name: 'radio-group', slot: 'With help text' },
-  { value: 'Checked option', name: 'radio-group' },
-  {
-    value: 'Checked disabled option',
-    disabled: true,
-    name: 'last-radio-group',
-    checked: 'Checked disabled option',
-  },
-  { value: 'Disabled option', disabled: true, name: 'radio-group' },
-  { value: 'Indeterminate option', name: 'indeterminate-radio-group' },
-  { value: 'Indeterminate disabled option', disabled: true, name: 'indeterminate-radio-group' },
-];
-
-const template = `
-<div>
-  <gl-form-radio
-    v-for="option in options"
-    :key="option.value"
-    :checked="option.checked || checked"
-    :disabled="option.disabled"
-    :name="option.name || name"
-    :value="option.value"
-  >
-    {{ option.value }}
-    <template v-if="option.slot" #help>{{ option.slot }}</template>
-  </gl-form-radio>
-</div>
-`;
-
-const generateProps = ({ checked = 'Checked option' } = {}) => ({
-  checked,
-});
-
-const Template = (args) => ({
-  components: { GlFormRadio },
-  props: Object.keys(args),
-  template,
-  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',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    checked: {
-      options: defaultOptions.map(({ value }) => value),
-      control: 'select',
-    },
-  },
-};

package/src/components/base/form/form_radio_group/form_radio_group.spec.js

@@ -1,86 +0,0 @@
-import { mount } from '@vue/test-utils';
-import GlFormRadioGroup from './form_radio_group.vue';
-
-describe('GlFormRadioGroup', () => {
-  let wrapper;
-  let options;
-  const firstOption = {
-    text: 'One',
-    value: 'one',
-  };
-  const secondOption = {
-    text: 'Two',
-    value: 'two',
-  };
-
-  const createWrapper = () => {
-    options = [firstOption, secondOption];
-
-    wrapper = mount({
-      data() {
-        return {
-          selected: firstOption.value,
-          options,
-        };
-      },
-      components: { GlFormRadioGroup },
-      template: '<gl-form-radio-group v-model="selected" :options="options" />',
-    });
-  };
-
-  const findRadio = (value) => wrapper.find(`input[type="radio"][value="${value}"]`);
-
-  beforeEach(() => {
-    createWrapper();
-  });
-
-  it('checks the radio button correctly on mount', () => {
-    const radio = findRadio(firstOption.value);
-    expect(radio.element.checked).toBe(true);
-  });
-
-  describe('when the selected value is changed programmatically', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = secondOption.value;
-    });
-
-    it('emits an input event, but not a change event', () => {
-      expect(wrapper.findComponent(GlFormRadioGroup).emitted()).toEqual({
-        input: [[secondOption.value]],
-      });
-    });
-
-    it('checks the correct radio', () => {
-      expect(findRadio(secondOption.value).element.checked).toBe(true);
-    });
-  });
-
-  describe('when the selected value is changed by the user', () => {
-    let radio;
-
-    beforeEach(async () => {
-      radio = findRadio(secondOption.value);
-
-      // NOTE: We can't use "setChecked" here because
-      // it sets value programmatically under the hood and this
-      // does not pass value for the "change" event.
-      await radio.trigger('click');
-      await radio.trigger('change');
-    });
-
-    it('emits an input event and a change event', async () => {
-      expect(wrapper.findComponent(GlFormRadioGroup).emitted()).toEqual({
-        input: [[secondOption.value]],
-        change: [[secondOption.value]],
-      });
-    });
-
-    it('updates the bound value', () => {
-      expect(wrapper.vm.selected).toBe(secondOption.value);
-    });
-
-    it('checks the radio', () => {
-      expect(radio.element.checked).toBe(true);
-    });
-  });
-});

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

@@ -1,79 +0,0 @@
-import GlFormRadio from '../form_radio/form_radio.vue';
-import GlFormRadioGroup from './form_radio_group.vue';
-import readme from './form_radio_group.md';
-
-const defaultOptions = [
-  { value: 'pizza', text: 'Pizza' },
-  { value: 'tacos', text: 'Tacos' },
-  { value: 'burger', text: 'Burger', disabled: true },
-];
-const data = () => ({ selected: 'slot-option' });
-const generateProps = ({ name = 'radio-group-name', options = defaultOptions } = {}) => ({
-  name,
-  options,
-});
-
-const template = `
-  <div>
-    <gl-form-radio-group
-      v-model="selected"
-      :options="options"
-      :name="name"
-    >
-      <template #first>
-        <gl-form-radio value="slot-option">
-          Slot option with help text
-          <template #help>
-            Help text
-          </template>
-        </gl-form-radio>
-      </template>
-      <gl-form-radio value="Last option">Last option</gl-form-radio>
-    </gl-form-radio-group>
-  </div>`;
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlFormRadioGroup,
-    GlFormRadio,
-  },
-  props: Object.keys(argTypes),
-  template,
-  data,
-});
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/form/form-radio-group',
-  component: GlFormRadioGroup,
-  parameters: {
-    bootstrapComponent: 'b-form-radio-group',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    options: {
-      description: 'Array of objects representing the radios to render',
-    },
-    valueField: {
-      description: 'Field name in the options prop that should be used for the value',
-    },
-    textField: {
-      description: 'Field name in the options prop that should be used for the text label',
-    },
-    htmlField: {
-      description:
-        'Field name in the options prop that should be used for the html label instead of text field. Use with caution.',
-    },
-    disabledField: {
-      description: 'Field name in the options prop that should be used for the disabled state',
-    },
-    checked: {
-      description: 'The current value of the checked radio in the group',
-    },
-  },
-};

package/src/components/base/form/form_select/form_select.spec.js

@@ -1,69 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { formStateOptions, formInputWidths } from '../../../../utils/constants';
-import { formSelectOptions } from './constants';
-import GlFormSelect from './form_select.vue';
-
-const DEFAULT_SELECT_CLASSES = ['gl-form-select', 'custom-select'];
-const excludeDefaultNull = (values) => Object.values(values).filter((value) => value !== null);
-
-describe('GlFormSelect', () => {
-  let wrapper;
-
-  const createComponent = (propsData = {}, mountFn = mount) => {
-    wrapper = mountFn(GlFormSelect, {
-      propsData,
-    });
-  };
-
-  describe('state prop', () => {
-    it.each`
-      state                       | expectedClasses
-      ${formStateOptions.valid}   | ${['is-valid']}
-      ${formStateOptions.invalid} | ${['is-invalid']}
-      ${formStateOptions.default} | ${[]}
-      ${undefined}                | ${[]}
-    `('adds $expectedClass class for state $state', ({ state, expectedClasses }) => {
-      createComponent({ state });
-
-      expect(wrapper.classes().sort()).toEqual(
-        [...DEFAULT_SELECT_CLASSES, ...expectedClasses].sort()
-      );
-    });
-  });
-
-  describe('width prop', () => {
-    // Exclude the default null value
-    const nonNullWidths = excludeDefaultNull(formInputWidths);
-
-    it.each(nonNullWidths)('adds correct class for width %s', (width) => {
-      createComponent({ width });
-
-      expect(wrapper.classes().sort()).toEqual(
-        [...DEFAULT_SELECT_CLASSES, `gl-form-select-${width}`].sort()
-      );
-    });
-
-    it('does not add a width class if not given the width prop', () => {
-      createComponent();
-
-      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
-    });
-
-    it('does not add a width class if passed null', () => {
-      createComponent({ width: null });
-
-      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
-    });
-  });
-
-  describe('v-model', () => {
-    it('should select an option element and update the v-model bound data', async () => {
-      createComponent({ options: formSelectOptions });
-      const options = wrapper.findAll('option');
-
-      await options.at(1).setSelected();
-
-      expect(wrapper.find('option:checked').element.value).toBe(formSelectOptions[1].value);
-    });
-  });
-});

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

@@ -1,156 +0,0 @@
-import uniqueId from 'lodash/uniqueId';
-import { formInputWidths, formStateOptions } from '../../../../utils/constants';
-import GlFormGroup from '../form_group/form_group.vue';
-import { formSelectOptions } from './constants';
-import readme from './form_select.md';
-import GlFormSelect from './form_select.vue';
-
-const data = () => ({
-  selected: 'Pizza',
-});
-
-const template = `
-<gl-form-group :label="labelText" :label-for="inputId">
-  <gl-form-select
-    :id="inputId"
-    v-model="selected"
-    :width="width"
-    :disabled="disabled"
-    :state="state"
-    :multiple="multiple"
-    :selectSize="selectSize"
-    :options="options">
-  </gl-form-select>
-</gl-form-group>
-`;
-
-const generateProps = ({
-  inputId = uniqueId('input-'),
-  labelText = 'Label',
-  width = null,
-  state = null,
-  disabled = false,
-  multiple = false,
-  selectSize = 1,
-  options = formSelectOptions,
-} = {}) => ({
-  inputId,
-  labelText,
-  width,
-  disabled,
-  state,
-  multiple,
-  selectSize,
-  options,
-});
-
-const Template = (args) => ({
-  components: { GlFormSelect, GlFormGroup },
-  props: Object.keys(args),
-  data,
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const Disabled = Template.bind({});
-Disabled.args = generateProps({ disabled: true });
-
-export const ValidState = Template.bind({});
-ValidState.args = generateProps({ state: true });
-
-export const InvalidState = Template.bind({});
-InvalidState.args = generateProps({ state: false });
-
-export const WithTruncation = (args, { argTypes }) => ({
-  components: { GlFormSelect, GlFormGroup },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      selected: 1,
-    };
-  },
-  template: `
-    <div style="max-width: 300px;">
-      ${template}
-    </div>
-    `,
-});
-WithTruncation.args = generateProps({
-  options: [
-    {
-      value: 1,
-      text: 'A form select option with a very looooooooong label',
-    },
-  ],
-});
-
-export const Widths = (args, { argTypes }) => ({
-  components: { GlFormSelect, GlFormGroup },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      formInputWidths,
-    };
-  },
-  template: `
-      <div>
-        <gl-form-group v-for="(width, name) in formInputWidths" :key="width" :label="name" :label-for="'width-' + width">
-          <gl-form-select
-            :id="'width-' + width"
-            v-model="name"
-            :width="width"
-            :options="[{ value: name, text: name }]">
-          </gl-form-select>
-        </gl-form-group>
-      </div>`,
-});
-Widths.args = generateProps();
-
-export default {
-  title: 'base/form/form-select',
-  component: GlFormSelect,
-  parameters: {
-    bootstrapComponent: 'b-form-select',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    width: {
-      options: formInputWidths,
-      control: 'select',
-    },
-    state: {
-      options: formStateOptions,
-      control: 'select',
-    },
-    input: {
-      description: 'Emitted with the select value changes.',
-      table: {
-        category: 'events',
-      },
-    },
-    change: {
-      description: 'Emitted with the select value changes via user interaction.',
-      table: {
-        category: 'events',
-      },
-    },
-    first: {
-      description: 'Slot to place option tags above options provided via options prop.',
-      table: {
-        category: 'slots',
-      },
-    },
-    default: {
-      description: 'Slot to place explicit option tags.',
-      table: {
-        category: 'slots',
-      },
-    },
-  },
-};

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

@@ -1,27 +0,0 @@
-import readme from './form_text.md';
-import GlFormText from './form_text.vue';
-
-const Template = (args) => ({
-  components: { GlFormText },
-  props: Object.keys(args),
-  template: `
-      <div class="gl-form-group">
-        <gl-form-text>Some form text</gl-form-text>
-      </div>
-    `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export default {
-  title: 'base/form/form-text',
-  component: GlFormText,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};