@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,102 +0,0 @@
-@mixin gl-tmp-dropdown-item-style {
-  @apply gl-items-center;
-  @apply gl-bg-transparent;
-  @apply gl-border-0;
-  @apply gl-flex;
-  @apply gl-text-base;
-  @apply gl-font-normal;
-  @apply gl-leading-normal;
-  @apply gl-px-5;
-  @apply gl-py-0;
-  position: relative;
-  @apply gl-rounded-none;
-  @apply gl-shadow-none;
-  color: var(--gl-dropdown-option-text-color-default);
-  @apply gl-text-left;
-  @apply gl-w-full;
-  @apply gl-whitespace-normal;
-}
-
-.gl-dropdown-item {
-  .dropdown-item {
-    @include gl-tmp-dropdown-item-style;
-    @apply gl-cursor-pointer;
-
-    .gl-avatar {
-      @apply gl-shrink-0;
-      @apply gl-mr-3;
-    }
-
-    .gl-dropdown-item-check-icon {
-      @apply gl-shrink-0;
-      @apply gl-mr-3;
-      color: var(--gl-dropdown-option-indicator-color-selected-default);
-    }
-
-    .gl-dropdown-item-icon {
-      @apply gl-shrink-0;
-      @apply gl-mr-3;
-    }
-
-    .gl-dropdown-item-text-primary {
-      @apply gl-m-0;
-    }
-
-    .gl-dropdown-item-text-secondary {
-      @apply gl-m-0;
-      @apply gl-text-subtle;
-    }
-
-    .gl-dropdown-item-text-wrapper {
-      @apply gl-min-w-0;
-      @apply gl-grow;
-      @apply gl-mr-3;
-      @apply gl-py-3;
-    }
-
-    // make sure the text color is not overridden
-    &.text-danger {
-      @apply gl-text-danger;
-    }
-
-    &.disable-hover {
-      @apply gl-no-underline;
-    }
-
-    &:disabled {
-      @apply gl-text-disabled;
-
-      .gl-new-dropdown-item-check-icon {
-        @apply gl-text-inherit;
-      }
-
-      .gl-new-dropdown-item-text-secondary {
-        @apply gl-text-inherit;
-      }
-
-      .gl-avatar {
-        @apply gl-opacity-7;
-      }
-    }
-
-    &:not(.disable-hover):hover,
-    &:active,
-    &:focus,
-    &.is-focused {
-      background-color: var(--gl-dropdown-option-background-color-unselected-hover);
-      @apply gl-no-underline;
-      color: var(--gl-dropdown-option-text-color-default);
-
-      // make sure the text color is not overridden
-      &.text-danger {
-        @apply gl-text-danger;
-      }
-    }
-
-    &:active,
-    &:focus,
-    &:focus:active {
-      @include gl-focus($inset: true);
-    }
-  }
-}

package/src/components/base/dropdown/dropdown_item.vue

@@ -1,114 +0,0 @@
-<script>
-import { BDropdownItem } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown-item';
-import { BDropdownItemButton } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button';
-import { variantCssColorMap } from '../../../utils/constants';
-import GlAvatar from '../avatar/avatar.vue';
-import GlButton from '../button/button.vue';
-import GlIcon from '../icon/icon.vue';
-
-export default {
-  name: 'GlDropdownItem',
-  components: {
-    GlIcon,
-    GlAvatar,
-    GlButton,
-  },
-  inheritAttrs: false,
-  props: {
-    avatarUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    iconColor: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    iconName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    iconRightAriaLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    iconRightName: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    isChecked: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isCheckItem: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isCheckCentered: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    secondaryText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    bootstrapComponent() {
-      const { href, to } = this.$attrs;
-      // Support 'href' and Vue Router's 'to'
-      return href || to ? BDropdownItem : BDropdownItemButton;
-    },
-    iconColorCss() {
-      return variantCssColorMap[this.iconColor] || 'gl-fill-icon-default';
-    },
-    shouldShowCheckIcon() {
-      return this.isChecked || this.isCheckItem;
-    },
-    checkedClasses() {
-      if (this.isCheckCentered) {
-        return '';
-      }
-
-      return 'gl-mt-3 gl-self-start';
-    },
-  },
-  methods: {
-    handleClickIconRight() {
-      this.$emit('click-icon-right');
-    },
-  },
-};
-</script>
-
-<template>
-  <component :is="bootstrapComponent" class="gl-dropdown-item" v-bind="$attrs" v-on="$listeners">
-    <gl-icon
-      v-if="shouldShowCheckIcon"
-      name="mobile-issue-close"
-      data-testid="dropdown-item-checkbox"
-      :class="['gl-dropdown-item-check-icon', { 'gl-invisible': !isChecked }, checkedClasses]"
-    />
-    <gl-icon v-if="iconName" :name="iconName" :class="['gl-dropdown-item-icon', iconColorCss]" />
-    <gl-avatar v-if="avatarUrl" :size="32" :src="avatarUrl" />
-    <div class="gl-dropdown-item-text-wrapper">
-      <p class="gl-dropdown-item-text-primary"><slot></slot></p>
-      <p v-if="secondaryText" class="gl-dropdown-item-text-secondary">{{ secondaryText }}</p>
-    </div>
-    <gl-button
-      v-if="iconRightName"
-      size="small"
-      :icon="iconRightName"
-      :aria-label="iconRightAriaLabel || iconRightName"
-      @click.stop.prevent="handleClickIconRight"
-    />
-  </component>
-</template>

package/src/components/base/dropdown/dropdown_section_header.md

@@ -1,7 +0,0 @@
-# Dropdown Section Header
-
-<!-- STORY -->
-
-## Usage
-
-The dropdown section header component is meant to be used for header entries inside a dropdown component.

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

@@ -1,22 +0,0 @@
-@mixin gl-tmp-dropdown-section-header-style {
-  @apply gl-text-base;
-  @apply gl-text-strong;
-  @apply gl-leading-normal;
-  @apply gl-text-left;
-  @apply gl-font-bold;
-  @apply gl-py-3;
-  @apply gl-px-4;
-  @apply gl-whitespace-normal;
-}
-
-/* Styling when the component is used on its own */
-.gl-dropdown-section-header .dropdown-header {
-  @include gl-tmp-dropdown-section-header-style;
-}
-
-/* Styling to override the vue-bootstrap CSS included in GitLab CSS */
-.gl-dropdown {
-  .gl-dropdown-section-header .dropdown-header {
-    @include gl-tmp-dropdown-section-header-style;
-  }
-}

package/src/components/base/dropdown/dropdown_section_header.vue

@@ -1,17 +0,0 @@
-<script>
-import { BDropdownHeader } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown-header';
-
-export default {
-  name: 'GlDropdownHeader',
-  components: {
-    BDropdownHeader,
-  },
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <b-dropdown-header class="gl-dropdown-section-header" v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-dropdown-header>
-</template>

package/src/components/base/dropdown/dropdown_text.md

@@ -1,7 +0,0 @@
-# Dropdown Text
-
-<!-- STORY -->
-
-## Usage
-
-The dropdown text component is meant to be used for text entries inside a dropdown component.

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

@@ -1,6 +0,0 @@
-.gl-dropdown-text {
-  .b-dropdown-text {
-    @include gl-tmp-dropdown-item-style;
-    @apply gl-py-3;
-  }
-}

package/src/components/base/dropdown/dropdown_text.vue

@@ -1,17 +0,0 @@
-<script>
-import { BDropdownText } from '../../../vendor/bootstrap-vue/src/components/dropdown/dropdown-text';
-
-export default {
-  name: 'GlDropdownText',
-  components: {
-    BDropdownText,
-  },
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <b-dropdown-text class="gl-dropdown-text" v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-dropdown-text>
-</template>

package/src/components/base/filtered_search/common_story_options.js

@@ -1,12 +0,0 @@
-const noop = () => {};
-
-/**
- * A mocked provide option for components that expect to be descendants of
- * GlFilteredSearch, to be used in their stories.
- */
-export const provide = () => ({
-  portalName: 'portal',
-  alignSuggestions: noop,
-  suggestionsListClass: noop,
-  termsAsTokens: () => false,
-});

package/src/components/base/filtered_search/filtered_search.md

@@ -1,76 +0,0 @@
-The filtered search component is responsible for managing search with possible filters.
-
-## Usage
-
-Each filter option (named token) requires a separate Vue component. `GlFilteredSearchToken` is an
-example of such a token.
-
-Prepare array of available token configurations with the following fields:
-
-- `type`: unique identifier of token type
-- `title`: human-readable title of the token
-- `icon`: token icon
-- `token`: (optional) the token Vue component to use (e.g. `AuthorToken`)
-- `dataType`: (optional) identifier of type (for example "user") for this filter. Tokens
-  of the same type could be switched without losing their values
-- `unique`: (optional) indicate this token could appear only once in the filter
-- `disabled`: (optional) indicate this token should be hidden from the dropdown
-- `operators`: (optional) an array of selectable operators.
-  Each array item is an object that must contain `value` and `description`, and optionally `default`
-  (e.g. `{ value: '=', description: 'is', default: 'true' }`)
-- `multiSelect`: (optional) when `true`, the suggestions list becomes multi-select instead of single-select.
-  It is discouraged to use this together with `unique`, as `unique` is intended for single-select.
-- `options`: (optional) an array of options which the user can pick after the
-  operator has been selected. The option object can have the following
-  properties defined: `value: string`, `icon: string`, `title: string`,
-  `component: Object` and `default: boolean`. If `component` is provided, it is
-  is used to render the option in the suggestions list.
-- `optionComponent`: (optional) A component used to render the token option
-  itself when adding a new token or replacing an existing one
-- any additional fields required to configure your component
-
-Each token for filtered search is a Vue component with the following props:
-
-- `value`: an object with a `data` property containing the current value, and optionally an
-  `operator` value containing the operator value
-- `active`: indicates if the token is currently active. It's the token's responsibility
-  to render proper control for editing (for example input).
-- `current-value`: current tokens of the filtered search.
-- `index`: current token position in the filtered search.
-- `config`: additional configuration, supplied in filtered search config for this token.
-
-The token should emit the following events:
-
-- `activate`: when the token requests activation (for example, when being clicked).
-- `deactivate`: when token requests deactivation (for example due to losing blur on input).
-- `destroy`: when token requests self-destruction (for instance for clicking "X" sign).
-- `replace`: token requests its replacement with another token.
-- `split`: token requests adding string values after the current token.
-- `complete`: token indicates its editing is completed.
-
-### Improve space handling
-
-Set the `terms-as-tokens` prop to `true` to enable new term rendering and
-interaction behavior. This makes it easier to input/edit free text tokens, and
-removes the need for quoting values with spaces and other workarounds.
-
-In future, this prop will be enabled by default and eventually removed. Opt in
-to this earlier rather than later to ease migration.
-
-## Examples
-
-Define a list of available tokens:
-
-```js
-const availableTokens = [
-  { type: 'static', icon: 'label', title: 'static:token', token: staticToken },
-  { type: 'dynamic', icon: 'rocket', title: 'dynamic:~token', token: dynamicToken },
-];
-```
-
-Pass the list of tokens to the search component. Optionally, you can use `v-model` to receive
-realtime updates:
-
-```html
-<gl-filtered-search :available-tokens="tokens" v-model="value" terms-as-tokens />
-```

package/src/components/base/filtered_search/filtered_search.scss

@@ -1,51 +0,0 @@
-.gl-filtered-search-scrollable-container {
-  @apply gl-flex;
-  @apply gl-grow;
-  @apply gl-basis-0;
-  @apply gl-overflow-hidden;
-  @apply gl-items-center;
-  @apply gl-py-2;
-  @apply gl-pl-4;
-  @apply gl-pr-7;
-  @apply gl-border-none;
-  @apply gl-rounded-base;
-  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
-  background-color: var(--gl-control-background-color-default);
-
-  .input-group-prepend + & {
-    @apply gl-rounded-l-none;
-  }
-}
-
-.gl-filtered-search-scrollable-container-with-search-button {
-  @apply gl-rounded-r-none;
-}
-
-.gl-filtered-search-scrollable {
-  @apply gl-flex;
-  @apply gl-overflow-y-auto;
-  @apply gl-w-full;
-}
-
-.gl-filtered-search-item {
-  @apply gl-flex;
-  @apply gl-px-1;
-
-  &:first-child {
-    @apply gl-pl-0;
-  }
-}
-
-.gl-filtered-search-last-item {
-  .gl-filtered-search-term-value {
-    @apply gl-h-full;
-    @apply gl-w-full;
-    @apply gl-items-center;
-  }
-
-  @apply gl-grow;
-  @apply gl-p-0;
-  @apply gl-pl-1;
-  @apply gl-h-6;
-  min-width: $gl-spacing-scale-12;
-}