@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -1,168 +0,0 @@
-$duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
-
-.duo-chat {
-  z-index: 999;
-
-  .message-enter-active,
-  .message-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  .message-enter,
-  .message-leave-to {
-    @apply gl-opacity-0;
-    transform: translateY(10px);
-  }
-
-  .duo-chat-loader.message-leave,
-  .duo-chat-loader.message-leave-to {
-    transition: none;
-  }
-
-  .duo-chat-drawer-body-scrim-on-footer {
-    &::before {
-      background: $duo-chat-scrim-gradient;
-    }
-  }
-
-  .duo-chat-drawer-body {
-    overflow-y: auto;
-  }
-
-  .duo-chat-drawer-header,
-  .duo-chat-drawer-body > * {
-    @apply gl-p-5;
-  }
-}
-
-.duo-chat-drawer {
-  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;
-}
-
-.duo-chat-drawer-header {
-  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
-}
-
-.duo-chat-drawer-header-sticky {
-  top: 0;
-  position: sticky;
-  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
-}
-
-.duo-chat-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;
-}
-
-.duo-chat-drawer-footer {
-  @apply gl-border-t-solid gl-border-t-gray-100 gl-border-t-1;
-  @apply gl-p-5;
-}
-
-.duo-chat-drawer-footer-sticky {
-  @apply gl-bg-white;
-  bottom: 0;
-  position: sticky;
-}
-
-.duo-chat-drawer-body-scrim-on-footer {
-  &::before {
-    background: $duo-chat-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;
-  }
-}
-
-.duo-chat-history {
-  scroll-behavior: smooth;
-
-  &.force-scroll-bar {
-    min-height: calc(100% + 1rem);
-  }
-
-  /*
-  Browsers a are pretty good at keeping the focus on an element while
-  the parent element grows in size. With this we mark all child elements
-  of the chat history as "non" anchors.
-  https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor
-  */
-  * {
-    overflow-anchor: none;
-  }
-
-  /*
-  Right at the bottom of the chat history we add a scroll-anchor element.
-  This scroll-anchor element is the only "possible" anchor. The beauty of it:
-  It only will be used as an anchor _if_ it is currently inside the view port.
-  So if the user manually scrolls up while a chunked message is coming in,
-  it won't stick to the bottom while the message still loads.
-  */
-  .scroll-anchor {
-    overflow-anchor: auto;
-    height: 1px;
-    margin-top: -1px; // In order to not add 1px vertically, we add a negative margin
-  }
-}
-
-.duo-chat-input {
-  @apply gl-flex;
-  @apply gl-flex-col;
-  max-height: 240px;
-  overflow: hidden;
-
-  &:focus-within {
-    @include gl-focus($color: $gray-900);
-  }
-
-  .gl-form-textarea.form-control {
-    flex: 1;
-    resize: none;
-    max-height: 240px;
-    padding-right: 40px;
-  }
-
-  &::after {
-    content: attr(data-value) ' ';
-    @apply gl-invisible;
-    @apply gl-whitespace-pre-wrap;
-    @apply gl-py-4;
-  }
-}
-
-.slash-commands {
-  @apply -gl-mt-2;
-
-  .active-command {
-    @apply gl-bg-gray-50;
-    @apply gl-rounded-base;
-  }
-
-  .gl-dropdown-item button.dropdown-item {
-    @apply gl-text-sm;
-    @apply gl-px-3;
-    @apply gl-bg-transparent;
-
-    &:hover {
-      @apply gl-bg-transparent;
-    }
-  }
-}

package/src/components/experimental/experiment_badge/constants.js

@@ -1,2 +0,0 @@
-export const badgeTypes = ['experiment', 'beta', null];
-export const badgeTypeValidator = (value) => badgeTypes.includes(value);

package/src/components/experimental/experiment_badge/experiment_badge.md

@@ -1,9 +0,0 @@
-The component is representing a badge, marking the experimental features.
-It is supposed to be used with the AI experiments, and comes with a popover explaining
-what experiment means.
-
-## Usage
-
-```html
-<gl-experiment-badge help-page-url="https://gitlab.com" popover-placement="bottom" />
-```

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -1,113 +0,0 @@
-<script>
-import uniqueId from 'lodash/uniqueId';
-import GlBadge from '../../base/badge/badge.vue';
-import GlLink from '../../base/link/link.vue';
-import GlPopover from '../../base/popover/popover.vue';
-import GlSprintf from '../../utilities/sprintf/sprintf.vue';
-import { badgeTypes, badgeTypeValidator } from './constants';
-
-export const i18n = {
-  experiment: {
-    BADGE: 'Experiment',
-    POPOVER_TITLE: "What's an experiment?",
-    POPOVER_CONTENT:
-      'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
-    POPOVER_BULLETS: [
-      'Might be unstable or cause data loss.',
-      'Are not supported and might not be documented.',
-      'Could be changed or removed at any time.',
-      'Are subject to the GitLab Testing Agreement.',
-    ],
-  },
-  beta: {
-    BADGE: 'Beta',
-    POPOVER_TITLE: "What's a beta?",
-    POPOVER_CONTENT:
-      "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",
-    POPOVER_BULLETS: [
-      'Have a low risk of data loss, but might still be unstable.',
-      'Are supported on a commercially-reasonable effort basis.',
-      'Have a near complete user experience.',
-      'Are subject to the GitLab Testing Agreement.',
-    ],
-  },
-};
-
-export default {
-  name: 'GlExperimentBadge',
-  components: {
-    GlBadge,
-    GlPopover,
-    GlSprintf,
-    GlLink,
-  },
-  props: {
-    /**
-     * The URL of a page to provide more explanations on the experiment.
-     */
-    helpPageUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * The placement of the popover in relation to the button.
-     */
-    popoverPlacement: {
-      type: String,
-      required: false,
-      default: 'bottom',
-    },
-    /**
-     * The type of the badge.
-     */
-    type: {
-      type: String,
-      required: false,
-      default: badgeTypes[0],
-      validator: badgeTypeValidator,
-    },
-  },
-  computed: {
-    activeType() {
-      return i18n[this.type];
-    },
-  },
-  created() {
-    this.triggerId = uniqueId('experiment-badge-');
-  },
-};
-</script>
-
-<template>
-  <gl-badge :id="triggerId" class="gl-mx-4 hover:gl-cursor-pointer" variant="neutral">
-    <span>{{ activeType.BADGE }}</span>
-    <gl-popover
-      triggers="click"
-      show-close-button
-      :placement="popoverPlacement"
-      :target="triggerId"
-      :css-classes="['!gl-z-9999']"
-      :title="activeType.POPOVER_TITLE"
-    >
-      <gl-sprintf :message="activeType.POPOVER_CONTENT">
-        <template #link="{ content }">
-          <gl-link v-if="helpPageUrl" :href="helpPageUrl" target="_blank" class="!gl-text-sm">
-            {{ content }}
-          </gl-link>
-          <span v-else>{{ content }}</span>
-        </template>
-        <template #bullets>
-          <ul class="gl-mb-0 gl-pl-5">
-            <li v-for="(item, i) in activeType.POPOVER_BULLETS" :key="`li-${i}`">
-              {{ item }}
-            </li>
-          </ul>
-        </template>
-        <template #line-break="{ content }">
-          <span class="gl-mb-0 gl-mt-5 gl-block">{{ content }}</span>
-        </template>
-      </gl-sprintf>
-    </gl-popover>
-  </gl-badge>
-</template>

package/src/components/mixins/button_mixin.js

@@ -1,9 +0,0 @@
-import { buttonSizeOptions } from '../../utils/constants';
-
-export const ButtonMixin = {
-  computed: {
-    buttonSize() {
-      return buttonSizeOptions[this.size];
-    },
-  },
-};

package/src/components/mixins/safe_link_mixin.js

@@ -1,28 +0,0 @@
-import { SafeLinkDirective } from '../../directives/safe_link/safe_link';
-
-export const SafeLinkMixin = {
-  directives: {
-    SafeLink: SafeLinkDirective,
-  },
-  props: {
-    isUnsafeLink: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    // This prevents bootstrap-vue from setting target="_self"
-    // when target attribute is not present
-    target: {
-      type: String,
-      required: false,
-      default: null,
-    },
-  },
-  computed: {
-    safeLinkConfig() {
-      return {
-        skipSanitization: this.isUnsafeLink,
-      };
-    },
-  },
-};

package/src/components/mixins/tooltip_mixin.js

@@ -1,21 +0,0 @@
-import { tooltipActionEvents } from '../../utils/constants';
-
-// eslint-disable-next-line import/no-default-export
-export default (tooltipRefName) => ({
-  mounted() {
-    /**
-     * Pass through the events to programmatically open, close, enable
-     * and disable a tooltip or a popover.
-     *
-     * References
-     * https://bootstrap-vue.org/docs/components/popover#programmatically-show-and-hide-popover
-     * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
-     */
-    tooltipActionEvents.forEach((event) =>
-      this.$on(event, () => this.$refs[tooltipRefName].$emit(event))
-    );
-  },
-  beforeDestroy() {
-    tooltipActionEvents.forEach((event) => this.$off(event));
-  },
-});

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.md

@@ -1,4 +0,0 @@
-## Dashboard Skeleton
-
-This is a skeleton loading component for a dashboards page. Renders three cards, but can be adjusted
-based on the `cards` prop.

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue

@@ -1,40 +0,0 @@
-<script>
-export default {
-  name: 'GlDashboardSkeleton',
-  props: {
-    /**
-     * Number of cards to be shown
-     */
-    cards: {
-      type: Number,
-      required: false,
-      default: 3,
-    },
-  },
-};
-</script>
-<template>
-  <div class="row dashboard-cards">
-    <div v-for="index in cards" :key="index" class="col-12 col-md-6 col-xl-4 px-2">
-      <div class="rounded-top py-4 bg-light"></div>
-      <div class="dashboard-card-body card-body bg-secondary">
-        <div class="row">
-          <div class="col-1 align-self-center">
-            <div class="bg-light p-3 rounded-circle"></div>
-          </div>
-
-          <div class="col-10 col-sm-6 align-self-center pl-4">
-            <div class="dashboard-card-skeleton-info bg-light py-2 w-100 mb-2"></div>
-            <div class="dashboard-card-skeleton-info bg-light py-2 w-100"></div>
-          </div>
-
-          <div class="col-sm-5 align-self-center d-none d-sm-block">
-            <div class="dashboard-card-skeleton-info bg-light py-2 w-100"></div>
-          </div>
-        </div>
-
-        <div class="dashboard-card-footer bg-light py-3 mt-3"></div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/regions/empty_state/empty_state.md

@@ -1,4 +0,0 @@
-### Buttons
-
-You can either have a primary button, a secondary button, or both.
-Buttons require both text a link in order for the button to render.

package/src/components/regions/empty_state/empty_state.scss

@@ -1,3 +0,0 @@
-.gl-empty-state-content {
-    max-width: 65ch;
-}

package/src/components/regions/empty_state/empty_state.vue

@@ -1,187 +0,0 @@
-<script>
-import GlButton from '../../base/button/button.vue';
-
-export default {
-  name: 'GlEmptyState',
-  components: {
-    GlButton,
-  },
-  props: {
-    /**
-     * The title (heading) of the empty state.
-     */
-    title: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The illustration's URL.
-     */
-    svgPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The illustration's height used to prevent content reflow.
-     */
-    svgHeight: {
-      type: Number,
-      required: false,
-      default: 144,
-    },
-    /**
-     * The desciption/body text of the empty state.
-     */
-    description: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The primary GlButton's href.
-     */
-    primaryButtonLink: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The primary GlButton's text. If falsey, the button is not shown.
-     */
-    primaryButtonText: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The secondary GlButton's href.
-     */
-    secondaryButtonLink: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * The secondary GlButton's text. If falsey, the button is not shown.
-     */
-    secondaryButtonText: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * Determines whether to render the compact layout.
-     */
-    compact: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    invertInDarkMode: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    /**
-     * CSS classes to add to the content container
-     */
-    contentClass: {
-      type: [Array, String, Object],
-      required: false,
-      default: () => [],
-    },
-  },
-  computed: {
-    height() {
-      return this.shouldPreventImageReflow ? this.svgHeight : null;
-    },
-    shouldPreventImageReflow() {
-      return Boolean(this.svgHeight);
-    },
-    shouldRenderPrimaryButton() {
-      return Boolean(this.primaryButtonLink && this.primaryButtonText);
-    },
-    shouldRenderSecondaryButton() {
-      return Boolean(this.secondaryButtonLink && this.secondaryButtonText);
-    },
-    contentClasses() {
-      return [this.compact ? 'gl-grow gl-basis-0 gl-px-4' : 'gl-m-auto gl-p-5', this.contentClass];
-    },
-  },
-};
-</script>
-
-<template>
-  <section
-    class="gl-flex"
-    :class="{
-      'gl-empty-state gl-flex-col gl-text-center': !compact,
-      'gl-flex-row': compact,
-    }"
-  >
-    <div :class="{ 'gl-hidden gl-px-4 sm:gl-block': compact, 'gl-max-w-full': !compact }">
-      <img
-        v-if="svgPath"
-        :src="svgPath"
-        alt=""
-        :class="{ 'gl-dark-invert-keep-hue': invertInDarkMode }"
-        class="gl-max-w-full"
-        :height="height"
-      />
-    </div>
-    <div
-      class="gl-empty-state-content gl-mx-auto gl-my-0"
-      :class="contentClasses"
-      data-testid="gl-empty-state-content"
-    >
-      <!--
-          @slot Use this slot to customize the empty state's title area.
-          Overrides the `title` prop.
-        -->
-      <slot ref="title" name="title">
-        <h1
-          class="gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36"
-          :class="compact ? 'h5' : 'h4'"
-        >
-          {{ title }}
-        </h1>
-      </slot>
-      <p v-if="description || $scopedSlots.description" ref="description" class="gl-mb-0 gl-mt-4">
-        <!--
-          @slot Use this slot to customize the empty state's description
-          area. Overrides the `description` prop.
-        -->
-        <slot name="description">
-          {{ description }}
-        </slot>
-      </p>
-      <div class="gl-mt-5 gl-flex gl-flex-wrap" :class="{ 'gl-justify-center': !compact }">
-        <!--
-          @slot Use this slot to customize the empty state's actions area,
-          where the buttons are. Overrides button-related props:
-          `primaryButtonLink`, `primaryButtonText`, `secondaryButtonLink`,
-          `secondaryButtonText`.
-        -->
-        <slot name="actions">
-          <gl-button
-            v-if="shouldRenderPrimaryButton"
-            variant="confirm"
-            :class="compact ? 'gl-mr-3' : 'gl-mx-2'"
-            class="gl-mb-3"
-            :href="primaryButtonLink"
-            >{{ primaryButtonText }}</gl-button
-          >
-          <gl-button
-            v-if="shouldRenderSecondaryButton"
-            class="gl-mb-3 gl-mr-3"
-            :class="{ '!gl-mx-2': !compact }"
-            :href="secondaryButtonLink"
-            >{{ secondaryButtonText }}
-          </gl-button>
-        </slot>
-      </div>
-    </div>
-  </section>
-</template>

package/src/components/shared_components/charts/tooltip_default_format.scss

@@ -1,18 +0,0 @@
-.gl-charts-tooltip-default-format-series {
-  @apply gl-flex;
-  @apply gl-justify-between;
-
-  &-label,
-  &-value {
-    @apply gl-text-sm;
-  }
-
-  &-label {
-    @apply gl-leading-normal;
-    @apply gl-mr-7;
-  }
-
-  &-value {
-    @apply gl-font-bold;
-  }
-}

package/src/components/shared_components/charts/tooltip_default_format.vue

@@ -1,32 +0,0 @@
-<script>
-import SeriesLabel from '../../charts/series_label/series_label.vue';
-
-export default {
-  name: 'TooltipDefaultFormat',
-  components: {
-    SeriesLabel,
-  },
-  props: {
-    tooltipContent: {
-      type: Object,
-      required: true,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div
-      v-for="(value, label) in tooltipContent"
-      :key="`${label}${value.value}`"
-      class="gl-charts-tooltip-default-format-series"
-    >
-      <series-label :color="value.color" class="gl-charts-tooltip-default-format-series-label">
-        {{ label }}
-      </series-label>
-      <div class="gl-charts-tooltip-default-format-series-value">
-        <slot name="tooltip-value" :value="value.value">{{ value.value }}</slot>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -1,10 +0,0 @@
-.gl-clear-icon-button {
-  @apply gl-bg-transparent;
-  @apply gl-border-none;
-  @apply gl-cursor-pointer;
-  @apply gl-text-gray-500;
-
-  &:focus {
-    @apply gl-focus;
-  }
-}