@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

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

@@ -0,0 +1,292 @@
+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 = (): 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: [] },
+});
+
+const faqItem = (
+  id: string,
+  question: RichTextValue,
+  answer: RichTextValue,
+) => ({
+  id,
+  question,
+  questionStyle: {},
+  answer,
+  answerStyle: {},
+});
+
+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: {},
+  backgroundStyle: {},
+  topPadding: 32,
+  bottomPadding: 32,
+  isFullWidth: true,
+  isStacked: false,
+  ...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('opens the first item on load', () => {
+    expect(openItemIds(mountFaq())).toEqual(['q1']);
+  });
+
+  test('opening another item closes the open one; clicking the open item closes it', 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(['q3']);
+
+    await question('q3').trigger('click');
+    expect(openItemIds(wrapper)).toEqual([]);
+  });
+
+  test('split style is an accordion too', () => {
+    expect(
+      openItemIds(mountFaq({ displayStyle: FAQ_DISPLAY_STYLES.split })),
+    ).toEqual(['q1']);
+  });
+
+  test('grid style shows every answer and has no toggles', () => {
+    const wrapper = mountFaq({ displayStyle: FAQ_DISPLAY_STYLES.grid });
+
+    expect(wrapper.findAll('[data-test-faq-question]')).toHaveLength(0);
+    expect(wrapper.findAll('[data-test-faq-answer]')).toHaveLength(3);
+    expect(wrapper.text()).toContain('Email us.');
+  });
+
+  test('the title is the section h2 and each question sits in an h3', () => {
+    const wrapper = mountFaq();
+
+    expect(wrapper.find('h2').text()).toBe('Frequently Asked Questions');
+    expect(wrapper.findAll('h3 > [data-test-faq-question]')).toHaveLength(3);
+  });
+
+  test('no items renders the heading only', () => {
+    const wrapper = mountFaq({ items: [] });
+
+    expect(wrapper.find('h2').exists()).toBe(true);
+    expect(wrapper.findAll('[data-test-faq-item]')).toHaveLength(0);
+    // No empty list container, or the heading→items gap would still show.
+    expect(wrapper.find('.c_faq__items').exists()).toBe(false);
+    expect(
+      mountFaq({ items: [], displayStyle: FAQ_DISPLAY_STYLES.grid })
+        .find('.c_faq__grid')
+        .exists(),
+    ).toBe(false);
+  });
+
+  test('an empty question or answer still renders the item', () => {
+    const wrapper = mountFaq({
+      items: [faqItem('e1', '', '')],
+    });
+
+    expect(wrapper.findAll('[data-test-faq-item]')).toHaveLength(1);
+    expect(openItemIds(wrapper)).toEqual(['e1']);
+  });
+
+  test('follows the item the maker panel opened', async () => {
+    const wrapper = mountFaq();
+
+    await wrapper.setProps({ viewModel: viewModel({ activeItemId: 'q2' }) });
+    expect(openItemIds(wrapper)).toEqual(['q2']);
+  });
+
+  test('starts on the maker panel item when one is already open', () => {
+    expect(openItemIds(mountFaq({ activeItemId: 'q3' }))).toEqual(['q3']);
+  });
+
+  test('deleting the open item opens the first remaining one', async () => {
+    const wrapper = mountFaq();
+
+    await wrapper.setProps({
+      viewModel: viewModel({ items: items.slice(1).map((i) => ({ ...i })) }),
+    });
+    expect(openItemIds(wrapper)).toEqual(['q2']);
+  });
+
+  test('applies stored padding and a transparent background by default', () => {
+    const band = mountFaq({ topPadding: 120, bottomPadding: 8 }).find(
+      '[data-component="faq-section"] > div',
+    );
+
+    expect(band.attributes('style')).toContain('padding-top: 120px');
+    expect(band.attributes('style')).toContain('padding-bottom: 8px');
+    expect(band.attributes('style')).not.toContain('background');
+  });
+
+  test('marks split and grid stacked on brand.page / brand.contact', () => {
+    const wrapper = mountFaq({
+      displayStyle: FAQ_DISPLAY_STYLES.split,
+      isStacked: true,
+    });
+
+    expect(wrapper.find('.c_faq').classes()).toContain('c_faq--stacked');
+  });
+
+  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('renders rich-text marks in the question and answer', () => {
+    const doc = (text: string, mark: string) => ({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text, marks: [{ type: mark }] }],
+        },
+      ],
+    });
+    const wrapper = mountFaq({
+      items: [
+        faqItem(
+          'r1',
+          doc('Bold question', 'bold'),
+          doc('Italic answer', 'italic'),
+        ),
+      ],
+    });
+
+    expect(wrapper.find('[data-test-faq-question] strong').text()).toBe(
+      'Bold question',
+    );
+    expect(wrapper.find('[data-test-faq-answer] em').text()).toBe(
+      'Italic answer',
+    );
+  });
+
+  test("each item's plain text uses its own style", () => {
+    const wrapper = mountFaq({
+      items: [
+        { ...faqItem('s1', 'Big', 'a'), questionStyle: { fontSize: '2em' } },
+        { ...faqItem('s2', 'Small', 'b'), questionStyle: { fontSize: '1em' } },
+      ],
+    });
+    const sizes = wrapper
+      .findAll('[data-test-faq-question] .empty-para')
+      .map((el) => (el.element as HTMLElement).style.fontSize);
+
+    expect(sizes).toEqual(['2em', '1em']);
+  });
+
+  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(['l2']);
+  });
+});

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

@@ -0,0 +1,299 @@
+<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}`, { 'c_faq--stacked': viewModel.isStacked }]"
+      >
+        <SectionHeading
+          class="c_faq__heading"
+          :title="viewModel.title"
+          :title-style="viewModel.titleStyle"
+          :description="viewModel.description"
+          :description-style="viewModel.descriptionStyle"
+          :slug="context.brandPageSlug"
+        />
+
+        <!-- No items (D1): no list at all, so the heading gap doesn't linger. -->
+        <div v-if="hasItems && isAccordion" class="c_faq__items">
+          <div
+            v-for="item in viewModel.items"
+            :key="item.id"
+            class="c_faq__item"
+            :style="itemStyle(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="item.questionStyle"
+                  :text="renderText(item.question)"
+                  :slug="context.brandPageSlug"
+                  element="span"
+                />
+                <Icon
+                  class="c_faq__toggle"
+                  :name="isOpen(item.id) ? 'minus' : 'plus-light'"
+                  size="sm"
+                />
+              </button>
+            </h3>
+            <div
+              v-show="isOpen(item.id)"
+              :id="answerId(item.id)"
+              class="c_faq__answer"
+              data-test-faq-answer
+            >
+              <TextWrapper
+                :text-style="item.answerStyle"
+                :text="renderText(item.answer)"
+                :slug="context.brandPageSlug"
+                element="div"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div v-else-if="hasItems" class="c_faq__grid">
+          <div
+            v-for="item in viewModel.items"
+            :key="item.id"
+            :data-test-faq-item="item.id"
+          >
+            <TextWrapper
+              :text-style="item.questionStyle"
+              :text="renderText(item.question)"
+              :slug="context.brandPageSlug"
+              element="h3"
+            />
+            <TextWrapper
+              class="tw-mt-2"
+              :text-style="item.answerStyle"
+              :text="renderText(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, watch } from 'vue';
+import { Icon } from '@designcrowd/fe-shared-lib';
+import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import SectionHeading from '../section-heading/SectionHeading.vue';
+import type { FaqSectionViewModel } from '@brand-page/view-models';
+import type {
+  BrandPageContext,
+  FaqItem,
+  RichTextValue,
+} from '@brand-page/models';
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import {
+  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 row divider and +/- icon follow the item's question colour.
+const itemStyle = (item: FaqItem): { color?: string } => ({
+  color: item.questionStyle?.color,
+});
+
+// `null` = the visitor closed every item. Seeded from data (not `mounted`) so
+// SSR and hydration render the same open item.
+const openItemId = ref<string | null>(
+  props.viewModel.activeItemId ?? props.viewModel.items[0]?.id ?? null,
+);
+
+const isOpen = (itemId: string): boolean => openItemId.value === itemId;
+
+const toggle = (itemId: string): void => {
+  openItemId.value = isOpen(itemId) ? null : itemId;
+};
+
+// 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}`;
+
+// Plain-text items keep their escaped newlines; a rich-text document renders as-is.
+const renderText = (text: RichTextValue): RichTextValue =>
+  typeof text === 'string' || text == null ? getRenderText(text ?? '') : text;
+
+// Maker only: follow the item the settings panel opened.
+watch(
+  () => props.viewModel.activeItemId,
+  (activeItemId) => {
+    if (activeItemId) {
+      openItemId.value = activeItemId;
+    }
+  },
+);
+
+// The open item was deleted → open the first remaining one.
+watch(
+  () => props.viewModel.items.map((item) => item.id),
+  (itemIds) => {
+    if (openItemId.value !== null && !itemIds.includes(openItemId.value)) {
+      openItemId.value = itemIds[0] ?? null;
+    }
+  },
+);
+</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 {
+  /* ADR 0009: color-mix without a fallback is accepted. */
+  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.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 (D9). */
+  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;
+}
+
+.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:not(.c_faq--stacked) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  /* 1/3 heading · 2/3 items, either side of the 32px gap. */
+  .c_faq--split:not(.c_faq--stacked) .c_faq__heading {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .c_faq--split:not(.c_faq--stacked) .c_faq__items {
+    flex: 2 1 0;
+    min-width: 0;
+  }
+}
+
+@container (max-width: 640px) {
+  .c_faq__grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* brand.page / brand.contact always stack split and grid. */
+.c_faq--stacked .c_faq__grid {
+  grid-template-columns: 1fr;
+}
+</style>

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

@@ -35,6 +35,7 @@ import ShapesSection from '../shapes-section/ShapesSection.vue';
 import PageComponentMixin from './PageComponent.mixin.ts';
 import Shop from '../shop/Shop.vue';
 import BookingSection from '../booking-section/BookingSection.vue';
+import FaqSection from '../faq-section/FaqSection.vue';
 
 export default {
   components: {
@@ -60,6 +61,7 @@ export default {
     'bp-shapes-section': ShapesSection,
     'bp-shop-section': Shop,
     'bp-booking-section': BookingSection,
+    'bp-faq-section': FaqSection,
   },
   mixins: [PageComponentMixin],
 };

package/src/brand-page/components/section-heading/SectionHeading.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="hasTitle || hasDescription" data-component="section-heading">
+    <TextWrapper
+      v-if="hasTitle"
+      :text-style="titleStyle"
+      :text="title"
+      :slug="slug"
+      element="h2"
+    />
+    <TextWrapper
+      v-if="hasDescription"
+      class="tw-mt-4"
+      :text-style="descriptionStyle"
+      :text="renderDescription"
+      :slug="slug"
+      element="div"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import type { RichTextValue, TextStyleDeclaration } from '@brand-page/models';
+import { escapeContentText, getRenderText } from '@brand-page/utils';
+
+// Section title (the h2 — ADR 0004) + optional description, shared by the
+// item-list sections (see content-sections.md, near-term requirement).
+const props = withDefaults(
+  defineProps<{
+    title?: RichTextValue;
+    titleStyle?: TextStyleDeclaration;
+    description?: RichTextValue;
+    descriptionStyle?: TextStyleDeclaration;
+    slug?: string;
+  }>(),
+  {
+    title: undefined,
+    titleStyle: undefined,
+    description: undefined,
+    descriptionStyle: undefined,
+    slug: undefined,
+  },
+);
+
+const hasTitle = computed((): boolean => !!escapeContentText(props.title));
+const hasDescription = computed(
+  (): boolean => !!escapeContentText(props.description),
+);
+const renderDescription = computed(
+  (): RichTextValue => getRenderText(props.description as string),
+);
+</script>

package/src/brand-page/components/text-wrapper/TextWrapper.test.ts

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import TextWrapper from './TextWrapper.vue';
+
+const boldDoc = {
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [{ type: 'text', text: 'Hello', marks: [{ type: 'bold' }] }],
+    },
+  ],
+};
+
+const textStyle = { fontSize: '1.5em', color: 'rgb(255, 0, 0)' };
+
+const container = (wrapper: ReturnType<typeof mount>) =>
+  wrapper.find('.empty-para').element as HTMLElement;
+
+describe('TextWrapper', () => {
+  test('rich text ignores the text style by default — its marks own the look', () => {
+    const wrapper = mount(TextWrapper, { props: { text: boldDoc, textStyle } });
+
+    expect(wrapper.find('strong').text()).toBe('Hello');
+    expect(container(wrapper).style.fontSize).toBe('');
+    expect(container(wrapper).style.color).toBe('');
+  });
+
+  test('plain text is styled by the text style', () => {
+    const wrapper = mount(TextWrapper, { props: { text: 'Plain', textStyle } });
+
+    expect(container(wrapper).style.fontSize).toBe('1.5em');
+  });
+});