@gitlab/ui 80.13.1 → 80.14.0

package/src/directives/safe_html/safe_html.spec.js

@@ -1,149 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { forbiddenDataAttrs } from './constants';
-import { SafeHtmlDirective as safeHtml } from './safe_html';
-
-/* eslint-disable no-script-url */
-const invalidProtocolUrls = [
-  'javascript:alert(1)',
-  'jAvascript:alert(1)',
-  'data:text/html,<script>alert(1);</script>',
-  ' javascript:',
-  'javascript :',
-];
-/* eslint-enable no-script-url */
-const validProtocolUrls = ['slack://open', 'x-devonthink-item://90909', 'x-devonthink-item:90909'];
-
-describe('safe html directive', () => {
-  let wrapper;
-
-  const createComponent = ({ template, html, config } = {}) => {
-    const defaultTemplate = `<div v-safe-html="rawHtml"></div>`;
-    const defaultHtml = 'hello <script>alert(1)</script>world';
-
-    const component = {
-      directives: {
-        safeHtml,
-      },
-      data() {
-        return {
-          rawHtml: html || defaultHtml,
-          config: config || {},
-        };
-      },
-      template: template || defaultTemplate,
-    };
-
-    wrapper = shallowMount(component);
-  };
-
-  describe('default', () => {
-    it('should remove the script tag', () => {
-      createComponent();
-
-      expect(wrapper.html()).toEqual('<div>hello world</div>');
-    });
-
-    it('should remove javascript hrefs', () => {
-      createComponent({ html: '<a href="javascript:prompt(1)">click here</a>' });
-
-      expect(wrapper.html()).toEqual('<div><a>click here</a></div>');
-    });
-
-    it('should remove style tags', () => {
-      createComponent({ html: '<style>p {width:50%;}</style>' });
-      expect(wrapper.html()).toEqual('<div></div>');
-    });
-
-    it('should remove mstyle tags', () => {
-      createComponent({ html: '<math><mstyle displaystyle="true"></mstyle></math>' });
-      expect(wrapper.html()).toEqual('<div><math></math></div>');
-    });
-
-    it('should remove form tags', () => {
-      createComponent({ html: '<form method="post" action="path"></form>' });
-      expect(wrapper.html()).toEqual('<div></div>');
-    });
-
-    it('should remove any existing children', () => {
-      createComponent({
-        template: `<div v-safe-html="rawHtml">foo <i>bar</i></div>`,
-      });
-
-      expect(wrapper.html()).toEqual('<div>hello world</div>');
-    });
-
-    describe('with non-http links', () => {
-      it.each(validProtocolUrls)('should allow %s', (url) => {
-        createComponent({
-          html: `<a href="${url}">internal link</a>`,
-        });
-        expect(wrapper.html()).toContain(`<a href="${url}">internal link</a>`);
-      });
-
-      it.each(invalidProtocolUrls)('should not allow %s', (url) => {
-        createComponent({
-          html: `<a href="${url}">internal link</a>`,
-        });
-        expect(wrapper.html()).toContain(`<a>internal link</a>`);
-      });
-    });
-
-    describe('handles data attributes correctly', () => {
-      const allowedDataAttrs = ['data-safe', 'data-random'];
-
-      it.each(forbiddenDataAttrs)('removes dangerous `%s` attribute', (attr) => {
-        const html = `<a ${attr}="true"></a>`;
-        createComponent({ html });
-
-        expect(wrapper.html()).not.toContain(html);
-      });
-
-      it.each(allowedDataAttrs)('does not remove allowed `%s` attribute', (attr) => {
-        const html = `<a ${attr}="true"></a>`;
-        createComponent({ html });
-
-        expect(wrapper.html()).toContain(html);
-      });
-    });
-  });
-
-  describe('advance config', () => {
-    const template = '<div v-safe-html:[config]="rawHtml"></div>';
-    it('should only allow <b> tags', () => {
-      createComponent({
-        template,
-        html: '<a href="javascript:prompt(1)"><b>click here</b></a>',
-        config: { ALLOWED_TAGS: ['b'] },
-      });
-
-      expect(wrapper.html()).toEqual('<div><b>click here</b></div>');
-    });
-
-    it('should strip all html tags', () => {
-      createComponent({
-        template,
-        html: '<a href="javascript:prompt(1)"><u>click here</u></a>',
-        config: { ALLOWED_TAGS: [] },
-      });
-
-      expect(wrapper.html()).toEqual('<div>click here</div>');
-    });
-  });
-
-  describe('unbind', () => {
-    it('should clear the text content during unbind', () => {
-      createComponent();
-      wrapper.destroy();
-
-      expect(wrapper.element.textContent).toEqual('');
-    });
-
-    it('should clear the text content with custom HTML during unbind', () => {
-      const customHtml = '<div>custom html</div>';
-      createComponent({ html: customHtml });
-      wrapper.destroy();
-
-      expect(wrapper.element.textContent).toEqual('');
-    });
-  });
-});

package/src/directives/safe_html/safe_html.stories.js

@@ -1,60 +0,0 @@
-import DOMPurify from 'dompurify';
-import { SafeHtmlDirective as SafeHtml } from './safe_html';
-import readme from './safe_html.md';
-
-const { sanitize } = DOMPurify;
-
-const generateProps = ({
-  unsafeHTML = '<a href="javascript:alert(document.domain)">Click me</a>',
-} = {}) => ({
-  unsafeHTML,
-});
-
-export const Default = (_args, { argTypes }) => ({
-  directives: {
-    SafeHtml,
-  },
-  props: Object.keys(argTypes),
-  computed: {
-    sanitizedHtml() {
-      return sanitize(this.unsafeHTML);
-    },
-  },
-  template: `
-  <table class="gl-table">
-    <thead>
-      <tr>
-        <th>Directive</th>
-        <th>Output</th>
-        <th>Rendered</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><strong>v-html</strong></td>
-        <td><code>{{ unsafeHTML }}</code></td>
-        <td>N/A for security reasons</td>
-      </tr>
-      <tr>
-        <td><strong>v-safe-html</strong></td>
-        <td><code>{{ sanitizedHtml }}</code></td>
-        <td v-safe-html="unsafeHTML"></td>
-      </tr>
-    </tbody>
-  </table>
-  `,
-});
-Default.args = generateProps();
-
-export default {
-  title: 'directives/safe-html-directive',
-  component: SafeHtml,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/directives/safe_link/safe_link.spec.js

@@ -1,135 +0,0 @@
-import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
-import GlLink from '../../components/base/link/link.vue';
-import { absoluteUrls, javascriptUrls, encodedJavaScriptUrls, relativeUrls } from './mock_data';
-import { SafeLinkDirective } from './safe_link';
-
-const httpLink = 'https://gitlab.com';
-
-describe('safe link directive', () => {
-  let wrapper;
-
-  const createComponent = ({
-    href,
-    safeLinkConfig = {},
-    components,
-    template = `<a v-safe-link :href="href" target="_blank">Click</a>`,
-    mountFn = shallowMount,
-  } = {}) => {
-    const component = {
-      props: {
-        href: { type: String },
-        safeLinkConfig: { type: Object },
-      },
-      directives: {
-        SafeLink: SafeLinkDirective,
-      },
-      components,
-      template,
-    };
-
-    wrapper = mountFn(component, { propsData: { href, safeLinkConfig } });
-  };
-
-  describe('default', () => {
-    it('should render the anchor tag with given href', () => {
-      createComponent({
-        href: httpLink,
-      });
-
-      expect(wrapper.element.tagName).toBe('A');
-      expect(wrapper.attributes('href')).toBe(httpLink);
-    });
-
-    it('should render the element with secure rel attr', () => {
-      createComponent({
-        href: httpLink,
-      });
-
-      expect(wrapper.attributes('rel')).toBe(`noopener noreferrer`);
-    });
-  });
-
-  describe('invalid urls', () => {
-    it.each(javascriptUrls)('%s should be sanitized', (url) => {
-      createComponent({
-        href: url,
-      });
-      expect(wrapper.attributes('href')).toBe('about:blank');
-    });
-  });
-
-  describe('valid urls', () => {
-    const validUrls = [...absoluteUrls, ...relativeUrls, ...encodedJavaScriptUrls];
-    /* Note:
-    /* Encoded JavaScript URLs are safe urls in Vue context, since
-    /* Vue attribute bindings are also automatically escaped
-    /* https://vuejs.org/v2/guide/security.html#Injecting-URLs
-    */
-    it.each(validUrls)('%s should be rendered', (url) => {
-      createComponent({
-        href: url,
-      });
-      expect(wrapper.attributes('href')).toBe(url);
-    });
-  });
-
-  describe('`skipSanitization` arg', () => {
-    it.each(javascriptUrls)('%s should be rendered', (url) => {
-      createComponent({
-        href: url,
-        safeLinkConfig: { skipSanitization: true },
-        template: '<a v-safe-link:[safeLinkConfig] :href="href" target="_blank">Click</a>',
-      });
-      expect(wrapper.attributes('href')).toBe(url);
-    });
-  });
-
-  describe('reactivity', () => {
-    it('should sanitize the updated url', async () => {
-      createComponent({
-        mountFn: mount,
-        components: { GlLink },
-        template: '<gl-link :href="href" target="_blank">Click</gl-link>',
-        href: javascriptUrls[0],
-      });
-
-      expect(wrapper.attributes('href')).toBe('about:blank');
-
-      // set href to a valid url
-      await wrapper.setProps({ href: 'https://gitlab.com' });
-      expect(wrapper.attributes('href')).toBe('https://gitlab.com');
-
-      // set href to back to an invalid url
-      await wrapper.setProps({ href: javascriptUrls[1] });
-      await Vue.nextTick();
-
-      expect(wrapper.attributes('href')).toBe('about:blank');
-    });
-
-    describe('`skipSanitization` arg', () => {
-      it('should not sanitize the updated url', async () => {
-        const url = javascriptUrls[0];
-
-        createComponent({
-          mountFn: mount,
-          components: { GlLink },
-          template: '<gl-link is-unsafe-link :href="href" target="_blank">Click</gl-link>',
-          href: url,
-        });
-
-        expect(wrapper.attributes('href')).toBe(url);
-
-        // set href to a valid url
-        await wrapper.setProps({ href: 'https://gitlab.com' });
-        await Vue.nextTick();
-        expect(wrapper.attributes('href')).toBe('https://gitlab.com');
-
-        // set href to back to an invalid url
-        await wrapper.setProps({ href: url });
-        await Vue.nextTick();
-        expect(wrapper.attributes('href')).toBe(url);
-      });
-    });
-  });
-});

package/src/directives/safe_link/safe_link.stories.js

@@ -1,39 +0,0 @@
-import { SafeLinkDirective as SafeLink } from './safe_link';
-import readme from './safe_link.md';
-
-const directives = {
-  SafeLink,
-};
-
-// eslint-disable-next-line no-script-url
-const generateProps = ({ href = 'javascript:alert(1)', target = '_blank' } = {}) => ({
-  href,
-  target,
-});
-
-export const Default = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  directives,
-  template: `
-    <a
-      :href="href"
-      :target="target"
-      v-safe-link
-    >
-      This is a secure link
-    </a>`,
-});
-Default.args = generateProps();
-
-export default {
-  title: 'directives/safe-link-directive',
-  component: SafeLink,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/internal/color_contrast/color_contrast.spec.js

@@ -1,34 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import ColorContrast from './color_contrast.vue';
-
-describe('color contrast component', () => {
-  let wrapper;
-
-  const createComponent = (props) => {
-    wrapper = shallowMount(ColorContrast, {
-      propsData: {
-        ...props,
-      },
-    });
-  };
-
-  it('renders AAA level and score', () => {
-    createComponent({ foreground: '#000', background: '#fff' });
-    expect(wrapper.text()).toBe('AAA 21.0');
-  });
-
-  it('renders AA level and score', () => {
-    createComponent({ foreground: '#666', background: '#fff' });
-    expect(wrapper.text()).toBe('AA 5.7');
-  });
-
-  it('renders AA+ level and score', () => {
-    createComponent({ foreground: '#888', background: '#fff' });
-    expect(wrapper.text()).toBe('AA+ 3.5');
-  });
-
-  it('renders F level and score', () => {
-    createComponent({ foreground: '#999', background: '#fff' });
-    expect(wrapper.text()).toBe('F 2.8');
-  });
-});

package/src/internal/color_contrast/color_contrast.stories.js

@@ -1,41 +0,0 @@
-import GlColorContrast from './color_contrast.vue';
-import readme from './color_contrast.md';
-
-const components = { GlColorContrast };
-
-const generateProps = ({ foreground = '#ffffff', background = '#1f75cb' } = {}) => ({
-  foreground,
-  background,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components,
-  props: Object.keys(argTypes),
-  template: `
-    <gl-color-contrast
-      :foreground="foreground"
-      :background="background"
-    />
-  `,
-});
-Default.args = generateProps();
-
-export default {
-  title: 'internal/color_contrast',
-  component: GlColorContrast,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    foreground: {
-      control: 'color',
-    },
-    background: {
-      control: 'color',
-    },
-  },
-};

package/src/scss/functions.spec.scss

@@ -1,54 +0,0 @@
-@import './functions';
-@import 'true';
-
-@include describe('extract-unit') {
-  @include it('returns unit of measure for a given number') {
-    $result: extract-unit(10em);
-
-    @include assert-equal(extract-unit(10em), 1em);
-    @include assert-equal(unit($result), 'em');
-  }
-}
-
-@include describe('strip-unit') {
-  @include it('returns number with no unit of measure') {
-    $stripped: strip-unit(10em);
-
-    @include assert-equal($stripped, 10);
-    @include assert-true(unitless($stripped));
-  }
-}
-
-@include describe('px-to-rem') {
-  @include it('converts single px value to rem') {
-    $result: px-to-rem(16px);
-
-    @include assert-equal($result, 1rem);
-  }
-
-  @include it('converts multiple px values to rem') {
-    $result: px-to-rem(16px 12px 16px 12px);
-
-    @include assert-equal($result, 1rem 0.75rem 1rem 0.75rem);
-  }
-
-  @include it('does not convert non-px values') {
-    $result: px-to-rem(16em 12px 16px 12px);
-
-    @include assert-equal($result, 16em 0.75rem 1rem 0.75rem);
-  }
-}
-
-@include describe('if-important') {
-  @include it('returns `!important` if `$important` is `true`') {
-    $result: if-important(true);
-
-    @include assert-equal($result, '!important');
-  }
-
-  @include it('returns an empty string if `$important` is `false`') {
-    $result: if-important(false);
-
-    @include assert-equal($result, '');
-  }
-}

package/src/scss/mixins.spec.scss

@@ -1,93 +0,0 @@
-@import './mixins';
-@import './variables';
-@import 'true';
-
-@include describe('gl-fluid-font-size') {
-  @include it('returns fluid font-size') {
-    @include assert {
-      @include output {
-        @include gl-fluid-font-size(2rem, 3.5rem);
-      }
-      @include expect {
-        // prettier-ignore
-        font-size: clamp(2rem, #{calc(#{-0.6666666667rem} + #{5.5555555556vw})}, 3.5rem);
-      }
-    }
-  }
-}
-
-@include describe('gl-fluid-line-height') {
-  @include it('returns fluid line-height') {
-    @include assert {
-      @include output {
-        @include gl-fluid-line-height(2rem, 3.5rem);
-      }
-      @include expect {
-        // prettier-ignore
-        line-height: clamp(2rem, #{calc(#{-0.6666666667rem} + #{5.5555555556vw})}, 3.5rem);
-      }
-    }
-  }
-}
-
-@include describe('gl-media-breakpoint-up') {
-  @include it('returns no media query for xs') {
-    @include assert {
-      @include output {
-        @include gl-media-breakpoint-up(xs) {
-          color: $green-100;
-        }
-      }
-      @include expect {
-        color: $green-100;
-      }
-    }
-  }
-  @include it('returns min-width media query for sm') {
-    @include assert {
-      @include output {
-        @include gl-media-breakpoint-up(sm) {
-          color: $blue-100;
-        }
-      }
-      @include expect {
-        @media (min-width: '576px') {
-          color: $blue-100;
-        }
-      }
-    }
-  }
-}
-
-@include describe('gl-media-breakpoint-down') {
-  @include it('returns max-width media query for lg') {
-    @include assert {
-      @include output {
-        // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-        @include gl-media-breakpoint-down(lg) {
-          color: $red-100;
-        }
-      }
-      @include expect {
-        @media (max-width: '991.98px') {
-          color: $red-100;
-        }
-      }
-    }
-  }
-  @include it('returns max-width media query for md') {
-    @include assert {
-      @include output {
-        // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-        @include gl-media-breakpoint-down(md) {
-          color: $orange-100;
-        }
-      }
-      @include expect {
-        @media (max-width: '767.98px') {
-          color: $orange-100;
-        }
-      }
-    }
-  }
-}

package/src/scss/run_scss_tests.spec.js

@@ -1,26 +0,0 @@
-/**
- * @jest-environment node
- *
- * sassTrue.runSass cannot find the file when testEnvironment is set to `test`
- * only with dart-sass.
- * See https://github.com/oddbird/true/issues/156
- */
-
-const fs = require('fs');
-const path = require('path');
-const sassTrue = require('sass-true');
-
-const testFiles = fs
-  .readdirSync(__dirname)
-  .filter((file) => file.endsWith('.spec.scss'))
-  .map((file) => path.resolve(__dirname, file));
-
-testFiles.forEach((file) => {
-  sassTrue.runSass(
-    { file },
-    {
-      describe,
-      it,
-    }
-  );
-});

package/src/scss/typescale/typescale.stories.js

@@ -1,61 +0,0 @@
-import has from 'lodash/has';
-import typescaleDocs from './typescale.md';
-import uiTypescaleDemoContent from './typescale_demo.html';
-import uiTypescaleDemoStyles from './typescale_demo.scss';
-import uiTypefaceContent from './typeface_demo.html';
-
-const createTypescaleDemoComponent = (componentName, typescaleCSS, demoContent) => {
-  if (!has(window, 'customElements') || customElements.get(componentName)) {
-    return;
-  }
-  class TypescaleDemo extends HTMLElement {
-    constructor() {
-      super();
-
-      const shadow = this.attachShadow({ mode: 'open' });
-      const style = document.createElement('style');
-      const wrapper = document.createElement('body');
-
-      style.textContent = typescaleCSS;
-      wrapper.innerHTML = demoContent;
-
-      shadow.appendChild(style);
-      shadow.appendChild(wrapper);
-    }
-  }
-
-  customElements.define(componentName, TypescaleDemo);
-};
-
-createTypescaleDemoComponent('ui-typescale-demo', uiTypescaleDemoStyles, uiTypescaleDemoContent);
-createTypescaleDemoComponent('ui-typeface-demo', uiTypescaleDemoStyles, uiTypefaceContent);
-
-const component = {
-  template: '<ui-typescale-demo />',
-};
-
-const typefaceComponent = {
-  template: '<ui-typeface-demo />',
-};
-
-export const Default = () => component;
-Default.parameters = {
-  viewport: {
-    defaultViewport: 'breakpointExtraLarge',
-  },
-};
-
-export const Typefaces = () => typefaceComponent;
-Typefaces.parameters = Default.parameters;
-
-// eslint-disable-next-line storybook/csf-component
-export default {
-  title: 'scss/typescale',
-  parameters: {
-    docs: {
-      description: {
-        component: typescaleDocs,
-      },
-    },
-  },
-};