@gitlab/duo-ui 0.1.0

package/src/components/base/path/path.scss

@@ -0,0 +1,163 @@
+// Variables
+$path-chevron-z-index: -1;
+$path-chevron-top: px-to-rem(4px);
+$path-chevron-right: px-to-rem(-12px);
+$path-chevron-dimension: px-to-rem(24px);
+$path-chevron-border-radius: px-to-rem(10px);
+$path-chevron-tip-border-radius: px-to-rem(2px);
+$path-button-right-padding: 1.25 * $grid-size;
+$path-chevron-transformation: rotate(45deg) skew(14deg, 14deg);
+$path-chevron-right-margin: px-to-rem(14px);
+
+// Mixins
+@mixin gl-path-chevron {
+  @apply gl-bg-inherit;
+  content: '';
+  position: absolute;
+  top: $path-chevron-top;
+  right: $path-chevron-right;
+  width: $path-chevron-dimension;
+  z-index: $path-chevron-z-index;
+  height: $path-chevron-dimension;
+  transform: $path-chevron-transformation;
+  border-top-left-radius: $path-chevron-border-radius;
+  border-bottom-right-radius: $path-chevron-border-radius;
+  border-top-right-radius: $path-chevron-tip-border-radius;
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+}
+
+.gl-path-nav {
+  position: relative;
+  @apply gl-flex;
+
+  .gl-path-nav-list {
+    @apply gl-p-1;
+    @apply gl-m-0;
+    @apply gl-list-none;
+    @apply gl-inline-flex;
+    @apply gl-overflow-hidden;
+    margin-left: -1px;
+    position: relative;
+  }
+
+  .gl-path-nav-list-item {
+    @apply gl-min-w-fit;
+    padding-top: 1px;
+    padding-bottom: 1px;
+
+    // Fix for custom focus
+    &:first-of-type {
+      padding-left: 1px;
+    }
+  }
+
+  .gl-path-button {
+    @apply gl-pl-5;
+    @apply gl-py-3;
+    @apply gl-flex;
+    @apply gl-text-base;
+    @apply gl-z-0;
+    @apply gl-font-bold;
+    @apply gl-leading-normal;
+    @apply gl-rounded-tl-base;
+    @apply gl-rounded-bl-base;
+    @apply gl-border-none;
+    background-color: var(--gl-action-neutral-background-color-default);
+    color: var(--gl-action-neutral-foreground-color-default);
+    margin-right: $path-chevron-right-margin;
+    padding-right: $path-button-right-padding;
+    position: relative;
+
+    &::before,
+    &::after {
+      @include gl-path-chevron;
+    }
+
+    // Pseudo focus element
+    &::before {
+      background-color: var(--gl-color-alpha-0);
+      display: none;
+      z-index: 2;
+      right: calc(-0.75rem + 1px);
+      box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
+      clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%);
+      transform: rotate(45deg) skew(14deg, 14deg) scale(0.99);
+    }
+
+    &:hover {
+      background-color: var(--gl-action-neutral-background-color-hover);
+      color: var(--gl-action-neutral-foreground-color-hover);
+    }
+
+    &:focus {
+      background-color: var(--gl-action-neutral-background-color-focus);
+      color: var(--gl-action-neutral-foreground-color-focus);
+    }
+
+    &:active {
+      background-color: var(--gl-action-neutral-background-color-active);
+      color: var(--gl-action-neutral-foreground-color-active);
+    }
+
+    &:active,
+    &:focus,
+    &:focus:active {
+      // Custom focus to account for path shape
+      box-shadow: 5px -3px 0 -2px var(--gl-focus-ring-inner-color), 5px 3px 0 -2px var(--gl-focus-ring-inner-color), 0 0 0 1px var(--gl-focus-ring-inner-color),
+        0 0 0 3px var(--gl-focus-ring-outer-color);
+      outline: none;
+      border-top-right-radius: 1px;
+      border-bottom-right-radius: 1px;
+
+      &::before {
+        display: block;
+      }
+    }
+
+    &.gl-path-active-item {
+      background-color: var(--gl-action-selected-background-color-default);
+      color: var(--gl-action-selected-foreground-color-default);
+    }
+
+    &:disabled {
+      @apply gl-cursor-not-allowed;
+      background-color: var(--gl-color-alpha-0);
+      box-shadow: none;
+      color: var(--gl-action-disabled-foreground-color);
+
+      &::before {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .gl-path-fade {
+    @apply gl-w-8;
+    @apply gl-h-full;
+    @apply gl-z-2;
+    bottom: 0;
+    color: var(--gl-text-color-subtle);
+    position: absolute;
+
+    &-left {
+      left: 0;
+      @include gl-bg-gradient-blur(left, var(--path-bg-color));
+    }
+
+    &-right {
+      right: 0;
+      @apply gl-text-right;
+      @include gl-bg-gradient-blur(right, var(--path-bg-color));
+    }
+  }
+
+  .gl-clear-icon-button {
+    @apply gl-p-0;
+    @apply gl-h-full;
+    color: var(--gl-icon-color-subtle);
+
+    .gl-icon {
+      @apply gl-align-middle;
+    }
+  }
+}

package/src/components/base/path/path.vue

@@ -0,0 +1,191 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
+import uniqueId from 'lodash/uniqueId';
+import findLast from 'lodash/findLast';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import GlIcon from '../icon/icon.vue';
+
+const BOUNDARY_WIDTH = 40;
+const PATH_ITEM_CLASS = 'gl-path-button';
+const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';
+
+export default {
+  name: 'GlPath',
+  components: {
+    GlIcon,
+  },
+  directives: {
+    GlResizeObserverDirective,
+  },
+  props: {
+    /**
+     * A list of path items in the form:
+     * ```
+     * {
+     *   title:    String, required
+     *   metric:   Any, optional
+     *   icon:     String, optional
+     *   disabled: Boolean, optional
+     * }
+     * ```
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * The items' background color.
+     */
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: 'rgba(0,0,0,0)',
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+      width: 0,
+      scrollLeft: 0,
+    };
+  },
+  computed: {
+    entireListVisible() {
+      return this.width >= this.getScrollWidth();
+    },
+    displayScrollLeft() {
+      return !this.entireListVisible && this.scrollLeft;
+    },
+    displayScrollRight() {
+      const scrollOffset = this.getScrollWidth() - this.width;
+      return !this.entireListVisible && scrollOffset !== this.scrollLeft;
+    },
+    rightHandBoundary() {
+      return this.width - BOUNDARY_WIDTH + this.scrollLeft;
+    },
+    leftHandBoundary() {
+      return this.scrollLeft + BOUNDARY_WIDTH;
+    },
+  },
+  watch: {
+    items: {
+      immediate: true,
+      handler(items) {
+        const selectedIndex = items.findIndex((item) => item.selected);
+        this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
+      },
+    },
+  },
+  beforeCreate() {
+    this.pathUuid = uniqueId('path-');
+  },
+  methods: {
+    pathItemClass(index) {
+      return index === this.selectedIndex
+        ? `${PATH_ITEM_CLASS} ${PATH_ACTIVE_ITEM_CLASS}`
+        : PATH_ITEM_CLASS;
+    },
+    onItemClicked(selectedIndex) {
+      this.selectedIndex = selectedIndex;
+      /**
+       * Emitted when an item is selected.
+       */
+      this.$emit('selected', this.items[this.selectedIndex]);
+    },
+    handleResize({ contentRect: { width } }) {
+      this.width = width;
+    },
+    scrollPathLeft() {
+      const previousItemToScollTo = findLast(this.$refs.pathListItems, (listItem) => {
+        return listItem.offsetLeft < this.leftHandBoundary;
+      });
+
+      const availableWidth =
+        this.width - previousItemToScollTo.offsetWidth - BOUNDARY_WIDTH - BOUNDARY_WIDTH;
+
+      let scrollTo = previousItemToScollTo.offsetLeft - BOUNDARY_WIDTH - availableWidth;
+
+      if (scrollTo < 0) {
+        scrollTo = 0;
+      }
+      this.scrollPath(scrollTo);
+    },
+    scrollPathRight() {
+      const nextItemToScollTo = this.$refs.pathListItems.find(
+        (listItem) => listItem.offsetLeft + listItem.offsetWidth > this.rightHandBoundary
+      );
+      let scrollTo = nextItemToScollTo.offsetLeft - BOUNDARY_WIDTH;
+
+      if (scrollTo > this.getScrollWidth() - this.width) {
+        scrollTo = this.getScrollWidth() - this.width;
+      }
+      this.scrollPath(scrollTo);
+    },
+    scrollPath(scrollTo) {
+      this.$refs.pathNavList.scrollTo({ left: scrollTo, behavior: 'smooth' });
+      this.scrollLeft = scrollTo;
+    },
+    getScrollWidth() {
+      return this.$refs.pathNavList ? this.$refs.pathNavList.scrollWidth : 0;
+    },
+    shouldDisplayIcon(icon) {
+      return icon && iconSpriteInfo.icons.includes(icon);
+    },
+    pathId(index) {
+      return `${this.pathUuid}-item-${index}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-gl-resize-observer-directive="handleResize"
+    class="gl-path-nav"
+    :style="{ '--path-bg-color': backgroundColor }"
+    data-testid="gl-path-nav"
+  >
+    <span v-show="displayScrollLeft" class="gl-path-fade gl-path-fade-left">
+      <button class="gl-clear-icon-button" aria-label="Scroll left" @click="scrollPathLeft">
+        <gl-icon :size="32" name="chevron-left" />
+      </button>
+    </span>
+    <ul ref="pathNavList" class="gl-path-nav-list">
+      <li
+        v-for="(item, index) in items"
+        :id="pathId(index)"
+        ref="pathListItems"
+        :key="index"
+        class="gl-path-nav-list-item"
+      >
+        <button
+          :class="pathItemClass(index)"
+          :category="item.disabled ? 'tertiary' : undefined"
+          :disabled="item.disabled"
+          @click="onItemClicked(index)"
+        >
+          <gl-icon
+            v-if="shouldDisplayIcon(item.icon)"
+            :name="item.icon"
+            class="gl-mr-2"
+            data-testid="gl-path-item-icon"
+          />{{ item.title
+          }}<span v-if="item.metric" class="gl-pl-2 gl-font-normal">{{ item.metric }}</span>
+        </button>
+        <!--
+          @slot Additional content to be displayed in a path item.
+          @binding {Object} pathItem The path item being rendered.
+          @binding {String} pathId The rendered path item's ID.
+        -->
+        <slot :path-item="item" :path-id="pathId(index)"></slot>
+      </li>
+    </ul>
+    <span v-show="displayScrollRight" class="gl-path-fade gl-path-fade-right">
+      <button class="gl-clear-icon-button" aria-label="Scroll right" @click="scrollPathRight">
+        <gl-icon :size="32" name="chevron-right" />
+      </button>
+    </span>
+  </div>
+</template>

package/src/components/base/popover/popover.scss

@@ -0,0 +1,102 @@
+// variables
+// Popover max width 280px
+$gl-popover-max-width: $grid-size * 35;
+
+.gl-popover {
+  max-width: $gl-popover-max-width;
+  @apply gl-border-none;
+  @apply gl-shadow-md;
+  @apply gl-text-sm;
+
+  &,
+  .popover-header {
+    background-color: var(--gl-background-color-overlap);
+  }
+
+  .popover-body {
+    color: var(--gl-text-color-default);
+  }
+
+  &.bs-popover-top {
+    /* When popover position is top, the arrow is translated 1 pixel
+    *  due to the box-shadow include in our custom styles.
+    */
+    > .arrow::before {
+      bottom: 1px;
+      border-top-color: var(--gl-background-color-overlap);
+    }
+
+    > .arrow::after {
+      bottom: 2px;
+      border-top-color: var(--gl-background-color-overlap);
+    }
+  }
+
+  &.bs-popover-bottom {
+    > .arrow::before {
+      top: 1px;
+      border-bottom-color: var(--gl-background-color-overlap);
+    }
+
+    > .arrow::after {
+      top: 2px;
+      border-bottom-color: var(--gl-background-color-overlap);
+    }
+
+    > .popover-header::before {
+      border-color: var(--gl-background-color-overlap);
+    }
+  }
+
+  &.bs-popover-right {
+    > .arrow::before {
+      left: 1px;
+      border-right-color: var(--gl-background-color-overlap);
+    }
+
+    > .arrow::after {
+      left: 2px;
+      border-right-color: var(--gl-background-color-overlap);
+    }
+  }
+
+  &.bs-popover-left {
+    > .arrow::before {
+      right: 1px;
+      border-left-color: var(--gl-background-color-overlap);
+    }
+
+    > .arrow::after {
+      right: 2px;
+      border-left-color: var(--gl-background-color-overlap);
+    }
+  }
+
+  .popover-header {
+    color: var(--gl-text-color-heading);
+    @apply gl-heading-scale-200;
+    @apply gl-border-b-0;
+    @apply gl-pb-0;
+  }
+
+  &.has-title .popover-header {
+    @apply gl-hyphens-auto gl-break-anywhere;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &.has-close-button:not(.has-title) .popover-header {
+    padding-top: $gl-spacing-scale-2;
+  }
+
+  .popover-body {
+    @apply gl-py-3;
+    @apply gl-px-4;
+
+    > .popover-hr {
+      @apply gl-my-5;
+      @apply gl-mx-0;
+    }
+  }
+}

package/src/components/base/popover/popover.vue

@@ -0,0 +1,111 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BPopover } from '../../../vendor/bootstrap-vue/src/components/popover/popover';
+import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
+import { popoverPlacements } from '../../../utils/constants';
+
+const popoverRefName = 'bPopover';
+
+export default {
+  name: 'GlPopover',
+  components: {
+    BPopover,
+    CloseButton,
+  },
+  mixins: [tooltipMixin(popoverRefName)],
+  inheritAttrs: false,
+  props: {
+    cssClasses: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    /**
+     * Space-separated triggers for the popover.
+     *
+     * @values click, hover, focus, manual
+     */
+    triggers: {
+      type: String,
+      required: false,
+      default: 'hover focus',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.top,
+    },
+    boundaryPadding: {
+      type: [Number, String],
+      required: false,
+      default: 5,
+    },
+  },
+  computed: {
+    hasTitle() {
+      return this.$scopedSlots.title || this.title;
+    },
+    customClass() {
+      return [
+        'gl-popover',
+        this.hasTitle && 'has-title',
+        this.showCloseButton && 'has-close-button',
+        ...this.cssClasses,
+      ]
+        .filter(Boolean)
+        .join(' ');
+    },
+    shouldShowTitle() {
+      return this.hasTitle || this.showCloseButton;
+    },
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      /**
+       * Emitted when the close button is clicked (requires showCloseButton to be `true`).
+       */
+      this.$emit('close-button-clicked', e);
+    },
+  },
+  popoverRefName,
+};
+</script>
+
+<template>
+  <b-popover
+    :ref="$options.popoverRefName"
+    :custom-class="customClass"
+    :triggers="triggers"
+    :title="title"
+    :placement="placement"
+    :boundary-padding="boundaryPadding"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-if="shouldShowTitle" #title>
+      <slot name="title">
+        {{ title }}
+      </slot>
+      <div v-if="showCloseButton" class="-gl-mr-3 -gl-mt-2 gl-ml-3 gl-h-0">
+        <close-button
+          :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
+          data-testid="close-button"
+          @click="close"
+        />
+      </div>
+    </template>
+    <slot></slot>
+  </b-popover>
+</template>

package/src/components/base/progress_bar/progress_bar.scss

@@ -0,0 +1,19 @@
+.gl-progress-bar {
+  background-color: var(--gl-progress-bar-track-color);
+
+  .bg-primary {
+    background-color: var(--gl-progress-bar-indicator-color-default) !important;
+  }
+
+  .bg-success {
+    background-color: var(--gl-progress-bar-indicator-color-success) !important;
+  }
+
+  .bg-warning {
+    background-color: var(--gl-progress-bar-indicator-color-warning) !important;
+  }
+
+  .bg-danger {
+    background-color: var(--gl-progress-bar-indicator-color-danger) !important;
+  }
+}

package/src/components/base/progress_bar/progress_bar.vue

@@ -0,0 +1,15 @@
+<script>
+import { BProgress } from '../../../vendor/bootstrap-vue/src/components/progress/progress';
+
+export default {
+  name: 'GlProgressBar',
+  components: {
+    BProgress,
+  },
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <b-progress v-bind="$attrs" class="gl-progress-bar" />
+</template>

package/src/components/base/search_box_by_click/search_box_by_click.md

@@ -0,0 +1 @@
+Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -0,0 +1,49 @@
+.gl-search-box-by-click {
+  @apply gl-text-base;
+
+  .gl-search-box-by-click-history > .gl-button {
+    padding-left: $gl-spacing-scale-4 !important;
+    padding-right: $gl-spacing-scale-3 !important;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    @if $feature-button-border {
+      border-color: var(--gl-border-color-strong);
+    } @else {
+      @apply gl-border-none;
+      @include gl-inset-border-1-gray-400;
+    }
+  }
+
+  .gl-search-box-by-click-search-button.gl-button:not(:disabled) {
+    @if $feature-button-border {
+      border-color: var(--gl-border-color-strong);
+    } @else {
+      @include gl-inset-border-1-gray-400;
+    }
+  }
+
+  .gl-search-box-by-click-input {
+    &::-webkit-search-cancel-button {
+      @apply gl-hidden;
+    }
+  }
+
+  .gl-search-box-by-click-clear-button {
+    position: absolute;
+    top: $gl-spacing-scale-2;
+    right: $gl-spacing-scale-2;
+    @apply gl-mr-2;
+    @apply gl-z-3;
+  }
+}
+
+.gl-search-box-by-click-with-search-button {
+  .gl-search-box-by-click-input {
+    @apply gl-pr-7;
+  }
+
+  .gl-search-box-by-click-clear-button {
+    right: $gl-spacing-scale-7;
+  }
+}