@designcrowd/library.brand-page 5.15.7 → 5.15.9

package/src/brand-page/components/logo/Logo.vue

@@ -36,7 +36,7 @@
             :has-margin-bottom="hasMarginBottom"
             :alt-text="altText"
             :view-model="viewModel"
-            :viewport="viewport"
+            :is-mobile="isMobile"
           />
         </LazyHydrationWrapper>
         <LogoRender
@@ -50,7 +50,7 @@
           :has-margin-bottom="hasMarginBottom"
           :alt-text="altText"
           :view-model="viewModel"
-          :viewport="viewport"
+          :is-mobile="isMobile"
         />
       </router-link>
     </div>
@@ -71,7 +71,7 @@
           :is-brand-page-or-is-brand-contact="
             context.isBrandPageOrIsBrandContact
           "
-          :viewport="viewport"
+          :is-mobile="isMobile"
         />
       </LazyHydrationWrapper>
       <LogoRender
@@ -83,7 +83,7 @@
         :has-margin-bottom="hasMarginBottom"
         :alt-text="altText"
         :view-model="viewModel"
-        :viewport="viewport"
+        :is-mobile="isMobile"
       />
     </template>
   </div>
@@ -127,10 +127,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
-  viewport: {
-    type: String as PropType<ViewportsType>,
+  isMobile: {
+    type: Boolean,
     required: false,
-    default: undefined,
+    default: false,
   },
 });
 
@@ -139,7 +139,7 @@ const altText = computed(() =>
 );
 
 const logoMaxWidth = computed(() => {
-  if (props.viewport === 'mobile') {
+  if (props.isMobile) {
     return `${LOGO_SLIDER_MOBILE_MAX}rem`;
   }
 

package/src/brand-page/components/logo/LogoRender.vue

@@ -60,7 +60,7 @@ const props = withDefaults(
     isBrandPageOrIsBrandContact: boolean;
     viewModel?: LogoViewModel;
     altText: string;
-    viewport?: ViewportsType;
+    isMobile?: boolean;
   }>(),
   {
     isPreview: false,
@@ -108,7 +108,7 @@ const logoWidth = computed(() => {
 });
 
 const logoMaxWidth = computed(() => {
-  if (props.viewport === 'mobile') {
+  if (props.isMobile) {
     return `${LOGO_SLIDER_MOBILE_MAX}rem`;
   }
   return `${LOGO_SLIDER_DESKTOP_MAX}rem`;

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

@@ -32,7 +32,6 @@
               <PageHeader
                 nav-id="nav-1"
                 :view-model="viewModel.headerViewModelDesktop"
-                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -46,7 +45,6 @@
               <PageHeader
                 nav-id="nav-2"
                 :view-model="viewModel.headerViewModelMobile"
-                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -54,6 +52,7 @@
                 }"
                 @open-side-menu="openSideMenu"
                 @header-container-click="onPageHeaderContainerClick"
+                :is-mobile="true"
               />
             </template>
           </MediaQuery>
@@ -191,7 +190,6 @@
             <template #desktop>
               <PageFooter
                 :view-model="viewModel.footerViewModelDesktop"
-                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -206,7 +204,6 @@
             <template #mobile>
               <PageFooter
                 :view-model="viewModel.footerViewModelMobile"
-                :viewport="viewport"
                 :context="context"
                 :class="{
                   'tw-cursor-pointer': context.isPreview,
@@ -216,6 +213,7 @@
                 :show-brand-crowd-logo="showBrandCrowdLogo"
                 @footer-container-click="onPageFooterContainerClick"
                 @on-logo-click="onLogoClick"
+                ;is-mobile="true"
               />
             </template>
           </MediaQuery>

package/src/brand-page/components/page-footer/PageFooter.mixin.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import type { PageFooterViewModel } from '../../view-models';
 import type { PropType } from 'vue';
-import type { BrandPageContext, ViewportsType } from '../../models';
+import type { BrandPageContext } from '../../models';
 import { getRenderText } from '../../utils';
 import { FOOTER_DISPLAY } from '../../constants';
 
@@ -19,10 +19,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
-    viewport: {
-      type: String as PropType<ViewportsType>,
+    isMobile: {
+      type: Boolean,
       required: false,
-      default: undefined,
+      default: false,
     },
   },
   emits: ['on-logo-click', 'footer-container-click'],

package/src/brand-page/components/page-footer/PageFooter.vue

@@ -21,7 +21,7 @@
         :has-margin-bottom="false"
         :view-model="viewModel.logo"
         :context="context"
-        :viewport="viewport"
+        :is-mobile="isMobile"
       />
       <!-- end logo -->
 

package/src/brand-page/components/page-header/PageHeader.mixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
-import type { BrandPageContext, ViewportsType } from '../../models';
+import type { BrandPageContext } from '../../models';
 import type { PageHeaderViewModel } from '../../view-models';
 import { LOGO_SLIDER_DESKTOP_MAX } from '../../constants';
 
@@ -18,10 +18,10 @@ export default defineComponent({
       type: Object as PropType<BrandPageContext>,
       required: true,
     },
-    viewport: {
-      type: String as PropType<ViewportsType>,
+    isMobile: {
+      type: Boolean,
       required: false,
-      default: undefined,
+      default: false,
     },
   },
   data: function () {

package/src/brand-page/components/page-header/PageHeader.vue

@@ -15,7 +15,7 @@
             :has-logo-auto-margin="false"
             :view-model="viewModel.logo"
             :context="context"
-            :viewport="viewport"
+            :is-mobile="isMobile"
           />
         </template>
         <template #nav>