@gitlab/duo-ui 0.1.0

package/src/components/base/button/button.vue

@@ -0,0 +1,143 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BButton } from '../../../vendor/bootstrap-vue/src/components/button/button';
+import {
+  buttonCategoryOptions,
+  buttonVariantOptions,
+  buttonSizeOptions,
+} from '../../../utils/constants';
+import { logWarning } from '../../../utils/utils';
+import { isSlotEmpty } from '../../../utils/is_slot_empty';
+import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
+import GlIcon from '../icon/icon.vue';
+import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+
+export default {
+  name: 'GlButton',
+  components: {
+    BButton,
+    GlIcon,
+    GlLoadingIcon,
+  },
+  mixins: [SafeLinkMixin],
+  props: {
+    category: {
+      type: String,
+      required: false,
+      default: buttonCategoryOptions.primary,
+      validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: buttonVariantOptions.default,
+      validator: (value) => Object.keys(buttonVariantOptions).includes(value),
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium',
+      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
+    },
+    selected: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    label: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    buttonTextClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    block: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    hasIcon() {
+      return this.icon !== '';
+    },
+    hasIconOnly() {
+      return isSlotEmpty(this, 'default') && this.hasIcon;
+    },
+    isButtonDisabled() {
+      return this.disabled || this.loading;
+    },
+    buttonClasses() {
+      const classes = ['gl-button'];
+
+      if (this.category !== buttonCategoryOptions.primary) {
+        classes.push(`btn-${this.variant}-${this.category}`);
+      }
+
+      classes.push({
+        'btn-icon': this.hasIconOnly,
+        'button-ellipsis-horizontal': this.hasIconOnly && this.icon === 'ellipsis_h',
+        selected: this.selected,
+      });
+
+      if (this.label) {
+        classes.push('btn', 'btn-label', `btn-${this.buttonSize}`);
+      }
+
+      return classes;
+    },
+    buttonSize() {
+      return buttonSizeOptions[this.size];
+    },
+    displayBlock() {
+      return !this.label && this.block;
+    },
+  },
+  mounted() {
+    // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+    if (!this.$slots.default && !this.$attrs['aria-label'] && !this.$props.label) {
+      logWarning(
+        '[gl-button]: Accessible name missing. Please add inner text or aria-label.',
+        this.$el
+      );
+    }
+  },
+};
+</script>
+<template>
+  <component
+    :is="label ? 'span' : 'b-button'"
+    v-bind="$attrs"
+    v-safe-link:[safeLinkConfig]
+    :block="displayBlock"
+    :target="target"
+    :variant="variant"
+    :size="buttonSize"
+    :disabled="isButtonDisabled"
+    :class="buttonClasses"
+    v-on="$listeners"
+  >
+    <gl-loading-icon v-if="loading" inline class="gl-button-icon gl-button-loading-indicator" />
+    <gl-icon v-if="hasIcon && !(hasIconOnly && loading)" class="gl-button-icon" :name="icon" />
+    <slot name="emoji"></slot>
+    <span v-if="!hasIconOnly" :class="buttonTextClasses" class="gl-button-text"><slot></slot></span>
+  </component>
+</template>

package/src/components/base/button_group/button_group.md

@@ -0,0 +1,28 @@
+Button groups are an easy way to group a series of buttons together.
+
+## Split dropdowns
+
+Both `GlCollapsibleListbox` and `GlDisclosureDropdown` can be added as the last
+child of a button group to produce a "split" dropdown.
+
+For the correct styling, the dropdown component must render a caret _only_.
+This means no icon, and no visible text. For accessbility, ensure the
+dropdown's `toggle-text` _and_ `text-sr-only` props are set.
+
+```html
+<gl-button-group>
+  <gl-button>Split listbox</gl-button>
+
+  <gl-collapsible-listbox
+    v-model="foo"
+    :items="items"
+    toggle-text="Choose button action"
+    text-sr-only
+  />
+</gl-button-group>
+```
+
+## vue-bootstrap component
+
+This component uses [`BButtonGroup`](https://bootstrap-vue.org/docs/components/button-group) from vue-bootstrap
+internally. So please take a look also there at their extensive documentation.

package/src/components/base/button_group/button_group.vue

@@ -0,0 +1,16 @@
+<script>
+import { BButtonGroup } from '../../../vendor/bootstrap-vue/src/components/button-group/button-group';
+
+export default {
+  name: 'GlButtonGroup',
+  components: {
+    BButtonGroup,
+  },
+};
+</script>
+<template>
+  <b-button-group v-bind="$attrs" v-on="$listeners">
+    <!-- @slot The buttons to group. -->
+    <slot></slot>
+  </b-button-group>
+</template>

package/src/components/base/card/card.md

@@ -0,0 +1,4 @@
+Cards are a flexible component used to display content and actions in a variety of contexts.
+They are generally restricted to a single topic and it should be easy for users to scan relevant and
+actionable information. Content, such as images and text, should be positioned within them in a
+manner that demonstrates their intended hierarchy.

package/src/components/base/card/card.scss

@@ -0,0 +1,46 @@
+.gl-card {
+  background-color: var(--gl-background-color-default);
+  @apply gl-border-solid;
+  @apply gl-rounded-base;
+  @apply gl-flex;
+  @apply gl-flex-col;
+  @apply gl-break-words;
+  position: relative;
+  @apply gl-text-base;
+}
+
+.gl-card,
+.gl-card-header,
+.gl-card-footer {
+  @apply gl-border-1;
+  border-color: var(--gl-border-color-default);
+}
+
+.gl-card-header,
+.gl-card-body,
+.gl-card-footer {
+  @apply gl-p-5;
+}
+
+.gl-card-header {
+  @apply gl-border-b-solid;
+  border-top-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
+  border-top-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
+  color: var(--gl-text-color-heading);
+}
+
+.gl-card-footer {
+  @apply gl-border-t-solid;
+  border-bottom-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
+  border-bottom-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
+}
+
+.gl-card-header,
+.gl-card-footer {
+  background-color: var(--gl-background-color-subtle);
+}
+
+.gl-card-body,
+.gl-card-footer {
+  color: var(--gl-text-color-default);
+}

package/src/components/base/card/card.vue

@@ -0,0 +1,49 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+export default {
+  name: 'GlCard',
+  props: {
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: '',
+    },
+    /**
+     * Additional CSS class(es) to be applied to the body.
+     */
+    bodyClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: '',
+    },
+    /**
+     * Additional CSS class(es) to be applied to the footer.
+     */
+    footerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-card">
+    <div v-if="$scopedSlots.header" class="gl-card-header" :class="headerClass">
+      <!-- @slot The card's header content. -->
+      <slot name="header"></slot>
+    </div>
+    <div class="gl-card-body" :class="bodyClass">
+      <!-- @slot The card's main content. -->
+      <slot></slot>
+    </div>
+    <div v-if="$scopedSlots.footer" class="gl-card-footer" :class="footerClass">
+      <!-- @slot The card's footer content. -->
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>

package/src/components/base/collapse/collapse.md

@@ -0,0 +1,26 @@
+Collapse is used to keep pages focused on the overview of what the user can do. Details and
+additional actions are hidden in the fold, and can be opened if the user wants to interact with
+those elements.
+
+## Troubleshooting
+
+When collapsing the container, padding on the collapse component causes
+complications with the height calculations.
+The result is a bit of jumpiness at the end of the collapse animation.
+
+The quick solution is to bring the padding into an inner container, which
+simplifies the height calculations and removes the jumpiness.
+
+```html
+<!-- bad -->
+<gl-collapse class="gl-p-3">
+    <!-- content -->
+</gl-collapse>
+
+<!-- good -->
+ <gl-collapse>
+    <div class="gl-p-3">
+        <!-- content -->
+    </div>
+</gl-collapse>
+```

package/src/components/base/collapse/collapse.vue

@@ -0,0 +1,29 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script>
+import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+
+export default {
+  name: 'GlCollapse',
+  components: {
+    BCollapse,
+  },
+  model: {
+    prop: 'visible',
+    event: 'input',
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <b-collapse :visible="visible" v-bind="$attrs" v-on="$listeners">
+    <!-- @slot The content to show/hide. -->
+    <slot></slot>
+  </b-collapse>
+</template>

package/src/components/base/datepicker/datepicker.md

@@ -0,0 +1,8 @@
+Date picker allows users to choose and input a date by manually typing the date into the input field
+or by using a calendar-like dropdown.
+
+### Warning
+
+Be careful when binding a date value using `value` prop. `value` is a watched property and Date
+picker will emit `input` event on _initial load_. Alternatively, use `defaultDate` to set the
+initial date then receive updated date values through `input` events.

package/src/components/base/datepicker/datepicker.scss

@@ -0,0 +1,228 @@
+// pikaday colors override
+$pd-text-color: var(--gl-text-color-default);
+$pd-title-color: var(--gl-action-neutral-foreground-color-default);
+$pd-title-bg: var(--gl-action-neutral-background-color-default);
+$pd-picker-bg: var(--gl-datepicker-background-color);
+$pd-picker-border: var(--gl-border-color-default);
+$pd-picker-border-bottom: var(--gl-border-color-default);
+$pd-th-color: var(--gl-text-color-subtle);
+$pd-day-color: var(--gl-text-color-default);
+$pd-day-bg: transparent;
+$pd-day-hover-color: var(--gl-text-color-default);
+$pd-day-hover-bg: transparent;
+$pd-day-today-color: var(--gl-text-color-default);
+$pd-day-selected-color: var(--gl-datepicker-date-text-color-selected);
+$pd-day-selected-bg: var(--gl-control-background-color-selected-default);
+$pd-day-selected-shadow: var(--gl-control-background-color-selected-default);
+$pd-day-disabled-color: var(--gl-text-color-disabled);
+$pd-week-color: var(--gl-text-color-subtle);
+
+@import 'pikaday/scss/pikaday';
+
+.gl-datepicker-actions {
+  @apply gl-text-sm;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  @apply gl-flex;
+  @apply gl-justify-center;
+  @apply gl-items-center;
+  @apply gl-pointer-events-none;
+  @apply gl-px-2;
+
+  .gl-button.gl-button {
+    border-radius: 0.0075rem;
+  }
+}
+
+.gl-datepicker-theme {
+  @apply gl-font-regular;
+  @apply gl-border-none;
+  @apply gl-rounded-base;
+  @apply gl-mt-3;
+  background-color: var(--gl-datepicker-background-color);
+
+  &.is-bound {
+    @apply gl-shadow-md;
+
+    @media (forced-colors: active) {
+      border: 1px solid;
+    }
+  }
+
+  .pika-lendar {
+    @apply gl-m-0;
+    @apply gl-pt-5;
+    @apply gl-px-3;
+    @apply gl-pb-3;
+    @apply gl-rounded-base;
+  }
+
+  .pika-title {
+    @apply gl-leading-normal;
+    @apply gl-mb-5;
+    @apply gl-h-5;
+  }
+
+  .pika-next,
+  .pika-prev {
+    @apply gl-rounded-small;
+    @apply gl-w-5;
+    @apply gl-h-5;
+
+    &.is-disabled {
+      @apply gl-cursor-not-allowed;
+    }
+
+    @media (forced-colors: none) {
+      background-color: var(--gl-action-neutral-background-color-default);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+      background-image: none;
+      opacity: 100%;
+
+      &::before {
+        /* Apply a slightly larger border-radius to the ::before pseudo-element
+        to prevent background color shimmer issue in Safari.
+        This is necessary because the parent element (which already has a border-radius)
+        requires the ::before element to extend beyond its edges to ensure proper coverage. */
+        @apply gl-rounded-lg;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--gl-action-neutral-foreground-color-default);
+      }
+
+      &:not(.is-disabled):hover {
+        background-color: var(--gl-action-neutral-background-color-hover);
+
+        &::before {
+          background-color: var(--gl-action-neutral-foreground-color-hover);
+        }
+      }
+
+      &:not(.is-disabled):focus {
+        background-color: var(--gl-action-neutral-background-color-focus);
+
+        &::before {
+          background-color: var(--gl-action-neutral-foreground-color-focus);
+        }
+      }
+
+      &:not(.is-disabled):active {
+        background-color: var(--gl-action-neutral-background-color-active);
+
+        &::before {
+          background-color: var(--gl-action-neutral-foreground-color-active);
+        }
+      }
+
+      &.is-disabled::before {
+        background-color: var(--gl-action-disabled-foreground-color);
+      }
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid;
+    }
+  }
+
+  .pika-next {
+    &::before {
+      mask-image: url('#{$gl-icon-chevron-right}');
+    }
+
+    @media (forced-colors: active) {
+      background-image: url('#{$gl-icon-chevron-right}');
+    }
+  }
+
+  .pika-prev {
+    &::before {
+      mask-image: url('#{$gl-icon-chevron-left}');
+    }
+
+    @media (forced-colors: active) {
+      background-image: url('#{$gl-icon-chevron-left}');
+    }
+  }
+
+  .pika-label {
+    @apply gl-rounded-small;
+    @apply gl-text-base;
+    @apply gl-py-0;
+
+    background-color: var(--gl-action-neutral-background-color-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
+    color: var(--gl-action-neutral-foreground-color-default);
+
+    &:hover {
+      background-color: var(--gl-action-neutral-background-color-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
+      color: var(--gl-action-neutral-foreground-color-hover);
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid;
+    }
+  }
+
+  .pika-select {
+    top: 0;
+    @apply gl-h-5;
+  }
+
+  th {
+    @apply gl-pb-3;
+    @apply gl-font-bold;
+    @apply gl-leading-normal;
+  }
+
+  abbr[title] {
+    @apply gl-no-underline;
+    @apply gl-cursor-default;
+  }
+
+  .pika-button {
+    @apply gl-rounded-base;
+    @apply gl-shadow-none;
+    @apply gl-py-3;
+    @apply gl-text-center;
+    @apply gl-leading-normal;
+    @apply gl-w-7;
+    @apply gl-text-base;
+
+    &:hover {
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid;
+    }
+  }
+
+  .is-today > .pika-button {
+    @apply gl-font-bold;
+  }
+
+  .is-selected > .pika-button {
+    @apply gl-font-normal;
+
+    &:hover {
+      background-color: var(--gl-control-background-color-selected-hover);
+      color: var(--gl-datepicker-date-text-color-selected);
+      box-shadow: none;
+    }
+  }
+
+  .is-selected.is-today > .pika-button {
+    @apply gl-font-bold;
+  }
+
+  .is-disabled {
+    @apply gl-cursor-not-allowed;
+  }
+}