@gitlab/duo-ui 0.1.0

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

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

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

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

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

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

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

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

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

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