Merge pull request #1334 from prezly/feature/dev-20984-implement-support-for-text-justify-in-emails-site-renderers

[DEV-20984] Fix - Add support for justify align on subtitles

Author: kudlajz

src/modules/Story/HeaderRenderer/Subtitle.module.scss

@@ -17,3 +17,7 @@
 .alignRight {
     text-align: right;
 }
+
+.alignJustify {
+    text-align: justify;
+}

src/modules/Story/HeaderRenderer/Subtitle.tsx

@@ -23,6 +23,7 @@ export function Subtitle({ children, node }: Props) {
                 [styles.alignLeft]: node.align === TextAlignment.LEFT,
                 [styles.alignCenter]: node.align === TextAlignment.CENTER,
                 [styles.alignRight]: node.align === TextAlignment.RIGHT,
+                [styles.alignJustify]: node.align === TextAlignment.JUSTIFY,
             })}
         >
             {children}

src/modules/Story/Story.tsx

@@ -82,7 +82,9 @@ export async function Story({
                 <HeaderRenderer nodes={mainDocument} />
                 <div
                     className={classNames(styles.linksAndDateWrapper, {
-                        [styles.left]: headerAlignment === TextAlignment.LEFT,
+                        [styles.left]:
+                            headerAlignment === TextAlignment.LEFT ||
+                            headerAlignment === TextAlignment.JUSTIFY,
                         [styles.right]: headerAlignment === TextAlignment.RIGHT,
                         [styles.center]: headerAlignment === TextAlignment.CENTER,
                     })}

src/modules/Story/lib.ts

@@ -12,9 +12,5 @@ export function getHeaderAlignment(
         HeadingNode.isSubtitleHeadingNode(node),
     );
 
-    if (subtitleNode && subtitleNode.align) {
-        return subtitleNode.align;
-    }
-
-    return titleNode?.align ?? TextAlignment.LEFT;
+    return subtitleNode?.align ?? titleNode?.align ?? TextAlignment.LEFT;
 }