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

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

@@ -182,6 +182,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -196,6 +197,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,
@@ -254,6 +256,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
             "backgroundColor": undefined,
             "color": undefined,
           },
+          "subNavBackgroundColor": "#ffffff",
         },
         "iconStyle": {},
         "isLogoVisible": true,
@@ -268,6 +271,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
           "borderTopWidth": "0px",
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
         "viewport": "desktop",
       },
       "navigationStyles": undefined,

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

@@ -181,6 +181,7 @@ BrandPageModel {
           "backgroundColor": undefined,
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
       },
       "iconStyle": {},
       "isLogoVisible": true,
@@ -195,6 +196,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
       },
+      "subNavBackgroundColor": "#ffffff",
       "viewport": "desktop",
     },
     "navigationStyles": undefined,
@@ -253,6 +255,7 @@ BrandPageModel {
           "backgroundColor": undefined,
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
       },
       "iconStyle": {},
       "isLogoVisible": true,
@@ -267,6 +270,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
       },
+      "subNavBackgroundColor": "#ffffff",
       "viewport": "desktop",
     },
     "navigationStyles": undefined,
@@ -626,6 +630,7 @@ BrandPageModel {
           "backgroundColor": undefined,
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
       },
       "iconStyle": {},
       "isLogoVisible": true,
@@ -640,6 +645,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
       },
+      "subNavBackgroundColor": "#ffffff",
       "viewport": "desktop",
     },
     "navigationStyles": undefined,
@@ -698,6 +704,7 @@ BrandPageModel {
           "backgroundColor": undefined,
           "color": undefined,
         },
+        "subNavBackgroundColor": "#ffffff",
       },
       "iconStyle": {},
       "isLogoVisible": true,
@@ -712,6 +719,7 @@ BrandPageModel {
         "borderTopWidth": "0px",
         "color": undefined,
       },
+      "subNavBackgroundColor": "#ffffff",
       "viewport": "desktop",
     },
     "navigationStyles": undefined,

package/src/brand-page/utils/migration/migration-14.ts

@@ -0,0 +1,23 @@
+import type { MigrationData } from '../migration.util';
+import { isContact } from '../model.util';
+
+export const migration14 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      if (isContact(content)) {
+        const contactForm = content as any;
+
+        if ('messageTextColor' in contactForm) {
+          contactForm.successMessageStyle = contactForm.messageTextColor;
+          delete contactForm.messageTextColor;
+        }
+      }
+    });
+  });
+
+  return migrationResult;
+};

package/src/brand-page/utils/migration/migration-15.ts

@@ -0,0 +1,62 @@
+import { STYLE_THEME_KEYS } from '../../constants';
+import type { MigrationData } from '../migration.util';
+
+const DEFAULT_SUB_NAV_BG_COLOR = '#ffffff';
+
+const getSubNavBgColorFromTextColor = (
+  textColor: string | undefined,
+): string => {
+  if (
+    textColor === STYLE_THEME_KEYS.LogoTextColor ||
+    textColor === STYLE_THEME_KEYS.LogoTextMultiColor
+  ) {
+    return STYLE_THEME_KEYS.LogoBackgroundColor;
+  }
+
+  if (
+    textColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
+    textColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor
+  ) {
+    return STYLE_THEME_KEYS.LogoTextColor;
+  }
+
+  return DEFAULT_SUB_NAV_BG_COLOR;
+};
+
+export const migration15 = async (
+  migrationResult: MigrationData,
+): Promise<MigrationData> => {
+  const { brandPageModel } = migrationResult;
+
+  const navigations = [
+    brandPageModel.pageHeaderDesktop?.navigation,
+    brandPageModel.pageHeaderMobile?.navigation,
+    (brandPageModel as any).headerStyles?.navigation,
+  ];
+
+  for (const nav of navigations) {
+    if (!nav) continue;
+
+    if (
+      !nav.subNavBackgroundColor ||
+      nav.subNavBackgroundColor === DEFAULT_SUB_NAV_BG_COLOR
+    ) {
+      nav.subNavBackgroundColor = getSubNavBgColorFromTextColor(
+        nav.defaultButtonStyle?.color,
+      );
+    }
+
+    if (nav.hamburgerMenuStyle) {
+      const hamburgerBg = nav.hamburgerMenuStyle.subNavBackgroundColor;
+
+      if (!hamburgerBg || hamburgerBg === DEFAULT_SUB_NAV_BG_COLOR) {
+        nav.hamburgerMenuStyle.subNavBackgroundColor =
+          getSubNavBgColorFromTextColor(
+            nav.hamburgerMenuStyle.defaultButtonStyle?.color,
+          );
+      }
+    }
+  }
+
+  return migrationResult;
+};

package/src/brand-page/utils/migration.util.ts

@@ -16,6 +16,8 @@ import { migration11 } from './migration/migration-11';
 import { migration12 } from './migration/migration-12';
 import { migration12_1 } from './migration/migration-12_1';
 import { migration13 } from './migration/migration-13';
+import { migration14 } from './migration/migration-14';
+import { migration15 } from './migration/migration-15';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -128,6 +130,18 @@ const MIGRATION_TABLE = [
     migrateFn: migration13,
     description: 'Migrating old page navigation refererences to use page ids',
   },
+  {
+    version: 14,
+    migrateFn: migration14,
+    description:
+      'Renaming messageTextColor to successMessageStyle on contact form content',
+  },
+  {
+    version: 15,
+    migrateFn: migration15,
+    description:
+      'Set sub nav background color based on default text style color',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/style.util.ts

@@ -297,7 +297,14 @@ export const applyLogoThemeToBrandPageNavigationStyles = (
 
   for (const [key, value] of Object.entries(navigation)) {
     if (typeof value === 'string' || typeof value === 'boolean') {
-      newNavigation[key] = value;
+      if (typeof value === 'string') {
+        const output = colorMatchCssKeyValue(key, value, logoTheme);
+
+        newNavigation[key] = output.cssValue;
+        isModified = isModified || output.isModified;
+      } else {
+        newNavigation[key] = value;
+      }
     } else {
       const output = applyLogoThemeToBrandPageStyleRecursive(
         logoTheme,
@@ -405,7 +412,14 @@ const CONTENT_STYLE_PROP_NAME_SUFFIX = [
   'Replacements',
 ];
 
-const RTE_ALLOWED_FIELDS = ['title', 'description', 'text', 'textItems'];
+const RTE_ALLOWED_FIELDS = [
+  'title',
+  'description',
+  'text',
+  'textItems',
+  'paragraph',
+  'successMessage',
+];
 
 export const applyLogoThemeToContents = (
   logoTheme: LogoTheme,

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.ts

@@ -1543,7 +1543,7 @@ export const BRAND_SITE_SAMPLE_WITH_LOGO = {
             textStyleType: 'paragraphs',
             applyAutoScale: true,
           },
-          messageTextColor: {},
+          successMessageStyle: {},
         },
       ],
     },

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-site-template.examples.ts

@@ -820,7 +820,7 @@ export const BRAND_SITE_TEMPLATE_SAMPLE_2: any[] = [
           overflowWrap: 'anywhere',
           wordBreak: 'normal',
         },
-        messageTextColor: {},
+        successMessageStyle: {},
         role: 'contact-form',
         buttonStyles: {
           style: {

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

@@ -381,7 +381,7 @@
         </div>
       </div>
     </div>
-    <div class="tw-relative">
+    <div class="tw-relative" :class="{ 'editor-compact': isCompact }">
       <BubbleMenu
         :editor="editor"
         :tippy-options="tippyOptions"
@@ -965,6 +965,9 @@ const {
   selectedLinkType,
 );
 
+const COMPACT_FIELD_NAMES = ['title', 'name'];
+const isCompact = computed(() => COMPACT_FIELD_NAMES.includes(props.name));
+
 const isExternalLink = computed(() => {
   const href = editor.getAttributes('link').href;
   return href && (href.startsWith('http://') || href.startsWith('https://'));
@@ -1091,6 +1094,10 @@ const getSlugFromPageIdHref = (href: string): string => {
   @apply tw-max-h-56 tw-overflow-auto;
 }
 
+.editor-compact ::v-deep .ProseMirror {
+  @apply tw-min-h-24;
+}
+
 ::v-deep .ProseMirror:focus {
   outline: none;
 }

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

@@ -656,7 +656,7 @@ export const useRichTextEditor = (
       selectedTextStyle ?? selectedGlobalTextStyles.value?.style;
 
     if (globalStyles) {
-      globalStyles.fontWeight && toggleBoldAll();
+      globalStyles.fontWeight === 'bold' && toggleBoldAll();
       globalStyles.fontStyle && toggleItalicAll();
       globalStyles.textDecoration?.includes('underline') &&
         toggleUnderlineAll();

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

@@ -2153,6 +2153,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         placeholder: contentSettingsTr(`successMessagePlaceholder`),
         title: contentSettingsTr(`successMessageTitle`),
         groupId: CONTACT_FORM_GROUPS.settings,
+        maxLength: 1000,
       },
       responseEmail: {
         type: 'email',
@@ -2192,16 +2193,6 @@ export const CONTACT_FORM_SETTINGS_CONFIG =
         title: contentSettingsTr(`backgroundColorTitle`),
         valueConvertor: backgroundColorConvertor,
       },
-      messageTextColor: {
-        type: 'color',
-        groupId: CONTACT_FORM_GROUPS.style,
-        defaultValue: {},
-        isInline: true,
-        showToggle: false,
-        disableTransparent: true,
-        title: contentSettingsTr(`successMessageTextColorTitle`),
-        valueConvertor: colorConvertor,
-      },
     },
     isEnabled: true,
     isLocked: (features) => !features.canAddContactFormContents,

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

@@ -148,6 +148,12 @@ export interface ContentSettingsField<TContent> {
   fieldTypeAssessor?: FieldTypeAssessor<TContent>;
   defaultGetter?: DefaultGetter<any>;
   validator?: ContentValidator<TContent>;
+
+  /**
+   * Override the style field name used by the RTE editor.
+   * Defaults to `${fieldName}Style` when not specified.
+   */
+  styleName?: string;
 }
 
 export interface ContentSettingsMultiField<TContent, TField>

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

@@ -537,6 +537,9 @@ export const createInitialContactFormContent: CreateInitialContentFunction<
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
       textAlign: 'center',
     },
+    successMessageStyle: {
+      textStyleType: TEXT_STYLE_TYPES.paragraphs,
+    },
     buttonTextStyle: {
       applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
       textStyleType: TEXT_STYLE_TYPES.buttons,

package/src/brand-page-maker/models/i18n/models.de-DE.json

@@ -8,6 +8,7 @@
     "selectedTextColor" : "Ausgewählte Textfarbe",
     "iconColor" : "Symbolfarbe",
     "iconBackgroundColor" : "Symbolhintergrundfarbe",
+    "subNavBackgroundColor" : "Sub nav background color",
     "allDisplayName" : "Alle",
     "generalDisplayName" : "Allgemein",
     "socialLinksDisplayName" : "Social Media",

package/src/brand-page-maker/models/i18n/models.es-ES.json

@@ -8,6 +8,7 @@
     "selectedTextColor" : "Color de texto seleccionado",
     "iconColor" : "Color del icono",
     "iconBackgroundColor" : "Color de fondo del icono",
+    "subNavBackgroundColor" : "Sub nav background color",
     "allDisplayName" : "Todo",
     "generalDisplayName" : "General",
     "socialLinksDisplayName" : "Redes sociales",

package/src/brand-page-maker/models/i18n/models.fr-CA.json

@@ -8,6 +8,7 @@
     "selectedTextColor" : "Couleur de texte sélectionnée",
     "iconColor" : "Couleur de l'icône",
     "iconBackgroundColor" : "Couleur d’arrière-plan de l’icône",
+    "subNavBackgroundColor" : "Sub nav background color",
     "allDisplayName" : "Tous",
     "generalDisplayName" : "Général",
     "socialLinksDisplayName" : "Réseaux sociaux",

package/src/brand-page-maker/models/i18n/models.fr-FR.json

@@ -8,6 +8,7 @@
     "selectedTextColor" : "Couleur de texte sélectionnée",
     "iconColor" : "Couleur de l'icône",
     "iconBackgroundColor" : "Couleur d’arrière-plan de l’icône",
+    "subNavBackgroundColor" : "Sub nav background color",
     "allDisplayName" : "Tous",
     "generalDisplayName" : "Général",
     "socialLinksDisplayName" : "Réseaux sociaux",

package/src/brand-page-maker/models/i18n/models.json

@@ -8,6 +8,7 @@
     "selectedTextColor": "Selected text color",
     "iconColor": "Icon color",
     "iconBackgroundColor": "Icon background color",
+    "subNavBackgroundColor": "Sub nav background color",
 
     "allDisplayName": "all",
     "generalDisplayName": "General",

package/src/brand-page-maker/models/i18n/models.pt-BR.json

@@ -8,6 +8,7 @@
     "selectedTextColor" : "Cor do texto selecionado",
     "iconColor" : "Cor do ícone",
     "iconBackgroundColor" : "Cor de fundo do ícone",
+    "subNavBackgroundColor" : "Sub nav background color",
     "allDisplayName" : "tudo",
     "generalDisplayName" : "Geral",
     "socialLinksDisplayName" : "Redes sociais",

package/src/brand-page-maker/models/i18n/models.pt-PT.json

@@ -8,6 +8,7 @@
     "selectedTextColor" : "Cor do texto selecionado",
     "iconColor" : "Cor do ícone",
     "iconBackgroundColor" : "Cor de fundo do ícone",
+    "subNavBackgroundColor" : "Sub nav background color",
     "allDisplayName" : "Tudo",
     "generalDisplayName" : "Geral",
     "socialLinksDisplayName" : "Redes sociais",

package/src/brand-page-maker/models/navigation-style-configs.ts

@@ -25,6 +25,7 @@ export const NavigationStyleConfigOptions = {
   selectedBackgroundColor: 'selectedBackgroundColor',
   iconColor: 'iconColor',
   iconBackgroundColor: 'iconBackgroundColor',
+  subNavBackgroundColor: 'subNavBackgroundColor',
 } as const;
 
 export type NavigationStyleConfigOption =
@@ -42,6 +43,7 @@ export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = (): Record<
   selectedBackgroundColor: modelsTr('selectedBackgroundColor'),
   iconColor: commonTr('iconColor'),
   iconBackgroundColor: modelsTr('iconBackgroundColor'),
+  subNavBackgroundColor: modelsTr('subNavBackgroundColor'),
 });
 
 export interface NavigationStyleConfig
@@ -61,6 +63,7 @@ const hamburgerNavigationConfig: NavigationStyleConfig = {
     'selectedBackgroundColor',
     'iconColor',
     'iconBackgroundColor',
+    'subNavBackgroundColor',
   ],
   selectedButtonStyle: {},
   iconStyle: {},
@@ -101,6 +104,7 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       'selectedBackgroundColor',
       'selectedBorderColor',
       'selectedTextColor',
+      'subNavBackgroundColor',
     ],
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.TAB_1,
@@ -137,6 +141,7 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       'defaultBorderColor',
       'selectedBackgroundColor',
       'selectedTextColor',
+      'subNavBackgroundColor',
     ],
     buttonGroupOption: {
       value: NAVIGATION_DISPLAY.TAB_2,