@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,529 +0,0 @@
-import GlDropdown from '../dropdown/dropdown.vue';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
-import {
-  buttonCategoryOptions,
-  buttonVariantOptions,
-  badgeForButtonOptions,
-  buttonSizeOptions,
-  targetOptions,
-} from '../../../utils/constants';
-import GlBadge from '../badge/badge.vue';
-import GlButtonGroup from '../button_group/button_group.vue';
-import GlButton from './button.vue';
-import readme from './button.md';
-
-const components = { GlButton };
-
-const defaultValue = (prop) => GlButton.props[prop].default;
-
-const generateProps = ({
-  category = defaultValue('category'),
-  variant = defaultValue('variant'),
-  size = defaultValue('size'),
-  withLink = false,
-  href = '#',
-  target = null,
-  block = false,
-  disabled = defaultValue('disabled'),
-  loading = defaultValue('loading'),
-  selected = defaultValue('selected'),
-} = {}) => ({
-  category,
-  variant,
-  size,
-  block,
-  disabled,
-  loading,
-  selected,
-  ...(withLink && {
-    href,
-    target,
-  }),
-});
-
-const wrapDropdownButton = (template) => `<div class="gl-h-11">${template}</div>`;
-
-export const Default = (args, { argTypes = {} }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-button
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-        :loading="loading"
-        :selected="selected"
-      >
-        This is a button
-      </gl-button>
-    `,
-});
-Default.args = generateProps();
-
-export const BlockButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-      <gl-button
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-        :loading="loading"
-        :selected="selected"
-      >
-        This is a block button
-      </gl-button>
-    `,
-});
-BlockButton.args = generateProps({ block: true });
-
-export const IconButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-      <div>
-        <gl-button
-          :category="category"
-          :variant="variant"
-          :size="size"
-          :block="block"
-          :disabled="disabled"
-          :loading="loading"
-          :selected="selected"
-          icon="star-o"
-          aria-label="Star icon button"
-        />
-        <div class="gl-mt-3">
-          <gl-button icon="star-o" aria-label="Star icon button" />
-          <gl-button size="small" icon="star-o" aria-label="Star icon small button" />
-        </div>
-        <div class="gl-mt-3">
-          <gl-button icon="star-o">Icon text</gl-button>
-          <gl-button size="small" icon="star-o">Icon text</gl-button>
-        </div>
-      </div>
-    `,
-});
-IconButton.args = generateProps({
-  category: buttonCategoryOptions.primary,
-  variant: buttonVariantOptions.danger,
-});
-
-export const DropdownButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: wrapDropdownButton(`
-      <gl-dropdown
-        text="Some dropdown"
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-      >
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `),
-});
-DropdownButton.args = generateProps();
-
-export const DropdownIconButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: wrapDropdownButton(`
-      <gl-dropdown
-        icon="download"
-        text="Download"
-        :text-sr-only="true"
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-      >
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `),
-});
-DropdownIconButton.args = generateProps();
-
-export const DropdownIconTextButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: wrapDropdownButton(`
-      <gl-dropdown
-        icon="notifications"
-        text="Notifications"
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-      >
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `),
-});
-DropdownIconTextButton.args = generateProps();
-
-export const DropdownIconOnlyButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: wrapDropdownButton(`
-      <gl-dropdown
-        icon="ellipsis_v"
-        text="More actions"
-        :text-sr-only="true"
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-        no-caret
-      >
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `),
-});
-DropdownIconOnlyButton.args = generateProps({
-  category: buttonCategoryOptions.tertiary,
-});
-
-export const DropdownSplitButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: wrapDropdownButton(`
-      <gl-dropdown
-        split
-        text="Some dropdown"
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-      >
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `),
-});
-DropdownSplitButton.args = generateProps({ category: 'primary', variant: 'confirm' });
-
-export const DropdownIconSplitButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: wrapDropdownButton(`
-      <gl-dropdown
-        split
-        icon="download"
-        text="Some dropdown"
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-      >
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `),
-});
-DropdownIconSplitButton.args = generateProps({ category: 'secondary', variant: 'danger' });
-
-export const DropdownLoadingButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlDropdown, GlDropdownItem },
-  template: `
-      <gl-dropdown text="Some dropdown" :category="category" :loading="true">
-        <gl-dropdown-item>Dropdown item</gl-dropdown-item>
-      </gl-dropdown>
-    `,
-});
-DropdownLoadingButton.args = generateProps({ category: 'secondary' });
-
-export const LoadingButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-      <gl-button
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-        :loading="loading"
-        :selected="selected"
-      >
-        Loading button
-      </gl-button>
-    `,
-});
-LoadingButton.args = generateProps({ loading: true });
-
-export const LinkButton = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-      <gl-button
-        :category="category"
-        :variant="variant"
-        :size="size"
-        :block="block"
-        :disabled="disabled"
-        :loading="loading"
-        :selected="selected"
-        :href="href"
-        :target="target"
-      >
-        This is a link button
-      </gl-button>
-    `,
-});
-LinkButton.args = generateProps({ withLink: true });
-
-export const IconButtonWithOverflowedText = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-        <gl-button
-          :category="category"
-          :variant="variant"
-          :size="size"
-          :block="block"
-          :disabled="disabled"
-          :loading="loading"
-          :selected="selected"
-          icon="star-o"
-          style="width: 130px;"
-        >
-            Apply suggestion
-        </gl-button>
-    `,
-});
-IconButtonWithOverflowedText.args = generateProps();
-
-export const BorderlessTertiary = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-      <div class="gl-display-inline-flex">
-        <gl-button
-          :category="category"
-          :size="size"
-          :block="block"
-          :disabled="disabled"
-          :loading="loading"
-          :selected="selected"
-        >
-            Default borderless
-        </gl-button>
-        <gl-button
-          variant="confirm"
-          :category="category"
-          :size="size"
-          :block="block"
-          :disabled="disabled"
-          :loading="loading"
-          :selected="selected"
-        >
-            Primary borderless
-        </gl-button>
-      </div>
-    `,
-});
-BorderlessTertiary.args = generateProps({ category: 'tertiary' });
-
-export const LabelButton = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components: { GlButton, GlButtonGroup },
-  template: `
-      <div>
-        <gl-button label>Label</gl-button>
-        <gl-button size="small" label>Label</gl-button>
-        <gl-button-group>
-          <gl-button id="commit-sha-label" class="gl-font-monospace" label>
-            b29cc44d
-          </gl-button>
-          <gl-button
-            aria-describedby="commit-sha-label"
-            icon="duplicate"
-            aria-label="Copy commit SHA" />
-          <gl-button icon="folder-open" aria-label="Open file" />
-        </gl-button-group>
-      </div>
-    `,
-});
-LabelButton.parameters = { controls: { disable: true } };
-
-export const AllVariantsAndCategories = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components,
-  variants: Object.keys(buttonVariantOptions).filter(
-    (variant) => !buttonVariantOptions[variant].includes('deprecated')
-  ),
-  categories: buttonCategoryOptions,
-  style: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 150px)',
-    rowGap: '8px',
-    textAlign: 'center',
-  },
-  template: `
-      <div :style="$options.style">
-        <template v-for="variant in $options.variants">
-          <div v-for="category in $options.categories" :key="variant + category">
-            <gl-button :key="category" :category="category" :variant="variant">
-              {{ category }} {{ variant }}
-            </gl-button>
-          </div>
-        </template>
-      </div>
-    `,
-});
-AllVariantsAndCategories.parameters = { controls: { disable: true } };
-
-export const Emojis = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-      <div>
-        <gl-button selected>
-          <template #emoji>
-            <gl-emoji title="thumbs up sign" data-name="thumbsup" data-unicode-version="6.0"
-              >👍</gl-emoji
-            >
-          </template>
-          1
-        </gl-button>
-        <gl-button>
-          <template #emoji>
-            <gl-emoji title="thumbs down sign" data-name="thumbsdown" data-unicode-version="6.0"
-              >👎</gl-emoji
-            >
-          </template>
-          0
-        </gl-button>
-        <gl-button selected size="small">
-          <template #emoji>
-            <gl-emoji title="thumbs up sign" data-name="thumbsup" data-unicode-version="6.0"
-              >👍</gl-emoji
-            >
-          </template>
-          1
-        </gl-button>
-        <gl-button size="small">
-          <template #emoji>
-            <gl-emoji title="thumbs down sign" data-name="thumbsdown" data-unicode-version="6.0"
-              >👎</gl-emoji
-            >
-          </template>
-          0
-        </gl-button>
-      </div>
-    `,
-});
-Emojis.parameters = { controls: { disable: true } };
-
-export const Ellipsis = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-    <gl-button icon="ellipsis_h" aria-label="Ellipsis button" />
-  `,
-});
-Ellipsis.parameters = { controls: { disable: true } };
-
-export const Sizes = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: `
-    <div>
-      <gl-button size="small">Small button</gl-button>
-      <gl-button>Default button</gl-button>
-      <div class="mt-2">
-        <gl-button size="small" block>Full width small button</gl-button>
-      </div>
-      <div class="mt-2">
-        <gl-button block>Full width button</gl-button>
-      </div>
-    </div>
-  `,
-});
-Sizes.parameters = { controls: { disable: true } };
-
-export const Badges = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components: { GlButton, GlBadge },
-  variants: Object.keys(badgeForButtonOptions),
-  categories: buttonCategoryOptions,
-  style: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 200px)',
-    rowGap: '8px',
-    textAlign: 'center',
-  },
-  methods: {
-    getBadgeVariant(variant) {
-      return badgeForButtonOptions[variant];
-    },
-  },
-  template: `
-      <div :style="$options.style">
-          <template v-for="variant in $options.variants">
-              <div v-for="category in $options.categories" :key="variant + category">
-                  <gl-button :key="category" :category="category" :variant="variant" buttonTextClasses="gl-display-flex gl-align-items-center">
-                      {{ category }} {{ variant }}
-                      <gl-badge size="sm" :variant="getBadgeVariant(variant)" class="gl-ml-2">00</gl-badge>
-                  </gl-button>
-              </div>
-          </template>
-      </div>
-  `,
-});
-Badges.parameters = { controls: { disable: true } };
-
-export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
-  props: Object.keys(argTypes),
-  components: { GlButton, GlBadge },
-  template: `
-      <gl-button variant="confirm" buttonTextClasses="gl-display-flex gl-align-items-center">
-          Submit review
-          <gl-badge size="sm" variant="info" class="gl-ml-2">2</gl-badge>
-          <span class="sr-only">pending comments</span>
-      </gl-button>
-  `,
-});
-BadgeWithSROnlyText.parameters = { controls: { disable: true } };
-
-export default {
-  title: 'base/button',
-  component: GlButton,
-  parameters: {
-    bootstrapComponent: 'b-button',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    category: {
-      options: Object.keys(buttonCategoryOptions),
-      control: 'select',
-    },
-    variant: {
-      options: Object.keys(buttonVariantOptions),
-      control: 'select',
-    },
-    size: {
-      options: Object.keys(buttonSizeOptions),
-      control: 'select',
-    },
-    target: {
-      options: targetOptions,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,132 +0,0 @@
-import GlButton from '../button/button.vue';
-import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
-import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
-import {
-  buttonCategoryOptions,
-  buttonSizeOptions,
-  buttonVariantOptions,
-} from '../../../utils/constants';
-import GlButtonGroup from './button_group.vue';
-import readme from './button_group.md';
-
-const defaultValue = (prop) => GlButton.props[prop].default;
-
-const generateProps = ({
-  vertical = false,
-  category = buttonCategoryOptions.primary,
-  size = defaultValue('size'),
-  variant = 'default',
-} = {}) => ({
-  vertical,
-  category,
-  size,
-  variant,
-});
-
-const template = `
-  <gl-button-group :vertical="vertical">
-    <gl-button :category="category" :size="size" :variant="variant">Button 1</gl-button>
-    <gl-button :category="category" :size="size" :variant="variant">Button 2</gl-button>
-    <gl-button :category="category" :size="size" :variant="variant">Button 3</gl-button>
-  </gl-button-group>`;
-
-const Template = (args, { argTypes }) => ({
-  components: { GlButton, GlButtonGroup },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const SplitDropdowns = (args, { argTypes }) => ({
-  components: { GlButton, GlButtonGroup, GlCollapsibleListbox, GlDisclosureDropdown },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      firstListboxValue: 1,
-      secondListboxValue: 1,
-      items: [
-        { text: 'One', value: 1 },
-        { text: 'Two', value: 2 },
-      ],
-    };
-  },
-  template: `
-    <div class="gl-display-flex gl-flex-direction-column gl-gap-6 gl-align-items-flex-start">
-      <gl-button-group>
-        <gl-button
-          :disabled="disabled"
-          :category="category"
-          :size="size"
-          :variant="variant"
-        >Split disclosure</gl-button>
-
-        <gl-disclosure-dropdown
-          :disabled="disabled"
-          :items="items"
-          toggle-text="Other actions"
-          text-sr-only
-          :category="category"
-          :size="size"
-          :variant="variant"
-        />
-      </gl-button-group>
-
-      <gl-button-group>
-        <gl-button
-          :disabled="disabled"
-          :category="category"
-          :size="size"
-          :variant="variant"
-        >Split listbox</gl-button>
-
-        <gl-collapsible-listbox
-          v-model="secondListboxValue"
-          :disabled="disabled"
-          :items="items"
-          toggle-text="Choose button action"
-          text-sr-only
-          :category="category"
-          :size="size"
-          :variant="variant"
-        />
-      </gl-button-group>
-    </div>
-  `,
-});
-Object.assign(SplitDropdowns, {
-  args: { ...generateProps({ variant: 'confirm' }), disabled: false },
-  parameters: {
-    controls: {
-      include: ['category', 'disabled', 'size', 'variant'],
-    },
-  },
-});
-
-export default {
-  title: 'base/button group',
-  component: GlButtonGroup,
-  parameters: {
-    bootstrapComponent: 'b-button-group',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    category: {
-      options: Object.keys(buttonCategoryOptions),
-      control: 'select',
-    },
-    size: {
-      options: Object.keys(buttonSizeOptions),
-      control: 'select',
-    },
-    variant: {
-      options: Object.keys(buttonVariantOptions),
-      control: 'select',
-    },
-  },
-};