@gitlab/duo-ui 0.1.0

package/src/components/base/segmented_control/segmented_control.vue

@@ -0,0 +1,77 @@
+<script>
+import { BFormRadioGroup } from '../../../vendor/bootstrap-vue/src/components/form-radio/form-radio-group';
+
+const genericErrorMessage = 'Segmented button should always have valid option selected';
+
+export default {
+  name: 'GlSegmentedControl',
+  components: {
+    BFormRadioGroup,
+  },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'input',
+  },
+  props: {
+    checked: {
+      required: true,
+      validator: () => true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    enabledOptions() {
+      return this.options.filter((option) => !option.disabled);
+    },
+  },
+  watch: {
+    checked: {
+      handler(newValue, oldValue) {
+        this.checkValue(newValue, oldValue);
+      },
+    },
+    options: {
+      handler() {
+        this.checkValue(this.checked);
+      },
+    },
+  },
+  created() {
+    this.checkValue(this.checked);
+  },
+  methods: {
+    checkValue(newValue, oldValue = null) {
+      if (!this.isValidValue(newValue)) {
+        // eslint-disable-next-line no-console
+        console.warn(genericErrorMessage);
+        if (this.enabledOptions.length) {
+          const suggestion =
+            oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
+          /**
+           * Emitted when the selection changes
+           * @event input
+           * @argument checked The selected option
+           */
+          this.$emit('input', suggestion);
+        }
+      }
+    },
+    isValidValue(val) {
+      return this.enabledOptions.some(({ value }) => value === val);
+    },
+  },
+};
+</script>
+<template>
+  <b-form-radio-group
+    buttons
+    button-variant="gl-segmented-button gl-button"
+    class="gl-segmented-control"
+    v-bind="{ ...$attrs, options, checked }"
+    v-on="$listeners"
+  />
+</template>

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -0,0 +1,46 @@
+Skeleton loaders are to be used when pages or sections can be progressively populated with content,
+such as text and images, as they become available. Generally speaking the first batch of content
+will be the lightest to load and is followed by secondary and tertiary content batches. Each loading
+step will add in more detail to the page until no skeleton loaders are present anymore. Content
+should replace skeleton objects immediately when the data is available.
+
+The skeleton loader component accepts shapes which in return will create a skeleton state with a
+loading animation. Any skeleton state components should be created with
+`<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton
+will be used. See "Default" and "Default With Custom Props" examples.
+
+**NOTE:** Skeleton loaders can also be composed with a `.gl-animate-skeleton-loader`
+CSS class. This CSS-based approach is easier to make responsive and match mocked elements.
+Feel free to use this approach if it suits your use case and please leave your
+feedback in this [Feedback for css-based skeleton loading
+indicator](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2319) issue.
+To improve developer experience and simplify matching Pajamas styles we're considering
+several improvements in the future, including adding more CSS util classes for
+this animation, or creating a dedicated component.  Here is an example of how
+you could replicate the default `<gl-skeleton-loader />` behavior with the
+CSS-based approach:
+
+```html
+<div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-20"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-30"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-26"></div>
+</div>
+```
+
+See
+[animation.scss](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/scss/utility-mixins/animation.scss#L17)
+to learn more.
+
+## Progressive Loading
+
+Determine if progressive loading is available, if it is break apart the skeleton to load data as it
+becomes readily available. If progessive loading is not available, replace the entire skeleton when
+the data is available.
+
+## Under the hood
+
+Skeleton Loader is a port of [vue-content-loader](https://github.com/egoist/vue-content-loader).
+Some changes have been made to the code to better suit our codebase, such as removing props and
+refactoring into a SFC. Please take a look at their documentation and a useful [UI tool](http://danilowoz.com/create-vue-content-loader/)
+for seeing the code output for `svg` shapes.

package/src/components/base/skeleton_loader/skeleton_loader.scss

@@ -0,0 +1,17 @@
+.gl-skeleton-loader-default-container {
+  width: 235px;
+}
+
+.gl-skeleton-loader {
+  stop {
+    @apply gl-opacity-10;
+  }
+
+  .background-stop {
+    stop-color: var(--gl-skeleton-loader-background-color);
+  }
+
+  .shimmer-stop {
+    stop-color: var(--gl-skeleton-loader-shimmer-color);
+  }
+}

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -0,0 +1,249 @@
+<script>
+import range from 'lodash/range';
+import { uid } from '../../../utils/utils';
+
+const DEFAULT_LINE_MAX_WIDTH = 235;
+const DEFAULT_LINE_WIDTH_PERCENTAGES = [65, 100, 85];
+const DEFAULT_LINE_HEIGHT = 10;
+const DEFAULT_LINE_SPACING = 4;
+const DEFAULT_SVG_WIDTH = 400;
+const DEFAULT_SVG_HEIGHT = 130;
+
+export default {
+  name: 'GlSkeletonLoader',
+  functional: true,
+  props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
+    width: {
+      type: Number,
+      default: null,
+      required: false,
+    },
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
+    height: {
+      type: Number,
+      default: null,
+      required: false,
+    },
+    /**
+     * Aspect ratio option of <svg/>
+     */
+    preserveAspectRatio: {
+      type: String,
+      default: 'xMidYMid meet',
+      required: false,
+    },
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
+    baseUrl: {
+      type: String,
+      default: '',
+      required: false,
+    },
+    /**
+     * Defaults to unique id
+     */
+    uniqueKey: {
+      type: String,
+      default: () => uid(),
+      required: false,
+    },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
+    lines: {
+      type: Number,
+      default: 3,
+      required: false,
+    },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
+    equalWidthLines: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  render(createElement, { props, slots }) {
+    const slotIsSet = () => slots().default;
+
+    const propValueOrDefault = (name, defaultValue) =>
+      props[name] !== null ? props[name] : defaultValue;
+
+    const width = () => {
+      if (slotIsSet()) {
+        return propValueOrDefault('width', DEFAULT_SVG_WIDTH);
+      }
+
+      return propValueOrDefault('width', DEFAULT_LINE_MAX_WIDTH);
+    };
+
+    const height = () => {
+      if (slotIsSet()) {
+        return propValueOrDefault('height', DEFAULT_SVG_HEIGHT);
+      }
+
+      return propValueOrDefault(
+        'height',
+        props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING
+      );
+    };
+
+    const lineWidth = (index) => {
+      if (props.equalWidthLines) {
+        return '100%';
+      }
+
+      return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
+    };
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    const svg = createElement(
+      'svg',
+      {
+        class: {
+          'gl-skeleton-loader': true,
+          'gl-w-full gl-h-full': !slotIsSet(),
+        },
+        attrs: {
+          viewBox: `0 0 ${width()} ${height()}`,
+          version: '1.1',
+          preserveAspectRatio: props.preserveAspectRatio,
+        },
+      },
+      [
+        createElement('title', {}, ['Loading']),
+        createElement('rect', {
+          attrs: {
+            'clip-path': `url(${props.baseUrl}#${props.uniqueKey}-idClip)`,
+            x: 0,
+            y: 0,
+            width: width(),
+            height: height(),
+            ...(reducedMotion
+              ? { class: 'gl-fill-gray-100' }
+              : { fill: `url(${props.baseUrl}#${props.uniqueKey}-idGradient)` }),
+          },
+        }),
+        createElement('defs', {}, [
+          createElement(
+            'clipPath',
+            {
+              attrs: {
+                id: `${props.uniqueKey}-idClip`,
+              },
+            },
+            slotIsSet()
+              ? slots().default
+              : range(props.lines).map((index) =>
+                  createElement('rect', {
+                    key: index,
+                    attrs: {
+                      y: index * DEFAULT_LINE_HEIGHT + index * DEFAULT_LINE_SPACING,
+                      width: lineWidth(index),
+                      height: DEFAULT_LINE_HEIGHT,
+                      rx: 4,
+                    },
+                  })
+                )
+          ),
+          !reducedMotion &&
+            createElement(
+              'linearGradient',
+              {
+                attrs: {
+                  id: `${props.uniqueKey}-idGradient`,
+                },
+              },
+              [
+                createElement(
+                  'stop',
+                  {
+                    class: 'background-stop',
+                    attrs: {
+                      offset: '0%',
+                    },
+                  },
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-2; 1',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+                createElement(
+                  'stop',
+                  {
+                    class: 'shimmer-stop',
+                    attrs: {
+                      offset: '50%',
+                    },
+                  },
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-1.5; 1.5',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+                createElement(
+                  'stop',
+                  {
+                    class: 'background-stop',
+                    attrs: {
+                      offset: '100%',
+                    },
+                  },
+                  [
+                    createElement('animate', {
+                      attrs: {
+                        attributeName: 'offset',
+                        values: '-1; 2',
+                        dur: '1s',
+                        repeatCount: 'indefinite',
+                      },
+                    }),
+                  ]
+                ),
+              ]
+            ),
+        ]),
+      ]
+    );
+
+    if (slotIsSet()) {
+      return svg;
+    }
+
+    return createElement(
+      'div',
+      {
+        class: 'gl-skeleton-loader-default-container gl-max-w-full',
+        style: {
+          width: props.width !== null ? `${props.width}px` : null,
+          height: props.height !== null ? `${props.height}px` : null,
+        },
+      },
+      [svg]
+    );
+  },
+};
+</script>

package/src/components/base/sorting/sorting.md

@@ -0,0 +1,80 @@
+The sorting component allows the user to select the field on which they would like to sort a list
+and whether to sort in ascending or descending order.
+
+Provide a list of sort options via the `sortOptions` prop with this structure:
+
+```typescript
+type sortOptionsProp = Array<{
+  value: string
+  text: string
+}>
+```
+
+The `value` should be a unique primitive value, and `text` is the user-facing
+string for that option.
+
+Set the currently selected sort option by passing a value to the `sortBy` prop.
+This should equal one of the `sortOptions` values. The selected sort option is
+rendered with a check mark next to it in the dropdown menu.
+
+When the user changes the selected sort option, a `sortByChange` event is
+emitted, with the `value` of the option as the only payload.
+
+The text of the dropdown trigger button is the `text` of the selected sort
+option. Pass a string to the `text` prop to override this behavior.
+
+When the user clicks on the sort direction button, a `sortDirectionChange`
+event is emitted, with a boolean value as its only payload. If the payload is
+`true`, the new order is ascending; otherwise it's descending.
+
+A complete implementation example might look like:
+
+```html
+<template>
+  <gl-sorting
+    :sort-options="sortOptions"
+    :sort-by="sortBy"
+    :is-ascending="isAscending"
+    @sortByChange="onSortByChange"
+    @sortDirectionChange="onDirectionChange"
+  />
+</template>
+
+<script>
+import { GlSorting } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlSorting,
+  },
+  data() {
+    const sortOptions = [{
+      value: 'name',
+      text: 'Name',
+    }, {
+      value: 'date',
+      text: 'Date',
+    }];
+
+    return {
+      isAscending: false,
+      sortBy: sortOptions[0].value,
+      sortOptions,
+    }
+  },
+  methods: {
+    onSortByChange(value) {
+      this.sortBy = value;
+      this.sortMyData(this.sortBy, this.isAscending);
+    },
+    onDirectionChange(isAscending) {
+      this.isAscending = isAscending;
+      this.sortMyData(this.sortBy, this.isAscending);
+    },
+    sortMyData(sortBy, isAscending) {
+      // Use sortBy and direction to sort your data
+    },
+  }
+}
+</script>
+```

package/src/components/base/sorting/sorting.vue

@@ -0,0 +1,160 @@
+<script>
+import { GlTooltipDirective } from '../../../directives/tooltip';
+import GlButton from '../button/button.vue';
+import GlButtonGroup from '../button_group/button_group.vue';
+import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';
+import { isOption } from '../new_dropdowns/listbox/utils';
+import { translate } from '../../../utils/i18n';
+
+export default {
+  name: 'GlSorting',
+  components: {
+    GlButton,
+    GlButtonGroup,
+    GlCollapsibleListbox,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    /**
+     * Text to place in the toggle button.
+     */
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Sort options to display in the dropdown
+     */
+    sortOptions: {
+      type: Array,
+      required: false,
+      default: () => [],
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      validator: (sortOptions) => sortOptions.every(isOption),
+    },
+    /**
+     * The value of the item currently selected in the dropdown.
+     * Only to be used with the `sortOptions` prop.
+     */
+    sortBy: {
+      type: [String, Number],
+      required: false,
+      default: null,
+    },
+    /**
+     * Determines the current sort order icon displayed.
+     */
+    isAscending: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The text for the tooltip and aria-label of the sort direction toggle
+     * button instead of the defaults for ascending/descending.
+     */
+    sortDirectionToolTip: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Additional class(es) to apply to the root element of the GlCollapsibleListbox.
+     */
+    dropdownClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Additional class(es) to apply to the dropdown toggle.
+     */
+    dropdownToggleClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Additional class(es) to apply to the sort direction toggle button.
+     */
+    sortDirectionToggleClass: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    /**
+     * Render the dropdown toggle button as a block element
+     */
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    localSortDirection() {
+      return this.isAscending ? 'sort-lowest' : 'sort-highest';
+    },
+    sortDirectionText() {
+      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+
+      return this.isAscending
+        ? translate('GlSorting.sortAscending', 'Sort direction: ascending')
+        : translate('GlSorting.sortDescending', 'Sort direction: descending');
+    },
+  },
+  methods: {
+    toggleSortDirection() {
+      const newDirection = !this.isAscending;
+
+      /**
+       * Emitted when the sort direction button is clicked.
+       *
+       * The event's payload will be true if the direction has been changed to
+       * ascending, or false if descending.
+       *
+       * @property {boolean} isAscending
+       */
+      this.$emit('sortDirectionChange', newDirection);
+    },
+    onSortByChanged(event) {
+      /**
+       * Emitted when the sort field is changed.
+       *
+       * The event's payload is the value of the selected sort field.
+       *
+       * Only emitted when using the `sortOptions` prop.
+       *
+       * @property {string|number} value
+       */
+      this.$emit('sortByChange', event);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button-group class="gl-sorting">
+    <gl-collapsible-listbox
+      :toggle-text="text"
+      :items="sortOptions"
+      :selected="sortBy"
+      :toggle-class="dropdownToggleClass"
+      :class="dropdownClass"
+      placement="bottom-end"
+      :block="block"
+      @select="onSortByChanged"
+    />
+    <gl-button
+      v-gl-tooltip
+      :title="sortDirectionText"
+      :icon="localSortDirection"
+      :aria-label="sortDirectionText"
+      :class="['sorting-direction-button', sortDirectionToggleClass]"
+      @click="toggleSortDirection"
+    />
+  </gl-button-group>
+</template>

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

@@ -0,0 +1,48 @@
+export const tableFullSlots = [
+  'bottom-row',
+  'empty',
+  'emptyfiltered',
+  'table-busy',
+  'thead-top',
+  'top-row',
+];
+
+export const tableFullProps = [
+  'api-url',
+  'busy',
+  'current-page',
+  'empty-filtered-html',
+  'empty-filtered-text',
+  'empty-html',
+  'empty-text',
+  'filter',
+  'filter-debounce',
+  'filter-function',
+  'filter-ignored-fields',
+  'filter-included-fields',
+  'label-sort-asc',
+  'label-sort-clear',
+  'label-sort-desc',
+  'no-footer-sorting',
+  'no-local-sorting',
+  'no-provider-filtering',
+  'no-provider-paging',
+  'no-provider-sorting',
+  'no-select-on-click',
+  'per-page',
+  'select-mode',
+  'selectable',
+  'selected-variant',
+  'show-empty',
+  'sort-by',
+  'sort-compare',
+  'sort-compare-locale',
+  'sort-compare-options',
+  'sort-desc',
+  'sort-direction',
+  'sort-icon-left',
+  'sort-null-last',
+];
+
+export const glTableLiteWarning =
+  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';