@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,345 +0,0 @@
-<script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
-import GlDatepicker from '../datepicker/datepicker.vue';
-import GlIcon from '../icon/icon.vue';
-import { datepickerWidthOptionsMap } from '../../../utils/constants';
-
-const CONTAINER_CLASSES = [
-  'gl-flex',
-  'gl-items-baseline',
-  'gl-flex-wrap',
-  'sm:gl-flex-nowrap',
-  'sm:gl-gap-3',
-];
-
-export default {
-  name: 'GlDaterangePicker',
-  components: {
-    GlDatepicker,
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    fromLabel: {
-      type: String,
-      required: false,
-      default: 'From',
-    },
-    toLabel: {
-      type: String,
-      required: false,
-      default: 'To',
-    },
-    value: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    i18n: {
-      type: Object,
-      required: false,
-      default: null,
-    },
-    defaultMinDate: {
-      type: Date,
-      required: false,
-      default: null,
-    },
-    defaultMaxDate: {
-      type: Date,
-      required: false,
-      default: null,
-    },
-    defaultStartDate: {
-      type: Date,
-      required: false,
-      default: null,
-    },
-    defaultEndDate: {
-      type: Date,
-      required: false,
-      default: null,
-    },
-    maxDateRange: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    startPickerClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    startPickerTarget: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    startPickerContainer: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    startPickerState: {
-      type: Boolean,
-      required: false,
-      default: null,
-    },
-    endPickerClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    endPickerTarget: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    endPickerContainer: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    endPickerState: {
-      type: Boolean,
-      required: false,
-      default: null,
-    },
-    labelClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    theme: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    sameDaySelection: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * If provided, renders an info icon with a tooltip.
-     */
-    tooltip: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Additional class(es) to apply to the date range indicator section.
-     */
-    dateRangeIndicatorClass: {
-      type: [String, Object, Array],
-      required: false,
-      default: '',
-    },
-    startOpened: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Maximum width of the Datepicker
-     */
-    width: {
-      type: String,
-      required: false,
-      default: null,
-      validator: (value) => Object.keys(datepickerWidthOptionsMap).includes(value),
-    },
-  },
-  data() {
-    return {
-      fromCalendarMaxDate: this.defaultMaxDate ? getDateInPast(this.defaultMaxDate, 1) : null,
-      startDate: this.defaultStartDate,
-      endDate: this.defaultEndDate,
-      openToCalendar: false,
-    };
-  },
-  computed: {
-    effectiveMaxDateRange() {
-      return this.sameDaySelection ? this.maxDateRange - 1 : this.maxDateRange;
-    },
-    toCalendarMinDate() {
-      if (!this.startDate) return null;
-
-      return this.sameDaySelection ? this.startDate : getDateInFuture(this.startDate, 1);
-    },
-    toCalendarMaxDate() {
-      if (!this.startDate || !this.maxDateRange) return this.defaultMaxDate;
-
-      const computedMaxEndDate = getDateInFuture(this.startDate, this.effectiveMaxDateRange);
-      return new Date(Math.min(computedMaxEndDate, this.defaultMaxDate));
-    },
-    dateRangeViolation() {
-      return this.startDate >= this.endDate || this.exceedsDateRange;
-    },
-    exceedsDateRange() {
-      if (this.numberOfDays < 0) {
-        return false;
-      }
-      return this.maxDateRange && this.numberOfDays > this.maxDateRange;
-    },
-    toCalendarDefaultDate() {
-      return this.endDate || this.toCalendarMinDate;
-    },
-    numericStartTime() {
-      return this.startDate ? this.startDate.getTime() : null;
-    },
-    numberOfDays() {
-      if (!this.startDate || !this.endDate) {
-        return -1;
-      }
-      const numberOfDays = getDayDifference(this.startDate, this.endDate);
-      return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
-    },
-    startContainerClasses() {
-      return [this.startPickerClass, ...CONTAINER_CLASSES];
-    },
-    endContainerClasses() {
-      return [this.endPickerClass, ...CONTAINER_CLASSES];
-    },
-    showIndicator() {
-      return Boolean(this.$scopedSlots.default || this.tooltip);
-    },
-  },
-  watch: {
-    value(val) {
-      const { startDate, endDate } = val;
-      this.startDate = startDate;
-      this.endDate = endDate;
-    },
-  },
-  methods: {
-    onStartDateSelected(startDate) {
-      this.startDate = startDate;
-
-      if (this.dateRangeViolation) {
-        this.openToCalendar = true;
-        this.endDate = null;
-      } else this.$emit('input', { startDate, endDate: this.endDate });
-    },
-    onEndDateSelected(endDate) {
-      this.openToCalendar = false;
-      this.endDate = endDate;
-      /**
-       * Emitted when start or end date selected with {startDate, endDate} value
-       *
-       * @event input
-       * */
-      this.$emit('input', { startDate: this.startDate, endDate });
-    },
-    onStartPickerOpen() {
-      /**
-       * Emitted when the primary action button is clicked.
-       *
-       * @event start-picker-open
-       * */
-      this.$emit('start-picker-open');
-    },
-    onStartPickerClose() {
-      /**
-       * Emitted when the start date datepicker is hidden.
-       *
-       * @event start-picker-close
-       * */
-      this.$emit('start-picker-close');
-    },
-    onEndPickerOpen() {
-      /**
-       * Emitted when the end date datepicker becomes visible.
-       *
-       * @event end-picker-open
-       * */
-      this.$emit('end-picker-open');
-    },
-    onEndPickerClose() {
-      /**
-       * Emitted when the end date datepicker is hidden.
-       *
-       * @event end-picker-close
-       * */
-      this.$emit('end-picker-close');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-daterange-picker gl-flex gl-gap-5">
-    <div :class="startContainerClasses" data-testid="daterange-picker-start-container">
-      <label :class="labelClass">{{ fromLabel }}</label>
-
-      <gl-datepicker
-        v-model="startDate"
-        :min-date="defaultMinDate"
-        :max-date="fromCalendarMaxDate"
-        :start-range="defaultMinDate"
-        :end-range="fromCalendarMaxDate"
-        :theme="theme"
-        :i18n="i18n"
-        :target="startPickerTarget"
-        :container="startPickerContainer"
-        :start-opened="startOpened"
-        :state="startPickerState"
-        :width="width"
-        @input="onStartDateSelected"
-        @open="onStartPickerOpen"
-        @close="onStartPickerClose"
-      >
-        <template #after>
-          <slot name="after-start"></slot>
-        </template>
-      </gl-datepicker>
-    </div>
-    <div :class="endContainerClasses" data-testid="daterange-picker-end-container">
-      <label :class="labelClass">{{ toLabel }}</label>
-      <gl-datepicker
-        :key="numericStartTime"
-        v-model="endDate"
-        :min-date="toCalendarMinDate"
-        :max-date="toCalendarMaxDate"
-        :start-range="toCalendarMinDate"
-        :end-range="toCalendarMaxDate"
-        :theme="theme"
-        :i18n="i18n"
-        :target="endPickerTarget"
-        :container="endPickerContainer"
-        :start-opened="openToCalendar"
-        :default-date="toCalendarDefaultDate"
-        :width="width"
-        :state="endPickerState"
-        @input="onEndDateSelected"
-        @open="onEndPickerOpen"
-        @close="onEndPickerClose"
-      >
-        <template #after>
-          <slot name="after-end"></slot>
-        </template>
-      </gl-datepicker>
-    </div>
-    <div
-      v-if="showIndicator"
-      :class="dateRangeIndicatorClass"
-      data-testid="daterange-picker-indicator"
-      class="gl-daterange-picker-indicator"
-    >
-      <!-- @slot Content to display for days selected. The value is -1 when no date range is selected.-->
-      <slot v-bind="{ daysSelected: numberOfDays }"></slot>
-      <gl-icon
-        v-if="tooltip"
-        v-gl-tooltip
-        name="information-o"
-        :title="tooltip"
-        :size="16"
-        variant="info"
-      />
-    </div>
-  </div>
-</template>

package/src/components/base/drawer/drawer.md

@@ -1,17 +0,0 @@
-The drawer is used to show more information about a certain resource in the UI and potentially
-handle actions on the information.
-
-### By default
-
-```html
-<gl-drawer :open="open" @close="close" @opened="opened">
-  <template #header>Your Title</template>
-  <template>
-   ...children
-  </template>
-</gl-drawer>
-```
-
-- `v-bind:open` will be a boolean you will pass to `gl-drawer` and `@close` is a listener that will
-be a function that will toggle open to `false`.
-- The component emits an `opened` event after the opening animation has finished.

package/src/components/base/drawer/drawer.scss

@@ -1,153 +0,0 @@
-$gl-drawer-width: 400px;
-$gl-sidebar-width: 290px;
-$gl-drawer-scrim-gradient: linear-gradient(
-  to bottom,
-  $transparent-rgba,
-  var(--drawer-variant-bg-color)
-);
-
-.gl-drawer {
-  background-color: var(--drawer-variant-bg-color);
-  right: 0;
-  @apply gl-transition-all;
-  position: fixed;
-  @apply gl-h-full;
-  @apply gl-w-full;
-  @apply gl-overflow-y-auto;
-  @apply gl-shadow-lg;
-  @apply gl-text-base;
-  @apply gl-leading-normal;
-  @apply gl-flex;
-  @apply gl-flex-col;
-
-  .gl-drawer-header-sticky {
-    background-color: var(--drawer-variant-bg-color);
-    top: 0;
-    position: sticky;
-  }
-}
-
-.gl-drawer-default {
-  --drawer-variant-bg-color: var(--gl-background-color-default);
-  @include media-breakpoint-up(md) {
-    width: $gl-drawer-width;
-  }
-
-  .gl-drawer-header,
-  .gl-drawer-body > * {
-    @apply gl-p-5;
-  }
-}
-
-.gl-drawer-sidebar {
-  --drawer-variant-bg-color: var(--gl-background-color-subtle);
-  @include media-breakpoint-up(md) {
-    width: $gl-sidebar-width;
-  }
-
-  .gl-drawer-header,
-  .gl-drawer-body > * {
-    @apply gl-py-5;
-  }
-
-  .gl-drawer-body > * {
-    @apply gl-mx-5;
-  }
-
-  .gl-drawer-header {
-    @apply gl-px-5;
-  }
-}
-
-.gl-drawer-footer {
-  @apply gl-border-t-solid gl-border-t-1;
-  border-top-color: var(--gl-border-color-default);
-  @apply gl-p-5;
-}
-
-.gl-drawer-body-scrim-on-footer {
-  &::before {
-    background: $gl-drawer-scrim-gradient;
-    top: -$gl-border-size-1;
-    @apply -gl-translate-y-full;
-    content: '';
-    left: 0;
-    position: absolute;
-    @apply gl-pointer-events-none;
-    @apply gl-w-full;
-    @apply gl-h-7;
-  }
-}
-
-.gl-drawer-footer-sticky {
-  background-color: var(--drawer-variant-bg-color);
-  bottom: 0;
-  position: sticky;
-}
-
-.gl-drawer-header {
-  @apply gl-border-b-solid gl-border-b-1;
-  border-bottom-color: var(--gl-border-color-default);
-}
-
-.gl-drawer-title {
-  color: var(--gl-text-color-heading);
-  @apply gl-flex;
-  @apply gl-items-center;
-  @apply gl-justify-between;
-
-  svg {
-    @apply gl-w-5;
-    @apply gl-h-5;
-    @apply gl-align-middle;
-  }
-}
-
-.gl-drawer-close-button {
-  @apply gl-self-start;
-  @apply gl-bg-transparent;
-  @apply gl-border-none;
-}
-
-.gl-drawer-body {
-  @apply gl-grow;
-  // prevent safari bug where box shadow is visible
-  // above the drawer when hovering interactive elements
-  // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
-  background-color: inherit;
-}
-
-.gl-drawer-body-scrim {
-  &::after {
-    background: $gl-drawer-scrim-gradient;
-    content: '';
-    bottom: 0;
-    @apply gl-pointer-events-none;
-    @apply gl-w-full;
-    position: fixed;
-    @apply gl-h-7;
-  }
-}
-
-.gl-drawer-body > * {
-  @apply gl-border-b-solid gl-border-b-1;
-  border-bottom-color: var(--gl-border-color-default);
-
-  &:last-child {
-    @apply gl-border-none;
-  }
-}
-
-.gl-drawer-enter-to {
-  @apply gl-translate-x-0;
-}
-
-.gl-drawer-enter,
-.gl-drawer-leave-to {
-  @apply gl-translate-x-full;
-}
-
-.gl-drawer-enter-active,
-.gl-drawer-leave-active {
-  @apply gl-transition-all;
-}

package/src/components/base/drawer/drawer.vue

@@ -1,136 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import isEmpty from 'lodash/isEmpty';
-import { maxZIndex, drawerVariants } from '../../../utils/constants';
-import GlButton from '../button/button.vue';
-
-export default {
-  name: 'GlDrawer',
-  components: {
-    GlButton,
-  },
-  props: {
-    open: {
-      type: Boolean,
-      required: true,
-    },
-    headerHeight: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    headerSticky: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    zIndex: {
-      type: Number,
-      required: false,
-      default: maxZIndex,
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: drawerVariants.default,
-      validator: (value) => Object.keys(drawerVariants).includes(value),
-    },
-  },
-  computed: {
-    positionFromTop() {
-      return !isEmpty(this.headerHeight) ? this.headerHeight : 0;
-    },
-    drawerStyles() {
-      const styles = {
-        top: this.positionFromTop,
-        zIndex: this.zIndex,
-      };
-
-      if (this.positionFromTop) {
-        styles.maxHeight = `calc(100vh - ${this.positionFromTop})`;
-      }
-
-      return styles;
-    },
-    drawerHeaderStyles() {
-      return {
-        zIndex: this.headerSticky ? maxZIndex : null,
-      };
-    },
-    shouldRenderFooter() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.footer);
-    },
-    variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
-      return `gl-drawer-${this.variant}`;
-    },
-  },
-  watch: {
-    open: {
-      immediate: true,
-      handler(open) {
-        if (open) {
-          document.addEventListener('keydown', this.handleEscape);
-        } else {
-          document.removeEventListener('keydown', this.handleEscape);
-        }
-      },
-    },
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleEscape);
-  },
-  methods: {
-    emitOpened() {
-      /**
-       * Emits when the opening animation has finished.
-       * @event opened
-       */
-      this.$emit('opened');
-    },
-    handleEscape(e) {
-      const ESC = 27;
-
-      if (this.open && e.keyCode === ESC) {
-        this.$emit('close');
-      }
-    },
-  },
-};
-</script>
-<template>
-  <transition name="gl-drawer" @after-enter="emitOpened">
-    <aside v-if="open" :style="drawerStyles" class="gl-drawer" :class="variantClass">
-      <div
-        class="gl-drawer-header"
-        :style="drawerHeaderStyles"
-        :class="{ 'gl-drawer-header-sticky': headerSticky }"
-      >
-        <div class="gl-drawer-title">
-          <slot name="title"></slot>
-          <gl-button
-            category="tertiary"
-            size="small"
-            icon="close"
-            class="gl-drawer-close-button"
-            aria-label="Close drawer"
-            @click="$emit('close')"
-          />
-        </div>
-        <slot name="header"></slot>
-      </div>
-      <div class="gl-drawer-body" :class="{ 'gl-drawer-body-scrim': !shouldRenderFooter }">
-        <slot></slot>
-      </div>
-      <div
-        v-if="shouldRenderFooter"
-        class="gl-drawer-footer gl-drawer-footer-sticky"
-        :class="{ 'gl-drawer-body-scrim-on-footer': shouldRenderFooter }"
-        :style="{ zIndex }"
-      >
-        <slot name="footer"></slot>
-      </div>
-    </aside>
-  </transition>
-</template>