update hero and coverHero

Telefonica · Nov 11, 2024 · 4d8e6c9 · 4d8e6c9
1 parent f2c0306
commit 4d8e6c9
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 21 deletions.
diff --git a/src/__stories__/cover-hero-story.tsx b/src/__stories__/cover-hero-story.tsx
@@ -13,6 +13,7 @@ import usingVrImg from './images/using-vr.jpg';
 import beachImg from './images/beach.jpg';
 import beachVideo from './videos/beach.mp4';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -30,7 +31,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     sideExtra: boolean;
@@ -56,7 +59,9 @@ export const Default: StoryComponent<Args> = ({
     headlineType,
     headline,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     extra,
     sideExtra,
@@ -92,7 +97,9 @@ export const Default: StoryComponent<Args> = ({
             dataAttributes={{testid: 'cover-hero'}}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             description={description}
             extra={extra ? <Placeholder /> : undefined}
             sideExtra={sideExtra ? <Placeholder /> : undefined}
@@ -118,7 +125,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Hero',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h1',
     description: 'This is a long description with a long text to see how this works',
     extra: false,
     sideExtra: false,
@@ -197,6 +206,14 @@ Default.argTypes = {
             },
         },
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 export const CoverHeroInSlideshow: StoryComponent = () => (

diff --git a/src/__stories__/hero-story.tsx b/src/__stories__/hero-story.tsx
@@ -4,6 +4,7 @@ import usingVrImg from './images/using-vr.jpg';
 import beachImg from './images/beach.jpg';
 import beachVideo from './videos/beach.mp4';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 import type {AspectRatio} from '../video';
 
@@ -19,7 +20,9 @@ type HeroArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     actions: 'button' | 'link' | 'button and link';
@@ -36,7 +39,9 @@ export const Default: StoryComponent<HeroArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     actions,
     desktopMediaPosition,
@@ -65,7 +70,9 @@ export const Default: StoryComponent<HeroArgs> = ({
             media={mediaComponent}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             description={description}
             extra={extra ? <Placeholder /> : undefined}
             button={button}
@@ -85,7 +92,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Hero',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h1',
     description: 'This is a long description with a long text to see how this works',
     extra: false,
     actions: 'button and link',
@@ -128,4 +137,12 @@ Default.argTypes = {
             },
         },
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
diff --git a/src/card.css.ts b/src/card.css.ts
@@ -415,7 +415,7 @@ export const dataCardTopActionsWithoutIcon = style({
     },
 });
 
-export const flexColumn = style({
+export const flexColumn = sprinkles({
     display: 'flex',
     flexDirection: 'column',
 });
diff --git a/src/cover-hero.css.ts b/src/cover-hero.css.ts
@@ -126,3 +126,8 @@ export const sixColumns = style({
 });
 
 export const sideExtra = sprinkles({position: 'relative'});
+
+export const flexColumn = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/cover-hero.tsx b/src/cover-hero.tsx
@@ -12,6 +12,7 @@ import * as mediaStyles from './image.css';
 import GridLayout from './grid-layout';
 import {CoverHeroMedia} from './cover-hero-media';
 import {getPrefixedDataAttributes} from './utils/dom';
+import {isBiggerHeading} from './utils/types';
 
 import type {DataAttributes, HeadingType} from './utils/types';
 import type {ImageProps, VideoProps} from './cover-hero-media';
@@ -26,6 +27,7 @@ type BaseProps = {
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
+    pretitleAs?: HeadingType;
     title: string;
     titleLinesMax?: number;
     titleAs?: HeadingType;
@@ -73,6 +75,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             headline,
             pretitle,
             pretitleLinesMax,
+            pretitleAs,
             title,
             titleLinesMax,
             titleAs = 'h1',
@@ -108,22 +111,47 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
 
         const textShadow = hasMedia ? '0 0 15px rgba(0, 0, 0, 0.4)' : undefined;
 
+        const pretitleContent = pretitle ? (
+            <Text3 regular as={pretitleAs} truncate={pretitleLinesMax} textShadow={textShadow}>
+                {pretitle}
+            </Text3>
+        ) : undefined;
+
+        const titleContent = (
+            <Text8 as={titleAs} truncate={titleLinesMax} textShadow={textShadow}>
+                {title}
+            </Text8>
+        );
+
         const mainContent = (
             <div className={styles.mainContent}>
                 {headline && <Box paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}>{headline}</Box>}
                 <Stack space={16}>
-                    <Stack space={8}>
-                        {pretitle && (
-                            <div className={styles.sixColumns}>
-                                <Text3 regular truncate={pretitleLinesMax} textShadow={textShadow}>
-                                    {pretitle}
-                                </Text3>
-                            </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}
+                                {pretitleContent && (
+                                    <div
+                                        className={styles.sixColumns}
+                                        style={{paddingBottom: title ? 8 : 0, order: -1}}
+                                    >
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div className={styles.sixColumns} style={{paddingBottom: title ? 8 : 0}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                                {titleContent}
+                            </>
                         )}
-                        <Text8 as={titleAs} truncate={titleLinesMax} textShadow={textShadow}>
-                            {title}
-                        </Text8>
-                    </Stack>
+                    </div>
                     {description && (
                         <div className={styles.sixColumns}>
                             <Text3

diff --git a/src/header.css.ts b/src/header.css.ts
@@ -24,7 +24,7 @@ export const hideOnDesktop = style({
     },
 });
 
-export const flexColumn = style({
+export const flexColumn = sprinkles({
     display: 'flex',
     flexDirection: 'column',
 });
diff --git a/src/hero.css.ts b/src/hero.css.ts
@@ -57,3 +57,8 @@ export const expandedContent = style({
     flexDirection: 'column',
     flex: 1,
 });
+
+export const flexColumn = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+});
diff --git a/src/hero.tsx b/src/hero.tsx
@@ -15,12 +15,18 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {applyCssVars} from './utils/css';
 import {InternalResponsiveLayout, ResetResponsiveLayout} from './responsive-layout';
+import {
+    isBiggerHeading,
+    type DataAttributes,
+    type HeadingType,
+    type RendersElement,
+    type RendersNullableElement,
+} from './utils/types';
 
 import type Image from './image';
 import type Video from './video';
 import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
 import type Tag from './tag';
-import type {DataAttributes, HeadingType, RendersElement, RendersNullableElement} from './utils/types';
 
 const CONTENT_BACKGROUND_COLOR = {
     default: skinVars.colors.background,
@@ -49,6 +55,7 @@ const Layout = ({children, isInverse, backgroundColor}: LayoutProps) => {
 type HeroContentProps = {
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
     description?: string;
@@ -64,26 +71,49 @@ const HeroContent = ({
     title,
     titleAs = 'h1',
     pretitle,
+    pretitleAs,
     description,
     descriptionLinesMax,
     extra,
     button,
     secondaryButton,
     buttonLink,
 }: HeroContentProps) => {
+    const titleContent = title ? <Text8 as={titleAs}>{title}</Text8> : undefined;
+
+    const pretitleContent = pretitle ? (
+        <Text3 as={pretitleAs} regular>
+            {pretitle}
+        </Text3>
+    ) : undefined;
+
     return (
         <section className={styles.contentContainer}>
             <div>
                 <Stack space={16}>
                     {headline && headline}
-                    <Stack space={8}>
-                        {pretitle && (
-                            <Text3 as="p" regular>
-                                {pretitle}
-                            </Text3>
+
+                    {/** 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}
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title ? 8 : 0}}>{pretitleContent}</div>
+                                )}
+                                {titleContent}
+                            </>
                         )}
-                        {title && <Text8 as={titleAs}>{title}</Text8>}
-                    </Stack>
+                    </div>
+
                     {description && (
                         <Text3
                             as="p"
@@ -113,6 +143,7 @@ type HeroProps = {
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
+    pretitleAs?: HeadingType;
     title?: string;
     titleAs?: HeadingType;
     description?: string;