Fix: DocumentCard mobile, various fixes (#109)

* fix(redmine 1273834): mobile fix for DocumentCard, various fixes * fix: fixed DocumentList style
Smile-SA · Jan 18, 2024 · d83a887 · d83a887
1 parent 96b5137
commit d83a887
Show file tree

Hide file tree

Showing 22 changed files with 584 additions and 174 deletions.
diff --git a/.changeset/silent-dragons-design.md b/.changeset/silent-dragons-design.md
@@ -0,0 +1,6 @@
+---
+'@smile/react-front-kit': minor
+'storybook-pages': minor
+---
+
+Added mobile style for DocumentCard and DocumentList, various fixes on DocumentCard, SelectableList and DocumentList, updated example of DocumentList in SearchResults page, added '\*.png' module to global.d.ts
diff --git a/global.d.ts b/global.d.ts
@@ -2,3 +2,8 @@ declare module '*.jpg' {
   const value: string;
   export default value;
 }
+
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
diff --git a/packages/react-front-kit/src/Components/ActionBar/ActionBar.tsx b/packages/react-front-kit/src/Components/ActionBar/ActionBar.tsx
@@ -9,7 +9,7 @@ import type {
 import type { ReactElement } from 'react';
 
 import { ActionIcon, Button, Group, Menu } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
+import { createStyles, getStylesRef } from '@mantine/styles';
 import { DotsThreeVertical } from '@phosphor-icons/react';
 import { useState } from 'react';
 
@@ -24,6 +24,7 @@ const useStyles = createStyles((theme) => ({
     display: 'inline-flex',
     justifyContent: 'space-between',
     padding: '16px 24px',
+    ref: getStylesRef('actionBar'),
     width: '100%',
   },
   actionIconRoot: {

diff --git a/packages/react-front-kit/src/Components/ActionBar/__snapshots__/ActionBar.test.tsx.snap b/packages/react-front-kit/src/Components/ActionBar/__snapshots__/ActionBar.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ActionBar matches snapshot 1`] = `
 <div>
   <div
-    class="mantine-15edn1r"
+    class="___ref-actionBar mantine-15edn1r"
   >
     <span>
       3 selected

diff --git a/packages/react-front-kit/src/Components/DocumentCard/DocumentCard.style.tsx b/packages/react-front-kit/src/Components/DocumentCard/DocumentCard.style.tsx
@@ -1,76 +1,138 @@
-import { createStyles } from '@mantine/styles';
+import { createStyles, getStylesRef } from '@mantine/styles';
 
 export const useStyles = createStyles((theme) => ({
   author: {
     fontWeight: 600,
   },
   children: {
+    [theme.fn.smallerThan('sm')]: {
+      marginTop: '10px',
+    },
     marginTop: '16px',
   },
+  clickable: {
+    cursor: 'pointer',
+  },
   header: {
     display: 'flex',
-    flexWrap: 'wrap',
   },
   headerBottom: {
-    '@media (max-width: 833px)': {
-      flexDirection: 'column',
+    [theme.fn.smallerThan('sm')]: {
+      fontSize: '12px',
+      margin: 0,
+    },
+    [theme.fn.largerThan('sm')]: {
+      alignItems: 'center',
     },
     color: theme.colors.dark[3],
     display: 'flex',
+    flexWrap: 'wrap',
     fontSize: '14px',
+    fontWeight: 400,
     marginRight: '12px',
   },
+  headerContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    [theme.fn.smallerThan('sm')]: {
+      gap: '16px',
+    },
+    [theme.fn.largerThan('sm')]: {
+      gap: '4px',
+    },
+  },
   headerTop: {
-    '@media (max-width: 833px)': {
+    [theme.fn.smallerThan('sm')]: {
       flexDirection: 'column',
+      marginLeft: '40px',
+    },
+    [theme.fn.largerThan('sm')]: {
+      alignItems: 'center',
     },
     display: 'flex',
     flexWrap: 'wrap',
+    ref: getStylesRef('documentCardHeaderTop'),
   },
   icon: {
-    color: theme.fn.primaryColor(),
+    [theme.fn.smallerThan('sm')]: {
+      height: '24px',
+      width: '24px',
+    },
+    [theme.fn.largerThan('sm')]: {
+      height: '38px',
+      width: '38px',
+    },
   },
   iconContainer: {
+    [theme.fn.smallerThan('sm')]: {
+      height: '24px',
+      margin: '8.5px 16px 8.5px 0',
+      position: 'absolute',
+    },
     marginRight: '16px',
+    ref: getStylesRef('documentCardIcon'),
   },
   image: {
     border: `1px solid ${theme.colors.gray[2]}`,
     borderRadius: '16px',
-    marginRight: '32px',
-    minHeight: '164px',
+    [theme.fn.largerThan('sm')]: {
+      marginRight: '32px',
+      minHeight: '164px',
+    },
   },
   imageRoot: {
-    '@media (max-width: 414px)': {
-      maxWidth: '100%',
+    [theme.fn.smallerThan('sm')]: {
+      display: 'none',
+      marginTop: '16px',
+      order: 2,
     },
-    '@media (max-width: 833px)': {
-      flexDirection: 'column',
-      marginBottom: '20px',
+    [theme.fn.largerThan('sm')]: {
+      marginRight: '32px',
+      maxWidth: '165px',
+    },
+  },
+  imageRootMobileDisplayed: {
+    [theme.fn.smallerThan('sm')]: {
+      display: 'initial',
+    },
+  },
+  mobileImageButton: {
+    background: 'transparent',
+    border: 0,
+    marginTop: '10px',
+    [theme.fn.largerThan('sm')]: {
+      display: 'none',
     },
-    marginRight: '32px',
-    maxWidth: '165px',
   },
   path: {
+    [theme.fn.smallerThan('sm')]: {
+      fontSize: '12px',
+    },
     color: theme.colors.dark[6],
+    fontWeight: 400,
   },
   root: {
-    cursor: 'pointer',
     display: 'flex',
-    // eslint-disable-next-line sort-keys
-    '@media (max-width: 833px)': {
+    ref: getStylesRef('documentCard'),
+    [theme.fn.smallerThan('sm')]: {
       flexDirection: 'column',
     },
   },
   separator: {
-    '@media (max-width: 833px)': {
-      display: 'none',
+    [theme.fn.smallerThan('sm')]: {
+      // display: 'none',
+      margin: '0 7px',
     },
     margin: '0 12px',
   },
   title: {
+    [theme.fn.smallerThan('sm')]: {
+      fontSize: '14px',
+      margin: 0,
+    },
     display: 'flex',
     fontSize: '18px',
-    fontWeight: 'bold',
+    fontWeight: 700,
     margin: '0 16px 0 0',
   },
 }));
diff --git a/packages/react-front-kit/src/Components/DocumentCard/DocumentCard.tsx b/packages/react-front-kit/src/Components/DocumentCard/DocumentCard.tsx
@@ -2,8 +2,10 @@
 
 import type { ReactNode } from 'react';
 
-import { Box, Image, useMantineTheme } from '@mantine/core';
+import { Box, Button, Image, useMantineTheme } from '@mantine/core';
+import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import { FileIcon } from '@smile/react-front-kit-shared';
+import { useState } from 'react';
 
 import defaultImage from '../../../assets/defaultImage.jpg';
 
@@ -15,6 +17,8 @@ export interface IDocumentCardProps {
   date?: ReactNode;
   iconType?: string;
   image?: string;
+  mobileImageButtonLabel?: string;
+  onCardClick?: () => void;
   path?: ReactNode;
   title?: ReactNode;
 }
@@ -26,17 +30,28 @@ export function DocumentCard(props: IDocumentCardProps): ReactNode {
     date,
     iconType,
     image = defaultImage,
+    mobileImageButtonLabel = 'Display preview',
+    onCardClick,
     path,
     title,
   } = props;
-  const { classes } = useStyles();
+  const [mobileImageDisplayed, setMobileImageDisplayed] = useState(false);
 
+  const { classes } = useStyles();
   const theme = useMantineTheme();
 
   return (
-    <Box className={classes.root}>
+    <Box
+      className={`${classes.root} ${onCardClick ? classes.clickable : ''}`}
+      onClick={onCardClick}
+    >
       <Image
-        classNames={{ image: classes.image, root: classes.imageRoot }}
+        classNames={{
+          image: classes.image,
+          root: `${classes.imageRoot} ${
+            mobileImageDisplayed ? classes.imageRootMobileDisplayed : ''
+          }`,
+        }}
         radius={16}
         src={image}
       />
@@ -45,13 +60,13 @@ export function DocumentCard(props: IDocumentCardProps): ReactNode {
           <div className={classes.header}>
             <div className={classes.iconContainer}>
               <FileIcon
+                className={classes.icon}
                 color={theme.fn.primaryColor()}
-                size={38}
                 type={iconType}
                 weight="light"
               />
             </div>
-            <div>
+            <div className={classes.headerContent}>
               <div className={classes.headerTop}>
                 {Boolean(title) && (
                   <span className={classes.title}>{title}</span>
@@ -75,6 +90,14 @@ export function DocumentCard(props: IDocumentCardProps): ReactNode {
           </div>
         </div>
         <div className={classes.children}>{children}</div>
+        <Button
+          className={classes.mobileImageButton}
+          onClick={() => setMobileImageDisplayed(!mobileImageDisplayed)}
+          rightIcon={mobileImageDisplayed ? <CaretUp /> : <CaretDown />}
+          variant="default"
+        >
+          {mobileImageButtonLabel}
+        </Button>
       </div>
     </Box>
   );