@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,229 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { alertVariantOptions, buttonCategoryOptions } from '../../../utils/constants';
-import GlAlert from './alert.vue';
-
-const DummyComponent = {
-  template: '<p>dummy</p>',
-};
-
-const primaryButtonText = 'foo';
-const primaryButtonLink = '#foo';
-const secondaryButtonText = 'bar';
-const secondaryButtonLink = '#bar';
-
-describe('Alert component', () => {
-  let wrapper;
-
-  const createComponent = (options) => {
-    wrapper = shallowMount(GlAlert, {
-      ...options,
-    });
-  };
-
-  const findIcon = () => wrapper.find('.gl-alert-icon');
-  const findDismissButton = () => wrapper.findComponent({ ref: 'dismiss' });
-  const findTitle = () => wrapper.find('.gl-alert-title');
-  const findBodyContainer = () => wrapper.find('.gl-alert-body');
-  const findActionsContainer = () => wrapper.find('.gl-alert-actions');
-  const findActionButtons = () => wrapper.findAll('.gl-alert-action');
-
-  describe('by default', () => {
-    beforeEach(() => {
-      createComponent({ slots: { default: DummyComponent } });
-    });
-
-    it('renders a variant icon', () => {
-      expect(findIcon().exists()).toBe(true);
-    });
-
-    it('renders a dismiss button', () => {
-      expect(findDismissButton().exists()).toBe(true);
-    });
-
-    it('clicking on dismiss button emits a dismiss event', () => {
-      findDismissButton().vm.$emit('click');
-
-      expect(wrapper.emitted('dismiss')).toHaveLength(1);
-    });
-
-    it('does not render a title', () => {
-      expect(findTitle().exists()).toBe(false);
-    });
-
-    it('does not render any actions', () => {
-      expect(findActionsContainer().exists()).toBe(false);
-    });
-
-    it('renders default slot content', () => {
-      expect(findBodyContainer().findComponent(DummyComponent).exists()).toBe(true);
-    });
-  });
-
-  it('does not render a variant icon when showIcon = false', () => {
-    createComponent({ propsData: { showIcon: false } });
-
-    expect(findIcon().exists()).toBe(false);
-  });
-
-  it('does not render a dismiss button when dismissible = false', () => {
-    createComponent({ propsData: { dismissible: false } });
-
-    expect(findDismissButton().exists()).toBe(false);
-  });
-
-  it('renders the provided title with heading level 2', () => {
-    const title = 'foo';
-    createComponent({ propsData: { title } });
-
-    const titleWrapper = findTitle();
-    expect(titleWrapper.exists()).toBe(true);
-    expect(titleWrapper.text()).toContain(title);
-    // the title needs to be in a level 2 heading for accessibility reasons
-    expect(titleWrapper.element.tagName).toEqual('H2');
-  });
-
-  describe('given primaryButtonText', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { primaryButtonText } });
-    });
-
-    it('renders a primary button', () => {
-      expect(findActionsContainer().exists()).toBe(true);
-
-      const buttons = findActionButtons();
-      expect(buttons).toHaveLength(1);
-
-      const button = buttons.at(0);
-      expect(button.text()).toContain(primaryButtonText);
-
-      const props = button.props();
-      expect('href' in props).toBe(false);
-      expect(props.category).toEqual(buttonCategoryOptions.primary);
-    });
-
-    it('emits a primaryAction event when primary button is clicked', () => {
-      findActionButtons().at(0).vm.$emit('click');
-
-      expect(wrapper.emitted('primaryAction')).toHaveLength(1);
-    });
-  });
-
-  describe('given primaryButtonText and primaryButtonLink', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { primaryButtonText, primaryButtonLink } });
-    });
-
-    it('renders a primary button with an href given primaryButtonLink', () => {
-      const button = findActionButtons().at(0);
-      expect(button.attributes('href')).toEqual(primaryButtonLink);
-    });
-  });
-
-  describe('given secondaryButtonText', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { secondaryButtonText } });
-    });
-
-    it('renders a secondary button', () => {
-      expect(findActionsContainer().exists()).toBe(true);
-
-      const buttons = findActionButtons();
-      expect(buttons).toHaveLength(1);
-
-      const button = buttons.at(0);
-      expect(button.text()).toContain(secondaryButtonText);
-
-      const props = button.props();
-      expect('href' in props).toBe(false);
-      expect(props.category).toEqual(buttonCategoryOptions.secondary);
-    });
-
-    it('emits a secondaryAction event when secondary button is clicked', () => {
-      findActionButtons().at(0).vm.$emit('click');
-
-      expect(wrapper.emitted('secondaryAction')).toHaveLength(1);
-    });
-  });
-
-  describe('given secondaryButtonText and secondaryButtonLink', () => {
-    beforeEach(() => {
-      createComponent({ propsData: { secondaryButtonText, secondaryButtonLink } });
-    });
-
-    it('renders a secondary button with an href given secondaryButtonLink', () => {
-      const button = findActionButtons().at(0);
-      expect(button.attributes('href')).toEqual(secondaryButtonLink);
-    });
-  });
-
-  it('renders actions slot content', () => {
-    createComponent({ slots: { actions: DummyComponent } });
-
-    const actionsContainer = findActionsContainer();
-    expect(actionsContainer.exists()).toBe(true);
-    expect(actionsContainer.findComponent(DummyComponent).exists()).toBe(true);
-  });
-
-  describe('top-level classes', () => {
-    describe.each`
-      prop             | cssClass                      | presentIf
-      ${'sticky'}      | ${'gl-alert-sticky'}          | ${true}
-      ${'dismissible'} | ${'gl-alert-not-dismissible'} | ${false}
-    `('$cssClass', ({ prop, cssClass, presentIf }) => {
-      it(`adds class ${cssClass} when ${prop} is ${presentIf}`, () => {
-        createComponent({
-          propsData: {
-            [prop]: presentIf,
-          },
-        });
-
-        expect(wrapper.classes()).toContain(cssClass);
-      });
-
-      it(`does not add class ${cssClass} when ${prop} is ${!presentIf}`, () => {
-        createComponent({
-          propsData: {
-            [prop]: !presentIf,
-          },
-        });
-
-        expect(wrapper.classes()).not.toContain(cssClass);
-      });
-    });
-
-    it('adds the `gl-alert-has-title` class if there is a title', () => {
-      createComponent({
-        propsData: {
-          title: 'title',
-        },
-      });
-
-      expect(wrapper.classes()).toContain('gl-alert-has-title');
-    });
-
-    it('does not add the `gl-alert-has-title` class if there is no title', () => {
-      createComponent();
-
-      expect(wrapper.classes()).not.toContain('gl-alert-has-title');
-    });
-  });
-
-  describe('role and aria-live', () => {
-    it.each`
-      variant                        | role        | assertiveness
-      ${alertVariantOptions.danger}  | ${'alert'}  | ${'assertive'}
-      ${alertVariantOptions.warning} | ${'alert'}  | ${'assertive'}
-      ${alertVariantOptions.info}    | ${'status'} | ${'polite'}
-      ${alertVariantOptions.success} | ${'alert'}  | ${'polite'}
-      ${alertVariantOptions.tip}     | ${'status'} | ${'polite'}
-    `(
-      '$variant variant has role "$role" and aria-live "$assertiveness"',
-      ({ variant, role, assertiveness }) => {
-        createComponent({ propsData: { variant } });
-
-        expect(wrapper.find(`[role="${role}"`).exists()).toBe(true);
-        expect(wrapper.find(`[aria-live="${assertiveness}"`).exists()).toBe(true);
-      }
-    );
-  });
-});

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