@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,201 +0,0 @@
-export const mockItems = [
-  {
-    text: 'Mark as draft',
-    href: 'https://gitlab.com',
-    extraAttrs: {
-      target: '_blank',
-      rel: 'nofollow',
-      'data-method': 'put',
-    },
-  },
-  {
-    text: 'Create new',
-    href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
-    extraAttrs: {
-      rel: 'nofollow',
-      target: '_blank',
-    },
-  },
-  {
-    text: 'Edit merge request',
-    to: '/edit',
-    extraAttrs: {
-      'data-uuid': '1234',
-    },
-  },
-  {
-    text: 'Close merge request',
-    action: () => {
-      // eslint-disable-next-line no-console
-      console.log('CLOSED');
-    },
-    extraAttrs: {
-      class: '!gl-text-red-500',
-      rel: 'nofollow',
-      'data-method': 'put',
-    },
-  },
-];
-
-export const mockButtons = [
-  {
-    text: 'Checks',
-  },
-  {
-    text: 'Projects',
-  },
-  {
-    text: 'Standards',
-  },
-];
-
-export const mockItemsCustomItem = [
-  {
-    text: 'Assigned to you',
-    href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
-    count: '2',
-    extraAttrs: {
-      target: '_blank',
-      rel: 'nofollow',
-    },
-  },
-  {
-    text: 'Review requests from you',
-    href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
-    count: 0,
-    extraAttrs: {
-      target: '_blank',
-      rel: 'nofollow',
-    },
-  },
-  {
-    text: 'I am only visible on mobile!',
-    action: () => {
-      // eslint-disable-next-line no-console
-      console.log('clicked!');
-    },
-    wrapperClass: 'sm:!gl-hidden',
-  },
-];
-
-export const mockGroupsCustomItem = [
-  {
-    name: 'Merge requests',
-    items: [
-      {
-        text: 'Assigned to you',
-        href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
-        count: 1,
-      },
-      {
-        text: 'Review requests from you',
-        href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
-        count: 4,
-      },
-    ],
-  },
-];
-
-export const mockGroups = [
-  {
-    name: 'This project',
-    items: [
-      {
-        text: 'New issue',
-        href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-      {
-        text: 'New merge request',
-        href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-      {
-        text: 'New snippet',
-        href: 'https://gitlab.com/gitlab-org/gitlab/-/snippets/new',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-    ],
-  },
-  {
-    name: 'GitLab',
-    items: [
-      {
-        text: 'New project',
-        href: 'https://gitlab.com/projects/new',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-      {
-        text: 'New group',
-        href: 'https://gitlab.com/groups/new',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-      {
-        text: 'New snippet',
-        href: 'https://gitlab.com/snippets/new',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-    ],
-  },
-];
-
-export const mockProfileGroups = [
-  {
-    items: [
-      {
-        text: 'Set status',
-        href: 'https://gitlab.com',
-        icon: 'status_success',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-      {
-        text: 'Edit profile',
-        href: '#',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-      {
-        text: 'Preferences',
-        href: '#',
-        extraAttrs: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-    ],
-  },
-  {
-    items: [
-      {
-        text: 'Sign out',
-        action: () => {
-          // eslint-disable-next-line no-alert
-          window.confirm('Are you sure?');
-        },
-      },
-    ],
-  },
-];

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

@@ -1,70 +0,0 @@
-import Vue from 'vue';
-import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
-import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
-
-const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
-
-const isItem = (item) => Boolean(item) && itemValidator(item);
-
-const isGroup = (group) =>
-  Boolean(group) &&
-  Array.isArray(group.items) &&
-  Boolean(group.items.length) &&
-  // eslint-disable-next-line unicorn/no-array-callback-reference
-  group.items.every(isItem);
-
-// eslint-disable-next-line unicorn/no-array-callback-reference
-const itemsValidator = (items) => items.every(isItem) || items.every(isGroup);
-
-const isListItem = (tag) =>
-  ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
-
-const isValidSlotTagVue2 = (vNode) =>
-  Boolean(vNode) && isListItem(vNode.componentOptions?.tag || vNode.tag);
-
-const isValidSlotTagVue3 = (vNode) => {
-  return (
-    [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(vNode.type?.name) ||
-    vNode.type === 'li'
-  );
-};
-
-const hasOnlyListItemsVue2 = (defaultSlot) => {
-  const nodes = defaultSlot();
-
-  if (!Array.isArray(nodes)) {
-    return false;
-  }
-
-  const tags = nodes.filter((vNode) => vNode.tag);
-
-  return tags.length && tags.every((tag) => isValidSlotTagVue2(tag));
-};
-
-const hasOnlyListItemsVue3 = (defaultSlot) => {
-  const nodes = defaultSlot();
-  const fragment = nodes.find((node) => Array.isArray(node.children) && node.children.length);
-  const targetNodes = fragment ? fragment.children : nodes;
-
-  return (
-    targetNodes
-      // Remove empty text vNodes
-      .filter((vNode) => !isString(vNode.text) || vNode.text.trim().length > 0)
-      .every((vNode) => isValidSlotTagVue3(vNode))
-  );
-};
-
-const hasOnlyListItems = (defaultSlot) => {
-  if (!isFunction(defaultSlot)) {
-    return false;
-  }
-
-  if (Vue.version.startsWith('3')) {
-    return hasOnlyListItemsVue3(defaultSlot);
-  }
-
-  return hasOnlyListItemsVue2(defaultSlot);
-};
-
-export { itemsValidator, isItem, isGroup, hasOnlyListItems };

package/src/components/base/new_dropdowns/dropdown.scss

@@ -1,243 +0,0 @@
-.gl-new-dropdown {
-  @apply gl-inline-flex;
-  @apply gl-align-middle;
-
-  .gl-new-dropdown-custom-toggle {
-    *:first-child {
-      @apply gl-cursor-pointer;
-
-      &:focus {
-        @apply gl-focus;
-      }
-    }
-  }
-
-  .gl-new-dropdown-panel {
-    @apply gl-hidden;
-    @apply gl-bg-dropdown;
-    @apply gl-border-1 gl-border-solid gl-border-dropdown;
-    @apply gl-rounded-lg;
-    @apply gl-shadow-md;
-    top: 0;
-    left: 0;
-    min-width: $gl-new-dropdown-min-width;
-    max-width: $gl-new-dropdown-max-width;
-    z-index: 1000;
-  }
-
-  .gl-new-dropdown-inner {
-    @apply gl-flex;
-    @apply gl-flex-col;
-    max-height: $gl-max-dropdown-max-height;
-  }
-
-  .gl-new-dropdown-contents {
-    position: relative;
-    @apply gl-grow;
-    @apply gl-overflow-y-auto;
-    @apply gl-pl-0;
-    @apply gl-mb-0;
-    @apply gl-py-2;
-    @apply gl-list-none;
-
-    &:focus-visible {
-      @apply gl-focus;
-    }
-
-    ul {
-      @apply gl-list-none;
-    }
-  }
-
-  .gl-new-dropdown-toggle {
-    // optically align the caret
-    &.gl-button:not(.gl-new-dropdown-toggle-no-caret, .btn-icon) {
-      @apply gl-pr-3;
-
-      &.btn-sm {
-        @apply gl-pr-2;
-      }
-    }
-
-    &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
-      @apply gl-hidden;
-    }
-  }
-
-  .gl-new-dropdown-toggle {
-    .gl-button-text {
-      @apply gl-inline-flex;
-
-      &:has(.gl-sr-only) {
-        width: auto;
-      }
-    }
-  }
-
-  .gl-new-dropdown-button-text {
-    @apply gl-mr-auto;
-    @apply gl-overflow-hidden;
-    @apply gl-text-ellipsis;
-  }
-
-  &.btn-sm .gl-icon {
-    @apply gl-my-0;
-
-    &.gl-new-dropdown-chevron {
-      @apply gl-h-5;
-      @apply gl-w-5;
-    }
-  }
-
-  .gl-button:not(.gl-new-dropdown-caret-only) .gl-button-icon.gl-new-dropdown-chevron {
-    @apply gl-ml-2;
-    @apply gl-mr-0;
-  }
-
-  .gl-new-dropdown-icon-only {
-    // optically align the caret
-    &.gl-button:not(.gl-new-dropdown-toggle-no-caret) {
-      @apply gl-pr-2;
-      @apply gl-pl-3;
-
-      &.btn-sm {
-        @apply gl-pr-0;
-      }
-    }
-
-    .gl-button-icon.gl-button-icon {
-      @apply gl-mr-0;
-
-      &.gl-button-loading-indicator {
-        @apply gl-mr-2;
-      }
-    }
-
-    &.btn-sm .gl-new-dropdown-chevron {
-      @apply gl-mx-0;
-    }
-  }
-
-  .gl-new-dropdown-caret-only {
-    // optically center the caret
-    @apply gl-pl-2;
-
-    &.btn-sm {
-      @apply gl-pl-0;
-    }
-  }
-
-  $dropdown-content-padding: 0.25rem;
-
-  // Scrim overlay related styles (the shadow that appears above and below the content) indicating that the content is scrollable
-  .gl-new-dropdown-contents-with-scrim-overlay {
-    padding: 0;
-  }
-
-  .gl-new-dropdown-contents {
-    .top-scrim-wrapper,
-    .bottom-scrim-wrapper {
-      height: $dropdown-content-padding;
-      opacity: 0;
-      position: sticky;
-      z-index: 1;
-      display: block;
-      overflow: visible;
-      left: 1px;
-      right: 1px;
-      pointer-events: none;
-      transition: opacity 0.1s;
-    }
-
-    .top-scrim-wrapper {
-      top: 0;
-
-      .top-scrim {
-        left: 0;
-        right: 0;
-
-        &.top-scrim-light {
-          height: 2.25rem;
-          border-radius: 0.375rem 0.375rem 0 0;
-          background: linear-gradient(180deg, var(--gl-dropdown-background-color) 0%, var(--gl-color-alpha-0));
-        }
-
-        &.top-scrim-dark {
-          height: 0.25rem;
-          background: linear-gradient(180deg, var(--gl-shadow-color-default) 0%, var(--gl-color-alpha-0) 100%);
-        }
-      }
-    }
-
-    .bottom-scrim-wrapper {
-      bottom: 0;
-      height: $dropdown-content-padding;
-
-      .bottom-scrim {
-        height: 0;
-        position: relative;
-        top: calc(-2.25rem + #{$dropdown-content-padding});
-        border-radius: 0 0 0.375rem 0.375rem;
-        background: linear-gradient(180deg, var(--gl-color-alpha-0) 0%, var(--gl-dropdown-background-color));
-      }
-    }
-
-    &.top-scrim-visible .top-scrim-wrapper,
-    &.bottom-scrim-visible .bottom-scrim-wrapper {
-      opacity: 1;
-    }
-
-    &.bottom-scrim-visible .bottom-scrim {
-      height: 2.25rem;
-    }
-  }
-}
-
-.btn-group {
-  .gl-new-dropdown:not(:last-child) {
-    .gl-new-dropdown-toggle {
-      @apply gl-rounded-tr-none;
-      @apply gl-rounded-br-none;
-    }
-  }
-
-  .gl-new-dropdown:not(:first-child) {
-    .gl-new-dropdown-toggle {
-      @apply gl-rounded-tl-none;
-      @apply gl-rounded-bl-none;
-
-      // Prevent double borders when buttons are next to each other
-      margin-left: -1px;
-    }
-  }
-
-  // The dropdown toggle of a "split" is by design supposed to be the last
-  // child of a button group, so only apply styles for that.
-  .gl-new-dropdown:last-child {
-    .gl-new-dropdown-caret-only {
-      &.btn-confirm,
-      &.btn-danger {
-        margin-left: 1px;
-      }
-
-      &:disabled,
-      &.disabled,
-      &[class*='-secondary'] {
-        margin-left: -1px;
-      }
-    }
-  }
-
-  .gl-new-dropdown:hover {
-    .gl-new-dropdown-toggle {
-      @apply gl-z-1;
-    }
-  }
-
-  .gl-new-dropdown {
-    .gl-new-dropdown-toggle:focus,
-    .gl-new-dropdown-toggle:active {
-      @apply gl-z-1;
-    }
-  }
-}

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -1,134 +0,0 @@
-.gl-new-dropdown-item {
-  @apply gl-cursor-pointer;
-  @apply gl-px-2;
-  @apply gl-my-1;
-
-  /* when there is a scrim `li` items inside the list, the first and last real items
-  do not match the selector `:first-child` and `:last-child`,
-  that's why we have to target them with a different selector */
-  &:first-child,
-  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-child(3):not(:last-child) {
-    @apply gl-mt-0;
-  }
-
-  &:last-child,
-  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-last-child(3):not(:first-child) {
-    @apply gl-mb-0;
-  }
-
-  &:hover {
-    .gl-new-dropdown-item-content {
-      color: var(--gl-dropdown-option-text-color-hover);
-      background-color: var(--gl-dropdown-option-background-color-unselected-hover);
-    }
-  }
-
-  &:focus {
-    .gl-new-dropdown-item-content {
-      color: var(--gl-dropdown-option-text-color-focus);
-      background-color: var(--gl-dropdown-option-background-color-unselected-focus);
-    }
-  }
-
-  &:active,
-  &:focus:active {
-    .gl-new-dropdown-item-content {
-      color: var(--gl-dropdown-option-text-color-active);
-      background-color: var(--gl-dropdown-option-background-color-unselected-active);
-    }
-  }
-
-  &[aria-selected="true"] {
-    .gl-new-dropdown-item-content {
-      background-color: var(--gl-dropdown-option-background-color-selected-default);
-    }
-
-    &:hover {
-      .gl-new-dropdown-item-content {
-        background-color: var(--gl-dropdown-option-background-color-selected-hover);
-      }
-
-      .gl-new-dropdown-item-check-icon {
-        color: var(--gl-dropdown-option-indicator-color-selected-hover);
-      }
-    }
-
-    &:focus {
-      .gl-new-dropdown-item-content {
-        background-color: var(--gl-dropdown-option-background-color-selected-focus);
-      }
-
-      .gl-new-dropdown-item-check-icon {
-        color: var(--gl-dropdown-option-indicator-color-selected-focus);
-      }
-    }
-
-    &:active,
-    &:focus:active {
-      .gl-new-dropdown-item-content {
-        background-color: var(--gl-dropdown-option-background-color-selected-active);
-      }
-
-      .gl-new-dropdown-item-check-icon {
-        color: var(--gl-dropdown-option-indicator-color-selected-active);
-      }
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    .gl-new-dropdown-item-content {
-      @include gl-focus($inset: true);
-    }
-  }
-
-  &:focus {
-    .gl-new-dropdown-item-content {
-      z-index: 1;
-    }
-  }
-
-  .gl-new-dropdown-item-content {
-    @apply gl-rounded-base;
-    @apply gl-border-0;
-    @apply gl-w-full;
-    background-color: var(--gl-dropdown-option-background-color-unselected-default);
-    @apply gl-items-center;
-    @apply gl-flex;
-    @apply gl-text-base;
-    @apply gl-font-normal;
-    @apply gl-leading-normal;
-    @apply gl-px-3;
-    @apply gl-py-0;
-    position: relative;
-    @apply gl-no-underline;
-    color: var(--gl-dropdown-option-text-color-default);
-    @apply gl-text-left;
-    @apply gl-whitespace-normal;
-    @include gl-prefers-reduced-motion-transition;
-    transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
-                box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
-
-    .gl-new-dropdown-item-check-icon {
-      @apply gl-shrink-0;
-      @apply gl-mr-3;
-      color: var(--gl-dropdown-option-indicator-color-selected-default);
-    }
-
-    .gl-new-dropdown-item-icon {
-      @apply gl-shrink-0;
-      @apply gl-mr-3;
-    }
-
-    .gl-new-dropdown-item-text-wrapper {
-      @apply gl-min-w-0;
-      @apply gl-grow;
-      @apply gl-py-3;
-    }
-  }
-}