@gitlab/duo-ui 0.1.0

package/src/components/base/avatar_link/avatar_link.scss

@@ -0,0 +1,41 @@
+.gl-avatar-link {
+  @apply gl-inline-flex;
+
+  .gl-avatar {
+    @apply gl-transition-border-color;
+    @apply gl-duration-slow;
+    @apply gl-ease-ease;
+  }
+
+  &:hover {
+    @apply gl-no-underline;
+
+    .gl-avatar {
+      outline: 1px solid var(--gl-avatar-border-color-hover);
+    }
+
+    .gl-avatar-labeled {
+      &-label {
+        @apply gl-underline;
+        @apply gl-decoration-gray-900;
+      }
+
+      &-sublabel {
+        @apply gl-underline;
+        @apply gl-decoration-gray-500;
+      }
+    }
+  }
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    // allow the focus ring to be placed on the avatar image instead of parent anchor so that the focus ring takes the rounded shapes of the avatars
+    box-shadow: none !important;
+    outline: none !important;
+
+    .gl-avatar {
+      @apply gl-focus;
+    }
+  }
+}

package/src/components/base/avatar_link/avatar_link.vue

@@ -0,0 +1,15 @@
+<script>
+import GlLink from '../link/link.vue';
+
+export default {
+  name: 'AvatarLink',
+  components: {
+    GlLink,
+  },
+};
+</script>
+<template>
+  <gl-link class="gl-avatar-link" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+  </gl-link>
+</template>

package/src/components/base/avatars_inline/avatars_inline.md

@@ -0,0 +1,38 @@
+Use `<avatars-inline />` to display multiple avatars organized in a single row.
+
+### Basic usage
+
+The `avatars` property accepts an array of objects that contains the avatar properties. By default,
+`<avatars-inline />` expects each object contained in the array to have the same shape as the
+properties of the `<avatar />` component. You can customize the display of each avatar by
+overriding the default slot:
+
+```html
+<gl-avatars-inline :avatars="avatars">
+  <template #avatar="{ avatar }">
+    <gl-avatar-link v-gl-tooltip target="blank" :href="avatar.href" :title="avatar.tooltip">
+      <gl-avatar :src="avatar.src" :size="32" />
+    </gl-avatar-link>
+  </template>
+</gl-avatars-inline>
+```
+
+In the example above, the avatars displayed inside `<avatars-inline />` are links pointing to a URL
+stored in each avatar object. Each avatar also displays a tooltip. If you override
+`<inline-avatars />` default display, you can pass an array of objects with any desired shape to
+the `avatars` property.
+
+### Collapsing
+
+When the `collapse` property value is `true` and the `maxVisible` property value is a number less
+than the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars
+and display a badge instead.
+
+### Badge description in screen readers
+
+The `badgeSrOnlyText` property provides a meaningful description of the badge that appears
+when avatars are collapsed for screen reader users.
+
+### Supported sizes
+
+`<avatars-inline>` supports avatars with `16`, `24`, or `32` size.

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -0,0 +1,64 @@
+.gl-avatars-inline {
+  // Set a default and get the radius
+  --avatar-size: 24px;
+  --avatar-radius: calc(var(--avatar-size) * 0.5);
+  // Position the mask
+  --mask-offset: calc(var(--avatar-size) * -0.25);
+  // Mask size plus border cutout effect
+  --mask-cutout: calc(var(--avatar-radius) + 1.5px);
+
+  @apply gl-inline-flex;
+}
+
+.gl-avatars-inline-sm {
+  --avatar-size: 16px;
+}
+
+.gl-avatars-inline-md {
+  --avatar-size: 24px;
+}
+
+.gl-avatars-inline-lg {
+  --avatar-size: 32px;
+}
+
+.gl-avatars-inline-child {
+  @apply gl-inline-flex;
+
+  // Don't include the badge
+  &:not(:last-child) {
+    margin-right: var(--mask-offset);
+    mask: radial-gradient(circle at calc(var(--avatar-size) * 1.25) center, transparent var(--mask-cutout), white 0);
+
+    &:hover+.gl-avatars-inline-child>.gl-avatar-link,
+    &:hover+.gl-avatars-inline-child>.gl-avatars-inline-badge {
+      mask: radial-gradient(circle at var(--mask-offset) center, transparent var(--mask-cutout), white 0);
+    }
+  }
+
+  // Remove mask on hovered or focused avatar and bring it forward
+  &:not(:last-child):hover,
+  &:not(:last-child):focus-within {
+    @apply gl-z-1;
+    mask: none;
+  }
+}
+
+.gl-avatars-inline-badge {
+  @apply gl-inline-flex;
+  @apply gl-items-center;
+  @apply gl-justify-center;
+  @apply gl-text-sm;
+  @apply gl-px-2;
+  @apply gl-leading-normal;
+  @apply gl-rounded-pill;
+  background-color: var(--gl-status-neutral-background-color);
+  color: var(--gl-status-neutral-text-color);
+  height: var(--avatar-size);
+  min-width: var(--avatar-size);
+
+  &.lg {
+    @apply gl-text-base;
+    @apply gl-rounded-6;
+  }
+}

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -0,0 +1,110 @@
+<script>
+import truncate from 'lodash/truncate';
+import get from 'lodash/get';
+import { avatarsInlineSizeOptions } from '../../../utils/constants';
+import GlAvatar from '../avatar/avatar.vue';
+import GlTooltip from '../tooltip/tooltip.vue';
+
+export default {
+  name: 'AvatarsInline',
+  components: {
+    GlAvatar,
+    GlTooltip,
+  },
+  props: {
+    avatars: {
+      type: Array,
+      required: true,
+    },
+    maxVisible: {
+      type: Number,
+      required: true,
+    },
+    avatarSize: {
+      type: Number,
+      required: true,
+      validator: (value) => avatarsInlineSizeOptions.includes(value),
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    badgeSrOnlyText: {
+      type: String,
+      required: true,
+    },
+    badgeTooltipProp: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    badgeTooltipMaxChars: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    hiddenAvatars() {
+      return this.avatars.slice(this.maxVisible);
+    },
+    collapsable() {
+      return this.hiddenAvatars.length > 0;
+    },
+    visibleAvatars() {
+      return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
+    },
+    badgeSize() {
+      return (
+        {
+          16: 'sm',
+          24: 'md',
+          32: 'lg',
+        }[this.avatarSize] || 'lg'
+      );
+    },
+    badgeLabel() {
+      return `+${this.hiddenAvatars.length}`;
+    },
+    badgeTooltipTitle() {
+      if (!this.badgeTooltipProp) {
+        return '';
+      }
+
+      const tooltipTitle = this.hiddenAvatars
+        .map((avatar) => get(avatar, this.badgeTooltipProp, '').trim())
+        .join(', ');
+
+      // truncate will append '...'
+      // we need to take these extra 3 characters into account in badgeTooltipMaxChars
+      return this.badgeTooltipMaxChars
+        ? truncate(tooltipTitle, { length: this.badgeTooltipMaxChars })
+        : tooltipTitle;
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-avatars-inline" :class="`gl-avatars-inline-${badgeSize}`">
+    <div v-for="(avatar, index) in visibleAvatars" :key="index" class="gl-avatars-inline-child">
+      <slot name="avatar" :avatar="avatar">
+        <gl-avatar v-bind="avatar" :size="avatarSize" />
+      </slot>
+    </div>
+    <div v-if="collapsed && collapsable" class="gl-avatars-inline-child">
+      <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
+        {{ badgeTooltipTitle }}
+      </gl-tooltip>
+      <span
+        ref="badge"
+        data-testid="collapsed-avatars-badge"
+        :class="['gl-avatars-inline-badge', badgeSize]"
+        aria-hidden="true"
+      >
+        {{ badgeLabel }}
+      </span>
+      <span data-testid="badge-sr-only-text" class="gl-sr-only">{{ badgeSrOnlyText }}</span>
+    </div>
+  </div>
+</template>

package/src/components/base/badge/badge.md

@@ -0,0 +1,38 @@
+Badges highlight metadata of objects, the kind of information that always needs
+some context and isn’t useful on its own. For example, they can be used to
+indicate an issue’s status, a member’s role, or if a branch is protected.
+
+## Usage
+
+```html
+<gl-badge>Hello, world!</gl-badge>
+```
+
+> Note: Native support for icons in badges will be added in a future version.
+
+### Using icon-only badges
+
+When a badge only has an icon and no slot content, be sure to set the `aria-label` attribute of the
+badge for best accessibility.
+
+```html
+<!-- bad -->
+<gl-badge icon="eye" />
+
+<!-- good -->
+<gl-badge icon="eye" aria-label="Mark as confidential" />
+```
+
+## Edge cases
+
+While this component is based on
+[`BBadge`](https://bootstrap-vue.org/docs/components/badge) from
+`bootstrap-vue`, it is not a drop-in replacement. Specifically, this component:
+
+- Has a different set of valid `variant`s. See the examples or props
+   documentation for those values.
+- Always sets the `pill` prop of the underlying
+[`BBadge`](https://bootstrap-vue.org/docs/components/badge) to `true`. Any passed
+   in `pill` prop value is ignored.
+- Does _not_ scale itself to match the size of its immediate parent, like
+   [`BBadge`](https://bootstrap-vue.org/docs/components/badge) does.

package/src/components/base/badge/badge.scss

@@ -0,0 +1,251 @@
+$badge-padding-horizontal: 0.75 * $grid-size;
+$badge-min-width: $gl-spacing-scale-3;
+
+@mixin gl-badge-variant(
+  $variant,
+  $color,
+  $icon-color,
+  $background-color,
+  $hover-color,
+  $hover-icon-color,
+  $hover-background-color,
+  $hover-border-color,
+  $focus-color,
+  $focus-icon-color,
+  $focus-background-color,
+  $active-color,
+  $active-icon-color,
+  $active-background-color
+) {
+  .gl-badge.badge-#{$variant} {
+    background-color: $background-color;
+    color: $color;
+
+    .gl-badge-icon {
+      color: $icon-color;
+      transition: inherit;
+    }
+  }
+
+  a.gl-badge.badge-#{$variant} {
+    &:hover {
+      color: $hover-color;
+      // Needed to override bootstrap's badge variant background
+      background-color: $hover-background-color;
+      box-shadow: inset 0 0 0 $gl-border-size-1 $hover-border-color;
+      @apply gl-no-underline;
+
+      .gl-badge-icon {
+        color: $hover-icon-color;
+      }
+    }
+
+
+    &:focus {
+      color: $focus-color;
+      background-color: $focus-background-color;
+
+      .gl-badge-icon {
+        color: $focus-icon-color;
+      }
+    }
+
+    &.active,
+    &:active {
+      color: $active-color;
+      background-color: $active-background-color;
+
+      .gl-badge-icon {
+        color: $active-icon-color;
+      }
+    }
+
+    &:active,
+    &:focus,
+    &:focus:active {
+      @apply gl-focus;
+    }
+  }
+}
+
+/* Basic badge styles */
+
+.gl-badge {
+  @apply gl-text-sm;
+  @apply gl-font-normal;
+  @apply gl-leading-normal;
+
+  /*
+    CSS Grid is used here to deal with 3 cases:
+      * Badge shouldn't shrink inside flex containers by default
+      * Content inside the badge should shrink when gl-text-truncate class is used on the contents
+      * Badge should have a minimal width of 20 pixels (for example when `1` is passed inside the slot)
+   */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $gl-spacing-scale-2;
+  padding: $gl-spacing-scale-1 $badge-padding-horizontal;
+  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
+              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+
+  &:has(.gl-truncate, .gl-text-truncate) {
+    max-width: 100%;
+  }
+
+  @media (prefers-reduced-motion) {
+    transition-duration: .01ms !important;
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
+  .gl-badge-icon {
+    @apply gl-h-5;
+    @apply gl-w-5;
+    @apply gl-shrink-0;
+    top: auto;
+  }
+
+  .gl-badge-content {
+    display: flex;
+    justify-content: center;
+    min-width: $badge-min-width;
+  }
+}
+
+/* Variants */
+
+@include gl-badge-variant(
+  $variant: muted,
+  $color: var(--gl-badge-muted-text-color-default),
+  $icon-color: var(--gl-badge-muted-icon-color-default),
+  $background-color: var(--gl-badge-muted-background-color-default),
+  $hover-color: var(--gl-badge-muted-text-color-hover),
+  $hover-icon-color: var(--gl-badge-muted-icon-color-hover),
+  $hover-background-color: var(--gl-badge-muted-background-color-hover),
+  $hover-border-color: var(--gl-badge-muted-border-color-hover),
+  $focus-color: var(--gl-badge-muted-text-color-focus),
+  $focus-icon-color:var(--gl-badge-muted-icon-color-focus),
+  $focus-background-color: var(--gl-badge-muted-background-color-focus),
+  $active-color: var(--gl-badge-muted-text-color-active),
+  $active-icon-color:var(--gl-badge-muted-icon-color-active),
+  $active-background-color: var(--gl-badge-muted-background-color-active)
+);
+
+@include gl-badge-variant(
+  $variant: neutral,
+  $color: var(--gl-badge-neutral-text-color-default),
+  $icon-color: var(--gl-badge-neutral-icon-color-default),
+  $background-color: var(--gl-badge-neutral-background-color-default),
+  $hover-color: var(--gl-badge-neutral-text-color-hover),
+  $hover-icon-color: var(--gl-badge-neutral-icon-color-hover),
+  $hover-background-color: var(--gl-badge-neutral-background-color-hover),
+  $hover-border-color: var(--gl-badge-neutral-border-color-hover),
+  $focus-color: var(--gl-badge-neutral-text-color-focus),
+  $focus-icon-color:var(--gl-badge-neutral-icon-color-focus),
+  $focus-background-color: var(--gl-badge-neutral-background-color-focus),
+  $active-color: var(--gl-badge-neutral-text-color-active),
+  $active-icon-color:var(--gl-badge-neutral-icon-color-active),
+  $active-background-color: var(--gl-badge-neutral-background-color-active)
+);
+
+@include gl-badge-variant(
+  $variant: info,
+  $color: var(--gl-badge-info-text-color-default),
+  $icon-color: var(--gl-badge-info-icon-color-default),
+  $background-color: var(--gl-badge-info-background-color-default),
+  $hover-color: var(--gl-badge-info-text-color-hover),
+  $hover-icon-color: var(--gl-badge-info-icon-color-hover),
+  $hover-background-color: var(--gl-badge-info-background-color-hover),
+  $hover-border-color: var(--gl-badge-info-border-color-hover),
+  $focus-color: var(--gl-badge-info-text-color-focus),
+  $focus-icon-color:var(--gl-badge-info-icon-color-focus),
+  $focus-background-color: var(--gl-badge-info-background-color-focus),
+  $active-color: var(--gl-badge-info-text-color-active),
+  $active-icon-color:var(--gl-badge-info-icon-color-active),
+  $active-background-color: var(--gl-badge-info-background-color-active)
+);
+
+@include gl-badge-variant(
+  $variant: success,
+  $color: var(--gl-badge-success-text-color-default),
+  $icon-color: var(--gl-badge-success-icon-color-default),
+  $background-color: var(--gl-badge-success-background-color-default),
+  $hover-color: var(--gl-badge-success-text-color-hover),
+  $hover-icon-color: var(--gl-badge-success-icon-color-hover),
+  $hover-background-color: var(--gl-badge-success-background-color-hover),
+  $hover-border-color: var(--gl-badge-success-border-color-hover),
+  $focus-color: var(--gl-badge-success-text-color-focus),
+  $focus-icon-color:var(--gl-badge-success-icon-color-focus),
+  $focus-background-color: var(--gl-badge-success-background-color-focus),
+  $active-color: var(--gl-badge-success-text-color-active),
+  $active-icon-color:var(--gl-badge-success-icon-color-active),
+  $active-background-color: var(--gl-badge-success-background-color-active)
+);
+
+@include gl-badge-variant(
+  $variant: warning,
+  $color: var(--gl-badge-warning-text-color-default),
+  $icon-color: var(--gl-badge-warning-icon-color-default),
+  $background-color: var(--gl-badge-warning-background-color-default),
+  $hover-color: var(--gl-badge-warning-text-color-hover),
+  $hover-icon-color: var(--gl-badge-warning-icon-color-hover),
+  $hover-background-color: var(--gl-badge-warning-background-color-hover),
+  $hover-border-color: var(--gl-badge-warning-border-color-hover),
+  $focus-color: var(--gl-badge-warning-text-color-focus),
+  $focus-icon-color:var(--gl-badge-warning-icon-color-focus),
+  $focus-background-color: var(--gl-badge-warning-background-color-focus),
+  $active-color: var(--gl-badge-warning-text-color-active),
+  $active-icon-color:var(--gl-badge-warning-icon-color-active),
+  $active-background-color: var(--gl-badge-warning-background-color-active)
+);
+
+@include gl-badge-variant(
+  $variant: danger,
+  $color: var(--gl-badge-danger-text-color-default),
+  $icon-color: var(--gl-badge-danger-icon-color-default),
+  $background-color: var(--gl-badge-danger-background-color-default),
+  $hover-color: var(--gl-badge-danger-text-color-hover),
+  $hover-icon-color: var(--gl-badge-danger-icon-color-hover),
+  $hover-background-color: var(--gl-badge-danger-background-color-hover),
+  $hover-border-color: var(--gl-badge-danger-border-color-hover),
+  $focus-color: var(--gl-badge-danger-text-color-focus),
+  $focus-icon-color:var(--gl-badge-danger-icon-color-focus),
+  $focus-background-color: var(--gl-badge-danger-background-color-focus),
+  $active-color: var(--gl-badge-danger-text-color-active),
+  $active-icon-color:var(--gl-badge-danger-icon-color-active),
+  $active-background-color: var(--gl-badge-danger-background-color-active)
+);
+
+@include gl-badge-variant(
+  $variant: tier,
+  $color: var(--gl-badge-tier-text-color-default),
+  $icon-color: var(--gl-badge-tier-icon-color-default),
+  $background-color: var(--gl-badge-tier-background-color-default),
+  $hover-color: var(--gl-badge-tier-text-color-hover),
+  $hover-icon-color: var(--gl-badge-tier-icon-color-hover),
+  $hover-background-color: var(--gl-badge-tier-background-color-hover),
+  $hover-border-color: var(--gl-badge-tier-border-color-hover),
+  $focus-color: var(--gl-badge-tier-text-color-focus),
+  $focus-icon-color:var(--gl-badge-tier-icon-color-focus),
+  $focus-background-color: var(--gl-badge-tier-background-color-focus),
+  $active-color: var(--gl-badge-tier-text-color-active),
+  $active-icon-color:var(--gl-badge-tier-icon-color-active),
+  $active-background-color: var(--gl-badge-tier-background-color-active)
+);
+
+// overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
+.gl-button .gl-badge {
+  top: 0;
+  @apply gl-py-0;
+  @apply gl-px-2;
+}
+
+.gl-new-dropdown-contents .gl-badge,
+.gl-tab-nav-item .gl-badge {
+  @apply -gl-my-1;
+}

package/src/components/base/badge/badge.vue

@@ -0,0 +1,91 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BBadge } from '../../../vendor/bootstrap-vue/src/components/badge/badge';
+import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
+import GlIcon from '../icon/icon.vue';
+
+export default {
+  name: 'GlBadge',
+  components: {
+    BBadge,
+    GlIcon,
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The variant of the badge.
+     */
+    variant: {
+      type: String,
+      default: badgeVariantOptions.muted,
+      validator(value) {
+        return badgeVariantOptions[value] !== undefined;
+      },
+      required: false,
+    },
+    /**
+     * The icon to show next to the text
+     */
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The size of the icon 16 or 12
+     */
+    iconSize: {
+      type: String,
+      default: 'md',
+      validator: (value) => Object.keys(badgeIconSizeOptions).includes(value),
+      required: false,
+    },
+  },
+  computed: {
+    hasIconOnly() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
+    },
+    isCircularIcon() {
+      return ['issue-open-m', 'issue-close'].includes(this.icon);
+    },
+    role() {
+      return this.hasIconOnly ? 'img' : undefined;
+    },
+    ariaLabel() {
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'];
+      }
+
+      return this.role === 'img' ? this.icon : undefined;
+    },
+    iconSizeComputed() {
+      return badgeIconSizeOptions[this.iconSize];
+    },
+  },
+};
+</script>
+
+<template>
+  <b-badge
+    v-bind="$attrs"
+    :variant="variant"
+    class="gl-badge"
+    :class="{ '!gl-px-2': !$scopedSlots.default }"
+    :role="role"
+    :aria-label="ariaLabel"
+    pill
+  >
+    <gl-icon
+      v-if="icon"
+      class="gl-badge-icon"
+      :size="iconSizeComputed"
+      :class="{ '-gl-ml-2': isCircularIcon }"
+      :name="icon"
+    />
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
+    <span v-if="$slots.default" class="gl-badge-content">
+      <slot></slot>
+    </span>
+  </b-badge>
+</template>

package/src/components/base/banner/banner.md

@@ -0,0 +1,35 @@
+## Dismiss
+
+Users are able to permanently dismiss banners by default.
+Banners may also be dismissed temporarily, depending on the use case.
+
+### Permanent dismissal
+
+The dismiss action is always represented by the `Close` icon and anchored
+to the top right of the banner.
+
+Banner dismissal should work as follows:
+
+* Banner dismissal must be associated with the user in the system database.
+  Dismissal must persist, even across version upgrades and clients.
+* Banners do not reappear by default. In rare circumstances, you may present the
+  banner again to a user after some time has passed.
+* Banners should only be shown to users who are logged in.
+
+**Implementation Notes:**
+
+* The dismissal of the banner is achieved using the `UserCallout` model on the backend and the
+  `PersistentUserCallout` JS file on the frontend. If both parameters are implemented correctly, the
+  banner will adhere to the dismissal guidelines above.
+
+### Temporary dismissal
+
+To introduce temporary dismissal, include a secondary or tertiary button placed alongside
+the primary action button. Follow the [button](https://design.gitlab.com/components/button#alignment)
+alignment and order guidelines.
+
+Temporary dismissals should work as follows:
+
+* Banners dismissed temporarily will reappear after **7 days**.
+* After a banner is dismissed temporarily, use a [toast](?path=/story/base-toast--default) message
+  to let the user know they will see the banner again in 7 days.