@designcrowd/library.brand-page 6.2.14 → 6.2.16-ast-faq

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/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/constants/misc.constants.ts

@@ -126,6 +126,15 @@ export const IMAGE_RESOLUTION_PRESETS = {
 export type ImagesSectionContentDisplayStyle =
   (typeof IMAGES_SECTION_CONTENT_DISPLAY_STYLES)[number];
 
+/** Centered and split are accordions; grid shows every answer. */
+export const FAQ_DISPLAY_STYLES = Object.freeze({
+  centered: 'faq-centered',
+  split: 'faq-split',
+  grid: 'faq-grid',
+} as const);
+
+export const FAQ_MAX_ITEMS = 6;
+
 export const HEADER_CSRF_TOKEN = 'csrf-token';
 
 export const STYLE_THEME_KEYS = Object.freeze({

package/src/brand-page/constants/styles.constants.ts

@@ -40,6 +40,8 @@ export const CONTENT_TEXT_STYLE_PROPERTY_KEYS = {
   buttonTextStyle: 'buttonTextStyle',
   copyrightStyle: 'copyrightStyle',
   successMessageStyle: 'successMessageStyle',
+  questionStyle: 'questionStyle',
+  answerStyle: 'answerStyle',
 } as const;
 
 export type ContentTextStylePropertyKey =

package/src/brand-page/models/content.model.ts

@@ -31,6 +31,7 @@ export const CONTENT_TYPES = {
   'shapes-section': 'shapes-section',
   'shop-section': 'shop-section',
   'booking-section': 'booking-section',
+  'faq-section': 'faq-section',
 } as const;
 
 export type ContentType = keyof typeof CONTENT_TYPES;

package/src/brand-page/models/index.ts

@@ -672,6 +672,35 @@ export interface BookingSectionContent extends Content {
   buttonTextStyle: TextStyleDeclaration;
 }
 
+export interface FaqItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
+  question: RichTextValue;
+  answer: RichTextValue;
+  // Overrides for personalisation
+  questionOverride?: string;
+  answerOverride?: string;
+}
+
+export interface FaqSectionContent extends Content {
+  type: 'faq-section';
+  title: RichTextValue;
+  description: RichTextValue;
+  displayStyle: string;
+  items: FaqItem[];
+  titleStyle: RteTextRole;
+  descriptionStyle: RteTextRole;
+  /** Shared by every question; a question's own formatting lives in its doc. */
+  questionStyle: RteTextRole;
+  /** Shared by every answer. */
+  answerStyle: RteTextRole;
+  backgroundStyle: BrandPageCssStyle;
+  /** `{ color }` for the +/- toggle. */
+  iconColor: BrandPageCssStyle;
+  /** `{ backgroundColor }`, the Divider section's shape. `'transparent'` hides the line. */
+  dividerColor: BrandPageCssStyle;
+}
+
 export class PageModel {
   title: string;
   contents: Content[];

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -308,6 +308,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
             "buttonText": "Get Started",
             "buttonTextStyle": {
               "applyAutoScale": true,
+              "color": "var(--palette-1)",
               "lineHeight": "1.5",
               "overflowWrap": "anywhere",
               "textAlign": "center",

package/src/brand-page/utils/container-text-color.util.test.ts

@@ -1244,6 +1244,87 @@ describe('applyTextContrast — standalone button labels (BP-5969)', () => {
   });
 });
 
+describe('applyTextContrast — FAQ shared question and answer styles', () => {
+  test('a new FAQ bakes a contrast colour into the shared question and answer styles', () => {
+    const styles = new PageStyles();
+
+    styles.colors = [
+      { id: 'palette-0', value: '#000000', type: 'palette' }, // dark brand
+      { id: 'palette-1', value: '#ffffff', type: 'palette' }, // light brand
+    ];
+
+    const content = {
+      id: 'faq',
+      type: 'faq-section',
+      backgroundStyle: { backgroundColor: 'var(--palette-0)' }, // dark band
+      questionStyle: { textStyleType: 'heading5' },
+      answerStyle: { textStyleType: 'paragraph2' },
+      items: [{ id: 'a', question: 'Q1', answer: 'A1' }],
+    } as unknown as Content & {
+      questionStyle: { color?: string };
+      answerStyle: { color?: string };
+    };
+
+    applyTextContrast(content, styles);
+
+    expect(content.questionStyle.color).toBe('var(--palette-1)'); // light on dark
+    expect(content.answerStyle.color).toBe('var(--palette-1)');
+  });
+});
+
+describe('applyTextContrast — FAQ icon and divider', () => {
+  const styles = (): PageStyles => {
+    const pageStyles = new PageStyles();
+
+    pageStyles.colors = [
+      { id: 'palette-0', value: '#000000', type: 'palette' },
+      { id: 'palette-1', value: '#ffffff', type: 'palette' },
+    ];
+
+    return pageStyles;
+  };
+
+  const faq = (iconColor: BrandPageCssStyle, dividerColor: BrandPageCssStyle) =>
+    ({
+      id: 'f',
+      type: 'faq-section',
+      titleStyle: { textStyleType: 'heading4' },
+      items: [],
+      iconColor,
+      dividerColor,
+      backgroundStyle: {},
+    }) as unknown as Content & {
+      iconColor: BrandPageCssStyle;
+      dividerColor: BrandPageCssStyle;
+    };
+
+  test('a new FAQ stores its title colour on the icon and divider', () => {
+    const content = faq({}, {});
+
+    applyTextContrast(content, styles());
+
+    const titleColour = (
+      content as unknown as { titleStyle: { color?: string } }
+    ).titleStyle.color;
+
+    expect(titleColour).toMatch(/^var\(--palette-/);
+    expect(content.iconColor.color).toBe(titleColour);
+    expect(content.dividerColor.backgroundColor).toBe(titleColour);
+  });
+
+  test('an explicit or transparent colour is left alone', () => {
+    const content = faq(
+      { color: '#abcdef' },
+      { backgroundColor: 'transparent' },
+    );
+
+    applyTextContrast(content, styles());
+
+    expect(content.iconColor.color).toBe('#abcdef');
+    expect(content.dividerColor.backgroundColor).toBe('transparent');
+  });
+});
+
 describe('applyTextContrast — social-links icon fill', () => {
   const styles = (): PageStyles => {
     const pageStyles = new PageStyles();

package/src/brand-page/utils/container-text-color.util.ts

@@ -17,6 +17,7 @@ import type {
   PageStyles,
   BrandPageType,
   ColorItem,
+  FaqSectionContent,
   ShopContent,
   SocialLinksContent,
   TextStyleDeclaration,
@@ -753,6 +754,21 @@ export const applyTextContrast = (
     }
   }
 
+  // Same for the FAQ's +/− icons and divider: with no base coat to inherit, a new section
+  // stores its title's contrast colour, so both start linked to the palette.
+  if (content.type === 'faq-section') {
+    const faq = content as FaqSectionContent;
+    const fill = titleSurfaceContrastFill(content, styles, brandPageType);
+
+    if (fill && isBlankColorValue(faq.iconColor?.color)) {
+      faq.iconColor = { ...faq.iconColor, color: fill };
+    }
+
+    if (fill && isBlankColorValue(faq.dividerColor?.backgroundColor)) {
+      faq.dividerColor = { ...faq.dividerColor, backgroundColor: fill };
+    }
+  }
+
   return content;
 };
 

package/src/brand-page/utils/content-callback-util.ts

@@ -17,6 +17,7 @@ import type {
   ButtonContent,
   PageModel,
   BookingSectionContent,
+  FaqSectionContent,
 } from '../models';
 
 export type ContentCallback = {
@@ -39,6 +40,7 @@ export type ContentCallback = {
   shopSectionContentCallback: (content: ShopContent) => void;
   buttonContentCallback: (content: ButtonContent) => void;
   bookingSectionContentCallback: (content: BookingSectionContent) => void;
+  faqSectionContentCallback: (content: FaqSectionContent) => void;
 };
 
 export const forEachPageCallContentCallback = (
@@ -101,6 +103,9 @@ export const forEachPageCallContentCallback = (
           content as BookingSectionContent,
         );
         break;
+      case 'faq-section':
+        callbacks.faqSectionContentCallback(content as FaqSectionContent);
+        break;
       case 'general-link':
       case 'website':
       case 'email':

package/src/brand-page/utils/migration/__snapshots__/migration-22-output/edited-brandsite-sections.v22.json

@@ -890,7 +890,8 @@
             "textStyleType": "button",
             "lineHeight": "1.5",
             "applyAutoScale": true,
-            "letterSpacing": "0"
+            "letterSpacing": "0",
+            "color": "var(--palette-1)"
           },
           "descriptionStyle": {
             "textAlign": "center",
@@ -1071,7 +1072,8 @@
             "textStyleType": "button",
             "lineHeight": "1.5",
             "applyAutoScale": true,
-            "letterSpacing": "0"
+            "letterSpacing": "0",
+            "color": "var(--palette-1)"
           },
           "descriptionStyle": {
             "textAlign": "left",
@@ -1141,7 +1143,8 @@
             "textStyleType": "button",
             "lineHeight": "1.5",
             "applyAutoScale": true,
-            "letterSpacing": "0"
+            "letterSpacing": "0",
+            "color": "var(--palette-1)"
           },
           "backgroundStyle": {
             "backgroundColor": "var(--palette-0)"