@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

package/src/brand-page/components/faq-section/FaqSection.test.ts

@@ -0,0 +1,196 @@
+import { vi } from 'vitest';
+import { createSSRApp, h } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import FaqSection from './FaqSection.vue';
+import {
+  BRAND_PAGE_TYPES,
+  MEDIA_SIZES,
+  type BrandPageContext,
+} from '@brand-page/models';
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import type { FaqSectionViewModel } from '@brand-page/view-models';
+import type { RichTextValue } from '@brand-page/models';
+
+global.ResizeObserver = vi.fn(function () {
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  } as unknown as ResizeObserver;
+});
+
+const context = (
+  overrides: Partial<BrandPageContext> = {},
+): BrandPageContext => ({
+  brandPageSlug: 'faq-test',
+  brandPageToken: '',
+  isMobile: false,
+  isPreview: false,
+  isProduction: false,
+  isServerRender: false,
+  options: { mediaSizes: MEDIA_SIZES.sizeThumb },
+  isTemplate: false,
+  isDesignCom: false,
+  pageTitle: 'FAQ',
+  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: [] },
+  ...overrides,
+});
+
+const faqItem = (
+  id: string,
+  question: RichTextValue,
+  answer: RichTextValue,
+) => ({
+  id,
+  question,
+  answer,
+});
+
+const items = [
+  faqItem('q1', 'What services do you offer?', 'Many.'),
+  faqItem('q2', 'What are your hours?', '9 to 6.'),
+  faqItem('q3', 'How can I get in touch?', 'Email us.'),
+];
+
+const viewModel = (
+  overrides: Partial<FaqSectionViewModel> = {},
+): FaqSectionViewModel => ({
+  id: 'faq-1',
+  type: 'faq-section',
+  role: 'faq-section',
+  title: 'Frequently Asked Questions',
+  description: 'Find answers',
+  displayStyle: FAQ_DISPLAY_STYLES.centered,
+  items: items.map((item) => ({ ...item })),
+  titleStyle: {},
+  descriptionStyle: {},
+  questionStyle: {},
+  answerStyle: {},
+  backgroundStyle: {},
+  topPadding: 32,
+  bottomPadding: 32,
+  isFullWidth: true,
+  iconColor: { color: '#555555' },
+  dividerColor: { backgroundColor: '#dcdcdc' },
+  ...overrides,
+});
+
+const mountFaq = (overrides: Partial<FaqSectionViewModel> = {}) =>
+  mount(FaqSection, {
+    props: { viewModel: viewModel(overrides), context: context() },
+    global: { stubs: { Icon: true } },
+  });
+
+const openItemIds = (wrapper: ReturnType<typeof mountFaq>): string[] =>
+  wrapper
+    .findAll('[data-test-faq-item]')
+    .filter(
+      (item) =>
+        item.find('[data-test-faq-question]').attributes('aria-expanded') ===
+        'true',
+    )
+    .map((item) => item.attributes('data-test-faq-item') as string);
+
+describe('FaqSection', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  test('opening another item leaves the first open; closing one leaves the rest; all can close', async () => {
+    const wrapper = mountFaq();
+    const question = (id: string) =>
+      wrapper.find(`[data-test-faq-item="${id}"] [data-test-faq-question]`);
+
+    await question('q3').trigger('click');
+    expect(openItemIds(wrapper)).toEqual(['q1', 'q3']);
+
+    await question('q2').trigger('click');
+    expect(openItemIds(wrapper)).toEqual(['q1', 'q2', 'q3']);
+
+    await question('q1').trigger('click');
+    expect(openItemIds(wrapper)).toEqual(['q2', 'q3']);
+
+    await question('q2').trigger('click');
+    expect(openItemIds(wrapper)).toEqual(['q3']);
+
+    await question('q3').trigger('click');
+    expect(openItemIds(wrapper)).toEqual([]);
+  });
+
+  // A template thumbnail also sets context.isPreview (see
+  // TemplatePreview.mixin.ts), but must render like a real page, not the
+  // editor canvas: context.isTemplate is the signal that tells them apart.
+  describe('thumbnail context (isPreview + isTemplate)', () => {
+    const mountFaqAsThumbnail = (
+      overrides: Partial<FaqSectionViewModel> = {},
+    ) =>
+      mount(FaqSection, {
+        props: {
+          viewModel: viewModel(overrides),
+          context: context({ isPreview: true, isTemplate: true }),
+        },
+        global: { stubs: { Icon: true } },
+      });
+
+    test('only the first item renders expanded', () => {
+      expect(openItemIds(mountFaqAsThumbnail())).toEqual(['q1']);
+    });
+  });
+
+  test('server render opens the same first item the client does', async () => {
+    const app = createSSRApp({
+      render: () =>
+        h(FaqSection, { viewModel: viewModel(), context: context() }),
+    });
+
+    app.use(createPinia());
+    app.component('Icon', { render: () => null });
+
+    const html = await renderToString(app);
+
+    expect(html.match(/aria-expanded="true"/g)).toHaveLength(1);
+    expect(html.match(/aria-expanded="false"/g)).toHaveLength(2);
+  });
+
+  test('clicking a link inside a question follows it without toggling the item', async () => {
+    const linkDoc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'See pricing',
+              marks: [{ type: 'link', attrs: { href: 'https://example.com' } }],
+            },
+          ],
+        },
+      ],
+    };
+    const wrapper = mountFaq({
+      items: [faqItem('l1', 'First', 'a'), faqItem('l2', linkDoc, 'b')],
+    });
+
+    await wrapper.find('[data-test-faq-item="l2"] a').trigger('click');
+    expect(openItemIds(wrapper)).toEqual(['l1']);
+
+    await wrapper
+      .find('[data-test-faq-item="l2"] [data-test-faq-question]')
+      .trigger('click');
+    expect(openItemIds(wrapper)).toEqual(['l1', 'l2']);
+  });
+});

package/src/brand-page/components/faq-section/FaqSection.vue

@@ -0,0 +1,315 @@
+<template>
+  <section data-component="faq-section">
+    <div
+      class="tw-relative tw-px-6"
+      :style="[viewModel.backgroundStyle, contentPaddingStyle]"
+      style="container-type: inline-size"
+    >
+      <div class="c_faq" :class="`c_faq--${layout}`">
+        <div
+          v-if="hasTitle || hasDescription"
+          class="c_faq__heading"
+          data-test-faq-heading
+        >
+          <TextWrapper
+            v-if="hasTitle"
+            :text-style="viewModel.titleStyle"
+            :text="viewModel.title"
+            :slug="context.brandPageSlug"
+            element="h2"
+          />
+          <TextWrapper
+            v-if="hasDescription"
+            class="tw-mt-4"
+            :text-style="viewModel.descriptionStyle"
+            :text="getRenderText(viewModel.description)"
+            :slug="context.brandPageSlug"
+            element="div"
+          />
+        </div>
+
+        <!-- No items: no list at all, so the heading gap doesn't linger. -->
+        <div
+          v-if="hasItems && isAccordion"
+          class="c_faq__items"
+          :style="dividerStyle"
+          data-test-faq-items
+        >
+          <div
+            v-for="item in viewModel.items"
+            :key="item.id"
+            class="c_faq__item"
+            :data-test-faq-item="item.id"
+          >
+            <h3 class="tw-m-0">
+              <button
+                type="button"
+                class="c_faq__question"
+                :aria-expanded="isOpen(item.id)"
+                :aria-controls="answerId(item.id)"
+                data-test-faq-question
+                @click="onQuestionClick($event, item.id)"
+              >
+                <TextWrapper
+                  :text-style="viewModel.questionStyle"
+                  :text="getRenderText(item.question)"
+                  :slug="context.brandPageSlug"
+                  element="span"
+                />
+                <Icon
+                  class="c_faq__toggle"
+                  :style="iconStyle"
+                  :name="isOpen(item.id) ? 'minus' : 'plus-light'"
+                  size="sm"
+                  data-test-faq-toggle
+                />
+              </button>
+            </h3>
+            <div
+              v-show="isOpen(item.id)"
+              :id="answerId(item.id)"
+              class="c_faq__answer"
+              data-test-faq-answer
+            >
+              <TextWrapper
+                :text-style="viewModel.answerStyle"
+                :text="getRenderText(item.answer)"
+                :slug="context.brandPageSlug"
+                element="div"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-else-if="hasItems" class="c_faq__grid" data-test-faq-items>
+          <div
+            v-for="item in viewModel.items"
+            :key="item.id"
+            :data-test-faq-item="item.id"
+          >
+            <TextWrapper
+              :text-style="viewModel.questionStyle"
+              :text="getRenderText(item.question)"
+              :slug="context.brandPageSlug"
+              element="h3"
+            />
+            <TextWrapper
+              class="tw-mt-2"
+              :text-style="viewModel.answerStyle"
+              :text="getRenderText(item.answer)"
+              :slug="context.brandPageSlug"
+              element="div"
+              data-test-faq-answer
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { computed, ref } from 'vue';
+import { Icon } from '@designcrowd/fe-shared-lib';
+import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import type { FaqSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import {
+  escapeContentText,
+  getRenderText,
+  contentPaddingStyle as toContentPaddingStyle,
+} from '@brand-page/utils';
+
+const props = defineProps({
+  viewModel: {
+    type: Object as PropType<FaqSectionViewModel>,
+    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,
+  },
+});
+
+const contentPaddingStyle = computed(() =>
+  toContentPaddingStyle(props.viewModel),
+);
+
+const layout = computed((): string => {
+  switch (props.viewModel.displayStyle) {
+    case FAQ_DISPLAY_STYLES.split:
+      return 'split';
+    case FAQ_DISPLAY_STYLES.grid:
+      return 'grid';
+    default:
+      return 'centered';
+  }
+});
+
+const isAccordion = computed((): boolean => layout.value !== 'grid');
+
+const hasItems = computed((): boolean => props.viewModel.items.length > 0);
+
+// The h2 (ADR 0004) and description hide when empty, so no heading gap lingers.
+const hasTitle = computed(
+  (): boolean => !!escapeContentText(props.viewModel.title),
+);
+const hasDescription = computed(
+  (): boolean => !!escapeContentText(props.viewModel.description),
+);
+
+// The icon and divider colours are baked at birth by applyTextContrast.
+const iconStyle = computed((): { color?: string } => ({
+  color: props.viewModel.iconColor?.color,
+}));
+
+const dividerStyle = computed(
+  (): Record<string, string | undefined> => ({
+    '--faq-divider-color': props.viewModel.dividerColor?.backgroundColor,
+  }),
+);
+
+// Items open independently: any number can be open at once, including none.
+// Seeded from data (not `mounted`) so SSR and hydration render the same open
+// item. A new item starts closed; it simply isn't in the set yet.
+const openItemIds = ref<Set<string>>(
+  new Set(props.viewModel.items[0] ? [props.viewModel.items[0].id] : []),
+);
+
+// Every item renders expanded in the editor canvas only, so edits don't need
+// opening each row. A template thumbnail also sets isPreview (see
+// TemplatePreview.mixin.ts) but renders like a real page on load (first item
+// only) and is never clicked; context.isTemplate is the signal sibling
+// sections already read (e.g. ButtonCarouselNavigation.vue) to suppress
+// canvas-only behaviour in those renders, so it gates this split too.
+const isOpen = (itemId: string): boolean =>
+  (props.context.isPreview && !props.context.isTemplate) ||
+  openItemIds.value.has(itemId);
+
+const toggle = (itemId: string): void => {
+  const next = new Set(openItemIds.value);
+  if (next.has(itemId)) {
+    next.delete(itemId);
+  } else {
+    next.add(itemId);
+  }
+  openItemIds.value = next;
+};
+
+// A link inside a rich-text question follows the link; only the rest of the row toggles.
+const onQuestionClick = (event: MouseEvent, itemId: string): void => {
+  if ((event.target as Element | null)?.closest?.('a')) {
+    return;
+  }
+
+  toggle(itemId);
+};
+
+const answerId = (itemId: string): string =>
+  `faq-answer-${props.viewModel.id}-${itemId}`;
+</script>
+
+<style scoped>
+/* Spacing follows the Figma redlines ("Website — Features & Widgets", FAQ): 32 heading→items,
+   16 above and below each question, dividers only between items. */
+.c_faq {
+  margin: 0 auto;
+  max-width: var(--brandsite-max-width);
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.c_faq--centered .c_faq__items {
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.c_faq__item {
+  padding: 16px 0;
+}
+
+.c_faq__item + .c_faq__item {
+  /* `transparent` is a valid pick: the line disappears, with no fallback to the default. */
+  border-top: 1px solid var(--faq-divider-color, currentColor);
+}
+
+.c_faq__question {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  /* Buttons don't inherit font by default; the question's em sizes need the h3's. */
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.c_faq__toggle {
+  flex: 0 0 auto;
+  /* Stays on the right when the question is empty and renders nothing. */
+  margin-left: auto;
+}
+
+/* A long unbroken word wraps instead of pushing the +/- out of the row. */
+.c_faq__question > [data-component='text-wrapper'] {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  /* The dcom maker chrome resets every <button> to capitalize (!important); this
+     question holds content text, not a UI label, so reset it back on the child
+     (HeaderNavigationType.vue uses the same technique for the same clash). */
+  text-transform: none;
+}
+
+.c_faq__answer {
+  margin-top: 8px;
+}
+
+.c_faq__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+}
+
+@container (min-width: 640px) {
+  .c_faq--split {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  /* 1/3 heading · 2/3 items, either side of the 32px gap. */
+  .c_faq--split .c_faq__heading {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .c_faq--split .c_faq__items {
+    flex: 2 1 0;
+    min-width: 0;
+  }
+}
+
+@container (max-width: 640px) {
+  .c_faq__grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

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

@@ -16,7 +16,7 @@
         : {}
     "
   >
-    <div v-if="!context.isPreview && context.isBrandSite" class="tw-h-full">
+    <div v-if="showHomeLink" class="tw-h-full">
       <router-link
         v-if="routes.length >= 1"
         :to="{
@@ -54,12 +54,7 @@
         />
       </router-link>
     </div>
-    <template
-      v-if="
-        (context.isPreview && context.isBrandSite) ||
-        context.isBrandPageOrIsBrandContact
-      "
-    >
+    <template v-else>
       <LazyHydrationWrapper v-if="context.isServerRender">
         <LogoRender
           :is-preview="context.isPreview"
@@ -129,6 +124,13 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  // The BP/BC header logo links home, as brand site's always has; a logo content
+  // block never does.
+  linksHome: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 });
 
 const altText = computed(() =>
@@ -143,6 +145,11 @@ const logoMaxWidth = computed(() => {
   return `${LOGO_SLIDER_DESKTOP_MAX}rem`;
 });
 
+const showHomeLink = computed(
+  () =>
+    !props.context.isPreview && (props.context.isBrandSite || props.linksHome),
+);
+
 // This is needed just to calculate the home route for logo link
 const routes = computed(
   () =>

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

@@ -354,36 +354,13 @@ export default defineComponent({
       return this.viewModel?.pages?.find((p) => p.id === navItem.pageId);
     },
 
-    headerViewModelMobile() {
-      return this.viewModel.headerViewModelMobile;
-    },
-    headerViewModelDesktop() {
-      return this.viewModel.headerViewModelDesktop;
-    },
-
-    // TECH DEBT - brand page navigation handlers
-    isNavigationEmbeddedInLogoMobile(): boolean {
-      return (
-        this.headerViewModelMobile.navigation.displayType.includes(
-          'hamburger',
-        ) &&
-        this.contents[0]?.type === 'logo' &&
-        this.viewModel.pages.length > 1
-      );
-    },
-
-    isNavigationEmbeddedInLogoDesktop(): boolean {
-      return (
-        this.headerViewModelDesktop.navigation.displayType.includes(
-          'hamburger',
-        ) &&
-        this.contents[0]?.type === 'logo' &&
-        this.viewModel.pages.length > 1
-      );
-    },
-
-    // The button shows in the header row OR in the side menu, never both. This gives it to the side menu when the header doesn't show it; undefined = no button in the menu.
+    // The button shows in the header row OR in the side menu, never both, and never on BP/BC
+    // (brand site only); this gives it to the side menu when the header doesn't show it.
     sideMenuHeaderButtonViewModel(): ButtonViewModel | undefined {
+      if (!this.context.isBrandSite) {
+        return undefined;
+      }
+
       const header = this.viewModel.headerViewModelMobile;
 
       if (
@@ -399,105 +376,6 @@ export default defineComponent({
     shouldShowNavigation(): boolean {
       return hasVisibleNavigation(this.context.nav.navItems);
     },
-
-    showNavigationAfterLogoMobile(): boolean {
-      return (
-        !this.context.isBrandSite &&
-        this.shouldShowNavigation &&
-        this.contents[0]?.type === 'logo' &&
-        this.headerViewModelMobile.navigation.renderAfterLogo &&
-        !this.isNavigationEmbeddedInLogoMobile
-      );
-    },
-
-    showNavigationAfterLogoDesktop(): boolean {
-      return (
-        !this.context.isBrandSite &&
-        this.shouldShowNavigation &&
-        this.contents[0]?.type === 'logo' &&
-        this.headerViewModelDesktop.navigation.renderAfterLogo &&
-        !this.isNavigationEmbeddedInLogoDesktop
-      );
-    },
-
-    bpShowTopNavigationMobile() {
-      if (this.context.isBrandSite) {
-        return false;
-      }
-
-      if (!this.shouldShowNavigation) {
-        return false;
-      }
-
-      if (
-        // TODO - use constant
-        this.headerViewModelMobile.navigation.displayType.includes('hamburger')
-      ) {
-        return true;
-      }
-
-      const isFirstContentALogo = this.contents[0]?.type === 'logo';
-
-      if (
-        isFirstContentALogo &&
-        this.headerViewModelMobile.navigation.renderAfterLogo
-      ) {
-        return false;
-      }
-
-      if (
-        !this.isNavigationEmbeddedInLogoMobile &&
-        !this.headerViewModelMobile.navigation.renderAfterLogo
-      ) {
-        return true;
-      }
-
-      if (!isFirstContentALogo) {
-        return true;
-      }
-
-      return false;
-    },
-
-    bpShowTopNavigationDesktop() {
-      if (this.context.isBrandSite) {
-        return false;
-      }
-
-      if (!this.shouldShowNavigation) {
-        return false;
-      }
-
-      if (
-        // TODO - use constant
-        this.headerViewModelDesktop.navigation.displayType.includes('hamburger')
-      ) {
-        return true;
-      }
-
-      const isFirstContentALogo = this.contents[0]?.type === 'logo';
-
-      if (
-        isFirstContentALogo &&
-        this.headerViewModelDesktop.navigation.renderAfterLogo
-      ) {
-        return false;
-      }
-
-      if (
-        !this.isNavigationEmbeddedInLogoDesktop &&
-        !this.headerViewModelDesktop.navigation.renderAfterLogo
-      ) {
-        return true;
-      }
-
-      if (!isFirstContentALogo) {
-        return true;
-      }
-
-      return false;
-    },
-    // TECH DEBT END
     slug(): string {
       return getSlugFromContext(this.context);
     },