@gitlab/duo-ui 0.1.0

package/src/components/base/tabs/tabs/tabs.md

@@ -0,0 +1,76 @@
+Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one
+specific view at a time while maintaining sight of all the relevant content options available. Each
+tab, when active, will reveal it’s own unique content.
+
+## Using the component Vue
+
+~~~html
+<gl-tabs>
+  <gl-tab title="Tab 1">
+    Tab panel 1
+  </gl-tab>
+  <gl-tab title="Tab 2">
+    Tab panel 2
+  </gl-tab>
+</gl-tabs>
+~~~
+
+## Using the component HTML
+
+~~~html
+<div class="tabs gl-tabs">
+  <ul role="tablist" class="nav gl-tabs-nav">
+    <li role="presentation" class="nav-item">
+      <a
+        role="tab"
+        target="_self"
+        href="#"
+        class="nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo"
+      >Tab 1</a>
+    </li>
+    <li role="presentation" class="nav-item">
+      <a role="tab" target="_self" href="#" class="nav-link gl-tab-nav-item">Tab 2</a>
+    </li>
+  </ul>
+  <div class="tab-content gl-tab-content">
+    <div role="tabpanel" class="tab-pane gl-tab-content active">Tab panel 1</div>
+    <div role="tabpanel" class="tab-pane gl-tab-content">Tab panel 2</div>
+  </div>
+</div>
+~~~
+
+## Adding Action Buttons to the Tabs
+
+Tabs start and end slot can be populated via props: `action-primary`, `action-secondary` and
+`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will
+behave and look. The props receive an object as such:
+
+~~~js
+{
+  text: 'Save Changes',
+  attributes: {
+    variant: 'info',
+    disabled: this.someState,
+    class: 'some-class',
+    ...
+  }
+}
+~~~
+
+## Scrollable tab buttons
+
+By default, `GlTab` will wrap tab buttons when they overflow the container. To
+enable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`
+component. This is a separate Vue component because of some limitations:
+
+- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the
+  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.
+
+`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above
+exceptions).
+
+~~~html
+<gl-scrollable-tabs>
+  <gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title"> {{ tab.content }} </gl-tab>
+</gl-scrollable-tabs>
+~~~

package/src/components/base/tabs/tabs/tabs.scss

@@ -0,0 +1,164 @@
+.gl-tabs-nav {
+  @apply gl-border-b;
+}
+
+.gl-tab-nav-item {
+  position: relative;
+  @apply gl-px-4;
+  @apply gl-py-5;
+  @apply gl-leading-normal;
+  @apply gl-text-base;
+  @apply gl-flex;
+  @apply gl-justify-center;
+  @apply gl-border;
+  @include gl-action-neutral-colors;
+  transition:
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
+
+  &::before {
+    content: '';
+    position: absolute;
+    border-bottom: $gl-border-size-2 solid transparent;
+    translate: 0 $gl-border-size-2;
+    transition:
+      border-bottom $gl-transition-duration-medium $gl-easing-out-cubic,
+      translate $gl-transition-duration-medium $gl-easing-out-cubic;
+    //offsets the bottom border from the parent border
+    bottom: -$gl-border-size-1;
+    left: -$gl-border-size-1;
+    right: -$gl-border-size-1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &, &::before {
+      transition-duration: .01ms;
+    }
+  }
+
+  &:hover:not(.gl-tab-nav-item-active)::before {
+    border-bottom-color: var(--gl-border-color-strong);
+    translate: 0;
+  }
+
+  &:focus {
+    border-radius: $gl-border-radius-base;
+  }
+
+  &.disabled {
+    @apply gl-pointer-events-auto;
+    @apply gl-cursor-not-allowed;
+    color: var(--gl-action-disabled-foreground-color);
+
+    &:hover {
+      @apply gl-shadow-none;
+    }
+  }
+
+  > .gl-tab-counter-badge {
+    font-weight: inherit;
+    @apply gl-ml-2;
+  }
+}
+
+.gl-tab-content {
+  @apply gl-py-3;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  color: var(--gl-text-color-default);
+}
+
+.gl-tab-nav-item-active {
+  @apply gl-font-bold;
+  z-index: 1;
+
+  &:active,
+  &:focus,
+  &:focus:active {
+    @include gl-focus($color: var(--gl-action-neutral-border-color-active));
+
+    .gl-scrollable-tabs-nav & {
+      @include gl-focus($inset: true);
+
+      &::before {
+        border-radius: 0 0 $gl-border-size-1 $gl-border-size-1;
+        left: $gl-border-size-3;
+        right: $gl-border-size-3;
+        bottom: $gl-border-size-3;
+      }
+    }
+
+    &::before {
+      border-radius: 0 0 $gl-border-size-2 $gl-border-size-2;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  &::before {
+    border-bottom-color: var(--gl-tab-selected-indicator-color-default);
+    translate: 0;
+  }
+}
+
+.gl-actions-tabs-start {
+  @apply gl-w-full;
+  @apply gl-flex;
+  @apply gl-flex-col;
+  @apply gl-mt-3;
+  @apply md:gl-hidden;
+}
+
+.gl-actions-tabs-end {
+  @apply gl-hidden;
+  @apply gl-grow;
+  @apply gl-justify-end;
+  @apply gl-items-center;
+  @apply gl-flex-row;
+  @apply gl-mt-0;
+  @apply md:gl-flex;
+}
+
+.gl-actions-tabs-start,
+.gl-actions-tabs-end {
+  button {
+    @apply gl-mb-3;
+    @apply md:gl-mr-3;
+    @apply md:gl-mb-0;
+  }
+
+  button:last-child {
+    @apply gl-m-0;
+  }
+}
+
+.gl-tabs-fade {
+  @apply gl-w-8;
+  bottom: 0;
+  position: sticky;
+  @apply gl-p-2;
+}
+
+.gl-tabs-fade-left {
+  left: 0;
+  @include gl-bg-gradient-blur(left, var(--gl-background-color-default));
+}
+
+.gl-tabs-fade-right {
+  right: 0;
+  @include gl-bg-gradient-blur(right, var(--gl-background-color-default));
+}
+
+.gl-tabs-fade-icon-button {
+  @apply gl-border;
+  @include gl-action-neutral-colors;
+  @apply gl-p-0;
+  @apply gl-h-full;
+}
+
+.gl-scrollable-tabs-nav {
+  @apply gl-overflow-hidden;
+  position: relative;
+  @apply gl-flex-nowrap;
+}

package/src/components/base/tabs/tabs/tabs.vue

@@ -0,0 +1,282 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BTabs } from '../../../../vendor/bootstrap-vue/src/components/tabs/tabs';
+import { tabsButtonDefaults } from '../../../../utils/constants';
+import GlButton from '../../button/button.vue';
+
+const validatorHelper = (obj) =>
+  Object.keys(obj).every((val) => val === 'text' || val === 'attributes');
+
+export default {
+  name: 'GlTabs',
+  components: {
+    BTabs,
+    GlButton,
+  },
+  inheritAttrs: false,
+  props: {
+    actionPrimary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: (obj) => validatorHelper(obj),
+    },
+    actionSecondary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: (obj) => validatorHelper(obj),
+    },
+    actionTertiary: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: (obj) => validatorHelper(obj),
+    },
+    contentClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null,
+    },
+    navClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null,
+    },
+    justified: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Sync active tab with query string parameters. Allows for deep linking into specific tabs.
+     */
+    syncActiveTabWithQueryParams: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Name to use for query string parameter.
+     */
+    queryParamName: {
+      type: String,
+      required: false,
+      default: 'tab',
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      activeTabIndex: 0,
+    };
+  },
+  computed: {
+    hasActions() {
+      return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
+    },
+    listeners() {
+      return {
+        ...this.$listeners,
+        input: this.handleInput,
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        if (this.activeTabIndex !== newValue) {
+          this.activeTabIndex = newValue;
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    if (this.syncActiveTabWithQueryParams) {
+      this.syncActiveTabFromQueryParams();
+      window.addEventListener('popstate', this.syncActiveTabFromQueryParams);
+    }
+
+    // Because we are manually binding `value` attribute to `b-tabs` the `input`
+    // event is no longer automatically fired when the component is mounted.
+    // To maintain parity with original `b-tabs` functionality
+    // we manually fire the `input` event when the component is mounted.
+    this.$emit('input', this.activeTabIndex);
+  },
+  destroyed() {
+    window.removeEventListener('popstate', this.syncActiveTabFromQueryParams);
+  },
+  methods: {
+    buttonBinding(prop, name) {
+      if (!prop.attributes) {
+        return tabsButtonDefaults[name];
+      }
+      return prop.attributes;
+    },
+    primary() {
+      this.$emit('primary');
+    },
+    secondary() {
+      this.$emit('secondary');
+    },
+    tertiary() {
+      this.$emit('tertiary');
+    },
+    /**
+     * When the query parameter is updated, update the active tab to match.
+     */
+    async syncActiveTabFromQueryParams() {
+      await this.$nextTick();
+      const queryParamValue = this.getQueryParamValue();
+      const tabIndexToActivate = this.getTabs().findIndex(
+        (tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue
+      );
+      this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
+    },
+
+    /**
+     * Returns a list of all <b-tab> instances associated with this tab control.
+     */
+    getTabs() {
+      return this.$refs.bTabs.getTabs();
+    },
+
+    /**
+     * Get the value of the query param as defined by the `queryParamName` prop.
+     */
+    getQueryParamValue() {
+      const searchParams = new URLSearchParams(window.location.search);
+
+      return searchParams.get(this.queryParamName);
+    },
+
+    /**
+     * Set the value of the query param as defined by the `queryParamName` prop.
+     * This method does nothing if the query param is already up to date.
+     */
+    setQueryParamValueIfNecessary(tabIndex) {
+      const currentQueryParamValue = this.getQueryParamValue();
+      const newQueryParamValue = this.getTabQueryParamValue(tabIndex);
+
+      // If the current query parameter is already up-to-date,
+      // avoid creating a duplicate history entry.
+      if (
+        (tabIndex === 0 && !currentQueryParamValue) ||
+        (tabIndex !== 0 && currentQueryParamValue === newQueryParamValue)
+      ) {
+        return;
+      }
+
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set(this.queryParamName, newQueryParamValue);
+
+      window.history.pushState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
+    },
+
+    /**
+     * Returns the query param value for a tab.
+     * Defaults to the tab index unless the `query-param-value` attribute is set.
+     */
+    getTabQueryParamValue(tabIndex) {
+      const tab = this.getTabs()[tabIndex];
+
+      return tab?.$attrs['query-param-value'] || tabIndex.toString();
+    },
+
+    /**
+     * Event handler for `input` event.
+     */
+    handleInput(tabIndex) {
+      this.$emit('input', tabIndex);
+      this.activeTabIndex = tabIndex;
+
+      if (this.syncActiveTabWithQueryParams) {
+        this.setQueryParamValueIfNecessary(tabIndex);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <b-tabs
+    ref="bTabs"
+    :no-nav-style="true"
+    :no-fade="true"
+    active-nav-item-class="gl-tab-nav-item-active"
+    :content-class="[contentClass, 'gl-tab-content']"
+    :nav-class="[navClass, 'gl-tabs-nav']"
+    :justified="justified"
+    :value="activeTabIndex"
+    class="gl-tabs"
+    v-bind="$attrs"
+    v-on="listeners"
+  >
+    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
+
+    <template v-if="hasActions" #tabs-start>
+      <div data-testid="actions-tabs-start" class="gl-actions-tabs-start">
+        <gl-button
+          v-if="actionPrimary"
+          data-testid="action-primary"
+          v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
+          @click="primary"
+        >
+          {{ actionPrimary.text }}
+        </gl-button>
+        <gl-button
+          v-if="actionSecondary"
+          data-testid="action-secondary"
+          v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
+          @click="secondary"
+        >
+          {{ actionSecondary.text }}
+        </gl-button>
+        <gl-button
+          v-if="actionTertiary"
+          data-testid="action-tertiary"
+          v-bind="buttonBinding(actionTertiary, 'actionTertiary')"
+          @click="tertiary"
+        >
+          {{ actionTertiary.text }}
+        </gl-button>
+      </div>
+    </template>
+    <template v-if="hasActions" #tabs-end>
+      <div data-testid="actions-tabs-end" class="gl-actions-tabs-end">
+        <gl-button
+          v-if="actionPrimary"
+          data-testid="action-primary"
+          v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
+          @click="primary"
+        >
+          {{ actionPrimary.text }}
+        </gl-button>
+        <gl-button
+          v-if="actionSecondary"
+          data-testid="action-secondary"
+          v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
+          @click="secondary"
+        >
+          {{ actionSecondary.text }}
+        </gl-button>
+        <gl-button
+          v-if="actionTertiary"
+          data-testid="action-tertiary"
+          v-bind="buttonBinding(actionTertiary, 'actionTertiary')"
+          @click="tertiary"
+        >
+          {{ actionTertiary.text }}
+        </gl-button>
+      </div>
+    </template>
+  </b-tabs>
+</template>

package/src/components/base/toast/toast.js

@@ -0,0 +1,93 @@
+/* eslint-disable import/no-default-export */
+import isFunction from 'lodash/isFunction';
+// eslint-disable-next-line no-restricted-imports
+import { ToastPlugin } from '../../../vendor/bootstrap-vue/src/components/toast/index';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
+
+const DEFAULT_OPTIONS = {
+  autoHideDelay: 5000,
+  toastClass: 'gl-toast',
+  isStatus: true,
+  noCloseButton: true,
+  toaster: 'b-toaster-bottom-left',
+};
+
+let toastsCount = 0;
+
+function renderTitle(h, toast, options) {
+  const nodes = [
+    h(CloseButton, {
+      class: ['gl-toast-close-button'],
+      on: {
+        click: toast.hide,
+      },
+    }),
+  ];
+  if (options.action) {
+    nodes.splice(
+      0,
+      0,
+      h(
+        'a',
+        {
+          role: 'button',
+          class: ['gl-toast-action'],
+          on: {
+            click: (e) => options.action.onClick(e, toast),
+          },
+        },
+        options.action.text
+      )
+    );
+  }
+  return nodes;
+}
+
+function showToast(message, options = {}) {
+  // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
+  const id = `gl-toast-${toastsCount}`;
+  toastsCount += 1;
+  const hide = () => {
+    this.$bvToast.hide(id);
+  };
+  const toast = { id, hide };
+
+  if (isFunction(options.onComplete)) {
+    const toastHiddenCallback = (e) => {
+      if (e.componentId === id) {
+        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
+        options.onComplete(e);
+      }
+    };
+
+    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
+  }
+
+  this.$bvToast.toast(message, {
+    ...DEFAULT_OPTIONS,
+    id,
+    title: renderTitle(this.$createElement, toast, options),
+  });
+  return toast;
+}
+
+/**
+ * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
+ * Once registered, the toast will be globally available throughout your app.
+ *
+ * See https://gitlab-org.gitlab.io/gitlab-ui/ for detailed documentation.
+ */
+export default {
+  install(Vue) {
+    Vue.use(ToastPlugin);
+
+    Vue.mixin({
+      beforeCreate() {
+        if (this.$toast) {
+          return;
+        }
+        this.$toast = { show: showToast.bind(this) };
+      },
+    });
+  },
+};

package/src/components/base/toast/toast.md

@@ -0,0 +1,48 @@
+
+Toasts are used to display system messages. The messages are short and straightforward. It may
+contain a dismiss button, and an action button depending on the situation.
+
+## Using the plugin
+
+In order to use the plugin, it needs to be included in your application with `Vue.use`.
+
+```js
+// myApp.js
+
+import { GlToast } from '@gitlab/ui';
+
+// Note, this has to be done before `Vue.new()`
+Vue.use(GlToast);
+```
+
+Once included in your application, the toast plugin is globally available.
+
+```js
+// myComponent.vue
+
+this.$toast.show('Hello GitLab!');
+```
+
+Below is an example with options
+
+```js
+// myComponent.vue
+
+this.$toast.show('This is a toast with an option.', {
+  action: {
+    text: 'Undo',
+    onClick: () => { ... },
+  },
+});
+```
+
+### Options
+
+Below are the options you can pass to create a toast
+
+| **Option**    | **Type**      | **Default** | **Description**                          |
+| ------------- | ------------- | ----------- | ---------------------------------------- |
+| autoHideDelay | Number        | 5000        | Display time of the toast in millisecond |
+| action        | Object        | close       | Add single actions to toast              |
+| toastClass    | String, Array | 'gl-toast'  | Custom css class name of the toast       |
+| onComplete    | Function      | null        | Trigger when toast is completed          |