@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue

@@ -12,13 +12,16 @@
     <!-- With a button, the nav list scrolls instead of the panel so the button stays put. -->
     <div
       class="c-sidebar"
-      :class="{
-        'c-sidebar--open': isSideMenuOpen,
-        'c-sidebar--closed': !isSideMenuOpen,
-        'tw-overflow-auto': isSideMenuOpen && !showHeaderButton,
-        'c-sidebar--has-cta': showHeaderButton,
-      }"
-      :style="defaultButtonStyle"
+      :class="[
+        navRoleClass,
+        {
+          'c-sidebar--open': isSideMenuOpen,
+          'c-sidebar--closed': !isSideMenuOpen,
+          'tw-overflow-auto': isSideMenuOpen && !showHeaderButton,
+          'c-sidebar--has-cta': showHeaderButton,
+        },
+      ]"
+      :style="sidebarStyle"
     >
       <div class="c-sidebar-header tw-w-full tw-flex tw-justify-end">
         <button
@@ -120,6 +123,11 @@ export default {
     Button,
   },
   mixins: [NavigationSideMenuMixin],
+  setup() {
+    return {
+      ...NavigationSideMenuMixin.setup(),
+    };
+  },
 };
 </script>
 <style scoped>

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue.test.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
 import { createRouter, createMemoryHistory } from 'vue-router';
 import { createPinia, setActivePinia } from 'pinia';
 import NavigationSideMenu from './NavigationSideMenu.vue';
@@ -6,6 +7,7 @@ import {
   BRAND_PAGE_TYPES,
   BUTTON_LINK_TYPE,
   MEDIA_SIZES,
+  NavigationMobile,
   PageHeaderMobile,
   PageStyles,
   type BrandPageContext,
@@ -13,6 +15,9 @@ import {
 } from '@brand-page/models';
 import type { NavItemViewModel } from '@brand-page/view-models';
 import { mapToPageHeaderViewModel } from '@brand-page/utils';
+import { HEADER_DISPLAY } from '@brand-page/constants';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+import TextWrapper from '../../text-wrapper/TextWrapper.vue';
 
 const CTA = '[data-test-header-cta-button]';
 const SLUG = 'my-brand';
@@ -68,6 +73,8 @@ const aHeaderButton = (): HeaderButton => ({
 const mountSideMenu = async (options: {
   headerButton?: HeaderButton;
   isPreview?: boolean;
+  hamburgerDefaultButtonStyle?: Record<string, unknown>;
+  roleOptions?: Record<string, unknown>;
 }) => {
   const router = createRouter({
     history: createMemoryHistory(),
@@ -83,9 +90,25 @@ const mountSideMenu = async (options: {
   router.push(`/${SLUG}`);
   await router.isReady();
 
+  const styles = new PageStyles();
+
   const headerViewModel = mapToPageHeaderViewModel(
-    new PageHeaderMobile({ headerButton: options.headerButton }),
-    new PageStyles(),
+    new PageHeaderMobile({
+      headerButton: options.headerButton,
+      // `PageHeaderMobile` only keeps a passed-in `navigation` when `displayStyle` is also
+      // given — otherwise its constructor overwrites it with a fresh default.
+      ...(options.hamburgerDefaultButtonStyle
+        ? {
+            displayStyle: HEADER_DISPLAY.MOBILE_TAB_1,
+            navigation: new NavigationMobile({
+              hamburgerMenuStyle: {
+                defaultButtonStyle: options.hamburgerDefaultButtonStyle,
+              },
+            }),
+          }
+        : {}),
+    }),
+    styles,
     [],
   );
 
@@ -103,7 +126,16 @@ const mountSideMenu = async (options: {
       styles: headerViewModel.navigation,
       headerButtonViewModel: headerViewModel.headerButtonViewModel,
     },
-    global: { plugins: [router] },
+    global: {
+      plugins: [router],
+      ...(options.roleOptions
+        ? {
+            provide: {
+              [TEXT_ROLE_OPTIONS_KEY]: computed(() => options.roleOptions),
+            },
+          }
+        : {}),
+    },
   });
 };
 
@@ -179,3 +211,101 @@ describe('NavigationSideMenu - header call-to-action button (BP-5852)', () => {
     expect(wrapper.emitted('close-side-menu')).toBeUndefined();
   });
 });
+
+const PARAGRAPH1_ROLE = { fontFamily: 'Anton', fontSize: '1em' };
+const BUTTON_ROLE = {
+  fontFamily: 'Oswald',
+  fontSize: '1.25em',
+  fontWeight: 'bold',
+};
+
+describe('NavigationSideMenu — hamburger typography references its role (BP-5969 R4)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('the panel keeps the hamburger role class without applying its font size', async () => {
+    const wrapper = await mountSideMenu({
+      hamburgerDefaultButtonStyle: { textStyleType: 'button' },
+      roleOptions: {
+        button: { style: BUTTON_ROLE },
+        paragraph1: { style: PARAGRAPH1_ROLE },
+      },
+    });
+
+    expect(wrapper.get('.c-sidebar').classes()).toContain(
+      'bp-text-role-button',
+    );
+    expect(wrapper.get('.c-sidebar').attributes('style')).not.toContain(
+      'font-size',
+    );
+  });
+
+  test('a nav item references the role for every role-defined property', async () => {
+    const wrapper = await mountSideMenu({
+      hamburgerDefaultButtonStyle: { textStyleType: 'button' },
+      roleOptions: { button: { style: BUTTON_ROLE } },
+    });
+
+    const link = wrapper.get('.c-nav-list a');
+
+    expect(link.attributes('style')).toContain(
+      'font-family: var(--role-font-family)',
+    );
+    expect(link.attributes('style')).toContain(
+      'font-weight: var(--role-font-weight)',
+    );
+    expect(link.attributes('style')).toContain(
+      'font-size: var(--role-font-size)',
+    );
+  });
+
+  test('the CTA label applies its Button text size without inheriting one from the panel', async () => {
+    const wrapper = await mountSideMenu({
+      headerButton: {
+        ...aHeaderButton(),
+        buttonTextStyle: { textStyleType: 'button' },
+      },
+      hamburgerDefaultButtonStyle: { textStyleType: 'button' },
+      roleOptions: { button: { style: BUTTON_ROLE } },
+    });
+
+    const sidebar = wrapper.get('.c-sidebar');
+    const label = wrapper
+      .get('[data-component="navigation-side-menu-cta"]')
+      .getComponent(TextWrapper);
+
+    expect(sidebar.attributes('style')).not.toContain('font-size');
+    expect(label.get('p').attributes('style')).toContain(
+      'font-size: var(--role-font-size)',
+    );
+  });
+
+  test('the close button still bakes fontSize/lineHeight as initial', async () => {
+    const wrapper = await mountSideMenu({
+      hamburgerDefaultButtonStyle: { textStyleType: 'button' },
+      roleOptions: { button: { style: BUTTON_ROLE } },
+    });
+
+    const closeButton = wrapper.get('.c-sidebar-header button');
+
+    expect(closeButton.attributes('style')).toContain('font-size: initial');
+    expect(closeButton.attributes('style')).toContain('line-height: initial');
+  });
+
+  test('the panel wrapper style still drops size, line height and letter-spacing', async () => {
+    const wrapper = await mountSideMenu({
+      hamburgerDefaultButtonStyle: {
+        textStyleType: 'button',
+        fontSize: '1.25em',
+      },
+      roleOptions: { button: { style: BUTTON_ROLE } },
+    });
+
+    const wrapperRow = wrapper.get('.c-nav-list > div');
+
+    expect(wrapperRow.attributes('style')).not.toContain('font-size');
+    expect(wrapperRow.attributes('style')).not.toContain('line-height');
+    expect(wrapperRow.attributes('style')).not.toContain('letter-spacing');
+  });
+});

package/src/brand-page/components/page/Page.mixin.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import type {
   BrandPageViewModel,
   ButtonViewModel,
@@ -20,8 +20,11 @@ import {
 import {
   getSlugFromContext,
   getPageHeadingText,
-  buildPaletteRootCss,
-  buildPaletteScopedCss,
+  buildPaletteRootCssText,
+  buildPaletteScopedCssText,
+  buildTextRoleRootCssText,
+  buildTextRoleScopedCssText,
+  TEXT_ROLE_OPTIONS_KEY,
   PAGE_SCOPE_ID_ATTRIBUTE,
   resolveColorReference,
 } from '@brand-page/utils';
@@ -103,6 +106,17 @@ export default defineComponent({
       }),
     };
   },
+  // BP-5969: expose the live role options to every descendant TextWrapper so it can
+  // inline only its overrides and leave the role typography to the CSS class. A computed
+  // keeps it reactive (a role edit repaints), and `this` is the instance in Options-API
+  // provide(). Descendants that render outside a Page get `undefined` and bake inline.
+  provide() {
+    return {
+      [TEXT_ROLE_OPTIONS_KEY as symbol]: computed(
+        () => this.viewModel?.styles?.textStyles?.textStyleOptions,
+      ),
+    };
+  },
   data() {
     return {
       isSideMenuOpen: false,
@@ -115,18 +129,24 @@ export default defineComponent({
       return this.viewModel?.brandPageToken || null;
     },
 
-    // The one palette emitter and scoper — every surface renders `Page`, so the
-    // published site and the maker preview can't disagree about a colour.
-    // The selector switches by surface (see the page-owned-palette-scoping ADR):
-    // standalone emits `:root` (SSR'd, and it must reach teleported content);
-    // template cards emit a per-instance scoped block because a grid holds many
-    // palettes in one document and they all share the fixed `--palette-N` names.
-    paletteStyleHtml(): string {
+    // Page.vue owns the native style node; this computed supplies CSS text only so hydration
+    // updates its contents without replacing the SSR-emitted element.
+    paletteCss(): string {
       const colors = this.viewModel?.styles?.colors ?? [];
 
       return this.context?.isTemplate
-        ? buildPaletteScopedCss(colors, this.pageScopeId)
-        : buildPaletteRootCss(colors);
+        ? buildPaletteScopedCssText(colors, this.pageScopeId)
+        : buildPaletteRootCssText(colors);
+    },
+
+    textRoleCss(): string {
+      const options = this.viewModel?.styles?.textStyles?.textStyleOptions;
+
+      if (!options) return '';
+
+      return this.context?.isTemplate
+        ? buildTextRoleScopedCssText(options, this.pageScopeId)
+        : buildTextRoleRootCssText(options);
     },
 
     // Spread onto EVERY top-level node of Page's fragment (template mode only).
@@ -208,28 +228,15 @@ export default defineComponent({
         };
       }
 
-      // The page base coat — anything with no colour of its own inherits this
-      // (RTE text, form controls, SVG `currentColor` fills).
-      const baseTextColour =
-        this.viewModel?.styles?.textStyles?.textStyleOptions?.paragraphs?.style
-          ?.color;
-
-      if (baseTextColour) {
-        styles.color = baseTextColour;
-      }
-
-      const textFontFamilyKey =
-        this.viewModel.styles?.textStyles.textFontFamily ||
-        DEFAULT_FONT_FAMILY_KEY;
-
-      const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
-
-      if (textFontFamilyConfig) {
-        styles.fontFamily = [
-          `"${textFontFamilyConfig.name}"`,
-          ...FALLBACK_FONT_FAMILIES,
-        ].join(', ');
-      }
+      // BP-5969 (ADR-0020): no page base coat. A role defines typography only, so `:root`
+      // no longer paints a text colour — every text element carries its own contrast-derived
+      // colour (baked at birth, or by migration-22 for existing sites). Form controls and SVG
+      // `currentColor` fills fall back to the browser default.
+      // Text with no font of its own is Lato on every site (`0036-retire-text-font-family.md`).
+      styles.fontFamily = [
+        `"${FONT_FAMILY_CONFIGS[DEFAULT_FONT_FAMILY_KEY].name}"`,
+        ...FALLBACK_FONT_FAMILIES,
+      ].join(', ');
 
       return styles;
     },

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

@@ -1,11 +1,21 @@
 <template>
-  <!-- Global palette block, emitted SSR so var(--…) references resolve before
-       hydration (no colour flash). Standalone surfaces emit `:root`; template cards
-       emit a per-instance block scoped to the `data-page-scope` id on the nodes below. -->
-  <div
-    v-if="paletteStyleHtml"
+  <!-- Native style nodes are emitted by SSR before page content and are retained while Vue
+       hydrates. `innerHTML` preserves CSS syntax rather than SSR-escaping it. -->
+  <component
+    :is="'style'"
+    v-if="paletteCss"
     data-component="page-palette-style"
-    v-html="paletteStyleHtml"
+    :data-palette-root="context.isTemplate ? undefined : ''"
+    :data-palette-scoped="context.isTemplate ? '' : undefined"
+    v-bind="{ innerHTML: paletteCss }"
+  />
+  <component
+    :is="'style'"
+    v-if="textRoleCss"
+    data-component="page-text-role-style"
+    :data-text-roles="context.isTemplate ? undefined : ''"
+    :data-text-roles-scoped="context.isTemplate ? '' : undefined"
+    v-bind="{ innerHTML: textRoleCss }"
   />
   <div
     v-if="!viewModel.styles?.backgroundStylesViewModel?.mediaViewModel"
@@ -272,6 +282,7 @@
             :context="context"
             :button-styles="viewModel.styles?.buttonStyles"
             :text-styles="viewModel.styles?.textStyles"
+            :button-text-style="viewModel.saveContactSettings?.buttonTextStyle"
             :is-premium="isPremiumSubscription"
             :show-popup-branding="shouldShowPopupBranding"
             @editor-click="onSaveContactWidgetClick"

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

@@ -1,10 +1,13 @@
 import { vi } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
+import { createSSRApp } from 'vue';
+import { renderToString } from '@vue/server-renderer';
 import { createPinia, setActivePinia } from 'pinia';
 import Page from './Page.vue';
 import {
   BRAND_PAGE_TYPES,
   MEDIA_SIZES,
+  TextStyles,
   VIEWPORTS,
   type BrandPageContext,
 } from '@brand-page/models';
@@ -51,7 +54,7 @@ const createViewModel = (
   ({
     showBrandCrowdLogo: false,
     styles: {
-      textStyles: { style: {}, textFontFamily: undefined },
+      textStyles: { style: {} },
       backgroundStylesViewModel: {},
     },
     pages,
@@ -177,6 +180,16 @@ describe('Page palette emission (BP-5886)', () => {
       [createNavItem()],
     );
 
+  const withTextRoles = (viewModel: BrandPageViewModel): BrandPageViewModel => {
+    (viewModel.styles as any).textStyles = {
+      textStyleOptions: JSON.parse(
+        JSON.stringify(TextStyles.GetDefaultTextStyle().textStyleOptions),
+      ),
+    };
+
+    return viewModel;
+  };
+
   // One neutral wrapper name for both modes — the mode markers live on the
   // <style> tag itself (data-palette-root vs data-palette-scoped).
   const paletteBlock = (context: BrandPageContext, viewModel = withColors()) =>
@@ -283,6 +296,52 @@ describe('Page palette emission (BP-5886)', () => {
       false,
     );
   });
+
+  test('keeps palette and role CSS in native style nodes while their text updates', async () => {
+    const viewModel = withTextRoles(withColors());
+    const wrapper = mountPage(viewModel, createContext());
+    const paletteNode = wrapper.get(
+      '[data-component="page-palette-style"]',
+    ).element;
+    const roleNode = wrapper.get(
+      '[data-component="page-text-role-style"]',
+    ).element;
+    const next = JSON.parse(JSON.stringify(viewModel));
+
+    next.styles.colors[0].value = '#123456';
+    next.styles.textStyles.textStyleOptions.heading1.style.fontFamily =
+      'Montserrat';
+    await wrapper.setProps({ viewModel: next });
+
+    expect(paletteNode.tagName).toBe('STYLE');
+    expect(roleNode.tagName).toBe('STYLE');
+    expect(wrapper.get('[data-component="page-palette-style"]').element).toBe(
+      paletteNode,
+    );
+    expect(wrapper.get('[data-component="page-text-role-style"]').element).toBe(
+      roleNode,
+    );
+    expect(paletteNode.textContent).toContain('--palette-0: #123456;');
+    expect(roleNode.textContent).toContain('--role-font-family: Montserrat;');
+  });
+
+  test('SSR emits quoted role font CSS without HTML escaping', async () => {
+    const viewModel = withTextRoles(createViewModel([], [createNavItem()]));
+
+    viewModel.styles.textStyles.textStyleOptions.heading1.style.fontFamily =
+      'Exo 2';
+
+    const html = await renderToString(
+      createSSRApp(Page, {
+        viewModel,
+        context: createContext({ isTemplate: true }),
+        viewport: VIEWPORTS.desktop,
+      }),
+    );
+
+    expect(html).toContain('--role-font-family: "Exo 2";');
+    expect(html).not.toContain('&quot;Exo 2&quot;');
+  });
 });
 
 /**
@@ -357,3 +416,34 @@ describe('Page background shape colour resolution (BP-5886)', () => {
     ]);
   });
 });
+
+describe('Page root font (0036-retire-text-font-family.md)', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  const LATO_ROOT_FONT = '"Lato", Helvetica, sans-serif';
+
+  const rootFontFamily = (viewModel: BrandPageViewModel): string | undefined =>
+    (
+      mountPage(viewModel, createContext()).vm as unknown as {
+        rootElementStyles: { fontFamily?: string };
+      }
+    ).rootElementStyles.fontFamily;
+
+  test('text with no font of its own renders in Lato', () => {
+    expect(rootFontFamily(createViewModel([], [createNavItem()]))).toBe(
+      LATO_ROOT_FONT,
+    );
+  });
+
+  test('a stale stored site text font does not change the root font', () => {
+    const viewModel = createViewModel([], [createNavItem()]);
+
+    (viewModel.styles.textStyles as unknown as Record<string, unknown>)[
+      'textFontFamily'
+    ] = 'quattrocentoSans';
+
+    expect(rootFontFamily(viewModel)).toBe(LATO_ROOT_FONT);
+  });
+});

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

@@ -1,9 +1,15 @@
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
 import type { PageFooterViewModel } from '@brand-page/view-models';
 import type { PropType } from 'vue';
-import type { BrandPageContext } from '@brand-page/models';
+import type { BrandPageContext, TextStyleOptions } from '@brand-page/models';
 import { getRenderText } from '@brand-page/utils';
 import { FOOTER_DISPLAY } from '../../constants';
+import {
+  TEXT_ROLE_OPTIONS_KEY,
+  roleTypographyStyle,
+  roleClassFor,
+  roleStyleFor,
+} from '../../utils/text-role-css.util';
 
 export default defineComponent({
   props: {
@@ -26,6 +32,15 @@ export default defineComponent({
     },
   },
   emits: ['on-logo-click', 'footer-container-click'],
+  // A mixin's own `setup()` is never run by Vue's `mixins:` merge — `PageFooter.vue` invokes
+  // this one itself and spreads its return into its own `setup()`.
+  setup() {
+    const roleOptions = inject(TEXT_ROLE_OPTIONS_KEY, undefined);
+
+    return {
+      roleOptions,
+    };
+  },
   computed: {
     containerStyle(): BrandPageCssStyle {
       return this.viewModel.backgroundStyle;
@@ -46,6 +61,21 @@ export default defineComponent({
 
       return getRenderText(this.viewModel.copyrightText);
     },
+    copyrightRoleType(): string | undefined {
+      return this.viewModel.copyrightStyle?.textStyleType;
+    },
+    copyrightRoleClass(): string | undefined {
+      return roleClassFor(this.copyrightRoleType);
+    },
+    copyrightStyle(): BrandPageCssStyle {
+      const own = this.viewModel.copyrightStyle;
+      const roleStyle = roleStyleFor(
+        this.copyrightRoleType,
+        this.roleOptions as TextStyleOptions | undefined,
+      );
+
+      return { ...own, ...roleTypographyStyle(own, roleStyle) };
+    },
   },
   methods: {
     onFooterContainerClick() {

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

@@ -0,0 +1,79 @@
+import { describe, test, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { computed } from 'vue';
+import PageFooter from './PageFooter.vue';
+import { PageFooterDesktop, PageStyles } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
+import { mapToPageFooterViewModel } from '@brand-page/utils';
+import { TEXT_ROLE_OPTIONS_KEY } from '@brand-page/utils/text-role-css.util';
+
+const PARAGRAPH1_ROLE = { fontFamily: 'Anton', fontSize: '1em' };
+
+const mountFooter = (options: {
+  copyrightStyle?: Record<string, unknown>;
+  withRole?: boolean;
+}) => {
+  const pageFooter = new PageFooterDesktop({
+    copyrightText: '© Acme',
+    copyrightStyle: options.copyrightStyle ?? { textStyleType: 'paragraph1' },
+  } as never);
+
+  const viewModel = mapToPageFooterViewModel(pageFooter, new PageStyles());
+
+  return mount(PageFooter, {
+    props: {
+      viewModel,
+      context: {} as BrandPageContext,
+      showBrandCrowdLogo: false,
+    },
+    global: {
+      stubs: { Logo: true, SocialLinksItems: true, BrandPageFooter: true },
+      provide:
+        options.withRole === false
+          ? {}
+          : {
+              [TEXT_ROLE_OPTIONS_KEY]: computed(() => ({
+                paragraph1: { style: PARAGRAPH1_ROLE },
+              })),
+            },
+    },
+  });
+};
+
+const copyrightEl = (wrapper: ReturnType<typeof mountFooter>) =>
+  wrapper.get('.tw-break-all');
+
+describe('PageFooter — the footer copyright references its role (BP-5969 R4)', () => {
+  test('the copyright carries the role class', () => {
+    const wrapper = mountFooter({});
+
+    expect(copyrightEl(wrapper).classes()).toContain('bp-text-role-paragraph1');
+  });
+
+  test('the copyright references the role for every role-defined property', () => {
+    const wrapper = mountFooter({});
+
+    const style = copyrightEl(wrapper).attributes('style');
+
+    expect(style).toContain('font-family: var(--role-font-family)');
+    expect(style).toContain('font-size: var(--role-font-size)');
+  });
+
+  test('an own override on the copyright is a literal, not a ref', () => {
+    const wrapper = mountFooter({
+      copyrightStyle: { textStyleType: 'paragraph1', fontFamily: 'Oswald' },
+    });
+
+    expect(copyrightEl(wrapper).attributes('style')).toContain(
+      'font-family: Oswald',
+    );
+  });
+
+  test('with no role in scope, the copyright bakes its own values literally', () => {
+    const wrapper = mountFooter({ withRole: false });
+
+    expect(copyrightEl(wrapper).attributes('style')).not.toContain(
+      'var(--role-',
+    );
+  });
+});

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

@@ -29,11 +29,14 @@
 
       <!-- start copyright -->
       <div
-        :style="viewModel.copyrightStyle"
+        :style="copyrightStyle"
         class="tw-break-all"
-        :class="{
-          'tw-pt-4': !viewModel.logo.isVisible && !isDisplayStyleJustified,
-        }"
+        :class="[
+          copyrightRoleClass,
+          {
+            'tw-pt-4': !viewModel.logo.isVisible && !isDisplayStyleJustified,
+          },
+        ]"
         v-html="renderText"
       />
       <!-- end copyright -->
@@ -67,6 +70,11 @@ import BrandPageFooter from '../brand-page-footer/BrandPageFooter.vue';
 export default {
   components: { BrandPageFooter, SocialLinksItems, Logo },
   mixins: [PageFooterMixin],
+  setup() {
+    return {
+      ...PageFooterMixin.setup(),
+    };
+  },
 };
 </script>
 <style scoped>