Feat/browsing add modal see more (#84)

* Fix/table grid view actions (#74) * refactor(redmine 1246968): simplify `ThumbnailGrid` actions and `TableGridView` actions refactor: moved typeGuard helper, added typeGuard for interface, added tests * chore: update changeset configuration and ci config (#75) * feat: added `defaultOpened` props to `CollapseButton` (#79) * feat: added `defaultOpened` props to `CollapseButton` * Feat/document list (#80) * feat: added `ActionBar`, `SelectableList` and `DocumentList` refactor: moved action bar from `ThumbnailGrid` into `ActionBar` refactor: updated `SearchPage` * Feat/filters (#81) * feat(redmine 1245005): add filters component in searchResultPage * feat(redmine 1245005): add number counter fo actif filters * feat(redmine 1245005): add indentation without line style for collapseButton * feat(redmine 1245005): add new fonctionality Button remove location and active filters collapse * feat(redmine 1245005): add button close all + open all + add function getFiltersMenuId * feat(redmine 1245005): add line for between button open and close * feat(redmine 1245005): use flat() for collapse menu active * feat(redmine 1245005): modify story and rename Fiters to filtersBar component * feat(redmine 1245005): modify story and rename Fiters to filtersBar component * feat(redmine 1245005): add dynamique data for search results * feat(redmine 1245005): fix no-wrap error for badge in filters active section * feat(redmine 1245005): add filters numbers active value on searchbar * feat(redmine 1245005): fixe test mantine ids test error * feat(redmine 1245005): fixe intégration error * feat(redmine 1245005): fixe pr review by Quentin * feat(redmine 1245005): fixe pr review by Quentin * feat(redmine 1245005): fix pr conflicts * feat(redmine 1245003): add modal for label see properties * feat(redmine 1245003): add modal for label see properties * feat(redmine 1245003): add changeset * feat(redmine 1245003): add modal for label see properties Fix/table grid view actions (#74) * refactor(redmine 1246968): simplify `ThumbnailGrid` actions and `TableGridView` actions refactor: moved typeGuard helper, added typeGuard for interface, added tests feat: added `defaultOpened` props to `CollapseButton` (#79) * feat: added `defaultOpened` props to `CollapseButton` Feat/document list (#80) * feat: added `ActionBar`, `SelectableList` and `DocumentList` refactor: moved action bar from `ThumbnailGrid` into `ActionBar` refactor: updated `SearchPage` feat(redmine 1245003): add modal for label see properties feat(redmine 1245003): add changeset * feat: fix squash errors * feat(1245003): optimisation --------- Co-authored-by: Quentin Le Caignec <[email protected]> Co-authored-by: Tony Cabaye <[email protected]>
Smile-SA · Dec 12, 2023 · 25be4ad · 25be4ad
1 parent c458efd
commit 25be4ad
Show file tree

Hide file tree

Showing 7 changed files with 376 additions and 252 deletions.
diff --git a/.changeset/spicy-roses-sparkle.md b/.changeset/spicy-roses-sparkle.md
@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+add modal for label see details in browsingPage
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.style.tsx b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.style.tsx
@@ -0,0 +1,49 @@
+import { createStyles } from '@mantine/styles';
+
+export const useStyles = createStyles((theme) => ({
+  accordionChevron: {
+    '&[data-rotate=true]': {
+      color: theme.colors.gray[0],
+    },
+    color: theme.colors.cyan[9],
+  },
+  accordionContent: {
+    background: theme.colors.cyan[9],
+    borderRadius: '0px 0px 8px 8px',
+    marginBottom: '8px',
+    padding: '24px',
+  },
+  accordionControl: {
+    '&:hover': {
+      background: theme.colors.gray[2],
+    },
+    '&[aria-expanded=true]': {
+      background: theme.colors.cyan[9],
+      borderRadius: '8px 8px 0px 0px',
+      color: theme.colors.gray[0],
+      fontWeight: 700,
+      marginBottom: 0,
+    },
+    background: theme.colors.gray[1],
+    borderBottom: 0,
+    borderRadius: '8px',
+    color: theme.colors.dark[6],
+    marginBottom: '8px',
+  },
+  accordionItem: {
+    borderBottom: 'none',
+  },
+  modalBody: {
+    padding: '0px 48px 50px 48px',
+  },
+  modalClose: {
+    position: 'relative',
+    right: 0,
+    top: 0,
+  },
+  modalTitle: {
+    fontSize: '26px',
+    fontWeight: 700,
+    marginTop: 0,
+  },
+}));
diff --git a/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx b/packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx
@@ -4,12 +4,15 @@ import type { IFile } from '@smile/react-front-kit-dropzone';
 import type { FormEvent, ReactElement } from 'react';
 
 import {
+  Accordion,
   AppShell,
   Button,
   Flex,
   MantineProvider,
+  Modal,
   useMantineTheme,
 } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { Eye, FolderPlus, Suitcase, User } from '@phosphor-icons/react';
 import {
   Breadcrumbs,
@@ -25,9 +28,19 @@ import { primaryTheme, secondaryTheme } from '@smile/react-front-kit-shared';
 import { TableGridView } from '@smile/react-front-kit-table';
 import { useState } from 'react';
 
-import { headerContent, headerLeft, headerRight } from '../pages.mock';
+import {
+  CardAction,
+  CardIdentity,
+  CardNative,
+  CardPermissions,
+  CardsMetadata,
+  headerContent,
+  headerLeft,
+  headerRight,
+} from '../pages.mock';
 
 import { actions, data, gridProps, tableProps } from './BrowsingPage.mock';
+import { useStyles } from './BrowsingPage.style';
 
 /**
  * Primary UI component for user interaction
@@ -37,9 +50,19 @@ export function BrowsingPage(): ReactElement {
   const [sidebarMenu, setSidebarMenu] = useState(menuMock);
   const [files, setFiles] = useState<IFile[]>([]);
   const [gridCols, setGridCols] = useState(4);
+  const [seeMoreModal, { open, close }] = useDisclosure(false);
 
+  const { classes } = useStyles();
   const theme = useMantineTheme();
 
+  const accordionItems = [
+    { content: CardAction, key: 1, title: 'Action' },
+    { content: CardsMetadata, key: 2, title: 'Métadonnées' },
+    { content: CardNative, key: 3, title: 'Historique' },
+    { content: CardPermissions, key: 4, title: 'Droits' },
+    { content: CardIdentity, key: 5, title: 'Cycle de vie' },
+  ];
+
   function handleSearchSubmit(event: FormEvent): void {
     event.preventDefault();
   }
@@ -56,6 +79,32 @@ export function BrowsingPage(): ReactElement {
     );
   }
 
+  function getAccordionItems(): ReactElement {
+    const items = accordionItems.map((item) => (
+      <Accordion.Item key={item.title} value={item.title}>
+        <Accordion.Control>{item.title}</Accordion.Control>
+        <Accordion.Panel>{item.content}</Accordion.Panel>
+      </Accordion.Item>
+    ));
+
+    return (
+      <MantineProvider theme={primaryTheme}>
+        <Accordion
+          classNames={{
+            chevron: classes.accordionChevron,
+            content: classes.accordionContent,
+            control: classes.accordionControl,
+            item: classes.accordionItem,
+          }}
+          defaultValue="Métadonnées"
+          variant="filled"
+        >
+          {items}
+        </Accordion>
+      </MantineProvider>
+    );
+  }
+
   return (
     <AppShell
       header={
@@ -96,6 +145,8 @@ export function BrowsingPage(): ReactElement {
           <InfoCard
             content={
               <p
+                aria-hidden="true"
+                onClick={open}
                 style={{
                   cursor: 'pointer',
                   display: 'flex',
@@ -143,6 +194,18 @@ export function BrowsingPage(): ReactElement {
           tableProps={tableProps}
         />
       </FoldableColumnLayout>
+      <Modal
+        classNames={{
+          body: classes.modalBody,
+          close: classes.modalClose,
+        }}
+        onClose={close}
+        opened={seeMoreModal}
+        size="xl"
+      >
+        <h3 className={classes.modalTitle}>Propriétés du dossier</h3>
+        {getAccordionItems()}
+      </Modal>
     </AppShell>
   );
 }