@gitlab/duo-ui 0.1.0 → 0.2.0

package/src/components/base/modal/modal.vue

@@ -1,269 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import { BModal } from '../../../vendor/bootstrap-vue/src/components/modal/modal';
-import { translate } from '../../../utils/i18n';
-import {
-  COMMA,
-  focusableTags,
-  modalButtonDefaults,
-  modalSizeOptions,
-} from '../../../utils/constants';
-import { focusFirstFocusableElement, logWarning } from '../../../utils/utils';
-import CloseButton from '../../shared_components/close_button/close_button.vue';
-import GlButton from '../button/button.vue';
-
-function validatorHelper(obj) {
-  return Object.keys(obj).every((val) => val === 'text' || val === 'attributes');
-}
-
-export default {
-  name: 'GlModal',
-  components: {
-    BModal,
-    GlButton,
-    CloseButton,
-  },
-  inheritAttrs: false,
-  model: {
-    prop: 'visible',
-    event: 'change',
-  },
-  props: {
-    modalId: {
-      type: String,
-      required: true,
-    },
-    titleTag: {
-      type: String,
-      required: false,
-      default: 'h4',
-    },
-    title: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    modalClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    actionPrimary: {
-      type: Object,
-      required: false,
-      default: null,
-      validator: (obj) => validatorHelper(obj),
-    },
-    actionSecondary: {
-      type: Object,
-      required: false,
-      default: null,
-      validator: (obj) => validatorHelper(obj),
-    },
-    actionCancel: {
-      type: Object,
-      required: false,
-      default: null,
-      validator: (obj) => validatorHelper(obj),
-    },
-    size: {
-      type: String,
-      required: false,
-      default: modalSizeOptions.md,
-      validator: (val) => Object.keys(modalSizeOptions).includes(val),
-    },
-    /**
-     * The close button's label, it is used for the button's aria-label attribute.
-     */
-    dismissLabel: {
-      type: String,
-      required: false,
-      default: () => translate('GlModal.closeButtonTitle', 'Close'),
-    },
-    visible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    ariaLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    noFocusOnShow: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    shouldRenderModalOk() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots['modal-ok']);
-    },
-    shouldRenderModalCancel() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots['modal-cancel']);
-    },
-    shouldRenderModalFooter() {
-      return Boolean(
-        this.actionCancel ||
-          this.actionSecondary ||
-          this.actionPrimary ||
-          // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-          this.$slots['modal-footer']
-      );
-    },
-  },
-  mounted() {
-    if (!this.ariaLabel && !this.title) {
-      logWarning(
-        '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.',
-        this.$el
-      );
-    }
-  },
-  methods: {
-    show() {
-      this.$refs.modal.show();
-    },
-    hide() {
-      this.$refs.modal.hide();
-    },
-    toggle() {
-      this.$refs.modal.toggle();
-    },
-    ok() {
-      this.$refs.modal.onOk();
-    },
-    cancel() {
-      this.$refs.modal.onCancel();
-    },
-    close() {
-      this.$refs.modal.onClose();
-    },
-    primary(event) {
-      this.$emit('primary', event);
-    },
-    canceled(event) {
-      this.$emit('canceled', event);
-    },
-    secondary(event) {
-      this.$emit('secondary', event);
-      if (!event?.defaultPrevented) {
-        this.close();
-      }
-    },
-    // set default variant button styling
-    buttonBinding(prop, name) {
-      if (!prop.attributes) {
-        return modalButtonDefaults[name];
-      }
-      return prop.attributes;
-    },
-    setFocus() {
-      if (this.noFocusOnShow) return;
-
-      const btnElts = [...this.$refs.modal.$refs.modal.querySelectorAll('button')];
-      const modalElts = [
-        ...this.$refs.modal.$refs.body.querySelectorAll(focusableTags.join(COMMA)),
-      ];
-
-      // Iterate over the array and if you find the close button,
-      // move it to the end
-      const closeBtnIndex = btnElts.findIndex((elt) => elt === this.$refs['close-button']?.$el);
-      if (closeBtnIndex > -1) {
-        btnElts.push(...btnElts.splice(closeBtnIndex, 1));
-      }
-
-      // ModalElts are the first choice, the btnElts are a backup
-      focusFirstFocusableElement([...modalElts, ...btnElts]);
-    },
-  },
-};
-</script>
-
-<template>
-  <!--
-  Emitted when the modal visibility changes
-  @event change
-  -->
-  <b-modal
-    :id="modalId"
-    ref="modal"
-    :title-tag="titleTag"
-    :size="size"
-    :visible="visible"
-    :aria-label="ariaLabel || title"
-    v-bind="$attrs"
-    lazy
-    :modal-class="['gl-modal', modalClass]"
-    v-on="$listeners"
-    @shown="setFocus"
-    @ok="primary"
-    @cancel="canceled"
-    @change="$emit('change', $event)"
-  >
-    <template #default>
-      <slot name="default"></slot>
-    </template>
-    <template #modal-header>
-      <!-- @slot Entire modal header container contents (including the close button on the top right corner) -->
-      <slot name="modal-header">
-        <h2 class="modal-title">
-          <!-- @slot Modal title. If modal-header slot is used, this slot will not be shown. -->
-          <slot name="modal-title">{{ title }}</slot>
-        </h2>
-      </slot>
-      <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
-      <close-button ref="close-button" :label="dismissLabel" @click="close" />
-    </template>
-    <template v-if="shouldRenderModalOk" #modal-ok>
-      <slot name="modal-ok"></slot>
-    </template>
-    <template v-if="shouldRenderModalCancel" #modal-cancel>
-      <slot name="modal-cancel"></slot>
-    </template>
-    <!-- @slot Populated via props: modal-action-primary, modal-action-cancel and modal-action-secondary. -->
-    <template v-if="shouldRenderModalFooter" #modal-footer>
-      <slot name="modal-footer">
-        <!--
-        Emitted when clicked on modal-action-cancel
-        @event canceled
-        -->
-        <gl-button
-          v-if="actionCancel"
-          class="js-modal-action-cancel"
-          v-bind="buttonBinding(actionCancel, 'actionCancel')"
-          @click="cancel"
-        >
-          {{ actionCancel.text }}
-        </gl-button>
-        <!--
-        Emitted when clicked on modal-action-secondary
-        @event secondary
-        -->
-        <gl-button
-          v-if="actionSecondary"
-          class="js-modal-action-secondary"
-          v-bind="buttonBinding(actionSecondary, 'actionSecondary')"
-          @click="secondary"
-        >
-          {{ actionSecondary.text }}
-        </gl-button>
-        <!--
-        Emitted when clicked on modal-action-primary
-        @event primary
-        -->
-        <gl-button
-          v-if="actionPrimary"
-          class="js-modal-action-primary"
-          v-bind="buttonBinding(actionPrimary, 'actionPrimary')"
-          @click="ok"
-        >
-          {{ actionPrimary.text }}
-        </gl-button>
-      </slot>
-    </template>
-  </b-modal>
-</template>

package/src/components/base/nav/nav.md

@@ -1,11 +0,0 @@
-The navigation component is built with flexbox and provides a strong foundation for building all
-types of navigation components.
-
-## `GlNavItem`
-
-Use `GlNavItem` to add actionable links (or router links) to your nav. `GlNavItem` wraps [`BNavItem`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item).
-
-## `GlNavItemDropdown`
-
-Use `GlNavItemDropdown` to place dropdown items within your nav.
-`GlNavItemDropdown` wraps [`BNavItemDropdown`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item-dropdown).

package/src/components/base/nav/nav.scss

@@ -1,7 +0,0 @@
-.nav {
-  &-link {
-    &:focus-visible {
-      @apply gl-focus;
-    }
-  }
-}

package/src/components/base/nav/nav.vue

@@ -1,17 +0,0 @@
-<script>
-import { BNav } from '../../../vendor/bootstrap-vue/src/components/nav/nav';
-
-export default {
-  name: 'GlNav',
-  components: {
-    BNav,
-  },
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <b-nav v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-nav>
-</template>

package/src/components/base/nav/nav_item.vue

@@ -1,17 +0,0 @@
-<script>
-import { BNavItem } from '../../../vendor/bootstrap-vue/src/components/nav/nav-item';
-
-export default {
-  name: 'GlNavItem',
-  components: {
-    BNavItem,
-  },
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <b-nav-item v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-nav-item>
-</template>

package/src/components/base/nav/nav_item_dropdown.vue

@@ -1,40 +0,0 @@
-<script>
-import { BNavItemDropdown } from '../../../vendor/bootstrap-vue/src/components/nav/nav-item-dropdown';
-import GlIcon from '../icon/icon.vue';
-
-export default {
-  name: 'GlNavItemDropdown',
-  components: {
-    BNavItemDropdown,
-    GlIcon,
-  },
-  inheritAttrs: false,
-  props: {
-    text: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    icon: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-};
-</script>
-
-<template>
-  <b-nav-item-dropdown class="gl-dropdown" v-bind="$attrs" v-on="$listeners">
-    <template #default>
-      <slot></slot>
-    </template>
-    <template #button-content>
-      <slot name="button-content">
-        <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
-        {{ text }}
-        <gl-icon class="dropdown-chevron" name="chevron-down" />
-      </slot>
-    </template>
-  </b-nav-item-dropdown>
-</template>

package/src/components/base/navbar/navbar.md

@@ -1,4 +0,0 @@
-### Navbar
-
-The component <navbar> is a wrapper that positions branding, navigation, and other elements into a
-concise header.

package/src/components/base/navbar/navbar.vue

@@ -1,17 +0,0 @@
-<script>
-import { BNavbar } from '../../../vendor/bootstrap-vue/src/components/navbar/navbar';
-
-export default {
-  name: 'GlNavbar',
-  components: {
-    BNavbar,
-  },
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <b-navbar class="gl-navbar" v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-navbar>
-</template>