@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/components/CModal.vue

@@ -1,103 +1,222 @@
 <template>
-  <v-dialog
-    :persistent="!dismissible || !!loading"
-    no-click-animation
-    :value="value"
-    scrollable
-    @input="(value) => $emit('input', value)"
+  <sl-dialog
+    ref="modal"
+    :label="dialogLabel"
+    no-header
+    :open="value"
+    class="c-modal"
+    :class="{ 'c-modal--fullscreen': fullscreen }"
+    :data-loading="loading || undefined"
+    :data-state="value ? 'open' : 'closed'"
+    :data-test="getDataTestAttr()"
+    @sl-hide="$emit('input', false)"
+    @sl-request-close="onRequestClose"
+    @sl-after-show="isVisible = true"
+    @sl-after-hide="isVisible = false"
   >
-    <c-card v-if="loading" key="loading" :data-test="value ? dataTest : null">
-      <c-card-section>
-        <div class="modal__loading" :data-test="value ? `${dataTest}-loading` : null">
-          <div class="modal__loading__icon-container">
-            <font-awesome-icon :icon="faSync" class="fa-spin modal__loading__icon" />
-          </div>
-
-          <div
-            v-if="hasLoadingMessage"
-            :data-test="value ? `${dataTest}-loading-message` : null"
-            class="modal__loading__message"
-          >
-            {{ loading }}
-          </div>
-        </div>
-      </c-card-section>
-    </c-card>
-    <c-card v-else key="default" :data-test="value ? dataTest : null">
-      <c-card-header :data-test="value ? `${dataTest}-title` : null">
-        {{ title }}
-
-        <template #append>
-          <c-icon-button
+    <CExpandTransition class="c-modal__wrapper" :disabled="!enableExpandTransition">
+      <div v-if="!loading" class="c-modal__body">
+        <div :data-test="getDataTestAttr('content')" class="c-modal__content">
+          <h2 v-if="title" class="c-modal__title" :data-test="getDataTestAttr('title')">
+            {{ title }}
+          </h2>
+          <button
             v-if="dismissible"
-            class="modal__header__dismiss"
-            :data-test="value ? `${dataTest}-dismiss` : null"
-            :icon="faTimes"
+            class="c-modal__dismiss"
+            :data-test="getDataTestAttr('dismiss')"
             @click="$emit('input', false)"
-          />
-        </template>
-      </c-card-header>
-
-      <slot />
-    </c-card>
-  </v-dialog>
+          >
+            {{ $t('Dismiss') }}
+          </button>
+          <slot />
+        </div>
+        <CButtonStack
+          v-if="footerHasContent"
+          tag="footer"
+          class="c-modal__footer"
+          :large="fullscreen || undefined"
+          :data-test="getDataTestAttr('footer')"
+        >
+          <slot name="footer" />
+        </CButtonStack>
+      </div>
+      <div v-else class="c-modal__loading" :data-test="value ? `${dataTest}-loading` : null">
+        <div class="c-modal__loading__loader"><CLoader /></div>
+        <slot name="loading">
+          <div v-if="loadingMessage" :data-test="value ? `${dataTest}-loading-message` : null">
+            {{ loadingMessage }}
+          </div>
+        </slot>
+      </div>
+    </CExpandTransition>
+  </sl-dialog>
 </template>
 
 <script lang="ts">
-import { faSync, faTimes } from '@fortawesome/pro-light-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+import type { PropType } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 
-import CCard from '@/components/CCard.vue';
-import CCardHeader from '@/components/CCardHeader.vue';
-import CCardSection from '@/components/CCardSection.vue';
-import CIconButton from '@/components/CIconButton.vue';
+import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
+import CExpandTransition from '@propelinc/citrus-ui/src/components/CExpandTransition.vue';
+import CLoader from '@propelinc/citrus-ui/src/components/CLoader.vue';
+import { useShoelaceAnimation } from '@propelinc/citrus-ui/src/composables/animation';
+import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
 
-@Component({
+export default defineComponent({
   name: 'CModal',
-  components: { CCard, CCardSection, CCardHeader, CIconButton, FontAwesomeIcon },
-})
-export default class CModal extends Vue {
-  faSync = faSync;
-  faTimes = faTimes;
-
-  /** Controls whether or not the modal is showing */
-  @Prop({ type: Boolean, default: false }) value!: boolean;
-  @Prop(String) title?: string;
-  /** Shows loading state and sets loading message if string */
-  @Prop([String, Boolean]) loading?: string | boolean;
-  /** Allows modal to be dismissed */
-  @Prop({ type: Boolean, default: true }) dismissible!: boolean;
-  /** Prefix for test selectors */
-  @Prop({ type: String, default: 'modal' }) dataTest!: string;
-
-  get hasLoadingMessage(): boolean {
-    return typeof this.loading === 'string';
-  }
-}
+  components: { CButtonStack, CLoader, CExpandTransition },
+  props: {
+    /** Controls whether or not the modal is showing */
+    value: { type: Boolean, default: false },
+    /** The title of the modal */
+    title: { type: String as PropType<string | null>, default: null },
+    /** Shows loading state and sets loading message if string */
+    loading: { type: [String, Boolean], default: false },
+    /** Allows modal to be dismissed */
+    dismissible: { type: Boolean, default: true },
+    /** Prefix for test selectors */
+    dataTest: { type: String, default: 'modal' },
+    /** Toggles the open/close animation */
+    transition: { type: Boolean, default: true },
+    /** Controls whether the modal displays fullscreen */
+    fullscreen: { type: Boolean, default: false },
+    /** Aria label for the modal. This is required if title is hidden */
+    ariaLabel: { type: String, default: '' },
+  },
+  emits: ['input'],
+  setup(props) {
+    const onRequestClose = (event: Event): void => {
+      if (!props.dismissible) {
+        event.preventDefault();
+      }
+    };
+
+    const modal = ref<SlDialog | null>(null);
+    const animation = computed<'default' | null>(() => (props.transition ? 'default' : null));
+    useShoelaceAnimation(modal, 'dialog.show', animation);
+    useShoelaceAnimation(modal, 'dialog.hide', animation);
+    useShoelaceAnimation(modal, 'dialog.overlay.show', animation);
+    useShoelaceAnimation(modal, 'dialog.overlay.hide', animation);
+
+    const isVisible = ref(false);
+    // NOTE(mohan): Don't do any expand transitions until the modal is fully
+    // open.
+    const enableExpandTransition = computed(() => !props.fullscreen && isVisible.value);
+
+    const getDataTestAttr = (suffix?: string): string => {
+      return suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
+    };
+
+    const loadingMessage = computed(() => {
+      return typeof props.loading === 'string' ? props.loading : null;
+    });
+
+    const dialogLabel = computed(() => {
+      if (loadingMessage.value) {
+        return loadingMessage.value;
+      }
+
+      return props.title || props.ariaLabel;
+    });
+
+    const footerHasContent = useSlotHasContent('footer');
+
+    return {
+      dialogLabel,
+      loadingMessage,
+      isVisible,
+      enableExpandTransition,
+      footerHasContent,
+      onRequestClose,
+      getDataTestAttr,
+      modal,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+@import '@propelinc/citrus-ui/src/styles/utils/a11y';
+
+.c-modal {
+  &::part(body) {
+    padding: 24px 24px 16px;
+  }
+
+  :deep() {
+    .c-card-section {
+      padding: 0 !important;
+    }
+
+    .c-card-footer {
+      padding: 24px 0 0;
+    }
 
-.modal__header__dismiss {
-  font-size: $font-size-icon-large;
+    // NOTE(slanden): This is a bit of a hack to ensure that the content of the modal
+    // stays within the bounds of the page and scrolls rather than continuing on past
+    // the bottom of the page and getting lost.
+    .c-expand-transition--disabled .c-expand-transition__content {
+      height: 100%;
+    }
+  }
 }
 
-.modal__loading {
-  text-align: center;
+.c-modal__title {
+  @include large-headline;
+
+  padding: 0 0 8px;
+}
+
+.c-modal__dismiss {
+  @include sr-only;
+}
+
+.c-modal__body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
-.modal__loading__icon-container {
-  padding: 32px 0 12px;
+.c-modal__content {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  max-height: 100%;
 }
 
-.modal__loading__icon {
-  color: $color-accent-blue;
-  font-size: $font-size-2x-large;
+.c-modal__footer {
+  flex: none;
+  padding: 24px 0 0;
 }
 
-.modal__loading__message {
-  font-weight: $font-weight-bold;
+.c-modal__loading {
+  padding: 32px 0 24px;
+  text-align: center;
+}
+
+.c-modal__loading__loader {
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.c-modal--fullscreen {
+  &::part(panel) {
+    border-radius: 0;
+    height: 100%;
+    max-height: none;
+    max-width: none;
+    width: 100%;
+  }
+
+  &::part(body) {
+    padding: calc(env(safe-area-inset-top, 0) + 12px) 16px max(env(safe-area-inset-bottom, 0), 12px);
+  }
+
+  .c-modal__wrapper {
+    height: 100%;
+  }
 }
 </style>

package/src/components/CModalLoading.vue

@@ -1,16 +1,34 @@
 <template>
-  <c-modal :loading="message || true" :value="value" @input="(value) => $emit('input', value)" />
+  <CModal
+    :value="value"
+    :loading="message || true"
+    :data-test="dataTest"
+    :dismissible="false"
+    @input="$emit('input', $event)"
+  >
+    <template #loading>
+      <slot name="loading" />
+    </template>
+  </CModal>
 </template>
 
 <script lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import type { PropType } from 'vue';
+import { defineComponent } from 'vue';
 
-import CModal from '@/components/CModal.vue';
+import CModal from '@propelinc/citrus-ui/src/components/CModal.vue';
 
-@Component({ name: 'CModalLoading', components: { FontAwesomeIcon, CModal } })
-export default class CModalLoading extends Vue {
-  @Prop({ type: Boolean, default: false }) value!: boolean;
-  @Prop({ type: String }) message?: string;
-}
+export default defineComponent({
+  name: 'CModalLoading',
+  components: { CModal },
+  props: {
+    /** Controls whether or not the modal is showing */
+    value: { type: Boolean, default: false },
+    /** Controls the message shown below the Modal Loading icon */
+    message: { type: String as PropType<string | null>, default: null },
+    /** Prefix for test selectors */
+    dataTest: { type: String, default: 'loading-modal' },
+  },
+  emits: ['input'],
+});
 </script>

package/src/components/CNotification.vue

@@ -1,93 +1,126 @@
 <template>
-  <div class="notification" :class="alert ? 'error' : 'primary'">
-    <c-icon-button
+  <div
+    data-test="notification"
+    class="c-notification"
+    :class="{
+      'c-notification--alert': alert,
+      'c-notification--warning': warning,
+    }"
+  >
+    <CIconButton
       v-if="dismissible"
-      class="notification__close-button"
-      :icon="faTimes"
-      light
+      data-test="notification-dismiss"
+      variant="tertiary"
+      class="c-notification__close-button"
+      :icon="farXmark"
+      :aria-label="$t('Dismiss')"
       @click="$emit('dismiss')"
     />
-    <div v-if="title || titleIcon" class="notification__title mb-2">
-      <!-- Wrapping the icon in a div aligns it with the title text -->
-      <div>
-        <font-awesome-icon v-if="titleIcon" class="mr-2" :icon="titleIcon" />
+    <slot name="title">
+      <div v-if="title || titleIcon" class="c-notification__title" data-test="notification-title">
+        <font-awesome-icon
+          v-if="titleIcon"
+          class="c-notification__title-icon"
+          data-test="notification-title-icon"
+          :icon="titleIcon"
+        />
+        <div data-test="notification-title-text" class="c-notification__title-text">
+          <strong>{{ title }}</strong>
+        </div>
       </div>
-      <div class="notification__title-text">
-        <strong>{{ title }}</strong>
-      </div>
-    </div>
-    <div class="mb-2">
+    </slot>
+
+    <div data-test="notification-body" class="c-notification__text">
       <slot />
     </div>
-    <c-button
+
+    <CButton
       v-if="hasButton"
-      secondary
-      class="mb-2"
+      data-test="notification-button"
+      class="c-notification__button"
+      :loading="buttonLoading"
       :to="buttonTo"
       :href="buttonHref"
       :target="buttonTarget"
+      @click="$emit('click:button')"
     >
       {{ buttonText }}
-    </c-button>
+    </CButton>
   </div>
 </template>
 
 <script lang="ts">
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faTimes } from '@fortawesome/pro-light-svg-icons';
+import { faXmark as farXmark } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { RawLocation } from 'vue-router';
-
-import CButton from '@/components/CButton.vue';
-import CIconButton from '@/components/CIconButton.vue';
+import { computed, defineComponent } from 'vue';
 
-@Component({ name: 'CNotification', components: { CButton, CIconButton, FontAwesomeIcon } })
-export default class CNotification extends Vue {
-  faTimes = faTimes;
+import CButton from '@propelinc/citrus-ui/src/components/CButton/CButton.vue';
+import CIconButton from '@propelinc/citrus-ui/src/components/CIconButton.vue';
 
-  /** Makes the background red, etc. */
-  @Prop(Boolean) alert?: boolean;
+export default defineComponent({
+  components: { CButton, CIconButton, FontAwesomeIcon },
+  props: {
+    // TODO(mohan): Make this prop accessible.
+    alert: { type: Boolean, default: false },
+    warning: { type: Boolean, default: false },
+    dismissible: { type: Boolean, default: false },
+    title: { type: String, default: '' },
+    titleIcon: { type: [String, Array, Object], default: undefined },
+    buttonText: { type: String, default: undefined },
+    buttonTo: { type: [Object, String], default: undefined },
+    buttonHref: { type: String, default: undefined },
+    buttonTarget: { type: String, default: undefined },
+    buttonLoading: { type: Boolean, default: false },
+  },
+  emits: ['click:button', 'dismiss'],
+  setup(props) {
+    const hasButton = computed(() => !!props.buttonText);
 
-  @Prop(Boolean) dismissible?: boolean;
-
-  @Prop(String) title?: string;
-  @Prop([String, Array, Object]) titleIcon?: IconDefinition;
-
-  /** To render a button, provide button text and one way to link it. */
-  @Prop(String) buttonText?: string;
-  @Prop([Object, String]) buttonTo?: RawLocation;
-  @Prop(String) buttonHref?: string;
-  @Prop(String) buttonTarget?: string;
-
-  get hasButton(): boolean {
-    return !!(this.buttonText && (this.buttonTo || this.buttonHref || this.buttonTarget));
-  }
-}
+    return { hasButton, farXmark };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
 
-.notification {
-  border-radius: $border-radius;
-  color: $color-white;
-  padding: 16px 16px 8px;
+.c-notification {
+  background-color: $color-blue-100;
+  border-radius: $border-radius-next;
+  padding: 16px;
   position: relative;
 }
 
-.notification__close-button {
+.c-notification--alert {
+  background-color: $color-red-100;
+}
+
+.c-notification--warning {
+  background-color: $color-gold-100;
+}
+
+.c-notification__close-button {
   float: right;
   font-size: 14px;
   margin-right: -8px;
   margin-top: -8px;
 }
 
-.notification__title {
+.c-notification__title {
+  align-items: center;
   display: flex;
+  margin-bottom: 8px;
 }
 
-.notification__title-text {
+.c-notification__title-icon {
+  margin-right: 8px;
+}
+
+.c-notification__title-text {
   flex: 1;
 }
+
+.c-notification__button {
+  margin-top: 12px;
+}
 </style>

package/src/components/CPhoneField.vue

@@ -0,0 +1,69 @@
+<template>
+  <CMaskedTextField
+    v-bind="$attrs"
+    :id="id"
+    ref="field"
+    :value="value"
+    type="tel"
+    :label="label || $t('Phone number')"
+    mask="(###) ###-####"
+    :minlength="10"
+    :maxlength="10"
+    :placeholder="placeholder || '(555) 555-5555'"
+    :data-test="dataTest"
+    :rules="[...defaultRules, ...rules]"
+    autocorrect="off"
+    autocapitalize="none"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #message>
+      <slot name="message" />
+    </template>
+  </CMaskedTextField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import type { PropType } from 'vue';
+
+import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
+import { useFocusableField } from '@propelinc/citrus-ui/src/composables/fields';
+import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
+import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
+import { minLengthRule } from '@propelinc/shared-utils';
+
+export default defineComponent({
+  name: 'CPhoneField',
+  components: { CMaskedTextField },
+  props: {
+    /** A custom data-test attribute for the input. */
+    dataTest: { type: String, default: 'phone-field' },
+    /** A unique id for the input. */
+    id: { type: String as PropType<string | undefined>, default: undefined },
+    /** The input's label. */
+    label: { type: String as PropType<string | null>, default: null },
+    /** The input's placeholder. */
+    placeholder: { type: String, default: '' },
+    /** Additional validation rules. */
+    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    /** The value of the input. */
+    value: { type: String, default: '' },
+  },
+  setup(_, { expose }) {
+    const { t } = useTranslation();
+
+    const defaultRules = computed(() => {
+      const errorMessage = t('Please enter a valid {inputLabel}', {
+        inputLabel: t('phone number'),
+      });
+      return [minLengthRule(10, errorMessage)];
+    });
+
+    const { field } = useFocusableField(expose);
+
+    return { defaultRules, field };
+  },
+});
+</script>