feat: Add Viewer bottomSheet for mobile

src/drive/web/modules/viewer/Footer/BottomSheet.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import { BottomSheet } from 'mui-bottom-sheet'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = ({ isTopPosition }) => ({
+  root: {
+    borderTopLeftRadius: '1rem',
+    borderTopRightRadius: '1rem',
+    transition: 'border-radius 0.5s',
+    boxShadow: '0 6px 16px 0 rgba(0, 0, 0, 0.5)',
+    ...(isTopPosition && {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    })
+  }
+})
+
+const useClasses = makeStyles({
+  header: {
+    height: '2.5rem',
+    width: '100%',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  indicator: {
+    width: '4rem',
+    height: '0.25rem',
+    borderRadius: '99px',
+    backgroundColor: 'var(--dividerColor)'
+  }
+})
+
+const BottomSheetWrapper = ({ children }) => {
+  const [isTopPosition, setIsTopPosition] = useState(false)
+  const classes = useClasses()
+  const styles = useStyles({ isTopPosition })
+
+  const toolbar = document.querySelector('[role="viewer-toolbar"]')
+  const maxHeight = toolbar
+    ? window.innerHeight - toolbar.offsetHeight
+    : window.innerHeight
+  const mediumHeight = maxHeight * 0.6
+  const minHeight = 87
+
+  const handleOnIndexChange = snapIndex => {
+    const maxHeightSnapIndex = 2
+    if (snapIndex === maxHeightSnapIndex && !isTopPosition) {
+      setIsTopPosition(true)
+    }
+    if (snapIndex !== maxHeightSnapIndex && isTopPosition) {
+      setIsTopPosition(false)
+    }
+  }
+
+  return (
+    <BottomSheet
+      peekHeights={[minHeight, mediumHeight, maxHeight]}
+      defaultHeight={minHeight}
+      backdrop={false}
+      fullHeight={false}
+      onIndexChange={snapIndex => handleOnIndexChange(snapIndex)}
+      styles={{ root: styles.root }}
+    >
+      <div data-testid="bottomSheet-header" className={classes.header}>
+        <div className={classes.indicator} />
+      </div>
+      {children}
+    </BottomSheet>
+  )
+}
+
+export default BottomSheetWrapper

src/drive/web/modules/viewer/Footer/BottomSheetContent.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+
+import { isMobileApp } from 'cozy-device-helper'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+
+import Sharing from './Sharing'
+import ForwardButton from './ForwardButton'
+import DownloadButton from './DownloadButton'
+import getPanelBlocks, { panelBlocksSpecs } from '../Panel/getPanelBlocks'
+
+const useStyles = makeStyles(theme => ({
+  stack: {
+    backgroundColor: theme.palette.background.default
+  }
+}))
+
+const BottomSheetContent = ({ file }) => {
+  const panelBlocks = getPanelBlocks({ panelBlocksSpecs, file })
+  const FileActionButton = isMobileApp() ? ForwardButton : DownloadButton
+  const styles = useStyles()
+
+  return (
+    <Stack
+      spacing="s"
+      className={cx('u-flex u-flex-column u-ov-hidden', styles.stack)}
+    >
+      <Paper className={'u-flex u-ph-1 u-pb-1'} elevation={2} square>
+        <Sharing file={file} />
+        <FileActionButton file={file} />
+      </Paper>
+      {panelBlocks.map((PanelBlock, index) => (
+        <Paper
+          key={index}
+          elevation={index === panelBlocks.length - 1 ? 0 : 2}
+          square
+        >
+          <Typography variant="h4">
+            <PanelBlock file={file} />
+          </Typography>
+        </Paper>
+      ))}
+    </Stack>
+  )
+}
+
+BottomSheetContent.propTypes = {
+  file: PropTypes.object.isRequired
+}
+
+export default BottomSheetContent

src/drive/web/modules/viewer/Footer/FooterContent.jsx

@@ -1,20 +1,44 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
 
 import { isMobileApp } from 'cozy-device-helper'
 
+import { showPanel } from '../helpers'
 import Sharing from './Sharing'
 import ForwardButton from './ForwardButton'
 import DownloadButton from './DownloadButton'
+import BottomSheet from './BottomSheet'
+import BottomSheetContent from './BottomSheetContent'
+
+const useStyles = makeStyles({
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    width: 'calc(100% - 2rem)',
+    height: '100%',
+    paddingLeft: '1rem',
+    paddingRight: '1rem',
+    borderTop: '1px solid var(--dividerColor)'
+  }
+})
 
 const FooterContent = ({ file }) => {
+  const styles = useStyles()
   const FileActionButton = isMobileApp() ? ForwardButton : DownloadButton
 
+  if (showPanel({ file }))
+    return (
+      <BottomSheet>
+        <BottomSheetContent file={file} />
+      </BottomSheet>
+    )
+
   return (
-    <>
+    <div className={styles.footer}>
       <Sharing file={file} />
       <FileActionButton file={file} />
-    </>
+    </div>
   )
 }
 

src/drive/web/modules/viewer/Footer/FooterContent.spec.jsx

@@ -23,7 +23,8 @@ const client = createMockClient({})
 const setup = ({
   byDocId = { fileId: {} },
   isOwner = false,
-  isMobileAppValue = false
+  isMobileAppValue = false,
+  fileProp
 } = {}) => {
   const mockSharingContext = {
     byDocId,
@@ -35,7 +36,7 @@ const setup = ({
 
   const root = render(
     <AppLike client={client} sharingContextValue={mockSharingContext}>
-      <FooterContent file={file} />
+      <FooterContent file={fileProp || file} />
     </AppLike>
   )
 
@@ -86,4 +87,13 @@ describe('FooterContent', () => {
     expect(getByText('Shared'))
     expect(queryByText('Share')).toBeFalsy()
   })
+
+  it('should show bottom sheet for file with certification or konnector', () => {
+    const { root } = setup({
+      fileProp: { metadata: { carbonCopy: true }, ...file }
+    })
+    const { getByTestId } = root
+
+    expect(getByTestId('bottomSheet-header')).toBeTruthy()
+  })
 })