@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/directives/outside/outside.md

@@ -1,140 +0,0 @@
-A Vue Directive to call a callback when a supported event type occurs *outside* of the element
-the directive is bound to. Any events on the element or any descendant elements are ignored.
-The directive supports the event types `click` and `focusin` and can be configured in several ways.
-If no event type is set, `click` is the default.
-
-## Usage
-
-### Default
-
-The following example listens for click events outside the specified element:
-
-```html
-<script>
-import { GlOutsideDirective as Outside } from '@gitlab/ui';
-
-export default {
-  directives: { Outside },
-  methods: {
-    onClick(event) {
-      console.log('User clicked somewhere outside of this component', event);
-    },
-  },
-};
-</script>
-
-<template>
-  <div v-outside="onClick">Click anywhere but here</div>
-</template>
-```
-
-### When binding another event type than `click`
-
-You can specify event types as modifiers. The following example listens for `focusin` events,
-but not for `click`. With this implementation:
-
-```html
-<script>
-export default {
-  methods: {
-    onFocusin(event) {
-      console.log('User set the focus somewhere outside of this component', event);
-    }
-  }
-};
-</script>
-
-<template>
-  <div v-outside.focusin="onFocusin">...</div>
-</template>
-```
-
-### When binding multiple event types
-
-You can specify multiple event types by providing multiple modifiers. The following example
-listens for `click` and `focusin` events:
-
-```html
-<script>
-export default {
-  methods: {
-    onEvent(event) {
-      console.log('Event occurred outside the element:', event);
-    }
-  }
-};
-</script>
-
-<template>
-  <div v-outside.click.focusin="onEvent">...</div>
-</template>
-```
-
-💡 The callback function receives the `event` as a parameter. You can use the `event.type`
-property to execute different code paths depending on which event triggered the callback.
-
-### When handler expects arguments
-
-In case a click handler expects an arument to be passed, simple `v-outside="onClick('foo')"` will
-invoke the handler instantly when mounting the component and the directive won't be active. The
-simplest solution to pass the arguments to the directive is to wrap the handler into an anonumous
-function.
-
-```html
-<script>
-import { GlOutsideDirective as Outside } from '@gitlab/ui';
-
-export default {
-  directives: { Outside },
-  methods: {
-    onClick(event, foo) {
-      console.log('Event occurred outside the element:', event);
-      console.log('An argument was passed along:', foo);
-    },
-  },
-};
-</script>
-
-<template>
-  <div v-outside="(event) => onClick(event, 'foo')">Click anywhere but here</div>
-</template>
-```
-
-## Caveats
-
-* Clicks cannot be detected across document boundaries (e.g., across an
-  `iframe` boundary), in either direction.
-* Clicks on focusable elements, such as buttons or input fields, will fire both
-  `click` and `focusin` events. When both event types are registered,
-  the callback will be executed twice. To prevent executing the same code twice
-  after only one user interaction, use a flag in the callback to stop its
-  execution. Example:
-
-  ```html
-    <script>
-    export default {
-      data: () => ({
-        isOpen: false,
-      }),
-      methods: {
-        openDropdown() {
-          this.isOpen = true;
-        },
-        closeDropdown() {
-          if(!this.isOpen) {
-            return
-          }
-
-          // more code
-
-          this.isOpen = false;
-        }
-      }
-    };
-    </script>
-
-    <template>
-      <button type="button" @click="openDropdown">Open</button>
-      <div v-outside.click.focusin="closeDropdown">...</div>
-    </template>
-  ```

package/src/directives/resize_observer/resize_observer.js

@@ -1,45 +0,0 @@
-import isFunction from 'lodash/isFunction';
-
-let observer = null;
-
-const attachObserver = (el, resizeHandler) => {
-  if (!isFunction(resizeHandler)) {
-    throw TypeError('directive value must be a function');
-  }
-
-  if (!observer) {
-    // the observer instance is shared for performance reasons
-    // more information: https://github.com/WICG/ResizeObserver/issues/59
-    observer = new ResizeObserver((entries) => {
-      entries.forEach((event) => {
-        event.target.glResizeHandler(event);
-      });
-    });
-  }
-
-  el.glResizeHandler = resizeHandler;
-  observer.observe(el);
-};
-
-const detachObserver = (el) => {
-  if (el.glResizeHandler) {
-    delete el.glResizeHandler;
-    observer?.unobserve(el);
-  }
-};
-
-export const GlResizeObserverDirective = {
-  bind(el, { value: resizeHandler, arg: enabled = true }) {
-    if (enabled) {
-      attachObserver(el, resizeHandler);
-    }
-  },
-  update(el, { value: resizeHandler, arg: enabled = true }) {
-    if (enabled) {
-      attachObserver(el, resizeHandler);
-    } else {
-      detachObserver(el);
-    }
-  },
-  unbind: detachObserver,
-};

package/src/directives/resize_observer/resize_observer.md

@@ -1,54 +0,0 @@
-This directive can be used to get notified whenever a given element's size (width or height) changes
-and to retrieve the updated dimensions.
-
-Under the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
-If you use GitLab UI in an older browser which doesn't support the Resize Observer API,
-you can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).
-
-The directive accepts a callback as a value and passes on the received
-[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)
-and the target element whenever a resize event gets triggered.
-
-```html
-<script>
-export default {
-  data() {
-    return {
-      width: 0,
-      height: 0,
-    };
-  },
-  methods: {
-    handleResize({ contentRect: { width, height } }) {
-      this.width = width;
-      this.height = height;
-    },
-  },
-};
-</script>
-<template>
-  <div v-gl-resize-observer-directive="handleResize">
-    <p>{{ width }} x {{ height }}</p>
-  </div>
-</template>
-```
-
-The observer can be toggled on or off by passing a boolean argument to the directive:
-
-```html
-<script>
-export default {
-  data() {
-    return {
-      shouldObserve: true,
-    };
-  },
-  methods: {
-    handleResize() {},
-  },
-};
-</script>
-<template>
-  <div v-gl-resize-observer-directive[shouldObserve]="handleResize"></div>
-</template>
-```

package/src/directives/safe_html/constants.js

@@ -1,14 +0,0 @@
-// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1421#note_617098438
-// for more details
-export const forbiddenDataAttrs = [
-  'data-remote',
-  'data-url',
-  'data-type',
-  'data-method',
-  'data-disable-with',
-  'data-disabled',
-  'data-disable',
-  'data-turbo',
-];
-
-export const forbiddenTags = ['style', 'mstyle', 'form'];

package/src/directives/safe_html/safe_html.js

@@ -1,35 +0,0 @@
-import DOMPurify from 'dompurify';
-import { forbiddenDataAttrs, forbiddenTags } from './constants';
-
-const { sanitize } = DOMPurify;
-
-// Mitigate against future dompurify mXSS bypasses by
-// avoiding additional serialize/parse round trip.
-// See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1782
-// and https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2127
-// for more details.
-const DEFAULT_CONFIG = {
-  RETURN_DOM_FRAGMENT: true,
-  ALLOW_UNKNOWN_PROTOCOLS: true,
-  FORBID_ATTR: forbiddenDataAttrs,
-  FORBID_TAGS: forbiddenTags,
-};
-
-const transform = (el, binding) => {
-  if (binding.oldValue !== binding.value) {
-    const config = { ...DEFAULT_CONFIG, ...(binding.arg ?? {}) };
-
-    el.textContent = '';
-    el.appendChild(sanitize(binding.value, config));
-  }
-};
-
-const clear = (el) => {
-  el.textContent = '';
-};
-
-export const SafeHtmlDirective = {
-  bind: transform,
-  update: transform,
-  unbind: clear,
-};

package/src/directives/safe_html/safe_html.md

@@ -1,58 +0,0 @@
-A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.
-
-## Usage
-
-This directive can be used to sanitize HTML code which may contain user input, to prevent cross-site
-scripting (XSS) vulnerabilities.
-
-Under the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.
-
-DOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of
-[tags][1] and [attributes][2] allowed by DOMPurify.
-
-[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js
-[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js
-
-## Example
-
-```html
-<script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-
-export default {
-  directives: {
-    SafeHtml,
-  },
-  data() {
-    return {
-      rawHtml: "Hello! <script>alert('XSS')</script>",
-    };
-  },
-};
-</script>
-
-<template>
-  <div v-safe-html="rawHtml"></div>
-</template>
-```
-
-## Advanced configuration
-
-```js
-// It allows only <b> tags
-const config = { ALLOWED_TAGS: ['b'] };
-
-// It doesn't allow any html tags
-const config = { ALLOWED_TAGS: [] };
-```
-
-```html
-<div v-safe-html:[config]="rawHtml"></div>
-```
-
-For advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).
-
-### Notes
-
-1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.
-1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.

package/src/directives/safe_link/mock_data.js

@@ -1,33 +0,0 @@
-export const absoluteUrls = [
-  'http://example.org',
-  'http://example.org:8080',
-  'https://example.org',
-  'https://example.org:8080',
-  'https://192.168.1.1',
-  'ftp://192.168.1.1',
-  'mailto:someone@example.com',
-];
-
-/* eslint-disable no-script-url */
-export const javascriptUrls = [
-  'javascript:',
-  'javascript:alert("XSS")',
-  'jav\tascript:alert("XSS");',
-];
-/* eslint-disable no-script-url */
-
-export const encodedJavaScriptUrls = [
-  '&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041',
-  'javascript:alert('XSS')',
-  '&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29',
-  '   javascript:alert("XSS");',
-];
-
-export const relativeUrls = [
-  './relative/link',
-  '../relative/link',
-  '/relative/link',
-  '/users/sign_in',
-  '#docs/link',
-  '#',
-];

package/src/directives/safe_link/safe_link.js

@@ -1,56 +0,0 @@
-import Vue from 'vue';
-
-const getBaseURL = () => {
-  const { protocol, host } = window.location;
-  return `${protocol}//${host}`;
-};
-
-const isExternalURL = (target, hostname) => {
-  return target === '_blank' && hostname !== window.location.hostname;
-};
-
-const secureRel = (rel) => {
-  const rels = rel ? rel.trim().split(' ') : [];
-
-  if (!rels.includes('noopener')) {
-    rels.push('noopener');
-  }
-  if (!rels.includes('noreferrer')) {
-    rels.push('noreferrer');
-  }
-  return rels.join(' ');
-};
-
-const isSafeURL = (url) => {
-  try {
-    const parsedURL = new URL(url, getBaseURL());
-    return ['http:', 'https:', 'mailto:', 'ftp:'].includes(parsedURL.protocol);
-  } catch (e) {
-    return false;
-  }
-};
-
-const transform = (el, { arg: { skipSanitization = false } = {} } = {}) => {
-  if (skipSanitization) {
-    return;
-  }
-
-  const { href, target, rel, hostname } = el;
-
-  if (!isSafeURL(href)) {
-    el.href = 'about:blank';
-  }
-
-  if (isExternalURL(target, hostname)) {
-    el.rel = secureRel(rel);
-  }
-};
-
-export const SafeLinkDirective = {
-  inserted: transform,
-  update: (...args) => {
-    Vue.nextTick(() => {
-      transform(...args);
-    });
-  },
-};

package/src/directives/safe_link/safe_link.md

@@ -1,37 +0,0 @@
-A Vue directive to make the hyperlinks secure by default.
-
-## Security measures
-
-### rel
-
-When setting target to `_blank`, the rel attribute gets set automatically to `noopener noreferrer`,
-this is done to avoid the `window.opener` [API exploit]. If you set the `rel` attribute manually,
-this will overwrite the aforementioned logic.
-
-### href
-
-This directive enforces "safe" URLs. What this means is that, if the provided `href`
-doesn't point to a safe protocol (one of `http:`, `https:`, `mailto:` or `ftp:`), then it is
-replaced with `about:blank` to prevent [URL injections].
-
-```html
-<script>
-import { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';
-
-export default {
-  data() {
-    return {
-      url: 'javascript:alert(1)',
-    };
-  },
-  directives: { SafeLink },
-};
-</script>
-<template>
-  <a v-safe-link href="url" target="_blank">Click</a>
-  <!-- Renders to: <a href="about:blank" target="_blank">Click</a> -->
-</template>
-```
-
-[API exploit]: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
-[URL injections]: https://vuejs.org/v2/guide/security.html#Injecting-URLs

package/src/directives/tooltip.js

@@ -1 +0,0 @@
-export { VBTooltip as GlTooltipDirective } from '../vendor/bootstrap-vue/src/directives/tooltip/tooltip';

package/src/internal/color_contrast/color_contrast.md

@@ -1,8 +0,0 @@
-## Usage
-
-`GlColorContrast` is an **internal** component to display color contrast
-scores and levels for design token stories.
-
-`GlColorContrast` accepts `foreground` and `background` color props to
-calculate a contrast score (e.g. `4.5`) and level (e.g. `AA`) consistent
-with [WCAG 2.1 1.4.3: Contrast (Minimum) level](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).

package/src/internal/color_contrast/color_contrast.vue

@@ -1,52 +0,0 @@
-<script>
-import { HEX_REGEX } from '../../utils/constants';
-import { getColorContrast } from '../../utils/utils';
-
-export default {
-  name: 'GlColorContrast',
-  props: {
-    foreground: {
-      type: String,
-      required: true,
-      validator: (value) => HEX_REGEX.test(value),
-    },
-    background: {
-      type: String,
-      required: true,
-      validator: (value) => HEX_REGEX.test(value),
-    },
-  },
-  computed: {
-    isValidColorCombination() {
-      return HEX_REGEX.test(this.foreground) && HEX_REGEX.test(this.background);
-    },
-    classes() {
-      if (!this.isValidColorCombination) return 'gl-text-gray-950';
-      const { grade } = this.contrast.level;
-      const isFail = grade === 'F';
-      const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
-      const textClass = contrastScore ? 'gl-text-white' : 'gl-text-gray-950';
-      const failClasses = contrastScore
-        ? 'gl-shadow-inner-1-red-300 gl-text-red-300'
-        : 'gl-shadow-inner-1-red-500 gl-text-red-500';
-      return [isFail ? failClasses : textClass];
-    },
-    contrast() {
-      return getColorContrast(this.foreground, this.background);
-    },
-  },
-};
-</script>
-
-<template>
-  <code
-    class="gl-w-10 gl-rounded-base gl-p-2 gl-text-center gl-text-xs"
-    :class="classes"
-    :style="{ backgroundColor: background }"
-  >
-    <template v-if="isValidColorCombination">
-      {{ contrast.level.grade }} {{ contrast.score }}
-    </template>
-    <template v-else>???</template>
-  </code>
-</template>

package/src/scss/README.md

@@ -1 +0,0 @@
-This document was moved to [another location](/doc/css.md).

package/src/scss/body.scss

@@ -1,4 +0,0 @@
-body {
-  background-color: var(--gl-background-color-default);
-  color: var(--gl-text-color-default);
-}

package/src/scss/bootstrap.scss

@@ -1,34 +0,0 @@
-@import 'variables';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/code';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/input-group';
-@import 'bootstrap/scss/custom-forms';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/breadcrumb';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/alert';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/media';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/print';

package/src/scss/bootstrap_vue.scss

@@ -1,25 +0,0 @@
-// stylelint-disable scss/at-import-partial-extension-blacklist
-
-// imports from https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/src/index.scss
-
-@import '../vendor/bootstrap-vue/src/variables.scss';
-// Disabe Tooltip and Popover colored variants which we do not use / support.
-$bv-enable-tooltip-variants: false;
-$bv-enable-popover-variants: false;
-
-@import '../vendor/bootstrap-vue/src/utilities.scss';
-
-@import '../vendor/bootstrap-vue/src/components/dropdown/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-checkbox/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-input/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
-@import '../vendor/bootstrap-vue/src/components/input-group/index.scss';
-@import '../vendor/bootstrap-vue/src/components/modal/index.scss';
-@import '../vendor/bootstrap-vue/src/components/nav/index.scss';
-@import '../vendor/bootstrap-vue/src/components/navbar/index.scss';
-@import '../vendor/bootstrap-vue/src/components/popover/index.scss';
-@import '../vendor/bootstrap-vue/src/components/table/index.scss';
-@import '../vendor/bootstrap-vue/src/components/toast/index.scss';
-@import '../vendor/bootstrap-vue/src/components/tooltip/index.scss';
-
-// @import '../vendor/bootstrap-vue/src/icons/icons.scss';