@gitlab/duo-ui 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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