update all cards, add unit tests and add titleAs/pretitleAs controls …

…in stories
Telefonica · Nov 13, 2024 · 08589ce · 08589ce
1 parent 086f315
commit 08589ce
Show file tree

Hide file tree

Showing 13 changed files with 848 additions and 454 deletions.
diff --git a/src/__stories__/data-card-story.tsx b/src/__stories__/data-card-story.tsx
@@ -17,6 +17,7 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {AspectRatio} from '../card';
 import type {TagType} from '..';
 
@@ -29,7 +30,9 @@ type DataCardArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     ariaLabel: string;
@@ -47,7 +50,9 @@ export const Default: StoryComponent<DataCardArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     ariaLabel,
@@ -99,7 +104,9 @@ export const Default: StoryComponent<DataCardArgs> = ({
             asset={assetElement}
             headline={headline && <Tag type={headlineType}>{headline}</Tag>}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             subtitle={subtitle}
             description={description}
             extra={extra ? <Placeholder /> : undefined}
@@ -142,7 +149,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -177,6 +186,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 Group: StoryComponent = () => {

diff --git a/src/__stories__/display-data-card-story.tsx b/src/__stories__/display-data-card-story.tsx
@@ -20,6 +20,7 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {AspectRatio} from '../card';
 import type {TagType} from '..';
 
@@ -32,7 +33,9 @@ type DisplayDataCardArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     closable: boolean;
@@ -57,7 +60,9 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     extra,
     actions = 'button',
@@ -141,7 +146,9 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
             asset={assetElement}
             headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             description={description}
             aspectRatio={aspectRatioValue as AspectRatio}
             extra={extra ? <Placeholder /> : undefined}
@@ -158,7 +165,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     description: 'This is a description for the card',
     extra: false,
     actions: 'button',
@@ -201,6 +210,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 Group: StoryComponent = () => {

diff --git a/src/__stories__/display-media-card-story.tsx b/src/__stories__/display-media-card-story.tsx
@@ -23,6 +23,7 @@ import avatarImg from './images/avatar.jpg';
 import beachVideo from './videos/beach.mp4';
 import beachImg from './images/beach.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -39,7 +40,9 @@ type DisplayMediaCardArgs = {
     background: 'image' | 'video';
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     description: string;
     extra: boolean;
     closable: boolean;
@@ -65,7 +68,9 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
     headlineType,
     background,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     description,
     extra,
     actions = 'button',
@@ -153,7 +158,9 @@ export const Default: StoryComponent<DisplayMediaCardArgs> = ({
                     asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
+                    pretitleAs={pretitleAs}
                     title={title}
+                    titleAs={titleAs}
                     description={description}
                     {...interactiveActions}
                     aria-label="Display media card label"
@@ -174,7 +181,9 @@ Default.args = {
     background: 'image',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     description: 'This is a description for the card',
     extra: false,
     actions: 'button',
@@ -215,6 +224,14 @@ Default.argTypes = {
         options: ['1:1', '16:9', '7:10', '9:10', 'auto'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 Default.parameters = {fullScreen: true};
 

diff --git a/src/__stories__/media-card-story.tsx b/src/__stories__/media-card-story.tsx
@@ -21,6 +21,7 @@ import tennisImg from './images/tennis.jpg';
 import beachVideo from './videos/beach.mp4';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -36,7 +37,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     extra: boolean;
@@ -50,7 +53,9 @@ export const Default: StoryComponent<Args> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     actions = 'button',
@@ -99,7 +104,9 @@ export const Default: StoryComponent<Args> = ({
             dataAttributes={{testid: 'media-card'}}
             headline={headline && <Tag type={headlineType}>{headline}</Tag>}
             pretitle={pretitle}
+            pretitleAs={pretitleAs}
             title={title}
+            titleAs={titleAs}
             subtitle={subtitle}
             description={description}
             asset={assetElement}
@@ -153,7 +160,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -179,6 +188,14 @@ Default.argTypes = {
         options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
         control: {type: 'select'},
     },
+    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 Group: StoryComponent = () => {

diff --git a/src/__stories__/naked-card-story.tsx b/src/__stories__/naked-card-story.tsx
@@ -23,6 +23,7 @@ import beachVideo from './videos/beach.mp4';
 import {SmallNakedCard} from '../card';
 import avatarImg from './images/avatar.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -41,7 +42,9 @@ type Args = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     extra: boolean;
@@ -55,7 +58,9 @@ export const Default: StoryComponent<Args> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     actions = 'button',
@@ -106,7 +111,9 @@ export const Default: StoryComponent<Args> = ({
                     dataAttributes={{testid: 'naked-card'}}
                     headline={headline && <Tag type={headlineType}>{headline}</Tag>}
                     pretitle={pretitle}
+                    pretitleAs={pretitleAs}
                     title={title}
+                    titleAs={titleAs}
                     subtitle={subtitle}
                     description={description}
                     media={
@@ -160,7 +167,9 @@ Default.args = {
     headlineType: 'promo',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -186,6 +195,14 @@ Default.argTypes = {
         options: ['button', 'link', 'button and link', 'onPress', 'href', 'to', 'none'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 type SmallArgs = {

diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx
@@ -20,6 +20,7 @@ import avatarImg from './images/avatar.jpg';
 import beachVideo from './videos/beach.mp4';
 import beachImg from './images/beach.jpg';
 
+import type {HeadingType} from '../utils/types';
 import type {TagType} from '..';
 
 export default {
@@ -39,7 +40,9 @@ type PosterCardArgs = {
     headlineType: TagType;
     headline: string;
     pretitle: string;
+    pretitleAs: HeadingType;
     title: string;
+    titleAs: HeadingType;
     subtitle: string;
     description: string;
     extra: boolean;
@@ -63,7 +66,9 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     headline,
     headlineType,
     pretitle,
+    pretitleAs,
     title,
+    titleAs,
     subtitle,
     description,
     extra,
@@ -144,7 +149,9 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                     asset={assetElement}
                     headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
                     pretitle={pretitle}
+                    pretitleAs={pretitleAs}
                     title={title}
+                    titleAs={titleAs}
                     subtitle={subtitle}
                     description={description}
                     extra={extra ? <Placeholder /> : undefined}
@@ -169,7 +176,9 @@ Default.args = {
     variant: 'default',
     headline: 'Priority',
     pretitle: 'Pretitle',
+    pretitleAs: 'span',
     title: 'Title',
+    titleAs: 'h3',
     subtitle: 'Subtitle',
     description: 'This is a description for the card',
     extra: false,
@@ -226,6 +235,14 @@ Default.argTypes = {
         options: ['onPress', 'href', 'to', 'none'],
         control: {type: 'select'},
     },
+    pretitleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
+    titleAs: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
+        control: {type: 'select'},
+    },
 };
 
 Default.parameters = {fullScreen: true};