Feat/info card add collapse (#94)

* feat (redmine 1269198): add collapse element and edit style * feat(redmine 1269198): fix style errors * feat (redmine 1269198): change breakpoint value * feat(redmine 1269198): add responsive breakpoint props * feat(redmine 1269198): fix breakpoints methode
Smile-SA · Jan 3, 2024 · 70b674f · 70b674f
1 parent 5696400
commit 70b674f
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 123 deletions.
diff --git a/.changeset/wet-seals-rule.md b/.changeset/wet-seals-rule.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': minor
+---
+
+Add collapse function for infoCard component
diff --git a/packages/react-front-kit/src/Components/InfoCard/InfoCard.stories.tsx b/packages/react-front-kit/src/Components/InfoCard/InfoCard.stories.tsx
@@ -17,6 +17,7 @@ type IStory = StoryObj<typeof meta>;
 export const InfoCard: IStory = {
   args: {
     children: <p>Customizable content</p>,
+    collapse: true,
     content: (
       <p
         style={{
@@ -44,6 +45,6 @@ export const InfoCard: IStory = {
       },
     ],
     motif: undefined,
-    title: <h1>Jean-Michel DUPONT</h1>,
+    title: <h1 style={{ marginTop: 0 }}>Jean-Michel DUPONT</h1>,
   },
 };
diff --git a/packages/react-front-kit/src/Components/InfoCard/InfoCard.style.tsx b/packages/react-front-kit/src/Components/InfoCard/InfoCard.style.tsx
@@ -0,0 +1,105 @@
+import type { IMantineBreakpoint } from './InfoCard';
+
+import { createStyles } from '@mantine/core';
+
+export const useStyles = createStyles(
+  (theme, responsiveBreakpoint: IMantineBreakpoint) => ({
+    collapseButton: {
+      [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]:
+        {
+          margin: 'auto',
+        },
+      margin: '12px',
+    },
+    collapseButtonCenter: {
+      marginBottom: 'auto',
+      marginTop: 'auto',
+    },
+    collapseRight: {
+      height: '100%',
+      width: '100%',
+    },
+    container: {
+      [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]:
+        {
+          flexDirection: 'column',
+          margin: 'auto',
+          width: 'fit-content',
+        },
+      display: 'flex',
+      flexWarp: 'wrap',
+      gap: 10,
+      justifyContent: 'space-between',
+      position: 'relative',
+      zIndex: 1,
+    },
+    contentItem: {
+      alignItems: 'center',
+      cursor: 'pointer',
+      display: 'flex',
+      fontSize: '20px',
+      justifyContent: 'center',
+    },
+    contentItemGroup: {
+      alignItems: 'center',
+      display: 'flex',
+      gap: 16,
+      justifyContent: 'left',
+      maxWidth: 175,
+    },
+    contentItems: {
+      [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]:
+        {
+          minWidth: '0px',
+        },
+      columnGap: 40,
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'left',
+      marginBottom: '28px',
+      rowGap: 10,
+    },
+    leftContainer: {
+      [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]:
+        {
+          minWidth: '0px !important',
+        },
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      minWidth: '390px',
+    },
+    motif: {
+      left: -40,
+      position: 'absolute',
+      top: -60,
+      zIndex: 0,
+    },
+    rightContainer: {
+      [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]:
+        {
+          maxWidth: 440,
+        },
+      display: 'flex',
+      height: '100%',
+      width: '100%',
+    },
+    root: {
+      overflow: 'hidden',
+      padding: '24px 48px',
+      position: 'relative',
+      width: '100%',
+    },
+    title: {
+      'h1, h2, h3, h4 h5, p': {
+        fontSize: '26px',
+        fontWeight: 700,
+      },
+    },
+    topContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      rowGap: 24,
+    },
+  }),
+);
diff --git a/packages/react-front-kit/src/Components/InfoCard/InfoCard.tsx b/packages/react-front-kit/src/Components/InfoCard/InfoCard.tsx
@@ -3,88 +3,14 @@
 import type { ActionIconProps, PaperProps } from '@mantine/core';
 import type { CSSProperties, ReactElement } from 'react';
 
-import { ActionIcon, Paper, useMantineTheme } from '@mantine/core';
-import { createStyles } from '@mantine/styles';
+import { ActionIcon, Collapse, Paper, useMantineTheme } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { CaretDown, CaretUp } from '@phosphor-icons/react';
 
+import { useStyles } from './InfoCard.style';
 import { Motif } from './Motif';
 
-const useStyles = createStyles(() => ({
-  container: {
-    '@media (max-width: 834px)': {
-      flexDirection: 'column',
-      margin: 'auto',
-      width: 'fit-content',
-    },
-    display: 'flex',
-    flexWarp: 'wrap',
-    gap: 10,
-    justifyContent: 'space-between',
-    position: 'relative',
-    zIndex: 1,
-  },
-  content: {
-    // marginTop: 10,
-  },
-  contentItem: {
-    alignItems: 'center',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: '20px',
-    justifyContent: 'center',
-  },
-  contentItemGroup: {
-    alignItems: 'center',
-    display: 'flex',
-    gap: 16,
-    justifyContent: 'left',
-    maxWidth: 175,
-  },
-  contentItems: {
-    '@media (max-width: 834px)': {
-      minWidth: '0px',
-    },
-    columnGap: 40,
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'left',
-    rowGap: 10,
-  },
-  leftContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 28,
-    justifyContent: 'space-between',
-  },
-  motif: {
-    left: -40,
-    position: 'absolute',
-    top: -60,
-    zIndex: 0,
-  },
-  rightContainer: {
-    '@media (min-width: 834px)': {
-      maxWidth: 440,
-    },
-    display: 'flex',
-    width: '100%',
-  },
-  root: {
-    overflow: 'hidden',
-    position: 'relative',
-    width: '100%',
-  },
-  title: {
-    'h1, h2, h3, h4 h5, p': {
-      fontSize: '26px',
-      fontWeight: 700,
-    },
-  },
-  topContent: {
-    display: 'flex',
-    flexDirection: 'column',
-    rowGap: 24,
-  },
-}));
+export type IMantineBreakpoint = 'lg' | 'md' | 'sm' | 'xs';
 
 export interface IContentItem {
   icon?: ReactElement;
@@ -95,10 +21,12 @@ export interface IContentItem {
 
 export interface IInfoCardProps extends PaperProps {
   children?: ReactElement;
+  collapse?: boolean;
   content?: ReactElement;
   contentItems?: IContentItem[];
   leftContainerStyle?: CSSProperties;
   motif?: ReactElement;
+  responsiveBreakpoint?: IMantineBreakpoint;
   rightContainerStyle?: CSSProperties;
   title?: ReactElement;
 }
@@ -108,60 +36,76 @@ export function InfoCard(props: IInfoCardProps): ReactElement {
   const theme = useMantineTheme();
   const {
     children,
+    collapse = true,
     content,
     contentItems = [],
     leftContainerStyle,
     motif = <Motif />,
     rightContainerStyle,
+    responsiveBreakpoint = 'sm',
     title,
     ...PaperProps
   } = props;
-  const { classes } = useStyles();
+
+  const { classes } = useStyles(responsiveBreakpoint);
+  const [opened, { toggle }] = useDisclosure(true);
 
   return (
-    <Paper
-      className={classes.root}
-      mih={219}
-      p={20}
-      radius={16}
-      {...PaperProps}
-    >
+    <Paper className={classes.root} radius={16} {...PaperProps}>
       <div className={classes.motif}>{motif}</div>
       <div className={classes.container}>
         <div className={classes.leftContainer} style={leftContainerStyle}>
           <div className={classes.topContent}>
             {Boolean(title) && <div className={classes.title}>{title}</div>}
-            {Boolean(contentItems.length > 0) && (
-              <div className={classes.contentItems}>
-                {contentItems.map((item, key) => (
-                  <div
-                    key={`ContentItem-${key + key}`}
-                    className={classes.contentItemGroup}
-                  >
-                    {Boolean(item.icon) && (
-                      <ActionIcon
-                        className={classes.contentItem}
-                        color={theme.primaryColor}
-                        onClick={() => item.onAction?.(item)}
-                        radius="sm"
-                        size={40}
-                        variant="filled"
-                        {...item.iconProps}
-                      >
-                        {item.icon}
-                      </ActionIcon>
-                    )}
-                    {Boolean(item.label) && <span>{item.label}</span>}
-                  </div>
-                ))}
-              </div>
-            )}
+            <Collapse in={opened}>
+              {Boolean(contentItems.length > 0) && (
+                <div className={classes.contentItems}>
+                  {contentItems.map((item, key) => (
+                    <div
+                      key={`ContentItem-${key + key}`}
+                      className={classes.contentItemGroup}
+                    >
+                      {Boolean(item.icon) && (
+                        <ActionIcon
+                          className={classes.contentItem}
+                          color={theme.primaryColor}
+                          onClick={() => item.onAction?.(item)}
+                          radius="sm"
+                          size={40}
+                          variant="filled"
+                          {...item.iconProps}
+                        >
+                          {item.icon}
+                        </ActionIcon>
+                      )}
+                      {Boolean(item.label) && <span>{item.label}</span>}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Collapse>
           </div>
-          {Boolean(content) && <div className={classes.content}>{content}</div>}
-        </div>
-        <div className={classes.rightContainer} style={rightContainerStyle}>
-          {children}
+          {Boolean(content) && <div>{content}</div>}
         </div>
+        <Collapse className={classes.collapseRight} in={opened}>
+          <div className={classes.rightContainer} style={rightContainerStyle}>
+            {children}
+          </div>
+        </Collapse>
+        {Boolean(collapse) && (
+          <ActionIcon
+            className={`${classes.collapseButton} ${
+              !opened && classes.collapseButtonCenter
+            }`}
+            onClick={toggle}
+          >
+            {opened ? (
+              <CaretUp size={28} weight="bold" />
+            ) : (
+              <CaretDown size={28} weight="bold" />
+            )}
+          </ActionIcon>
+        )}
       </div>
     </Paper>
   );