fix(AdvancedDataCard): Fix Touchable layout, extras positioning, clos…

…able DOM position... (#833)

Co-authored-by: Pedro Ladaria <[email protected]>

.storybook/preview.tsx

@@ -118,4 +118,7 @@ export const decorators = [withLayoutDecorator, withMisticaThemeProvider];
 export const parameters = {
     // https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
+
+    // Workaround for: https://github.com/storybookjs/storybook/issues/17098
+    docs: {source: {type: 'code'}},
 };

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

@@ -10,7 +10,7 @@ test.each`
     ${'button'}          | ${true}
     ${'link'}            | ${true}
     ${'button and link'} | ${true}
-`('Advanced Data Card', async ({actions, footerImage}) => {
+`('Advanced Data Card actions: $actions - footerImage: $footerImage', async ({actions, footerImage}) => {
     await openStoryPage({
         id: 'community-advanceddatacard--default',
         device: 'MOBILE_IOS',
@@ -22,3 +22,33 @@ test.each`
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each`
+    extra
+    ${0}
+    ${1}
+    ${3}
+`('Advanced Data Card extras: $extra', async ({extra}) => {
+    await openStoryPage({
+        id: 'community-advanceddatacard--default',
+        device: 'MOBILE_IOS',
+        args: {extra},
+    });
+
+    const element = await screen.findByTestId('advanced-data-card');
+    const image = await element.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Advanced Data Card inside Carousel', async () => {
+    await openStoryPage({
+        id: 'community-advanceddatacards-in-carousel--default',
+        device: 'DESKTOP',
+    });
+
+    const element = await screen.findByTestId('advanced-data-card-carousel');
+    const image = await element.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});

src/community/__stories__/advanced-data-card-carousel-story.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import AdvancedDataCard from '../advanced-data-card';
+import {Placeholder} from '../../placeholder';
+import {Carousel} from '../../carousel';
+import Tag from '../../tag';
+
+export default {
+    title: 'Community/AdvancedDataCards in Carousel',
+};
+
+type Args = {onPress: boolean};
+
+export const Default: StoryComponent<Args> = ({onPress}) => {
+    const onPressHandler = onPress ? () => {} : undefined;
+    return (
+        <Carousel
+            dataAttributes={{testid: 'advanced-data-card-carousel'}}
+            itemsPerPage={4}
+            items={[
+                <AdvancedDataCard
+                    title="Title 1"
+                    description="Description 1"
+                    footerText="Footer 1"
+                    onClose={() => {}}
+                    onPress={onPressHandler}
+                />,
+                <AdvancedDataCard
+                    title="Title 2"
+                    headline={<Tag>Headline 2</Tag>}
+                    extra={[<Placeholder height={48} />]}
+                    footerText="Footer 2"
+                    onClose={() => {}}
+                    onPress={onPressHandler}
+                />,
+                <AdvancedDataCard
+                    title="Title 3"
+                    description="Description 3"
+                    extra={[<Placeholder height={48} />, <Placeholder height={48} />]}
+                    footerText="Footer 3"
+                    onClose={() => {}}
+                    onPress={onPressHandler}
+                />,
+                <AdvancedDataCard
+                    title="Title 4"
+                    extra={[
+                        <Placeholder height={48} />,
+                        <Placeholder height={48} />,
+                        <Placeholder height={48} />,
+                    ]}
+                    footerText="Footer 4"
+                    onClose={() => {}}
+                    onPress={onPressHandler}
+                />,
+            ]}
+        />
+    );
+};
+
+Default.storyName = 'AdvancedDataCards in Carousel';
+Default.args = {
+    onPress: true,
+};

src/community/__stories__/advanced-data-card-story.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import ResponsiveLayout from '../../responsive-layout';
-import Box from '../../box';
 import {ButtonLink, ButtonPrimary} from '../../button';
 import Tag from '../../tag';
 import AdvancedDataCard from '../advanced-data-card';
 import imgExample from '../../__stories__/images/avatar.jpg';
 import Image from '../../image';
 import StackingGroup from '../../stacking-group';
+import {Placeholder} from '../../placeholder';
 
 import type {TagType} from '../../tag';
 
@@ -25,6 +24,7 @@ type Args = {
     footerText: string;
     actions: string;
     onClose: boolean;
+    extra: number;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -38,6 +38,7 @@ export const Default: StoryComponent<Args> = ({
     footerText,
     actions,
     onClose,
+    extra,
 }) => {
     const button = actions.includes('button') ? (
         <ButtonPrimary
@@ -67,35 +68,35 @@ export const Default: StoryComponent<Args> = ({
         : undefined;
 
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'advanced-data-card'}}>
-                <AdvancedDataCard
-                    stackingGroup={
-                        stackingGroup ? (
-                            <StackingGroup maxItems={4} moreItemsStyle={{type: 'square', size: 40}}>
-                                <Image height={40} src={imgExample} />
-                                <Image height={40} src={imgExample} />
-                                <Image height={40} src={imgExample} />
-                                <Image height={40} src={imgExample} />
-                                <Image height={40} src={imgExample} />
-                            </StackingGroup>
-                        ) : undefined
-                    }
-                    headline={<Tag type={headlineType}>{headlineType}</Tag>}
-                    pretitle={pretitle}
-                    title={title}
-                    subtitle={subtitle}
-                    description={description}
-                    aria-label="aria label"
-                    button={button}
-                    buttonLink={buttonLink}
-                    footerImage={footerImage ? <Image height={40} src={imgExample} /> : undefined}
-                    footerText={footerText}
-                    onClose={onClose ? () => window.alert('closed!') : undefined}
-                    onPress={onPress}
-                />
-            </Box>
-        </ResponsiveLayout>
+        <AdvancedDataCard
+            dataAttributes={{testid: 'advanced-data-card'}}
+            stackingGroup={
+                stackingGroup ? (
+                    <StackingGroup maxItems={4} moreItemsStyle={{type: 'square', size: 40}}>
+                        <Image height={40} src={imgExample} />
+                        <Image height={40} src={imgExample} />
+                        <Image height={40} src={imgExample} />
+                        <Image height={40} src={imgExample} />
+                        <Image height={40} src={imgExample} />
+                    </StackingGroup>
+                ) : undefined
+            }
+            headline={<Tag type={headlineType}>{headlineType}</Tag>}
+            pretitle={pretitle}
+            title={title}
+            subtitle={subtitle}
+            description={description}
+            aria-label="aria label"
+            button={button}
+            buttonLink={buttonLink}
+            footerImage={footerImage ? <Image height={40} src={imgExample} /> : undefined}
+            footerText={footerText}
+            onClose={onClose ? () => window.alert('closed!') : undefined}
+            onPress={onPress}
+            extra={Array.from({length: extra}, (_, i) => (
+                <Placeholder key={i} height={56} />
+            ))}
+        />
     );
 };
 
@@ -111,6 +112,7 @@ Default.args = {
     footerText: '',
     actions: 'button and link',
     onClose: true,
+    extra: 0,
 };
 Default.argTypes = {
     headlineType: {

src/community/advanced-data-card.css.ts

@@ -38,14 +38,18 @@ export const actions = style([
     },
 ]);
 
-export const boxed = style([
-    sprinkles({display: 'flex'}),
+export const touchableContainer = style([
     {
-        isolation: 'isolate', // Needed to preserve border-radius with Video component and Safari
+        // not defined in sprinkles to avoid touchable style override
+        display: 'flex',
     },
+    sprinkles({
+        height: '100%',
+        flexDirection: 'column',
+    }),
 ]);
 
-export const interaction = style({
+export const hoverEffect = style({
     '@media': {
         [mq.supportsHover]: {
             selectors: {
@@ -65,7 +69,6 @@ export const interaction = style({
 export const cardContentStyle = style([
     paddingX,
     sprinkles({
-        display: 'flex',
         paddingTop: 8,
         paddingBottom: 24,
     }),
@@ -83,6 +86,7 @@ export const minHeight = style({minHeight: 216});
 
 export const dataCard = style([
     sprinkles({
+        position: 'relative',
         display: 'flex',
         flex: 1,
         flexDirection: 'column',
@@ -195,11 +199,6 @@ export const buttonMobile = style([
     },
 ]);
 
-export const extraTop = style({
-    marginTop: 'auto',
-    width: '100%',
-});
-
 export const footerDirection = style([
     sprinkles({
         display: 'flex',