@designcrowd/library.brand-page 5.18.1 → 5.18.2-ast-padding-1

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

@@ -6,7 +6,8 @@
         'c_banner--with-image-overlay tw-flex tw-flex-col tw-justify-center':
           viewModel.isBigImageType,
         'c_banner--with-image-overlay tw-flex tw-flex-col': isDividedContent,
-        'tw-px-6 tw-py-8': !isDividedContent,
+        'tw-px-6': !isDividedContent,
+        'tw-py-8': !isDividedContent && !isStackedFullWidth,
       }"
       :style="viewModel.backgroundStyle"
       style="container-type: inline-size"
@@ -44,7 +45,85 @@
         "
       />
       <div
-        v-if="!isDividedContent"
+        v-if="isStackedImageLayout"
+        class="tw-flex tw-flex-col tw-gap-5 tw-items-center tw-w-full tw-h-full c_banner-container"
+      >
+        <div
+          v-if="stackedImagePosition !== 'top'"
+          class="tw-flex tw-flex-col tw-gap-5 tw-items-center tw-w-full !tw-text-center"
+        >
+          <TextWrapper
+            v-if="viewModel.title"
+            :text-style="viewModel.titleStyle"
+            :text="viewModel.title"
+            :slug="context.brandPageSlug"
+            element="h1"
+          />
+          <template v-if="stackedImagePosition === 'bottom'">
+            <TextWrapper
+              v-if="hasDescriptionText"
+              :text-style="viewModel.descriptionStyle"
+              :text="renderText"
+              :slug="context.brandPageSlug"
+              element="div"
+            />
+            <div class="tw-w-full tw-flex" :class="displayButtonClass">
+              <Button
+                v-if="shouldShowButton"
+                :view-model="buttonViewModel"
+                :context="context"
+                :content-index="contentIndex"
+                class="tw-w-fit"
+              />
+            </div>
+          </template>
+        </div>
+
+        <div :class="stackedImageWrapperClass">
+          <Media
+            :image-url="viewModel.imageUrl"
+            :context="context"
+            :color-replacements="viewModel.colorReplacements"
+            :media-type="viewModel.mediaType"
+            :size="viewModel.size"
+            :role="viewModel.role"
+            img-classes="tw-w-full tw-aspect-[3/1] tw-object-cover tw-block"
+            :content-index="contentIndex"
+            :media="viewModel.mediaViewModel"
+          />
+        </div>
+
+        <div
+          v-if="stackedImagePosition !== 'bottom'"
+          class="tw-flex tw-flex-col tw-gap-5 tw-items-center tw-w-full !tw-text-center"
+        >
+          <TextWrapper
+            v-if="stackedImagePosition === 'top' && viewModel.title"
+            :text-style="viewModel.titleStyle"
+            :text="viewModel.title"
+            :slug="context.brandPageSlug"
+            element="h1"
+          />
+          <TextWrapper
+            v-if="hasDescriptionText"
+            :text-style="viewModel.descriptionStyle"
+            :text="renderText"
+            :slug="context.brandPageSlug"
+            element="div"
+          />
+          <div class="tw-w-full tw-flex" :class="displayButtonClass">
+            <Button
+              v-if="shouldShowButton"
+              :view-model="buttonViewModel"
+              :context="context"
+              :content-index="contentIndex"
+              class="tw-w-fit"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        v-else-if="!isDividedContent"
         :class="{
           'c_banner-container--left-aligned-stacking':
             viewModel.displayStyle === 'left-aligned',
@@ -101,7 +180,7 @@
           <div class="tw-w-full tw-flex" :class="displayButtonClass">
             <Button
               v-if="shouldShowButton"
-              :view-model="getbuttonViewModel"
+              :view-model="buttonViewModel"
               :context="context"
               :content-index="contentIndex"
               :class="{
@@ -112,7 +191,7 @@
           </div>
         </div>
       </div>
-      <div v-if="isDividedContent">
+      <div v-else-if="isDividedContent">
         <div
           v-if="!shouldStackOnTop"
           class="tw-flex tw-h-full tw-relative c_banner--divided-container"
@@ -142,11 +221,10 @@
               <div class="tw-w-full tw-flex" :class="displayButtonClass">
                 <Button
                   v-if="shouldShowButton"
-                  :view-model="getbuttonViewModel"
+                  :view-model="buttonViewModel"
                   :context="context"
                   :content-index="contentIndex"
                   :class="{
-                    'tw-w-fit': !isHorizontalAligned,
                     'tw-w-fit': isDividedContent,
                     'c_banner-button--stacking': isHorizontalAligned,
                   }"
@@ -227,7 +305,7 @@
             <div class="tw-w-full tw-flex" :class="displayButtonClass">
               <Button
                 v-if="shouldShowButton"
-                :view-model="getbuttonViewModel"
+                :view-model="buttonViewModel"
                 :context="context"
                 :content-index="contentIndex"
                 :class="{
@@ -242,16 +320,273 @@
     </div>
   </section>
 </template>
-<script>
-import BannerSectionMixin from './BannerSection.mixin.ts';
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import type { PropType } from 'vue';
 import Button from '../button/Button.vue';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import type {
+  BannerSectionViewModel,
+  ButtonViewModel,
+} from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { hasValidButton } from '../../../utils/validator.util';
+import { getRenderText, escapeContentText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
+import {
+  ALIGN_CENTERED,
+  ALIGN_LEFT_ALIGNED,
+  ALIGN_RIGHT_ALIGNED,
+  BIG_IMAGE,
+  ALIGN_LEFT_BIG_IMAGE,
+  ALIGN_RIGHT_FULL_IMAGE,
+  ALIGN_LEFT_FULL_IMAGE,
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_CARD_LEFT_IMAGE,
+  ALIGN_TOP_CARD_IMAGE,
+  ALIGN_BOTTOM_CARD_IMAGE,
+  ALIGN_MIDDLE_CARD_IMAGE,
+  ALIGN_TOP_FULL_IMAGE,
+  ALIGN_BOTTOM_FULL_IMAGE,
+  ALIGN_MIDDLE_FULL_IMAGE,
+} from '../../constants';
+
+type BannerLayout = 'inline' | 'divided' | 'stacked';
+type StackedImagePosition = 'top' | 'middle' | 'bottom';
+
+interface BannerLayoutConfig {
+  layout: BannerLayout;
+  /** Alignment/width classes for the text column (inline and divided-mobile layouts). */
+  alignClass: string;
+  /** Renders the 1/3 side image and the container-query stacking classes. */
+  hasSideImage?: boolean;
+  /** Text content rendered inside a card (cardStyle background, padding, rounding). */
+  isCard?: boolean;
+  isCardAlignedOnLeft?: boolean;
+  stackedImagePosition?: StackedImagePosition;
+  /** Stacked image bleeds edge-to-edge instead of staying inside the max-width container. */
+  isStackedFullWidth?: boolean;
+}
+
+const DEFAULT_LAYOUT: BannerLayoutConfig = { layout: 'inline', alignClass: '' };
 
-export default {
-  components: { Button, Media, TextWrapper },
-  mixins: [BannerSectionMixin],
+const BANNER_LAYOUTS: Record<string, BannerLayoutConfig> = {
+  [ALIGN_CENTERED]: {
+    layout: 'inline',
+    alignClass: 'tw-items-center tw-w-full',
+  },
+  [BIG_IMAGE]: {
+    layout: 'inline',
+    alignClass: 'tw-items-center tw-w-full',
+  },
+  [ALIGN_LEFT_ALIGNED]: {
+    layout: 'inline',
+    alignClass: 'tw-items-start tw-w-2/3',
+    hasSideImage: true,
+  },
+  [ALIGN_RIGHT_ALIGNED]: {
+    layout: 'inline',
+    alignClass: 'tw-items-end tw-w-2/3',
+    hasSideImage: true,
+  },
+  [ALIGN_LEFT_BIG_IMAGE]: {
+    layout: 'inline',
+    alignClass: 'tw-items-start tw-w-2/3',
+  },
+  [ALIGN_CARD_CENTER_IMAGE]: {
+    layout: 'inline',
+    alignClass: 'tw-items-center tw-w-full',
+    isCard: true,
+  },
+  [ALIGN_CARD_LEFT_IMAGE]: {
+    layout: 'inline',
+    alignClass: 'tw-items-end',
+    isCard: true,
+    isCardAlignedOnLeft: true,
+  },
+  [ALIGN_LEFT_FULL_IMAGE]: {
+    layout: 'divided',
+    alignClass: '',
+    hasSideImage: true,
+  },
+  [ALIGN_RIGHT_FULL_IMAGE]: {
+    layout: 'divided',
+    alignClass: '',
+    hasSideImage: true,
+  },
+  [ALIGN_TOP_CARD_IMAGE]: {
+    layout: 'stacked',
+    alignClass: '',
+    stackedImagePosition: 'top',
+  },
+  [ALIGN_BOTTOM_CARD_IMAGE]: {
+    layout: 'stacked',
+    alignClass: '',
+    stackedImagePosition: 'bottom',
+  },
+  [ALIGN_MIDDLE_CARD_IMAGE]: {
+    layout: 'stacked',
+    alignClass: '',
+    stackedImagePosition: 'middle',
+  },
+  [ALIGN_TOP_FULL_IMAGE]: {
+    layout: 'stacked',
+    alignClass: '',
+    stackedImagePosition: 'top',
+    isStackedFullWidth: true,
+  },
+  [ALIGN_BOTTOM_FULL_IMAGE]: {
+    layout: 'stacked',
+    alignClass: '',
+    stackedImagePosition: 'bottom',
+    isStackedFullWidth: true,
+  },
+  [ALIGN_MIDDLE_FULL_IMAGE]: {
+    layout: 'stacked',
+    alignClass: '',
+    stackedImagePosition: 'middle',
+    isStackedFullWidth: true,
+  },
 };
+
+const props = defineProps({
+  viewModel: {
+    type: Object as PropType<BannerSectionViewModel & { pageSlug?: string }>,
+    required: true,
+  },
+  context: {
+    type: Object as PropType<BrandPageContext>,
+    required: true,
+  },
+  containerClientWidth: {
+    type: Number as PropType<number | undefined>,
+    required: false,
+    default: undefined,
+  },
+  containerClientHeight: {
+    type: Number as PropType<number | undefined>,
+    required: false,
+    default: undefined,
+  },
+  contentIndex: {
+    type: Number,
+    required: false,
+    default: undefined,
+  },
+  isPreview: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isMobileDevice: {
+    type: Boolean,
+    required: false,
+    default: undefined,
+  },
+});
+
+const layout = computed<BannerLayoutConfig>(
+  () => BANNER_LAYOUTS[props.viewModel.displayStyle] ?? DEFAULT_LAYOUT,
+);
+
+const displayAlignClass = computed(() => layout.value.alignClass);
+const isHorizontalAligned = computed(() => !!layout.value.hasSideImage);
+const isDividedContent = computed(() => layout.value.layout === 'divided');
+const isCardBannerContent = computed(() => !!layout.value.isCard);
+const isCardAlignedOnLeft = computed(() => !!layout.value.isCardAlignedOnLeft);
+const isStackedImageLayout = computed(() => layout.value.layout === 'stacked');
+const stackedImagePosition = computed<StackedImagePosition>(
+  () => layout.value.stackedImagePosition ?? 'top',
+);
+const isStackedFullWidth = computed(() => !!layout.value.isStackedFullWidth);
+
+const isRightImageAligned = computed(
+  () => props.viewModel.displayStyle === ALIGN_RIGHT_FULL_IMAGE,
+);
+
+const stackedImageWrapperClass = computed<Record<string, boolean>>(() => ({
+  'tw-w-full': !isStackedFullWidth.value,
+  'c_banner-stacked-image--full': isStackedFullWidth.value,
+  'tw-rounded-md tw-overflow-hidden': !isStackedFullWidth.value,
+}));
+
+const displayButtonClass = computed(() => {
+  const { buttonTextStyle, displayStyle } = props.viewModel;
+
+  if (buttonTextStyle) {
+    switch (buttonTextStyle.textAlign) {
+      case 'left':
+        return 'tw-justify-start';
+      case 'center':
+        return 'tw-justify-center';
+      case 'right':
+        return 'tw-justify-end';
+      default:
+        return '';
+    }
+  }
+
+  return displayStyle === ALIGN_CARD_CENTER_IMAGE ||
+    displayStyle === ALIGN_CENTERED
+    ? 'tw-justify-center'
+    : 'tw-justify-start';
+});
+
+const buttonViewModel = computed<ButtonViewModel>(() => {
+  const { buttonViewModel: model, buttonLinkType, pageSlug } = props.viewModel;
+
+  model.buttonLinkType = buttonLinkType;
+  model.pageSlug = pageSlug ?? '';
+
+  return model;
+});
+
+const shouldShowButton = computed(() =>
+  hasValidButton({
+    buttonText: props.viewModel.buttonText || undefined,
+    buttonViewModel: props.viewModel.buttonViewModel,
+  }),
+);
+
+const renderText = computed(() => {
+  if (!props.viewModel.description) {
+    return '';
+  }
+
+  return hasRTEContent(props.viewModel.description)
+    ? props.viewModel.description
+    : getRenderText(props.viewModel.description);
+});
+
+const hasDescriptionText = computed(() => {
+  if (hasRTEContent(props.viewModel.description)) {
+    return escapeContentText(props.viewModel.description) !== '';
+  }
+
+  return (props.viewModel?.description?.length ?? 0) > 0;
+});
+
+const backgroundOverlay = computed<BrandPageCssStyle>(() => ({
+  background: props.viewModel.overlayColor?.backgroundColor,
+  opacity: `${props.viewModel.overlayOpacity}%`,
+}));
+
+const shouldStackOnTop = ref(false);
+
+const onResize = (): void => {
+  shouldStackOnTop.value = window.innerWidth < 640;
+};
+
+onMounted(() => {
+  nextTick(() => {
+    window.addEventListener('resize', onResize);
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize);
+});
 </script>
 
 <style scoped>
@@ -273,6 +608,19 @@ export default {
   margin: 0 auto;
 }
 
+/*
+ * Full-bleed stacked image. The wrapper lives inside .c_banner-container
+ * (capped at --brandsite-max-width and centered) and inside the outer
+ * tw-px-6 padding, so a plain width:100%/-mx-6 stops at the max-width edge.
+ * Using the outer container-query width (100cqw = content-box inline size),
+ * widen to the full banner and shift left so the image spans edge to edge
+ * (1.5rem = tw-px-6). Text blocks stay constrained to the max-width.
+ */
+.c_banner-stacked-image--full {
+  width: calc(100cqw + 3rem);
+  margin-inline: calc(50% - 50cqw - 1.5rem);
+}
+
 .c_banner--with-image-flip {
   flex-direction: row-reverse;
 }

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

@@ -0,0 +1,201 @@
+import { vi } from 'vitest';
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import BannerSection from './BannerSection.vue';
+import { createPinia, setActivePinia } from 'pinia';
+import {
+  BRAND_PAGE_TYPES,
+  MEDIA_SIZES,
+  type BrandPageContext,
+} from '@brand-page/models';
+import type {
+  BannerSectionViewModel,
+  ButtonViewModel,
+  NavItemViewModel,
+} from '@brand-page/view-models';
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+const LINKED_PAGE_ID = 'page-2';
+
+const createTestNavItem = (): NavItemViewModel => ({
+  pageId: LINKED_PAGE_ID,
+  slug: 'my-brand',
+  displayName: 'Second Page',
+  routeName: 'brand-page-sub-page',
+  routeParams: { slug: 'my-brand', pageSlug: 'second-page' },
+  isRoot: false,
+  isHidden: false,
+  relativePath: 'second-page',
+  nestedNavItems: [],
+});
+
+const createTestBrandPageContext = (): BrandPageContext => ({
+  brandPageSlug: 'my-brand',
+  brandPageToken: '',
+  isMobile: false,
+  isPreview: true,
+  isProduction: false,
+  isServerRender: false,
+  options: {
+    mediaSizes: MEDIA_SIZES.sizeThumb,
+  },
+  isTemplate: false,
+  isDesignCom: false,
+  pageTitle: 'My Brand',
+  runtimeEnvironment: '',
+  stripePublishableKey: undefined,
+  customDomain: undefined,
+  brandPageType: BRAND_PAGE_TYPES.brandSite,
+  isBrandPage: false,
+  isBrandPageOrIsBrandContact: false,
+  isBrandSite: true,
+  isBrandContact: false,
+  pages: [],
+  isCapturingPreview: false,
+  recaptchaSiteKey: undefined,
+  nav: {
+    navItems: [createTestNavItem()],
+  },
+});
+
+const textStyle = {
+  fontSize: '1rem',
+  lineHeight: '1.5rem',
+  fontFamily: 'Lato',
+  textAlign: 'center',
+  overflowWrap: 'anywhere',
+  wordBreak: 'normal',
+};
+
+const createTestButtonViewModel = (
+  overrides: Partial<ButtonViewModel> = {},
+): ButtonViewModel =>
+  ({
+    id: 'button-1',
+    type: 'button',
+    role: 'banner-section',
+    title: 'Get Started',
+    url: '',
+    page: LINKED_PAGE_ID,
+    pageSlug: LINKED_PAGE_ID,
+    buttonLinkType: 'page',
+    clickActionField: 'url',
+    iconUrl: '',
+    modalImageUrl: '',
+    titleStyle: textStyle,
+    styles: { selectedButtonStyleId: 'BUTTON_STYLE_1', style: {} },
+    onClicked: vi.fn(),
+    ...overrides,
+  }) as ButtonViewModel;
+
+const createTestBannerViewModel = (
+  overrides: Partial<BannerSectionViewModel> = {},
+): BannerSectionViewModel =>
+  ({
+    id: 'banner-1',
+    type: 'banner-section',
+    role: 'banner-section',
+    imageUrl: '',
+    title: 'Welcome',
+    description: 'Your brand starts here.',
+    buttonText: 'Get Started',
+    url: '',
+    displayStyle: 'centered',
+    titleStyle: textStyle,
+    descriptionStyle: textStyle,
+    buttonTextStyle: textStyle,
+    backgroundStyle: {},
+    cardStyle: {},
+    colorReplacements: [],
+    buttonPageId: LINKED_PAGE_ID,
+    buttonLinkType: 'page',
+    overlayColor: {},
+    overlayOpacity: 0,
+    buttonViewModel: createTestButtonViewModel(),
+    isFullWidth: true,
+    isBigImageType: false,
+    ...overrides,
+  }) as BannerSectionViewModel;
+
+const mountBanner = (viewModel: BannerSectionViewModel) =>
+  mount(BannerSection, {
+    propsData: { context: createTestBrandPageContext(), viewModel },
+    global: {
+      stubs: { RouterLink: RouterLinkStub },
+    },
+  });
+
+describe('Banner Section', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('page-link button renders a router-link resolved by page id when the banner view model has no pageSlug', () => {
+    // Real banner view models never carry pageSlug; the button must still
+    // render via the `page` fallback and route by buttonPageId.
+    const wrapper = mountBanner(createTestBannerViewModel());
+
+    const link = wrapper.findComponent(RouterLinkStub);
+
+    expect(link.exists()).toBe(true);
+    expect(link.props('to')).toEqual({
+      name: 'brand-page-sub-page',
+      params: { slug: 'my-brand', pageSlug: 'second-page' },
+    });
+  });
+
+  test('forwards buttonLinkType and an empty pageSlug to the button view model when absent on the banner', () => {
+    const viewModel = createTestBannerViewModel();
+
+    mountBanner(viewModel);
+
+    expect(viewModel.buttonViewModel.buttonLinkType).toBe('page');
+    expect(viewModel.buttonViewModel.pageSlug).toBe('');
+  });
+
+  test('forwards the banner pageSlug to the button view model when present', () => {
+    const viewModel = createTestBannerViewModel({
+      pageSlug: 'second-page',
+    } as Partial<BannerSectionViewModel>);
+    const wrapper = mountBanner(viewModel);
+
+    expect(viewModel.buttonViewModel.pageSlug).toBe('second-page');
+    expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(true);
+  });
+
+  test('url button renders an anchor with the url as href', () => {
+    const wrapper = mountBanner(
+      createTestBannerViewModel({
+        buttonLinkType: 'url',
+        url: 'https://example.com',
+        buttonViewModel: createTestButtonViewModel({
+          buttonLinkType: 'url',
+          url: 'https://example.com',
+          page: '',
+          pageSlug: '',
+        }),
+      }),
+    );
+
+    expect(wrapper.findComponent(RouterLinkStub).exists()).toBe(false);
+    const anchor = wrapper.find('a.c-button');
+
+    expect(anchor.exists()).toBe(true);
+    expect(anchor.attributes('href')).toBe('https://example.com');
+  });
+
+  test('hides the button when there is no button text', () => {
+    const wrapper = mountBanner(
+      createTestBannerViewModel({
+        buttonText: false,
+        buttonViewModel: createTestButtonViewModel({ title: '' }),
+      }),
+    );
+
+    expect(wrapper.find('.bp-button').exists()).toBe(false);
+  });
+});

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.mixin.ts

@@ -25,7 +25,10 @@ import {
   RECAPTCHA_ACTION_CONTACT_FORM,
   TEXT_ONLY,
 } from '../../constants';
-import { getRenderText } from '@brand-page/utils';
+import {
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
 import { hasRTEContent } from '@brand-page-maker/utils';
 import { useReCaptcha } from '../../composables/recaptcha.composable';
 
@@ -97,6 +100,10 @@ export default defineComponent({
       return buttonTextStyle;
     },
 
+    contentPaddingStyle(): { paddingTop: string; paddingBottom: string } {
+      return toContentPaddingStyle(this.viewModel);
+    },
+
     hasCard(): boolean {
       return (
         this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
@@ -109,11 +116,10 @@ export default defineComponent({
     },
 
     hasBgColor(): boolean {
-      return (
-        this.viewModel.layoutStyle === ALIGN_CARD_CENTER ||
-        this.viewModel.layoutStyle === TEXT_ONLY ||
-        this.viewModel.layoutStyle === ALIGN_CENTERED
-      );
+      // 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);
     },
 
     isCenteredLayout(): boolean {