feat(SnapCard, DataCard, DisplayDataCard): add aspect ratio support (#…

…848)

- Add aspect ratio in snap/data/displayData cards
- Change height to minHeight in snap and data cards, to avoid weird
behaviour when content doesn't fit in the container.

src/__screenshot_tests__/data-card-screenshot-test.tsx

@@ -3,6 +3,7 @@ import {openStoryPage, screen, setRootFontSize} from '../test-utils';
 import type {Device} from '../test-utils';
 
 const TESTABLE_DEVICES: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
+const ASPECT_RATIO_VALUES = ['1:1', '7:10', '9:10'];
 
 test.each(TESTABLE_DEVICES)('DataCard in %s', async (device) => {
     await openStoryPage({
@@ -93,3 +94,17 @@ test('DataCard without icon, with top actions and too long title', async () => {
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each(ASPECT_RATIO_VALUES)('DataCard with aspect ratio %s', async (aspectRatio) => {
+    await openStoryPage({
+        id: 'components-cards-data-card--default',
+        device: 'MOBILE_IOS',
+        args: {aspectRatio: aspectRatio.replace(':', ' ')},
+    });
+
+    const dataCard = await screen.findByTestId('data-card');
+
+    const image = await dataCard.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});

src/__screenshot_tests__/display-data-card-screenshot-test.tsx

@@ -1,5 +1,7 @@
 import {openStoryPage, screen} from '../test-utils';
 
+const ASPECT_RATIO_VALUES = ['1:1', '7:10', '9:10'];
+
 test('DisplayDataCard', async () => {
     await openStoryPage({
         id: 'components-cards-display-data-card--default',
@@ -51,6 +53,20 @@ test('DisplayDataCard with top actions inverse', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(ASPECT_RATIO_VALUES)('DisplayDataCard with aspect ratio %s', async (aspectRatio) => {
+    await openStoryPage({
+        id: 'components-cards-display-data-card--default',
+        device: 'MOBILE_IOS',
+        args: {aspectRatio: aspectRatio.replace(':', ' ')},
+    });
+
+    const displayDataCard = await screen.findByTestId('display-data-card');
+
+    const image = await displayDataCard.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('DisplayDataCard group', async () => {
     const page = await openStoryPage({
         id: 'components-cards-display-data-card--group',

src/__screenshot_tests__/snap-card-screenshot-test.tsx

@@ -2,6 +2,8 @@ import {openStoryPage, screen, setRootFontSize} from '../test-utils';
 
 import type {Device, StoryArgs} from '../test-utils';
 
+const ASPECT_RATIO_VALUES = ['1:1', '7:10', '9:10'];
+
 const renderSnapCard = async ({device, args}: {device: Device; args?: StoryArgs}) => {
     await openStoryPage({
         id: 'components-cards-snap-card--default',
@@ -45,6 +47,20 @@ test('SnapCard', async () => {
     });
 });
 
+test.each(ASPECT_RATIO_VALUES)('SnapCard with aspect ratio %s', async (aspectRatio) => {
+    await openStoryPage({
+        id: 'components-cards-snap-card--default',
+        device: 'MOBILE_IOS',
+        args: {aspectRatio: aspectRatio.replace(':', ' ')},
+    });
+
+    const snapCard = await screen.findByTestId('snap-card');
+
+    const image = await snapCard.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('SnapCard group', async () => {
     const page = await openStoryPage({
         id: 'components-cards-snap-card--group',

src/__stories__/data-card-story.tsx

@@ -15,6 +15,7 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {AspectRatio} from '../card';
 import type {TagType} from '..';
 
 export default {
@@ -33,8 +34,11 @@ type DataCardArgs = {
     actions: 'button' | 'link' | 'button and link' | 'on press';
     closable: boolean;
     withTopAction: boolean;
+    aspectRatio: AspectRatio;
 };
 
+const fixedAspectRatioValues = ['1 1', '16 9', '7 10', '9 10'];
+
 export const Default: StoryComponent<DataCardArgs> = ({
     asset = 'icon',
     headline,
@@ -47,6 +51,7 @@ export const Default: StoryComponent<DataCardArgs> = ({
     actions = 'button',
     closable,
     withTopAction,
+    aspectRatio,
 }) => {
     let icon;
     if (asset === 'icon') {
@@ -76,6 +81,10 @@ export const Default: StoryComponent<DataCardArgs> = ({
               buttonLink,
           };
 
+    const aspectRatioValue = fixedAspectRatioValues.includes(aspectRatio)
+        ? aspectRatio.replace(' ', ':')
+        : aspectRatio;
+
     return (
         <DataCard
             onClose={closable ? () => {} : undefined}
@@ -87,6 +96,7 @@ export const Default: StoryComponent<DataCardArgs> = ({
             description={description}
             extra={withExtra ? <Placeholder /> : undefined}
             {...interactiveActions}
+            aspectRatio={aspectRatioValue as AspectRatio}
             dataAttributes={{testid: 'data-card'}}
             aria-label="Data card label"
             actions={
@@ -119,6 +129,7 @@ Default.args = {
     actions: 'button',
     closable: false,
     withTopAction: false,
+    aspectRatio: 'auto',
 };
 Default.argTypes = {
     asset: {
@@ -133,6 +144,18 @@ Default.argTypes = {
         options: ['button', 'link', 'button and link', 'on press', 'none'],
         control: {type: 'select'},
     },
+    aspectRatio: {
+        options: ['auto', ...fixedAspectRatioValues],
+        control: {
+            type: 'select',
+            labels: {
+                '1 1': '1:1',
+                '16 9': '16:9',
+                '7 10': '7:10',
+                '9 10': '9:10',
+            },
+        },
+    },
 };
 
 export const Group: StoryComponent = () => {

src/__stories__/display-data-card-story.tsx

@@ -18,6 +18,7 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {AspectRatio} from '../card';
 import type {TagType} from '..';
 
 export default {
@@ -36,8 +37,11 @@ type DisplayDataCardArgs = {
     withTopAction: boolean;
     actions: 'button' | 'link' | 'button and link' | 'button and secondary button';
     isInverse: boolean;
+    aspectRatio: AspectRatio;
 };
 
+const fixedAspectRatioValues = ['1 1', '16 9', '7 10', '9 10'];
+
 export const Default: StoryComponent<DisplayDataCardArgs> = ({
     asset = 'icon',
     headline,
@@ -50,6 +54,7 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
     closable,
     withTopAction,
     isInverse,
+    aspectRatio,
 }) => {
     let icon;
     if (asset === 'circle + icon') {
@@ -89,6 +94,10 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
               secondaryButton,
           };
 
+    const aspectRatioValue = fixedAspectRatioValues.includes(aspectRatio)
+        ? aspectRatio.replace(' ', ':')
+        : aspectRatio;
+
     return (
         <DisplayDataCard
             isInverse={isInverse}
@@ -109,6 +118,7 @@ export const Default: StoryComponent<DisplayDataCardArgs> = ({
             pretitle={pretitle}
             title={title}
             description={description}
+            aspectRatio={aspectRatioValue as AspectRatio}
             extra={withExtra ? <Placeholder /> : undefined}
             {...interactiveActions}
             dataAttributes={{testid: 'display-data-card'}}
@@ -130,6 +140,7 @@ Default.args = {
     closable: false,
     withTopAction: false,
     isInverse: false,
+    aspectRatio: 'auto',
 };
 Default.argTypes = {
     asset: {
@@ -144,6 +155,18 @@ Default.argTypes = {
         options: ['button', 'link', 'button and link', 'button and secondary button', 'on press'],
         control: {type: 'select'},
     },
+    aspectRatio: {
+        options: ['auto', '1 1', '16 9', '7 10', '9 10'],
+        control: {
+            type: 'select',
+            labels: {
+                '1 1': '1:1',
+                '16 9': '16:9',
+                '7 10': '7:10',
+                '9 10': '9:10',
+            },
+        },
+    },
 };
 
 export const Group: StoryComponent = () => {

src/__stories__/snap-card-story.tsx

@@ -14,6 +14,8 @@ import {
 import {Placeholder} from '../placeholder';
 import avatarImg from './images/avatar.jpg';
 
+import type {AspectRatio} from '../card';
+
 export default {
     title: 'Components/Cards/Snap card',
 };
@@ -25,9 +27,20 @@ type Args = {
     touchable: boolean;
     isInverse: boolean;
     withExtra: boolean;
+    aspectRatio: AspectRatio;
 };
 
-export const Default: StoryComponent<Args> = ({asset, title, subtitle, touchable, isInverse, withExtra}) => {
+const fixedAspectRatioValues = ['1 1', '16 9', '7 10', '9 10'];
+
+export const Default: StoryComponent<Args> = ({
+    asset,
+    title,
+    subtitle,
+    touchable,
+    isInverse,
+    withExtra,
+    aspectRatio,
+}) => {
     const assetToIcon: {
         [asset in Args['asset']]: React.ReactElement | undefined;
     } = {
@@ -46,6 +59,10 @@ export const Default: StoryComponent<Args> = ({asset, title, subtitle, touchable
         none: undefined,
     };
 
+    const aspectRatioValue = fixedAspectRatioValues.includes(aspectRatio)
+        ? aspectRatio.replace(' ', ':')
+        : aspectRatio;
+
     return (
         <SnapCard
             icon={assetToIcon[asset]}
@@ -62,6 +79,7 @@ export const Default: StoryComponent<Args> = ({asset, title, subtitle, touchable
                       }
                     : undefined
             }
+            aspectRatio={aspectRatioValue as AspectRatio}
         />
     );
 };
@@ -74,12 +92,25 @@ Default.args = {
     touchable: true,
     isInverse: false,
     withExtra: false,
+    aspectRatio: 'auto',
 };
 Default.argTypes = {
     asset: {
         options: ['icon in circle', 'icon', 'image', 'none'],
         control: {type: 'select'},
     },
+    aspectRatio: {
+        options: ['auto', '1 1', '16 9', '7 10', '9 10'],
+        control: {
+            type: 'select',
+            labels: {
+                '1 1': '1:1',
+                '16 9': '16:9',
+                '7 10': '7:10',
+                '9 10': '9:10',
+            },
+        },
+    },
 };
 
 export const Group: StoryComponent = () => {

src/card.tsx

@@ -119,7 +119,7 @@ export const CardActionsGroup = ({
     );
 };
 
-type AspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
+export type AspectRatio = '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
 
 const aspectRatioToNumber = (aspectRatio?: AspectRatio | number): number => {
     if (!aspectRatio) {
@@ -716,6 +716,7 @@ interface DataCardBaseProps {
     descriptionLinesMax?: number;
     extra?: React.ReactNode;
     actions?: Array<CardAction>;
+    aspectRatio?: AspectRatio | number;
     children?: void;
     /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
     dataAttributes?: DataAttributes;
@@ -752,6 +753,7 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
             dataAttributes,
             'aria-label': ariaLabel,
             onClose,
+            aspectRatio,
             ...touchableProps
         },
         ref
@@ -772,8 +774,9 @@ export const DataCard = React.forwardRef<HTMLDivElement, DataCardProps>(
                 ref={ref}
                 aria-label={ariaLabel}
                 className={styles.touchableContainer}
+                aspectRatio={aspectRatio}
             >
-                <Boxed className={styles.boxed} width="100%" height="100%">
+                <Boxed className={styles.boxed} width="100%" minHeight="100%">
                     <BaseTouchable
                         maybe
                         {...touchableProps}
@@ -828,6 +831,7 @@ type SnapCardProps = MaybeTouchableCard<{
     'aria-label'?: string;
     extra?: React.ReactNode;
     isInverse?: boolean;
+    aspectRatio?: AspectRatio | number;
     children?: void;
 }>;
 
@@ -843,6 +847,7 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
             'aria-label': ariaLabel,
             extra,
             isInverse = false,
+            aspectRatio,
             ...touchableProps
         },
         ref
@@ -855,8 +860,9 @@ export const SnapCard = React.forwardRef<HTMLDivElement, SnapCardProps>(
                 dataAttributes={{'component-name': 'SnapCard', ...dataAttributes}}
                 ref={ref}
                 className={styles.touchableContainer}
+                aspectRatio={aspectRatio}
             >
-                <Boxed className={styles.boxed} isInverse={isInverse} width="100%" height="100%">
+                <Boxed className={styles.boxed} isInverse={isInverse} width="100%" minHeight="100%">
                     <BaseTouchable
                         maybe
                         {...touchableProps}
@@ -911,10 +917,10 @@ interface CommonDisplayCardProps {
     description?: string;
     descriptionLinesMax?: number;
     'aria-label'?: string;
+    aspectRatio?: AspectRatio | number;
 }
 
 type DisplayMediaCardBaseProps = {
-    aspectRatio?: AspectRatio | number;
     width?: number | string;
     height?: number | string;
 };