@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -1,4 +1,4 @@
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
+import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
 import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
 import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
@@ -950,10 +950,6 @@ export const TEXT_CONTENT_SETTINGS_CONFIG = () => ({
         },
         textSize: {
             type: 'slider',
-            defaultValue: {
-                fontSize: FONT_SIZE_BODY,
-                lineHeight: LINE_HEIGHT_BODY,
-            },
             title: contentSettingsTr(`sizeTitle`),
             valueConvertor: textSizeValueConvertor,
             minLength: MIN_TEXT_SIZE_PX,

package/lib/src/brand-page-maker/convertors/text-css-style-options.convertor.js

@@ -3,10 +3,12 @@ const VALUE_ITALIC = 'italic';
 const VALUE_UNDERLINE = 'underline';
 const VALUE_STRIKETHROUGH = 'strikethrough';
 const FONT_STYLE_ITALIC = 'italic';
+const FONT_STYLE_NORMAL = 'normal';
 const FONT_WEIGHT_BOLD = 'bold';
 const FONT_WEIGHT_NORMAL = 'normal';
 const TEXT_DECORATION_UNDERLINE = 'underline';
 const TEXT_DECORATION_STRIKETHROUGH = 'line-through';
+const TEXT_DECORATION_NONE = 'none';
 export const textCSSStyleOptionsConvertor = {
     convertBackToMultipleValues: false,
     convert(value) {
@@ -42,10 +44,12 @@ export const textCSSStyleOptionsConvertor = {
             ?.isSelected
             ? FONT_WEIGHT_BOLD
             : FONT_WEIGHT_NORMAL;
+        // "Off" is an explicit neutral, not unset: unset falls back to the linked role, so a role's
+        // italic/underline/strike could never be turned off on the element.
         const fontStyle = config.options.find((x) => x.value === VALUE_ITALIC)
             ?.isSelected
             ? FONT_STYLE_ITALIC
-            : undefined;
+            : FONT_STYLE_NORMAL;
         let textDecoration = '';
         if (config.options.find((x) => x.value === VALUE_UNDERLINE)?.isSelected) {
             textDecoration += TEXT_DECORATION_UNDERLINE + ' ';
@@ -56,7 +60,7 @@ export const textCSSStyleOptionsConvertor = {
         return {
             fontWeight,
             fontStyle,
-            textDecoration,
+            textDecoration: textDecoration || TEXT_DECORATION_NONE,
         };
     },
 };

package/lib/src/brand-page-maker/convertors/text-size-value.convertor.d.ts

@@ -1,2 +1,2 @@
 import type { ValueConvertor } from '../models';
-export declare const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle, string>;
+export declare const textSizeValueConvertor: ValueConvertor<BrandPageCssStyle | undefined, string>;

package/lib/src/brand-page-maker/convertors/text-size-value.convertor.js

@@ -2,8 +2,10 @@ import { DEFAULT_FONT_SIZE } from '@brand-page/constants/';
 import { pxToEm, emToPx } from '../utils/text.util';
 export const textSizeValueConvertor = {
     convertBackToMultipleValues: false,
+    // R6 dropped `textSize`'s `defaultValue` (view-model.util.ts no longer backfills it), so this
+    // hidden field's own value is genuinely undefined now, not just missing `fontSize`.
     convert(value) {
-        if (!value.fontSize)
+        if (!value?.fontSize)
             return DEFAULT_FONT_SIZE.toString();
         return Math.ceil(parseFloat(emToPx(value.fontSize))).toString();
     },

package/lib/src/brand-page-maker/default-getters/payment-text-and-border-color.default-getter.js

@@ -1,18 +1,11 @@
-import { isTransparentColour } from '@brand-page/utils/color.util';
 import { RGBAtoHex } from '@utils/helpers';
-export const paymentTextAndBorderColorFieldDefaultGetter = (brandPage, id) => {
-    const content = brandPage.pages
-        .flatMap((p) => p.contents)
-        .find((c) => c.id === id);
-    const contentBackgroundColor = content.backgroundColor?.background ||
-        content.backgroundColor?.backgroundColor;
-    const color = contentBackgroundColor && !isTransparentColour(contentBackgroundColor)
-        ? RGBAtoHex(brandPage.styles.buttonStyles.style.color)
-        : RGBAtoHex(brandPage.styles.textStyles.textStyleOptions.paragraphs?.style?.color);
-    return {
-        color,
-    };
-};
+// BP-5969 (ADR-0020): a typography role carries no colour, so there is no single site
+// "default text colour" any more — colour is contrast-derived per surface and baked onto
+// content at birth (`applyTextContrast`). This getter returns the button-label colour as a
+// brand-legible starting point; the birth-time bake refines the actual per-surface colour.
+export const paymentTextAndBorderColorFieldDefaultGetter = (brandPage) => ({
+    color: RGBAtoHex(brandPage.styles.buttonStyles.style.color),
+});
 export const shopBorderColorFieldDefaultGetter = (brandPage) => ({
     borderColor: brandPage.styles.buttonStyles.style.backgroundColor,
 });

package/lib/src/brand-page-maker/default-getters/text-color.default-getter.js

@@ -1,18 +1,11 @@
-import { isTransparentColour } from '@brand-page/utils/color.util';
 import { RGBAtoHex } from '@utils/helpers';
-export const textColorFieldDefaultGetter = (brandPage, id) => {
+// BP-5969 (ADR-0020): a typography role carries no colour, so there is no single site
+// "default text colour" any more — colour is contrast-derived per surface and baked onto
+// content at birth (`applyTextContrast`). This getter returns the button-label colour as a
+// brand-legible starting point; the birth-time bake refines the actual per-surface colour.
+export const textColorFieldDefaultGetter = (brandPage) => {
     if (brandPage.pages.length === 0) {
         return {};
     }
-    const content = brandPage.pages
-        .flatMap((p) => p.contents)
-        .find((c) => c.id === id);
-    const contentBackgroundColor = content.backgroundColor?.background ||
-        content.backgroundColor?.backgroundColor;
-    const color = contentBackgroundColor && !isTransparentColour(contentBackgroundColor)
-        ? RGBAtoHex(brandPage.styles.buttonStyles.style.color)
-        : RGBAtoHex(brandPage.styles.textStyles.textStyleOptions.paragraphs?.style?.color);
-    return {
-        color,
-    };
+    return { color: RGBAtoHex(brandPage.styles.buttonStyles.style.color) };
 };

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

@@ -23,6 +23,14 @@ export declare const createInitialTestimonialSectionContent: CreateInitialConten
 export declare const createInitialAboutSectionContent: CreateInitialContentFunction<AboutSectionContent>;
 export declare const createInitialDividerSectionContent: CreateInitialContentFunction<DividerSectionContent>;
 export declare const createDefaultLogoTheme: () => LogoTheme;
+/**
+ * Runs after migration on a blank site, so its header and footer text starts on its role with no
+ * typography of its own. The blank model has no version, so every migration runs on it and keeps the
+ * retired look as that text's own values; the model defaults can't change because released
+ * migrations read them. The Save Contact label (brand.contact only) joins the same pass: migration-22
+ * seeds it with typography of its own too.
+ */
+export declare const applyBlankSiteTextRoles: (model: BrandPageModel) => void;
 export declare const createInitialBrandPage: (brandPageType: BrandPageType) => BrandPageModel;
 export declare const createInitialSocialLinksContent: (options?: CreateInitialContentOptions) => SocialLinksContent;
 export declare const createInitialShapesSectionContent: CreateInitialContentFunction<ShapesSectionContent>;