@gitlab/ui 80.13.0 → 80.13.2

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

@@ -1,139 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlCard from './card.vue';
-
-describe('GlCard', () => {
-  let wrapper;
-
-  const HEADER_TEXT = 'In legal trouble?';
-  const BODY_TEXT = 'Better call Saul!';
-  const FOOTER_TEXT = '(505) 503-4455';
-
-  const HEADER_CLASS = '.bg-red .text-white';
-  const BODY_CLASS = '.bg-yellow .font-script';
-  const FOOTER_CLASS = '.bg-yellow .text-white';
-
-  const createWrapper = (options = {}) => {
-    wrapper = shallowMount(GlCard, options);
-  };
-
-  const findBody = () => wrapper.find('.gl-card-body');
-  const findHeader = () => wrapper.find('.gl-card-header');
-  const findFooter = () => wrapper.find('.gl-card-footer');
-
-  describe('with just the body content', () => {
-    beforeEach(() => {
-      createWrapper({
-        propsData: {
-          bodyClass: BODY_CLASS,
-        },
-        slots: {
-          default: BODY_TEXT,
-        },
-      });
-    });
-
-    it('should render the body content', () => {
-      expect(findBody().exists()).toBe(true);
-      expect(findBody().text()).toEqual(BODY_TEXT);
-    });
-
-    it('should add the body class', () => {
-      expect(findBody().classes()).toContain(...BODY_CLASS.split(' '));
-    });
-
-    it('should not render the header content', () => {
-      expect(findHeader().exists()).toBe(false);
-    });
-
-    it('should not render the footer content', () => {
-      expect(findFooter().exists()).toBe(false);
-    });
-  });
-
-  describe('with additional header content', () => {
-    beforeEach(() => {
-      createWrapper({
-        propsData: {
-          headerClass: HEADER_CLASS,
-        },
-        slots: {
-          default: BODY_TEXT,
-          header: HEADER_TEXT,
-        },
-      });
-    });
-
-    it('should render the body content', () => {
-      expect(findBody().exists()).toBe(true);
-      expect(findBody().text()).toEqual(BODY_TEXT);
-    });
-
-    it('should render the header content', () => {
-      expect(findHeader().exists()).toBe(true);
-      expect(findHeader().text()).toEqual(HEADER_TEXT);
-    });
-
-    it('should add the header class', () => {
-      expect(findHeader().classes()).toContain(...HEADER_CLASS.split(' '));
-    });
-
-    it('should not render the footer content', () => {
-      expect(findFooter().exists()).toBe(false);
-    });
-  });
-
-  describe('with additional footer content', () => {
-    beforeEach(() => {
-      createWrapper({
-        propsData: {
-          footerClass: FOOTER_CLASS,
-        },
-        slots: {
-          default: BODY_TEXT,
-          footer: FOOTER_TEXT,
-        },
-      });
-    });
-
-    it('should render the body content', () => {
-      expect(findBody().exists()).toBe(true);
-      expect(findBody().text()).toEqual(BODY_TEXT);
-    });
-
-    it('should not render the header content', () => {
-      expect(findHeader().exists()).toBe(false);
-    });
-
-    it('should render the footer content', () => {
-      expect(findFooter().exists()).toBe(true);
-      expect(findFooter().text()).toEqual(FOOTER_TEXT);
-    });
-
-    it('should add the footer class', () => {
-      expect(findFooter().classes()).toContain(...FOOTER_CLASS.split(' '));
-    });
-  });
-
-  it.each`
-    prop             | value                                                    | finder        | expected
-    ${'bodyClass'}   | ${{ 'applied-class': true, 'non-applied-class': false }} | ${findBody}   | ${['gl-card-body', 'applied-class']}
-    ${'bodyClass'}   | ${['applied-class']}                                     | ${findBody}   | ${['gl-card-body', 'applied-class']}
-    ${'headerClass'} | ${{ 'applied-class': true, 'non-applied-class': false }} | ${findHeader} | ${['gl-card-header', 'applied-class']}
-    ${'headerClass'} | ${['applied-class']}                                     | ${findHeader} | ${['gl-card-header', 'applied-class']}
-    ${'footerClass'} | ${{ 'applied-class': true, 'non-applied-class': false }} | ${findFooter} | ${['gl-card-footer', 'applied-class']}
-    ${'footerClass'} | ${['applied-class']}                                     | ${findFooter} | ${['gl-card-footer', 'applied-class']}
-  `('properly sets classes when $prop is $value', ({ prop, value, finder, expected }) => {
-    createWrapper({
-      propsData: {
-        [prop]: value,
-      },
-      slots: {
-        default: BODY_TEXT,
-        header: HEADER_TEXT,
-        footer: FOOTER_TEXT,
-      },
-    });
-
-    expect(finder().classes()).toEqual(expected);
-  });
-});

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

@@ -1,48 +0,0 @@
-import readme from './card.md';
-import GlCard from './card.vue';
-
-const generateProps = ({ headerClass, bodyClass, footerClass } = {}) => ({
-  headerClass,
-  bodyClass,
-  footerClass,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlCard },
-  props: Object.keys(argTypes),
-  template: `
-      <gl-card :header-class="headerClass" :body-class="bodyClass" :footer-class="footerClass">
-        <template #header>
-          <h3 class="gl-my-0 gl-font-weight-bold gl-font-lg">This is a custom header</h3>
-        </template>
-        <template #default>
-          Hello World
-        </template>
-        <template #footer>
-          <span>This is a custom footer</span>
-        </template>
-      </gl-card>`,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/card',
-  component: GlCard,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    headerClass: { control: 'text' },
-    bodyClass: { control: 'text' },
-    footerClass: { control: 'text' },
-    header: { control: { disable: true } },
-    default: { control: { disable: true } },
-    footer: { control: { disable: true } },
-  },
-};

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

@@ -1,24 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BCarousel } from 'bootstrap-vue';
-import Carousel from './carousel.vue';
-
-describe('Carousel component', () => {
-  const collapseId = 'collapse-id';
-  let wrapper;
-
-  const createWrapper = (propsData) => {
-    wrapper = shallowMount(Carousel, { propsData });
-  };
-
-  describe('default', () => {
-    beforeEach(() => {
-      createWrapper({
-        id: collapseId,
-      });
-    });
-
-    it('renders a BCarousel component', () => {
-      expect(wrapper.findComponent(BCarousel).exists()).toBe(true);
-    });
-  });
-});

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

@@ -1,51 +0,0 @@
-import readme from './carousel.md';
-import GlCarousel from './carousel.vue';
-import GlCarouselSlide from './carousel_slide.vue';
-
-const template = `
-    <gl-carousel
-      :interval="0"
-      controls
-      indicators
-      background="#ababab"
-      img-width="1024"
-      img-height="480"
-      style="text-shadow: 1px 1px 2px #333;"
-    >
-      <!-- Text slides with image -->
-      <gl-carousel-slide
-        caption="First slide"
-        text="Nulla vitae elit libero, a pharetra augue mollis interdum."
-        img-src="./img/carousel_slide1.jpg"
-      />
-
-      <!-- Slides with custom text -->
-      <gl-carousel-slide img-src="./img/carousel_slide2.jpg">
-        <h1>Hello world!</h1>
-      </gl-carousel-slide>
-
-      <!-- Slides with image only -->
-      <gl-carousel-slide img-src="./img/carousel_slide3.jpg"/>
-    </gl-carousel> 
-  `;
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { GlCarousel, GlCarouselSlide },
-  template,
-});
-
-export const Default = Template.bind({});
-
-export default {
-  title: 'base/carousel',
-  component: GlCarousel,
-  parameters: {
-    bootstrapComponent: 'b-carousel',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,24 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { BCollapse } from 'bootstrap-vue';
-import Collapse from './collapse.vue';
-
-describe('Collapse component', () => {
-  const collapseId = 'collapse-id';
-  let wrapper;
-
-  const createWrapper = (propsData) => {
-    wrapper = shallowMount(Collapse, { propsData });
-  };
-
-  describe('default', () => {
-    beforeEach(() => {
-      createWrapper({
-        id: collapseId,
-      });
-    });
-
-    it('renders a BCollapse', () => {
-      expect(wrapper.findComponent(BCollapse).exists()).toBe(true);
-    });
-  });
-});

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

@@ -1,42 +0,0 @@
-import GlButton from '../button/button.vue';
-import GlCard from '../card/card.vue';
-import GlCollapse from './collapse.vue';
-import readme from './collapse.md';
-
-const generateProps = ({ visible = false } = {}) => ({ visible });
-
-const template = `
-  <div>
-    <h1>Here's a headline</h1>
-    <gl-button v-gl-collapse-toggle.collapse class="float-right" category="primary">
-      Toggle Collapse
-    </gl-button>
-    <gl-collapse :visible="visible" id="collapse" class="gl-mt-2">
-      <span>
-        This content can be hidden by default, which is good if there are some extensive details 
-        that should only be visible if the user wants to interact with them
-      </span>
-    </gl-collapse>
-  </div>`;
-
-const Template = (args, { argTypes }) => ({
-  components: { GlButton, GlCard, GlCollapse },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'base/collapse',
-  component: GlCollapse,
-  parameters: {
-    bootstrapComponent: 'b-collapse',
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};