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

package/lib/src/bezier-curve-Bu9TMDs-.js

@@ -0,0 +1,14 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as L } from "./lib-vHQ3PSie.js";
+const r = {}, o = {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M0.802937 0.803029C0.987686 0.61828 1.25527 0.542992 1.50925 0.604297L10.5138 2.77781C10.5302 2.78177 10.5473 2.78582 10.565 2.79001C10.7472 2.8331 10.9937 2.89138 11.2035 3.02818C11.3841 3.14595 11.5354 3.30338 11.646 3.48849C11.7744 3.70352 11.8229 3.95206 11.8588 4.13584C11.8623 4.1537 11.8656 4.17094 11.8689 4.18749L12.5379 7.53203C12.728 7.51468 12.9207 7.53584 13.1044 7.5955C13.3121 7.66301 13.4697 7.77702 13.5902 7.87932C13.699 7.97171 13.8171 8.08983 13.935 8.20777L14.4589 8.73164C14.5768 8.84953 14.6949 8.96761 14.7873 9.07644C14.8896 9.19694 15.0036 9.35448 15.0711 9.56225C15.1636 9.84678 15.1636 10.1533 15.0711 10.4378C15.0036 10.6456 14.8896 10.8031 14.7873 10.9236C14.6949 11.0324 14.5768 11.1505 14.4589 11.2684L11.2683 14.459C11.1504 14.5769 11.0324 14.695 10.9235 14.7874C10.803 14.8897 10.6455 15.0037 10.4377 15.0712C10.1532 15.1637 9.84669 15.1637 9.56216 15.0712C9.35439 15.0037 9.19685 14.8897 9.07634 14.7874C8.96752 14.695 8.84945 14.5769 8.73156 14.459L8.20766 13.9351C8.08973 13.8172 7.97162 13.6991 7.87923 13.5903C7.77693 13.4698 7.66292 13.3122 7.59541 13.1045C7.53575 12.9208 7.51459 12.7281 7.53194 12.5379L4.1874 11.869C4.17085 11.8657 4.1536 11.8624 4.13574 11.8589C3.95197 11.823 3.70343 11.7745 3.4884 11.6461C3.30329 11.5355 3.14585 11.3842 3.02809 11.2036C2.89129 10.9938 2.83301 10.7473 2.78991 10.5651C2.78573 10.5474 2.78168 10.5303 2.77772 10.5139L0.604206 1.50934C0.5429 1.25536 0.618188 0.987778 0.802937 0.803029ZM9.06481 12.6667C9.11212 12.7178 9.17955 12.7856 9.28451 12.8906L9.77602 13.3821C9.88098 13.4871 9.94887 13.5545 9.99993 13.6018C10.051 13.5545 10.1189 13.4871 10.2239 13.3821L13.382 10.2239C13.487 10.119 13.5544 10.0511 13.6017 10C13.5544 9.94896 13.487 9.88107 13.382 9.77611L12.8905 9.2846C12.7856 9.17964 12.7177 9.11221 12.6666 9.0649C12.6155 9.11221 12.5476 9.17964 12.4427 9.2846L9.28451 12.4428C9.17955 12.5477 9.11212 12.6156 9.06481 12.6667ZM11.1858 8.42019L8.42009 11.1859L4.48157 10.3982C4.41975 10.3858 4.37179 10.3762 4.3304 10.3674C4.31258 10.3636 4.29745 10.3602 4.28449 10.3573C4.281 10.3444 4.27707 10.3294 4.27257 10.3118C4.26213 10.2708 4.25064 10.2232 4.23585 10.162L2.68778 3.74853L5.42817 6.48893C5.3136 6.74704 5.24993 7.03276 5.24993 7.33336C5.24993 8.48395 6.18267 9.41669 7.33327 9.41669C8.48386 9.41669 9.4166 8.48395 9.4166 7.33336C9.4166 6.18277 8.48386 5.25003 7.33327 5.25003C7.03267 5.25003 6.74694 5.31369 6.48883 5.42827L3.74844 2.68787L10.1619 4.23594C10.2231 4.25073 10.2707 4.26222 10.3117 4.27266C10.3294 4.27716 10.3443 4.2811 10.3572 4.28458C10.3601 4.29754 10.3635 4.31267 10.3673 4.33049C10.3761 4.37189 10.3857 4.41984 10.3981 4.48166L11.1858 8.42019ZM6.91269 6.92914C6.91545 6.92646 6.9182 6.92375 6.92093 6.92102C6.92366 6.91829 6.92637 6.91554 6.92905 6.91278C7.0339 6.81199 7.17635 6.75003 7.33327 6.75003C7.65543 6.75003 7.9166 7.01119 7.9166 7.33336C7.9166 7.65553 7.65543 7.91669 7.33327 7.91669C7.0111 7.91669 6.74993 7.65553 6.74993 7.33336C6.74993 7.17644 6.8119 7.03399 6.91269 6.92914Z"
+};
+function t(c, n) {
+  return C(), e("path", o);
+}
+const l = /* @__PURE__ */ L(r, [["render", t]]);
+export {
+  l as default
+};

package/lib/src/bezier-curve-outline-Dd_YnimO.js

@@ -0,0 +1,14 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as r } from "./lib-vHQ3PSie.js";
+const o = {}, t = {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M7.71036 2.58338H8.28949C8.45624 2.58335 8.62325 2.58333 8.76553 2.59495C8.92308 2.60782 9.11509 2.6386 9.30974 2.73779C9.57631 2.87361 9.79303 3.09033 9.92885 3.35689C10.028 3.55155 10.0588 3.74356 10.0717 3.90111C10.0721 3.90628 10.0725 3.91148 10.0729 3.91671L12.7978 3.91671C13.0482 3.51635 13.4929 3.25005 13.9999 3.25005C14.7823 3.25005 15.4166 3.88431 15.4166 4.66671C15.4166 5.44912 14.7823 6.08338 13.9999 6.08338C13.4929 6.08338 13.0482 5.81707 12.7978 5.41671H11.9999C13.1011 6.37837 13.8526 7.73036 14.0384 9.25743C14.059 9.25862 14.0792 9.26001 14.0989 9.26162C14.2564 9.27449 14.4484 9.30527 14.6431 9.40445C14.9096 9.54027 15.1264 9.757 15.2622 10.0236C15.3614 10.2182 15.3921 10.4102 15.405 10.5678C15.4166 10.7101 15.4166 10.8771 15.4166 11.0438V11.6229C15.4166 11.7897 15.4166 11.9567 15.405 12.099C15.3921 12.2565 15.3614 12.4485 15.2622 12.6432C15.1264 12.9098 14.9096 13.1265 14.6431 13.2623C14.4484 13.3615 14.2564 13.3923 14.0989 13.4051C13.9566 13.4168 13.7896 13.4167 13.6228 13.4167H13.0437C12.877 13.4167 12.7099 13.4168 12.5677 13.4051C12.4101 13.3923 12.2181 13.3615 12.0234 13.2623C11.7569 13.1265 11.5402 12.9098 11.4043 12.6432C11.3051 12.4485 11.2744 12.2565 11.2615 12.099C11.2499 11.9567 11.2499 11.7897 11.2499 11.623V11.0438C11.2499 10.8771 11.2499 10.71 11.2615 10.5678C11.2744 10.4102 11.3051 10.2182 11.4043 10.0236C11.5402 9.757 11.7569 9.54027 12.0234 9.40445C12.2007 9.31412 12.3758 9.28053 12.5247 9.26553C12.2824 7.76166 11.3083 6.50185 9.97893 5.8645C9.96454 5.9016 9.94796 5.93902 9.92885 5.97653C9.79303 6.24309 9.57631 6.45982 9.30974 6.59564C9.11509 6.69482 8.92308 6.7256 8.76553 6.73847C8.62325 6.7501 8.45624 6.75007 8.28948 6.75005L7.73326 6.75005C7.72563 6.75005 7.718 6.75005 7.71036 6.75005C7.54361 6.75007 7.3766 6.7501 7.23432 6.73847C7.07677 6.7256 6.88476 6.69482 6.6901 6.59564C6.42354 6.45982 6.20682 6.24309 6.071 5.97653C6.05188 5.93902 6.03531 5.9016 6.02091 5.8645C4.69153 6.50185 3.71742 7.76166 3.47514 9.26553C3.62401 9.28053 3.79911 9.31412 3.97641 9.40445C4.24297 9.54027 4.45969 9.75699 4.59552 10.0236C4.6947 10.2182 4.72548 10.4102 4.73835 10.5678C4.74997 10.7101 4.74995 10.8771 4.74993 11.0438V11.6229C4.74995 11.7897 4.74997 11.9567 4.73835 12.099C4.72548 12.2565 4.6947 12.4485 4.59552 12.6432C4.45969 12.9098 4.24297 13.1265 3.97641 13.2623C3.78175 13.3615 3.58974 13.3923 3.4322 13.4051C3.28991 13.4168 3.12289 13.4167 2.95613 13.4167H2.37705C2.21029 13.4167 2.04327 13.4168 1.90098 13.4051C1.74343 13.3923 1.55142 13.3615 1.35677 13.2623C1.09021 13.1265 0.873485 12.9098 0.737664 12.6432C0.638482 12.4485 0.607702 12.2565 0.59483 12.099C0.583205 11.9567 0.58323 11.7897 0.583254 11.6229V11.0438C0.58323 10.8771 0.583205 10.7101 0.59483 10.5678C0.607702 10.4102 0.638482 10.2182 0.737664 10.0236C0.873485 9.75699 1.09021 9.54027 1.35677 9.40445C1.55142 9.30527 1.74343 9.27449 1.90098 9.26162C1.92069 9.26001 1.94086 9.25862 1.96144 9.25743C2.14724 7.73036 2.89876 6.37837 3.99992 5.41671H3.202C2.95168 5.81707 2.5069 6.08338 1.99992 6.08338C1.21752 6.08338 0.583256 5.44912 0.583256 4.66671C0.583256 3.88431 1.21752 3.25005 1.99992 3.25005C2.5069 3.25005 2.95168 3.51635 3.202 3.91671L5.92694 3.91671C5.92733 3.91148 5.92774 3.90628 5.92816 3.90111C5.94104 3.74356 5.97182 3.55155 6.071 3.35689C6.20682 3.09033 6.42354 2.87361 6.6901 2.73779C6.88476 2.6386 7.07677 2.60782 7.23432 2.59495C7.3766 2.58333 7.5436 2.58335 7.71036 2.58338ZM7.41659 4.81878V4.40005C7.41659 4.25161 7.41692 4.15592 7.41957 4.08636C7.48913 4.0837 7.58482 4.08338 7.73326 4.08338H8.26659C8.41503 4.08338 8.51071 4.0837 8.58027 4.08636C8.58293 4.15592 8.58326 4.25161 8.58326 4.40005V4.8188C8.58301 4.82977 8.58302 4.84071 8.58326 4.85162V4.93338C8.58326 5.08182 8.58293 5.1775 8.58028 5.24706C8.51071 5.24972 8.41503 5.25005 8.26659 5.25005H7.73326C7.58482 5.25005 7.48913 5.24972 7.41957 5.24706C7.41691 5.1775 7.41659 5.08182 7.41659 4.93338V4.85164C7.41683 4.84072 7.41683 4.82976 7.41659 4.81878ZM2.08624 10.753C2.08358 10.8226 2.08326 10.9183 2.08326 11.0667V11.6C2.08326 11.7485 2.08358 11.8442 2.08624 11.9137C2.1558 11.9164 2.25148 11.9167 2.39992 11.9167H2.93326C3.0817 11.9167 3.17738 11.9164 3.24694 11.9137C3.2496 11.8442 3.24992 11.7485 3.24992 11.6V11.0667C3.24992 10.9183 3.2496 10.8226 3.24694 10.753C3.17738 10.7504 3.0817 10.75 2.93326 10.75H2.39992C2.25148 10.75 2.1558 10.7504 2.08624 10.753ZM12.7529 10.753C12.7503 10.8226 12.7499 10.9183 12.7499 11.0667V11.6C12.7499 11.7485 12.7502 11.8442 12.7529 11.9137C12.8225 11.9164 12.9182 11.9167 13.0666 11.9167H13.5999C13.7484 11.9167 13.844 11.9164 13.9136 11.9137C13.9163 11.8442 13.9166 11.7485 13.9166 11.6V11.0667C13.9166 10.9183 13.9163 10.8226 13.9136 10.753C13.844 10.7504 13.7484 10.75 13.5999 10.75H13.0666C12.9182 10.75 12.8225 10.7504 12.7529 10.753Z"
+};
+function c(n, V) {
+  return C(), e("path", t);
+}
+const l = /* @__PURE__ */ r(o, [["render", c]]);
+export {
+  l as default
+};

package/lib/src/bold-Bsa366H0.js

@@ -0,0 +1,14 @@
+import { openBlock as C, createElementBlock as e } from "vue";
+import { _ as o } from "./lib-vHQ3PSie.js";
+const r = {}, t = {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M11.5857 7.51786C12.0763 7.89286 12.4488 8.36607 12.7032 8.9375C12.9576 9.49107 13.0485 10.0893 12.9758 10.7321C12.8849 11.6607 12.467 12.4375 11.722 13.0625C10.977 13.6875 10.1139 14 9.13265 14H3.4361C3.3089 14 3.19988 13.9554 3.10902 13.8661C3.03634 13.7946 3 13.6964 3 13.5714V12.2857C3 12.1607 3.03634 12.0625 3.10902 11.9911C3.19988 11.9018 3.3089 11.8571 3.4361 11.8571H4.3083V4.14286H3.4361C3.3089 4.14286 3.19988 4.10714 3.10902 4.03571C3.03634 3.94643 3 3.83929 3 3.71429V2.42857C3 2.30357 3.03634 2.20536 3.10902 2.13393C3.19988 2.04464 3.3089 2 3.4361 2H8.86009C9.89582 2 10.7589 2.375 11.4494 3.125C12.1399 3.875 12.4306 4.75893 12.3216 5.77679C12.2671 6.41964 12.0218 7 11.5857 7.51786ZM6.48879 4.14286V6.71429H8.86009C9.2235 6.71429 9.5324 6.58929 9.7868 6.33929C10.0412 6.08929 10.1684 5.78571 10.1684 5.42857C10.1684 5.07143 10.0412 4.76786 9.7868 4.51786C9.5324 4.26786 9.2235 4.14286 8.86009 4.14286H6.48879ZM8.86009 11.8571C9.29618 11.8571 9.6596 11.7143 9.95033 11.4286C10.2411 11.125 10.3864 10.7679 10.3864 10.3571C10.3864 9.94643 10.2411 9.59821 9.95033 9.3125C9.6596 9.00893 9.29618 8.85714 8.86009 8.85714H6.48879V11.8571H8.86009Z"
+};
+function c(n, _) {
+  return C(), e("path", t);
+}
+const s = /* @__PURE__ */ o(r, [["render", c]]);
+export {
+  s as default
+};

package/lib/src/brand-page/constants/misc.constants.d.ts

@@ -77,6 +77,13 @@ export declare const IMAGE_RESOLUTION_PRESETS: {
     readonly ULTRA_HD: "q=80&w=2160";
 };
 export type ImagesSectionContentDisplayStyle = (typeof IMAGES_SECTION_CONTENT_DISPLAY_STYLES)[number];
+/** Centered and split are accordions; grid shows every answer. */
+export declare const FAQ_DISPLAY_STYLES: Readonly<{
+    readonly centered: "faq-centered";
+    readonly split: "faq-split";
+    readonly grid: "faq-grid";
+}>;
+export declare const FAQ_MAX_ITEMS = 6;
 export declare const HEADER_CSRF_TOKEN = "csrf-token";
 export declare const STYLE_THEME_KEYS: Readonly<{
     LogoTextColor: "logo-text-color";

package/lib/src/brand-page/constants/misc.constants.js

@@ -103,6 +103,13 @@ export const IMAGE_RESOLUTION_PRESETS = {
     FULL_HD: 'q=80&w=1080',
     ULTRA_HD: 'q=80&w=2160',
 };
+/** 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',
+});
+export const FAQ_MAX_ITEMS = 6;
 export const HEADER_CSRF_TOKEN = 'csrf-token';
 export const STYLE_THEME_KEYS = Object.freeze({
     LogoTextColor: 'logo-text-color',

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

@@ -33,5 +33,7 @@ export declare const CONTENT_TEXT_STYLE_PROPERTY_KEYS: {
     readonly buttonTextStyle: "buttonTextStyle";
     readonly copyrightStyle: "copyrightStyle";
     readonly successMessageStyle: "successMessageStyle";
+    readonly questionStyle: "questionStyle";
+    readonly answerStyle: "answerStyle";
 };
 export type ContentTextStylePropertyKey = keyof typeof CONTENT_TEXT_STYLE_PROPERTY_KEYS;

package/lib/src/brand-page/constants/styles.constants.js

@@ -35,4 +35,6 @@ export const CONTENT_TEXT_STYLE_PROPERTY_KEYS = {
     buttonTextStyle: 'buttonTextStyle',
     copyrightStyle: 'copyrightStyle',
     successMessageStyle: 'successMessageStyle',
+    questionStyle: 'questionStyle',
+    answerStyle: 'answerStyle',
 };

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

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

package/lib/src/brand-page/models/content.model.js

@@ -31,6 +31,7 @@ export const CONTENT_TYPES = {
     'shapes-section': 'shapes-section',
     'shop-section': 'shop-section',
     'booking-section': 'booking-section',
+    'faq-section': 'faq-section',
 };
 export const PERSONALISATION_ROLES = {
     profile: 'profile',

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

@@ -478,6 +478,32 @@ export interface BookingSectionContent extends Content {
     buttonLinkType: ButtonLinkType;
     buttonTextStyle: TextStyleDeclaration;
 }
+export interface FaqItem {
+    /** Stable per-item identifier. See ImageItem.id. */
+    id: string;
+    question: RichTextValue;
+    answer: RichTextValue;
+    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 declare class PageModel {
     title: string;
     contents: Content[];

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

@@ -490,6 +490,18 @@ export const applyTextContrast = (content, styles, brandPageType) => {
             }
         }
     }
+    // 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;
+        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/lib/src/brand-page/utils/content-callback-util.d.ts

@@ -1,4 +1,4 @@
-import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel, BookingSectionContent } from '../models';
+import type { ProfileContent, TextContent, ContactFormContent, ImageContent, BannerSectionContent, SocialLinksContent, ImageGalleryContent, TestimonialSectionContent, AboutSectionContent, ImagesSectionContent, MailingListContent, SupportMeContent, RequestPaymentContent, ShapesSectionContent, ShopContent, ButtonContent, PageModel, BookingSectionContent, FaqSectionContent } from '../models';
 export type ContentCallback = {
     profileContentCallback: (content: ProfileContent) => void;
     textContentCallback: (content: TextContent) => void;
@@ -17,5 +17,6 @@ export type ContentCallback = {
     shopSectionContentCallback: (content: ShopContent) => void;
     buttonContentCallback: (content: ButtonContent) => void;
     bookingSectionContentCallback: (content: BookingSectionContent) => void;
+    faqSectionContentCallback: (content: FaqSectionContent) => void;
 };
 export declare const forEachPageCallContentCallback: (page: PageModel, callbacks: ContentCallback) => void;

package/lib/src/brand-page/utils/content-callback-util.js

@@ -49,6 +49,9 @@ export const forEachPageCallContentCallback = (page, callbacks) => {
             case 'booking-section':
                 callbacks.bookingSectionContentCallback(content);
                 break;
+            case 'faq-section':
+                callbacks.faqSectionContentCallback(content);
+                break;
             case 'general-link':
             case 'website':
             case 'email':

package/lib/src/brand-page/utils/view-model.util.js

@@ -626,6 +626,20 @@ const mapToTestimonialSectionViewModel = (content, styles) => {
         isFullWidth: true,
     }, styles);
 };
+const mapToFaqSectionViewModel = (content, styles) => {
+    return applyViewModelTextStyles({
+        ...content,
+        role: content.type,
+        type: 'faq-section',
+        // No `color` pre-seed, as in the testimonial mapper: it would read as an override.
+        titleStyle: { ...content.titleStyle },
+        descriptionStyle: { ...content.descriptionStyle },
+        questionStyle: { ...content.questionStyle },
+        answerStyle: { ...content.answerStyle },
+        items: content.items ?? [],
+        isFullWidth: true,
+    }, styles);
+};
 const mapToSocialLinksViewModel = (content, styles, brandPageType) => {
     return applyViewModelTextStyles({
         ...content,
@@ -894,6 +908,8 @@ export const mapToViewModel = (styles, brandPageType, options) => (content) => {
             return mapToBannerSectionViewModel(content, styles, options);
         case 'booking-section':
             return mapToBookingSectionViewModel(content, styles);
+        case 'faq-section':
+            return mapToFaqSectionViewModel(content, styles);
         case 'about-section':
             return mapToAboutSectionViewModel(content, styles);
         case 'images-section':

package/lib/src/brand-page/view-models.d.ts

@@ -1,6 +1,6 @@
-import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, ColorItem, RichTextValue } from './models';
+import type { ButtonWithModalContent, ProfileContent, TextContent, VideoContent, ImageContent, ContentType, ButtonStyles, LogoStyles, MapContent, ImageGalleryContent, GalleryStyles, MailingListContent, RequestPaymentContent, ShopContent, SupportMeContent, ContactFormContent, BannerSectionContent, BrandPageType, SocialLinksContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ButtonLinkType, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, TextMediaItem, TextShapeItem, TextStyleDeclaration, AspectRatio, LogoImageModel, LogoTemplateImageModel, CookieOptions, BookingSectionContent, FaqSectionContent, MediaTypes, TextStyles, BackgroundStyle, BackgroundShape, PersonalisationRole, SaveContactOptions, ColorItem, RichTextValue } from './models';
 import type { ImagesSectionContentDisplayStyle } from './constants';
-export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section';
+export type ViewModelType = 'button' | 'image' | 'image-gallery' | 'logo' | 'map' | 'mailing-list' | 'profile' | 'support-me' | 'request-payment' | 'text' | 'video' | 'contact-form' | 'banner-section' | 'images-section' | 'about-section' | 'divider-section' | 'testimonial-section' | 'social-links' | 'shapes-section' | 'shop-section' | 'booking-section' | 'faq-section';
 export interface ContentViewModel {
     id: string;
     type: ViewModelType;
@@ -133,6 +133,9 @@ export interface BookingSectionViewModel extends ContentViewModel, Omit<BookingS
     buttonViewModel: ButtonViewModel;
     isFullWidth: boolean;
 }
+export interface FaqSectionViewModel extends ContentViewModel, Omit<FaqSectionContent, 'type'> {
+    isFullWidth: boolean;
+}
 export interface PageHeaderViewModel extends Omit<PageHeaderDesktop | PageHeaderMobile, 'logoImage' | 'logoImageStyle' | 'isLogoOptional' | 'viewport' | 'isLogoVisible' | 'logoTemplateImage' | 'logoImageHeight' | 'logoImageWidth' | 'headerButton' | 'backgroundStyle'> {
     logo: LogoViewModel;
     pages: PageViewModel[];

package/lib/src/brand-page-maker/assessors/faq-accordion-color-field-visibility.assessor.d.ts

@@ -0,0 +1,3 @@
+import type { FaqSectionContent } from '@brand-page';
+import type { VisibilityAssessor } from '../models';
+export declare const faqAccordionColorFieldVisibilityAssessor: VisibilityAssessor<FaqSectionContent | undefined>;

package/lib/src/brand-page-maker/assessors/faq-accordion-color-field-visibility.assessor.js

@@ -0,0 +1,4 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+// Icon and divider colours paint the accordion toggle and its item dividers;
+// grid shows neither, so the fields have nothing to colour there.
+export const faqAccordionColorFieldVisibilityAssessor = (content) => content?.displayStyle !== FAQ_DISPLAY_STYLES.grid;

package/lib/src/brand-page-maker/assessors/index.d.ts

@@ -8,6 +8,7 @@ export * from './media-section-items-field.assessor';
 export * from './shape-section-items-field.assessor';
 export * from './shape-size-visibility.assessor';
 export * from './divider-toggle-field-visibility.assessor';
+export * from './faq-accordion-color-field-visibility.assessor';
 export * from './color-replacement-visibility.assessor';
 export * from './color-replacement-profile-visibility.assessor';
 export * from './color-replacement-icon-visibility.assessor';

package/lib/src/brand-page-maker/assessors/index.js

@@ -8,6 +8,7 @@ export * from './media-section-items-field.assessor';
 export * from './shape-section-items-field.assessor';
 export * from './shape-size-visibility.assessor';
 export * from './divider-toggle-field-visibility.assessor';
+export * from './faq-accordion-color-field-visibility.assessor';
 export * from './color-replacement-visibility.assessor';
 export * from './color-replacement-profile-visibility.assessor';
 export * from './color-replacement-icon-visibility.assessor';

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -933,6 +933,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             id: string;
             name: string;
             index?: number;
+            itemId?: string;
             doc: unknown;
         }): void;
         applyCardContrastToItem({ id }: {

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -412,6 +412,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             id: string;
             name: string;
             index?: number;
+            itemId?: string;
             doc: unknown;
         }): void;
         applyCardContrastToItem({ id }: {

package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js

@@ -534,6 +534,8 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             id: props.rawId,
             name: props.name,
             index: props.textItemIndex,
+            // An FAQ question's editor is bound to its item; Apply to all keeps that item's live doc.
+            itemId: props.item?.id,
             doc: sanitizeRteJson(editor.getJSON()),
         });
     };

package/lib/src/brand-page-maker/constants/config-settings-constant.d.ts

@@ -1,4 +1,4 @@
-import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent } from '@brand-page';
+import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent, FaqSectionContent } from '@brand-page';
 import type { ContentSettingsConfig, ContentSettingsField, ContentSettingsMultiField } from '../models';
 export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, "version" | "logoVariation" | "logoImageHeight" | "logoImageWidth" | "logoLastUpdate" | "logoImageBase64Url">>;
 export declare const GENERAL_LINK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<GeneralLinkContent>;
@@ -51,4 +51,5 @@ export declare const SHOP_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<S
     isShippingEnabled: boolean;
 }>;
 export declare const BOOKING_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<BookingSectionContent>;
+export declare const FAQ_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<FaqSectionContent>;
 export declare const CONTENT_SETTINGS_CONFIGS: () => Record<ContentType, ContentSettingsConfig<any>>;

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -1,13 +1,14 @@
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
-import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
+import { FAQ_DISPLAY_STYLES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
+import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, createInitialFaqSectionContent, } from '../models';
 import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
-import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardColorVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
+import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, faqAccordionColorFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardColorVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
 import { contactFormCardColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
 import { testimonialDisplayStyleConvertor } from '../convertors/testimonial-display-style-convertor';
+import { faqDisplayStyleConvertor } from '../convertors/faq-display-style.convertor';
 import { pageValidator, urlValidator } from '../validators';
 import { imagesSectionAspectRatioVisibilityAssessor } from '../assessors/images-section-aspect-ratio-visibility.assessor';
 import { bannerLinkTypeVisibilityAssessor, bannerSectionPageVisibilityAssessor, bannerSectionUrlVisibilityAssessor, bannerDisplayTypeVisibilityAssessor, bannerOverlayOptionsVisibilityAssessor, } from '../assessors/banner-section-description-visibility.assessor';
@@ -15,7 +16,7 @@ import { imagesSectionTextStyleVisibilityAssessor } from '../assessors/images-se
 import { bannerPlaceholderFieldTypeAssessor, bannerSectionFieldTypeAssessor, bannerSectionRoleTypeAssessor, } from '../assessors/banner-section-field.assessor';
 import { isValidSvgUrl } from '@brand-page/utils';
 import { brandPageOrbrandContactTypeVisibilityAssessor, brandSiteTypeVisibilityAssessor, } from '../assessors/brand-page-type-visibility.assessor';
-import { contentSettingsTr } from '@src/composables/useTranslate';
+import { commonTr, contentSettingsTr } from '@src/composables/useTranslate';
 const MediaFieldNames = {
     aspectRatio: 'aspectRatio',
     iconUrl: 'iconUrl',
@@ -2803,6 +2804,116 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
     isEnabled: true,
     isLocked: false,
 });
+const FAQ_FIELD_GROUP_IDS = {
+    settings: 'settings',
+    items: 'items',
+    style: 'style',
+};
+export const FAQ_SECTION_SETTINGS_CONFIG = () => ({
+    type: 'faq-section',
+    category: 'general',
+    createInitialContent: createInitialFaqSectionContent,
+    displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
+    defaultIconName: 'question-circle-filled',
+    displayName: contentSettingsTr(`faqSectionDisplayName`),
+    fieldGroups: [
+        {
+            id: FAQ_FIELD_GROUP_IDS.settings,
+            displayName: contentSettingsTr(`settingsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: FAQ_FIELD_GROUP_IDS.items,
+            displayName: contentSettingsTr(`faqItemsDisplayName`),
+            isCollapsed: false,
+        },
+        {
+            id: FAQ_FIELD_GROUP_IDS.style,
+            displayName: contentSettingsTr(`styleDisplayName`),
+            isCollapsed: true,
+        },
+    ],
+    fields: {
+        titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
+        descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
+        // Edited in each item's editor (FaqItemsField), not as section fields.
+        questionStyle: undefined,
+        answerStyle: undefined,
+        title: {
+            type: 'text',
+            placeholder: contentSettingsTr(`titlePlaceholder`),
+            title: contentSettingsTr(`titleTitle`),
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            maxLength: 200,
+        },
+        titleOverride: {
+            type: 'personalisation-override',
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'title'),
+        },
+        description: {
+            type: 'textarea',
+            placeholder: contentSettingsTr(`descriptionPlaceholder`),
+            title: contentSettingsTr(`descriptionTitle`),
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            maxLength: 1000,
+        },
+        descriptionOverride: {
+            type: 'personalisation-override',
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            visibilityAssessor: (c, b) => personalisationOverrideVisibility(c, b, 'description'),
+        },
+        // FaqItemsField owns the question/answer inputs and the FAQ_MAX_ITEMS cap.
+        items: {
+            type: 'faq-items',
+            defaultValue: [],
+            groupId: FAQ_FIELD_GROUP_IDS.items,
+        },
+        displayStyle: {
+            type: 'radio',
+            role: 'multi',
+            defaultValue: FAQ_DISPLAY_STYLES.centered,
+            title: contentSettingsTr(`displayStyleTitle`),
+            optionsConvertor: faqDisplayStyleConvertor,
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            variant: 'icon',
+        },
+        ...PADDING_CONTROL_FIELDS(FAQ_FIELD_GROUP_IDS.style),
+        iconColor: {
+            type: 'color',
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            disableTransparent: true,
+            visibilityAssessor: faqAccordionColorFieldVisibilityAssessor,
+            title: commonTr(`iconColor`),
+            valueConvertor: colorConvertor,
+        },
+        // Transparent allowed on purpose (it hides the line), unlike the Divider section's field.
+        dividerColor: {
+            type: 'color',
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            visibilityAssessor: faqAccordionColorFieldVisibilityAssessor,
+            title: contentSettingsTr(`dividerColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+        },
+        backgroundStyle: {
+            type: 'color',
+            groupId: FAQ_FIELD_GROUP_IDS.style,
+            defaultValue: {},
+            isInline: true,
+            showToggle: false,
+            title: contentSettingsTr(`backgroundColorTitle`),
+            valueConvertor: backgroundColorConvertor,
+        },
+    },
+    isEnabled: true,
+    isLocked: false,
+});
 export const CONTENT_SETTINGS_CONFIGS = () => ({
     logo: LOGO_SETTINGS_CONFIG(),
     'general-link': GENERAL_LINK_CONTENT_SETTINGS_CONFIG(),
@@ -2836,4 +2947,5 @@ export const CONTENT_SETTINGS_CONFIGS = () => ({
     'shapes-section': SHAPES_SECTION_SETTINGS_CONFIG(),
     'shop-section': SHOP_SECTION_SETTINGS_CONFIG(),
     'booking-section': BOOKING_SECTION_SETTINGS_CONFIG(),
+    'faq-section': FAQ_SECTION_SETTINGS_CONFIG(),
 });

package/lib/src/brand-page-maker/constants/personalisation.constant.d.ts

@@ -1,8 +1,8 @@
-import type { PersonalisationMappingType, TestimonialItems, TextItem, TextMediaItem, UserPersonalisationItem, UserPersonalisationSection } from '@brand-page/models';
+import type { FaqItem, PersonalisationMappingType, TestimonialItems, TextItem, TextMediaItem, UserPersonalisationItem, UserPersonalisationSection } from '@brand-page/models';
 export type ContentPersonalisationMapping<T> = {
     [key in Exclude<keyof UserPersonalisationSection, 'items'> | keyof UserPersonalisationItem]?: (keyof T)[];
 };
 export declare const DEFAULT_PERSONALISATION_MAPPING: ContentPersonalisationMapping<any>;
-export declare const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING: ContentPersonalisationMapping<TextMediaItem & TestimonialItems & TextItem>;
+export declare const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING: ContentPersonalisationMapping<TextMediaItem & TestimonialItems & TextItem & FaqItem>;
 export declare const TEXT_MEDIA_CONTENT_TYPES: PersonalisationMappingType[];
 export declare const PERSONALISATION_MAPPINGS: Partial<Record<PersonalisationMappingType, ContentPersonalisationMapping<any>>>;

package/lib/src/brand-page-maker/constants/personalisation.constant.js

@@ -17,8 +17,8 @@ export const DEFAULT_PERSONALISATION_MAPPING = {
     url: ['url'],
 };
 export const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING = {
-    itemTitle: ['title', 'imageTitle', 'name'],
-    itemDescription: ['paragraph', 'testimonials', 'text'],
+    itemTitle: ['title', 'imageTitle', 'name', 'question'],
+    itemDescription: ['paragraph', 'testimonials', 'text', 'answer'],
     itemDescriptionShort: ['position'],
     imageUrls: ['imageUrl'],
 };
@@ -29,6 +29,7 @@ export const TEXT_MEDIA_CONTENT_TYPES = [
     'text-media-items',
     'image-gallery',
     'text',
+    'faq-section',
 ];
 export const PERSONALISATION_MAPPINGS = {
     'general-link': BUTTON_PERSONALISATION_MAPPING,

package/lib/src/brand-page-maker/convertors/faq-display-style.convertor.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonGroupConfig, ValueConvertor } from '../models';
+import type { FaqSectionContent } from '@brand-page/models';
+export declare const faqDisplayStyleConvertor: ValueConvertor<string | null, ButtonGroupConfig, Partial<FaqSectionContent>>;

package/lib/src/brand-page-maker/convertors/faq-display-style.convertor.js

@@ -0,0 +1,49 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+const ICON_VIEW_BOX = '0 0 96 56';
+export const faqDisplayStyleConvertor = {
+    convertBackToMultipleValues: true,
+    convert(value) {
+        return {
+            options: [
+                // An empty title suppresses ButtonGroup's label-under-icon paragraph.
+                {
+                    title: '',
+                    value: FAQ_DISPLAY_STYLES.centered,
+                    isSelected: value === FAQ_DISPLAY_STYLES.centered,
+                    iconName: 'display-style-faq-1',
+                    iconViewBox: ICON_VIEW_BOX,
+                    dataAttribute: 'data-test-btn-faq-centered',
+                },
+                {
+                    title: '',
+                    value: FAQ_DISPLAY_STYLES.split,
+                    isSelected: value === FAQ_DISPLAY_STYLES.split,
+                    iconName: 'display-style-faq-2',
+                    iconViewBox: ICON_VIEW_BOX,
+                    dataAttribute: 'data-test-btn-faq-split',
+                },
+                {
+                    title: '',
+                    value: FAQ_DISPLAY_STYLES.grid,
+                    isSelected: value === FAQ_DISPLAY_STYLES.grid,
+                    iconName: 'display-style-faq-3',
+                    iconViewBox: ICON_VIEW_BOX,
+                    dataAttribute: 'data-test-btn-faq-grid',
+                },
+            ],
+            // Label-less buttons only fill their slot in ButtonGroup's grid mode.
+            columns: 3,
+        };
+    },
+    // The heading sits left beside the accordion in split, centred above it otherwise.
+    convertBack(config) {
+        const displayStyle = config.options.find((v) => v.isSelected)?.value ??
+            FAQ_DISPLAY_STYLES.centered;
+        const textAlign = displayStyle === FAQ_DISPLAY_STYLES.split ? 'left' : 'center';
+        return {
+            displayStyle,
+            titleStyle: { textAlign },
+            descriptionStyle: { textAlign },
+        };
+    },
+};

package/lib/src/brand-page-maker/models/content-settings-configs.d.ts

@@ -52,6 +52,7 @@ export declare const ITEM_FIELD_TYPES: {
     readonly 'color-replacements': "color-replacements";
     readonly 'testimonial-items': "testimonial-items";
     readonly 'text-items': "text-items";
+    readonly 'faq-items': "faq-items";
     readonly 'page-dropdown': "page-dropdown";
     readonly 'personalisation-override': "personalisation-override";
 };

package/lib/src/brand-page-maker/models/content-settings-configs.js

@@ -55,6 +55,7 @@ export const ITEM_FIELD_TYPES = {
     'color-replacements': 'color-replacements',
     'testimonial-items': 'testimonial-items',
     'text-items': 'text-items',
+    'faq-items': 'faq-items',
     'page-dropdown': 'page-dropdown',
     'personalisation-override': 'personalisation-override',
 };

package/lib/src/brand-page-maker/models/content-settings.d.ts

@@ -1,5 +1,5 @@
 import { BrandPageModel } from '@brand-page';
-import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent } from '@brand-page';
+import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent, FaqSectionContent } from '@brand-page';
 import type { CreateInitialContentFunction } from './content-settings-configs';
 import type { CreateInitialContentOptions } from '@shared/content-settings/models';
 export declare const createInitialButtonContent: (type: ContentType, iconUrl: string, options?: CreateInitialContentOptions) => () => ButtonContent;
@@ -18,6 +18,7 @@ export declare const createInitialSupportMeContent: (options?: CreateInitialCont
 export declare const createInitialContactFormContent: CreateInitialContentFunction<ContactFormContent>;
 export declare const createInitialBannerSectionContent: CreateInitialContentFunction<BannerSectionContent>;
 export declare const createInitialBookingSectionContent: CreateInitialContentFunction<BookingSectionContent>;
+export declare const createInitialFaqSectionContent: CreateInitialContentFunction<FaqSectionContent>;
 export declare const createInitialImagesSectionContent: CreateInitialContentFunction<ImagesSectionContent>;
 export declare const createInitialTestimonialSectionContent: CreateInitialContentFunction<TestimonialSectionContent>;
 export declare const createInitialAboutSectionContent: CreateInitialContentFunction<AboutSectionContent>;