@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/form/form.vue

@@ -1,17 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import { BForm } from '../../../vendor/bootstrap-vue/src/components/form';
-
-export default {
-  name: 'GlForm',
-  components: {
-    BForm,
-  },
-  inheritAttrs: false,
-};
-</script>
-<template>
-  <b-form v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-form>
-</template>

package/src/components/base/form/form_character_count/form_character_count.md

@@ -1,53 +0,0 @@
-## Usage
-
-`GlFormCharacterCount` can be used to add a character count to an input.
-If you are using `GlFormTextarea` on its own see [with character count example](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-form-form-textarea--with-character-count).
-If you are wrapping your input, such as in a markdown component, and need the character
-count separate from the input, use `GlFormCharacterCount`.
-
-## Example
-
-```html
-<script>
-  import { GlFormCharacterCount, GlFormInput, GlFormGroup } from '@gitlab/ui'
-
-  export default {
-    inputId: 'form-input-with-character-count',
-    countTextId: 'character-count-text',
-    limit: 100,
-    components: { GlFormCharacterCount, GlFormInput, GlFormGroup },
-    data() {
-      return {
-        value: '',
-      }
-    },
-    methods: {
-      remainingCountText(count) {
-        return  n__('%d character remaining.', '%d characters remaining.', count)
-      },
-      overLimitText(count) {
-        return n__('%d character over limit.', '%d characters over limit.', count);
-      },
-    },
-  }
-<script>
-
-<template>
-  <gl-form-group label="Form input with character count" :label-for="$options.inputId">
-    <gl-form-input
-      v-model="value"
-      :id="$options.inputId"
-      :value="value"
-      :aria-describedby="$options.countTextId"
-    />
-    <gl-form-character-count
-      :value="value"
-      :limit="$options.limit"
-      :count-text-id="$options.countTextId"
-    >
-      <template #remaining-count-text="{ count }">{{ remainingCountText(count) }}</template>
-      <template #over-limit-text="{ count }">{{ overLimitText(count) }}</template>
-    </gl-form-character-count>
-  </gl-form-group>
-<template>
-```

package/src/components/base/form/form_character_count/form_character_count.vue

@@ -1,97 +0,0 @@
-<script>
-import debounce from 'lodash/debounce';
-
-export default {
-  name: 'GlFormCharacterCount',
-  props: {
-    /**
-     * Input value
-     */
-    value: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Character count limit for the input.
-     */
-    limit: {
-      type: Number,
-      required: true,
-    },
-    /**
-     * id attribute for the character count text. Input should have `:aria-describedby="countTextId"`
-     */
-    countTextId: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      remainingCount: this.initialRemainingCount(),
-      remainingCountSrOnly: this.initialRemainingCount(),
-    };
-  },
-  computed: {
-    isOverLimit() {
-      return this.remainingCount < 0;
-    },
-    isOverLimitSrOnly() {
-      return this.remainingCountSrOnly < 0;
-    },
-    countTextClass() {
-      return this.isOverLimit ? 'gl-text-danger' : 'gl-text-subtle';
-    },
-  },
-  watch: {
-    value(newValue) {
-      this.remainingCount = this.limit - this.valueLength(newValue);
-      this.debouncedUpdateRemainingCountSrOnly(newValue);
-    },
-  },
-  created() {
-    // Debounce updating the remaining character count for a second so
-    // screen readers announce the remaining text after the text in the textarea.
-    this.debouncedUpdateRemainingCountSrOnly = debounce(this.updateRemainingCountSrOnly, 1000);
-  },
-  methods: {
-    valueLength(value) {
-      return value?.length || 0;
-    },
-    updateRemainingCountSrOnly(newValue) {
-      this.remainingCountSrOnly = this.limit - this.valueLength(newValue);
-    },
-    initialRemainingCount() {
-      return this.limit - this.valueLength(this.value);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <small :class="['form-text', countTextClass]" aria-hidden="true">
-      <!--
-      @slot Internationalized over limit text. Example: `<template #over-limit-text="{ count }">{{ n__('%d character over limit.', '%d characters over limit.', count) }}</template>`
-      @binding {number} count
-      -->
-      <slot v-if="isOverLimit" name="over-limit-text" :count="Math.abs(remainingCount)"></slot>
-      <!--
-      @slot Internationalized character count text. Example: `<template #remaining-count-text="{ count }">{{ n__('%d character remaining.', '%d characters remaining.', count) }}</template>`
-      @binding {number} count
-      -->
-
-      <slot v-else name="remaining-count-text" :count="remainingCount"></slot>
-    </small>
-    <div :id="countTextId" class="gl-sr-only" aria-live="polite" data-testid="count-text-sr-only">
-      <slot
-        v-if="isOverLimitSrOnly"
-        name="over-limit-text"
-        :count="Math.abs(remainingCountSrOnly)"
-      ></slot>
-
-      <slot v-else name="remaining-count-text" :count="remainingCountSrOnly"></slot>
-    </div>
-  </div>
-</template>

package/src/components/base/form/form_checkbox/form_checkbox.md

@@ -1,6 +0,0 @@
-Form checkbox groups for general use inside forms.
-
-## Stacked
-
-By default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is
-non-changeable at this time.

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -1,221 +0,0 @@
-@mixin gl-tmp-form-checkbox-inline-styles {
-  @apply gl-mt-1;
-  @apply gl-ml-0;
-  @apply gl-self-start;
-  position: static;
-  @apply gl-h-auto;
-  @apply gl-mr-0;
-}
-
-.gl-form-checkbox-group {
-  @apply gl-leading-normal;
-}
-
-.gl-form-checkbox,
-.gl-form-radio {
-  @apply gl-text-base;
-  @apply gl-leading-normal;
-  color: var(--gl-text-color-default);
-
-  &.form-check {
-    @apply gl-flex;
-    @apply gl-pl-0;
-  }
-
-  &.form-check-inline {
-    @apply gl-inline-flex;
-    @apply gl-items-center;
-  }
-
-  .form-check-input {
-    @include gl-tmp-form-checkbox-inline-styles;
-
-    &:active,
-    &:focus,
-    &:focus:active {
-      @apply gl-focus;
-    }
-  }
-
-  .form-check-label {
-    @apply gl-pl-3;
-    @apply gl-leading-normal;
-  }
-
-  .form-check-input:disabled,
-  .form-check-input:disabled ~ .form-check-label,
-  .custom-control-input:disabled,
-  .custom-control-input:disabled ~ .custom-control-label,
-  .custom-control-input:disabled ~ .custom-control-label > .help-text {
-    @apply gl-cursor-not-allowed;
-    color: var(--gl-text-color-disabled);
-  }
-
-  &.custom-control {
-    @apply gl-pl-5;
-
-    .custom-control-input ~ .custom-control-label {
-      @apply gl-cursor-pointer;
-      @apply gl-pl-3;
-      @apply gl-mb-3;
-
-      &::before,
-      &::after {
-        top: 0;
-        left: -$gl-spacing-scale-5;
-      }
-
-      &::before {
-        background-color: var(--gl-control-background-color-default);
-        border-color: var(--gl-control-border-color-default);
-      }
-    }
-
-    .custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
-      border-color: var(--gl-control-border-color-hover);
-    }
-
-    .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
-      @apply gl-focus;
-      border-color: var(--gl-control-border-color-focus);
-    }
-
-    .custom-control-input:checked  ~ .custom-control-label::before {
-      background-color: var(--gl-control-background-color-selected-default);
-      border-color: var(--gl-control-border-color-selected-default);
-
-      @media (forced-colors: active) {
-        background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-      }
-    }
-
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
-    .custom-control-input[type='radio']:checked ~ .custom-control-label {
-      &::after {
-        background: 50% 50% no-repeat;
-        background-color: var(--gl-control-indicator-color-selected);
-        mask-repeat: no-repeat;
-        mask-position: center center;
-      }
-    }
-
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
-      background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-check}');
-    }
-
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
-      background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-indeterminate}');
-    }
-
-    .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
-      background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-radio}');
-    }
-
-    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
-    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label {
-      &::before  {
-        background-color: var(--gl-control-background-color-selected-hover);
-        border-color: var(--gl-control-border-color-selected-hover);
-      }
-    }
-
-    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label::before {
-      background-color: var(--gl-control-background-color-selected-focus);
-      border-color: var(--gl-control-border-color-selected-focus);
-    }
-
-    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
-    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label,
-    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
-      &::before {
-        @media (forced-colors: active) {
-          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        }
-      }
-    }
-
-    &.custom-checkbox {
-      .custom-control-input:indeterminate ~ .custom-control-label::before {
-        background-color: var(--gl-control-background-color-selected-default);
-        border-color: var(--gl-control-border-color-selected-default);
-
-        @media (forced-colors: active) {
-          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        }
-      }
-
-      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before {
-        background-color: var(--gl-control-background-color-selected-hover);
-        border-color: var(--gl-control-border-color-selected-hover);
-      }
-
-      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
-        background-color: var(--gl-control-background-color-selected-focus);
-        border-color: var(--gl-control-border-color-selected-focus);
-      }
-
-      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
-      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
-        @media (forced-colors: active) {
-          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        }
-      }
-    }
-
-    .custom-control-input:disabled ~ .custom-control-label {
-      @apply gl-cursor-not-allowed;
-
-      &::before {
-        @apply gl-pointer-events-auto;
-        background-color: var(--gl-control-background-color-disabled);
-        border-color: var(--gl-control-border-color-disabled);
-
-        @media (forced-colors: active) {
-          opacity: 0.5;
-        }
-      }
-    }
-
-    .custom-control-input:checked:disabled ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
-      &::before {
-        background-color: var(--gl-control-background-color-disabled);
-        border-color: var(--gl-control-border-color-disabled);
-      }
-
-      &::after {
-        background-image: none;
-        background-color: var(--gl-control-indicator-color-disabled);
-
-        /* Ensure state indicators (like the checkmark for checked or
-          the dash for indeterminate) are visible in Windows High
-          Contrast Mode.
-        */
-        @media screen and (forced-colors: active) {
-          forced-color-adjust: none;
-          /* system color reference for disabled text applied to
-            background here.
-          */
-          // stylelint-disable-next-line
-          background-color: GrayText;
-        }
-      }
-    }
-  }
-
-  .help-text {
-    @apply gl-mt-2;
-    @apply gl-mb-0;
-    @apply gl-text-base;
-    @apply gl-leading-normal;
-    color: var(--gl-text-color-subtle);
-  }
-}

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -1,58 +0,0 @@
-<script>
-import uniqueId from 'lodash/uniqueId';
-import { BFormCheckbox } from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox';
-
-export default {
-  name: 'GlFormCheckbox',
-  components: {
-    BFormCheckbox,
-  },
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'input',
-  },
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: () => uniqueId(),
-    },
-  },
-  methods: {
-    change($event) {
-      /**
-       * Emitted when selected value(s) is changed due to user interaction.
-       *
-       * @event change
-       */
-      this.$emit('change', $event);
-    },
-    input($event) {
-      /**
-       * Emitted when checked state is changed.
-       *
-       * @event input
-       */
-      this.$emit('input', $event);
-    },
-  },
-};
-</script>
-
-<template>
-  <b-form-checkbox
-    v-bind="$attrs"
-    :id="id"
-    class="gl-form-checkbox"
-    @change="change"
-    @input="input"
-  >
-    <!-- @slot The checkbox content to display. -->
-    <slot></slot>
-    <p v-if="Boolean($scopedSlots.help)" class="help-text">
-      <!-- @slot The help text to display. -->
-      <slot name="help"></slot>
-    </p>
-  </b-form-checkbox>
-</template>

package/src/components/base/form/form_checkbox/form_checkbox_group.vue

@@ -1,44 +0,0 @@
-<script>
-import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
-import { BFormCheckboxGroup } from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group';
-import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
-import GlFormCheckbox from './form_checkbox.vue';
-
-export default {
-  name: 'GlFormCheckboxGroup',
-  components: { BFormCheckboxGroup, GlFormCheckbox },
-  directives: {
-    SafeHtml,
-  },
-  mixins: [formOptionsMixin],
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'input',
-  },
-};
-</script>
-
-<template>
-  <div>
-    <b-form-checkbox-group
-      v-bind="$attrs"
-      class="gl-form-checkbox-group"
-      stacked
-      @change="$emit('change', $event)"
-      @input="$emit('input', $event)"
-    >
-      <slot name="first"></slot>
-      <gl-form-checkbox
-        v-for="(option, idx) in formOptions"
-        :key="idx"
-        :value="option.value"
-        :disabled="option.disabled"
-      >
-        <span v-if="option.html" v-safe-html="option.html"></span>
-        <span v-else>{{ option.text }}</span>
-      </gl-form-checkbox>
-      <slot></slot>
-    </b-form-checkbox-group>
-  </div>
-</template>

package/src/components/base/form/form_checkbox_tree/checkbox_tree_node.vue

@@ -1,58 +0,0 @@
-<script>
-import GlFormCheckbox from '../form_checkbox/form_checkbox.vue';
-import { QA_PREFIX } from './models/constants';
-
-export default {
-  name: 'GlFormCheckboxTreeNode',
-  qaPrefix: QA_PREFIX,
-  components: {
-    GlFormCheckbox,
-  },
-  inject: ['tree'],
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-    isNested: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    node() {
-      return this.tree.getNode(this.option.value);
-    },
-    label() {
-      return this.node.label || this.node.value;
-    },
-    rootClass() {
-      return this.isNested ? 'gl-ml-6' : null;
-    },
-    checkboxClass() {
-      const { isChecked, isIndeterminate } = this.node;
-      return [isChecked && 'js-is-checked', isIndeterminate && 'js-is-indeterminate'];
-    },
-  },
-};
-</script>
-
-<template>
-  <div :class="rootClass" :data-testid="`${$options.qaPrefix}${option.value}`">
-    <gl-form-checkbox
-      :checked="node.isChecked"
-      :indeterminate="node.isIndeterminate"
-      :class="checkboxClass"
-      @change="tree.toggleOption(option, $event)"
-    >
-      {{ label }}
-    </gl-form-checkbox>
-    <gl-form-checkbox-tree-node
-      v-for="child in option.children"
-      :key="child.value"
-      :option="child"
-      is-nested
-    />
-  </div>
-</template>

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.md

@@ -1,73 +0,0 @@
-`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of
-children. It can be useful for creating a search filter that has nested facets.
-
-## Usage
-
-`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of
-an n-level deep tree. Each option should have a `value` and can have optional
-`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.
-Here's a simple `options` tree for example:
-
-```js
-[
-  {
-    label: 'Option #1',
-    value: 1,
-    children: [
-      {
-        label: 'Option #2',
-        value: 2,
-      },
-    ],
-  },
-  {
-    label: 'Option #3',
-    value: 3,
-  },
-]
-```
-
-`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with
-the `change` event.
-
-## Dos and don'ts
-
-### Don't
-
-When rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be
-passed to the component via the `v-model`/`value` property. For example, with the options tree
-above, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included
-in the initial value, don't rely on the component to infer initially checked boxes by only passing
-`1` or `2`.
-
-```html
-<!-- Good -->
-<gl-form-checkbox-tree
-  :value="[1, 2]"
-  :options="[
-    {
-      value: 1,
-      children: [
-        {
-          value: 2,
-        },
-      ],
-    },
-  ]"
-/>
-
-<!-- Bad -->
-<gl-form-checkbox-tree
-  :value="[1]"
-  :options="[
-    {
-      value: 1,
-      children: [
-        {
-          value: 2,
-        },
-      ],
-    },
-  ]"
-/>
-```