@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/animated_icon/animated_todo_icon.vue

@@ -1,49 +0,0 @@
-<script>
-import GlBaseAnimatedIcon from './base_animated_icon.vue';
-
-export default {
-  name: 'GlAnimatedTodoIcon',
-  extends: GlBaseAnimatedIcon,
-};
-</script>
-<template>
-  <svg
-    :class="iconStateClass"
-    :aria-label="ariaLabel"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      class="gl-animated-todo-box"
-      d="M14.25 6.75L14.25 13C14.25 13.6904 13.6904 14.25 13 14.25L3 14.25C2.30964 14.25 1.75 13.6904 1.75 13L1.75 3C1.75 2.30964 2.30964 1.75 3 1.75L13.25 1.75"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-    <path
-      class="gl-animated-todo-plus-line"
-      d="M10.75 3L15.25 3"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-    <path
-      class="gl-animated-todo-plus-line"
-      d="M13 5.25L13 0.75"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-    <path
-      class="gl-animated-todo-check"
-      d="M6.75 7.76299L9.15312 10.2469L15.25 4.15"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
-</template>

package/src/components/base/animated_icon/animated_upload_icon.vue

@@ -1,41 +0,0 @@
-<script>
-import GlBaseAnimatedIcon from './base_animated_icon.vue';
-
-export default {
-  name: 'GlAnimatedUploadIcon',
-  extends: GlBaseAnimatedIcon,
-};
-</script>
-<template>
-  <svg
-    :class="iconStateClass"
-    :aria-label="ariaLabel"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      class="gl-animated-upload-base"
-      d="M14.25 9.75V13C14.25 13.6904 13.6904 14.25 13 14.25L3 14.25C2.30964 14.25 1.75 13.6904 1.75 13L1.75 9.75"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-    <path
-      class="gl-animated-upload-line"
-      d="M8 11.25V2.5"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-    <path
-      class="gl-animated-upload-arrow"
-      d="M11.25 5.31066L8 2.06066L4.75 5.31066"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-    />
-  </svg>
-</template>

package/src/components/base/animated_icon/base_animated_icon.vue

@@ -1,39 +0,0 @@
-<script>
-export default {
-  name: 'GlBaseAnimatedIcon',
-  props: {
-    /**
-     * Accessible icon name used by screen readers and other assistive technologies.
-     * Provide when icon is not merely decorative
-     */
-    ariaLabel: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    isOn: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    iconStateClass() {
-      return this.isOn
-        ? 'gl-animated-icon gl-animated-icon-on'
-        : 'gl-animated-icon gl-animated-icon-off';
-    },
-  },
-};
-</script>
-<template>
-  <svg
-    :class="iconStateClass"
-    :aria-label="ariaLabel"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  />
-</template>

package/src/components/base/avatar/avatar.md

@@ -1 +0,0 @@
-Avatars are used to represent a unique entity, be it a person, a group, or a project.

package/src/components/base/avatar/avatar.scss

@@ -1,228 +0,0 @@
-// Available background colors for the identicon fallback for avatars
-//
-// Purple is duplicated on purpose. We have replaced indigo with it.
-// If we had simply removed it, the total number of colors would have
-// changed, resulting in changing the color of all identicons, because
-// we do a modulo division with the total number of colors on the
-// object's id to always give it the same "random" color.
-$gl-avatar-identicon-bgs: var(--gl-avatar-fallback-background-color-red),
-  var(--gl-avatar-fallback-background-color-purple),
-  var(--gl-avatar-fallback-background-color-purple), var(--gl-avatar-fallback-background-color-blue),
-  var(--gl-avatar-fallback-background-color-green),
-  var(--gl-avatar-fallback-background-color-orange),
-  var(--gl-avatar-fallback-background-color-neutral);
-
-$gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
-  var(--gl-avatar-fallback-text-color-purple),
-  var(--gl-avatar-fallback-text-color-purple), var(--gl-avatar-fallback-text-color-blue),
-  var(--gl-avatar-fallback-text-color-green),
-  var(--gl-avatar-fallback-text-color-orange),
-  var(--gl-avatar-fallback-text-color-neutral);
-
-@mixin gl-avatar {
-  @apply gl-inline-flex;
-  @apply gl-overflow-hidden;
-  @apply gl-shrink-0;
-  @apply gl-leading-1;
-  @apply gl-object-contain;
-  outline: 1px solid var(--gl-avatar-border-color-default);
-  outline-offset: -1px;
-}
-
-@mixin gl-avatar-s16 {
-  @apply gl-w-5;
-  @apply gl-h-5;
-  font-size: map-get($gl-font-sizes, 100);
-  @apply gl-rounded-small;
-}
-
-@mixin gl-avatar-s24 {
-  @apply gl-w-6;
-  @apply gl-h-6;
-  font-size: map-get($gl-font-sizes, 400);
-  @apply gl-rounded-base;
-}
-
-@mixin gl-avatar-s32 {
-  @apply gl-w-7;
-  @apply gl-h-7;
-  font-size: map-get($gl-font-sizes, 500);
-  @apply gl-rounded-base;
-}
-
-@mixin gl-avatar-s48 {
-  @apply gl-w-9;
-  @apply gl-h-9;
-  font-size: map-get($gl-font-sizes, 600);
-  @apply gl-rounded-lg;
-}
-
-@mixin gl-avatar-s64 {
-  @apply gl-w-11;
-  @apply gl-h-11;
-  font-size: map-get($gl-font-sizes, 700);
-  @apply gl-rounded-lg;
-}
-
-@mixin gl-avatar-s96 {
-  @apply gl-w-13;
-  @apply gl-h-13;
-  font-size: map-get($gl-font-sizes, 800);
-  @apply gl-rounded-lg;
-}
-
-.gl-avatar {
-  @include gl-avatar;
-}
-
-.gl-avatar-s16 {
-  @include gl-avatar-s16;
-}
-
-.gl-avatar-s24 {
-  @include gl-avatar-s24;
-}
-
-.gl-avatar-s32 {
-  @include gl-avatar-s32;
-}
-
-.gl-avatar-s48 {
-  @include gl-avatar-s48;
-}
-
-.gl-avatar-s64 {
-  @include gl-avatar-s64;
-}
-
-.gl-avatar-s96 {
-  @include gl-avatar-s96;
-}
-
-.gl-sm-avatar-s16 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-avatar-s16;
-  }
-}
-
-.gl-md-avatar-s16 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-avatar-s16;
-  }
-}
-
-.gl-lg-avatar-s16 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-avatar-s16;
-  }
-}
-
-.gl-sm-avatar-s24 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-avatar-s24;
-  }
-}
-
-.gl-md-avatar-s24 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-avatar-s24;
-  }
-}
-
-.gl-lg-avatar-s24 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-avatar-s24;
-  }
-}
-
-.gl-sm-avatar-s32 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-avatar-s32;
-  }
-}
-
-.gl-md-avatar-s32 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-avatar-s32;
-  }
-}
-
-.gl-lg-avatar-s32 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-avatar-s32;
-  }
-}
-
-.gl-sm-avatar-s48 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-avatar-s48;
-  }
-}
-
-.gl-md-avatar-s48 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-avatar-s48;
-  }
-}
-
-.gl-lg-avatar-s48 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-avatar-s48;
-  }
-}
-
-.gl-sm-avatar-s64 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-avatar-s64;
-  }
-}
-
-.gl-md-avatar-s64 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-avatar-s64;
-  }
-}
-
-.gl-lg-avatar-s64 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-avatar-s64;
-  }
-}
-
-.gl-sm-avatar-s96 {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-avatar-s96;
-  }
-}
-
-.gl-md-avatar-s96 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-avatar-s96;
-  }
-}
-
-.gl-lg-avatar-s96 {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-avatar-s96;
-  }
-}
-
-.gl-avatar-circle {
-  @apply gl-rounded-full;
-}
-
-.gl-avatar-identicon {
-  @apply gl-text-center;
-  @apply gl-align-top;
-  @apply gl-justify-center;
-  @apply gl-items-center;
-  color: var(--gl-text-color-strong);
-}
-
-// Background colors
-@for $i from 1 through length($gl-avatar-identicon-bgs) {
-  .gl-avatar-identicon-bg#{$i} {
-    color: nth($gl-avatar-identicon-texts, $i);
-    background-color: nth($gl-avatar-identicon-bgs, $i);
-  }
-}

package/src/components/base/avatar/avatar.vue

@@ -1,151 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import isNumber from 'lodash/isNumber';
-import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
-import { getAvatarChar } from '../../../utils/string_utils';
-
-const IDENTICON_BG_COUNT = 7;
-
-export default {
-  name: 'GlAvatar',
-  props: {
-    entityId: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    entityName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    src: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Show fallback identicon when image fails to load
-     */
-    fallbackOnError: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    alt: {
-      type: String,
-      required: false,
-      default: 'avatar',
-    },
-    size: {
-      type: [Number, Object],
-      required: false,
-      default: avatarSizeOptions[1],
-      validator: (value) => {
-        const sizes = isNumber(value) ? [value] : Object.values(value);
-
-        const areValidSizes = sizes.every((size) => {
-          const isValidSize = avatarSizeOptions.includes(size);
-
-          if (!isValidSize) {
-            /* eslint-disable-next-line no-console */
-            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
-          }
-
-          return isValidSize;
-        });
-
-        return areValidSizes;
-      },
-    },
-    shape: {
-      type: String,
-      required: false,
-      default: avatarShapeOptions.circle,
-    },
-  },
-  data() {
-    return {
-      imageLoadError: false,
-    };
-  },
-  computed: {
-    sizeClasses() {
-      if (isNumber(this.size)) {
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
-        return `gl-avatar-s${this.size}`;
-      }
-
-      const { default: defaultSize, ...nonDefaultSizes } = this.size;
-
-      return [
-        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
-        `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`,
-        ...Object.entries(nonDefaultSizes).map(
-          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
-          ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`
-        ),
-      ];
-    },
-    isCircle() {
-      return this.shape === avatarShapeOptions.circle;
-    },
-    identiconBackgroundClass() {
-      /*
-       * Gets a number between 1-7 depending on the 'entityId'.
-       * Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
-       */
-      const type = (this.entityId % IDENTICON_BG_COUNT) + 1;
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
-      return `gl-avatar-identicon-bg${type}`;
-    },
-    identiconText() {
-      return getAvatarChar(this.entityName);
-    },
-    showImage() {
-      // Don't show when image is not present
-      if (!this.src) {
-        return false;
-      }
-      // Don't show when fallbackOnError is true and there was failure to load image
-      if (this.src && this.fallbackOnError && this.imageLoadError) {
-        return false;
-      }
-      return true;
-    },
-  },
-  watch: {
-    src(newSrc, oldSrc) {
-      if (newSrc !== oldSrc) this.imageLoadError = false;
-    },
-  },
-  methods: {
-    handleLoadError(event) {
-      this.imageLoadError = true;
-      this.$emit('load-error', event);
-    },
-  },
-};
-</script>
-<template>
-  <img
-    v-if="showImage"
-    :src="src"
-    :alt="alt"
-    :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
-    @error="handleLoadError"
-    v-on="$listeners"
-  />
-  <div
-    v-else
-    :class="[
-      'gl-avatar gl-avatar-identicon',
-      { 'gl-avatar-circle': isCircle },
-      sizeClasses,
-      identiconBackgroundClass,
-    ]"
-    v-on="$listeners"
-  >
-    {{ identiconText }}
-  </div>
-</template>

package/src/components/base/avatar_labeled/avatar_labeled.md

@@ -1,20 +0,0 @@
-## Usage
-
-Avatars may also be adjacent to a text alternative, such as a user or project name. In these cases,
-a null `alt` text should be used so that they can be ignored by assistive technologies.
-
-Use the `avatar-labeled` component in those scenarios. It will set a null `alt` text by default.
-It allows to display a `label` and/or a `sub-label` next to the avatar image. It accepts the same
-properties as the avatar component to modify the avatar’s shape and size.
-
-## Using the component
-
-```js
-<gl-avatar-labeled
-  :shape="shape"
-  :size="size"
-  :src="src"
-  :label="label"
-  :sub-label="subLabel"
-/>
-```

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -1,30 +0,0 @@
-.gl-avatar-labeled {
-  @apply gl-inline-flex;
-
-  &-labels {
-    @apply gl-ml-3;
-    @apply gl-flex;
-    @apply gl-flex-col;
-    @apply gl-justify-center;
-    @apply gl-text-base;
-    @apply gl-leading-normal;
-    color: var(--gl-text-color-strong);
-  }
-
-  &-labels.inline-labels {
-    @apply gl-flex-row;
-    @apply gl-items-center;
-    @apply gl-gap-2;
-  }
-
-  &-label {
-    @apply gl-font-bold;
-    @apply gl-p-1;
-    color: var(--gl-text-color-strong);
-  }
-
-  &-sublabel {
-    color: var(--gl-text-color-subtle);
-    overflow-wrap: anywhere;
-  }
-}

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -1,92 +0,0 @@
-<script>
-import GlAvatar from '../avatar/avatar.vue';
-import GlLink from '../link/link.vue';
-
-export default {
-  name: 'GlAvatarLabeled',
-  components: {
-    GlAvatar,
-    GlLink,
-  },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    subLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    labelLink: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    subLabelLink: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    inlineLabels: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    hasLabelLink() {
-      return Boolean(this.labelLink);
-    },
-    hasSubLabelLink() {
-      return Boolean(this.subLabelLink);
-    },
-    avatarListeners() {
-      if (this.hasLabelLink) {
-        return {
-          ...this.$listeners,
-          click: this.onAvatarClick,
-        };
-      }
-
-      return this.$listeners;
-    },
-    avatarCssClasses() {
-      return {
-        'gl-cursor-pointer': this.hasLabelLink,
-      };
-    },
-    avatarRowLayoutClass() {
-      return {
-        'inline-labels': this.inlineLabels,
-      };
-    },
-  },
-  methods: {
-    onAvatarClick() {
-      this.$refs.labelLink.$el.click();
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-avatar-labeled">
-    <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
-    <div class="gl-avatar-labeled-labels !gl-text-left" :class="avatarRowLayoutClass">
-      <div class="-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left">
-        <gl-link v-if="hasLabelLink" ref="labelLink" :href="labelLink" class="gl-avatar-link">
-          <span class="gl-avatar-labeled-label">{{ label }}</span>
-        </gl-link>
-        <span v-else class="gl-avatar-labeled-label">{{ label }}</span>
-        <!-- @slot Metadata to add to the avatar. Generally used for badges or user status emoji. -->
-        <slot name="meta"></slot>
-      </div>
-      <gl-link v-if="hasSubLabelLink" :href="subLabelLink" class="gl-avatar-link">
-        <span class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
-      </gl-link>
-      <span v-else class="gl-avatar-labeled-sublabel">{{ subLabel }}</span>
-      <!-- @slot Add additional information below the avatar label. -->
-      <slot></slot>
-    </div>
-  </div>
-</template>

package/src/components/base/avatar_link/avatar_link.md

@@ -1,33 +0,0 @@
-`<gl-avatar-link>` decorates `<gl-avatar>` with hyperlink functionality. It accepts the same
-properties as the `<gl-link>` component and it works in the same way too. The main purpose of this
-component is to apply visual enhancements that makes evident that the user can interact with the
-avatar.
-
-## Using the component
-
-When wrapping an `<gl-avatar>` component, `<gl-avatar-link>` darkens
-the border that surrounds the avatar image or fallback text when hovering over it.
-
-```vue
-<gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
-  <gl-avatar
-    :size="32"
-    :src="avatarUrl"
-  />
-</gl-avatar-link>
-```
-
-When wrapping an `<avatar-labeled>` component, `<avatar-link>` underlines
-the label and sub-label text when hovering over the avatar. It also applies the
-same effects described in the first example.
-
-```vue
-<gl-avatar-link target="blank" href="https://gitlab.com/gitlab-org/gitlab">
-  <gl-avatar-labeled
-    :size="32"
-    entity-name="GitLab"
-    label="GitLab User"
-    sub-label="@gitlab"
-  />
-</gl-avatar-link>
-```