@gitlab/duo-ui 0.1.0 → 0.2.0

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

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

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

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

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

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