@gitlab/duo-ui 0.1.0 → 0.2.0

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

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

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

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

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

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

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

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

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

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

@@ -1,228 +0,0 @@
-// 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;
-  }
-}