update header

Telefonica · Nov 11, 2024 · 7af7971 · 7af7971
1 parent bb8852c
commit 7af7971
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 24 deletions.
diff --git a/src/header.css.ts b/src/header.css.ts
@@ -23,3 +23,8 @@ export const hideOnDesktop = style({
         },
     },
 });
+
+export const flexColumn = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/header.tsx b/src/header.tsx
@@ -10,10 +10,16 @@ import {vars} from './skins/skin-contract.css';
 import * as styles from './header.css';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {Title3, Title4} from './title';
+import {
+    isBiggerHeading,
+    type DataAttributes,
+    type HeadingType,
+    type RendersElement,
+    type RendersNullableElement,
+} from './utils/types';
 
 import type NavigationBreadcrumbs from './navigation-breadcrumbs';
 import type {ButtonPrimary, ButtonSecondary} from './button';
-import type {DataAttributes, HeadingType, RendersElement, RendersNullableElement} from './utils/types';
 import type {TextPresetProps} from './text';
 
 type OverridableTextProps = {
@@ -61,31 +67,66 @@ export const Header = ({
         );
     };
 
+    const pretitleContent = pretitle
+        ? renderRichText(pretitle, {color: vars.colors.textPrimary, as: pretitleAs})
+        : undefined;
+
+    const titleContent = title ? (
+        small ? (
+            <Title3 as={titleAs}>{title}</Title3>
+        ) : (
+            <Title4 as={titleAs}>{title}</Title4>
+        )
+    ) : undefined;
+
     return (
         <Stack space={{mobile: 24, desktop: 32}} dataAttributes={dataAttributes}>
             {(title || pretitle || description) && (
                 <Box paddingRight={16}>
-                    <Stack space={8}>
-                        {headline}
-                        {pretitle &&
-                            renderRichText(pretitle, {color: vars.colors.textPrimary, as: pretitleAs})}
-                        {title &&
-                            (small ? (
-                                <Title3 as={titleAs}>{title}</Title3>
-                            ) : (
-                                <Title4 as={titleAs}>{title}</Title4>
-                            ))}
-                        {description &&
-                            (small ? (
-                                <Text2 regular color={vars.colors.textSecondary}>
-                                    {description}
-                                </Text2>
-                            ) : (
-                                <Text3 regular color={vars.colors.textSecondary}>
-                                    {description}
-                                </Text3>
-                            ))}
-                    </Stack>
+                    {/** 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}>
+                        <div style={{paddingBottom: pretitle || title || description ? 8 : 0}}>
+                            {headline}
+                        </div>
+
+                        {isBiggerHeading(titleAs, pretitleAs) ? (
+                            <>
+                                {titleContent && (
+                                    <div style={{paddingBottom: pretitle || description ? 8 : 0, order: 1}}>
+                                        {titleContent}
+                                    </div>
+                                )}
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{pretitleContent}</div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title || description ? 8 : 0}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                                {titleContent && (
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
+                                )}
+                            </>
+                        )}
+
+                        {description && (
+                            <div style={{order: 1}}>
+                                {small ? (
+                                    <Text2 regular color={vars.colors.textSecondary}>
+                                        {description}
+                                    </Text2>
+                                ) : (
+                                    <Text3 regular color={vars.colors.textSecondary}>
+                                        {description}
+                                    </Text3>
+                                )}
+                            </div>
+                        )}
+                    </div>
                 </Box>
             )}
         </Stack>
@@ -155,7 +196,7 @@ export const HeaderLayout = ({
 
     return (
         <div {...getPrefixedDataAttributes({'component-name': 'HeaderLayout', ...dataAttributes})}>
-            <ResponsiveLayout isInverse={isInverse}>
+            <ResponsiveLayout variant={isInverse ? 'inverse' : 'default'}>
                 <Box
                     paddingTop={
                         noPaddingY
@@ -214,7 +255,7 @@ export const MainSectionHeaderLayout = ({
     useSetOverscrollColor(isInverse ? {topColor: vars.colors.backgroundBrandTop} : {});
     return (
         <ResponsiveLayout
-            isInverse={isInverse}
+            variant={isInverse ? 'inverse' : 'default'}
             dataAttributes={{'component-name': 'MainSectionHeaderLayout', ...dataAttributes}}
         >
             <GridLayout

diff --git a/src/utils/types.tsx b/src/utils/types.tsx
@@ -14,3 +14,10 @@ export type IconProps = {
 export type ByBreakpoint<T> = T | {mobile: T; tablet?: T; desktop: T};
 
 export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+
+export const isBiggerHeading = (heading: HeadingType, otherHeading?: HeadingType): boolean => {
+    if (!otherHeading) {
+        return true;
+    }
+    return heading !== 'span' && (otherHeading === 'span' || heading < otherHeading);
+};