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

package/src/bundles/bundled-translations.de-DE.json

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

package/src/bundles/bundled-translations.es-ES.json

@@ -1284,6 +1284,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/bundles/bundled-translations.fr-CA.json

@@ -1284,6 +1284,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/bundles/bundled-translations.fr-FR.json

@@ -1284,6 +1284,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/bundles/bundled-translations.json

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

package/src/bundles/bundled-translations.pt-BR.json

@@ -1284,6 +1284,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/bundles/bundled-translations.pt-PT.json

@@ -1284,6 +1284,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/metadata-builder/builders/section-field-maps.ts

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

package/src/metadata-builder/builders/section-field-utils.ts

@@ -126,6 +126,11 @@ const RTE_FIELD_STYLE_PAIRS: {
     argKey: 'description_style',
   },
   { textField: 'text', styleField: 'textStyle', argKey: 'text_style' },
+  {
+    textField: 'paragraph',
+    styleField: 'paragraphStyle',
+    argKey: 'paragraph_style',
+  },
 ];
 
 /**

package/src/metadata-builder/helpers/rte.helpers.ts

@@ -10,6 +10,10 @@ export const applyStyleToRTEText = (
   contentText: string,
   newContentStyle: TextStyleDeclaration,
 ) => {
+  if (!contentText) {
+    return contentText;
+  }
+
   const content = contentText.includes(ESCAPED_NEWLINE_CHARACTER)
     ? getRenderText(contentText)
     : contentText;

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

@@ -36,6 +36,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'];
@@ -106,7 +107,7 @@ export default defineComponent({
       return this.getContent(this.id)!;
     },
     styleName(): string {
-      return `${this.field.name}Style`;
+      return this.field.styleName || `${this.field.name}Style`;
     },
     contentType(): string {
       return this.type;

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

@@ -15,6 +15,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';
 import type { UpdateItemValuePayload } from '../../../content-settings/models';
 import type { NavigationStyleOptionValueChangeEvent } from '../../../page-settings/models';
 
@@ -55,11 +56,16 @@ export default defineComponent({
       };
     },
     navigationStyleOptions(): NavigationStyleConfigOption[] {
-      return (
+      const options =
         this.availableNavigationStyleConfigs.find(
           (c) => c.displayType === this.value.displayType,
-        )?.options ?? []
-      );
+        )?.options ?? [];
+
+      if (!this.isAdmin && this.value.displayType.includes('hamburger')) {
+        return options.filter((o) => o !== 'subNavBackgroundColor');
+      }
+
+      return options;
     },
     isOptionColorMatched(): (option: NavigationStyleConfigOption) => boolean {
       return (option) => {
@@ -109,6 +115,11 @@ export default defineComponent({
 
         return menuStyles.iconStyle.backgroundColor;
       },
+      subNavBackgroundColor: () => {
+        const menuStyles = this.getMenuStyles();
+
+        return menuStyles.subNavBackgroundColor;
+      },
     };
   },
   methods: {
@@ -150,11 +161,78 @@ export default defineComponent({
       );
     },
 
+    isDefaultTextColorLogoBackground(): boolean {
+      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(): boolean {
+      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(): string {
+      if (this.isDefaultTextColorLogoText()) {
+        return STYLE_THEME_KEYS.LogoBackgroundColor;
+      }
+
+      if (this.isDefaultTextColorLogoBackground()) {
+        return STYLE_THEME_KEYS.LogoTextColor;
+      }
+
+      return STYLE_THEME_KEYS.LogoTextColor;
+    },
+
     onColorMatchToggled(option: NavigationStyleConfigOption, value: boolean) {
       if (value) {
+        const themeKey =
+          option === 'subNavBackgroundColor'
+            ? this.getSubNavBackgroundColorThemeKey()
+            : STYLE_THEME_KEYS.LogoTextColor;
+
         this.emitOptionValueChange({
           option,
-          value: STYLE_THEME_KEYS.LogoTextColor,
+          value: themeKey,
         });
       } else {
         this.emitOptionValueChange({

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

@@ -186,6 +186,28 @@ export const useUiNavigationStyleSettingsStore = defineStore(
         );
       },
 
+      _setSubNavBackgroundColor({
+        displayType,
+        section,
+        value,
+        viewport,
+      }: {
+        displayType: NavigationDisplayType;
+        section: PageSection;
+        value: string;
+        viewport: ViewportsType;
+      }): void {
+        if (displayType.includes('hamburger')) {
+          this.navigation[section][
+            viewport
+          ].hamburgerMenuStyle.subNavBackgroundColor = value;
+
+          return;
+        }
+
+        this.navigation[section][viewport].subNavBackgroundColor = value;
+      },
+
       _setButtonStyles({
         section,
         defaultButtonStyle,
@@ -408,6 +430,14 @@ export const useUiNavigationStyleSettingsStore = defineStore(
               viewport,
             });
             break;
+          case 'subNavBackgroundColor':
+            this._setSubNavBackgroundColor({
+              displayType,
+              section,
+              value,
+              viewport,
+            });
+            break;
           default:
             if (process.env.NODE_ENV !== 'production') {
               assertUnreachable();

package/lib/src/brand-page/components/about-section/AboutSection.mixin.d.ts

@@ -1,83 +0,0 @@
-import type { PropType } from 'vue';
-import type { AboutSectionViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<AboutSectionViewModel>;
-        required: true;
-    };
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {
-    displayAlignClass(): "tw-items-center tw-text-center" | "tw-items-start tw-text-left";
-    isFullImage(): boolean;
-    isRightAligned(): boolean;
-    isLeftAligned(): boolean;
-    isDividedContent(): boolean;
-    textAlignClass(): {
-        'tw-text-center': boolean;
-        'tw-text-left': boolean;
-        'tw-px-6': any;
-    };
-    renderText(): string;
-}, {}, import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    isMobileDevice: {
-        type: BooleanConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    isMobileDevice: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    viewModel: {
-        type: PropType<AboutSectionViewModel>;
-        required: true;
-    };
-    isPreview: {
-        type: BooleanConstructor;
-        required: false;
-        default: boolean;
-    };
-    context: {
-        type: PropType<BrandPageContext>;
-        required: true;
-    };
-    contentIndex: {
-        type: NumberConstructor;
-        required: false;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    isPreview: boolean;
-    contentIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/lib/src/brand-page/components/about-section/AboutSection.mixin.js

@@ -1,65 +0,0 @@
-import { defineComponent } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import { getRenderText } from '@brand-page/utils';
-export default defineComponent({
-    mixins: [ComponentCommonMixin],
-    props: {
-        viewModel: {
-            type: Object,
-            required: true,
-        },
-        isPreview: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        context: {
-            type: Object,
-            required: true,
-        },
-        contentIndex: {
-            type: Number,
-            required: false,
-            default: undefined,
-        },
-    },
-    data() {
-        return {};
-    },
-    computed: {
-        displayAlignClass() {
-            return this.viewModel.displayStyle === 'centered'
-                ? 'tw-items-center tw-text-center'
-                : 'tw-items-start tw-text-left';
-        },
-        isFullImage() {
-            return (this.viewModel.displayStyle === 'right-aligned-full-image' ||
-                this.viewModel.displayStyle === 'left-aligned-full-image');
-        },
-        isRightAligned() {
-            return (this.viewModel.displayStyle === 'right-aligned-full-image' ||
-                this.viewModel.displayStyle === 'right-aligned');
-        },
-        isLeftAligned() {
-            return (this.viewModel.displayStyle === 'left-aligned-full-image' ||
-                this.viewModel.displayStyle === 'left-aligned');
-        },
-        isDividedContent() {
-            return (this.viewModel.displayStyle === 'right-aligned' ||
-                this.viewModel.displayStyle === 'left-aligned');
-        },
-        textAlignClass() {
-            return {
-                'tw-text-center': this.viewModel.displayStyle === 'centered',
-                'tw-text-left': this.viewModel.displayStyle !== 'centered',
-                'tw-px-6': this.isFullImage,
-            };
-        },
-        renderText() {
-            if (!this.viewModel.paragraph) {
-                return '';
-            }
-            return getRenderText(this.viewModel.paragraph);
-        },
-    },
-});

package/src/brand-page/components/about-section/AboutSection.mixin.ts

@@ -1,78 +0,0 @@
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import ComponentCommonMixin from '../mixins/component-common.mixin';
-import type { AboutSectionViewModel } from '@brand-page/view-models';
-import type { BrandPageContext } from '@brand-page/models';
-import { getRenderText } from '@brand-page/utils';
-
-export default defineComponent({
-  mixins: [ComponentCommonMixin],
-  props: {
-    viewModel: {
-      type: Object as PropType<AboutSectionViewModel>,
-      required: true,
-    },
-    isPreview: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    context: {
-      type: Object as PropType<BrandPageContext>,
-      required: true,
-    },
-    contentIndex: {
-      type: Number,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    displayAlignClass() {
-      return this.viewModel.displayStyle === 'centered'
-        ? 'tw-items-center tw-text-center'
-        : 'tw-items-start tw-text-left';
-    },
-    isFullImage() {
-      return (
-        this.viewModel.displayStyle === 'right-aligned-full-image' ||
-        this.viewModel.displayStyle === 'left-aligned-full-image'
-      );
-    },
-    isRightAligned() {
-      return (
-        this.viewModel.displayStyle === 'right-aligned-full-image' ||
-        this.viewModel.displayStyle === 'right-aligned'
-      );
-    },
-    isLeftAligned() {
-      return (
-        this.viewModel.displayStyle === 'left-aligned-full-image' ||
-        this.viewModel.displayStyle === 'left-aligned'
-      );
-    },
-    isDividedContent() {
-      return (
-        this.viewModel.displayStyle === 'right-aligned' ||
-        this.viewModel.displayStyle === 'left-aligned'
-      );
-    },
-    textAlignClass() {
-      return {
-        'tw-text-center': this.viewModel.displayStyle === 'centered',
-        'tw-text-left': this.viewModel.displayStyle !== 'centered',
-        'tw-px-6': this.isFullImage,
-      };
-    },
-    renderText(): string {
-      if (!this.viewModel.paragraph) {
-        return '';
-      }
-
-      return getRenderText(this.viewModel.paragraph);
-    },
-  },
-});