@gitlab/duo-ui 0.1.0

package/src/components/base/label/label.scss

@@ -0,0 +1,156 @@
+$label-max-width: 100%;
+$label-close-button: '.gl-label-close.gl-button';
+$label-padding-horizontal: 0.75 * $grid-size;
+$label-padding-horizontal-half: 0.375 * $grid-size;
+
+.gl-label {
+  @apply gl-items-center;
+  background-color: var(--gl-background-color-default);
+  @apply gl-overflow-hidden;
+  @apply gl-inline-flex;
+  @apply gl-rounded-pill;
+  position: relative;
+  @apply gl-max-w-full;
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
+  box-shadow: var(--label-inset-border) !important;
+
+  @media (forced-colors: active) {
+    border: 1px solid; // stylelint-disable-line declaration-property-value-disallowed-list
+  }
+
+  &:not(.gl-label-scoped) {
+    background-color: var(--label-background-color);
+  }
+
+  &:has(*:first-child:focus) {
+    @include gl-focus($color: var(--label-background-color, var(--gl-background-color-default)), $important: true);
+  }
+
+  .gl-label-link {
+    @apply gl-flex;
+    @apply gl-font-normal;
+    @apply gl-overflow-hidden;
+    @apply gl-text-inherit;
+    @apply gl-max-w-full;
+
+    &:hover,
+    &:focus,
+    &:focus:active {
+      @apply gl-text-inherit;
+      @apply gl-shadow-none;
+      @apply gl-outline-none;
+    }
+  }
+
+  .gl-label-link-underline {
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:focus:active {
+      .gl-label-text,
+      .gl-label-text-scoped {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .gl-label-text,
+  .gl-label-text-scoped {
+    @apply gl-block;
+    padding: $gl-spacing-scale-1 $label-padding-horizontal;
+    @include str-truncated($label-max-width);
+  }
+
+  > #{$label-close-button} {
+    @apply gl-border-0;
+    @apply gl-flex;
+    width: px-to-rem(14px);
+    height: px-to-rem(14px);
+    margin-left: -$label-padding-horizontal-half;
+    margin-right: $label-padding-horizontal-half;
+    @apply gl-p-0;
+    @apply gl-rounded-full;
+    @apply gl-shadow-none;
+
+    @if $feature-button-border {
+      min-height: auto !important;
+      min-width: auto !important;
+    }
+
+    &:focus,
+    &:active {
+      @apply gl-focus;
+    }
+
+    .gl-icon {
+      vertical-align: -1px;
+    }
+  }
+}
+
+// styles for the the light label variant (which uses dark text)
+.gl-label-text-dark {
+  color: var(--gl-label-light-text-color);
+
+  #{$label-close-button} {
+    color: var(--gl-label-light-button-icon-color-default);
+    background-color: var(--gl-label-light-button-background-color-default);
+
+    &:focus,
+    &:hover {
+      color: var(--label-background-color);
+      background-color: var(--gl-label-light-button-background-color-hover);
+    }
+  }
+}
+
+// styles for the the dark label variant (which uses light text)
+.gl-label-text-light {
+  color: var(--gl-label-dark-text-color);
+
+  #{$label-close-button} {
+    color: var(--gl-label-dark-button-icon-color-default);
+    background-color: var(--gl-label-dark-button-background-color-default);
+
+    &:focus,
+    &:hover {
+      color: var(--label-background-color);
+      background-color: var(--gl-label-dark-button-background-color-hover);
+    }
+  }
+}
+
+.gl-label-scoped {
+  #{$label-close-button} {
+    margin-left: #{-$label-padding-horizontal};
+    color: var(--gl-label-scoped-button-icon-color-default);
+
+    &:focus,
+    &:hover {
+      color: var(--gl-label-scoped-button-icon-color-hover);
+      background-color: var(--gl-label-scoped-button-background-color-hover);
+    }
+  }
+
+  .gl-label-text {
+    background-color: var(--label-background-color);
+
+    @media (forced-colors: active) {
+      border-right: 1px solid;
+    }
+  }
+
+  .gl-label-text-scoped {
+    color: var(--gl-label-scoped-text-color);
+    padding-left: $gl-spacing-scale-2;
+    padding-right: $gl-spacing-scale-3;
+  }
+}
+
+.gl-label-tooltip-title {
+  @apply gl-block;
+  @apply gl-text-theme-indigo-300;
+  @apply gl-font-bold;
+}

package/src/components/base/label/label.vue

@@ -0,0 +1,160 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { labelColorOptions } from '../../../utils/constants';
+import { colorFromBackground } from '../../../utils/utils';
+import GlButton from '../button/button.vue';
+import GlIcon from '../icon/icon.vue';
+import GlLink from '../link/link.vue';
+import GlTooltip from '../tooltip/tooltip.vue';
+
+export default {
+  name: 'GlLabel',
+  components: {
+    GlButton,
+    GlIcon,
+    GlLink,
+    GlTooltip,
+  },
+  props: {
+    backgroundColor: {
+      type: String,
+      required: true,
+      validator: (value) => /^(#|rgb|rgba)/.test(value),
+    },
+    title: {
+      type: String,
+      required: true,
+      default: '',
+    },
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+    target: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    scoped: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      splitScopedLabelIndex: this.title.lastIndexOf('::'),
+    };
+  },
+  computed: {
+    cssClasses() {
+      const textColorVariant = colorFromBackground(this.backgroundColor);
+      return {
+        'gl-label-scoped': this.scoped,
+        'gl-label-text-dark': textColorVariant === labelColorOptions.dark,
+        'gl-label-text-light': textColorVariant === labelColorOptions.light,
+      };
+    },
+    cssVariables() {
+      return {
+        '--label-background-color': this.backgroundColor,
+        '--label-inset-border': `inset 0 0 0 2px ${this.backgroundColor}`,
+      };
+    },
+    scopedKey() {
+      return this.scoped ? this.title.slice(0, this.splitScopedLabelIndex) : this.title;
+    },
+    scopedValue() {
+      return this.title.slice(this.splitScopedLabelIndex + 2);
+    },
+    labelComponent() {
+      return this.target ? GlLink : 'span';
+    },
+    tooltipTarget() {
+      return this.target ? this.$refs.labelTitle.$el : this.$refs.labelTitle;
+    },
+  },
+  watch: {
+    title() {
+      this.splitScopedLabelIndex = this.title.lastIndexOf('::');
+    },
+  },
+  methods: {
+    onClick(e) {
+      /**
+       * Emitted when label is clicked
+       *
+       * @event click
+       * @type {object}
+       */
+      this.$emit('click', e);
+    },
+    onClose(e) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close', e);
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="gl-label" :class="cssClasses" :style="cssVariables" v-bind="$attrs" @click="onClick">
+    <component
+      :is="labelComponent"
+      ref="labelTitle"
+      :href="target ? target : false"
+      class="gl-label-link"
+      :class="{ 'gl-label-link-underline': target }"
+      tabindex="0"
+    >
+      <span class="gl-label-text">
+        {{ scopedKey }}
+      </span>
+      <span v-if="scoped && scopedValue" class="gl-label-text-scoped">
+        {{ scopedValue }}
+      </span>
+    </component>
+    <gl-button
+      v-if="showCloseButton"
+      class="gl-label-close !gl-p-0"
+      category="tertiary"
+      size="small"
+      variant="reset"
+      aria-label="Remove label"
+      :disabled="disabled"
+      @click="onClose"
+    >
+      <gl-icon name="close-xs" :size="12" />
+    </gl-button>
+    <gl-tooltip
+      v-if="description"
+      :target="() => tooltipTarget"
+      :placement="tooltipPlacement"
+      boundary="viewport"
+    >
+      <span v-if="scoped" class="gl-label-tooltip-title">Scoped label</span>
+      {{ description }}
+    </gl-tooltip>
+  </span>
+</template>

package/src/components/base/link/link.md

@@ -0,0 +1,22 @@
+## Security
+
+This component implements a few security measures to make it as safe as possible by default.
+See [SafeLinkDirective docs] for more details.
+
+### Linking to an unsafe URL
+
+If you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering
+a download link with a [Data URL] for example), you'll need to bypass the `href` attribute's
+sanitization. This component exposes the `is-unsafe-link` prop for that purpose.
+
+> **Warning:** Only disable URL sanitization when absolutely necessary.
+
+```html
+<gl-link
+  is-unsafe-link
+  download="file.txt"
+  href="data:text/plain;charset=utf-8,GitLab%20is%20awesome">Download</gl-link>
+```
+
+[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default
+[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

package/src/components/base/link/link.scss

@@ -0,0 +1,13 @@
+.gl-link {
+  &,
+  &:hover {
+    @apply gl-text-link;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    @apply gl-underline;
+    @include gl-focus($outline: true, $outline-offset: $outline-width);
+  }
+}

package/src/components/base/link/link.vue

@@ -0,0 +1,25 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
+import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+
+export default {
+  name: 'GlLink',
+  components: {
+    BLink,
+  },
+  mixins: [SafeLinkMixin],
+};
+</script>
+<template>
+  <b-link
+    v-safe-link:[safeLinkConfig]
+    v-bind="$attrs"
+    :target="target"
+    class="gl-link"
+    v-on="$listeners"
+  >
+    <!-- @slot The link to display. -->
+    <slot></slot>
+  </b-link>
+</template>

package/src/components/base/loading_icon/loading_icon.md

@@ -0,0 +1,3 @@
+## Under the hood
+
+Loading icon uses pure css to render a spinner or an ellipsis loader.

package/src/components/base/loading_icon/loading_icon.scss

@@ -0,0 +1,139 @@
+$gl-loader-dots-size-sm: 0.375rem;
+$gl-loader-dots-size-md: 0.5rem;
+$gl-loader-dots-size-lg: 0.75rem;
+$gl-loader-dots-size-xl: 1rem;
+
+@mixin gl-tmp-spinner-size($size, $border-width) {
+  width: $size;
+  height: $size;
+  border-width: $border-width;
+  transform-origin: 50% 50% calc((#{$size} / 2) + #{$border-width});
+}
+
+@mixin gl-tmp-dots-color($color) {
+  &::before,
+  > span,
+  &::after {
+    background-color: $color;
+  }
+}
+
+@mixin gl-tmp-dots-size($size) {
+  &::before,
+  > span,
+  &::after {
+    width: $size;
+    height: $size;
+    margin-right: calc(#{$size} / 2);
+  }
+}
+
+.gl-spinner-container {
+  @apply gl-leading-0;
+  @apply gl-text-center;
+}
+
+.gl-spinner {
+  position: relative;
+  @apply gl-inline-flex;
+  @apply gl-rounded-full;
+  @apply gl-border-solid;
+  @apply gl-mx-auto;
+  @apply gl-my-0;
+  @apply gl-text-base;
+
+  animation-name: gl-spinner-rotate;
+  animation-duration: 0.6s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+
+  // default size
+  @include gl-tmp-spinner-size($gl-spacing-scale-5, $gl-border-size-2);
+
+  &.gl-spinner-md {
+    @include gl-tmp-spinner-size($gl-spacing-scale-6, $gl-border-size-3);
+  }
+
+  &.gl-spinner-lg {
+    @include gl-tmp-spinner-size($gl-spacing-scale-7, $gl-border-size-3);
+  }
+
+  &.gl-spinner-xl {
+    @include gl-tmp-spinner-size($gl-spacing-scale-11, $gl-border-size-4);
+  }
+
+  &.gl-spinner-dark {
+    // This is the default variant we use on normal (light) backgrounds.
+    // This variant changes its colors automatically for dark mode.
+    border-color: var(--gl-spinner-track-color-default);
+    border-top-color: var(--gl-spinner-segment-color-default);
+  }
+
+  &.gl-spinner-light {
+    // This is the variant we use on backgrounds that are dark even in light mode.
+    // This varient doesn't change its colors for dark mode.
+    border-color: var(--gl-spinner-track-color-light);
+    border-top-color: var(--gl-spinner-segment-color-light);
+  }
+}
+
+.gl-dots-loader {
+  @apply gl-leading-0;
+  @apply gl-text-center;
+}
+
+.gl-dots-loader {
+  &::before,
+  > span,
+  &::after {
+    content: '';
+
+    display: inline-block;
+    border-radius: 100%;
+    animation: gl-dots-loader-animation 1400ms ease-in-out infinite;
+    animation-fill-mode: both;
+  }
+
+  &::before {
+    animation-delay: -0.3s;
+  }
+
+  > span {
+    animation-delay: -0.15s;
+  }
+
+  &::after {
+    margin-right: 0 !important;
+  }
+
+  // default size
+  @include gl-tmp-dots-size($gl-loader-dots-size-sm);
+
+  &.gl-dots-loader {
+    @include gl-tmp-dots-color(var(--gl-icon-color-subtle));
+  }
+
+  &.gl-dots-loader-md {
+    @include gl-tmp-dots-size($gl-loader-dots-size-md);
+  }
+
+  &.gl-dots-loader-lg {
+    @include gl-tmp-dots-size($gl-loader-dots-size-lg);
+  }
+
+  &.gl-dots-loader-xl {
+    @include gl-tmp-dots-size($gl-loader-dots-size-xl);
+  }
+}
+
+@keyframes gl-dots-loader-animation {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

package/src/components/base/loading_icon/loading_icon.vue

@@ -0,0 +1,96 @@
+<script>
+const sizes = [
+  'sm', // -> 16px
+  'md', // -> 24px
+  'lg', // -> 32px
+  'xl', // -> 64px
+];
+const colors = {
+  dark: 'dark',
+  light: 'light',
+};
+const defaultColor = colors.dark;
+
+export default {
+  name: 'GlLoadingIcon',
+  props: {
+    /**
+     * Aria-label.
+     */
+    label: {
+      type: String,
+      required: false,
+      default: 'Loading',
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'sm',
+      validator(value) {
+        return sizes.indexOf(value) !== -1;
+      },
+    },
+    color: {
+      type: String,
+      required: false,
+      default: defaultColor,
+      validator(value) {
+        return Object.keys(colors).includes(value);
+      },
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'spinner',
+      validator(value) {
+        return ['spinner', 'dots'].includes(value);
+      },
+    },
+    /**
+     * Wrap in a span or div.
+     */
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    rootElementType() {
+      return this.inline ? 'span' : 'div';
+    },
+    spinnerCssClasses() {
+      const baseCssClass = 'gl-spinner';
+
+      return [
+        baseCssClass,
+        `${baseCssClass}-${colors[this.color]}`,
+        `${baseCssClass}-${this.size}`,
+      ];
+    },
+    dotsCssClasses() {
+      const baseCssClass = 'gl-dots-loader';
+
+      return [
+        baseCssClass,
+        `${baseCssClass}-${colors[this.color]}`,
+        `${baseCssClass}-${this.size}`,
+      ];
+    },
+  },
+};
+</script>
+<template>
+  <component
+    :is="rootElementType"
+    v-if="variant === 'spinner'"
+    :aria-label="label"
+    class="gl-spinner-container"
+    role="status"
+  >
+    <span class="!gl-align-text-bottom" :class="spinnerCssClasses"></span>
+  </component>
+  <component :is="rootElementType" v-else :class="dotsCssClasses" role="status" :aria-label="label">
+    <span></span>
+  </component>
+</template>

package/src/components/base/markdown/markdown.md

@@ -0,0 +1,73 @@
+The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown
+[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
+
+## Usage
+
+You can use the `GlMarkdown` component in two ways.
+
+### Vue component
+
+```html
+<script>
+import { GlMarkdown } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlMarkdown,
+  }
+}
+</script>
+<template>
+  <gl-markdown>
+    <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->
+  </gl-markdown>
+</template>
+```
+
+### `gl-markdown` class selector
+
+Follow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)
+to include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class
+selector to the root element that contains the markdown-generated HTML.
+
+```html
+<body class="gl-markdown">
+  <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->
+</body>
+```
+
+### Compact markdown
+
+Set the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.
+
+```html
+<gl-markdown compact></gl-compact>
+```
+
+You can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated
+HTML.
+
+```html
+<body class="gl-markdown gl-compact-markdown">
+</body>
+```
+
+<!--
+## Browser compatibility
+
+If the component requires any polyfill or fallback on certain browsers, describe those requirements
+here.
+-->
+
+<!--
+## Edge cases
+
+If the component has some known limitations, describe them here.
+-->
+
+<!--
+## Deprecation warning
+
+If and when this component introduced API changes that would require deprecating old APIs, describe
+the changes here, and provide a migration paths to the new API.
+-->