@gitlab/duo-ui 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

@@ -1,49 +0,0 @@
-.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;
-  }
-}