@designcrowd/library.brand-page 5.17.21 → 5.17.23-ast-subnav

package/lib/src/metadata-builder/builders/section-field-maps.js

@@ -156,6 +156,7 @@ const contactFormStyleFields = defineFieldMap({
     title_style: 'titleStyle',
     description_style: 'descriptionStyle',
     button_text_style: 'buttonTextStyle',
+    success_message_style: 'successMessageStyle',
 });
 const imagesSectionStyleFields = defineFieldMap({
     title_style: 'titleStyle',

package/lib/src/metadata-builder/builders/section-field-utils.js

@@ -85,6 +85,11 @@ const RTE_FIELD_STYLE_PAIRS = [
         argKey: 'description_style',
     },
     { textField: 'text', styleField: 'textStyle', argKey: 'text_style' },
+    {
+        textField: 'paragraph',
+        styleField: 'paragraphStyle',
+        argKey: 'paragraph_style',
+    },
 ];
 /**
  * Re-applies merged styles to RTE content fields after applyStyleFields has

package/lib/src/metadata-builder/helpers/rte.helpers.js

@@ -3,6 +3,9 @@ import { useExternalRichTextEditor } from '../../brand-page-maker/composables/ri
 import { getRenderText } from '../../brand-page/utils';
 import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 export const applyStyleToRTEText = (externalEditor, contentText, newContentStyle) => {
+    if (!contentText) {
+        return contentText;
+    }
     const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
         ? getRenderText(contentText)
         : contentText;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js

@@ -23,6 +23,7 @@ const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
     'descriptionStyle',
     'titleStyle',
     'textStyle',
+    'paragraphStyle',
 ];
 const AI_ALLOWED_FIELD_NAMES = ['description', 'title', 'text', 'paragraph'];
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
@@ -87,7 +88,7 @@ export default defineComponent({
             return this.getContent(this.id);
         },
         styleName() {
-            return `${this.field.name}Style`;
+            return this.field.styleName || `${this.field.name}Style`;
         },
         contentType() {
             return this.type;

package/lib/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.mixin.d.ts

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
 }>, {}, {
-    navigationStyleConfigOptionTitles: Record<"defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor", string>;
+    navigationStyleConfigOptionTitles: Record<"defaultBorderColor" | "selectedBorderColor" | "subNavBackgroundColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor", string>;
     styleThemeKeys: Record<string, string>;
     valueFuncDict: Record<string, () => string | undefined>;
 }, {
@@ -31,6 +31,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }, {
     emitOptionValueChange(event: NavigationStyleOptionValueChangeEvent): void;
     onColorPickerInput(option: NavigationStyleConfigOption, payload: UpdateItemValuePayload<string | Event | undefined> | string): void;
+    isDefaultTextColorLogoBackground(): boolean;
+    isDefaultTextColorLogoText(): boolean;
+    getSubNavBackgroundColorThemeKey(): string;
     onColorMatchToggled(option: NavigationStyleConfigOption, value: boolean): void;
     getMenuStyles(): NavigationMenuStyles;
     setTextStyleOption(option: NavigationStyleConfigOption, payload: UpdateItemValuePayload<TextStyleDeclaration>): void;

package/lib/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.mixin.js

@@ -3,6 +3,7 @@ import { NAVIGATION_STYLE_CONFIG_OPTION_TITLES } from '@brand-page-maker/models/
 import { STYLE_THEME_KEYS } from '@brand-page';
 import { isColorMatched } from '@brand-page-maker/utils';
 import { RGBAtoHex } from '@utils/helpers';
+import { colorsMatch } from '@brand-page/utils/style.util';
 export default defineComponent({
     props: {
         availableNavigationStyleConfigs: {
@@ -36,7 +37,11 @@ export default defineComponent({
             };
         },
         navigationStyleOptions() {
-            return (this.availableNavigationStyleConfigs.find((c) => c.displayType === this.value.displayType)?.options ?? []);
+            const options = this.availableNavigationStyleConfigs.find((c) => c.displayType === this.value.displayType)?.options ?? [];
+            if (!this.isAdmin && this.value.displayType.includes('hamburger')) {
+                return options.filter((o) => o !== 'subNavBackgroundColor');
+            }
+            return options;
         },
         isOptionColorMatched() {
             return (option) => {
@@ -78,6 +83,10 @@ export default defineComponent({
                 const menuStyles = this.getMenuStyles();
                 return menuStyles.iconStyle.backgroundColor;
             },
+            subNavBackgroundColor: () => {
+                const menuStyles = this.getMenuStyles();
+                return menuStyles.subNavBackgroundColor;
+            },
         };
     },
     methods: {
@@ -107,11 +116,55 @@ export default defineComponent({
             }
             console.error('onColorPickerInput unhandled payload type: ' + typeof payload);
         },
+        isDefaultTextColorLogoBackground() {
+            const menuStyles = this.getMenuStyles();
+            const defaultTextColor = menuStyles.defaultButtonStyle.color;
+            if (!defaultTextColor) {
+                return false;
+            }
+            if (defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+                defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor) {
+                return true;
+            }
+            if (this.logoTheme.logoBackgroundColor.rgb &&
+                colorsMatch(defaultTextColor, this.logoTheme.logoBackgroundColor.rgb)) {
+                return true;
+            }
+            return false;
+        },
+        isDefaultTextColorLogoText() {
+            const menuStyles = this.getMenuStyles();
+            const defaultTextColor = menuStyles.defaultButtonStyle.color;
+            if (!defaultTextColor) {
+                return false;
+            }
+            if (defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
+                defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor) {
+                return true;
+            }
+            if (this.logoTheme.logoTextColor.rgb &&
+                colorsMatch(defaultTextColor, this.logoTheme.logoTextColor.rgb)) {
+                return true;
+            }
+            return false;
+        },
+        getSubNavBackgroundColorThemeKey() {
+            if (this.isDefaultTextColorLogoText()) {
+                return STYLE_THEME_KEYS.LogoBackgroundColor;
+            }
+            if (this.isDefaultTextColorLogoBackground()) {
+                return STYLE_THEME_KEYS.LogoTextColor;
+            }
+            return STYLE_THEME_KEYS.LogoTextColor;
+        },
         onColorMatchToggled(option, value) {
             if (value) {
+                const themeKey = option === 'subNavBackgroundColor'
+                    ? this.getSubNavBackgroundColorThemeKey()
+                    : STYLE_THEME_KEYS.LogoTextColor;
                 this.emitOptionValueChange({
                     option,
-                    value: STYLE_THEME_KEYS.LogoTextColor,
+                    value: themeKey,
                 });
             }
             else {

package/lib/src/shared/navigation-style-settings/store/index.d.ts

@@ -47,6 +47,12 @@ export declare const useUiNavigationStyleSettingsStore: import("pinia").StoreDef
         style: BrandPageCssStyle;
         viewport: ViewportsType;
     }): void;
+    _setSubNavBackgroundColor({ displayType, section, value, viewport, }: {
+        displayType: NavigationDisplayType;
+        section: PageSection;
+        value: string;
+        viewport: ViewportsType;
+    }): void;
     _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
         section: PageSection;
         defaultButtonStyle: TextStyleDeclaration;

package/lib/src/shared/navigation-style-settings/store/index.js

@@ -64,6 +64,13 @@ export const useUiNavigationStyleSettingsStore = defineStore('uiNavigationStyleS
             }
             this.navigation[section][viewport].iconStyle = Object.assign({}, this.navigation[section][viewport].iconStyle, style);
         },
+        _setSubNavBackgroundColor({ displayType, section, value, viewport, }) {
+            if (displayType.includes('hamburger')) {
+                this.navigation[section][viewport].hamburgerMenuStyle.subNavBackgroundColor = value;
+                return;
+            }
+            this.navigation[section][viewport].subNavBackgroundColor = value;
+        },
         _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }) {
             this.navigation[section][viewport].selectedButtonStyle =
                 selectedButtonStyle;
@@ -237,6 +244,14 @@ export const useUiNavigationStyleSettingsStore = defineStore('uiNavigationStyleS
                         viewport,
                     });
                     break;
+                case 'subNavBackgroundColor':
+                    this._setSubNavBackgroundColor({
+                        displayType,
+                        section,
+                        value,
+                        viewport,
+                    });
+                    break;
                 default:
                     if (process.env.NODE_ENV !== 'production') {
                         assertUnreachable();

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -214,6 +214,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -353,6 +354,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 } | {
@@ -495,6 +497,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -634,6 +637,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 } | undefined;
@@ -777,6 +781,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -916,6 +921,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 } | {
@@ -1058,6 +1064,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -1197,6 +1204,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 };
@@ -1498,6 +1506,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -1637,6 +1646,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 } | {
@@ -1779,6 +1789,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -1918,6 +1929,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 } | undefined;
@@ -2061,6 +2073,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -2200,6 +2213,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 } | {
@@ -2342,6 +2356,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -2481,6 +2496,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: import("@brand-page").ViewportsType;
                 };
@@ -3261,6 +3277,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             width?: string | undefined;
             wordBreak?: string | undefined;
         };
+        subNavBackgroundColor?: string | undefined;
         isLogoVisible: boolean;
         hamburgerMenuStyle: {
             defaultButtonStyle: {
@@ -3400,6 +3417,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 width?: string | undefined;
                 wordBreak?: string | undefined;
             };
+            subNavBackgroundColor?: string | undefined;
         };
         viewport: import("@brand-page").ViewportsType;
     }>;
@@ -3543,6 +3561,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             width?: string | undefined;
             wordBreak?: string | undefined;
         };
+        subNavBackgroundColor?: string | undefined;
         isLogoVisible: boolean;
         hamburgerMenuStyle: {
             defaultButtonStyle: {
@@ -3682,6 +3701,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 width?: string | undefined;
                 wordBreak?: string | undefined;
             };
+            subNavBackgroundColor?: string | undefined;
         };
         viewport: import("@brand-page").ViewportsType;
     }>;
@@ -4478,6 +4498,12 @@ declare const _default: import("vue").DefineComponent<{}, {
             style: BrandPageCssStyle;
             viewport: import("@brand-page").ViewportsType;
         }): void;
+        _setSubNavBackgroundColor({ displayType, section, value, viewport, }: {
+            displayType: import("@brand-page").NavigationDisplayType;
+            section: "footer" | "header";
+            value: string;
+            viewport: import("@brand-page").ViewportsType;
+        }): void;
         _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
             section: "footer" | "header";
             defaultButtonStyle: import("@brand-page").TextStyleDeclaration;
@@ -4492,7 +4518,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: "footer" | "header";
-            option: "defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
+            option: "defaultBorderColor" | "selectedBorderColor" | "subNavBackgroundColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
             value: any;
             viewport: import("@brand-page").ViewportsType;
         }): void;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -176,6 +176,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -315,6 +316,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 } | {
@@ -457,6 +459,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -596,6 +599,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 } | undefined;
@@ -739,6 +743,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -878,6 +883,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 } | {
@@ -1020,6 +1026,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -1159,6 +1166,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 };
@@ -1460,6 +1468,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -1599,6 +1608,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 } | {
@@ -1741,6 +1751,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -1880,6 +1891,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 } | undefined;
@@ -2023,6 +2035,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -2162,6 +2175,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 } | {
@@ -2304,6 +2318,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         width?: string | undefined;
                         wordBreak?: string | undefined;
                     };
+                    subNavBackgroundColor?: string | undefined;
                     isLogoVisible: boolean;
                     hamburgerMenuStyle: {
                         defaultButtonStyle: {
@@ -2443,6 +2458,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                             width?: string | undefined;
                             wordBreak?: string | undefined;
                         };
+                        subNavBackgroundColor?: string | undefined;
                     };
                     viewport: ViewportsType;
                 };
@@ -3073,7 +3089,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             dataAttribute?: string | undefined;
             disabled?: boolean | undefined;
         };
-        options: ("defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor")[];
+        options: ("defaultBorderColor" | "selectedBorderColor" | "subNavBackgroundColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor")[];
         iconStyle: {
             aspectRatio?: string | undefined;
             backgroundAttachment?: string | undefined;
@@ -3211,6 +3227,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             width?: string | undefined;
             wordBreak?: string | undefined;
         };
+        subNavBackgroundColor?: string | undefined;
         displayType: NavigationDisplayType;
         renderAfterLogo: boolean;
     }[]>;
@@ -3382,6 +3399,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             style: BrandPageCssStyle;
             viewport: ViewportsType;
         }): void;
+        _setSubNavBackgroundColor({ displayType, section, value, viewport, }: {
+            displayType: NavigationDisplayType;
+            section: "footer" | "header";
+            value: string;
+            viewport: ViewportsType;
+        }): void;
         _setButtonStyles({ section, defaultButtonStyle, selectedButtonStyle, iconStyle, viewport, }: {
             section: "footer" | "header";
             defaultButtonStyle: import("@brand-page").TextStyleDeclaration;
@@ -3396,7 +3419,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setNavigationStyleOptionValue({ section, option, value, viewport, }: {
             section: "footer" | "header";
-            option: "defaultBorderColor" | "selectedBorderColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
+            option: "defaultBorderColor" | "selectedBorderColor" | "subNavBackgroundColor" | "defaultTextStyle" | "defaultBackgroundColor" | "selectedTextColor" | "selectedBackgroundColor" | "iconColor" | "iconBackgroundColor";
             value: any;
             viewport: ViewportsType;
         }): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.21",
+  "version": "5.17.23-ast-subnav",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/about-section/AboutSection.vue

@@ -91,6 +91,7 @@
             v-if="renderText"
             :text-style="viewModel.paragraphStyle"
             :text="renderText"
+            element="div"
             :class="textAlignClass"
           />
         </div>
@@ -98,15 +99,71 @@
     </div>
   </section>
 </template>
-<script>
-import AboutSectionMixin from './AboutSection.mixin.ts';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { AboutSectionViewModel } from '@brand-page/view-models';
+import type { BrandPageContext } from '@brand-page/models';
+import { getRenderText } from '@brand-page/utils';
+import { hasRTEContent } from '@brand-page-maker/utils';
 import Media from '../media/Media.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 
-export default {
-  components: { Media, TextWrapper },
-  mixins: [AboutSectionMixin],
-};
+const props = withDefaults(
+  defineProps<{
+    viewModel: AboutSectionViewModel;
+    context: BrandPageContext;
+    isPreview?: boolean;
+    isMobileDevice?: boolean;
+    contentIndex?: number;
+  }>(),
+  {
+    isPreview: false,
+    isMobileDevice: undefined,
+    contentIndex: undefined,
+  },
+);
+
+const isFullImage = computed(
+  () =>
+    props.viewModel.displayStyle === 'right-aligned-full-image' ||
+    props.viewModel.displayStyle === 'left-aligned-full-image',
+);
+
+const isRightAligned = computed(
+  () =>
+    props.viewModel.displayStyle === 'right-aligned-full-image' ||
+    props.viewModel.displayStyle === 'right-aligned',
+);
+
+const isLeftAligned = computed(
+  () =>
+    props.viewModel.displayStyle === 'left-aligned-full-image' ||
+    props.viewModel.displayStyle === 'left-aligned',
+);
+
+const isDividedContent = computed(
+  () =>
+    props.viewModel.displayStyle === 'right-aligned' ||
+    props.viewModel.displayStyle === 'left-aligned',
+);
+
+const textAlignClass = computed(() => ({
+  'tw-text-center': props.viewModel.displayStyle === 'centered',
+  'tw-text-left': props.viewModel.displayStyle !== 'centered',
+  'tw-px-6': isFullImage.value,
+}));
+
+const renderText = computed((): string => {
+  if (!props.viewModel.paragraph) {
+    return '';
+  }
+
+  if (hasRTEContent(props.viewModel.paragraph)) {
+    return props.viewModel.paragraph;
+  } else {
+    return getRenderText(props.viewModel.paragraph);
+  }
+});
 </script>
 <style scoped>
 /* classes */

package/src/brand-page/components/collapsible/Collapsible.vue

@@ -15,10 +15,14 @@
           'tw-mb-4': !isCollapsed,
           'hover:tw-cursor-pointer': canCollapse,
         }"
-        :style="titleStyle"
         @click="onHeaderToggleClick"
       >
-        <h1 class="tw-select-none">{{ title }}</h1>
+        <TextWrapper
+          :text-style="titleStyle"
+          :text="title"
+          element="div"
+          class="tw-select-none"
+        />
         <div v-if="canCollapse" class="tw-absolute tw-top-0 tw-right-4">
           <Icon
             :style="arrowStyle"
@@ -38,10 +42,12 @@
 <script>
 import { Icon } from '@designcrowd/fe-shared-lib';
 import CollapsibleMixin from './Collapsible.mixin.ts';
+import TextWrapper from '../text-wrapper/TextWrapper.vue';
 
 export default {
   components: {
     Icon,
+    TextWrapper,
   },
   mixins: [CollapsibleMixin],
 };