fix(HighlightedCard): Allow to stretch inside flex container (#360)

Co-authored-by: Pedro Ladaria <pedro.jose.ladaria.linden@telefonica.com>
Telefonica · Oct 27, 2021 · 43e56d1 · 43e56d1
1 parent cb9794e
commit 43e56d1
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 13 deletions.
diff --git a/flow-defs/highlighted-card.js.flow b/flow-defs/highlighted-card.js.flow
@@ -14,6 +14,7 @@ declare type CommonProps = {|
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   isInverse?: boolean,
   "aria-label"?: string,
+  width?: string | number,
 |};
 declare type BasicProps = {| ...$Exact<CommonProps> |};
 declare type ButtonProps = {|

diff --git a/size-stats.json b/size-stats.json
@@ -1,11 +1,11 @@
 {
     "dist": {
-        "js": "5559.59 KB",
-        "jsNoMisticaIcons": "857.21 KB"
+        "js": "5560.35 KB",
+        "jsNoMisticaIcons": "857.97 KB"
     },
     "distEs": {
-        "js": "3207.40 KB",
-        "jsNoMisticaIcons": "644.10 KB"
+        "js": "3208.12 KB",
+        "jsNoMisticaIcons": "644.83 KB"
     },
     "libOverhead": {
         "initial": "127.79 KB",

diff --git a/...ge_snapshots__/highlighted-card-screenshot-test-tsx-custom-card-size-1-snap.png b/...ge_snapshots__/highlighted-card-screenshot-test-tsx-custom-card-size-1-snap.png
diff --git a/src/__screenshot_tests__/highlighted-card-screenshot-test.tsx b/src/__screenshot_tests__/highlighted-card-screenshot-test.tsx
@@ -11,9 +11,7 @@ test.each(TESTABLE_DEVICES)('HighlightedCard in %s', async (device) => {
     });
 
     const highlightedCard = await screen.findByTestId('highlighted-card');
-
     const image = await highlightedCard.screenshot();
-
     expect(image).toMatchImageSnapshot();
 });
 
@@ -26,8 +24,17 @@ test.each(TESTABLE_DEVICES)('HighlightedCard with large fontSize in %s', async (
     await setRootFontSize(32);
 
     const highlightedCard = await screen.findByTestId('highlighted-card');
-
     const image = await highlightedCard.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
 
+test('Custom card size', async () => {
+    await openStoryPage({
+        id: 'components-cards-highlightedcard--custom-card-size',
+        device: 'DESKTOP',
+    });
+
+    const highlightedCard = await screen.findByTestId('highlighted-card');
+    const image = await highlightedCard.screenshot();
     expect(image).toMatchImageSnapshot();
 });
diff --git a/src/__stories__/highlighted-card-story.tsx b/src/__stories__/highlighted-card-story.tsx
@@ -101,3 +101,63 @@ export const Default: StoryComponent = () => {
 };
 
 Default.storyName = 'HighlightedCard';
+
+export const CustomCardSize: StoryComponent = () => {
+    return (
+        <div
+            style={{display: 'flex', background: '#eee', overflowX: 'auto', justifyContent: 'flex-start'}}
+            data-testid="highlighted-card"
+        >
+            <HighlightedCard
+                width={250}
+                title="Title 1"
+                description="Some description here"
+                imageUrl="https://i.imgur.com/jeDSXBU.jpg"
+                imageFit="fit"
+                onClose={() => {}}
+            />
+
+            <Box paddingRight={8} />
+
+            <HighlightedCard
+                width={250}
+                title="Title 2"
+                description="Some description here"
+                imageUrl="https://i.imgur.com/jeDSXBU.jpg"
+                imageFit="fit"
+                button={
+                    <ButtonPrimary small href="https://google.com">
+                        Action
+                    </ButtonPrimary>
+                }
+            />
+
+            <Box paddingRight={8} />
+
+            <HighlightedCard
+                width={250}
+                title="Title 3"
+                description="Some description here. Some description here."
+                imageUrl="https://i.imgur.com/jeDSXBU.jpg"
+                imageFit="fit"
+                button={
+                    <ButtonPrimary small href="https://google.com">
+                        Action
+                    </ButtonPrimary>
+                }
+            />
+
+            <Box paddingRight={8} />
+
+            <HighlightedCard
+                width={250}
+                onClose={() => {}}
+                onPress={() => {}}
+                title="Title 4"
+                description="Some description here. Some description here. Some description here. "
+                imageUrl="https://i.imgur.com/jeDSXBU.jpg"
+                imageFit="fit"
+            />
+        </div>
+    );
+};
diff --git a/src/highlighted-card.tsx b/src/highlighted-card.tsx
@@ -3,7 +3,7 @@ import {createUseStyles} from './jss';
 import {useIsInverseVariant} from './theme-variant-context';
 import Box from './box';
 import Touchable from './touchable';
-import IcnClose from './icons/icon-close';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import {applyAlpha} from './utils/color';
 import {useTheme} from './hooks';
 import {Text4, Text2} from './text';
@@ -19,6 +19,9 @@ const useStyles = createUseStyles((theme) => ({
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'space-between',
+        width: ({width}) => width || '100%',
+        flexShrink: 0,
+        alignSelf: 'stretch',
     },
     imageContent: {
         display: 'flex',
@@ -28,6 +31,8 @@ const useStyles = createUseStyles((theme) => ({
     },
     dismissableContainer: {
         position: 'relative',
+        display: 'flex',
+        flexShrink: 0,
     },
     dismissableButton: {
         position: 'absolute',
@@ -56,6 +61,13 @@ const useStyles = createUseStyles((theme) => ({
             padding: 24,
             paddingRight: ({hasImage}) => (hasImage ? 24 : 56),
         },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+    },
+    touchableContainer: {
+        display: 'flex',
+        flexShrink: 0,
     },
 }));
 
@@ -79,7 +91,7 @@ const Dismissable: React.FC<DismissableProps> = ({children, onClose = () => {}})
                 style={{display: 'flex', width: 48, height: 48}}
             >
                 <div className={classes.dismissableCircleContainer}>
-                    <IcnClose color={colors.neutralHigh} />
+                    <IconCloseRegular color={colors.neutralHigh} />
                 </div>
             </IconButton>
         </section>
@@ -97,6 +109,7 @@ interface CommonProps {
     isInverse?: boolean;
     children?: void;
     'aria-label'?: string;
+    width?: string | number;
 }
 interface BasicProps extends CommonProps {
     button?: undefined;
@@ -137,7 +150,7 @@ const Content: React.FC<Props> = (props) => {
     const {title, description, imageUrl, imageFit} = props;
     const isInverseOutside = useIsInverseVariant();
     const isInverse = props.isInverse ?? isInverseOutside;
-    const classes = useStyles({isInverse, hasImage: !!imageUrl});
+    const classes = useStyles({isInverse, hasImage: !!imageUrl, width: props.width});
     const theme = useTheme();
 
     const content = (
@@ -154,7 +167,12 @@ const Content: React.FC<Props> = (props) => {
                         {description}
                     </Text2>
                 </Box>
-                {props.button && <Box paddingTop={16}>{props.button}</Box>}
+                {props.button && (
+                    <>
+                        <div style={{minHeight: 16, flexGrow: 1}} />
+                        {props.button}
+                    </>
+                )}
             </div>
             {imageUrl && (
                 <div
@@ -174,7 +192,11 @@ const Content: React.FC<Props> = (props) => {
     }
     if (props.onPress) {
         return (
-            <Touchable onPress={props.onPress} trackingEvent={props.trackingEvent}>
+            <Touchable
+                onPress={props.onPress}
+                trackingEvent={props.trackingEvent}
+                className={classes.touchableContainer}
+            >
                 {content}
             </Touchable>
         );
@@ -185,14 +207,20 @@ const Content: React.FC<Props> = (props) => {
                 to={props.to}
                 trackingEvent={props.trackingEvent}
                 fullPageOnWebView={props.fullPageOnWebView}
+                className={classes.touchableContainer}
             >
                 {content}
             </Touchable>
         );
     }
     if (props.href) {
         return (
-            <Touchable trackingEvent={props.trackingEvent} href={props.href} newTab={props.newTab}>
+            <Touchable
+                trackingEvent={props.trackingEvent}
+                href={props.href}
+                newTab={props.newTab}
+                className={classes.touchableContainer}
+            >
                 {content}
             </Touchable>
         );