@gitlab/duo-ui 0.1.0 → 0.3.0

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';

package/src/scss/fonts.scss

@@ -1,67 +0,0 @@
-/* -------------------------------------------------------
-GitLab Sans variable font.
-
-Usage:
-  html { font-family: 'GitLab Sans', sans-serif; }
-*/
-@font-face {
-  font-family: 'GitLab Sans';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: normal;
-  /* stylelint-disable-next-line property-no-unknown */
-  font-named-instance: 'Regular';
-  src: url('../../static/fonts/GitLabSans.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'GitLab Sans';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: italic;
-  /* stylelint-disable-next-line property-no-unknown */
-  font-named-instance: 'Regular';
-  src: url('../../static/fonts/GitLabSans-Italic.woff2') format('woff2');
-}
-
-/* -------------------------------------------------------
-Monospaced font: GitLab Mono.
-
-Usage:
-  html { font-family: 'GitLab Mono', monospace; }
-*/
-@font-face {
-  font-family: 'GitLab Mono';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: normal;
-  src: url('../../static/fonts/GitLabMono.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'GitLab Mono';
-  font-weight: 100 900;
-  /**
-   * Applications should use a less aggressive font-display value than this.
-   * This is done to make sure Storybook Previews load the font.
-   */
-  font-display: block;
-  font-style: italic;
-  src: url('../../static/fonts/GitLabMono-Italic.woff2') format('woff2');
-}
-
-* {
-  font-synthesis: none;
-}

package/src/scss/functions.scss

@@ -1,63 +0,0 @@
-@use 'sass:math';
-
-/*
-* SASS preserves units in arithmetic operations. For example:
-* 12em * 0 = 0em. This function return the unit of a numeric value.
-*
-* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ
-*/
-@function extract-unit($number) {
-  @return $number * 0 + 1;
-}
-
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return math.div($number, extract-unit($number));
-  }
-
-  @return $number;
-}
-
-@function single-unit-rem($value, $font-size-base) {
-  @if (extract-unit($value) != 1px) {
-    @return $value;
-  }
-
-  $converted: math.div($value, $font-size-base);
-
-  @return strip-unit($converted) * 1rem;
-}
-
-@function multiple-units-rem($values, $font-size-base) {
-  $rem-values: ();
-
-  @each $value in $values {
-    $rem-values: append($rem-values, single-unit-rem($value, $font-size-base));
-  }
-
-  @return $rem-values;
-}
-
-@function px-to-rem($px, $font-size-base: 16px) {
-  @if type-of($px) == 'number' {
-    @return single-unit-rem($px, $font-size-base);
-  } @else if type-of($px) == 'list' {
-    @return multiple-units-rem($px, $font-size-base);
-  } @else {
-    @return $px;
-  }
-}
-
-@function if-important($important) {
-  @return #{if($important, '!important', '')};
-}
-
-@function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {
-  $min-width: px-to-rem($min-width);
-  $max-width: px-to-rem($max-width);
-
-  $slope: math.div($max - $min, $max-width - $min-width);
-  $intersection: (-$min-width * $slope) + $min;
-
-  @return clamp(#{$min}, #{$intersection} + #{$slope * 100vw}, #{$max});
-}

package/src/scss/gitlab_ui.scss

@@ -1,19 +0,0 @@
-@import 'bootstrap';
-
-@import 'bootstrap_vue';
-
-// Design Tokens
-@import 'tokens';
-
-// Settings
-@import 'functions';
-@import 'variables';
-@import 'mixins';
-@import 'utility-mixins/index';
-@import 'typescale/index';
-
-// Body
-@import 'body';
-
-// Components
-@import 'components';

package/src/scss/mixins.scss

@@ -1,262 +0,0 @@
-@mixin str-truncated($max-width: 82%) {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: top;
-  white-space: nowrap;
-  max-width: $max-width;
-}
-
-@mixin mask-chevron-down {
-  mask-image: url('#{$gl-icon-chevron-down}');
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: cover;
-}
-
-@mixin gl-fluid-font-size($min, $max) {
-  @include gl-responsive-property('font-size', $min, $max);
-}
-
-@mixin gl-fluid-line-height($min, $max) {
-  @include gl-responsive-property('line-height', $min, $max);
-}
-
-/**
-* Declares a property with a fluid value that decreases or
-* rises depending on the viewport’s size. The property type
-* should be numeric.
-*
-* Values are expected in rem units.
-* Fluid range: between 48rem (768px) – 75rem (1200px).
-*
-* @param $property Property name, i.e. line-height, font-size, width, height, etc.
-* @param $min Property value lower bound.
-* @param $max Property value upper bound.
-*/
-@mixin gl-responsive-property($property, $min, $max) {
-  #{$property}: clamp-between($min, $max);
-}
-
-/**
-* Helper function for :focus
-*
-* @param $size is deprecated and should not be used anymore
-*/
-@mixin gl-focus(
-  $size: null,
-  $color: false,
-  $important: false,
-  $inset: false,
-  $focus-ring: $focus-ring,
-  $outline: false,
-  $outline-offset: $outline-offset
-) {
-  @if $inset == true {
-    @if $color {
-      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
-        inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
-        inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
-        $focus-ring-inset if-important($important);
-      outline: none if-important($important);
-      @media (forced-colors: active) {
-        outline: 2px solid LinkText if-important($important);
-      }
-    } @else if $outline == true {
-      outline: $focus-ring-outline if-important($important);
-      outline-offset: $outline-offset;
-    } @else {
-      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
-        $focus-ring-inset if-important($important);
-      outline: none if-important($important);
-      @media (forced-colors: active) {
-        outline: 2px solid LinkText if-important($important);
-      }
-    }
-  } @else if $color {
-    box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
-    outline: none if-important($important);
-    @media (forced-colors: active) {
-      outline: 2px solid LinkText if-important($important);
-    }
-  } @else if $outline == true {
-    outline: $focus-ring-outline if-important($important);
-    outline-offset: $outline-offset;
-  } @else {
-    box-shadow: $focus-ring if-important($important);
-    outline: none if-important($important);
-    @media (forced-colors: active) {
-      outline: 2px solid LinkText if-important($important);
-    }
-  }
-}
-
-@mixin gl-bg-gradient-blur($direction, $color) {
-  background-image: linear-gradient(to $direction, $transparent-rgba, $color 33%);
-}
-
-/**
-* Helper function for @media of at least the minimum
-* breakpoint width.
-*
-* @param $name Breakpoint name, such as `sm` or `md`.
-*/
-@mixin gl-media-breakpoint-up($name) {
-  $min: map-get($breakpoints, $name);
-  @if $min == null {
-    @error "#{$name} is not a valid breakpoint for this @media query.";
-  }
-  @if $min != 0 {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-/**
-* Helper function for @media of at most the maximum
-* breakpoint width.
-*
-* Note: Before using, consider using a mobile-first
-* approach, and define @media for larger breakpoints
-* using `gl-media-breakpoint-up` while using this rule as
-* the starting point instead.
-*
-* @param $name Breakpoint, such as `sm` or `md`. `xs` is not valid
-*/
-@mixin gl-media-breakpoint-down($name) {
-  $max: map-get($breakpoints, $name);
-  @if ($max == null or $max == 0) {
-    @error "#{$name} is not a valid breakpoint for this @media query.";
-  }
-  // The maximum value is reduced by 0.02px to work around the limitations of
-  // `min-` and `max-` prefixes and with fractional viewport sizes.
-  // See: https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-  // Use 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-  // See https://bugs.webkit.org/show_bug.cgi?id=178261
-  $breakpoint-max-range-precision: 0.02px;
-
-  @media (max-width: $max - $breakpoint-max-range-precision) {
-    @content;
-  }
-}
-
-/**
-* Helper function to resolve font-size value from $gl-font-sizes and
-* $gl-font-sizes-fixed maps.
-*
-* @param $size Number font-size scale
-* @param $fixed Boolean toggle default and fixed font size scales
-*/
-@function get-font-size-variable($size, $fixed) {
-  @if $fixed == true {
-    @if map-has-key($gl-font-sizes-fixed, $size) {
-      @return map-get($gl-font-sizes-fixed, $size);
-    } @else {
-      @error "#{$size} is not a valid fixed font size property";
-      @return null;
-    }
-  } @else {
-    @if map-has-key($gl-font-sizes, $size) {
-      @return map-get($gl-font-sizes, $size);
-    } @else {
-      @error "#{$size} is not a valid font size property";
-      @return null;
-    }
-  }
-}
-
-/**
-* Defines default properties for heading typography based on font-size
-* scale value and default or fixed sizing.
-*
-* Note: overrides Bootstrap margin-top, other margin is determined by
-* individual context
-*
-* @param $size Number font-size scale
-* @param $fixed Boolean toggle default and fixed font size scales
-*/
-@mixin gl-heading-scale($size, $fixed: false) {
-  font-weight: $gl-font-weight-heading;
-  margin-top: 0; // override bootstrap reset in GitLab
-  font-size: get-font-size-variable($size, $fixed);
-
-  // Larger headings have reduced letter spacing
-  @if ($size <= 500) {
-    letter-spacing: $gl-letter-spacing-heading;
-  } @else {
-    letter-spacing: $gl-letter-spacing-heading-reduced;
-  }
-
-  // Display heading has different line height
-  @if ($size == 800) {
-    line-height: $gl-line-height-heading-display;
-  } @else {
-    line-height: $gl-line-height-heading;
-  }
-}
-
-@mixin gl-action-neutral-colors {
-  color: var(--gl-action-neutral-foreground-color-default);
-  background-color: var(--gl-action-neutral-background-color-default);
-  border-color: var(--gl-action-neutral-border-color-default);
-
-  &:hover {
-    color: var(--gl-action-neutral-foreground-color-hover);
-    background-color: var(--gl-action-neutral-background-color-hover);
-    border-color: var(--gl-action-neutral-border-color-hover);
-  }
-
-  &:focus {
-    color: var(--gl-action-neutral-foreground-color-focus);
-    background-color: var(--gl-action-neutral-background-color-focus);
-    border-color: var(--gl-action-neutral-border-color-focus);
-  }
-
-  &:active {
-    color: var(--gl-action-neutral-foreground-color-active);
-    background-color: var(--gl-action-neutral-background-color-active);
-    border-color: var(--gl-action-neutral-border-color-active);
-  }
-}
-
-@mixin gl-prefers-reduced-motion-transition {
-  @media (prefers-reduced-motion) {
-    transition-duration: .01ms !important;
-    transition-delay: 0ms !important;
-  }
-}
-
-@mixin gl-prefers-reduced-motion-animation {
-  @media (prefers-reduced-motion) {
-    animation-duration: .01ms !important;
-    animation-iteration-count: 1 !important;
-    animation-delay: 0ms !important;
-  }
-}
-
-@mixin gl-action-selected-colors {
-  color: var(--gl-action-selected-foreground-color-default);
-  background-color: var(--gl-action-selected-background-color-default);
-  border-color: var(--gl-action-selected-border-color-default);
-
-  &:hover {
-    color: var(--gl-action-selected-foreground-color-hover);
-    background-color: var(--gl-action-selected-background-color-hover);
-    border-color: var(--gl-action-selected-border-color-hover);
-  }
-
-  &:focus {
-    color: var(--gl-action-selected-foreground-color-focus);
-    background-color: var(--gl-action-selected-background-color-focus);
-    border-color: var(--gl-action-selected-border-color-focus);
-  }
-
-  &:active {
-    color: var(--gl-action-selected-foreground-color-active);
-    background-color: var(--gl-action-selected-background-color-active);
-    border-color: var(--gl-action-selected-border-color-active);
-  }
-}