Merge pull request #29431 from Expensify/georgia-cardTransactions-Rep…

…ortPreviewEReceipt [Wave 8- ECard Transactions] Update `ReportPreview` styling (`ReportActionItemImages`)
Expensify · Oct 13, 2023 · 9ee6be9 · 9ee6be9
2 parents 6af0d66 + 8147255
commit 9ee6be9
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 17 deletions.
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -252,7 +252,8 @@ function MoneyRequestPreview(props) {
                     {hasReceipt && (
                         <ReportActionItemImages
                             images={receiptImages}
-                            isHovered={isScanning}
+                            isHovered={props.isHovered || isScanning}
+                            size={1}
                         />
                     )}
                     {_.isEmpty(props.transaction) &&

diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -5,6 +5,8 @@ import _ from 'underscore';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import ReportActionItemImage from './ReportActionItemImage';
+import * as StyleUtils from '../../styles/StyleUtils';
+import variables from '../../styles/variables';
 
 const propTypes = {
     /** array of image and thumbnail URIs */
@@ -48,10 +50,22 @@ function ReportActionItemImages({images, size, total, isHovered}) {
     const numberOfShownImages = size || images.length;
     const shownImages = images.slice(0, size);
     const remaining = (total || images.length) - size;
+    const MAX_REMAINING = 9;
+
+    // The height varies depending on the number of images we are displaying.
+    let heightStyle = {};
+    if (numberOfShownImages === 1) {
+        heightStyle = StyleUtils.getHeight(variables.reportActionImagesSingleImageHeight);
+    } else if (numberOfShownImages === 2) {
+        heightStyle = StyleUtils.getHeight(variables.reportActionImagesDoubleImageHeight);
+    } else if (numberOfShownImages > 2) {
+        heightStyle = StyleUtils.getHeight(variables.reportActionImagesMultipleImageHeight);
+    }
 
     const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined;
+
     return (
-        <View style={[styles.reportActionItemImages, hoverStyle]}>
+        <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
             {_.map(shownImages, ({thumbnail, image}, index) => {
                 const isLastImage = index === numberOfShownImages - 1;
 
@@ -68,8 +82,10 @@ function ReportActionItemImages({images, size, total, isHovered}) {
                             image={image}
                         />
                         {isLastImage && remaining > 0 && (
-                            <View style={[styles.reportActionItemImagesMore, hoverStyle]}>
-                                <Text>+{remaining}</Text>
+                            <View style={[styles.reportActionItemImagesMoreContainer]}>
+                                <View style={[styles.reportActionItemImagesMore, isHovered ? styles.reportActionItemImagesMoreHovered : {}]} />
+                                <View style={[styles.reportActionItemImagesMoreCornerTriangle, isHovered ? styles.reportActionItemImagesMoreCornerTriangleHighlighted : {}]} />
+                                <Text style={[styles.reportActionItemImagesMoreText, styles.textStrong]}>{remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`}</Text>
                             </View>
                         )}
                     </View>

diff --git a/src/stories/ReportActionItemImages.stories.js b/src/stories/ReportActionItemImages.stories.js
@@ -0,0 +1,142 @@
+import React from 'react';
+import ReportActionItemImages from '../components/ReportActionItem/ReportActionItemImages';
+import PressableWithoutFeedback from '../components/Pressable/PressableWithoutFeedback';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/ReportActionItemImages',
+    component: ReportActionItemImages,
+};
+
+function Template(args) {
+    return (
+        <PressableWithoutFeedback
+            accessibilityLabel="ReportActionItemImages Story"
+            style={{flex: 1}}
+        >
+            {({hovered}) => (
+                <ReportActionItemImages
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...args}
+                    isHovered={hovered}
+                />
+            )}
+        </PressableWithoutFeedback>
+    );
+}
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    images: [{image: 'https://c02.purpledshub.com/uploads/sites/41/2021/05/sleeping-cat-27126ee.jpg', thumbnail: ''}],
+    size: 1,
+    total: 1,
+};
+
+const TwoImages = Template.bind({});
+TwoImages.args = {
+    images: [
+        {
+            image: 'https://c02.purpledshub.com/uploads/sites/41/2021/05/sleeping-cat-27126ee.jpg',
+            thumbnail: '',
+        },
+        {
+            image: 'https://i.guim.co.uk/img/media/7d04c4cb7510a4bd9a8bec449f53425aeccee895/298_266_1150_690/master/1150.jpg?width=1200&quality=85&auto=format&fit=max&s=4ae508ecb99c15ec04610b617efb3fa7',
+            thumbnail: '',
+        },
+    ],
+    size: 2,
+    total: 2,
+};
+
+const ThreeImages = Template.bind({});
+ThreeImages.args = {
+    images: [
+        {
+            image: 'https://c02.purpledshub.com/uploads/sites/41/2021/05/sleeping-cat-27126ee.jpg',
+            thumbnail: '',
+        },
+        {
+            image: 'https://i.guim.co.uk/img/media/7d04c4cb7510a4bd9a8bec449f53425aeccee895/298_266_1150_690/master/1150.jpg?width=1200&quality=85&auto=format&fit=max&s=4ae508ecb99c15ec04610b617efb3fa7',
+            thumbnail: '',
+        },
+        {
+            image: 'https://cdn.theatlantic.com/thumbor/d8lh_KAZuOgBYslMOP4T0iu9Fks=/0x62:2000x1187/1600x900/media/img/mt/2018/03/AP_325360162607/original.jpg',
+            thumbnail: '',
+        },
+    ],
+    size: 3,
+    total: 3,
+};
+
+const FourImages = Template.bind({});
+FourImages.args = {
+    images: [
+        {
+            image: 'https://c02.purpledshub.com/uploads/sites/41/2021/05/sleeping-cat-27126ee.jpg',
+            thumbnail: '',
+        },
+        {
+            image: 'https://i.guim.co.uk/img/media/7d04c4cb7510a4bd9a8bec449f53425aeccee895/298_266_1150_690/master/1150.jpg?width=1200&quality=85&auto=format&fit=max&s=4ae508ecb99c15ec04610b617efb3fa7',
+            thumbnail: '',
+        },
+        {
+            image: 'https://cdn.theatlantic.com/thumbor/d8lh_KAZuOgBYslMOP4T0iu9Fks=/0x62:2000x1187/1600x900/media/img/mt/2018/03/AP_325360162607/original.jpg',
+            thumbnail: '',
+        },
+        {
+            image: 'https://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg',
+            thumbnail: '',
+        },
+    ],
+    size: 4,
+    total: 4,
+};
+
+const ThreePlusTwoImages = Template.bind({});
+ThreePlusTwoImages.args = {
+    images: [
+        {
+            image: 'https://c02.purpledshub.com/uploads/sites/41/2021/05/sleeping-cat-27126ee.jpg',
+            thumbnail: '',
+        },
+        {
+            image: 'https://i.guim.co.uk/img/media/7d04c4cb7510a4bd9a8bec449f53425aeccee895/298_266_1150_690/master/1150.jpg?width=1200&quality=85&auto=format&fit=max&s=4ae508ecb99c15ec04610b617efb3fa7',
+            thumbnail: '',
+        },
+        {
+            image: 'https://cdn.theatlantic.com/thumbor/d8lh_KAZuOgBYslMOP4T0iu9Fks=/0x62:2000x1187/1600x900/media/img/mt/2018/03/AP_325360162607/original.jpg',
+            thumbnail: '',
+        },
+    ],
+    size: 3,
+    total: 5,
+};
+
+const ThreePlusTenImages = Template.bind({});
+ThreePlusTenImages.args = {
+    images: [
+        {
+            image: 'https://c02.purpledshub.com/uploads/sites/41/2021/05/sleeping-cat-27126ee.jpg',
+            thumbnail: '',
+        },
+        {
+            image: 'https://i.guim.co.uk/img/media/7d04c4cb7510a4bd9a8bec449f53425aeccee895/298_266_1150_690/master/1150.jpg?width=1200&quality=85&auto=format&fit=max&s=4ae508ecb99c15ec04610b617efb3fa7',
+            thumbnail: '',
+        },
+        {
+            image: 'https://cdn.theatlantic.com/thumbor/d8lh_KAZuOgBYslMOP4T0iu9Fks=/0x62:2000x1187/1600x900/media/img/mt/2018/03/AP_325360162607/original.jpg',
+            thumbnail: '',
+        },
+    ],
+    size: 3,
+    total: 13,
+};
+
+export default story;
+export {Default, TwoImages, ThreeImages, FourImages, ThreePlusTwoImages, ThreePlusTenImages};
diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -2572,13 +2572,13 @@ const styles = (theme) => ({
 
     requestPreviewBox: {
         marginTop: 12,
-        maxWidth: variables.sideBarWidth,
+        maxWidth: variables.reportPreviewMaxWidth,
     },
 
     moneyRequestPreviewBox: {
         backgroundColor: theme.cardBG,
         borderRadius: variables.componentBorderRadiusLarge,
-        maxWidth: variables.sideBarWidth,
+        maxWidth: variables.reportPreviewMaxWidth,
         width: '100%',
     },
 
@@ -3620,10 +3620,8 @@ const styles = (theme) => ({
         borderColor: theme.transparent,
         borderTopLeftRadius: variables.componentBorderRadiusLarge,
         borderTopRightRadius: variables.componentBorderRadiusLarge,
-        borderBottomLeftRadius: variables.componentBorderRadiusLarge,
-        borderBottomRightRadius: variables.componentBorderRadiusLarge,
         overflow: 'hidden',
-        height: 200,
+        height: variables.reportActionImagesSingleImageHeight,
     },
 
     reportActionItemImage: {
@@ -3636,19 +3634,52 @@ const styles = (theme) => ({
     },
 
     reportActionItemImageBorder: {
-        borderRightWidth: 2,
+        borderRightWidth: 4,
         borderColor: theme.cardBG,
     },
 
-    reportActionItemImagesMore: {
+    reportActionItemImagesMoreContainer: {
         position: 'absolute',
-        borderRadius: 18,
-        backgroundColor: theme.cardBG,
-        width: 36,
-        height: 36,
+        bottom: 0,
+        right: 0,
         display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+    },
+
+    reportActionItemImagesMore: {
+        borderTopLeftRadius: 12,
+        backgroundColor: theme.border,
+        width: 40,
+        height: 40,
+    },
+
+    reportActionItemImagesMoreHovered: {
+        backgroundColor: theme.cardBG,
+    },
+
+    reportActionItemImagesMoreText: {
+        position: 'absolute',
+        marginLeft: 20,
+        marginTop: 16,
+        color: theme.textSupporting,
+    },
+
+    reportActionItemImagesMoreCornerTriangle: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+        borderStyle: 'solid',
+        borderWidth: 0,
+        borderBottomWidth: 40,
+        borderLeftWidth: 40,
+        borderColor: 'transparent',
+        borderBottomColor: theme.cardBG,
+    },
+
+    reportActionItemImagesMoreCornerTriangleHighlighted: {
+        borderColor: 'transparent',
+        borderBottomColor: theme.border,
     },
 
     moneyRequestHeaderStatusBarBadge: {

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -167,6 +167,10 @@ export default {
     eReceiptWordmarkWidth: 86,
     eReceiptBGHeight: 540,
     eReceiptBGHWidth: 335,
+    reportPreviewMaxWidth: 302,
+    reportActionImagesSingleImageHeight: 147,
+    reportActionImagesDoubleImageHeight: 138,
+    reportActionImagesMultipleImageHeight: 110,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility