update headline order in hero/coverHero/header and fix spacing bug in…

… header
Telefonica · Nov 25, 2024 · 369bf37 · 369bf37
1 parent 6b410b0
commit 369bf37
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 31 deletions.
diff --git a/src/__tests__/cover-hero-test.tsx b/src/__tests__/cover-hero-test.tsx
@@ -5,8 +5,8 @@ import {makeTheme} from './test-utils';
 import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 
-const pretitleFirst = 'HeadlinePretitleTitleDescription';
-const titleFirst = 'HeadlineTitlePretitleDescription';
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
 
 test.each`
     pretitleAs   | titleAs      | expectedOrder

diff --git a/src/__tests__/header-test.tsx b/src/__tests__/header-test.tsx
@@ -4,8 +4,8 @@ import {makeTheme} from './test-utils';
 import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 
-const pretitleFirst = 'HeadlinePretitleTitleDescription';
-const titleFirst = 'HeadlineTitlePretitleDescription';
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
 
 test.each`
     pretitleAs   | titleAs      | expectedOrder

diff --git a/src/__tests__/hero-test.tsx b/src/__tests__/hero-test.tsx
@@ -5,8 +5,8 @@ import {makeTheme} from './test-utils';
 import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 
-const pretitleFirst = 'HeadlinePretitleTitleDescription';
-const titleFirst = 'HeadlineTitlePretitleDescription';
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
 
 test.each`
     pretitleAs   | titleAs      | expectedOrder

diff --git a/src/cover-hero.tsx b/src/cover-hero.tsx
@@ -123,7 +123,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             </Text3>
         ) : undefined;
 
-        const titleContent = (
+        const titleContent = title ? (
             <Text8
                 as={titleAs}
                 truncate={titleLinesMax}
@@ -132,24 +132,28 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             >
                 {title}
             </Text8>
-        );
+        ) : undefined;
+
+        const headlineContent = headline ? (
+            <div style={{order: -1}}>
+                <Box
+                    dataAttributes={{testid: 'headline'}}
+                    paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
+                >
+                    {headline}
+                </Box>
+            </div>
+        ) : undefined;
 
         const mainContent = (
             <div className={styles.mainContent}>
-                {headline && (
-                    <Box
-                        dataAttributes={{testid: 'headline'}}
-                        paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
-                    >
-                        {headline}
-                    </Box>
-                )}
                 <Stack space={16}>
                     {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
                     <div className={styles.flexColumn}>
                         {isBiggerHeading(titleAs, pretitleAs) ? (
                             <>
                                 {titleContent}
+                                {headlineContent}
                                 {pretitleContent && (
                                     <div
                                         className={styles.sixColumns}
@@ -166,6 +170,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                         {pretitleContent}
                                     </div>
                                 )}
+                                {headlineContent}
                                 {titleContent}
                             </>
                         )}

diff --git a/src/header.tsx b/src/header.tsx
@@ -87,30 +87,29 @@ export const Header = ({
         )
     ) : undefined;
 
+    const headlineContent = headline ? (
+        // assuming that the headline will always be followed by one of: pretitle, title, description
+        <div style={{paddingBottom: 8, order: -1}} data-testid="headline">
+            {headline}
+        </div>
+    ) : undefined;
+
     return (
         <Stack space={{mobile: 24, desktop: 32}} dataAttributes={{testid: 'Header', ...dataAttributes}}>
             {(title || pretitle || description) && (
                 <Box paddingRight={16}>
                     {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
                     <div className={styles.flexColumn}>
-                        {headline && (
-                            <div
-                                style={{paddingBottom: pretitle || title || description ? 8 : 0}}
-                                data-testid="headline"
-                            >
-                                {headline}
-                            </div>
-                        )}
-
                         {isBiggerHeading(titleAs, pretitleAs) ? (
                             <>
                                 {titleContent && (
-                                    <div style={{paddingBottom: pretitle || description ? 8 : 0, order: 1}}>
-                                        {titleContent}
-                                    </div>
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
                                 )}
+                                {headlineContent}
                                 {pretitleContent && (
-                                    <div style={{paddingBottom: description ? 8 : 0}}>{pretitleContent}</div>
+                                    <div style={{paddingBottom: pretitle || description ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
                                 )}
                             </>
                         ) : (
@@ -120,6 +119,7 @@ export const Header = ({
                                         {pretitleContent}
                                     </div>
                                 )}
+                                {headlineContent}
                                 {titleContent && (
                                     <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
                                 )}

diff --git a/src/hero.tsx b/src/hero.tsx
@@ -91,17 +91,23 @@ const HeroContent = ({
         </Text3>
     ) : undefined;
 
+    const headlineContent = headline ? (
+        // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+        <div data-testid="headline" style={{paddingBottom: 16, order: -1}}>
+            {headline}
+        </div>
+    ) : undefined;
+
     return (
         <section className={styles.contentContainer}>
             <div>
                 <Stack space={16}>
-                    {headline && <div data-testid="headline">{headline}</div>}
-
                     {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
                     <div className={styles.flexColumn}>
                         {isBiggerHeading(titleAs, pretitleAs) ? (
                             <>
                                 {titleContent}
+                                {headlineContent}
                                 {pretitleContent && (
                                     <div style={{paddingBottom: title ? 8 : 0, order: -1}}>
                                         {pretitleContent}
@@ -113,6 +119,7 @@ const HeroContent = ({
                                 {pretitleContent && (
                                     <div style={{paddingBottom: title ? 8 : 0}}>{pretitleContent}</div>
                                 )}
+                                {headlineContent}
                                 {titleContent}
                             </>
                         )}