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

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

@@ -3,6 +3,7 @@ import type {
   BrandPageType,
   Content,
   ContentType,
+  TextStyleDeclaration,
 } from '@brand-page';
 import type { ContentReplaceImageSettings } from '@shared/content-settings/models';
 import type { UIUserFeatures } from '@src/constants/ui';
@@ -86,6 +87,7 @@ export const ITEM_FIELD_TYPES = {
   'color-replacements': 'color-replacements',
   'testimonial-items': 'testimonial-items',
   'text-items': 'text-items',
+  'list-items': 'list-items',
   'page-dropdown': 'page-dropdown',
   'personalisation-override': 'personalisation-override',
 } as const;
@@ -154,6 +156,28 @@ export interface ContentSettingsField<TContent> {
    * Defaults to `${fieldName}Style` when not specified.
    */
   styleName?: string;
+
+  /** `list-items` only: the per-item inputs, in order. The first `text` input labels the row. */
+  itemFields?: ListItemFieldSchema[];
+}
+
+export interface ListItemFieldSchema {
+  key: string;
+  /** The plain input used when the rich-text editor is unavailable. */
+  kind: 'text' | 'textarea';
+  title: string;
+  placeholder?: string;
+  maxLength?: number;
+  /**
+   * The item field that holds this text's style. Set it to make the text rich text —
+   * the same editor as a section title, writing this item's own style — whenever the
+   * section allows rich text. Without rich text, a font-style control edits it instead.
+   */
+  styleKey?: string;
+  /** Style a first item starts with; later items copy the last item's style. */
+  defaultStyle?: () => TextStyleDeclaration;
+  /** Value a newly added item starts with. */
+  defaultValue?: () => string;
 }
 
 export interface ContentSettingsMultiField<TContent, TField> extends Omit<

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

@@ -26,6 +26,7 @@ import {
   SENSITIVE_CONTENT_TYPES,
   CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
   TESTIMONIAL_DEFAULT_PADDING,
+  FAQ_DISPLAY_STYLES,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -53,6 +54,8 @@ import type {
   SupportMeContent,
   ShopContent,
   BookingSectionContent,
+  TextStyleDeclaration,
+  FaqSectionContent,
 } from '@brand-page';
 import * as uuid from 'uuid';
 import type { CreateInitialContentFunction } from './content-settings-configs';
@@ -671,6 +674,60 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
   };
 };
 
+// Questions follow the Headings role, answers the Paragraphs role.
+export const createInitialFaqQuestionStyle = (
+  applyAutoScale = false,
+): TextStyleDeclaration => ({
+  applyAutoScale,
+  textStyleType: TEXT_STYLE_TYPES.headings,
+  textAlign: 'left',
+});
+
+export const createInitialFaqAnswerStyle = (
+  applyAutoScale = false,
+): TextStyleDeclaration => ({
+  applyAutoScale,
+  textStyleType: TEXT_STYLE_TYPES.paragraphs,
+  textAlign: 'left',
+});
+
+export const createInitialFaqSectionContent: CreateInitialContentFunction<
+  FaqSectionContent
+> = (options?: CreateInitialContentOptions) => {
+  const applyAutoScale = options?.brandPageType === BRAND_PAGE_TYPES.brandSite;
+
+  return {
+    id: uuid.v4(),
+    type: 'faq-section',
+    title: contentSettingsTr(`defaultFaqTitle`),
+    description: contentSettingsTr(`defaultFaqDescription`),
+    displayStyle: FAQ_DISPLAY_STYLES.centered,
+    topPadding: 32,
+    bottomPadding: 32,
+    // One sample item; the design's four are only there to show a longer list.
+    items: [
+      {
+        id: uuid.v4(),
+        question: contentSettingsTr(`defaultFaqQuestion`),
+        questionStyle: createInitialFaqQuestionStyle(applyAutoScale),
+        answer: contentSettingsTr(`defaultFaqAnswer`),
+        answerStyle: createInitialFaqAnswerStyle(applyAutoScale),
+      },
+    ],
+    titleStyle: {
+      applyAutoScale,
+      textStyleType: TEXT_STYLE_TYPES.titles,
+      textAlign: 'center',
+    },
+    descriptionStyle: {
+      applyAutoScale,
+      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+      textAlign: 'center',
+    },
+    backgroundStyle: {},
+  };
+};
+
 export const createInitialImagesSectionContent: CreateInitialContentFunction<
   ImagesSectionContent
 > = (options?: CreateInitialContentOptions) => {

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -2109,6 +2109,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
           isCustomDomain: false,
           brandPageSlug: brandPageContainerStore.brandPageSlug,
+          activeItemIdByContentId:
+            useUiContentSettingsStore().activeItemIdByContentId,
         },
       );
     },