@gitlab/duo-ui 0.1.0

package/src/components/base/toast/toast.scss

@@ -0,0 +1,62 @@
+/*
+* These styles are specific to the gl-toast component.
+* Documentation: https://design.gitlab.com/components/toast
+*/
+.b-toaster {
+  &.b-toaster-bottom-left {
+    .b-toaster-slot {
+      bottom: $gl-spacing-scale-6;
+      left: $gl-spacing-scale-6;
+      right: auto;
+      @apply gl-w-auto;
+
+      @include media-breakpoint-down(xs) {
+        @apply gl-w-full;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+
+  .gl-toast {
+    @apply gl-rounded-base;
+    @apply gl-text-base;
+    @apply gl-py-5;
+    @apply gl-px-6;
+    @apply gl-leading-normal;
+    @apply gl-flex;
+    @apply gl-items-center;
+    @apply gl-justify-between;
+    @apply gl-shadow-md;
+    background-color: var(--gl-feedback-strong-background-color);
+    color: var(--gl-feedback-strong-text-color);
+  }
+
+  .toast-body {
+    @apply gl-font-300;
+    @apply gl-pr-3;
+    order: 1;
+  }
+
+  .toast-header {
+    @apply gl-flex;
+    order: 2;
+  }
+
+  .gl-toast-action {
+    @apply gl-text-blue-300;
+    @apply gl-p-3;
+    @apply gl-m-0;
+    @apply gl-ml-5;
+    @apply gl-normal-case;
+    @apply gl-text-base;
+    @apply gl-whitespace-nowrap;
+    @apply gl-font-bold;
+    @apply gl-cursor-pointer;
+  }
+
+  .gl-toast-close-button {
+    @apply gl-ml-5;
+    color: inherit !important;
+  }
+}

package/src/components/base/toggle/toggle.md

@@ -0,0 +1,4 @@
+## Usage
+
+The toggle component must have a `label` prop to give the toggle button an accessible name.
+To visually hide the label, provide it with `label-position="hidden"`.

package/src/components/base/toggle/toggle.scss

@@ -0,0 +1,177 @@
+/**
+* Toggle button
+*
+* @usage
+*  ### Active and Inactive text should be provided as data attributes:
+*  <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
+*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  </button>
+
+*  ### Checked should have `is-checked` class
+*  <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
+*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  </button>
+
+*  ### Disabled should have `is-disabled` class
+*  <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
+*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  </button>
+*/
+
+$toggle-width: 4.5 * $grid-size;
+$toggle-translate-width: 2 * $grid-size;
+$toggle-height: 2.5 * $grid-size;
+
+.gl-toggle-wrapper {
+  @apply gl-leading-normal;
+  @apply gl-font-normal;
+  @apply gl-inline-flex;
+}
+
+.gl-description-label {
+  @apply gl-text-subtle;
+}
+
+.gl-help-label {
+  @apply gl-mt-3;
+  @apply gl-font-normal;
+  @apply gl-text-subtle;
+}
+
+.gl-toggle-label-inline {
+  @apply gl-flex-row;
+  @apply gl-items-center;
+
+  .gl-toggle-label {
+    @apply gl-whitespace-nowrap;
+    @apply gl-mb-0;
+    @apply gl-mr-3;
+  }
+
+  .gl-help-label {
+    @apply gl-mt-0;
+    @apply gl-ml-3;
+  }
+}
+
+.gl-toggle-label {
+  @apply gl-font-bold;
+  @apply gl-text-strong;
+}
+
+.gl-toggle {
+  @apply gl-inline-flex;
+  @apply gl-items-center;
+  @apply gl-justify-center;
+  @apply gl-border-0;
+  @apply gl-cursor-pointer;
+  color: var(--gl-toggle-switch-icon-color-unchecked-default);
+  background-color: var(--gl-action-strong-neutral-background-color-default);
+  position: relative;
+  width: $toggle-width;
+  height: $toggle-height;
+  @apply gl-outline-none;
+  user-select: none;
+  @apply gl-rounded-pill;
+  @apply gl-duration-slow;
+  @apply gl-leading-normal;
+
+  &::selection,
+  &::before::selection,
+  &::after::selection {
+    @apply gl-bg-transparent;
+  }
+
+  &:hover {
+    color: var(--gl-toggle-switch-icon-color-unchecked-hover);
+    background-color: var(--gl-action-strong-neutral-background-color-hover);
+  }
+
+  &:focus {
+    color: var(--gl-toggle-switch-icon-color-unchecked-focus);
+    background-color: var(--gl-action-strong-neutral-background-color-focus);
+  }
+
+  &:active {
+    color: var(--gl-toggle-switch-icon-color-unchecked-active);
+    background-color: var(--gl-action-strong-neutral-background-color-active);
+  }
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    @apply gl-focus;
+  }
+
+  .toggle-loading {
+    @apply gl-h-5;
+  }
+
+  .toggle-icon {
+    @apply gl-rounded-full;
+    position: absolute;
+    @apply gl-inline-flex;
+    @apply gl-items-center;
+    left: $gl-spacing-scale-1;
+    top: $gl-spacing-scale-1;
+    @apply gl-transition-all;
+    @apply gl-justify-center;
+    @apply gl-p-1;
+    background-color: var(--gl-action-strong-neutral-foreground-color-default);
+
+    &:hover {
+      background-color: var(--gl-action-strong-neutral-foreground-color-hover);
+    }
+
+    &:focus {
+      background-color: var(--gl-action-strong-neutral-foreground-color-focus);
+    }
+
+    &:active {
+      background-color: var(--gl-action-strong-neutral-foreground-color-active);
+    }
+
+    > svg {
+      @apply gl-w-4;
+      @apply gl-h-4;
+      @apply gl-align-baseline;
+    }
+  }
+
+  &.is-checked {
+    color: var(--gl-toggle-switch-icon-color-checked-default);
+    background-color: var(--gl-action-strong-confirm-background-color-default);
+
+    &:hover {
+      color: var(--gl-toggle-switch-icon-color-checked-hover);
+      background-color: var(--gl-action-strong-confirm-background-color-hover);
+    }
+
+    &:focus {
+      color: var(--gl-toggle-switch-icon-color-checked-focus);
+      background-color: var(--gl-action-strong-confirm-background-color-focus);
+    }
+
+    &:active {
+      color: var(--gl-toggle-switch-icon-color-checked-active);
+      background-color: var(--gl-action-strong-confirm-background-color-active);
+    }
+
+    .toggle-icon {
+      background-color: var(--gl-action-strong-confirm-foreground-color-default);
+      transform: translateX($toggle-translate-width);
+    }
+  }
+
+  &.is-disabled,
+  &.is-checked.is-disabled {
+    @apply gl-cursor-not-allowed;
+    color: var(--gl-action-disabled-background-color);
+    background-color: var(--gl-action-disabled-background-color);
+
+    .toggle-icon {
+      color: var(--gl-action-disabled-background-color);
+      background-color: var(--gl-action-disabled-foreground-color);
+    }
+  }
+}

package/src/components/base/toggle/toggle.vue

@@ -0,0 +1,194 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import uniqueId from 'lodash/uniqueId';
+
+import { toggleLabelPosition } from '../../../utils/constants';
+import GlIcon from '../icon/icon.vue';
+import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+
+let uuid = 0;
+
+export default {
+  name: 'GlToggle',
+  components: {
+    GlIcon,
+    GlLoadingIcon,
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * The toggle's state.
+     * @model
+     */
+    value: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Whether the toggle should be disabled.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Whether the toggle is in the loading state.
+     */
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The toggle's label.
+     */
+    label: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The toggle's description.
+     */
+    description: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * A help text to be shown below the toggle.
+     */
+    help: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * The label's position relative to the toggle. If 'hidden', the toggle will add the .gl-sr-only class so the label is still accessible to screen readers.
+     */
+    labelPosition: {
+      type: String,
+      required: false,
+      default: 'top',
+      validator(position) {
+        return Object.values(toggleLabelPosition).includes(position);
+      },
+    },
+  },
+  data() {
+    return {
+      labelId: uniqueId('toggle-label-'),
+    };
+  },
+  computed: {
+    shouldRenderDescription() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$scopedSlots.description || this.description) && this.isVerticalLayout;
+    },
+    shouldRenderHelp() {
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
+    },
+    toggleClasses() {
+      return [
+        { 'gl-sr-only': this.labelPosition === 'hidden' },
+        this.shouldRenderDescription ? 'gl-mb-2' : 'gl-mb-3',
+      ];
+    },
+    icon() {
+      return this.value ? 'check-xs' : 'close-xs';
+    },
+    helpId() {
+      return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
+    },
+    isChecked() {
+      return this.value ? 'true' : 'false';
+    },
+    isVerticalLayout() {
+      return this.labelPosition === 'top' || this.labelPosition === 'hidden';
+    },
+  },
+
+  beforeCreate() {
+    this.uuid = uuid;
+    uuid += 1;
+  },
+
+  methods: {
+    toggleFeature() {
+      if (!this.disabled) {
+        /**
+         * Emitted when the state changes.
+         *
+         * @event change
+         * @property {boolean} value Whether the toggle is enabled.
+         */
+        this.$emit('change', !this.value);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-toggle-wrapper gl-mb-0 gl-flex"
+    :class="{
+      'gl-flex-col': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
+      'is-disabled': disabled,
+    }"
+    data-testid="toggle-wrapper"
+  >
+    <span
+      :id="labelId"
+      :class="toggleClasses"
+      class="gl-toggle-label gl-shrink-0"
+      data-testid="toggle-label"
+    >
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span
+      v-if="shouldRenderDescription"
+      class="gl-description-label gl-mb-3"
+      data-testid="toggle-description"
+    >
+      <!-- @slot A description text to be shown below the label. -->
+      <slot name="description">{{ description }}</slot>
+    </span>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :aria-disabled="disabled"
+      :class="{
+        'is-checked': value,
+        'is-disabled': disabled || isLoading,
+      }"
+      class="gl-toggle gl-shrink-0"
+      type="button"
+      @click.prevent="toggleFeature"
+    >
+      <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
+      <span v-else class="toggle-icon">
+        <gl-icon :name="icon" :size="12" />
+      </span>
+    </button>
+    <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
+      <!-- @slot A help text to be shown below the toggle. -->
+      <slot name="help">{{ help }}</slot>
+    </span>
+  </div>
+</template>

package/src/components/base/token/token.md

@@ -0,0 +1,12 @@
+## Usage
+
+Tokens are an object that has been created after a user action, like selecting an autocompleted item
+while searching. They have a close action in the form of an 'x'.
+
+## Using the component
+
+~~~html
+<gl-token>
+  Token
+</gl-token>
+~~~

package/src/components/base/token/token.scss

@@ -0,0 +1,44 @@
+.gl-token {
+  color: var(--gl-token-foreground-color);
+  background-color: var(--gl-token-background-color);
+  @apply gl-rounded-small;
+  @apply gl-pl-3;
+  @apply gl-inline-flex;
+  @apply gl-flex-col;
+  @apply gl-justify-center;
+
+  &.gl-token-view-only {
+    @apply gl-py-2;
+    @apply gl-pr-3;
+  }
+}
+
+.gl-token-search-type-variant {
+  background-color: var(--gl-token-background-color);
+  @apply gl-rounded-tr-none;
+  @apply gl-rounded-br-none;
+}
+
+.gl-token-search-value-variant {
+  @apply gl-rounded-tl-none;
+  @apply gl-rounded-bl-none;
+}
+
+.gl-token-content {
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-text-inherit;
+
+  > .gl-avatar:first-child,
+  > .gl-spinner-container:first-child {
+    @apply gl-mr-2;
+  }
+}
+
+.gl-token-close {
+  @apply gl-ml-2;
+  color: inherit !important;
+  background-color: transparent !important;
+}

package/src/components/base/token/token.vue

@@ -0,0 +1,67 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { tokenVariants } from '../../../utils/constants';
+import { translate } from '../../../utils/i18n';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
+
+export default {
+  name: 'GlToken',
+  components: {
+    CloseButton,
+  },
+  props: {
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Token visual variants: default, search-type, and search-value.
+     */
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
+      validator: (variant) => tokenVariants.includes(variant),
+    },
+    /**
+     * The close button's label, it is used for the button's aria-label attribute.
+     */
+    removeLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlToken.closeButtonTitle', 'Remove'),
+    },
+  },
+  computed: {
+    variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+      return `gl-token-${this.variant}-variant`;
+    },
+    viewOnlyClass() {
+      return {
+        'gl-token-view-only': this.viewOnly,
+      };
+    },
+  },
+  methods: {
+    close($event) {
+      /**
+       * Emitted when x is clicked
+       *
+       * @event close
+       */
+      this.$emit('close', $event);
+    },
+  },
+};
+</script>
+
+<template>
+  <span :class="['gl-token', variantClass, viewOnlyClass]" v-on="$listeners">
+    <span class="gl-token-content">
+      <slot></slot>
+      <close-button v-if="!viewOnly" class="gl-token-close" :label="removeLabel" @click="close" />
+    </span>
+  </span>
+</template>

package/src/components/base/token_selector/helpers.js

@@ -0,0 +1,3 @@
+import has from 'lodash/has';
+
+export const tokensValidator = (tokens) => tokens.every((token) => has(token, 'id'));