@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,156 +0,0 @@
-$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

@@ -1,160 +0,0 @@
-<!-- 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

@@ -1,22 +0,0 @@
-## 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

@@ -1,13 +0,0 @@
-.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

@@ -1,25 +0,0 @@
-<!-- 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

@@ -1,3 +0,0 @@
-## 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

@@ -1,139 +0,0 @@
-$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

@@ -1,96 +0,0 @@
-<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

@@ -1,73 +0,0 @@
-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.
--->