@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -1,35 +0,0 @@
-<script>
-import uniqueId from 'lodash/uniqueId';
-
-export default {
-  name: 'GlListboxGroup',
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    textSrOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  created() {
-    this.nameId = uniqueId('gl-listbox-group-');
-  },
-};
-</script>
-
-<template>
-  <ul role="group" :aria-labelledby="nameId" class="gl-mb-0 gl-pl-0">
-    <li
-      :id="nameId"
-      role="presentation"
-      class="gl-pb-2 gl-pl-4 gl-pt-3 gl-text-sm gl-font-bold gl-text-strong"
-      :class="{ 'gl-sr-only': textSrOnly }"
-    >
-      <slot name="group-label">{{ name }}</slot>
-    </li>
-    <slot></slot>
-  </ul>
-</template>

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -1,77 +0,0 @@
-<script>
-import GlIcon from '../../icon/icon.vue';
-import { ENTER, SPACE } from '../constants';
-import { stopEvent } from '../../../../utils/utils';
-
-export default {
-  name: 'GlListboxItem',
-  components: {
-    GlIcon,
-  },
-  props: {
-    isSelected: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isFocused: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isCheckCentered: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    checkedClasses() {
-      if (this.isCheckCentered) {
-        return '';
-      }
-
-      return 'gl-mt-3 gl-self-start';
-    },
-  },
-  methods: {
-    toggleSelection() {
-      this.$emit('select', !this.isSelected);
-    },
-    onKeydown(event) {
-      const { code } = event;
-
-      if (code === ENTER || code === SPACE) {
-        stopEvent(event);
-        this.toggleSelection();
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <li
-    class="gl-new-dropdown-item"
-    role="option"
-    :tabindex="isFocused ? 0 : -1"
-    :aria-selected="isSelected"
-    @click="toggleSelection"
-    @keydown="onKeydown"
-  >
-    <span class="gl-new-dropdown-item-content">
-      <gl-icon
-        name="mobile-issue-close"
-        data-testid="dropdown-item-checkbox"
-        :class="[
-          'gl-new-dropdown-item-check-icon',
-          { 'gl-invisible': !isSelected },
-          checkedClasses,
-        ]"
-      />
-      <span class="gl-new-dropdown-item-text-wrapper">
-        <slot></slot>
-      </span>
-    </span>
-  </li>
-</template>

package/src/components/base/new_dropdowns/listbox/listbox_search_input.vue

@@ -1,76 +0,0 @@
-<script>
-import GlClearIconButton from '../../../shared_components/clear_icon_button/clear_icon_button.vue';
-import GlIcon from '../../icon/icon.vue';
-
-export default {
-  name: 'GlListboxSearchInput',
-  components: {
-    GlClearIconButton,
-    GlIcon,
-  },
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-  props: {
-    /**
-     * If provided, used as value of search input
-     */
-    value: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Search input placeholder text and aria-label
-     */
-    placeholder: {
-      type: String,
-      required: false,
-      default: 'Search',
-    },
-  },
-  computed: {
-    hasValue() {
-      return Boolean(this.value.length);
-    },
-    inputListeners() {
-      return {
-        ...this.$listeners,
-        input: (event) => {
-          this.$emit('input', event.target.value);
-        },
-      };
-    },
-  },
-  methods: {
-    clearInput() {
-      this.$emit('input', '');
-      this.focusInput();
-    },
-    focusInput() {
-      this.$refs.input.focus();
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-listbox-search">
-    <gl-icon name="search-sm" :size="12" class="gl-listbox-search-icon" />
-    <input
-      ref="input"
-      type="search"
-      :value="value"
-      class="gl-listbox-search-input"
-      :aria-label="placeholder"
-      :placeholder="placeholder"
-      v-on="inputListeners"
-    />
-    <gl-clear-icon-button
-      v-if="hasValue"
-      class="gl-listbox-search-clear-button"
-      @click.stop="clearInput"
-    />
-  </div>
-</template>

package/src/components/base/new_dropdowns/listbox/mock_data.js

@@ -1,139 +0,0 @@
-export const mockOptions = [
-  {
-    value: 'prod',
-    text: 'Product',
-  },
-  {
-    value: 'ppl',
-    text: 'People',
-  },
-  {
-    value: 'fin',
-    text: 'Finance',
-  },
-  {
-    value: 'leg',
-    text: 'Legal',
-  },
-  {
-    value: 'eng',
-    text: 'Engineering',
-  },
-  {
-    value: 'sales',
-    text: 'Sales',
-  },
-  {
-    value: 'marketing',
-    text: 'Marketing',
-  },
-  {
-    value: 'acc',
-    text: 'Accounting',
-  },
-  {
-    value: 'hr',
-    text: 'Human Resource Management',
-  },
-  {
-    value: 'rnd',
-    text: 'Research and Development',
-  },
-  {
-    value: 'cust',
-    text: 'Customer Service',
-  },
-  {
-    value: 'sup',
-    text: 'Support',
-  },
-];
-
-export const mockOptionsValues = mockOptions.map(({ value }) => value);
-
-export const mockGroups = [
-  {
-    text: 'Branches',
-    options: [
-      { text: 'main', value: 'main' },
-      { text: 'feature-123', value: 'feature-123' },
-    ],
-  },
-  {
-    text: 'Tags',
-    options: [
-      { text: 'v1.0', value: 'v1.0' },
-      { text: 'v2.0', value: 'v2.0' },
-      { text: 'v2.1', value: 'v2.1' },
-    ],
-  },
-];
-
-export const mockGroupOptionsValues = mockGroups
-  .map((group) => group.options)
-  .flat()
-  .map(({ value }) => value);
-
-export const mockGroupsWithTextSrOnly = [
-  {
-    text: 'Default',
-    options: [
-      {
-        text: 'main',
-        value: 'main',
-      },
-      {
-        text: 'development',
-        value: 'development',
-      },
-    ],
-    textSrOnly: true,
-  },
-  {
-    text: 'Feature branches',
-    options: [
-      {
-        text: 'feature/add-avatar',
-        value: 'add',
-      },
-      {
-        text: 'feature/improve-panel',
-        value: 'improve',
-      },
-    ],
-  },
-  {
-    text: 'Bugfix branches',
-    options: [
-      {
-        text: 'fix/border-of-avatar',
-        value: 'fix-border',
-      },
-      {
-        text: 'fix/radius-panel',
-        value: 'fix-radius',
-      },
-    ],
-  },
-];
-
-export const mockUsers = [
-  {
-    value: 'mikegreiling',
-    text: 'Mike Greiling',
-    secondaryText: '@mikegreiling',
-    icon: 'foo',
-  },
-  {
-    value: 'ohoral',
-    text: 'Olena Horal-Koretska',
-    secondaryText: '@ohoral',
-    icon: 'bar',
-  },
-  {
-    value: 'markian',
-    text: 'Mark Florian',
-    secondaryText: '@markian',
-    icon: 'bin',
-  },
-];

package/src/components/base/new_dropdowns/listbox/utils.js

@@ -1,25 +0,0 @@
-import isNumber from 'lodash/isNumber';
-import isString from 'lodash/isString';
-
-const isOption = (item) => Boolean(item) && (isString(item.value) || isNumber(item.value));
-
-// eslint-disable-next-line unicorn/no-array-callback-reference
-const isGroup = ({ options } = {}) => Array.isArray(options) && options.every(isOption);
-
-const hasNoDuplicates = (array) => array.length === new Set(array).size;
-
-const flattenedOptions = (items) => items.flatMap((item) => (isOption(item) ? item : item.options));
-
-// eslint-disable-next-line unicorn/no-array-callback-reference
-const isAllOptionsOrAllGroups = (items) => items.every(isOption) || items.every(isGroup);
-
-const hasUniqueValues = (items) =>
-  hasNoDuplicates(flattenedOptions(items).map(({ value }) => value));
-
-// eslint-disable-next-line unicorn/no-array-callback-reference
-const hasUniqueGroups = (items) => hasNoDuplicates(items.filter(isGroup).map(({ text }) => text));
-
-const itemsValidator = (items) =>
-  isAllOptionsOrAllGroups(items) && hasUniqueValues(items) && hasUniqueGroups(items);
-
-export { isOption, itemsValidator, flattenedOptions };

package/src/components/base/paginated_list/paginated_list.md

@@ -1 +0,0 @@
-The paginated list component allows the easy creation of list with pagination and client side sorting.

package/src/components/base/paginated_list/paginated_list.vue

@@ -1,179 +0,0 @@
-<script>
-import GlPagination from '../pagination/pagination.vue';
-import GlSearchBoxByType from '../search_box_by_type/search_box_by_type.vue';
-
-export default {
-  name: 'GlPaginatedList',
-  components: {
-    GlSearchBoxByType,
-    GlPagination,
-  },
-  props: {
-    list: {
-      type: Array,
-      required: true,
-    },
-    perPage: {
-      type: Number,
-      required: false,
-      default: 10,
-    },
-    page: {
-      type: Number,
-      required: false,
-      default: 1,
-    },
-    filterable: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    itemKey: {
-      type: String,
-      required: false,
-      default: 'id',
-    },
-    filter: {
-      type: [String, Function],
-      required: false,
-      default: 'id',
-    },
-    emptyMessage: {
-      type: String,
-      required: false,
-      default: 'There are currently no items in this list.',
-    },
-    emptySearchMessage: {
-      type: String,
-      required: false,
-      default: 'Sorry, your filter produced no results.',
-    },
-  },
-  data() {
-    return {
-      pageIndex: this.page,
-      queryStr: '',
-    };
-  },
-  computed: {
-    filteredList() {
-      if (typeof this.filter === 'function') {
-        return this.list.filter((listItem) => this.filter(listItem, this.queryStr));
-      }
-      return this.list.filter((listItem) =>
-        listItem[this.filter].toLowerCase().includes(this.queryStr.toLowerCase())
-      );
-    },
-    paginatedList() {
-      const offset = (this.pageIndex - 1) * this.perPage;
-      return this.filteredList.slice(offset, offset + this.perPage);
-    },
-    pageInfo() {
-      return { perPage: this.perPage, total: this.filterTotal, page: this.pageIndex };
-    },
-    total() {
-      return this.list.length;
-    },
-    filterTotal() {
-      return this.filteredList.length;
-    },
-    /**
-     * Determine if the original list had 0 items
-     *
-     * @return {Boolean} - If we started with an empty list
-     *
-     */
-    zeroTotal() {
-      return this.total === 0;
-    },
-    /**
-     * Determine if our search yields an empty list
-     *
-     * @return {Boolean} - If we have an empty search list
-     *
-     */
-    zeroSearchResults() {
-      return this.total > 0 && this.filterTotal === 0;
-    },
-    /**
-     * Determine if we originally had 0 results or 0 search results
-     *
-     * @return {Boolean} - If we have an empty search list
-     *
-     */
-    emptyList() {
-      return this.zeroTotal || this.zeroSearchResults;
-    },
-  },
-  watch: {
-    /**
-     * In GitLab UI storybook, when a user changes the page knob,
-     * we update the current page index.
-     *
-     * @param {Number}  newPage - A string param
-     * @return {undefined} - Nothing is returned
-     *
-     */
-    page(newPage) {
-      this.pageIndex = newPage;
-    },
-    /**
-     * In GitLab UI storybook, when a user changes the perPage knob,
-     * we reset the paginated list to the first page.
-     *
-     * @return {undefined} - Nothing is returned
-     *
-     */
-    perPage() {
-      this.pageIndex = 1;
-    },
-  },
-  methods: {
-    change(page) {
-      this.pageIndex = page;
-    },
-    query(queryStr) {
-      this.pageIndex = 1;
-      this.queryStr = queryStr;
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="gl-flex-row-reverse gl-justify-between sm:gl-flex">
-      <slot name="header"></slot>
-      <gl-search-box-by-type v-if="filterable" @input="query" />
-    </div>
-
-    <slot name="subheader"></slot>
-
-    <ul
-      class="gl-m-0 gl-grid gl-list-none gl-grid-cols-1 gl-divide-x-0 gl-divide-y gl-divide-solid gl-divide-default gl-p-0"
-    >
-      <li v-for="listItem in paginatedList" :key="listItem[itemKey]" class="gl-px-5 gl-py-4">
-        <slot :list-item="listItem" :query="queryStr">{{ listItem.id }}</slot>
-      </li>
-    </ul>
-
-    <gl-pagination
-      v-if="!emptyList"
-      align="center"
-      :per-page="pageInfo.perPage"
-      v-bind="$attrs"
-      :value="pageInfo.page"
-      :total-items="pageInfo.total"
-      @input="change"
-    />
-    <!-- Prettier will insert extra line-break which will result in render differences between Vue.js 2 and Vue.js 3 -->
-    <!-- See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2004 for details -->
-    <!-- display: inline -->
-    <div
-      v-if="emptyList"
-      class="bs-callout bs-callout-warning mt-3 empty-message"
-      :class="{ 'empty-message': zeroTotal, 'empty-search': zeroSearchResults }"
-      >{{ zeroTotal ? emptyMessage : emptySearchMessage }}</div
-    >
-  </div>
-</template>

package/src/components/base/pagination/pagination.md

@@ -1,45 +0,0 @@
-## Current page
-
-The current page's value should be bound using `v-model`, e.g.:
-
-```html
-<script>
-  export default {
-    data: () => ({
-      page: 2,
-    }),
-  };
-</script>
-
-<template>
-  <gl-pagination v-model="page" :per-page="10" :total-items="100" />
-</template>
-```
-
-## Limits
-
-The `limits` prop is used to define pagination link limits based on Bootstrap's breakpoint sizes.
-It is strongly recommended you provide a 'default' property, even if you have accounted for all
-breakpoint sizes. While unlikely, it is possible breakpoints could change, thus, a default property
-ensures a graceful fallback.
-
-Here is `limits` default value:
-
-```js
-{
-  xs: 0,
-  sm: 3,
-  md: 9,
-  default: 9,
-}
-```
-
-> Note: The component will not render any UI if the total items available for display is less than
-> the max items per page.
-
-## Internet Explorer 11
-
-This component makes use of the
-[`Number.isInteger` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger),
-which is not supported in IE11, make sure it's being polyfilled when using the component.
-[`core-js`](https://github.com/zloirock/core-js) incudes the appropriate polyfill for this.

package/src/components/base/pagination/pagination.scss

@@ -1,57 +0,0 @@
-.gl-pagination {
-  @apply gl-text-base;
-  @apply gl-text-nowrap;
-
-  ul {
-    @apply gl-flex;
-    @apply gl-pl-0;
-    @apply gl-list-none;
-    @apply gl-rounded-base;
-  }
-
-  a {
-    color: var(--gl-action-neutral-foreground-color-default);
-  }
-}
-
-.gl-pagination-item {
-  @apply gl-flex;
-  @apply gl-justify-center;
-  @apply gl-p-3;
-  @apply gl-leading-normal;
-  @apply gl-rounded-base;
-  @apply gl-no-underline;
-  @apply gl-min-w-7;
-  @apply gl-text-center;
-  @apply gl-border-1;
-  @apply gl-border-solid;
-  @include gl-action-neutral-colors;
-  @include gl-prefers-reduced-motion-transition;
-  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
-              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              border-color $gl-transition-duration-medium $gl-easing-out-cubic;
-
-  &:hover {
-    @apply gl-no-underline;
-  }
-
-  &:focus,
-  &:active:focus {
-    @apply gl-no-underline;
-    @apply gl-focus;
-  }
-
-  &:active {
-    @apply gl-no-underline;
-  }
-
-  &:not(.disabled).active {
-    @include gl-action-selected-colors;
-  }
-}
-
-.gl-pagination .disabled .gl-pagination-item {
-  @apply gl-border-transparent;
-  @apply gl-bg-transparent;
-  color: var(--gl-action-disabled-foreground-color);
-}