@gitlab/duo-ui 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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