@gitlab/duo-ui 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

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

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