@gitlab/duo-ui 0.1.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+.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);
+}