@gitlab/duo-ui 0.1.0

package/src/components/base/banner/banner.scss

@@ -0,0 +1,35 @@
+.gl-banner {
+  background-color: var(--gl-banner-promo-background-color);
+  border-color: var(--gl-banner-promo-border-color);
+}
+
+.gl-banner-illustration {
+  @apply gl-shrink-0;
+  @apply gl-mr-6;
+
+  img {
+    max-width: $grid-size * 15;
+  }
+
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}
+
+.gl-banner-title {
+  @apply gl-heading-scale-500;
+  @apply gl-mb-3;
+  color: var(--gl-text-color-heading);
+}
+
+.gl-banner-close {
+  position: absolute;
+  top: $gl-spacing-scale-3;
+  right: $gl-spacing-scale-3;
+}
+
+// Introduction variant
+.gl-banner-introduction {
+  background-color: var(--gl-feedback-info-background-color);
+  border-color: var(--gl-banner-intro-border-color);
+}

package/src/components/base/banner/banner.vue

@@ -0,0 +1,131 @@
+<script>
+import { bannerVariants } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
+import GlButton from '../button/button.vue';
+import GlCard from '../card/card.vue';
+
+export default {
+  name: 'GlBanner',
+  components: {
+    CloseButton,
+    GlButton,
+    GlCard,
+  },
+  props: {
+    /**
+     * Used to set the title of the banner.
+     */
+    title: {
+      type: String,
+      required: true,
+    },
+    /**
+     * HTML attributes to add to the submit button.
+     */
+    buttonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    /**
+     * Text for the submit button.
+     */
+    buttonText: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Link for the submit button.
+     */
+    buttonLink: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The illustration's URL.
+     */
+    svgPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The variant of the banner.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: bannerVariants[0],
+      validator(value) {
+        return bannerVariants.includes(value);
+      },
+    },
+    /**
+     * The close button's label, it is used for the button's aria-label attribute.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlBanner.closeButtonTitle', 'Dismiss'),
+    },
+  },
+  computed: {
+    isIntroducing() {
+      return this.variant === bannerVariants[1];
+    },
+  },
+  methods: {
+    handleClose() {
+      /**
+       * Emitted when the close button is clicked.
+       *
+       * @event close
+       * @type {object}
+       */
+      this.$emit('close');
+    },
+    primaryButtonClicked() {
+      /**
+       * Emitted when the primary action button is clicked.
+       *
+       * @event primary
+       * @type {object}
+       */
+      this.$emit('primary');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-card
+    class="gl-banner gl-py-6 gl-pl-6 gl-pr-8"
+    :class="{
+      'gl-banner-introduction': isIntroducing,
+    }"
+    body-class="gl-flex !gl-p-0"
+  >
+    <div v-if="svgPath" class="gl-banner-illustration">
+      <img :src="svgPath" alt="" />
+    </div>
+    <div class="gl-banner-content">
+      <h2 class="gl-banner-title">{{ title }}</h2>
+      <!-- @slot The banner content to display -->
+      <slot></slot>
+      <gl-button
+        variant="confirm"
+        category="primary"
+        data-testid="gl-banner-primary-button"
+        :href="buttonLink"
+        v-bind="buttonAttributes"
+        @click="primaryButtonClicked"
+        >{{ buttonText }}</gl-button
+      >
+      <!-- @slot The banner actions to display -->
+      <slot name="actions"></slot>
+    </div>
+    <close-button class="gl-banner-close" :label="dismissLabel" @click="handleClose" />
+  </gl-card>
+</template>

package/src/components/base/breadcrumb/breadcrumb.md

@@ -0,0 +1,23 @@
+## Usage
+
+This component also allows for optional avatars on each item.
+
+`avatarPath` should passed along with `text` and `href` in `items`.
+Here is an example of how an item with an avatar should look:
+
+**note:** the component supports passing the property `to` in the list items to enable navigation
+through `vue-router`
+
+### Example
+
+```js
+items = [
+  {
+    text: 'First item',
+    href: '#',
+    avatarPath: '/avatar.png',
+  },
+];
+
+<gl-breadcrumb :items="items" />
+```

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -0,0 +1,62 @@
+// Breadcrumb max width 128px
+$breadcrumb-max-width: $grid-size * 16;
+
+.gl-breadcrumbs {
+  @apply gl-flex;
+}
+
+.gl-breadcrumb-list {
+  @apply gl-bg-transparent;
+  @apply gl-p-0;
+  @apply gl-items-center;
+  @apply gl-leading-normal;
+  @apply gl-m-0;
+  @apply gl-flex-nowrap;
+  @apply gl-max-w-full;
+}
+
+// bootstrap overrides
+.gl-breadcrumb-item {
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
+  @apply gl-shrink-0;
+
+  &:not(:last-child)::after {
+    color: var(--gl-breadcrumb-separator-color);
+    @apply gl-px-3;
+    content: '/';
+  }
+
+  > a {
+    @apply gl-inline-block;
+    border-radius: $gl-border-radius-base;
+    color: var(--gl-text-color-subtle);
+    text-decoration-thickness: auto;
+    text-decoration-style: solid;
+    text-decoration-color: transparent;
+    @include gl-prefers-reduced-motion-transition;
+    transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
+                text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
+
+    &:hover {
+      text-decoration-color: currentColor;
+    }
+
+    &:active,
+    &:focus,
+    &:focus:active {
+      @apply gl-focus;
+    }
+  }
+
+  @if $feature-button-border {
+    .gl-new-dropdown-icon-only.gl-button.btn-icon {
+      min-height: auto;
+    }
+  }
+}
+
+.gl-breadcrumb-item:last-child > a {
+  color: var(--gl-text-color-default);
+  @apply gl-font-bold;
+}

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -0,0 +1,229 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import debounce from 'lodash/debounce';
+import { BBreadcrumb } from '../../../vendor/bootstrap-vue/src/components/breadcrumb/breadcrumb';
+import { translate } from '../../../utils/i18n';
+import GlAvatar from '../avatar/avatar.vue';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlBreadcrumbItem from './breadcrumb_item.vue';
+
+export default {
+  name: 'GlBreadcrumb',
+  components: {
+    BBreadcrumb,
+    GlBreadcrumbItem,
+    GlAvatar,
+    GlDisclosureDropdown,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The breadcrumb items to be displayed as links.
+     */
+    items: {
+      type: Array,
+      required: true,
+      default: () => [{ text: '', href: '' }],
+      validator: (items) => {
+        return items.every((item) => {
+          const keys = Object.keys(item);
+          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+        });
+      },
+    },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: 'Breadcrumb',
+    },
+    /**
+     * The label for the collapsed dropdown toggle. Screen-reader only.
+     */
+    showMoreLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlBreadcrumb.showMoreLabel', 'Show more breadcrumbs'),
+    },
+    /**
+     * Allows to disable auto-resize behavior. Items will then overflow their container instead of being collapsed into a dropdown.
+     */
+    autoResize: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      fittingItems: [...this.items], // array of items that fit on the screen
+      overflowingItems: [], // array of items that didn't fit and were put in a dropdown instead
+      totalBreadcrumbsWidth: 0, // the total width of all breadcrumb items combined
+      widthPerItem: [], // array with the indivudal widths of each breadcrumb item
+      resizeDone: false, // to apply some CSS only during/after resizing
+    };
+  },
+  computed: {
+    hasCollapsible() {
+      return this.overflowingItems.length > 0;
+    },
+    breadcrumbStyle() {
+      return this.resizeDone ? {} : { opacity: 0 };
+    },
+    itemStyle() {
+      /**
+       * If the last/only item, which is always visible, has a very long title,
+       * it could overflow the breadcrumb component. This CSS makes sure it
+       * shows an ellipsis instead.
+       * But this CSS cannot be active while we do the size calculation, as that
+       * would then not take the real unshrunk width of that item into account.
+       */
+      if (this.resizeDone && this.fittingItems.length === 1) {
+        return {
+          'flex-shrink': 1,
+          'text-overflow': 'ellipsis',
+          'overflow-x': 'hidden',
+          'text-wrap': 'nowrap',
+        };
+      }
+      return {};
+    },
+  },
+  watch: {
+    items: {
+      handler: 'measureAndMakeBreadcrumbsFit',
+      deep: true,
+    },
+    autoResize(newValue) {
+      if (newValue) this.enableAutoResize();
+      else this.disableAutoResize();
+    },
+  },
+  created() {
+    this.debounceMakeBreadcrumbsFit = debounce(this.makeBreadcrumbsFit, 25);
+  },
+  mounted() {
+    if (this.autoResize) {
+      this.enableAutoResize();
+    } else {
+      this.resizeDone = true;
+    }
+  },
+  beforeDestroy() {
+    this.disableAutoResize();
+  },
+  methods: {
+    resetItems() {
+      this.fittingItems = [...this.items];
+      this.overflowingItems = [];
+    },
+    async measureAndMakeBreadcrumbsFit() {
+      this.resetItems();
+      if (!this.autoResize) return;
+      this.resizeDone = false;
+
+      // Wait for DOM update so all items get rendered and can be measured.
+      await this.$nextTick();
+
+      this.totalBreadcrumbsWidth = 0;
+
+      if (!this.$refs.breadcrumbs) return;
+
+      this.$refs.breadcrumbs.forEach((b, index) => {
+        const width = b.$el.clientWidth;
+        this.totalBreadcrumbsWidth += width;
+        this.widthPerItem[index] = width;
+      });
+
+      this.makeBreadcrumbsFit();
+    },
+    makeBreadcrumbsFit() {
+      this.resizeDone = false;
+      this.resetItems();
+
+      const containerWidth = this.$el.clientWidth;
+      const buttonWidth = 40; // px
+
+      if (this.totalBreadcrumbsWidth > containerWidth) {
+        // Not all breadcrumb items fit. Start moving items over to the dropdown.
+        const startSlicingAt = 0;
+
+        // The last item will never be moved into the dropdown.
+        const stopSlicingAt = this.items.length - 1;
+
+        let widthNeeded = this.totalBreadcrumbsWidth;
+        for (let index = startSlicingAt; index < stopSlicingAt; index += 1) {
+          // Move one breadcrumb item into the dropdown
+          this.overflowingItems.push(this.fittingItems[startSlicingAt]);
+          this.fittingItems.splice(startSlicingAt, 1);
+
+          widthNeeded -= this.widthPerItem[index];
+
+          // Does it fit now? Then stop.
+          if (widthNeeded + buttonWidth < containerWidth) break;
+        }
+      }
+
+      this.resizeDone = true;
+    },
+    isLastItem(index) {
+      return index === this.fittingItems.length - 1;
+    },
+    getAriaCurrentAttr(index) {
+      return this.isLastItem(index) ? 'page' : false;
+    },
+    enableAutoResize() {
+      this.resizeObserver ||= new ResizeObserver(this.debounceMakeBreadcrumbsFit);
+      this.resizeObserver.observe(this.$el);
+      this.measureAndMakeBreadcrumbsFit();
+    },
+    disableAutoResize() {
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(this.$el);
+        this.resizeObserver = null;
+      }
+      this.resetItems();
+    },
+  },
+};
+</script>
+<template>
+  <nav class="gl-breadcrumbs" :aria-label="ariaLabel" :style="breadcrumbStyle">
+    <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
+      <li v-if="hasCollapsible" class="gl-breadcrumb-item">
+        <gl-disclosure-dropdown
+          :items="overflowingItems"
+          :toggle-text="showMoreLabel"
+          fluid-width
+          text-sr-only
+          no-caret
+          icon="ellipsis_h"
+          size="small"
+        />
+      </li>
+
+      <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
+      <gl-breadcrumb-item
+        v-for="(item, index) in fittingItems"
+        ref="breadcrumbs"
+        :text="item.text"
+        :href="item.href"
+        :style="itemStyle"
+        :to="item.to"
+        :aria-current="getAriaCurrentAttr(index)"
+        ><gl-avatar
+          v-if="item.avatarPath"
+          :src="item.avatarPath"
+          :size="16"
+          aria-hidden="true"
+          class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-base"
+          shape="rect"
+          data-testid="avatar"
+        /><span>{{ item.text }}</span>
+      </gl-breadcrumb-item>
+    </b-breadcrumb>
+  </nav>
+</template>

package/src/components/base/breadcrumb/breadcrumb_item.vue

@@ -0,0 +1,44 @@
+<script>
+import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
+
+export default {
+  name: 'GlBreadcrumbItem',
+  components: {
+    BLink,
+  },
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    to: {
+      type: [String, Object],
+      required: false,
+      default: null,
+    },
+    href: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    ariaCurrent: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+      validator(value) {
+        return [false, 'page'].indexOf(value) !== -1;
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <li class="gl-breadcrumb-item">
+    <b-link :href="href" :to="to" :aria-current="ariaCurrent">
+      <slot>{{ text }}</slot>
+    </b-link>
+  </li>
+</template>

package/src/components/base/broadcast_message/broadcast_message.md

@@ -0,0 +1,25 @@
+Broadcast messages provide an efficient and prominent way to deliver critical messages at the
+instance level to all users. For example, a broadcast message can be used when an admin wants to
+announce that their platform will experience downtime during a specific period.
+
+In comparison with an alert, broadcast messages are created by an admin and not triggered by the
+system.
+
+Please refer to [Pajamas' documentation](https://design.gitlab.com/components/broadcast-message)
+for more information on when to use this component.
+
+## Dismiss a broadcast message
+
+The `GlBroadcastMessage` component deals with users dismissal the same way `GlAlert` does, meaning
+it does not handle its own visibility but emits a `dismiss` event that the parent component should
+listen to in order to hide the message. Example:
+
+```html
+<template>
+  ...
+  <gl-broadcast-message v-if="!dismissed" @dismiss="dismissed = true">
+    An important message
+  </gl-broadcast-message>
+  ...
+</template>
+```

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -0,0 +1,135 @@
+/*
+ * --gl-broadcast-message-padding-x
+ *
+ * Way to hook into spacing of gl-alert.
+ * This is used e.g. for page wide containers
+ * in GitLab.
+ */
+// stylelint-disable length-zero-no-unit
+$gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
+
+.gl-broadcast-message {
+  @apply gl-flex;
+  @apply gl-justify-between;
+  @apply gl-items-start;
+  @apply gl-text-base;
+  @apply gl-leading-20;
+  padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-broadcast-message-padding-x});
+  padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-broadcast-message-padding-x});
+  @apply gl-py-5;
+
+  &.indigo {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-indigo);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-indigo);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-indigo);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-indigo);
+  }
+
+  &.light-indigo {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightindigo);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightindigo);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightindigo);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightindigo);
+  }
+
+  &.blue {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-blue);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-blue);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-blue);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-blue);
+  }
+
+  &.light-blue {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightblue);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightblue);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightblue);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightblue);
+  }
+
+  &.green {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-green);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-green);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-green);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-green);
+  }
+
+  &.light-green {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightgreen);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightgreen);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightgreen);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightgreen);
+  }
+
+  &.red {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-red);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-red);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-red);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-red);
+  }
+
+  &.light-red {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-lightred);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-lightred);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-lightred);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-lightred);
+  }
+
+  &.dark {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-dark);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-dark);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-dark);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-dark);
+  }
+
+  &.light {
+    --gl-broadcast-message-bg-color: var(--gl-broadcast-banner-background-color-light);
+    --gl-broadcast-message-border-color: var(--gl-broadcast-banner-border-color-light);
+    --gl-broadcast-message-text-color: var(--gl-broadcast-banner-text-color-light);
+    --gl-broadcast-message-icon-color: var(--gl-broadcast-banner-icon-color-light);
+  }
+
+  &.banner {
+    background-color: var(--gl-broadcast-message-bg-color);
+    box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);
+    color: var(--gl-broadcast-message-text-color);
+
+    .gl-broadcast-message-icon {
+      color: var(--gl-broadcast-message-icon-color);
+    }
+  }
+
+  &.notification {
+    @apply gl-rounded-base;
+    @apply gl-border;
+    @apply gl-shadow-x0-y2-b4-s0;
+    background-color: var(--gl-background-color-default);
+    color: var(--gl-text-color-default);
+    max-width: $gl-broadcast-message-notification-max-width;
+  }
+
+  &-content {
+    @apply gl-flex;
+    @apply gl-justify-center;
+  }
+
+  &-icon {
+    @apply gl-mr-5;
+    line-height: $gl-line-height-16;
+
+    > svg {
+      @apply gl-align-bottom;
+    }
+  }
+
+  &-text {
+    margin-top: -$gl-spacing-scale-1;
+    margin-bottom: -$gl-spacing-scale-1;
+    @apply gl-hyphens-auto gl-break-anywhere;
+  }
+
+  &-dismiss {
+    @apply -gl-my-2;
+    @apply gl-ml-5;
+    color: inherit !important;
+  }
+}