@designcrowd/fe-shared-lib 1.0.17 → 1.0.18

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.stories.js

@@ -1,58 +1,58 @@
-import Events from '../../constants/event-constants';
-import UploadYourLogoDropzone from './UploadYourLogoDropzone.vue';
-
-export default {
-  title: 'Components/UploadYourLogoDropzone',
-  component: UploadYourLogoDropzone,
-};
-
-export const Sample = () => {
-  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
-    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
-  });
-
-  return {
-    components: {
-      UploadYourLogoDropzone,
-    },
-    template: `
-      <UploadYourLogoDropzone />
-    `,
-  };
-};
-
-export const SampleExternallyInvoked = () => {
-  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
-    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
-  });
-
-  return {
-    components: {
-      UploadYourLogoDropzone,
-    },
-    template: `
-      <div>
-        <UploadYourLogoDropzone
-          :should-open-upload-when-mounted="true" />
-      </div>
-    `,
-  };
-};
-
-export const SampleSearchbar = () => {
-  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
-    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
-  });
-
-  return {
-    components: {
-      UploadYourLogoDropzone,
-    },
-    template: `
-      <div>
-        <UploadYourLogoDropzone
-          :should-use-compact-layout="true" />
-      </div>
-    `,
-  };
-};
+import Events from '../../constants/event-constants';
+import UploadYourLogoDropzone from './UploadYourLogoDropzone.vue';
+
+export default {
+  title: 'Components/UploadYourLogoDropzone',
+  component: UploadYourLogoDropzone,
+};
+
+export const Sample = () => {
+  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
+  });
+
+  return {
+    components: {
+      UploadYourLogoDropzone,
+    },
+    template: `
+      <UploadYourLogoDropzone />
+    `,
+  };
+};
+
+export const SampleExternallyInvoked = () => {
+  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
+  });
+
+  return {
+    components: {
+      UploadYourLogoDropzone,
+    },
+    template: `
+      <div>
+        <UploadYourLogoDropzone
+          :should-open-upload-when-mounted="true" />
+      </div>
+    `,
+  };
+};
+
+export const SampleSearchbar = () => {
+  window.addEventListener(Events.BeginUploadLogoExperience, (e) => {
+    console.log('BEGIN_UPLOAD_LOGO_EXPERIENCE', e);
+  });
+
+  return {
+    components: {
+      UploadYourLogoDropzone,
+    },
+    template: `
+      <div>
+        <UploadYourLogoDropzone
+          :should-use-compact-layout="true" />
+      </div>
+    `,
+  };
+};

package/src/experiences/components/UploadYourLogoDropzone/UploadYourLogoDropzone.vue

@@ -1,278 +1,278 @@
-<template>
-  <dropzone
-    :id="`upload-your-logo-dropzone-${_uid}`"
-    ref="dropzone"
-    class="c-upload-your-logo tw-group tw-transition-colors tw-duration-200 tw-flex tw-justify-center tw-flex-col tw-cursor-pointer"
-    :class="{
-      'tw-items-center tw-py-8': !shouldUseCompactLayout,
-      'tw-w-full tw-bg-grayscale-400 tw-flex tw-items-center tw-justify-center tw-flex-col tw-cursor-pointer': isModal,
-      'hover:tw-bg-grayscale-200 tw-bg-white tw-border tw-border-dashed tw-border-secondary-300 tw-rounded': !isModal,
-      'md:tw-py-2 md:tw-pr-2 md:tw-items-start': useLandscapeTile,
-      'tw-py-4 md:tw-py-2 tw-pr-2 tw-items-start': shouldUseCompactLayout,
-    }"
-    :options="options"
-    :include-styling="false"
-    :use-custom-slot="true"
-    data-test-byo-upload-dropzone
-    @vdropzone-success="onUploadSuccess"
-  >
-    <div
-      class="tw-px-2"
-      :class="{
-        'tw-text-center': !shouldUseCompactLayout,
-        'md:tw-flex md:tw-flex-row md:tw-items-center md:tw-text-left md:tw-text-xs md:tw-px-4': useLandscapeTile,
-        'md:tw-px-8': smallLayout && !useLandscapeTile,
-        'tw-flex tw-flex-row tw-items-center tw-text-left tw-text-xs tw-px-4': shouldUseCompactLayout,
-      }"
-    >
-      <div
-        class="group-hover:tw-text-info-500 tw-flex tw-items-center tw-justify-center tw-mx-auto"
-        :class="{
-          'tw-w-full tw-mb-2': !shouldUseCompactLayout,
-          'tw-text-secondary-500': !isDesignCom,
-          'tw-text-secondary-400': isDesignCom,
-          'md:tw-mb-0': useLandscapeTile,
-          'md:tw-w-10 md:tw-h-10': smallLayout,
-          'tw-w-8 tw-h-8': shouldUseCompactLayout,
-        }"
-      >
-        <svg
-          class="tw-fill-current tw-w-24 tw-h-24 tw-transition-colors tw-duration-200"
-          viewBox="0 0 100 100"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M61.393 5c.5922 0 1.1635.261 1.5802.6956l22.3903 23.2608c.373.4133.6365.9565.6365 1.5216v52.7172C86 89.6737 80.6002 95 74.0585 95h-48.117C19.3998 95 14 89.6737 14 83.1952v-66.391C14 10.3262 19.3998 5 25.9415 5zm-2.1736 4.3478H25.9415c-4.1268 0-7.5512 3.3914-7.5512 7.4563v66.391c0 4.0877 3.4466 7.457 7.5512 7.457h48.117c4.1268 0 7.5512-3.3693 7.5512-7.457V32.6087H68.8563c-5.334 0-9.6369-4.2393-9.6369-9.5217V9.348zM67.8124 76C69.0252 76 70 76.8996 70 78c0 1.0998-.9748 2-2.1657 2H32.1657C30.9747 80 30 79.0998 30 78c0-1.1004.9748-2 2.1657-2zM50 35c.6121 0 1.1807.264 1.5965.7037l12.8169 13.8331c.831.8794.7654 2.2652-.1099 3.1009-.4152.396-.9623.5939-1.4873.5939-.59 0-1.1592-.2424-1.5965-.7037l-9.0111-9.743v24.0159c0 1.2093-.9837 2.1992-2.1871 2.1992-1.2028 0-2.1872-.9899-2.1872-2.1992v-24.016l-9.011 9.7431c-.8311.8794-2.2086.9454-3.1274.1098-.8746-.8141-.9402-2.2215-.1092-3.1009l12.8168-13.8331C48.8187 35.264 49.3873 35 50 35zm13.6097-22.326v10.413c0 2.8694 2.349 5.1738 5.2466 5.1738h9.7464L63.6097 12.674z"
-            fill-rule="nonzero"
-          />
-        </svg>
-      </div>
-      <div
-        :class="{
-          'md:tw-flex md:tw-flex-col md:tw-ml-2': useLandscapeTile,
-          'tw-flex tw-flex-col tw-ml-4 md:tw-ml-2': shouldUseCompactLayout,
-        }"
-      >
-        <p
-          v-if="!isModal"
-          class="tw-font-bold tw-text-black tw-text-lg"
-          :class="{ 'tw-mb-2': !shouldUseCompactLayout, 'md:tw-text-sm md:tw-mb-0': smallLayout, 'tw-text-sm tw-mb-0': shouldUseCompactLayout }"
-        >
-          Upload your logo
-        </p>
-
-        <p
-          class="tw-text-secondary-600 tw-text-sm"
-          :class="{
-            'tw-mb-0': !isDesignCom,
-            'tw-mb-3': isDesignCom,
-            'md:tw-hidden': shouldUseCompactLayout
-          }"
-        >
-          Drop your file here or
-          <span class="tw-text-info-500">click to upload</span>
-        </p>
-
-        <p
-          v-if="!smallLayout && !shouldUseCompactLayout"
-          class="tw-text-sm"
-          :class="{
-            'tw-text-secondary-600': !isDesignCom,
-            'tw-text-secondary-400': isDesignCom,
-          }"
-        >
-          We accept PNG, JPG, SVG or EPS files up to 25MB
-        </p>
-      </div>
-    </div>
-  </dropzone>
-</template>
-
-<script>
-import Dropzone from 'dropzone-vue3';
-import Events, { TRIGGER_TYPE } from '../../constants/event-constants';
-import RegoSource from '../../constants/rego-source-constants';
-
-const ACCEPTED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/svg+xml', 'application/postscript'];
-
-const ACCEPTED_FILE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'svg', 'eps'];
-const UNSUPPORTED_FILE_ERROR_MSG = "You can't upload files of this type.";
-
-export default {
-  components: {
-    Dropzone,
-  },
-  props: {
-    isUserAuthenticated: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    trackingData: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    shouldOpenUploadWhenMounted: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    isModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    useLandscapeTile: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    smallLayout: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    shouldUseCompactLayout: {
-      type: Boolean,
-      default: false,
-    },
-    isDesignCom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    assetType: {
-      type: Number,
-      default: null,
-    },
-    templateTypeFriendlyName: {
-      type: String,
-      default: null,
-    },
-  },
-  data() {
-    const self = this;
-
-    return {
-      options: {
-        url: '#',
-        autoProcessQueue: false,
-        maxFiles: 1,
-        uploadMultiple: false,
-        acceptedFiles: ACCEPTED_MIME_TYPES.join(','),
-        accept(file) {
-          const extension = file.name.split('.').pop();
-
-          if (ACCEPTED_FILE_EXTENSIONS.indexOf(extension) < 0) {
-            self.displayError(UNSUPPORTED_FILE_ERROR_MSG);
-            return;
-          }
-
-          const reader = new FileReader();
-          const dropzone = this;
-
-          reader.addEventListener('loadend', () => {
-            // eslint-disable-next-line no-param-reassign
-            file.status = 'success';
-            dropzone.emit('success', file);
-            dropzone.emit('complete', file);
-          });
-
-          reader.readAsText(file);
-        },
-        init() {
-          const dropzone = this;
-          dropzone.hiddenFileInput.addEventListener('click', (event) => {
-            if (!self.isUserAuthenticated) {
-              event.preventDefault();
-              self.showLoginModal();
-            }
-          });
-        },
-      },
-    };
-  },
-  mounted() {
-    if (window) {
-      if (this.shouldOpenUploadWhenMounted) {
-        if (this.$refs.dropzone && this.$refs.dropzone?.$refs.dropzoneElement) {
-          // eslint-disable-next-line no-unused-expressions
-          this.$refs?.dropzone?.$refs?.dropzoneElement.click();
-        }
-      }
-    }
-  },
-  methods: {
-    pushTrackingData() {
-      if (this.trackingData) {
-        window.dataLayer = window.dataLayer || [];
-        window.dataLayer.push(this.trackingData);
-      }
-    },
-    /**
-     * @function onUploadSuccess
-     * @param {file} File
-     * Fires the event to start the byo logo experience
-     */
-    onUploadSuccess(file) {
-      this.$refs.dropzone.removeAllFiles();
-      this.pushTrackingData();
-      if (!this.isUserAuthenticated) {
-        this.showLoginModal();
-        return;
-      }
-
-      this.$emit('on-upload-success', file);
-    },
-    showLoginModal() {
-      this.$refs.dropzone.removeAllFiles();
-
-      this.$emit('on-login-modal-open', RegoSource.UploadUserLogo);
-
-      window.dispatchEvent(
-        new CustomEvent(Events.ShowLoginModal, {
-          detail: {
-            isSave: true,
-            regoSource: RegoSource.UploadUserLogo,
-            emailCapturedCallback: this.handleEmailCapturedForLogoUpload,
-            shouldReloadPageOnSuccess: false,
-            assetType: this.assetType,
-            templateTypeName: this.templateTypeFriendlyName,
-            userTriggered: TRIGGER_TYPE.Automatic,
-          },
-        }),
-      );
-    },
-    handleEmailCapturedForLogoUpload() {
-      this.$emit('logo-dropzone-login-callback');
-    },
-    /**
-     * @function displayError
-     * @paramm {msg} String
-     * Displays a custom error message in the Dropzone error region
-     */
-    displayError(msg) {
-      if (this.$refs?.dropzone?.$refs?.dropzoneElement) {
-        const $errorContainer = this.$refs.dropzone.$refs.dropzoneElement.querySelector('.dz-error-message');
-        if ($errorContainer) {
-          $errorContainer.innerText = msg;
-        }
-      }
-    },
-  },
-};
-</script>
-<style>
-.c-upload-your-logo .dz-success-mark,
-.c-upload-your-logo .dz-error-mark,
-.c-upload-your-logo .dz-details {
-  display: none;
-}
-
-.c-upload-your-logo .dz-error-message {
-  color: #f21b3f;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-</style>
+<template>
+  <dropzone
+    :id="`upload-your-logo-dropzone-${_uid}`"
+    ref="dropzone"
+    class="c-upload-your-logo tw-group tw-transition-colors tw-duration-200 tw-flex tw-justify-center tw-flex-col tw-cursor-pointer"
+    :class="{
+      'tw-items-center tw-py-8': !shouldUseCompactLayout,
+      'tw-w-full tw-bg-grayscale-400 tw-flex tw-items-center tw-justify-center tw-flex-col tw-cursor-pointer': isModal,
+      'hover:tw-bg-grayscale-200 tw-bg-white tw-border tw-border-dashed tw-border-secondary-300 tw-rounded': !isModal,
+      'md:tw-py-2 md:tw-pr-2 md:tw-items-start': useLandscapeTile,
+      'tw-py-4 md:tw-py-2 tw-pr-2 tw-items-start': shouldUseCompactLayout,
+    }"
+    :options="options"
+    :include-styling="false"
+    :use-custom-slot="true"
+    data-test-byo-upload-dropzone
+    @vdropzone-success="onUploadSuccess"
+  >
+    <div
+      class="tw-px-2"
+      :class="{
+        'tw-text-center': !shouldUseCompactLayout,
+        'md:tw-flex md:tw-flex-row md:tw-items-center md:tw-text-left md:tw-text-xs md:tw-px-4': useLandscapeTile,
+        'md:tw-px-8': smallLayout && !useLandscapeTile,
+        'tw-flex tw-flex-row tw-items-center tw-text-left tw-text-xs tw-px-4': shouldUseCompactLayout,
+      }"
+    >
+      <div
+        class="group-hover:tw-text-info-500 tw-flex tw-items-center tw-justify-center tw-mx-auto"
+        :class="{
+          'tw-w-full tw-mb-2': !shouldUseCompactLayout,
+          'tw-text-secondary-500': !isDesignCom,
+          'tw-text-secondary-400': isDesignCom,
+          'md:tw-mb-0': useLandscapeTile,
+          'md:tw-w-10 md:tw-h-10': smallLayout,
+          'tw-w-8 tw-h-8': shouldUseCompactLayout,
+        }"
+      >
+        <svg
+          class="tw-fill-current tw-w-24 tw-h-24 tw-transition-colors tw-duration-200"
+          viewBox="0 0 100 100"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M61.393 5c.5922 0 1.1635.261 1.5802.6956l22.3903 23.2608c.373.4133.6365.9565.6365 1.5216v52.7172C86 89.6737 80.6002 95 74.0585 95h-48.117C19.3998 95 14 89.6737 14 83.1952v-66.391C14 10.3262 19.3998 5 25.9415 5zm-2.1736 4.3478H25.9415c-4.1268 0-7.5512 3.3914-7.5512 7.4563v66.391c0 4.0877 3.4466 7.457 7.5512 7.457h48.117c4.1268 0 7.5512-3.3693 7.5512-7.457V32.6087H68.8563c-5.334 0-9.6369-4.2393-9.6369-9.5217V9.348zM67.8124 76C69.0252 76 70 76.8996 70 78c0 1.0998-.9748 2-2.1657 2H32.1657C30.9747 80 30 79.0998 30 78c0-1.1004.9748-2 2.1657-2zM50 35c.6121 0 1.1807.264 1.5965.7037l12.8169 13.8331c.831.8794.7654 2.2652-.1099 3.1009-.4152.396-.9623.5939-1.4873.5939-.59 0-1.1592-.2424-1.5965-.7037l-9.0111-9.743v24.0159c0 1.2093-.9837 2.1992-2.1871 2.1992-1.2028 0-2.1872-.9899-2.1872-2.1992v-24.016l-9.011 9.7431c-.8311.8794-2.2086.9454-3.1274.1098-.8746-.8141-.9402-2.2215-.1092-3.1009l12.8168-13.8331C48.8187 35.264 49.3873 35 50 35zm13.6097-22.326v10.413c0 2.8694 2.349 5.1738 5.2466 5.1738h9.7464L63.6097 12.674z"
+            fill-rule="nonzero"
+          />
+        </svg>
+      </div>
+      <div
+        :class="{
+          'md:tw-flex md:tw-flex-col md:tw-ml-2': useLandscapeTile,
+          'tw-flex tw-flex-col tw-ml-4 md:tw-ml-2': shouldUseCompactLayout,
+        }"
+      >
+        <p
+          v-if="!isModal"
+          class="tw-font-bold tw-text-black tw-text-lg"
+          :class="{ 'tw-mb-2': !shouldUseCompactLayout, 'md:tw-text-sm md:tw-mb-0': smallLayout, 'tw-text-sm tw-mb-0': shouldUseCompactLayout }"
+        >
+          Upload your logo
+        </p>
+
+        <p
+          class="tw-text-secondary-600 tw-text-sm"
+          :class="{
+            'tw-mb-0': !isDesignCom,
+            'tw-mb-3': isDesignCom,
+            'md:tw-hidden': shouldUseCompactLayout
+          }"
+        >
+          Drop your file here or
+          <span class="tw-text-info-500">click to upload</span>
+        </p>
+
+        <p
+          v-if="!smallLayout && !shouldUseCompactLayout"
+          class="tw-text-sm"
+          :class="{
+            'tw-text-secondary-600': !isDesignCom,
+            'tw-text-secondary-400': isDesignCom,
+          }"
+        >
+          We accept PNG, JPG, SVG or EPS files up to 25MB
+        </p>
+      </div>
+    </div>
+  </dropzone>
+</template>
+
+<script>
+import Dropzone from 'dropzone-vue3';
+import Events, { TRIGGER_TYPE } from '../../constants/event-constants';
+import RegoSource from '../../constants/rego-source-constants';
+
+const ACCEPTED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/svg+xml', 'application/postscript'];
+
+const ACCEPTED_FILE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'svg', 'eps'];
+const UNSUPPORTED_FILE_ERROR_MSG = "You can't upload files of this type.";
+
+export default {
+  components: {
+    Dropzone,
+  },
+  props: {
+    isUserAuthenticated: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    trackingData: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    shouldOpenUploadWhenMounted: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    isModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    useLandscapeTile: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    smallLayout: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    shouldUseCompactLayout: {
+      type: Boolean,
+      default: false,
+    },
+    isDesignCom: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    assetType: {
+      type: Number,
+      default: null,
+    },
+    templateTypeFriendlyName: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    const self = this;
+
+    return {
+      options: {
+        url: '#',
+        autoProcessQueue: false,
+        maxFiles: 1,
+        uploadMultiple: false,
+        acceptedFiles: ACCEPTED_MIME_TYPES.join(','),
+        accept(file) {
+          const extension = file.name.split('.').pop();
+
+          if (ACCEPTED_FILE_EXTENSIONS.indexOf(extension) < 0) {
+            self.displayError(UNSUPPORTED_FILE_ERROR_MSG);
+            return;
+          }
+
+          const reader = new FileReader();
+          const dropzone = this;
+
+          reader.addEventListener('loadend', () => {
+            // eslint-disable-next-line no-param-reassign
+            file.status = 'success';
+            dropzone.emit('success', file);
+            dropzone.emit('complete', file);
+          });
+
+          reader.readAsText(file);
+        },
+        init() {
+          const dropzone = this;
+          dropzone.hiddenFileInput.addEventListener('click', (event) => {
+            if (!self.isUserAuthenticated) {
+              event.preventDefault();
+              self.showLoginModal();
+            }
+          });
+        },
+      },
+    };
+  },
+  mounted() {
+    if (window) {
+      if (this.shouldOpenUploadWhenMounted) {
+        if (this.$refs.dropzone && this.$refs.dropzone?.$refs.dropzoneElement) {
+          // eslint-disable-next-line no-unused-expressions
+          this.$refs?.dropzone?.$refs?.dropzoneElement.click();
+        }
+      }
+    }
+  },
+  methods: {
+    pushTrackingData() {
+      if (this.trackingData) {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push(this.trackingData);
+      }
+    },
+    /**
+     * @function onUploadSuccess
+     * @param {file} File
+     * Fires the event to start the byo logo experience
+     */
+    onUploadSuccess(file) {
+      this.$refs.dropzone.removeAllFiles();
+      this.pushTrackingData();
+      if (!this.isUserAuthenticated) {
+        this.showLoginModal();
+        return;
+      }
+
+      this.$emit('on-upload-success', file);
+    },
+    showLoginModal() {
+      this.$refs.dropzone.removeAllFiles();
+
+      this.$emit('on-login-modal-open', RegoSource.UploadUserLogo);
+
+      window.dispatchEvent(
+        new CustomEvent(Events.ShowLoginModal, {
+          detail: {
+            isSave: true,
+            regoSource: RegoSource.UploadUserLogo,
+            emailCapturedCallback: this.handleEmailCapturedForLogoUpload,
+            shouldReloadPageOnSuccess: false,
+            assetType: this.assetType,
+            templateTypeName: this.templateTypeFriendlyName,
+            userTriggered: TRIGGER_TYPE.Automatic,
+          },
+        }),
+      );
+    },
+    handleEmailCapturedForLogoUpload() {
+      this.$emit('logo-dropzone-login-callback');
+    },
+    /**
+     * @function displayError
+     * @paramm {msg} String
+     * Displays a custom error message in the Dropzone error region
+     */
+    displayError(msg) {
+      if (this.$refs?.dropzone?.$refs?.dropzoneElement) {
+        const $errorContainer = this.$refs.dropzone.$refs.dropzoneElement.querySelector('.dz-error-message');
+        if ($errorContainer) {
+          $errorContainer.innerText = msg;
+        }
+      }
+    },
+  },
+};
+</script>
+<style>
+.c-upload-your-logo .dz-success-mark,
+.c-upload-your-logo .dz-error-mark,
+.c-upload-your-logo .dz-details {
+  display: none;
+}
+
+.c-upload-your-logo .dz-error-message {
+  color: #f21b3f;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+</style>