@gitlab/duo-ui 0.1.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,73 @@
+`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,
+        },
+      ],
+    },
+  ]"
+/>
+```