@gitlab/duo-ui 0.1.0

package/src/components/base/accordion/accordion_item.vue

@@ -0,0 +1,122 @@
+<script>
+import uniqueId from 'lodash/uniqueId';
+import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
+import GlButton from '../button/button.vue';
+
+export default {
+  name: 'GlAccordionItem',
+  components: {
+    BCollapse,
+    GlButton,
+  },
+  directives: {
+    GlCollapseToggle: GlCollapseToggleDirective,
+  },
+  inject: ['accordionSetId', 'defaultHeaderLevel'],
+  inheritAttrs: false,
+  model: {
+    prop: 'visible',
+    event: 'input',
+  },
+  props: {
+    /**
+     * Used to set the title of accordion link
+     */
+    title: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Used to set the title of accordion link when the content is visible
+     * */
+    titleVisible: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    /**
+     * When set, it will ensure the accordion item is initially visible
+     */
+    visible: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    /**
+     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
+     */
+    headerLevel: {
+      type: Number,
+      required: false,
+      default: null,
+      validator(value) {
+        return value > 0 && value <= 6;
+      },
+    },
+    /**
+     * Additional CSS class(es) to be applied to the header
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      accordionItemId: uniqueId('accordion-item-'),
+      isVisible: this.visible,
+    };
+  },
+  computed: {
+    headerComponent() {
+      const level = this.headerLevel || this.defaultHeaderLevel();
+      return `h${level}`;
+    },
+    accordion() {
+      return this.accordionSetId() || undefined;
+    },
+    icon() {
+      return this.isVisible ? 'chevron-down' : 'chevron-right';
+    },
+    buttonTitle() {
+      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
+    },
+  },
+  watch: {
+    isVisible: {
+      immediate: true,
+      handler(isVisible) {
+        this.$emit('input', isVisible);
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-accordion-item">
+    <component :is="headerComponent" class="gl-accordion-item-header" :class="headerClass">
+      <gl-button
+        v-gl-collapse-toggle="accordionItemId"
+        variant="link"
+        button-text-classes="gl-flex"
+        :icon="icon"
+      >
+        {{ buttonTitle }}
+      </gl-button>
+    </component>
+    <b-collapse
+      :id="accordionItemId"
+      v-model="isVisible"
+      :visible="isVisible"
+      :accordion="accordion"
+      class="gl-mt-3 gl-text-base"
+      :data-testid="`accordion-item-collapse-${accordionItemId}`"
+    >
+      <!-- @slot Item content -->
+      <slot></slot>
+    </b-collapse>
+  </div>
+</template>

package/src/components/base/alert/alert.md

@@ -0,0 +1,35 @@
+Alerts allow the application to pass along relevant system information to the
+user without impeding their journey. Alerts are system generated and may or may
+not be derived by a user’s action.
+
+## Dismissible alerts
+
+Alerts don't handle their own visibility, so it's the parent component's
+responsbility to listen for the `dismiss` event and hide the alert in some way.
+For example:
+
+```html
+<script>
+  ...
+  computed: {
+    shouldShowAlert() {
+      return !this.isAlertDismissed && this.someOtherCondition();
+    },
+  },
+  ...
+</script>
+
+<template>
+  ...
+  <gl-alert v-if="shouldShowAlert" @dismiss="isAlertDismissed = true">
+    An important message
+  </gl-alert>
+  ...
+</template>
+```
+
+## Sticky alerts
+
+Any alert can use `position: sticky`, however it should be limited to critical alerts where keeping
+the alert visually in context is necessary or when alerts are injected into a page and might
+otherwise go unnoticed.

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

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

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

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

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

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