@gitlab/duo-ui 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

@@ -1,135 +0,0 @@
-/*
- * --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;
-  }
-}