@gitlab/ui 80.13.1 → 80.14.0

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -1,162 +0,0 @@
-import GlIntersectionObserver from './intersection_observer.vue';
-import readme from './intersection_observer.md';
-
-const components = {
-  GlIntersectionObserver,
-};
-
-const commonData = () => ({
-  isInView: false,
-});
-
-const commonMethods = {
-  appear() {
-    this.isInView = true;
-  },
-  disappear() {
-    this.isInView = false;
-  },
-};
-
-const generateItems = (startingId = 0) => {
-  const items = Array.from(Array(20).keys());
-  return items.map((index) => {
-    const id = index + startingId + 1;
-
-    return {
-      id,
-      title: `Item ${id}`,
-    };
-  });
-};
-
-export const Default = () => ({
-  components,
-  data: commonData,
-  methods: commonMethods,
-  computed: {
-    visibility() {
-      return this.isInView ? 'The observer is in view' : 'The observer is not in view';
-    },
-  },
-  template: `
-    <div style="height: 200px; overflow-y: scroll;">
-      <h1>{{ visibility }}</h1>
-      <p>This one is a hard one to demonstrate as it's invisible by nature.</p>
-      <p>Underneath this block of text is an invisible component, <code>&lt;gl-observer /&gt;</code> that has the power to tell the vue app when it's visible, and when it's not.</p>
-      <p><strong>{{ visibility }}</strong>  at the moment but if you scroll and arrange your window just right, this can be changed and will be reflected in the title.</p>
-      <p :class="{'gl-text-green-600': isInView }">To make it even more clear, this line of text will be green when the element scrolls into view.</p>
-      <p>This line appears just before the observer.</p>
-      <gl-intersection-observer
-        @appear="appear"
-        @disappear="disappear"
-      />
-      <p>This line appears just after the observer.</p>
-    </div>
-  `,
-});
-
-export const BigTable = () => ({
-  components,
-  data() {
-    return {
-      values: Array(100)
-        .fill(1)
-        .map(() => Array(10).fill(0)),
-    };
-  },
-  methods: {
-    update(row, col, { intersectionRatio }) {
-      this.$set(this.values[row], col, intersectionRatio);
-    },
-    disappear(row, col) {
-      this.values[row][col] = 0;
-    },
-  },
-  template: `
-    <div style="height: 600px; overflow-y: scroll;">
-      <table>
-        <tr v-for="(cols, row) in values" :key="row">
-          <td v-for="(value, col) in cols" :key="row + '_' + col">
-            <gl-intersection-observer @update="update(row, col, $event)">
-              <span :style="{ display: 'inline-block', width: '50px' }">{{ value.toString().substr(0, 3) }}</span>
-            </gl-intersection-observer>
-          </td>
-        </tr>
-      </table>
-    </div>
-    `,
-});
-
-export const LazyLoadedImage = () => ({
-  components,
-  data: commonData,
-  methods: commonMethods,
-  computed: {
-    imageUrl() {
-      // If the image is in view, return the high res one. If not return nothing, or a low res one
-      return this.isInView
-        ? '../../img/gitlab-summit-south-africa.jpg'
-        : '../../img/gitlab-summit-south-africa-min.jpg';
-    },
-  },
-  template: `
-    <div>
-      <p>The image below will load a low-res version until it appears on the poage, then it will switch out for a higher res version.</p>
-      <p>It's also set up to switch back to the low res version when it disappears off the page. This is not what you would usually do for lazily loaded images, but it helps to demonstrate the effect in this example.</p>
-      <gl-intersection-observer
-        @appear="appear"
-        @disappear="disappear"
-      >
-        <img :src="imageUrl" style="max-width: 100%; height: auto;"/>
-      </gl-intersection-observer>
-    </div>
-  `,
-});
-
-export const InfiniteScrolling = () => ({
-  components,
-  data: () => ({
-    items: generateItems(),
-  }),
-  computed: {
-    lastItemId() {
-      return this.items[this.items.length - 1].id;
-    },
-    endOfList() {
-      return this.lastItemId >= 1000;
-    },
-  },
-  methods: {
-    fetchMoreItems() {
-      if (!this.endOfList) {
-        this.items.push(...generateItems(this.lastItemId));
-      }
-    },
-  },
-  template: `
-    <div>
-      <h2>Infinitely scrollable list</h2>
-      <p>This data will procedurally generate 1000 items, 20 at a time</p>
-      <ul>
-        <li v-for="item in items" :key="item.id">{{ item.title }}</li>
-      </ul>
-      <gl-intersection-observer v-if="!endOfList" @appear="fetchMoreItems">
-        <button @click="fetchMoreItems">Fetch more items</button>
-      </gl-intersection-observer>
-    </div>
-`,
-});
-
-export default {
-  title: 'utilities/intersection-observer',
-  component: GlIntersectionObserver,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/utilities/intersperse/intersperse.spec.js

@@ -1,115 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Intersperse from './intersperse.vue';
-
-describe('Intersperse Component', () => {
-  let wrapper;
-
-  const createComponent = (defaultSlot = [], options = {}) => {
-    wrapper = shallowMount(Intersperse, {
-      slots: {
-        default: defaultSlot,
-      },
-      ...options,
-    });
-  };
-
-  it.each`
-    defaultSlotContent                             | selectorsToCheck
-    ${'<button>Foo</button>'}                      | ${['button']}
-    ${'<a><span>Foo</span></a><small>Bar</small>'} | ${['a', 'a span', 'small']}
-  `(
-    'contains all elements passed into the default slot',
-    ({ defaultSlotContent, selectorsToCheck }) => {
-      createComponent(defaultSlotContent);
-
-      selectorsToCheck.forEach((selector) => {
-        // eslint-disable-next-line unicorn/no-array-callback-reference
-        expect(wrapper.find(selector).exists()).toBe(true);
-      });
-    }
-  );
-
-  it('renders an empty span if no children are given', () => {
-    createComponent([]);
-
-    expect(wrapper.find('span').exists()).toBe(true);
-    expect(wrapper.findAll('span > *').length).toBe(0);
-  });
-
-  it('uses ", " as a default separator and lastSeparator', () => {
-    const defaultSlotContent = '<i>Foo</i><i>Bar</i><i>Baz</i>';
-    const expectedText = 'Foo, Bar, Baz';
-
-    createComponent(defaultSlotContent);
-
-    expect(wrapper.text()).toBe(expectedText);
-  });
-
-  it('adds class attribute when present', () => {
-    const defaultSlotContent = '<i>Foo</i><i>Bar</i>';
-
-    createComponent(defaultSlotContent, { attrs: { class: 'text-secondary' } });
-
-    expect(wrapper.classes('text-secondary')).toBe(true);
-  });
-
-  it.each`
-    defaultSlotContent                     | separator | expectedText
-    ${'<i>Baz</i><i>Foo</i><i>Biz</i>'}    | ${', '}   | ${'Baz, Foo, Biz'}
-    ${'<i>Bar</i><i>Baz</i><i>Biz</i>'}    | ${'+'}    | ${'Bar+Baz+Biz'}
-    ${'<i>Bar</i><i>Baz</i><i>Biz</i>Quz'} | ${'-'}    | ${'Bar-Baz-Biz-Quz'}
-  `(
-    'intersperses each direct child with a given separator',
-    ({ defaultSlotContent, separator, expectedText }) => {
-      createComponent(defaultSlotContent, { propsData: { separator } });
-
-      expect(wrapper.text()).toBe(expectedText);
-    }
-  );
-
-  it.each`
-    defaultSlotContent                  | separator | lastSeparator | expectedText
-    ${'<i>Foo</i><i>Bar</i>'}           | ${','}    | ${' and '}    | ${'Foo and Bar'}
-    ${'<i>Foo</i><i>Bar</i><i>Baz</i>'} | ${','}    | ${'+'}        | ${'Foo,Bar,+Baz'}
-    ${'<i>Foo</i><i>Bar</i><i>Baz</i>'} | ${','}    | ${' and '}    | ${'Foo,Bar, and Baz'}
-    ${'<i>Foo</i><i>Bar</i><i>Baz</i>'} | ${'+'}    | ${' and '}    | ${'Foo+Bar+ and Baz'}
-  `(
-    'adds a custom lastSeparator',
-    ({ defaultSlotContent, separator, lastSeparator, expectedText }) => {
-      createComponent(defaultSlotContent, { propsData: { separator, lastSeparator } });
-
-      expect(wrapper.text()).toBe(expectedText);
-    }
-  );
-
-  it.each`
-    defaultSlotContent              | expectedText
-    ${'<i>Foo</i> <i>Bar</i>'}      | ${'Foo, Bar'}
-    ${'<i>Foo</i>\n<i>Bar</i>'}     | ${'Foo, Bar'}
-    ${'<i>Foo</i>\t<i>Bar</i>'}     | ${'Foo, Bar'}
-    ${'<i>Foo</i>    <i>Bar</i>'}   | ${'Foo, Bar'}
-    ${'<i>Foo</i>&nbsp;<i>Bar</i>'} | ${'Foo, Bar'}
-    ${'<i>Foo</i><i>Bar</i>  '}     | ${'Foo, Bar'}
-    ${'<i>Foo</i><i>Bar</i>\n'}     | ${'Foo, Bar'}
-  `(
-    'strips whitespace elements that are direct children of the slot',
-    ({ defaultSlotContent, expectedText }) => {
-      createComponent(defaultSlotContent);
-
-      expect(wrapper.text()).toBe(expectedText);
-    }
-  );
-
-  it.each`
-    defaultSlotContent                                  | expectedText
-    ${'<i>Foo Bar</i><i>Baz</i>'}                       | ${'Foo Bar, Baz'}
-    ${'<i>Foo Bar</i><i>Baz Qaz</i><small>Qiz</small>'} | ${'Foo Bar, Baz Qaz, Qiz'}
-  `(
-    'preserves whitespace elements that are not direct children of the slot',
-    ({ defaultSlotContent, expectedText }) => {
-      createComponent(defaultSlotContent);
-
-      expect(wrapper.text()).toBe(expectedText);
-    }
-  );
-});

package/src/components/utilities/intersperse/intersperse.stories.js

@@ -1,53 +0,0 @@
-import GlIntersperse from './intersperse.vue';
-import readme from './intersperse.md';
-
-const template = `
-  <div>
-    <gl-intersperse :separator="separator" :lastSeparator="lastSeparator">
-      <span v-for="item in items">{{ item }}</span>
-    </gl-intersperse>
-  </div>
-  `;
-
-const generateProps = ({
-  separator = ', ',
-  lastSeparator = '',
-  items = ['Foo', 'Bar', 'Baz', 'Qaz'],
-} = {}) => ({
-  separator,
-  lastSeparator,
-  items,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: {
-    GlIntersperse,
-  },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export default {
-  title: 'utilities/intersperse',
-  component: GlIntersperse,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};
-
-export const CustomSeparator = Template.bind({});
-CustomSeparator.args = generateProps({
-  separator: '-',
-});
-
-export const CustomLastSeparator = Template.bind({});
-CustomLastSeparator.args = generateProps({
-  lastSeparator: ' and ',
-});

package/src/components/utilities/sprintf/sprintf.spec.js

@@ -1,337 +0,0 @@
-import { mount } from '@vue/test-utils';
-import sprintf from './sprintf.vue';
-
-describe('sprintf component', () => {
-  let wrapper;
-  const objectPrototypeNames = Object.getOwnPropertyNames(Object.prototype).filter((name) =>
-    /^[a-z]/i.test(name)
-  );
-
-  const createComponent = (template = '', data = () => ({})) => {
-    wrapper = mount({
-      template: `<div class="wrapper">${template}</div>`,
-      components: {
-        sprintf,
-      },
-      data,
-    });
-  };
-
-  describe('plain placeholders', () => {
-    it.each`
-      message
-      ${''}
-      ${'Foo'}
-      ${'%{author}'}
-      ${'Written by %{author}'}
-      ${'Written by %{author-name}'}
-      ${'Written by %{author1}'}
-      ${'Written by %{author_name}'}
-    `('should return message if slots have no data', ({ message }) => {
-      createComponent(`<sprintf message="${message}"/>`);
-
-      expect(wrapper.element.innerHTML).toBe(message);
-    });
-
-    it.each`
-      message                                | html
-      ${'%{author}'}                         | ${'<span>Author</span>'}
-      ${'Written by %{author}'}              | ${'Written by <span>Author</span>'}
-      ${'Foo %{author} bar'}                 | ${'Foo <span>Author</span> bar'}
-      ${'  %{author}  '}                     | ${'  <span>Author</span>  '}
-      ${'%{author}%{author}'}                | ${'<span>Author</span><span>Author</span>'}
-      ${'%{author} known as %{author-name}'} | ${'<span>Author</span> known as <span>John Doe</span>'}
-      ${'%{author1}'}                        | ${'<span>Author #1</span>'}
-      ${'%{author_name}'}                    | ${'<span>Author Name</span>'}
-    `('should replace placeholder with component', ({ message, html }) => {
-      createComponent(
-        `<sprintf message="${message}">
-        <template #author>
-          <span>Author</span>
-        </template>
-        <template #author-name>
-          <span>John Doe</span>
-        </template>
-        <template #author1>
-          <span>Author #1</span>
-        </template>
-        <template #author_name>
-          <span>Author Name</span>
-        </template>
-      </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe(html);
-    });
-
-    it('should be able to re-use a placeholder multiple times', () => {
-      createComponent(
-        `<sprintf message="%{author} is an excellent %{author}">
-        <template #author>
-          <span>Author</span>
-        </template>
-      </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe(
-        '<span>Author</span> is an excellent <span>Author</span>'
-      );
-    });
-
-    it('should be able to use templates as slots', () => {
-      createComponent(
-        `<sprintf message="Written by %{author}">
-        <template #author>Author</template>
-      </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('Written by Author');
-    });
-
-    it('should work with a default slot', () => {
-      createComponent(`<sprintf message="Written by %{default}">Author</sprintf>`);
-
-      expect(wrapper.element.innerHTML).toBe('Written by Author');
-    });
-
-    describe('Object prototype names', () => {
-      it.each(objectPrototypeNames)(
-        'does not use Object.prototype.%s as slot if slot is not provided',
-        (prototypeName) => {
-          createComponent(`<sprintf message="%{${prototypeName}}"></sprintf>`);
-
-          expect(wrapper.element.innerHTML).toBe(`%{${prototypeName}}`);
-        }
-      );
-
-      it.each(objectPrototypeNames)('can use provided slot named "%s"', (prototypeName) => {
-        createComponent(
-          `<sprintf message="%{${prototypeName}}">
-             <template #${prototypeName}>${prototypeName} OK!</template>
-           </sprintf>`
-        );
-
-        expect(wrapper.element.innerHTML).toBe(`${prototypeName} OK!`);
-      });
-    });
-  });
-
-  describe('start/end placeholders', () => {
-    it('should work', () => {
-      createComponent(
-        `<sprintf message="Click %{linkStart}here%{linkEnd}, please">
-           <template #link="{ content }">
-             <a href="#">{{ content }}</a>
-           </template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('Click <a href="#">here</a>, please');
-    });
-
-    it('should work with a default slot', () => {
-      createComponent(
-        `<sprintf message="Foo %{defaultStart}default%{defaultEnd} baz">
-           <template #default="{ content }">{{ content }}</template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('Foo default baz');
-    });
-
-    it('does not render start/end content if slot does not consume it', () => {
-      createComponent(
-        `<sprintf message="Click %{linkStart}here%{linkEnd}, please">
-           <template #link>
-             <a href="#">foo</a>
-           </template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('Click <a href="#">foo</a>, please');
-    });
-
-    it('can interpolate multiple start/end placeholders', () => {
-      createComponent(
-        `<sprintf message="Foo %{barStart}bar%{barEnd} %{quxStart}qux%{quxEnd} baz">
-           <template #bar="{ content }">
-             <a>{{ content }}</a>
-           </template>
-           <template #qux="{ content }">
-             <b>{{ content }}</b>
-           </template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('Foo <a>bar</a> <b>qux</b> baz');
-    });
-
-    it('treats out-of-order start/end placeholders as plain slots', () => {
-      createComponent(
-        `<sprintf message="Foo %{barEnd}bar%{barStart} qux">
-           <template #bar="{ content }">
-             <a>{{ content }} fail if in output!</a>
-           </template>
-           <template #barStart>
-             <b>barStart</b>
-           </template>
-           <template #barEnd>
-             <i>barEnd</i>
-           </template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('Foo <i>barEnd</i>bar<b>barStart</b> qux');
-    });
-
-    it('should handle start/end placeholders at the beginning and end of the message', () => {
-      createComponent(
-        `<sprintf message="%{fooStart}bar%{fooEnd}">
-           <template #foo="{ content }"><b>{{ content }}</b></template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('<b>bar</b>');
-    });
-
-    it('treats a start placeholder without an end as a plain placeholder', () => {
-      createComponent(
-        `<sprintf message="foo %{barStart} baz">
-           <template #barStart>start</template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('foo start baz');
-    });
-
-    it('treats an end placeholder without a start as a plain placeholder', () => {
-      createComponent(
-        `<sprintf message="foo %{barEnd} baz">
-           <template #barEnd>end</template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('foo end baz');
-    });
-
-    it('should not interpolate more than one level deep, even if slots are provided', () => {
-      createComponent(
-        `<sprintf message="foo %{spanStart}foo %{baz} %{strongStart}strong%{strongEnd}%{spanEnd}">
-           <template #span="{ content }"><span>{{ content }}</span></template>
-           <template #baz>baz</template>
-           <template #strong="{ content }"><strong>{{ content }}</strong></template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe(
-        'foo <span>foo %{baz} %{strongStart}strong%{strongEnd}</span>'
-      );
-    });
-
-    it('works with no content between start/end placeholders', () => {
-      createComponent(
-        `<sprintf message="foo %{barStart}%{barEnd} baz">
-           <template #bar="{ content }"><i>{{ content }}</i></template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe('foo <i></i> baz');
-    });
-
-    it('returns the message if slot is not provided', () => {
-      createComponent(`<sprintf message="Click %{linkStart}here%{linkEnd}"></sprintf>`);
-
-      expect(wrapper.element.innerHTML).toBe('Click %{linkStart}here%{linkEnd}');
-    });
-
-    it('works with the example in the documentation', () => {
-      // From: https://gitlab.com/gitlab-org/gitlab/blob/v12.6.4-ee/doc/development/i18n/externalization.md#L300-303
-      createComponent(
-        `<sprintf message="Learn more about %{linkStart}zones%{linkEnd}">
-           <template #link="{ content }">
-             <a
-               href="https://cloud.google.com/compute/docs/regions-zones/regions-zones"
-               target="_blank"
-               rel="noopener noreferrer"
-             >{{ content }}</a>
-           </template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe(
-        'Learn more about <a href="https://cloud.google.com/compute/docs/regions-zones/regions-zones" target="_blank" rel="noopener noreferrer">zones</a>'
-      );
-    });
-
-    it('resists XSS attacks', () => {
-      createComponent(
-        `<sprintf message="Click %{linkStart}<script>alert('hello')</script>%{linkEnd}, please">
-           <template #link="{ content }">
-             <a href="#">{{ content }}</a>
-           </template>
-         </sprintf>`
-      );
-
-      expect(wrapper.element.innerHTML).toBe(
-        'Click <a href="#">&lt;script&gt;alert(\'hello\')&lt;/script&gt;</a>, please'
-      );
-    });
-
-    describe('Object prototype names', () => {
-      it.each(objectPrototypeNames)(
-        'does not use Object.prototype.%s as slot if slot is not provided',
-        (prototypeName) => {
-          createComponent(
-            `<sprintf message="%{${prototypeName}Start} foo %{${prototypeName}End}"></sprintf>`
-          );
-
-          expect(wrapper.element.innerHTML).toBe(
-            `%{${prototypeName}Start} foo %{${prototypeName}End}`
-          );
-        }
-      );
-
-      it.each(objectPrototypeNames)('can use provided slot named "%s"', (prototypeName) => {
-        createComponent(
-          `<sprintf message="%{${prototypeName}Start}foo%{${prototypeName}End}">
-               <template #${prototypeName}="{ content }">{{ content }}</template>
-             </sprintf>`
-        );
-
-        expect(wrapper.element.innerHTML).toBe('foo');
-      });
-    });
-
-    describe('given custom placeholder start/end markers', () => {
-      it.each`
-        message                                                   | placeholders                                                       | expectedHtml
-        ${'%{aStart}foo%{aEnd}'}                                  | ${undefined}                                                       | ${'<a>foo</a>'}
-        ${'%{aStart}foo%{aEnd}'}                                  | ${{ a: ['aStart', 'aEnd'] }}                                       | ${'<a>foo</a>'}
-        ${'%{start}foo%{end}'}                                    | ${{ a: ['start', 'end'] }}                                         | ${'<a>foo</a>'}
-        ${'%{bold}foo%{bold_end}'}                                | ${{ bold: ['bold', 'bold_end'] }}                                  | ${'<b>foo</b>'}
-        ${'%{link_start}foo%{link_end}, %{open_bold}bar%{close}'} | ${{ a: ['link_start', 'link_end'], bold: ['open_bold', 'close'] }} | ${'<a>foo</a>, <b>bar</b>'}
-        ${'%{startLink}foo%{end}, %{startOtherLink}bar%{end}'}    | ${{ a: ['startLink', 'end'], bold: ['startOtherLink', 'end'] }}    | ${'<a>foo</a>, <b>bar</b>'}
-        ${'%{start}foo %{icon}%{end}'}                            | ${{ a: ['start', 'end'] }}                                         | ${'<a>foo %{icon}</a>'}
-        ${'%{end}foo%{start}'}                                    | ${{ a: ['start', 'end'] }}                                         | ${'%{end}foo%{start}'}
-        ${'%{start}foo'}                                          | ${{ a: ['start', 'end'] }}                                         | ${'%{start}foo'}
-        ${'foo%{end}'}                                            | ${{ a: ['start', 'end'] }}                                         | ${'foo%{end}'}
-      `(
-        'renders $message as $expectedHtml given $placeholders',
-        ({ message, placeholders, expectedHtml }) => {
-          createComponent(
-            `<sprintf :message="message" :placeholders="placeholders">
-             <template #a="{ content }"><a>{{ content }}</a></template>
-             <template #bold="{ content }"><b>{{ content }}</b></template>
-           </sprintf>`,
-            () => ({
-              message,
-              placeholders,
-            })
-          );
-
-          expect(wrapper.element.innerHTML).toBe(expectedHtml);
-        }
-      );
-    });
-  });
-});