WEB-1485 extra to the bottom + tests

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

@@ -40,3 +40,15 @@ test.each`
 
     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

@@ -2,6 +2,7 @@ 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',
@@ -10,48 +11,48 @@ export default {
 type Args = {onPress: boolean};
 
 export const Default: StoryComponent<Args> = ({onPress}) => {
-    const onPressHandler = onPress
-        ? () => {
-              console.log('click');
-          }
-        : undefined;
+    const onPressHandler = onPress ? () => {} : undefined;
     return (
         <Carousel
+            dataAttributes={{testid: 'advanced-data-card-carousel'}}
             itemsPerPage={4}
             items={[
                 <AdvancedDataCard
-                    title="Title"
-                    footerText="Footer"
+                    title="Title 1"
+                    description="Description 1"
+                    footerText="Footer 1"
                     onClose={() => {}}
                     onPress={onPressHandler}
                 />,
                 <AdvancedDataCard
-                    title="Title"
+                    title="Title 2"
+                    headline={<Tag>Headline 2</Tag>}
                     extra={[<Placeholder height={48} />]}
-                    footerText="Footer"
+                    footerText="Footer 2"
                     onClose={() => {}}
                     onPress={onPressHandler}
                 />,
                 <AdvancedDataCard
-                    title="Title"
+                    title="Title 3"
+                    description="Description 3"
                     extra={[<Placeholder height={48} />, <Placeholder height={48} />]}
-                    footerText="Footer"
+                    footerText="Footer 3"
                     onClose={() => {}}
                     onPress={onPressHandler}
                 />,
                 <AdvancedDataCard
-                    title="Title"
+                    title="Title 4"
                     extra={[
                         <Placeholder height={48} />,
                         <Placeholder height={48} />,
                         <Placeholder height={48} />,
                     ]}
-                    footerText="Footer"
+                    footerText="Footer 4"
                     onClose={() => {}}
                     onPress={onPressHandler}
                 />,
             ]}
-        ></Carousel>
+        />
     );
 };
 

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

@@ -11,7 +11,6 @@ import type {TagType} from '../../tag';
 
 export default {
     title: 'Community/AdvancedDataCard',
-    argTypes: {extra: {control: {type: 'range', min: 0, max: 5}}},
 };
 
 type Args = {

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

@@ -38,11 +38,16 @@ export const actions = style([
     },
 ]);
 
-export const touchableContainer = sprinkles({
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-});
+export const touchableContainer = style([
+    {
+        // not defined in sprinkles to avoid touchable style override
+        display: 'flex',
+    },
+    sprinkles({
+        height: '100%',
+        flexDirection: 'column',
+    }),
+]);
 
 export const hoverEffect = style({
     '@media': {

src/community/advanced-data-card.tsx

@@ -279,9 +279,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                         onPress={onPress}
                         tabIndex={0}
                         maybe
-                        className={classNames(styles.touchableContainer, {
-                            [styles.hoverEffect]: !!onPress,
-                        })}
+                        className={classNames(styles.touchableContainer, {[styles.hoverEffect]: !!onPress})}
                         aria-label={ariaLabel}
                     >
                         <div
@@ -308,9 +306,8 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                                     />
                                 </Stack>
                             </Box>
-                            <CardActionsGroup actions={actions} onClose={onClose} />
                         </div>
-
+                        <div style={{flexGrow: 1}} />
                         {hasExtras && (
                             <Box paddingTop={16} paddingBottom={24}>
                                 {extra.map((item, index) => {
@@ -331,6 +328,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                     </Touchable>
                     {hasFooter && <CardFooter {...footerProps} />}
                 </Boxed>
+                <CardActionsGroup actions={actions} onClose={onClose} />
             </section>
         );
     }