@designcrowd/library.brand-page 5.18.9-ast-padding-2 → 5.18.9

package/src/brand-page/components/about-section/AboutSection.vue

@@ -7,10 +7,9 @@
     <div
       :class="{
         'about-container': context.isBrandSite,
-        'about-container--padding': !isFullImage,
+        'about-container--padding tw-py-10': !isFullImage,
         'mobile-about-container--padding': isFullImage,
       }"
-      :style="contentPaddingStyle"
     >
       <Media
         v-if="
@@ -104,10 +103,7 @@
 import { computed } from 'vue';
 import type { AboutSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import {
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getRenderText } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
@@ -127,10 +123,6 @@ const props = withDefaults(
   },
 );
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const isFullImage = computed(
   () =>
     props.viewModel.displayStyle === 'right-aligned-full-image' ||
@@ -209,6 +201,7 @@ const renderText = computed((): string => {
 .device-wrapper--mobile .mobile-about-container--padding {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
+  @apply tw-py-10;
 }
 .device-wrapper--mobile .text-grid-column {
   @apply container-grid-columns;
@@ -282,6 +275,7 @@ const renderText = computed((): string => {
   .mobile-about-container--padding {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
+    @apply tw-py-10;
   }
   .about-container :deep(.container-image) {
     aspect-ratio: 1/1;

package/src/brand-page/components/banner-section/BannerSection.vue

@@ -7,8 +7,9 @@
           viewModel.isBigImageType,
         'c_banner--with-image-overlay tw-flex tw-flex-col': isDividedContent,
         'tw-px-6': !isDividedContent,
+        'tw-py-8': !isDividedContent && !isStackedFullWidth,
       }"
-      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+      :style="viewModel.backgroundStyle"
       style="container-type: inline-size"
     >
       <Media
@@ -200,7 +201,7 @@
             <div
               class="!tw-text-center tw-flex tw-flex-col tw-gap-5"
               :class="{
-                'tw-px-6': isDividedContent,
+                'tw-px-6 tw-py-8': isDividedContent,
               }"
             >
               <TextWrapper
@@ -331,11 +332,7 @@ import type {
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 import { hasValidButton } from '../../../utils/validator.util';
-import {
-  getRenderText,
-  escapeContentText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import {
   ALIGN_CENTERED,
@@ -493,10 +490,6 @@ const layout = computed<BannerLayoutConfig>(
   () => BANNER_LAYOUTS[props.viewModel.displayStyle] ?? DEFAULT_LAYOUT,
 );
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const displayAlignClass = computed(() => layout.value.alignClass);
 const isHorizontalAligned = computed(() => !!layout.value.hasSideImage);
 const isDividedContent = computed(() => layout.value.layout === 'divided');

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"
-      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+      class="tw-relative tw-px-6 tw-py-8"
+      :style="viewModel.backgroundStyle"
       style="container-type: inline-size"
     >
       <div
@@ -45,11 +45,7 @@ import type {
   ButtonViewModel,
 } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
-import {
-  getRenderText,
-  escapeContentText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getRenderText, escapeContentText } 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';
@@ -75,10 +71,6 @@ 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.mixin.ts

@@ -25,10 +25,7 @@ import {
   RECAPTCHA_ACTION_CONTACT_FORM,
   TEXT_ONLY,
 } from '../../constants';
-import {
-  getRenderText,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getRenderText } from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
@@ -100,10 +97,6 @@ export default defineComponent({
       return buttonTextStyle;
     },
 
-    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
-      return toContentPaddingStyle(this.viewModel);
-    },
-
     hasCard(): boolean {
       return (
         this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
@@ -116,10 +109,11 @@ export default defineComponent({
     },
 
     hasBgColor(): boolean {
-      // Every brandSite layout applies the background colour on the section
-      // root (banner-style) so the padding control reveals it; for the image
-      // layouts it only shows in the padding bands around the image block.
-      return Boolean(this.viewModel.layoutStyle);
+      return (
+        this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
+        this.viewModel.layoutStyle === TEXT_ONLY ||
+        this.viewModel.layoutStyle === ALIGN_CENTERED
+      );
     },
 
     isCenteredLayout(): boolean {

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

@@ -2,13 +2,11 @@
   <section data-component="contact-form">
     <div
       :class="{
+        'tw-flex': isCenteredLayout && !hasBgImage,
         'tw-block': !viewModel.layoutStyle,
-        'tw-relative tw-overflow-hidden': hasBgImage,
+        'tw-relative': hasBgImage,
       }"
-      :style="[
-        hasBgColor ? viewModel.backgroundStyle : {},
-        contentPaddingStyle,
-      ]"
+      :style="hasBgColor ? viewModel.backgroundStyle : {}"
     >
       <Media
         v-if="hasBgImage && isCenteredLayout"
@@ -110,115 +108,110 @@
       </Collapsible>
       <div
         v-else-if="isCenteredLayout"
-        :class="{ 'tw-relative': hasBgImage, 'tw-flex': !hasBgImage }"
+        class="contact-container tw-py-4"
+        :class="{
+          'tw-px-6 tw-py-8': hasCard,
+          'tw-py-6': !hasCard,
+          'tw-w-full': !hasBgImage,
+        }"
       >
         <div
-          class="contact-container"
-          :class="{
-            'tw-px-6': hasCard,
-            'tw-py-8': hasBgImage,
-            'tw-w-full': !hasBgImage,
-          }"
+          :style="hasCard ? viewModel.cardStyle : {}"
+          class="tw-relative tw-block tw-px-6 tw-py-8 tw-rounded-2xl"
         >
-          <div
-            :style="hasCard ? viewModel.cardStyle : {}"
-            class="tw-relative tw-block tw-px-6 tw-rounded-2xl"
-            :class="{ 'tw-py-8': hasCard }"
-          >
-            <form v-if="!hasSubmitted" @submit.prevent="submitContactForm">
-              <TextWrapper
-                v-if="viewModel.title"
-                :text-style="viewModel.titleStyle"
-                :text="viewModel.title"
-                element="h1"
-                class="tw-mb-4 tw-text-base"
-              />
-              <TextWrapper
-                v-if="renderText"
-                :text-style="viewModel.descriptionStyle"
-                :text="renderText"
-                element="div"
-                class="tw-mb-4 tw-text-base"
-              />
-              <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
-                <div
-                  v-for="(value, index) in values"
-                  :key="index"
-                  class="tw-text-secondary-500 c-col-span-2"
-                  :class="{
-                    'tw-col-span-2':
-                      value.field.type === 'text-area' || isMobileDevice,
-                  }"
+          <form v-if="!hasSubmitted" @submit.prevent="submitContactForm">
+            <TextWrapper
+              v-if="viewModel.title"
+              :text-style="viewModel.titleStyle"
+              :text="viewModel.title"
+              element="h1"
+              class="tw-mb-4 tw-text-base"
+            />
+            <TextWrapper
+              v-if="renderText"
+              :text-style="viewModel.descriptionStyle"
+              :text="renderText"
+              element="div"
+              class="tw-mb-4 tw-text-base"
+            />
+            <div v-if="!isSubmitting" class="tw-grid tw-grid-cols-2 tw-gap-4">
+              <div
+                v-for="(value, index) in values"
+                :key="index"
+                class="tw-text-secondary-500 c-col-span-2"
+                :class="{
+                  'tw-col-span-2':
+                    value.field.type === 'text-area' || isMobileDevice,
+                }"
+              >
+                <TextInput
+                  v-if="value.field.type !== 'text-area'"
+                  v-model="value.value"
+                  :placeholder="`${value.field.name}${
+                    value.field.required ? '*' : ''
+                  }`"
+                  :label="`${value.field.name}${value.field.required ? '*' : ''}`"
+                  :show-label-screen-reader-only="true"
+                  size="sm"
+                  :error="!!value.error"
+                  :type="getTextInputTypeByFieldType(value.field.type)"
+                  class="tw-w-full"
+                  @input="onValueChange(index)"
+                />
+                <Textarea
+                  v-if="value.field.type === 'text-area'"
+                  v-model="value.value"
+                  :placeholder="`${value.field.name}${
+                    value.field.required ? '*' : ''
+                  }`"
+                  :label="`${value.field.name}${value.field.required ? '*' : ''}`"
+                  :show-label-screen-reader-only="true"
+                  size="sm"
+                  :error="!!value.error"
+                  :resize="false"
+                  class="tw-w-full"
+                  @input="onValueChange(index)"
+                />
+                <p v-if="!!value.error" class="form-error">
+                  {{ value.error }}
+                </p>
+              </div>
+              <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
+                <button
+                  v-if="isSubmitButtonVisible"
+                  class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
+                  :style="submitButtonStyle"
+                  :class="{ 'tw-w-full': isMobileDevice }"
                 >
-                  <TextInput
-                    v-if="value.field.type !== 'text-area'"
-                    v-model="value.value"
-                    :placeholder="`${value.field.name}${
-                      value.field.required ? '*' : ''
-                    }`"
-                    :label="`${value.field.name}${value.field.required ? '*' : ''}`"
-                    :show-label-screen-reader-only="true"
-                    size="sm"
-                    :error="!!value.error"
-                    :type="getTextInputTypeByFieldType(value.field.type)"
-                    class="tw-w-full"
-                    @input="onValueChange(index)"
-                  />
-                  <Textarea
-                    v-if="value.field.type === 'text-area'"
-                    v-model="value.value"
-                    :placeholder="`${value.field.name}${
-                      value.field.required ? '*' : ''
-                    }`"
-                    :label="`${value.field.name}${value.field.required ? '*' : ''}`"
-                    :show-label-screen-reader-only="true"
-                    size="sm"
-                    :error="!!value.error"
-                    :resize="false"
-                    class="tw-w-full"
-                    @input="onValueChange(index)"
+                  <TextWrapper
+                    :text-style="submitButtonTextStyle"
+                    :text="viewModel.buttonText"
+                    class="tw-text-center tw-text-base"
                   />
-                  <p v-if="!!value.error" class="form-error">
-                    {{ value.error }}
-                  </p>
-                </div>
-                <div class="tw-flex tw-w-full tw-justify-center tw-col-span-2">
-                  <button
-                    v-if="isSubmitButtonVisible"
-                    class="tw-block tw-border-0 tw-py-2 tw-select-none tw-text-base tw-text-center tw-w-fit hover:tw-cursor-pointer tw-px-8 tw-py-3 c-button-full"
-                    :style="submitButtonStyle"
-                    :class="{ 'tw-w-full': isMobileDevice }"
-                  >
-                    <TextWrapper
-                      :text-style="submitButtonTextStyle"
-                      :text="viewModel.buttonText"
-                      class="tw-text-center tw-text-base"
-                    />
-                  </button>
-                </div>
-              </div>
-              <div v-else class="tw-w-full tw-flex tw-justify-center">
-                <Loader />
+                </button>
               </div>
-              <p
-                v-if="hasSubmitError"
-                class="tw-text-center tw-mt-2 form-error"
-              >
-                {{ submitError }}
-              </p>
-            </form>
-            <div v-else :style="successMessageColorStyle">
-              <TextWrapper
-                v-if="viewModel.successMessage"
-                :text="renderSuccessText"
-                element="p"
-                :class="'tw-my-0.5'"
-              />
             </div>
+            <div v-else class="tw-w-full tw-flex tw-justify-center">
+              <Loader />
+            </div>
+            <p v-if="hasSubmitError" class="tw-text-center tw-mt-2 form-error">
+              {{ submitError }}
+            </p>
+          </form>
+          <div v-else :style="successMessageColorStyle">
+            <TextWrapper
+              v-if="viewModel.successMessage"
+              :text="renderSuccessText"
+              element="p"
+              :class="'tw-my-0.5'"
+            />
           </div>
         </div>
       </div>
-      <div v-else-if="isTextOnly" class="tw-px-6 tw-gap-2 contact-container">
+      <div
+        v-else-if="isTextOnly"
+        class="tw-px-6 tw-py-8 tw-gap-2 contact-container"
+      >
         <span v-if="!hasSubmitted" class="tw-grid tw-grid-cols-2">
           <div
             v-if="!isSubmitting"
@@ -357,7 +350,10 @@
             }"
           >
             <div
-              class="tw-flex tw-flex-col tw-gap-2 tw-px-8 tw-py-6 tw-w-full tw-justify-center"
+              class="tw-flex tw-flex-col tw-gap-2 tw-px-8 tw-w-full tw-justify-center c-py-6"
+              :class="{
+                'tw-py-6': isMobileDevice,
+              }"
             >
               <span v-if="!hasSubmitted">
                 <TextWrapper
@@ -520,6 +516,9 @@ export default {
   .c-text-padding {
     @apply tw-px-0 tw-col-span-2;
   }
+  .c-py-6 {
+    @apply tw-py-6;
+  }
   .c-divided-container {
     @apply tw-flex-col;
   }

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

@@ -1,7 +1,6 @@
 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';
@@ -35,10 +34,6 @@ 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, contentPaddingStyle]"
+    :style="getContainerStyle"
   >
     <component
       :is="galleryType"

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

@@ -2,10 +2,7 @@ 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,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '@brand-page/utils';
+import { getEmailValidationError } from '@brand-page/utils';
 import type { BrandPageContext } from '@brand-page/models';
 import {
   contentSettingsTr,
@@ -64,10 +61,6 @@ 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 :style="contentPaddingStyle">
+  <section>
     <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" :style="contentPaddingStyle">
+  <div data-component="map">
     <div
       class="c-map"
       :class="{
@@ -22,7 +22,6 @@ 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 {
@@ -38,9 +37,6 @@ 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/payment/request-payment/RequestPayment.mixin.ts

@@ -14,7 +14,6 @@ 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;
@@ -43,10 +42,6 @@ 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,7 +1,6 @@
 <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,10 +4,7 @@ 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,
-  contentPaddingStyle as toContentPaddingStyle,
-} from '../../../utils';
+import { isPaymentAmountValid } from '../../../utils';
 import {
   DEFAULT_CURRENCY_SYMBOL,
   DEFAULT_CURRENCY_CODE,
@@ -36,10 +33,6 @@ 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,7 +1,6 @@
 <template>
   <div
     data-component="support-me"
-    :style="contentPaddingStyle"
     :class="{
       'tw-my-8': context.isBrandSite,
       'tw-mb-4': context.isBrandPageOrIsBrandContact,

package/src/brand-page/components/shop/Shop.vue

@@ -2,12 +2,12 @@
   <section>
     <div
       v-if="shouldShowContainer"
-      class="tw-relative outer-container"
+      class="tw-relative outer-container tw-py-4"
       :class="{
         'tw-my-8': context.isBrandSite,
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="[backgroundStyle, contentPaddingStyle]"
+      :style="backgroundStyle"
     >
       <div class="tw-p-4 inner-container">
         <div class="tw-flex tw-flex-col tw-gap-2">
@@ -140,7 +140,6 @@ import brandPageClient from '../../clients/brand-page.client';
 import raygunUtil from '@brand-page/utils/raygun.util';
 import { shopTr } from '@src/composables/useTranslate';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
-import { contentPaddingStyle as toContentPaddingStyle } from '@brand-page/utils';
 
 const props = withDefaults(
   defineProps<{
@@ -261,10 +260,6 @@ const itemStyle = computed((): BrandPageCssStyle => {
   };
 });
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const backgroundStyle = computed((): any => {
   return props.viewModel.backgroundStyle;
 });

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

@@ -1,10 +1,11 @@
 <template>
   <div data-component="social-links">
     <div
+      class="tw-pb-8"
       :class="{
         'tw-mb-4': context.isBrandPageOrIsBrandContact,
       }"
-      :style="[containerStyles, contentPaddingStyle]"
+      :style="containerStyles"
       style="container-type: inline-size"
     >
       <TextWrapper
@@ -13,7 +14,7 @@
         :text="title"
         element="h1"
         :class="textAlignClass"
-        class="tw-pb-8"
+        class="tw-py-8"
       />
       <SocialLinksItems
         :id="id"
@@ -33,7 +34,6 @@ 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,10 +51,6 @@ const containerStyles = computed((): BrandPageCssStyle => {
   return props.viewModel.backgroundStyles || {};
 });
 
-const contentPaddingStyle = computed(() =>
-  toContentPaddingStyle(props.viewModel),
-);
-
 const iconStyle = computed((): BrandPageCssStyle => {
   return props.viewModel.iconFillStyles || {};
 });