@gitlab/duo-ui 0.1.0

package/src/components/base/table/table.md

@@ -0,0 +1,72 @@
+## Usage
+
+The `gl-table` component wraps BootstrapVue `b-table` component. `b-table` provides a variety of
+slots for custom data rendering. You can learn more about them in the
+[component documentation](https://bootstrap-vue.org/docs/components/table).
+When using the component, pass in the `fields` prop as part of the `$options`, and give each table
+data and table head its own styles if necessary.
+
+## Internationalization
+
+To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
+like mentioned in the implementation example.
+
+_Full documentation for the
+`field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
+
+## Header text alignment
+
+To align a given `TH` element's text to the right, set the `thAlignRight` property to `true` in
+the fields definition. This will ensure that proper styling is applied, including when the column
+is sortable.
+
+```js
+const fields = [
+  {
+    key: "column_one",
+    label: __("First column"),
+    sortable: true,
+    thAlignRight: true,
+  },
+];
+```
+
+## Use `GlTableLite` when possible
+
+If you don't need all the features of `GlTable`, like filtering, sorting, or
+pagination, use `GlTableLite` which offers a subset of `GlTable` features.
+
+## Implementation Example
+
+```html
+<script>
+  export default {
+    fields: [
+      {
+        key: 'column_one',
+        label: __('First column'),
+        thClass: 'w-60p',
+        tdClass: 'table-col d-flex'
+      },
+      {
+        key: 'col_2',
+        label: __('Second column'),
+        thClass: 'w-15p',
+        tdClass: 'table-col d-flex'
+      },
+    ];
+  }
+</script>
+<template>
+  <gl-table :items="items" :fields="$options.fields">
+    <template #head(column_one)>
+      <div>First column</div>
+      <!-- This is the column head for the first object in `fields` -->
+    </template>
+
+    <template #cell(column_one)>
+      This is the template for column data belonging to the first object
+    </template>
+  </gl-table>
+</template>
+```

package/src/components/base/table/table.scss

@@ -0,0 +1,145 @@
+table.gl-table {
+  background-color: var(--gl-color-alpha-0);
+  color: var(--gl-text-color-default);
+
+  tr {
+    th,
+    td {
+      @apply gl-border-b-1 gl-bg-transparent gl-p-5 gl-border-b-solid;
+      border-color: var(--gl-border-color-default);
+      @apply gl-leading-normal;
+      @apply gl-text-base;
+      @apply gl-align-top;
+    }
+
+    th {
+      @apply gl-font-bold;
+      color: var(--gl-text-color-heading);
+
+      .gl-table-th-sort-icon-wrapper {
+        @apply gl-ml-2;
+      }
+
+      &.gl-table-th-align-right > div {
+        @apply gl-flex-row-reverse;
+
+        .gl-table-th-sort-icon-wrapper {
+          @apply gl-ml-0 gl-mr-2;
+        }
+      }
+
+      [name='sort-icon'] {
+        user-select: none;
+        color: var(--gl-table-sorting-icon-color);
+      }
+    }
+
+    td {
+      color: var(--gl-text-color-default);
+    }
+
+    &:focus-visible {
+      @apply gl-focus;
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  // Sticky header
+  &--sticky-header thead tr {
+    position: sticky;
+    top: -1px;
+    background-color: var(--gl-background-color-default);
+    box-shadow: inset 0 -1px 0 var(--gl-border-color-default);
+  }
+
+  .table-primary,
+  .table-primary:hover {
+    background-color: var(--gl-feedback-info-background-color);
+
+    > td {
+      background-color: var(--gl-feedback-info-background-color);
+    }
+  }
+
+  caption {
+    @apply gl-pt-2;
+    color: var(--gl-text-color-subtle);
+  }
+
+  @mixin gl-tmp-stacked-override {
+    tbody > tr {
+      &::after {
+        content: '';
+        @apply gl-h-6;
+        @apply gl-w-full;
+        @apply gl-block;
+      }
+
+      > td[data-label] {
+        @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;
+
+        &::before {
+          @apply gl-text-left;
+        }
+
+        &:first-child {
+          @apply gl-border-t-1 gl-border-t-solid;
+        }
+
+        &:not(:first-child) {
+          @apply gl-border-t-0;
+        }
+      }
+
+      div {
+        @apply gl-text-right;
+        @apply gl-break-words;
+      }
+    }
+  }
+
+  $stacked-table-breakpoints: (
+    'sm': 'xs',
+    'md': 'sm',
+    'lg': 'md',
+    'xl': 'lg',
+  );
+
+  &.b-table {
+    &.b-table-stacked {
+      @include gl-tmp-stacked-override();
+    }
+
+    @each $class, $mq in $stacked-table-breakpoints {
+      &.b-table-stacked-#{$class} {
+        @include media-breakpoint-down(#{$mq}) {
+          @include gl-tmp-stacked-override();
+        }
+      }
+    }
+  }
+
+  &.table-hover tbody tr:hover,
+  &.table-hover td.table-secondary:hover {
+    background-color: var(--gl-table-row-background-color-hover);
+  }
+
+  thead th:hover {
+    background-color: transparent !important;
+
+    [name='sort-icon'] {
+      display: flex !important;
+    }
+  }
+}
+
+.table.b-table > thead > tr > th,
+.table.b-table > tfoot > tr > th {
+  background-image: none !important;
+}
+
+.table.b-table > thead > tr > [aria-sort]:not(.b-table-sort-icon-left),
+.table.b-table > tfoot > tr > [aria-sort]:not(.b-table-sort-icon-left) {
+  padding-right: 1rem;
+}

package/src/components/base/table/table.vue

@@ -0,0 +1,144 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BTable } from '../../../vendor/bootstrap-vue/src/components/table/table';
+import { logWarning, isDev } from '../../../utils/utils';
+import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
+
+const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
+  return (
+    tableFullProps.some((prop) => $attrs[prop] !== undefined) ||
+    tableFullSlots.some((slot) => $scopedSlots[slot] !== undefined)
+  );
+};
+
+const { tableClass } = BTable.options.props;
+
+export default {
+  name: 'GlTable',
+  components: {
+    BTable,
+  },
+  inheritAttrs: false,
+  props: {
+    tableClass,
+    fields: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    sortBy: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    sortDesc: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      localSortBy: this.sortBy,
+      localSortDesc: this.sortDesc,
+    };
+  },
+  computed: {
+    stickyHeaderClass() {
+      return this.stickyHeader ? 'gl-table--sticky-header' : null;
+    },
+    localTableClass() {
+      return ['gl-table', this.tableClass, this.stickyHeaderClass];
+    },
+    headSlots() {
+      return [
+        'head()',
+        ...Object.keys(this.$scopedSlots).filter((slotName) => slotName.startsWith('head(')),
+      ];
+    },
+    computedFields() {
+      return this.fields?.map((field) => {
+        if (typeof field === 'string') {
+          return field;
+        }
+        const { thAlignRight, thClass = '', ...rest } = field;
+        const computedThClass = Array.isArray(thClass) ? thClass : thClass.split(' ');
+        if (thAlignRight) {
+          computedThClass.push('gl-table-th-align-right');
+        }
+        return {
+          ...rest,
+          thClass: computedThClass,
+        };
+      });
+    },
+  },
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning, this.$el);
+    }
+  },
+  methods: {
+    isSortable({ field }) {
+      return field?.sortable;
+    },
+    activeSortingColumn({ field }) {
+      return this.localSortBy === field?.key;
+    },
+    getSortingIcon({ field }) {
+      if (this.activeSortingColumn({ field })) {
+        if (this.localSortDesc) {
+          return '↓';
+        }
+        return '↑';
+      }
+
+      if (this.$attrs['sort-direction'] === 'desc') {
+        return '↓';
+      }
+
+      return '↑';
+    },
+  },
+};
+</script>
+
+<template>
+  <b-table
+    :table-class="localTableClass"
+    :fields="computedFields"
+    :sort-by.sync="localSortBy"
+    :sort-desc.sync="localSortDesc"
+    no-sort-reset
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template v-for="slotName in Object.keys($scopedSlots)" #[slotName]="scope">
+      <slot :name="slotName" v-bind="scope"></slot>
+    </template>
+    <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
+      <div :key="headSlotName" class="gl-flex">
+        <slot :name="headSlotName" v-bind="scope"
+          ><span>{{ scope.label }}</span></slot
+        ><template v-if="isSortable(scope)">
+          <div class="gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center">
+            <span
+              name="sort-icon"
+              data-testid="sort-icon"
+              :class="{ 'gl-hidden': !activeSortingColumn(scope) }"
+            >
+              {{ getSortingIcon(scope) }}
+            </span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </b-table>
+</template>

package/src/components/base/table_lite/table_lite.md

@@ -0,0 +1,68 @@
+## Usage
+
+The `GlTableLite` component wraps BootstrapVue `BTableLite` component.
+`BTableLite` provides a variety of slots for custom data rendering. You can learn
+more about them in the
+[component documentation](https://bootstrap-vue.org/docs/components/table#light-weight-tables).
+
+## `GlTable` vs. `GlTableLite`
+
+`GlTableLite` adds less payload to the pagebundle than `GlTable`.
+When possible `GlTableLite` should be preferred over `GlTable`.
+
+The `GlTableLite` component provides all of the styling and formatting features of
+`GlTable` (including row details and stacked support), while excluding the following features:
+
+- Filtering
+- Sorting
+- Pagination
+- Items provider support
+- Selectable rows
+- Busy table state and styling
+- Fixed top and bottom rows
+- Empty row support
+
+## Internationalization
+
+To ensure we internationalize field labels, always pass an array of objects for the `fields` prop,
+like mentioned in the implementation example.
+
+_Full documentation for the `field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_
+
+## Implementation example
+
+```html
+<script>
+export default {
+  fields: [
+    {
+      key: 'column_one',
+      label: __('First column'),
+      thClass: 'w-60p',
+      tdClass: 'table-col d-flex'
+    },
+    {
+      key: 'col_2',
+      label: __('Second column'),
+      thClass: 'w-15p',
+      tdClass: 'table-col d-flex'
+    },
+  ];
+}
+</script>
+<template>
+  <gl-table-lite
+    :items="items"
+    :fields="$options.fields"
+  >
+    <template #head(column_one)>
+      <div>First column</div><!-- This is the column head for the first object in `fields` -->
+    </template>
+
+    <template #cell(column_one)>
+      This is the template for column data belonging to the first object
+    </template>
+
+  </gl-table-lite>
+</template>
+```

package/src/components/base/table_lite/table_lite.vue

@@ -0,0 +1,43 @@
+<script>
+import { BTableLite } from '../../../vendor/bootstrap-vue/src/components/table/table-lite';
+
+const { tableClass } = BTableLite.options.props;
+
+export default {
+  name: 'GlTableLite',
+  components: {
+    BTableLite,
+  },
+  inheritAttrs: false,
+  props: {
+    tableClass,
+    fields: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    stickyHeader: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    stickyHeaderClass() {
+      return this.stickyHeader ? 'gl-table--sticky-header' : null;
+    },
+    localTableClass() {
+      return ['gl-table', this.tableClass, this.stickyHeaderClass];
+    },
+  },
+};
+</script>
+
+<template>
+  <b-table-lite :table-class="localTableClass" :fields="fields" v-bind="$attrs" v-on="$listeners">
+    <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
+      <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
+      <slot :name="slot" v-bind="scope"></slot>
+    </template>
+  </b-table-lite>
+</template>

package/src/components/base/tabs/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_TAB_TITLE_LINK_CLASS = 'gl-tab-nav-item';

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

@@ -0,0 +1,57 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import isPlainObject from 'lodash/isPlainObject';
+import { BTab } from '../../../../vendor/bootstrap-vue/src/components/tabs/tab';
+
+import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
+
+export default {
+  name: 'GlTab',
+  components: {
+    BTab,
+  },
+  inheritAttrs: false,
+  props: {
+    titleLinkClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: '',
+    },
+    /**
+     * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
+     */
+    queryParamValue: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    linkClass() {
+      const { titleLinkClass } = this;
+
+      if (Array.isArray(titleLinkClass)) {
+        return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
+      }
+      if (isPlainObject(titleLinkClass)) {
+        return { ...titleLinkClass, [DEFAULT_TAB_TITLE_LINK_CLASS]: true };
+      }
+      return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
+    },
+  },
+};
+</script>
+
+<template>
+  <b-tab
+    :title-link-class="linkClass"
+    :query-param-value="queryParamValue"
+    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>
+  </b-tab>
+</template>

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

@@ -0,0 +1,140 @@
+<script>
+import debounce from 'lodash/debounce';
+import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
+import GlIcon from '../../icon/icon.vue';
+import GlTabs from './tabs.vue';
+
+const NAV_CLASS = 'gl-scrollable-tabs-nav';
+
+export default {
+  name: 'GlScrollableTabs',
+  components: {
+    GlTabs,
+    GlIcon,
+  },
+  directives: {
+    GlResizeObserverDirective,
+  },
+  inheritAttrs: false,
+  data() {
+    return {
+      width: 0,
+      // This is a reactive value of a child element's scrollLeft. It is not two-way bound.
+      // Do not set manually outside of "scroll" callback.
+      scrollLeft: 0,
+      navScrollWidth: 0,
+    };
+  },
+  computed: {
+    navClass() {
+      const attrsNavClass = this.$attrs.navClass;
+
+      if (!attrsNavClass) {
+        return [NAV_CLASS];
+      }
+      if (Array.isArray(attrsNavClass)) {
+        return [NAV_CLASS, ...attrsNavClass];
+      }
+
+      return [NAV_CLASS, attrsNavClass];
+    },
+    displayScrollLeft() {
+      // if we have scrolled && there's overflow
+      return this.scrollLeft && this.width < this.navScrollWidth;
+    },
+
+    displayScrollRight() {
+      // if there's more overflow to the right
+      return this.scrollLeft + this.width < this.navScrollWidth;
+    },
+    passthroughAttrs() {
+      return Object.keys(this.$attrs)
+        .filter((key) => !key.startsWith('action'))
+        .reduce((acc, key) => Object.assign(acc, { [key]: this.$attrs[key] }), {});
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.navScrollWidth = this.getScrollWidth();
+    });
+
+    this.handleNavScroll = debounce((e) => {
+      this.scrollLeft = e.target.scrollLeft;
+    }, 100);
+
+    this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+  },
+  beforeDestroy() {
+    this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
+  },
+  updated() {
+    // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
+    this.$nextTick(() => {
+      this.navScrollWidth = this.getScrollWidth();
+    });
+  },
+  methods: {
+    handleResize({ contentRect: { width } }) {
+      this.width = width;
+      this.navScrollWidth = this.getScrollWidth();
+    },
+    scrollTabsLeft() {
+      const scrollTo = this.scrollLeft - this.width;
+      this.scrollTabs(Math.max(scrollTo, 0));
+    },
+    scrollTabsRight() {
+      const scrollTo = this.scrollLeft + this.width;
+      this.scrollTabs(Math.min(scrollTo, this.getScrollWidth() - this.width));
+    },
+    scrollTabs(scrollTo) {
+      this.getNavContainer().scrollTo({ left: scrollTo, behavior: 'smooth' });
+      this.scrollLeft = scrollTo;
+    },
+    getScrollWidth() {
+      return this.getNavContainer()?.scrollWidth || 0;
+    },
+    getNavContainer() {
+      return this.$el?.querySelector(`.${NAV_CLASS}`);
+    },
+  },
+  NAV_CLASS,
+};
+</script>
+
+<template>
+  <gl-tabs
+    v-gl-resize-observer-directive="handleResize"
+    :nav-class="navClass"
+    v-bind="passthroughAttrs"
+    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 #tabs-start>
+      <li v-show="displayScrollLeft" class="gl-tabs-fade gl-tabs-fade-left">
+        <button
+          class="gl-tabs-fade-icon-button"
+          aria-label="Scroll left"
+          tabindex="-1"
+          @click="scrollTabsLeft"
+        >
+          <gl-icon :size="16" name="chevron-lg-left" />
+        </button>
+      </li>
+    </template>
+    <template #tabs-end>
+      <li v-show="displayScrollRight" class="gl-tabs-fade gl-tabs-fade-right">
+        <button
+          class="gl-tabs-fade-icon-button"
+          aria-label="Scroll right"
+          tabindex="-1"
+          @click="scrollTabsRight"
+        >
+          <gl-icon :size="16" name="chevron-lg-right" />
+        </button>
+      </li>
+    </template>
+  </gl-tabs>
+</template>