@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -1,296 +0,0 @@
-<script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
-import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
-import GlButton from '../button/button.vue';
-import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
-import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue';
-import GlFormInput from '../form/form_input/form_input.vue';
-import GlFormInputGroup from '../form/form_input_group/form_input_group.vue';
-
-export default {
-  name: 'GlSearchboxByClick',
-  components: {
-    GlClearIconButton,
-    GlButton,
-    GlFormInput,
-    GlDisclosureDropdown,
-    GlDisclosureDropdownItem,
-    GlFormInputGroup,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  props: {
-    /**
-     * If provided, used as value of search input
-     */
-    value: {
-      required: false,
-      default: '',
-      // SearchBoxByClick could serve as a container for complex fields (see GlFilteredSearch)
-      // so we should not force any specific type for value here
-      validator: () => true,
-    },
-    /**
-     * If provided, used as history items for this component
-     */
-    historyItems: {
-      type: Array,
-      required: false,
-      default: null,
-    },
-    /**
-     * If provided, used as a placeholder for this component
-     */
-    placeholder: {
-      type: String,
-      required: false,
-      default: 'Search',
-    },
-    clearable: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    /**
-     * If provided and true, disables the input and controls
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * i18n for recent searches title within history dropdown
-     */
-    recentSearchesHeader: {
-      type: String,
-      required: false,
-      default: 'Recent searches',
-    },
-    /**
-     * i18n for clear button title
-     */
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Clear',
-    },
-    /**
-     * i18n for close button title within history dropdown
-     */
-    closeButtonTitle: {
-      type: String,
-      required: false,
-      default: 'Close',
-    },
-    /**
-     * i18n for recent searches clear text
-     */
-    clearRecentSearchesText: {
-      type: String,
-      required: false,
-      default: 'Clear recent searches',
-    },
-    noRecentSearchesText: {
-      type: String,
-      required: false,
-      default: "You don't have any recent searches",
-    },
-    /**
-     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
-     */
-    tooltipContainer: {
-      required: false,
-      default: false,
-      validator: (value) =>
-        value === false || typeof value === 'string' || value instanceof HTMLElement,
-    },
-    /**
-     * HTML attributes to add to the search button
-     */
-    searchButtonAttributes: {
-      type: Object,
-      required: false,
-      default: () => ({}),
-    },
-    /**
-     * Display search button to perform a search.
-     *
-     * Note: it is required to ensure accessibility for WCAG 2.1 3.2.2: On Input.
-     * If the search button is hidden, a separate button should be provided for the same context.
-     */
-    showSearchButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      currentValue: null,
-      isFocused: false,
-    };
-  },
-  computed: {
-    inputAttributes() {
-      const attributes = {
-        type: 'search',
-        placeholder: this.placeholder,
-        ...this.$attrs,
-      };
-
-      if (!attributes['aria-label']) {
-        attributes['aria-label'] = attributes.placeholder;
-      }
-
-      return attributes;
-    },
-    hasValue() {
-      return Boolean(this.currentValue);
-    },
-  },
-  watch: {
-    value: {
-      handler(newValue) {
-        this.currentValue = newValue;
-      },
-      immediate: true,
-    },
-    currentValue(newValue) {
-      if (newValue === this.value) return;
-      this.$emit('input', newValue);
-    },
-  },
-  methods: {
-    search(value) {
-      /**
-       * Emitted when search is submitted
-       * @property {*} value Search value
-       */
-      this.$emit('submit', value);
-    },
-    selectHistoryItem(item) {
-      this.currentValue = item;
-
-      /**
-       * Emitted when item from history is selected
-       * @property {*} item History item
-       */
-      this.$emit('history-item-selected', item);
-      setTimeout(() => {
-        document.activeElement.blur();
-      });
-    },
-    clearInput() {
-      this.currentValue = '';
-      /**
-       * Emitted when search is cleared
-       */
-      this.$emit('clear');
-      if (this.$refs.input) {
-        this.$refs.input.$el.focus();
-      }
-    },
-    emitClearHistory() {
-      /**
-       * Emitted when clear history button is clicked
-       */
-      this.$emit('clear-history');
-    },
-  },
-};
-</script>
-
-<template>
-  <gl-form-input-group
-    class="gl-search-box-by-click"
-    :class="{ 'gl-search-box-by-click-with-search-button': showSearchButton }"
-  >
-    <template v-if="historyItems" #prepend>
-      <gl-disclosure-dropdown
-        ref="historyDropdown"
-        class="gl-search-box-by-click-history"
-        icon="history"
-        toggle-text="Toggle history"
-        text-sr-only
-        fluid-width
-        :disabled="disabled"
-      >
-        <template #header>
-          <div
-            class="gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-gray-200 !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"
-          >
-            {{ recentSearchesHeader }}
-          </div>
-        </template>
-
-        <template v-if="historyItems.length">
-          <gl-disclosure-dropdown-item
-            v-for="(item, idx) in historyItems"
-            :key="idx"
-            class="gl-search-box-by-click-history-item"
-            @action="selectHistoryItem(item)"
-          >
-            <template #list-item>
-              <!-- @slot Slot to customize history item in history dropdown. Used only with history-items prop -->
-              <slot name="history-item" :history-item="item">{{ item }}</slot>
-            </template>
-          </gl-disclosure-dropdown-item>
-        </template>
-        <div v-else class="gl-px-4 gl-py-2 gl-text-sm gl-text-secondary">
-          {{ noRecentSearchesText }}
-        </div>
-
-        <template v-if="historyItems.length" #footer>
-          <div
-            class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-gray-200 gl-p-2 gl-border-t-solid"
-          >
-            <gl-button
-              ref="clearHistory"
-              category="tertiary"
-              class="!gl-justify-start"
-              @click="emitClearHistory"
-            >
-              {{ clearRecentSearchesText }}
-            </gl-button>
-          </div>
-        </template>
-      </gl-disclosure-dropdown>
-    </template>
-    <slot name="input">
-      <gl-form-input
-        ref="input"
-        v-model="currentValue"
-        class="gl-search-box-by-click-input"
-        :class="{ '!gl-rounded-base': !showSearchButton }"
-        v-bind="inputAttributes"
-        :disabled="disabled"
-        @focus="isFocused = true"
-        @blur="isFocused = false"
-        @keydown.enter.native="search(currentValue)"
-      />
-    </slot>
-    <gl-clear-icon-button
-      v-if="clearable && hasValue && !disabled"
-      :title="clearButtonTitle"
-      :tooltip-container="tooltipContainer"
-      class="gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button"
-      data-testid="filtered-search-clear-button"
-      @click="clearInput"
-    />
-
-    <template v-if="showSearchButton" #append>
-      <gl-button
-        v-bind="searchButtonAttributes"
-        ref="searchButton"
-        class="gl-search-box-by-click-search-button"
-        icon="search"
-        :disabled="disabled"
-        aria-label="Search"
-        data-testid="search-button"
-        @click="search(currentValue)"
-      />
-    </template>
-  </gl-form-input-group>
-</template>

package/src/components/base/search_box_by_type/search_box_by_type.md

@@ -1 +0,0 @@
-Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -1,70 +0,0 @@
-$gl-search-box-by-type-search-icon-size: 16px;
-$gl-search-box-by-type-input-padding: 3.5 * $grid-size;
-
-.gl-search-box-by-type-search-icon {
-  @apply gl-w-5;
-  position: absolute;
-  left: $gl-spacing-scale-3;
-  top: calc(50% - #{$gl-search-box-by-type-search-icon-size} / 2);
-}
-
-.gl-search-box-by-type {
-  @apply gl-flex;
-  position: relative;
-}
-
-.gl-search-box-by-type-loading-icon {
-  @apply gl-fill-icon-subtle;
-  @apply gl-w-5;
-  @apply gl-mr-2;
-}
-
-.gl-search-box-by-type-clear {
-  @apply gl-z-3;
-}
-
-.gl-search-box-by-type-input,
-.gl-search-box-by-type-input.gl-form-input {
-  @apply gl-h-7;
-  @apply gl-pr-7;
-  padding-left: $gl-search-box-by-type-input-padding;
-
-  &::-webkit-search-cancel-button {
-    @apply gl-hidden;
-  }
-}
-
-.gl-search-box-by-type-input-borderless,
-.gl-search-box-by-type-input-borderless.gl-form-input {
-  @apply gl-border-none;
-  @apply gl-text-base;
-  @apply gl-h-auto;
-  @apply gl-leading-normal;
-  @apply gl-pl-7;
-  @apply gl-py-4;
-  @apply gl-shadow-none;
-  @apply gl-w-full;
-  border-radius: 0;
-  padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
-
-  &:not(.form-control-plaintext):focus {
-    @include gl-focus($inset: true);
-  }
-
-  &::placeholder {
-    color: var(--gl-control-placeholder-color);
-  }
-
-  &::-webkit-search-cancel-button {
-    @apply gl-hidden;
-  }
-}
-
-.gl-search-box-by-type-right-icons {
-  @apply gl-flex;
-  @apply gl-items-center;
-  @apply gl-leading-0;
-  right: $gl-spacing-scale-2;
-  position: absolute;
-  @apply gl-h-full;
-}

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -1,159 +0,0 @@
-<script>
-import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
-import GlFormInput from '../form/form_input/form_input.vue';
-import GlIcon from '../icon/icon.vue';
-import GlLoadingIcon from '../loading_icon/loading_icon.vue';
-import { translate } from '../../../utils/i18n';
-
-export default {
-  name: 'GlSearchboxByType',
-  components: {
-    GlClearIconButton,
-    GlIcon,
-    GlFormInput,
-    GlLoadingIcon,
-  },
-  inheritAttrs: false,
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-  props: {
-    /**
-     * If provided, used as value of search input
-     */
-    value: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    borderless: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    clearButtonTitle: {
-      type: String,
-      required: false,
-      default: () => translate('GlSearchBoxByType.clearButtonTitle', 'Clear'),
-    },
-    /**
-     * If provided and true, disables the input and controls
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Puts search box into loading state, rendering spinner
-     */
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Container for tooltip. Valid values: DOM node, selector string or `false` for default
-     */
-    tooltipContainer: {
-      required: false,
-      default: false,
-      validator: (value) =>
-        value === false || typeof value === 'string' || value instanceof HTMLElement,
-    },
-  },
-  computed: {
-    inputAttributes() {
-      const attributes = {
-        type: 'search',
-        placeholder: translate('GlSearchBoxByType.input.placeholder', 'Search'),
-        ...this.$attrs,
-      };
-
-      if (!attributes['aria-label']) {
-        attributes['aria-label'] = attributes.placeholder;
-      }
-
-      return attributes;
-    },
-    hasValue() {
-      return Boolean(this.value.length);
-    },
-    inputListeners() {
-      return {
-        ...this.$listeners,
-        input: this.onInput,
-        focusin: this.onFocusin,
-        focusout: this.onFocusout,
-      };
-    },
-    showClearButton() {
-      return this.hasValue && !this.disabled;
-    },
-  },
-  methods: {
-    isInputOrClearButton(element) {
-      return element === this.$refs.input?.$el || element === this.$refs.clearButton?.$el;
-    },
-    clearInput() {
-      this.onInput('');
-      this.focusInput();
-    },
-    focusInput() {
-      this.$refs.input.$el.focus();
-    },
-    onInput(value) {
-      this.$emit('input', value);
-    },
-    onFocusout(event) {
-      const { relatedTarget } = event;
-
-      if (this.isInputOrClearButton(relatedTarget)) {
-        return;
-      }
-
-      this.$emit('focusout', event);
-    },
-    onFocusin(event) {
-      const { relatedTarget } = event;
-
-      if (this.isInputOrClearButton(relatedTarget)) {
-        return;
-      }
-
-      this.$emit('focusin', event);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-search-box-by-type">
-    <gl-icon name="search" class="gl-search-box-by-type-search-icon" variant="subtle" />
-    <gl-form-input
-      ref="input"
-      :value="value"
-      :disabled="disabled"
-      :class="{
-        'gl-search-box-by-type-input': !borderless,
-        'gl-search-box-by-type-input-borderless': borderless,
-      }"
-      v-bind="inputAttributes"
-      v-on="inputListeners"
-    />
-    <div v-if="isLoading || showClearButton" class="gl-search-box-by-type-right-icons">
-      <gl-loading-icon v-if="isLoading" class="gl-search-box-by-type-loading-icon" />
-      <gl-clear-icon-button
-        v-if="showClearButton"
-        ref="clearButton"
-        :title="clearButtonTitle"
-        :tooltip-container="tooltipContainer"
-        class="gl-search-box-by-type-clear gl-clear-icon-button"
-        @click.stop="clearInput"
-        @focusin="onFocusin"
-        @focusout="onFocusout"
-      />
-    </div>
-  </div>
-</template>

package/src/components/base/segmented_control/segmented_control.md

@@ -1 +0,0 @@
-Button group of equal options where only one can be selected and active.

package/src/components/base/segmented_control/segmented_control.scss

@@ -1,179 +0,0 @@
-/*
- * Segmented-control-specific utilities
- */
-
-@mixin gl-btn-gl-segmented-button-first {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset #{$gl-border-size-1} 0 0 0 $gray-200;
-}
-
-@mixin gl-btn-gl-segmented-button-last {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset -#{$gl-border-size-1} 0 0 0 $gray-200;
-}
-
-@mixin gl-btn-gl-segmented-button-focus($color) {
-  box-shadow: $focus-ring, inset 0 0 0 $gl-border-size-2 $color;
-}
-
-.btn-group.gl-segmented-control {
-  .btn:not(:first-child),
-  .btn:not(:last-child) {
-    &.active,
-    &.focus,
-    &:hover:not(.disabled) {
-      @apply gl-rounded-base;
-    }
-  }
-}
-
-@if $feature-button-border {
-  .gl-segmented-control {
-    label:not(.disabled) {
-      @apply gl-cursor-pointer;
-    }
-
-  .btn-gl-segmented-button {
-    @apply gl-text-base;
-    @apply gl-leading-normal;
-    @apply gl-text-gray-900;
-    @apply gl-fill-current;
-    @apply gl-bg-gray-10;
-    border-color: $gray-200;
-
-      &:not(:first-child) {
-        border-left-color: transparent;
-      }
-
-      &:not(:last-child) {
-        border-right-color: transparent;
-      }
-
-      &:hover {
-        border-color: $gray-400;
-        @apply gl-bg-gray-50;
-      }
-
-      &.focus {
-        @apply gl-z-1;
-        border-color: $gray-400;
-        @apply gl-focus;
-        @apply gl-bg-gray-50;
-      }
-
-      &.active {
-        @apply gl-z-2;
-        border-color: $gray-400;
-        @include gl-inset-border-1-gray-400;
-        @apply gl-bg-white;
-
-        &:hover {
-          @include gl-inset-border-1-gray-400;
-          @apply gl-bg-gray-50;
-        }
-
-        &.focus,
-        &.focus:hover {
-          border-color: $gray-400;
-          @apply gl-focus;
-          @apply gl-bg-gray-50;
-        }
-      }
-
-    &:focus-within {
-      @apply gl-focus;
-    }
-
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover {
-        @apply gl-text-gray-400;
-        border-color: $gray-200;
-        @apply gl-z-0;
-        @apply gl-cursor-not-allowed;
-
-        &:first-child {
-          border-right-color: transparent;
-        }
-
-        &:last-child {
-          border-left-color: transparent;
-        }
-      }
-    }
-  }
-} @else {
-  .gl-segmented-control {
-    label:not(.disabled) {
-      @apply gl-cursor-pointer;
-    }
-
-    .btn-gl-segmented-button {
-      @apply gl-text-base;
-      @apply gl-leading-normal;
-      @apply gl-text-gray-900;
-      @apply gl-fill-current;
-      @apply gl-bg-gray-10;
-      @include gl-inset-border-y-1-gray-200;
-
-      &:first-child {
-        @include gl-btn-gl-segmented-button-first;
-      }
-
-      &:last-child {
-        @include gl-btn-gl-segmented-button-last;
-      }
-
-      &:hover {
-        @include gl-inset-border-2-gray-400;
-        @apply gl-bg-gray-50;
-      }
-
-      &.focus {
-        @apply gl-z-1;
-        @include gl-btn-gl-segmented-button-focus($gray-400);
-        @apply gl-bg-gray-50;
-      }
-
-      &.active {
-        @apply gl-z-2;
-        @include gl-inset-border-2-gray-300;
-        @apply gl-bg-white;
-
-        &:hover {
-          @include gl-inset-border-2-gray-400;
-          @apply gl-bg-gray-50;
-        }
-
-        &.focus,
-        &.focus:hover {
-          @include gl-btn-gl-segmented-button-focus($gray-400);
-          @apply gl-bg-gray-50;
-        }
-      }
-
-      &:focus-within {
-        @apply gl-focus;
-      }
-
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover {
-        @apply gl-text-gray-400;
-        @include gl-inset-border-y-1-gray-200;
-        @apply gl-z-0;
-        @apply gl-cursor-not-allowed;
-
-        &:first-child {
-          @include gl-btn-gl-segmented-button-first;
-        }
-
-        &:last-child {
-          @include gl-btn-gl-segmented-button-last;
-        }
-      }
-    }
-  }
-}