@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,166 +0,0 @@
-import GlToggle from '../toggle/toggle.vue';
-import { alertVariantOptions } from '../../../utils/constants';
-import GlAlert from './alert.vue';
-import readme from './alert.md';
-
-const template = `
-  <gl-alert
-    :title="title"
-    :dismissible="dismissible"
-    :show-icon="showIcon"
-    :dismiss-label="dismissLabel"
-    :variant="variant"
-    :primary-button-text="primaryButtonText"
-    :secondary-button-text="secondaryButtonText"
-    :primary-button-link="primaryButtonLink"
-    :secondary-button-link="secondaryButtonLink"
-    :sticky="sticky"
-  >{{ message }}</gl-alert>`;
-
-const defaultValue = (prop) => GlAlert.props[prop].default;
-
-const generateProps = ({
-  title = defaultValue('title'),
-  variant = defaultValue('variant'),
-  dismissible = defaultValue('dismissible'),
-  showIcon = defaultValue('showIcon'),
-  dismissLabel = defaultValue('dismissLabel'),
-  primaryButtonText = defaultValue('primaryButtonText'),
-  primaryButtonLink = defaultValue('primaryButtonLink'),
-  secondaryButtonText = defaultValue('secondaryButtonText'),
-  secondaryButtonLink = defaultValue('secondaryButtonLink'),
-  sticky = defaultValue('sticky'),
-} = {}) => ({
-  title,
-  message: 'Lorem ipsum dolor sit amet',
-  variant,
-  dismissible,
-  showIcon,
-  dismissLabel,
-  primaryButtonText,
-  primaryButtonLink,
-  secondaryButtonText,
-  secondaryButtonLink,
-  sticky,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlAlert },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const TitledWarning = Template.bind({});
-TitledWarning.args = generateProps({
-  title: 'A warning',
-  variant: alertVariantOptions.warning,
-});
-
-export const UndismissibleDangerWithActions = Template.bind({});
-UndismissibleDangerWithActions.args = generateProps({
-  variant: alertVariantOptions.danger,
-  dismissible: false,
-  primaryButtonText: 'Primary action',
-  secondaryButtonText: 'Secondary action',
-  secondaryButtonLink: '#',
-});
-
-export const CustomActions = () => ({
-  components: { GlAlert, GlToggle },
-  data: () => ({
-    toggle: false,
-  }),
-  template: `
-    <gl-alert>
-      Lorem ipsum dolor sit amet
-      <template #actions>
-        <gl-toggle v-model="toggle" label="label-name" label-position="hidden" />
-      </template>
-    </gl-alert>`,
-});
-CustomActions.tags = ['skip-visual-test'];
-
-export const TextLinks = () => ({
-  components: { GlAlert },
-  template: `
-    <gl-alert>
-      Lorem ipsum dolor sit <a class="gl-link" href="#">text link</a> amet
-    </gl-alert>`,
-});
-TextLinks.tags = ['skip-visual-test'];
-
-export const NoIcon = () => ({
-  components: { GlAlert },
-  template: `
-    <gl-alert :show-icon="false">
-      Lorem ipsum dolor sit amet
-    </gl-alert>`,
-});
-NoIcon.tags = ['skip-visual-test'];
-
-export const Variants = () => ({
-  components: { GlAlert },
-  variants: alertVariantOptions,
-  template: `
-  <div>
-    <gl-alert
-      v-for="variant in $options.variants"
-      :key="variant"
-      :variant="variant"
-      title="Alert title"
-      primary-button-text="Primary"
-      secondary-button-text="Secondary"
-      class="mb-2"
-    >
-      <span class="text-capitalize">{{ variant }}</span> lorem ipsum dolor sit
-      <gl-link href="#">text link</gl-link> amet
-    </gl-alert>
-  </div>`,
-});
-Variants.tags = ['skip-visual-test'];
-
-export const Sticky = () => ({
-  components: { GlAlert },
-  variants: alertVariantOptions,
-  data: () => generateProps({ sticky: true }),
-  template: `
-  <div style="max-height: 200px; overflow-y: auto;">
-    ${template}
-    <div style="height: 200px;" class="gl-bg-red-100 gl-my-3"><p>Scrolling content…</p></div>
-    <div style="height: 200px;" class="gl-bg-green-100 gl-my-3"><p>Scrolling content…</p></div>
-    <div style="height: 200px;" class="gl-bg-blue-100 gl-my-3"><p>Scrolling content…</p></div>
-  </div>`,
-});
-
-export const IncreasedSpacing = (args, { argTypes }) => ({
-  components: { GlAlert },
-  props: Object.keys(argTypes),
-  template: `
-    <div style="--gl-alert-padding-x: 0.5rem;">
-      <gl-alert>
-        Lorem ipsum dolor sit <a class="gl-link" href="#">text link</a> amet
-      </gl-alert>
-    </div>`,
-});
-IncreasedSpacing.args = generateProps();
-
-export default {
-  title: 'base/alert',
-  component: GlAlert,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      options: alertVariantOptions,
-      control: 'select',
-    },
-  },
-};

package/src/components/base/avatar/avatar.spec.js

@@ -1,91 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { avatarSizeOptions } from '../../../utils/constants';
-import GlAvatar from './avatar.vue';
-
-describe('GlAvatar', () => {
-  let wrapper;
-
-  const createWrapper = (props) => {
-    wrapper = shallowMount(GlAvatar, {
-      propsData: props,
-    });
-  };
-
-  describe('size property', () => {
-    it('uses default size if none is provided', () => {
-      createWrapper();
-
-      expect(wrapper.props('size')).toBe(avatarSizeOptions[1]);
-    });
-
-    describe('when number is passed', () => {
-      it.each([96, 64, 48, 32, 24, 16])('accepts size %s', (size) => {
-        createWrapper({ size });
-
-        expect(wrapper.props('size')).toBe(size);
-      });
-
-      it.each([12, 28, 36, 54, 98])('displays an error for size %s', (size) => {
-        createWrapper({ size });
-
-        expect(wrapper).toHaveLoggedVueErrors();
-      });
-
-      it('adds correct CSS class to avatar', () => {
-        createWrapper({ size: 16 });
-
-        expect(wrapper.classes()).toContain('gl-avatar-s16');
-      });
-    });
-
-    describe('when object is passed', () => {
-      it('displays error if any of the sizes are invalid', () => {
-        createWrapper({ size: { default: 16, md: 32, lg: 65 } });
-
-        expect(wrapper).toHaveLoggedVueErrors();
-      });
-
-      it('adds correct CSS classes to avatar', () => {
-        createWrapper({ size: { default: 16, md: 32, lg: 64 } });
-
-        expect(wrapper.classes()).toContain(
-          'gl-avatar-s16',
-          'gl-md-avatar-s32',
-          'gl-lg-avatar-s64'
-        );
-      });
-    });
-  });
-
-  describe('fallbackOnError property', () => {
-    const findImage = () => wrapper.find('img');
-
-    beforeEach(() => {
-      createWrapper({ fallbackOnError: true, src: 'someproject.jpg' });
-    });
-
-    it('shows fallback identicon when image fails to load', async () => {
-      await findImage().trigger('error');
-
-      expect(findImage().exists()).toBe(false);
-      expect(wrapper.find('.gl-avatar-identicon').exists()).toBe(true);
-    });
-
-    it('emits load-error event when image fails to load', async () => {
-      await findImage().trigger('error');
-
-      expect(wrapper.emitted('load-error')).toHaveLength(1);
-    });
-
-    it('allows changing the source when initially provided image fails to load', async () => {
-      await findImage().trigger('error');
-
-      expect(findImage().exists()).toBe(false);
-
-      await wrapper.setProps({ src: 'foo.jpg' });
-
-      expect(findImage().exists()).toBe(true);
-      expect(wrapper.find('.gl-avatar-identicon').exists()).toBe(false);
-    });
-  });
-});

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

@@ -1,160 +0,0 @@
-import Vue from 'vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
-import GlAvatar from './avatar.vue';
-import readme from './avatar.md';
-
-Vue.directive('gl-tooltip', GlTooltipDirective);
-
-const components = { GlAvatar };
-
-const generateImageProps = ({ size = 64, shape = 'circle' } = {}) => ({
-  size,
-  shape,
-});
-
-const generateProjectFallbackProps = ({
-  size = 64,
-  entityId = 123,
-  entityName = 'Some Project',
-} = {}) => ({
-  entityId,
-  entityName,
-  size,
-});
-
-const generateEmojiProjectProps = ({
-  size = 64,
-  entityId = 123,
-  entityName = '🦊Tanuki',
-} = {}) => ({
-  entityId,
-  entityName,
-  size,
-});
-
-const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
-  tooltipText,
-  placement,
-});
-
-const template = `
-<gl-avatar
-  :entity-name="entityName"
-  :entity-id="entityId"
-  :size="size"
-  shape="rect" />
-`;
-
-export const Image = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar
-        :size="size"
-        :shape="shape"
-        src="./img/avatar_1.png"
-      />
-    `,
-});
-Image.args = generateImageProps();
-
-export const NonSquareImage = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar
-        :size="size"
-        shape="rect"
-        src="./img/avatar_non_square.jpg"
-      />
-    `,
-});
-NonSquareImage.args = generateImageProps();
-
-export const ResponsiveImage = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar
-        :size="size"
-        :shape="shape"
-        src="./img/avatar_1.png"
-      />
-    `,
-});
-ResponsiveImage.args = generateImageProps({ size: { default: 24, sm: 32, md: 48, lg: 96 } });
-ResponsiveImage.argTypes = {
-  size: { control: 'object' },
-};
-
-export const ProjectFallback = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template,
-});
-ProjectFallback.args = generateProjectFallbackProps();
-
-export const EmojiProjectName = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template,
-});
-EmojiProjectName.args = generateEmojiProjectProps();
-
-export const WithTooltip = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar
-        :size="size"
-        :shape="shape"
-        :title="tooltipText"
-        src="./img/avatar_1.png"
-        v-gl-tooltip="{ placement }"
-      />
-    `,
-});
-WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
-
-export const FallbackOnAvatarLoadFailure = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar
-        :entity-name="entityName"
-        :entity-id="entityId"
-        :size="size"
-        :fallback-on-error="true"
-        src="someproject.jpg"
-        alt="Some Project"
-      />
-    `,
-});
-FallbackOnAvatarLoadFailure.args = { ...generateProjectFallbackProps(), ...generateImageProps() };
-
-export default {
-  title: 'base/avatar',
-  component: GlAvatar,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      options: avatarSizeOptions,
-      control: 'select',
-    },
-    shape: {
-      options: avatarShapeOptions,
-      control: 'select',
-    },
-    placement: {
-      options: tooltipPlacements,
-      control: 'select',
-    },
-  },
-};

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

@@ -1,109 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import Avatar from '../avatar/avatar.vue';
-import GlLink from '../link/link.vue';
-import AvatarLabeled from './avatar_labeled.vue';
-
-describe('avatar labeled', () => {
-  let wrapper;
-
-  const label = 'avatar label';
-  const subLabel = 'avatar label';
-
-  const buildWrapper = (propsData, slots) => {
-    wrapper = shallowMount(AvatarLabeled, {
-      propsData: {
-        label: '',
-        ...propsData,
-      },
-      slots,
-    });
-  };
-
-  it('sets avatar alt attribute to an empty string', () => {
-    const altText = 'alt text';
-
-    buildWrapper({ alt: altText });
-
-    expect(wrapper.findComponent(Avatar).props('alt')).not.toEqual(altText);
-  });
-
-  it('displays the avatar label', () => {
-    buildWrapper({ label });
-
-    expect(wrapper.find('.gl-avatar-labeled-label').text()).toEqual(label);
-  });
-
-  it('displays the avatar sub label', () => {
-    buildWrapper({ subLabel });
-
-    expect(wrapper.find('.gl-avatar-labeled-sublabel').text()).toEqual(subLabel);
-  });
-
-  it('displays `meta` slot', () => {
-    buildWrapper(
-      { label, subLabel },
-      { meta: '<span data-testid="user-meta" class="gl-p-1">Foo Bar</span>' }
-    );
-
-    expect(wrapper.find('[data-testid="user-meta"]').exists()).toBe(true);
-  });
-
-  it('displays `default` slot', () => {
-    buildWrapper(
-      { label, subLabel },
-      { default: '<span data-testid="default-slot">Foo Bar</span>' }
-    );
-
-    expect(wrapper.find('[data-testid="default-slot"]').exists()).toBe(true);
-  });
-
-  describe('with labels as rows', () => {
-    it('adds the correct css classes', () => {
-      buildWrapper({ label, subLabel, inlineLabels: true });
-
-      expect(wrapper.find('.gl-avatar-labeled-labels').classes('inline-labels')).toBe(true);
-    });
-  });
-
-  describe('with label links', () => {
-    beforeEach(() => {
-      buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });
-    });
-
-    describe('with label link', () => {
-      const findLabelLink = () => wrapper.findAllComponents(GlLink).at(0);
-
-      it('displays the label link', () => {
-        const labelLink = findLabelLink();
-        expect(labelLink.text()).toBe(label);
-        expect(labelLink.attributes('href')).toBe('http://label');
-      });
-
-      it('navigates to label link when avatar is clicked', () => {
-        const labelLink = findLabelLink();
-        const labelLinkClickSpy = jest.spyOn(labelLink.element, 'click');
-
-        wrapper.findComponent(Avatar).vm.$emit('click');
-
-        expect(labelLinkClickSpy).toHaveBeenCalled();
-      });
-    });
-
-    it('displays the sub-label link', () => {
-      const subLabelLink = wrapper.findAllComponents(GlLink).at(1);
-      expect(subLabelLink.text()).toBe(subLabel);
-      expect(subLabelLink.attributes('href')).toBe('http://subLabel');
-    });
-  });
-
-  describe('without label links', () => {
-    beforeEach(() => {
-      buildWrapper({ label, subLabel });
-    });
-
-    it('does not display any link', () => {
-      expect(wrapper.findAllComponents(GlLink).exists()).toBe(false);
-    });
-  });
-});

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

@@ -1,187 +0,0 @@
-import Vue from 'vue';
-import GlBadge from '../badge/badge.vue';
-import GlButton from '../button/button.vue';
-import GlIcon from '../icon/icon.vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
-import avatarPath from '../../../../static/img/avatar.png';
-import GlAvatarLabeled from './avatar_labeled.vue';
-import readme from './avatar_labeled.md';
-
-Vue.directive('gl-tooltip', GlTooltipDirective);
-
-const components = { GlAvatarLabeled };
-
-const generateProps = ({
-  label = 'GitLab User',
-  subLabel = '@gitlab',
-  size = 32,
-  shape = 'circle',
-  src = avatarPath,
-  inlineLabels = false,
-  labelLink,
-} = {}) => ({
-  label,
-  subLabel,
-  size,
-  shape,
-  src,
-  inlineLabels,
-  labelLink,
-});
-
-const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
-  tooltipText,
-  placement,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-      />
-    `,
-});
-Default.args = generateProps();
-
-export const WithInlineLabels = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-        :inline-labels="inlineLabels"
-      />
-    `,
-});
-WithInlineLabels.args = generateProps({ inlineLabels: true });
-
-export const WithTooltip = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-        :title="tooltipText"
-        v-gl-tooltip="{ placement }"
-      />
-    `,
-});
-WithTooltip.args = { ...generateProps(), ...generateTooltipProps() };
-WithTooltip.argTypes = {
-  placement: {
-    options: tooltipPlacements,
-    control: 'select',
-  },
-};
-
-export const WithBadges = (args, { argTypes }) => ({
-  components: { GlAvatarLabeled, GlBadge },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-      >
-        <template #meta>
-          <div class="gl-p-1">
-            <gl-badge class="gl-display-flex!" size="sm" variant="info">2FA</gl-badge>
-          </div>
-          <div class="gl-p-1">
-            <gl-badge class="gl-display-flex!" size="sm" variant="danger">Blocked</gl-badge>
-          </div>
-        </template>
-      </gl-avatar-labeled>
-    `,
-});
-WithBadges.args = generateProps();
-
-export const WithDefaultSlot = (args, { argTypes }) => ({
-  components: { GlAvatarLabeled, GlButton },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :src="src"
-        :label="label"
-        :sub-label="subLabel"
-      >
-        <template>
-          <gl-button class="gl-mt-3 gl-align-self-start" size="small">Follow</gl-button>
-        </template>
-      </gl-avatar-labeled>
-    `,
-});
-WithDefaultSlot.args = generateProps({ size: 64 });
-
-export const WithLinks = (args, { argTypes }) => ({
-  components: { GlAvatarLabeled, GlBadge, GlIcon },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-avatar-labeled
-        :shape="shape"
-        :size="size"
-        :label-link="labelLink"
-        :src="src"
-        :label="label"
-      >
-        <template #meta>
-          <gl-icon
-            v-gl-tooltip="'Public - The project can be accessed without any authentication.'"
-            name="earth"
-            class="gl-text-secondary gl-ml-2"
-          />
-        </template>
-        <div class="gl-max-w-75">
-          <p class="gl-mb-0 gl-mt-2 gl-font-sm">GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider.</p>
-        </div>
-      </gl-avatar-labeled>
-    `,
-});
-WithLinks.args = generateProps({
-  size: 48,
-  shape: 'rect',
-  label: 'GitLab.org / GitLab',
-  subLabel: '',
-  labelLink: 'https://gitlab.com/gitlab-org/gitlab',
-});
-
-export default {
-  title: 'base/avatar/labeled',
-  component: GlAvatarLabeled,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      options: avatarSizeOptions,
-      control: 'select',
-    },
-    shape: {
-      options: avatarShapeOptions,
-      control: 'select',
-    },
-  },
-};