@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/alert/alert.scss

@@ -1,179 +0,0 @@
-/*
- * --gl-alert-padding-x
- *
- * Way to hook into spacing of gl-alert.
- * This is used e.g. for page wide containers
- * in GitLab.
- */
-// stylelint-disable length-zero-no-unit
-$gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
-$gl-alert-top-border-size: 2px;
-
-@mixin gl-alert-variant(
-  $variant,
-  $background-color,
-  $title-color,
-  $border-top-color,
-  $border-bottom-color,
-  $icon-color
-) {
-  .gl-alert-#{$variant} {
-    background-color: $background-color;
-    border-bottom: 1px solid $border-bottom-color;
-
-    &::before {
-      background: linear-gradient(to right, transparent 0%, $border-top-color 50%, transparent 100%);
-    }
-
-    .gl-alert-title {
-      color: $title-color;
-    }
-
-    @media (forced-colors: none) {
-      .gl-alert-icon {
-        color: $icon-color;
-      }
-    }
-  }
-}
-
-.gl-alert {
-  @apply gl-text-base;
-  position: relative;
-  padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
-  @apply gl-py-5;
-  @apply gl-rounded-base;
-
-  @media (forced-colors: active) {
-    border: 1px solid transparent;
-  }
-
-  &::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: $gl-alert-top-border-size;
-    position: absolute;
-    top: -1px; // To accumilate for the border width
-    left: 0;
-  }
-
-  &-not-dismissible {
-    padding-right: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
-  }
-
-  &-no-icon {
-    padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
-  }
-
-  .gl-link:not(.gl-label-link) {
-    @apply gl-text-blue-600;
-    @apply gl-underline;
-
-    &:hover {
-      @apply gl-text-blue-700;
-    }
-  }
-}
-
-.gl-alert-sticky {
-  position: sticky;
-  top: 0;
-}
-
-.gl-alert-title {
-  @apply gl-heading-scale-400 -gl-mt-1 gl-mb-2;
-}
-
-.gl-alert-icon-container {
-  position: absolute;
-  top: $gl-spacing-scale-5;
-  left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
-  @apply gl-flex;
-  @apply gl-items-center;
-  height: $gl-line-height-20;
-
-  .gl-alert-has-title & {
-    top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
-  }
-}
-
-.gl-alert-body {
-  @apply gl-leading-20;
-  color: var(--gl-text-color-default);
-}
-
-.gl-alert-actions {
-  @apply gl-flex gl-flex-col gl-flex-wrap gl-gap-y-3;
-  @apply gl-mt-3;
-  @include gl-media-breakpoint-up(sm) {
-    @apply gl-flex-row;
-  }
-}
-
-.gl-alert-action {
-  @apply gl-mr-0 gl-w-full;
-  @apply gl-text-base;
-  @apply gl-leading-normal;
-  @include gl-media-breakpoint-up(sm) {
-    @apply gl-mr-3 gl-w-auto;
-  }
-}
-
-// This is the replacement for .gl-alert-dismiss
-.gl-dismiss-btn {
-  position: absolute;
-  top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
-  right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
-
-  .gl-alert-has-title & {
-    top: $gl-spacing-scale-4;
-  }
-}
-
-/* Variants */
-
-@include gl-alert-variant(
-  $variant: danger,
-  $background-color: var(--gl-alert-danger-background-color),
-  $title-color: var(--gl-alert-danger-title-color),
-  $border-top-color: var(--gl-alert-danger-border-top-color),
-  $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
-  $icon-color: var(--gl-feedback-danger-icon-color),
-);
-
-@include gl-alert-variant(
-  $variant: warning,
-  $background-color: var(--gl-alert-warning-background-color),
-  $title-color: var(--gl-alert-warning-title-color),
-  $border-top-color: var(--gl-alert-warning-border-top-color),
-  $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
-  $icon-color: var(--gl-feedback-warning-icon-color),
-);
-
-@include gl-alert-variant(
-  $variant: tip,
-  $background-color: var(--gl-alert-neutral-background-color),
-  $title-color: var(--gl-alert-neutral-title-color),
-  $border-top-color: var(--gl-alert-neutral-border-top-color),
-  $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
-  $icon-color: var(--gl-feedback-neutral-icon-color),
-);
-
-@include gl-alert-variant(
-  $variant: info,
-  $background-color: var(--gl-alert-info-background-color),
-  $title-color: var(--gl-alert-info-title-color),
-  $border-top-color: var(--gl-alert-info-border-top-color),
-  $border-bottom-color: var(--gl-alert-info-border-bottom-color),
-  $icon-color: var(--gl-feedback-info-icon-color),
-);
-
-@include gl-alert-variant(
-  $variant: success,
-  $background-color: var(--gl-alert-success-background-color),
-  $title-color: var(--gl-alert-success-title-color),
-  $border-top-color: var(--gl-alert-success-border-top-color),
-  $border-bottom-color: var(--gl-alert-success-border-bottom-color),
-  $icon-color: var(--gl-feedback-success-icon-color),
-);

package/src/components/base/alert/alert.vue

@@ -1,241 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import { translate } from '../../../utils/i18n';
-import {
-  alertVariantOptions,
-  alertVariantIconMap,
-  buttonCategoryOptions,
-} from '../../../utils/constants';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
-import GlButton from '../button/button.vue';
-import GlIcon from '../icon/icon.vue';
-
-export default {
-  name: 'GlAlert',
-  components: {
-    GlIcon,
-    CloseButton,
-    GlButton,
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Controls the dismiss button's visibility.
-     */
-    dismissible: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    /**
-     * Shows icon based on variant.
-     */
-    showIcon: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    /**
-     * The close button's label, it is used for the button's aria-label attribute.
-     */
-    dismissLabel: {
-      type: String,
-      required: false,
-      default: () => translate('GlAlert.closeButtonTitle', 'Dismiss'),
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: alertVariantOptions.info,
-      validator: (value) => Object.keys(alertVariantOptions).includes(value),
-    },
-    /**
-     * If provided, renders the primary button as a link.
-     */
-    primaryButtonLink: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * If provided, renders a primary action button.
-     */
-    primaryButtonText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * If provided, renders the secondary button as a link.
-     */
-    secondaryButtonLink: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * If provided, renders a secondary action button.
-     */
-    secondaryButtonText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    sticky: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    ariaLive() {
-      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
-        return 'assertive';
-      }
-
-      return 'polite';
-    },
-    role() {
-      if (
-        [
-          alertVariantOptions.danger,
-          alertVariantOptions.warning,
-          alertVariantOptions.success,
-        ].includes(this.variant)
-      ) {
-        return 'alert';
-      }
-
-      return 'status';
-    },
-    iconName() {
-      return alertVariantIconMap[this.variant];
-    },
-    shouldRenderActions() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.actions || this.actionButtons.length);
-    },
-    actionButtons() {
-      return [
-        {
-          text: this.primaryButtonText,
-          attrs: {
-            href: this.primaryButtonLink,
-            variant: 'confirm',
-            category: buttonCategoryOptions.primary,
-          },
-          listeners: {
-            click: this.primaryButtonClicked,
-          },
-        },
-        {
-          text: this.secondaryButtonText,
-          attrs: {
-            href: this.secondaryButtonLink,
-            variant: 'default',
-            category: buttonCategoryOptions.secondary,
-          },
-          listeners: {
-            click: this.secondaryButtonClicked,
-          },
-        },
-      ].reduce((acc, actionButton) => {
-        if (!actionButton.text) return acc;
-
-        const attrs = { ...actionButton.attrs };
-        if (!attrs.href) {
-          delete attrs.href;
-        }
-
-        acc.push({ ...actionButton, attrs });
-        return acc;
-      }, []);
-    },
-    variantClass() {
-      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
-      return `gl-alert-${this.variant}`;
-    },
-  },
-  methods: {
-    primaryButtonClicked(event) {
-      /**
-       * Emitted when the primary action button is clicked.
-       *
-       * @event primaryAction
-       * @type {object}
-       */
-      this.$emit('primaryAction', event);
-    },
-    secondaryButtonClicked(event) {
-      /**
-       * Emitted when the secondary action button is clicked.
-       *
-       * @event secondaryAction
-       * @type {object}
-       */
-      this.$emit('secondaryAction', event);
-    },
-    onDismiss() {
-      /**
-       * Emitted when the dismiss button is clicked.
-       *
-       * @event dismiss
-       * @type {object}
-       */
-      this.$emit('dismiss');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="[
-      'gl-alert',
-      { 'gl-alert-sticky': sticky },
-      { 'gl-alert-not-dismissible': !dismissible },
-      { 'gl-alert-no-icon': !showIcon },
-      { 'gl-alert-has-title': !!title },
-      variantClass,
-    ]"
-  >
-    <div v-if="showIcon" class="gl-alert-icon-container">
-      <gl-icon :name="iconName" class="gl-alert-icon" />
-    </div>
-    <div class="gl-alert-content" :role="role" :aria-live="ariaLive">
-      <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
-
-      <div class="gl-alert-body">
-        <!-- @slot The alert message to display. -->
-        <slot></slot>
-      </div>
-
-      <div v-if="shouldRenderActions" class="gl-alert-actions">
-        <!-- @slot If the primary/secondary action buttons aren't flexible enough, place arbitrary content here. -->
-        <slot name="actions">
-          <gl-button
-            v-for="(actionButton, index) in actionButtons"
-            :key="index"
-            class="gl-alert-action"
-            v-bind="actionButton.attrs"
-            v-on="actionButton.listeners"
-          >
-            {{ actionButton.text }}
-          </gl-button>
-        </slot>
-      </div>
-    </div>
-
-    <close-button
-      v-if="dismissible"
-      ref="dismiss"
-      class="gl-dismiss-btn"
-      :label="dismissLabel"
-      @click="onDismiss"
-    />
-  </div>
-</template>

package/src/components/base/animated_icon/animated_chevron_right_down_icon.vue

@@ -1,28 +0,0 @@
-<script>
-import GlBaseAnimatedIcon from './base_animated_icon.vue';
-
-export default {
-  name: 'GlAnimatedChevronRightDownIcon',
-  extends: GlBaseAnimatedIcon,
-};
-</script>
-<template>
-  <svg
-    :class="iconStateClass"
-    :aria-label="ariaLabel"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      class="gl-animated-chevron-right-down-arrow"
-      d="M6.75 4.75L10 8L6.75 11.25"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
-</template>

package/src/components/base/animated_icon/animated_duo_chat_icon.vue

@@ -1,39 +0,0 @@
-<script>
-import GlBaseAnimatedIcon from './base_animated_icon.vue';
-
-export default {
-  name: 'GlAnimatedDuoChatIcon',
-  extends: GlBaseAnimatedIcon,
-};
-</script>
-<template>
-  <svg
-    :class="iconStateClass"
-    :aria-label="ariaLabel"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.75297 12.25V11.5H3.44253L3.2229 11.7194L3.75297 12.25ZM0.75 15.25H0C0 15.5533 0.182651 15.8267 0.462816 15.9428C0.742981 16.059 1.06551 15.9949 1.28007 15.7806L0.75 15.25ZM7.74 1C7.32579 1 6.99 1.33579 6.99 1.75C6.99 2.16421 7.32579 2.5 7.74 2.5V1ZM1.5 6.75C1.5 6.33579 1.16421 6 0.75 6C0.335786 6 0 6.33579 0 6.75H1.5ZM14.5 4V10H16V4H14.5ZM13 11.5H3.75297V13H13V11.5ZM3.2229 11.7194L0.219933 14.7194L1.28007 15.7806L4.28304 12.7806L3.2229 11.7194ZM7.74 2.5H13V1H7.74V2.5ZM1.5 15.25V6.75H0V15.25H1.5ZM14.5 10C14.5 10.8284 13.8284 11.5 13 11.5V13C14.6569 13 16 11.6569 16 10H14.5ZM16 4C16 2.34315 14.6569 1 13 1V2.5C13.8284 2.5 14.5 3.17157 14.5 4H16Z"
-      fill="currentColor"
-      stroke-width="0"
-    />
-    <path
-      class="gl-animated-duo-chat-small-sparkle"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.56489 5.39914C8.37631 4.86695 7.62369 4.86695 7.43511 5.39914L6.99787 6.63314C6.93751 6.80349 6.80349 6.93751 6.63314 6.99787L5.39914 7.43511C4.86695 7.62369 4.86695 8.37631 5.39914 8.56489L6.63314 9.00213C6.80349 9.06249 6.93751 9.19651 6.99787 9.36686L7.43511 10.6009C7.62369 11.133 8.37631 11.133 8.56489 10.6009L9.00213 9.36686C9.06249 9.19651 9.19651 9.06249 9.36686 9.00213L10.6009 8.56489C11.133 8.37631 11.133 7.62369 10.6009 7.43511L9.36686 6.99787C9.19651 6.93751 9.06249 6.80349 9.00213 6.63314L8.56489 5.39914Z"
-      fill="currentColor"
-      stroke-width="0"
-    />
-    <path
-      class="gl-animated-duo-chat-big-sparkle"
-      d="M8.56489 5.39914C8.37631 4.86695 7.62369 4.86695 7.43511 5.39914L6.99787 6.63314C6.93751 6.80349 6.80349 6.93751 6.63314 6.99787L5.39914 7.43511C4.86695 7.62369 4.86695 8.37631 5.39914 8.56489L6.63314 9.00213C6.80349 9.06249 6.93751 9.19651 6.99787 9.36686L7.43511 10.6009C7.62369 11.133 8.37631 11.133 8.56489 10.6009L9.00213 9.36686C9.06249 9.19651 9.19651 9.06249 9.36686 9.00213L10.6009 8.56489C11.133 8.37631 11.133 7.62369 10.6009 7.43511L9.36686 6.99787C9.19651 6.93751 9.06249 6.80349 9.00213 6.63314L8.56489 5.39914Z"
-      fill="currentColor"
-      stroke-width="0"
-    />
-  </svg>
-</template>

package/src/components/base/animated_icon/animated_icon.md

@@ -1,4 +0,0 @@
-## Usage
-
-The `GlAnimatedIcon` component can be used to render animated SVG
-with any other interactive Pajamas component that can switch `GlAnimatedIcon` state.