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

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -394,7 +394,11 @@ import {
 } from '@designcrowd/fe-shared-lib';
 import { EditorContent } from '@tiptap/vue-3';
 import { BubbleMenu } from '@tiptap/vue-3/menus';
-import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
+import {
+  useRichTextEditor,
+  writeListItemStyles,
+} from '../../composables/rich-text-editor/useRichTextEditor';
+import type { RteItemStyleTarget } from '@shared/content-settings/models';
 import FontPicker from '@shared/font-family-selector/FontPicker.vue';
 import ColorField from '@shared/content-settings/components/color-field/ColorField.vue';
 import UrlField from '@shared/content-settings/components/url-field/UrlField.vue';
@@ -460,6 +464,8 @@ const props = withDefaults(
     textItemIndex: number;
     item: TextItem;
     contentType: string;
+    /** Edit a list item's text: toolbar styles go to that item's own style field. */
+    itemStyleTarget?: RteItemStyleTarget;
   }>(),
   {
     id: '',
@@ -472,6 +478,7 @@ const props = withDefaults(
     textStyleName: '',
     styles: () => ({}),
     rawId: '',
+    itemStyleTarget: undefined,
   },
 );
 
@@ -602,6 +609,29 @@ const isAddLinkButtonDisabled = computed(() => {
   );
 });
 
+// Where this editor's role/colour writes land: the list item it edits, a Text block
+// item, or the section's own `${name}Style`.
+const writeStyles = (value: TextStyleDeclaration): void => {
+  if (writeListItemStyles(contentSettingStore, props, value)) {
+    return;
+  }
+
+  if (props.name === 'textItems') {
+    contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+      id: props.rawId,
+      name: props.name,
+      value,
+      index: props.textItemIndex,
+    });
+  } else {
+    contentSettingStore.updateTextStyles({
+      id: props.rawId,
+      name: props.name,
+      value,
+    });
+  }
+};
+
 // Keeps a text ITEM's own style in step with the global text style it links to.
 watch(
   () =>
@@ -641,20 +671,7 @@ watch(
           backgroundColor: undefined,
         };
 
-        if (props.name === 'textItems') {
-          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-            index: props.textItemIndex,
-          });
-        } else {
-          contentSettingStore.updateTextStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-          });
-        }
+        writeStyles(value);
       }
     } else {
       // make sure text style options are updated and selected Global style is set to none
@@ -685,26 +702,10 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
     if (optionSelected) {
       selectedGlobalTextStyles.value = item.value;
       if (option.value === undefined) {
-        if (props.name === 'textItems') {
-          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-            id: props.rawId,
-            name: props.name,
-            value: {
-              textStyleType: undefined,
-              fontSize: fontSettings.selectedFontSize,
-            },
-            index: props.textItemIndex,
-          });
-        } else {
-          contentSettingStore.updateTextStyles({
-            id: props.rawId,
-            name: props.name,
-            value: {
-              textStyleType: undefined,
-              fontSize: fontSettings.selectedFontSize,
-            },
-          });
-        }
+        writeStyles({
+          textStyleType: undefined,
+          fontSize: fontSettings.selectedFontSize,
+        });
       } else {
         const selectedStyle: BrandPageCssStyle =
           styleSettingsStore.textStyles.textStyleOptions[
@@ -723,20 +724,7 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
           backgroundColor: undefined,
         };
 
-        if (props.name === 'textItems') {
-          contentSettingStore.updateTextItemTextStyleTypeWithStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-            index: props.textItemIndex,
-          });
-        } else {
-          contentSettingStore.updateTextStyles({
-            id: props.rawId,
-            name: props.name,
-            value,
-          });
-        }
+        writeStyles(value);
       }
       item.isSelected = true;
     } else {

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

@@ -32,6 +32,7 @@ import {
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { letterSpacingValueConvertor } from '@brand-page-maker/convertors';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
+import type { RteItemStyleTarget } from '@shared/content-settings/models';
 import { useHistoryStore } from '@brand-page-maker/stores/history/history-store';
 import { AllSelection } from 'prosemirror-state';
 import { useHyperlink } from './hyperlink';
@@ -113,6 +114,32 @@ export const useExternalRichTextEditor = (): {
   };
 };
 
+/**
+ * An editor bound to a list item (`itemStyleTarget`) writes its toolbar styles to that
+ * item's own style field instead of the section-level `${name}Style`. Returns false when
+ * the editor has no item target, so the caller falls through to its section-level write.
+ */
+export const writeListItemStyles = (
+  store: ReturnType<typeof useUiContentSettingsStore>,
+  props: { rawId: string; name: string; itemStyleTarget?: RteItemStyleTarget },
+  value: TextStyleDeclaration,
+  isHydrationWrite?: boolean,
+): boolean => {
+  if (!props.itemStyleTarget) {
+    return false;
+  }
+
+  store.updateListItemTextStyles({
+    id: props.rawId,
+    name: props.name,
+    value,
+    target: props.itemStyleTarget,
+    isHydrationWrite,
+  });
+
+  return true;
+};
+
 export const useRichTextEditor = (
   model: ModelRef<any>,
   props: {
@@ -126,6 +153,7 @@ export const useRichTextEditor = (
     textItemIndex: number;
     item: TextItem;
     contentType: string;
+    itemStyleTarget?: RteItemStyleTarget;
   },
   emit: (event: 'focus' | 'blur' | 'update:modelValue', ...args: any[]) => void,
   fontSettings: {
@@ -426,6 +454,23 @@ export const useRichTextEditor = (
     }
   });
 
+  // Set while a toolbar command runs. The toolbar has taken focus by then, so
+  // `isFocused` alone would tag the command's write as hydration and fold it into
+  // the previous undo entry — hidden only when a style write rides along and opens
+  // an entry of its own. Synchronous commands only: the spacing sliders dispatch
+  // after a debounce and are not covered.
+  let isRunningToolbarCommand = false;
+
+  const runAsToolbarCommand = <T>(command: () => T): T => {
+    isRunningToolbarCommand = true;
+
+    try {
+      return command();
+    } finally {
+      isRunningToolbarCommand = false;
+    }
+  };
+
   // Update model when editor content changes. RTE content is stored as Tiptap
   // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
   // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
@@ -439,15 +484,9 @@ export const useRichTextEditor = (
     // field → store chain and arms the history merge at the moment of the
     // store write — arming here at emit time would lapse before the
     // debounce fires. Genuine edits happen while focused and commit
-    // normally.
-    //
-    // Known limitation: a programmatic toolbar command run on an editor the
-    // user hasn't focused yet would also merge (losing that undo step). Today
-    // the RTE only mounts inside an already-open settings drawer and the user
-    // focuses it before formatting, so this doesn't occur — revisit if a
-    // consumer ever drives toolbar actions on an unfocused editor.
+    // normally, and so do synchronous toolbar commands (isRunningToolbarCommand).
     emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
-      isHydrationWrite: !editor.isFocused,
+      isHydrationWrite: !editor.isFocused && !isRunningToolbarCommand,
     });
   });
 
@@ -551,26 +590,38 @@ export const useRichTextEditor = (
       // write lands ~100ms BEFORE the editor's canonical text write-back, and
       // an unflagged write here would open a plain capture burst that
       // swallows the flagged text write into a phantom entry (BP-5810).
-      contentSettingStore.updateTextStyles({
-        id: props.rawId,
-        name: props.name,
-        value: {
-          fontSize: globalStyles.fontSize,
-          fontFamily: globalStyles.fontFamily,
-          fontWeight: globalStyles.fontWeight,
-          fontStyle: globalStyles.fontStyle,
-          textDecoration: globalStyles.textDecoration,
-          // Keep an element colour override (a creation-time contrast bake, or a
-          // colour picked while linked) — only fall back to the global style's colour
-          // when the element has none, mirroring `resolveTextColor`'s element-first
-          // cascade. Blindly taking `globalStyles.color` here re-derived the linked
-          // colour on every RTE mount and clobbered the override.
-          color: props.styles?.color || globalStyles.color,
-          lineHeight: globalStyles.lineHeight,
-          letterSpacing: globalStyles.letterSpacing,
-        },
-        isHydrationWrite: !editor.isFocused,
-      });
+      const syncedStyles = {
+        fontSize: globalStyles.fontSize,
+        fontFamily: globalStyles.fontFamily,
+        fontWeight: globalStyles.fontWeight,
+        fontStyle: globalStyles.fontStyle,
+        textDecoration: globalStyles.textDecoration,
+        // Keep an element colour override (a creation-time contrast bake, or a
+        // colour picked while linked) — only fall back to the global style's colour
+        // when the element has none, mirroring `resolveTextColor`'s element-first
+        // cascade. Blindly taking `globalStyles.color` here re-derived the linked
+        // colour on every RTE mount and clobbered the override.
+        color: props.styles?.color || globalStyles.color,
+        lineHeight: globalStyles.lineHeight,
+        letterSpacing: globalStyles.letterSpacing,
+      };
+      const isHydrationWrite = !editor.isFocused;
+
+      if (
+        !writeListItemStyles(
+          contentSettingStore,
+          props,
+          syncedStyles,
+          isHydrationWrite,
+        )
+      ) {
+        contentSettingStore.updateTextStyles({
+          id: props.rawId,
+          name: props.name,
+          value: syncedStyles,
+          isHydrationWrite,
+        });
+      }
 
       // sync toolbar editor styles
       fontSettings.selectedFont = globalStyles?.fontFamily ?? 'Lato';
@@ -762,6 +813,10 @@ export const useRichTextEditor = (
   };
 
   const syncContentSettings = (fontStyleChanges: TextStyleDeclaration) => {
+    if (writeListItemStyles(contentSettingStore, props, fontStyleChanges)) {
+      return;
+    }
+
     if (props.name === 'textItems') {
       contentSettingStore.updateTextItemTextStyleTypeWithStyles({
         id: props.rawId,
@@ -897,7 +952,8 @@ export const useRichTextEditor = (
     editor,
     onFocus,
     onBlur,
-    triggerEditorStyleChange,
+    triggerEditorStyleChange: (editorOption: EditorOptionType) =>
+      runAsToolbarCommand(() => triggerEditorStyleChange(editorOption)),
     toggleBold,
     toggleItalic,
     toggleUnderline,
@@ -914,7 +970,8 @@ export const useRichTextEditor = (
     setInitialStyleSettings,
     copyGlobalStyleSettings,
     unsetAllMarks,
-    handleHyperlink,
+    handleHyperlink: (...args: Parameters<typeof handleHyperlink>) =>
+      runAsToolbarCommand(() => handleHyperlink(...args)),
     hyperlinkValue,
     setHyperlinkUrlValue,
     shouldShow,

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

@@ -35,8 +35,11 @@ import type {
   Content,
   ShopContent,
   BookingSectionContent,
+  FaqSectionContent,
 } from '@brand-page';
 import {
+  FAQ_DISPLAY_STYLES,
+  FAQ_MAX_ITEMS,
   SOCIAL_LINKS_ICON_DISPLAY_STYLES,
   BRAND_PAGE_TYPES,
   DIVIDER_STYLES,
@@ -84,6 +87,9 @@ import {
   VARIANT_DISPLAY_MODES,
   createInitialShopContent,
   createInitialBookingSectionContent,
+  createInitialFaqSectionContent,
+  createInitialFaqQuestionStyle,
+  createInitialFaqAnswerStyle,
 } from '../models';
 import * as uuid from 'uuid';
 import type {
@@ -149,6 +155,7 @@ import {
 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 {
@@ -3295,6 +3302,106 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
     isLocked: false,
   });
 
+const FAQ_FIELD_GROUP_IDS = {
+  settings: 'settings',
+  items: 'items',
+  style: 'style',
+} as const;
+
+export const FAQ_SECTION_SETTINGS_CONFIG =
+  (): ContentSettingsConfig<FaqSectionContent> => ({
+    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(),
+      title: {
+        type: 'text',
+        placeholder: contentSettingsTr(`titlePlaceholder`),
+        title: contentSettingsTr(`titleTitle`),
+        groupId: FAQ_FIELD_GROUP_IDS.settings,
+        maxLength: 200,
+      },
+      description: {
+        type: 'textarea',
+        placeholder: contentSettingsTr(`descriptionPlaceholder`),
+        title: contentSettingsTr(`descriptionTitle`),
+        groupId: FAQ_FIELD_GROUP_IDS.settings,
+        maxLength: 1000,
+      },
+      items: {
+        type: 'list-items',
+        defaultValue: [],
+        groupId: FAQ_FIELD_GROUP_IDS.items,
+        maxLength: FAQ_MAX_ITEMS,
+        itemFields: [
+          {
+            key: 'question',
+            kind: 'text',
+            styleKey: 'questionStyle',
+            defaultStyle: () => createInitialFaqQuestionStyle(),
+            maxLength: 200,
+            title: contentSettingsTr(`faqQuestionTitle`),
+            placeholder: contentSettingsTr(`faqQuestionPlaceholder`),
+            defaultValue: () => contentSettingsTr(`faqNewQuestion`),
+          },
+          {
+            key: 'answer',
+            kind: 'textarea',
+            styleKey: 'answerStyle',
+            defaultStyle: () => createInitialFaqAnswerStyle(),
+            maxLength: 1000,
+            title: contentSettingsTr(`faqAnswerTitle`),
+            placeholder: contentSettingsTr(`faqAnswerPlaceholder`),
+            defaultValue: () => contentSettingsTr(`faqNewAnswer`),
+          },
+        ],
+      },
+      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),
+      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 = (): Record<
   ContentType,
   ContentSettingsConfig<any>
@@ -3331,4 +3438,5 @@ export const CONTENT_SETTINGS_CONFIGS = (): Record<
   '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/src/brand-page-maker/constants/faq-section-config.test.ts

@@ -0,0 +1,151 @@
+import { vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import {
+  BRAND_PAGE_TYPES,
+  FAQ_DISPLAY_STYLES,
+  FAQ_MAX_ITEMS,
+} from '@brand-page';
+import { FAQ_SECTION_SETTINGS_CONFIG } from './config-settings-constant';
+import { createInitialFaqSectionContent } from '../models/content-settings';
+import { faqDisplayStyleConvertor } from '../convertors/faq-display-style.convertor';
+import { getEnabledContentSettingsConfigs } from '../stores/brandpage-maker/brandpage-maker-store-utils';
+import { useBrandPageMakerStore } from '../stores/brandpage-maker/brandpage-maker-store';
+import { RTE_ITEM_FIELD_PAIRS } from '@shared/color-strategies/rte-field-pairs';
+
+// Tests load no translation bundles; return the key so defaults are assertable.
+vi.mock('@src/composables/useTranslate', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  contentSettingsTr: (key: string) => key,
+}));
+
+describe('FAQ section config', () => {
+  test('is a General block with no website-type restriction', () => {
+    const config = FAQ_SECTION_SETTINGS_CONFIG();
+
+    expect(config.category).toBe('general');
+    expect(config.brandPageType).toBeUndefined();
+    expect(config.defaultIconName).toBe('question-circle-filled');
+  });
+
+  test.each([
+    BRAND_PAGE_TYPES.default,
+    BRAND_PAGE_TYPES.brandSite,
+    BRAND_PAGE_TYPES.brandContact,
+  ])('is offered in Add Content on %s', (brandPageType) => {
+    setActivePinia(createPinia());
+    useBrandPageMakerStore().$patch({ brandPageType });
+
+    const types = getEnabledContentSettingsConfigs().map((c) => c.type);
+
+    expect(types).toContain('faq-section');
+  });
+
+  test('caps items at 6 and labels rows by question', () => {
+    const items = FAQ_SECTION_SETTINGS_CONFIG().fields.items as any;
+
+    expect(items.type).toBe('list-items');
+    expect(items.maxLength).toBe(FAQ_MAX_ITEMS);
+    expect(FAQ_MAX_ITEMS).toBe(6);
+    expect(items.itemFields.map((f: any) => [f.key, f.kind])).toEqual([
+      ['question', 'text'],
+      ['answer', 'textarea'],
+    ]);
+  });
+
+  test('question and answer are rich text with their own per-item style, capped like title and description', () => {
+    const items = FAQ_SECTION_SETTINGS_CONFIG().fields.items as any;
+
+    expect(
+      items.itemFields.map((f: any) => [f.key, f.styleKey, f.maxLength]),
+    ).toEqual([
+      ['question', 'questionStyle', 200],
+      ['answer', 'answerStyle', 1000],
+    ]);
+    expect(
+      items.itemFields.map((f: any) => f.defaultStyle().textStyleType),
+    ).toEqual(['headings', 'paragraphs']);
+  });
+
+  test('has no section-level Question/Answer style — each item carries its own', () => {
+    const { fields } = FAQ_SECTION_SETTINGS_CONFIG() as any;
+
+    expect(fields.questionStyle).toBeUndefined();
+    expect(fields.answerStyle).toBeUndefined();
+    expect(RTE_ITEM_FIELD_PAIRS['faq-section']).toEqual([
+      {
+        itemsField: 'items',
+        textField: 'question',
+        styleField: 'questionStyle',
+      },
+      { itemsField: 'items', textField: 'answer', styleField: 'answerStyle' },
+    ]);
+  });
+});
+
+describe('createInitialFaqSectionContent', () => {
+  test('starts with one sample item and the demo defaults', () => {
+    const content = createInitialFaqSectionContent({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+    } as any);
+
+    expect(content.type).toBe('faq-section');
+    expect(content.displayStyle).toBe(FAQ_DISPLAY_STYLES.centered);
+    expect(content.topPadding).toBe(32);
+    expect(content.bottomPadding).toBe(32);
+    expect(content.backgroundStyle).toEqual({});
+    expect(content.items).toHaveLength(1);
+    expect(content.items[0]).toMatchObject({
+      id: expect.any(String),
+      question: 'defaultFaqQuestion',
+      answer: 'defaultFaqAnswer',
+    });
+    expect(content.titleStyle.textStyleType).toBe('titles');
+    expect(content.descriptionStyle.textStyleType).toBe('paragraphs');
+    content.items.forEach((item) => {
+      expect(item.questionStyle).toEqual({
+        applyAutoScale: true,
+        textStyleType: 'headings',
+        textAlign: 'left',
+      });
+      expect(item.answerStyle).toEqual({
+        applyAutoScale: true,
+        textStyleType: 'paragraphs',
+        textAlign: 'left',
+      });
+    });
+  });
+});
+
+describe('faqDisplayStyleConvertor', () => {
+  test('offers the three styles with their icons', () => {
+    const { options } = faqDisplayStyleConvertor.convert(
+      FAQ_DISPLAY_STYLES.split,
+    );
+
+    expect(
+      options.map((o: any) => [o.value, o.iconName, o.isSelected]),
+    ).toEqual([
+      [FAQ_DISPLAY_STYLES.centered, 'display-style-faq-1', false],
+      [FAQ_DISPLAY_STYLES.split, 'display-style-faq-2', true],
+      [FAQ_DISPLAY_STYLES.grid, 'display-style-faq-3', false],
+    ]);
+  });
+
+  test.each([
+    [FAQ_DISPLAY_STYLES.centered, 'center'],
+    [FAQ_DISPLAY_STYLES.split, 'left'],
+    [FAQ_DISPLAY_STYLES.grid, 'center'],
+  ])(
+    'switching to %s only moves the display style and heading alignment',
+    (value, textAlign) => {
+      const config = faqDisplayStyleConvertor.convert(value);
+      const result = faqDisplayStyleConvertor.convertBack(config);
+
+      expect(result).toEqual({
+        displayStyle: value,
+        titleStyle: { textAlign },
+        descriptionStyle: { textAlign },
+      });
+    },
+  );
+});

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

@@ -0,0 +1,59 @@
+import type { ButtonGroupConfig, ValueConvertor } from '../models';
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import type { FaqSectionContent } from '@brand-page/models';
+import { converterTr } from '@src/composables/useTranslate';
+
+const ICON_VIEW_BOX = '0 0 96 56';
+
+export const faqDisplayStyleConvertor: ValueConvertor<
+  string | null,
+  ButtonGroupConfig,
+  Partial<FaqSectionContent>
+> = {
+  convertBackToMultipleValues: true,
+  convert(value: string | null): ButtonGroupConfig {
+    return {
+      options: [
+        {
+          title: converterTr(`faqCenteredAccordion`),
+          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: converterTr(`faqSplitAccordion`),
+          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: converterTr(`faqGrid`),
+          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',
+        },
+      ],
+    };
+  },
+
+  // The heading sits left beside the accordion in split, centred above it otherwise.
+  convertBack(config: ButtonGroupConfig): Partial<FaqSectionContent> {
+    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/src/brand-page-maker/convertors/i18n/converter.json

@@ -21,6 +21,9 @@
     "medium": "Medium",
     "large": "Large",
     "bigImage": "Big Image",
-    "columns": "Columns"
+    "columns": "Columns",
+    "faqCenteredAccordion": "Centered accordion",
+    "faqSplitAccordion": "Split accordion",
+    "faqGrid": "Grid"
   }
 }