@gitlab/duo-ui 0.1.0 → 0.2.0

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;
-  }
-}

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -1,43 +0,0 @@
-<script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import GlButton from '../../base/button/button.vue';
-import { translate } from '../../../utils/i18n';
-
-export default {
-  name: 'ClearIconButton',
-  components: {
-    GlButton,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: () => translate('ClearIconButton.title', 'Clear'),
-    },
-    tooltipContainer: {
-      required: false,
-      default: false,
-      validator: (value) =>
-        value === false || typeof value === 'string' || value instanceof HTMLElement,
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button
-    v-gl-tooltip.hover="{ container: tooltipContainer }"
-    variant="default"
-    category="tertiary"
-    class="gl-clear-icon-button"
-    size="small"
-    name="clear"
-    icon="clear"
-    :title="title"
-    :aria-label="title"
-    v-on="$listeners"
-  />
-</template>

package/src/components/shared_components/close_button/close_button.vue

@@ -1,29 +0,0 @@
-<script>
-import { translate } from '../../../utils/i18n';
-import GlButton from '../../base/button/button.vue';
-
-export default {
-  name: 'CloseButton',
-  components: {
-    GlButton,
-  },
-  props: {
-    label: {
-      type: String,
-      required: false,
-      default: () => translate('CloseButton.title', 'Close'),
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-button
-    category="tertiary"
-    size="small"
-    icon="close"
-    :aria-label="label"
-    v-bind="$attrs"
-    v-on="$listeners"
-  />
-</template>

package/src/components/utilities/animated_number/animated_number.md

@@ -1,6 +0,0 @@
-Animated numbers provide a signifier that values are being changed.
-
-## Usage
-
-The animated number component can be used with or without decimal places. Decimal places will
-not be rounded if chosen to be omitted.

package/src/components/utilities/animated_number/animated_number.vue

@@ -1,99 +0,0 @@
-<script>
-import { formatNumberToLocale } from '../../../utils/number_utils';
-
-export default {
-  name: 'AnimatedNumber',
-  props: {
-    number: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * Controls how long it takes for the animation to complete.
-     */
-    duration: {
-      type: Number,
-      required: false,
-      default: 2000,
-    },
-    /**
-     * Controls the number of decimal places displayed in the output.
-     */
-    decimalPlaces: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    useDelimiters: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    animateOnMount: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      displayNumber: 0,
-      startTime: null,
-    };
-  },
-  computed: {
-    animatedNumber() {
-      const number = this.displayNumber.toFixed(this.decimalPlaces);
-
-      if (this.useDelimiters) {
-        return formatNumberToLocale(number, { minimumFractionDigits: this.decimalPlaces });
-      }
-
-      return number;
-    },
-  },
-  ready() {
-    this.displayNumber = this.number ? this.number : 0;
-  },
-  watch: {
-    number() {
-      this.animate();
-    },
-  },
-  mounted() {
-    if (this.animateOnMount) {
-      this.animate();
-    } else {
-      this.displayNumber = this.number;
-    }
-  },
-  methods: {
-    animate() {
-      this.$emit('animating');
-      window.requestAnimationFrame(this.count);
-    },
-    count(timestamp) {
-      if (!this.startTime) {
-        this.startTime = timestamp;
-      }
-
-      const progress = timestamp - this.startTime;
-
-      if (progress < this.duration) {
-        if (this.displayNumber !== this.number) {
-          const change = (this.number - this.displayNumber) / (this.duration / 100);
-          this.displayNumber += change;
-        }
-        window.requestAnimationFrame(this.count);
-      } else {
-        this.displayNumber = this.number; // Ensures that the final number is accurate.
-        this.startTime = null;
-        this.$emit('animated');
-      }
-    },
-  },
-};
-</script>
-<template>
-  <span>{{ animatedNumber }}</span>
-</template>