@designcrowd/library.brand-page 5.17.27 → 5.17.28-ast-padding

package/src/brand-page/components/background-shape/BackgroundShape.vue

@@ -1,7 +1,16 @@
 <template>
-  <div data-component="background-shape" class="c-shape-background">
+  <div
+    v-if="objectUrl"
+    data-component="background-shape"
+    class="c-shape-background"
+  >
     <div :style="backgroundShapesStyle" class="c-shape c-shape-object">
-      <object class="tw-w-full tw-h-full" :data="objectUrl" />
+      <img
+        class="tw-w-full tw-h-full"
+        :src="objectUrl"
+        alt=""
+        aria-hidden="true"
+      />
     </div>
   </div>
 </template>
@@ -14,16 +23,10 @@ export default {
 </script>
 <style scoped>
 .c-shape-background {
-  transform: translate3d(0, 0, 0);
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
-}
-
-.template-preview .c-shape-background,
-.device-wrapper .c-shape-background {
   height: 100%;
 }
 

package/src/brand-page/components/booking-section/BookingSection.vue

@@ -1,8 +1,8 @@
 <template>
   <section data-component="booking-section">
     <div
-      class="tw-relative tw-px-6 tw-py-8"
-      :style="viewModel.backgroundStyle"
+      class="tw-relative tw-px-6"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <div
@@ -45,7 +45,11 @@ import type {
   ButtonViewModel,
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText, escapeContentText } from '@brand-page/utils';
+import {
+  getRenderText,
+  escapeContentText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { hasValidButton as shouldShowButtonUtil } from '../../../utils/validator.util';
 import Button from '../button/Button.vue';
@@ -71,6 +75,10 @@ const props = defineProps({
   },
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const renderText = computed((): string => {
   if (!props.viewModel.description) {
     return '';

package/src/brand-page/components/contact-form/ContactForm.vue

@@ -38,7 +38,7 @@
             :text-style="viewModel.descriptionStyle"
             :text="renderText"
             element="div"
-            class="tw-text-center tw-mb-2 tw-text-base"
+            class="tw-mb-2 tw-text-base"
           />
           <div v-if="!isSubmitting">
             <div
@@ -102,7 +102,7 @@
             v-if="viewModel.successMessage"
             :text="renderSuccessText"
             element="p"
-            :class="'tw-text-center tw-font-bold tw-my-0.5'"
+            :class="'tw-my-0.5'"
           />
         </div>
       </Collapsible>
@@ -124,15 +124,15 @@
               v-if="viewModel.title"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
-              element="div"
-              class="tw-text-center tw-mb-4 tw-text-base"
+              element="h1"
+              class="tw-mb-4 tw-text-base"
             />
             <TextWrapper
               v-if="renderText"
               :text-style="viewModel.descriptionStyle"
               :text="renderText"
               element="div"
-              class="tw-text-center tw-mb-4 tw-text-base"
+              class="tw-mb-4 tw-text-base"
             />
             <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
               <div
@@ -203,7 +203,7 @@
               v-if="viewModel.successMessage"
               :text="renderSuccessText"
               element="p"
-              :class="'tw-text-center tw-font-bold tw-my-0.5'"
+              :class="'tw-my-0.5'"
             />
           </div>
         </div>
@@ -224,15 +224,15 @@
               v-if="viewModel.title"
               :text-style="viewModel.titleStyle"
               :text="viewModel.title"
-              element="div"
-              class="tw-text-center tw-mb-4 tw-text-base"
+              element="h1"
+              class="tw-mb-4 tw-text-base"
             />
             <TextWrapper
               v-if="renderText"
               :text-style="viewModel.descriptionStyle"
               :text="renderText"
               element="div"
-              class="tw-text-center tw-mb-4 tw-text-base"
+              class="tw-mb-4 tw-text-base"
             />
           </div>
           <form
@@ -317,7 +317,7 @@
             v-if="viewModel.successMessage"
             :text="renderSuccessText"
             element="p"
-            :class="'tw-text-center tw-font-bold tw-my-0.5'"
+            :class="'tw-my-0.5'"
           />
         </div>
       </div>
@@ -358,7 +358,7 @@
                   v-if="viewModel.title && !isSubmitting"
                   :text-style="viewModel.titleStyle"
                   :text="viewModel.title"
-                  element="div"
+                  element="h1"
                   class="tw-w-full tw-mb-2"
                 />
                 <TextWrapper
@@ -366,7 +366,7 @@
                   :text-style="viewModel.descriptionStyle"
                   :text="renderText"
                   element="div"
-                  class="tw-text-center tw-mb-4 tw-text-base"
+                  class="tw-mb-4 tw-text-base"
                 />
                 <form @submit.prevent="submitContactForm">
                   <div
@@ -443,7 +443,7 @@
                   v-if="viewModel.successMessage"
                   :text="renderSuccessText"
                   element="p"
-                  :class="'tw-text-center tw-font-bold tw-my-0.5'"
+                  :class="'tw-my-0.5'"
                 />
               </div>
             </div>

package/src/brand-page/components/image-gallery/ImageGallery.mixin.ts

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { ImageGalleryViewModel } from '@brand-page/view-models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import ComponentCommonMixin from '../mixins/component-common.mixin';
 import ImageModalMixin from '../mixins/image-modal.mixin';
 import type { ImageGalleryImageClickPayload } from './models';
@@ -34,6 +35,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     getContainerStyle(): BrandPageCssStyle {
       if (this.galleryType === 'carousel') {
         const maxWidth = this.containerClientWidth

package/src/brand-page/components/image-gallery/ImageGallery.vue

@@ -10,7 +10,7 @@
       'c-carousel-full-width':
         viewModel.isFullWidth && isPreview && galleryType === 'carousel',
     }"
-    :style="getContainerStyle"
+    :style="[getContainerStyle, contentPaddingStyle]"
   >
     <component
       :is="galleryType"

package/src/brand-page/components/mailing-list/MailingList.mixin.ts

@@ -2,7 +2,10 @@ import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { MailingListViewModel } from '@brand-page/view-models';
 import brandPageClient from '../../clients/brand-page.client';
-import { getEmailValidationError } from '@brand-page/utils';
+import {
+  getEmailValidationError,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 import {
   contentSettingsTr,
@@ -61,6 +64,10 @@ export default defineComponent({
     }
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasNameError(): boolean {
       return !!this.nameError;
     },

package/src/brand-page/components/mailing-list/MailingList.vue

@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section :style="contentPaddingStyle">
     <div
       v-if="show"
       class="tw-p-4"

package/src/brand-page/components/map/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div data-component="map">
+  <div data-component="map" :style="contentPaddingStyle">
     <div
       class="c-map"
       :class="{
@@ -22,6 +22,7 @@ import Placeholder from '../placeholder/Placeholder.vue';
 import type { MapViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 import { mapTr } from '@src/composables/useTranslate';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 interface Props {
@@ -37,6 +38,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const placeId = computed(() => props.viewModel?.address?.placeId);
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
 </script>
 <style scoped>
 .c-map {

package/src/brand-page/components/media/Shape.mixin.ts

@@ -120,6 +120,12 @@ export default defineComponent({
       }
     }
   },
+  beforeUnmount() {
+    if (this.svgDataObjectUrl) {
+      URL.revokeObjectURL(this.svgDataObjectUrl);
+      this.svgDataObjectUrl = '';
+    }
+  },
   methods: {
     applySvgAttributes(svgData: string): string {
       const attributes: string[] = [];

package/src/brand-page/components/media/Shape.vue

@@ -1,12 +1,10 @@
 <template>
-  <div data-component="shape" :class="imgClasses">
+  <div v-if="objectUrl" data-component="shape" :class="imgClasses">
     <div
       class="c-shape c-shape-object"
       :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
     >
-      <object :style="objectStyle" :data="objectUrl" />
-      <!-- Div overlay over object element so that clicks are registered on current dom rather than iframe in side object -->
-      <div :style="objectStyle" class="tw-absolute tw-pointer-events-none" />
+      <img :style="objectStyle" :src="objectUrl" alt="" aria-hidden="true" />
     </div>
   </div>
 </template>

package/src/brand-page/components/page/Page.vue

@@ -33,11 +33,17 @@
     "
   >
     <div class="brand-page">
-      <BackgroundShape
-        v-for="(shape, i) in backgroundShapes"
-        :key="`${shape.name}-${i}`"
-        :view-model="shape"
-      />
+      <div
+        v-if="backgroundShapes.length"
+        class="brand-page__background-shapes-layer"
+        aria-hidden="true"
+      >
+        <BackgroundShape
+          v-for="(shape, i) in backgroundShapes"
+          :key="`${shape.name}-${i}`"
+          :view-model="shape"
+        />
+      </div>
       <div
         id="preview-page-scroll"
         class="brand-page__inner tw-overflow-x-hidden tw-overflow-y-auto"
@@ -348,6 +354,22 @@ body {
   @apply tw-h-full tw-box-border tw-flex tw-flex-col;
 }
 
+.brand-page__background-shapes-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  pointer-events: none;
+  transform: translate3d(0, 0, 0);
+  contain: layout paint;
+}
+
+.template-preview .brand-page__background-shapes-layer,
+.device-wrapper .brand-page__background-shapes-layer {
+  height: 100%;
+}
+
 .brand-page__inner--default {
   @apply tw-h-full tw-flex tw-flex-col tw-relative tw-z-10;
 }

package/src/brand-page/components/payment/request-payment/RequestPayment.mixin.ts

@@ -14,6 +14,7 @@ import type { RequestPaymentViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
 import { DEFAULT_CURRENCY_SYMBOL } from '../../../constants';
 import { addOpacityToHex } from '../../../utils/color.util';
+import { contentPaddingStyle as toContentPaddingStyle } from '../../../utils';
 import { RGBAtoHex } from '@utils/helpers';
 
 const MAX_CUSTOM_REQUEST_CHARS = 500;
@@ -42,6 +43,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     isCustomerRequestDetailsValid(): boolean {
       return (
         !this.viewModel.requestPaymentConfig.isCustomerRequestDetailsEnabled ||

package/src/brand-page/components/payment/request-payment/RequestPayment.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     data-component="request-payment"
+    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

package/src/brand-page/components/payment/support-me/SupportMe.mixin.ts

@@ -4,7 +4,10 @@ import { SUPPORT_ME_CUSTOM_PRODUCT_NAME } from '../../../constants';
 import type { BrandPageContext, PaymentOption } from '../../../models';
 import type { SupportMeViewModel } from '../../../view-models';
 import type { PaymentRequestDetails } from '../Payment.mixin';
-import { isPaymentAmountValid } from '../../../utils';
+import {
+  isPaymentAmountValid,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '../../../utils';
 import {
   DEFAULT_CURRENCY_SYMBOL,
   DEFAULT_CURRENCY_CODE,
@@ -33,6 +36,10 @@ export default defineComponent({
     };
   },
   computed: {
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     isCustomAmountFieldVisible(): boolean {
       return this.viewModel.supportMeConfig.paymentOptions.some(
         (o) => o.name === SUPPORT_ME_CUSTOM_PRODUCT_NAME,

package/src/brand-page/components/payment/support-me/SupportMe.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     data-component="support-me"
+    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

package/src/brand-page/components/placeholder/Placeholder.vue

@@ -5,15 +5,20 @@
     class="c-placeholder"
     :style="style"
   >
-    <div class="c-placeholder__content" :style="cssProps" />
+    <svg
+      class="c-placeholder__icon"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <rect class="c-placeholder__fill" width="100" height="100" />
+      <line x1="0" y1="0" x2="100" y2="100" />
+      <line x1="100" y1="0" x2="0" y2="100" />
+    </svg>
   </div>
 </template>
 <script>
-import debounce from 'lodash.debounce';
-const RESIZE_DEBOUNCE_WAIT_MS = 5;
-
 export default {
-  components: {},
   props: {
     minHeight: {
       type: [Number, Boolean],
@@ -26,48 +31,14 @@ export default {
       required: false,
     },
   },
-  data() {
-    return {
-      height: 0,
-      width: 0,
-      debouncedOnResize: undefined,
-    };
-  },
   computed: {
     style() {
       return {
         minHeight: this.minHeight ? `${this.minHeight}px` : undefined,
         minWidth: this.minWidth ? `${this.minWidth}px` : undefined,
-        '--height': `${this.height}px`,
-        '--width': `${this.width}px`,
-      };
-    },
-    cssProps() {
-      return {
-        '--height': `${this.height}px`,
-        '--width': `${this.width}px`,
       };
     },
   },
-  mounted() {
-    this.debouncedOnResize = debounce(this.onResize, RESIZE_DEBOUNCE_WAIT_MS);
-
-    if (this.$refs.placeholder) {
-      new ResizeObserver(this.debouncedOnResize).observe(
-        this.$refs.placeholder,
-      );
-    }
-
-    this.onResize();
-  },
-  methods: {
-    onResize() {
-      if (this.$refs.placeholder) {
-        this.height = this.$refs.placeholder.clientHeight;
-        this.width = this.$refs.placeholder.clientWidth;
-      }
-    },
-  },
 };
 </script>
 <style scoped>
@@ -76,73 +47,41 @@ export default {
   display: block;
 }
 
-.c-placeholder__content {
+/*
+ * Provide a positioning context for the absolute SVG icon — but only when the
+ * caller hasn't already positioned the placeholder itself. Some callers pass
+ * `tw-absolute` (e.g. the big-image banner uses it to fill the banner as a
+ * background); a blanket `position: relative` here would out-specify that
+ * utility and break the layout. An already-positioned placeholder is its own
+ * containing block, so the SVG fills it either way.
+ */
+.c-placeholder:not(.tw-absolute):not(.tw-fixed) {
   position: relative;
-  display: block;
-}
-.c-placeholder__content::after {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--height) / 2);
-  --border-left: calc(var(--n-size) * 2 + var(--width) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  top: calc(var(--size) * 2);
-  left: var(--size);
-  content: ' ';
-  border-top: var(--border) solid transparent;
-  border-bottom: var(--border) solid transparent;
-  border-left: var(--border-left) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
-}
-.c-placeholder__content::before {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--height) / 2);
-  --border-right: calc(var(--n-size) * 2 + var(--width) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  top: calc(var(--size) * 2);
-  right: var(--size);
-  content: ' ';
-  border-top: var(--border) solid transparent;
-  border-bottom: var(--border) solid transparent;
-  border-right: var(--border-right) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
 }
 
-.c-placeholder::after {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--width) / 2);
-  --border-right: calc(var(--n-size) * 2 + var(--height) / 2);
-  --tw-border-opacity: 0.5;
+/*
+ * The X icon is drawn as an SVG with preserveAspectRatio="none" so the
+ * diagonals always run corner-to-corner regardless of the box aspect ratio
+ * (square thumbnails through full-width 2/1 banners). vector-effect keeps the
+ * stroke an even width while the viewBox is stretched non-uniformly. The SVG
+ * is absolutely positioned so it fills the box sized by min-height / the
+ * caller's aspect-ratio class rather than driving the height itself.
+ */
+.c-placeholder__icon {
   position: absolute;
-  left: calc(var(--size) * 2);
-  top: var(--size);
-  content: ' ';
-  border-left: var(--border) solid transparent;
-  border-right: var(--border) solid transparent;
-  border-top: var(--border-right) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
 }
-.c-placeholder::before {
-  --size: 1px;
-  --n-size: -1px;
-  --border: calc(var(--n-size) * 2 + var(--width) / 2);
-  --border-bottom: calc(var(--n-size) * 2 + var(--height) / 2);
-  --tw-border-opacity: 0.5;
-  position: absolute;
-  left: calc(var(--size) * 2);
-  bottom: var(--size);
-  content: ' ';
-  border-left: var(--border) solid transparent;
-  border-right: var(--border) solid transparent;
-  border-bottom: var(--border-bottom) solid
-    rgb(208 208 208 / var(--tw-border-opacity));
+
+.c-placeholder__fill {
+  fill: rgb(208 208 208 / 0.5);
 }
 
-.c-placeholder__content > * {
-  padding-bottom: 0.5rem;
+.c-placeholder__icon line {
+  stroke: #fff;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
 }
 </style>

package/src/brand-page/components/social-links/SocialLinks.vue

@@ -1,11 +1,10 @@
 <template>
   <div data-component="social-links">
     <div
-      class="tw-pb-8"
       :class="{
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="containerStyles"
+      :style="[containerStyles, contentPaddingStyle]"
       style="container-type: inline-size"
     >
       <TextWrapper
@@ -14,7 +13,7 @@
         :text="title"
         element="h1"
         :class="textAlignClass"
-        class="tw-py-8"
+        class="tw-pb-8"
       />
       <SocialLinksItems
         :id="id"
@@ -34,6 +33,7 @@ import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { SocialLinksViewModel } from 'src/brand-page/view-models';
 import { SOCIAL_LINKS_ICON_DISPLAY_STYLES } from '@brand-page/models';
 import type { BrandPageContext, LinksItem } from '@brand-page/models';
+import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 import { computed } from 'vue';
 
 const props = withDefaults(
@@ -51,6 +51,10 @@ const containerStyles = computed((): BrandPageCssStyle => {
   return props.viewModel.backgroundStyles || {};
 });
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const iconStyle = computed((): BrandPageCssStyle => {
   return props.viewModel.iconFillStyles || {};
 });

package/src/brand-page/components/text/Text.vue

@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="!context.isBrandSite"
-      :style="containerStyle"
+      :style="[containerStyle, contentPaddingStyle]"
       :class="{
         [containerClasses]: true,
       }"
@@ -15,9 +15,9 @@
         data-test-tag="text-content-text"
       />
     </div>
-    <div v-else :style="containerStyle">
+    <div v-else :style="[containerStyle, contentPaddingStyle]">
       <div
-        class="c-text-container tw-py-3 tw-px-6 grid-container tw-gap-4"
+        class="c-text-container tw-px-6 grid-container tw-gap-4"
         :class="{
           [containerClasses]: true,
           [gridClass]: context.isBrandSite,
@@ -41,7 +41,10 @@
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { computed } from 'vue';
 import type { TextViewModel } from '@brand-page/view-models';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 
 interface Props {
@@ -51,6 +54,10 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
 const containerStyle = computed<any>(() => {
   const containerStyles = {} as BrandPageCssStyle;
 
@@ -83,7 +90,7 @@ const containerClasses = computed(() => {
     return '';
   }
 
-  return 'tw-py-3 tw-px-6';
+  return 'tw-px-6';
 });
 
 const renderText = computed(() => {