@gitlab/ui 115.11.0 → 116.0.0

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/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/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-neutral-950';
-      const { grade } = this.contrast.level;
-      const isFail = grade === 'F';
-      const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
-      const textClass = contrastScore ? 'gl-text-neutral-0' : 'gl-text-neutral-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>