Refactor Layout component in lib-user (#6115)

* refactor to non-grid Layout * add responsiveness and dropdown to PageHeader
zooniverse · Jun 6, 2024 · 4deea7e · 4deea7e
1 parent 32f4864
commit 4deea7e
Show file tree

Hide file tree

Showing 6 changed files with 317 additions and 149 deletions.
diff --git a/packages/lib-user/src/components/shared/ContentBox/ContentBox.js b/packages/lib-user/src/components/shared/ContentBox/ContentBox.js
@@ -36,7 +36,6 @@ function ContentBox({
       }}
       border={border}
       elevation={screenSize === 'small' ? 'none' : 'xsmall'}
-      margin={screenSize === 'small' ? '30px' : 'none'}
       pad='30px'
       round={screenSize === 'small' ? 'none' : '8px'}
       {...rest}
@@ -59,7 +58,7 @@ function ContentBox({
           {link.text && (
             <ContentLink
               link={link}
-            />   
+            />
           )}
 
         </Box>

diff --git a/packages/lib-user/src/components/shared/Layout/Layout.js b/packages/lib-user/src/components/shared/Layout/Layout.js
@@ -1,123 +1,87 @@
-'use client'
-
-import { ZooniverseLogotype } from '@zooniverse/react-components'
 import { Box } from 'grommet'
 import { arrayOf, node } from 'prop-types'
 import styled, { css } from 'styled-components'
 
-const PageContainer = styled(Box)`
-  display: grid;
-  grid-template-columns: 0 0 1fr 0 0;
-  grid-template-rows: 0 0 1fr;
-  min-height: 90vh;
+import PageHeader from './components/PageHeader'
 
-  @media (48rem <= width < 80rem) {
-    grid-template-columns: 0 2rem minmax(44rem, 76rem) 2rem 0;
-    grid-template-rows: 50px 50px 1fr;
-  }
-
-  @media (80rem <= width) {
-    grid-template-columns: auto minmax(2rem, 5rem) minmax(74rem, 80rem) minmax(2rem, 5rem) auto;
-    grid-template-rows: 70px 70px 1fr;
-  }
-`
+const InnerPageContainer = styled(Box)`
+  box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.25), -3px 0px 3px rgba(0, 0, 0, 0.25);
 
-const PageLeftHeader = styled(Box)`
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-`
+  // Grommet theme's size is definied in pixels
+  // Size "small" is viewport widths less than 769px
+  // If Grommet theme breakpoints are changed to rem units, adjust here as needed
 
-const PageHeader = styled(Box)`
-  grid-column: 3 / 4;
-  grid-row: 1 / 3;
-`
+  @media (768px < width <= 90rem) {
+    padding: 0 30px;
+  }
 
-const PageRightHeader = styled(Box)`
-  grid-column: 4 / 6;
-  grid-row: 1 / 3;
+  @media (width <= 769px) {
+    padding: 0;
+  }
 `
 
-const PageLeftColumn = styled(Box)`
-  box-shadow: -6px 0px 6px -6px rgba(0, 0, 0, 0.50);
+const PageBody = styled(Box)`
   position: relative;
-  grid-column: 2 / 3;
-  grid-row: 3 / 4;
+  min-height: 90vh;
+  max-width: min(100%, calc(90rem - 160px));
 
-  @media (91rem <= width) {
-    border-left: 0.5px solid ${props => props.theme.dark ? props.theme.global.colors['dark-2'] : props.theme.global.colors['light-5']};
-  }
+  margin-top: -70px; // half height of PageHeader
+  border-radius: 8px 8px 0 0;
+  padding-bottom: 50px;
 
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 30px;
-    height: 300px;
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
-    
-    ${props =>
+  @media (width > 90rem) {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 70px;
+      left: -30px;
+      width: 30px;
+      height: 300px;
+      clip-path: polygon(100% 0, 0 0, 100% 100%);
+
+      ${props =>
         props.theme.dark
           ? css`
               background: linear-gradient(
                 to bottom left,
                 rgba(0, 0, 0, 0.3) 0%,
-                rgba(92, 92, 92, 0) 60%
+                transparent 60%
               );
-          `
+            `
           : css`
               background: linear-gradient(
                 to bottom left,
                 rgba(92, 92, 92, 0.3) 0%,
-                rgba(92, 92, 92, 0) 60%
+                transparent 60%
               );
-          `
+            `}
     }
-  }
-`
 
-const PageBody = styled(Box)`
-  grid-column: 3 / 4;
-  grid-row: 2 / 4;
-  border-radius: 8px 8px 0 0;
-  padding-bottom: 50px;
-`
+    &::after {
+      content: '';
+      position: absolute;
+      top: 70px;
+      right: -30px;
+      width: 30px;
+      height: 300px;
+      clip-path: polygon(100% 0, 0 0, 0 100%);
 
-const PageRightColumn = styled(Box)`
-  box-shadow: 6px 0px 6px -6px rgba(0, 0, 0, 0.50);
-  position: relative;
-  grid-column: 4 / 5;
-  grid-row: 3 / 4;
-
-  @media (91rem <= width) {
-    border-right: 0.5px solid ${props => props.theme.dark ? props.theme.global.colors['dark-2'] : props.theme.global.colors['light-5']};
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 30px;
-    height: 300px;
-    clip-path: polygon(100% 0, 0 0, 0 100%);
-    
-    ${props =>
+      ${props =>
         props.theme.dark
           ? css`
               background: linear-gradient(
                 to bottom right,
                 rgba(0, 0, 0, 0.3) 0%,
-                rgba(92, 92, 92, 0) 60%
+                transparent 60%
               );
-          `
+            `
           : css`
               background: linear-gradient(
                 to bottom right,
                 rgba(92, 92, 92, 0.3) 0%,
-                rgba(92, 92, 92, 0) 60%
+                transparent 60%
               );
-          `
+            `}
     }
   }
 `
@@ -128,65 +92,34 @@ function Layout({
   secondaryHeaderItems = []
 }) {
   return (
-    <PageContainer>
-      <PageLeftHeader background='neutral-1' />
+    <>
       <PageHeader
-        background='neutral-1'
-        direction='row'
-        forwardedAs='header'
-        justify='between'
-      >
-        <Box
-          align='center'
-          direction='row'
-          justify='start'
-          height='50%'
-        >
-          {primaryHeaderItem}
-        </Box>
-        <Box
-          align='center'
-          justify='end'
-          direction='row'
-          gap='small'
-          height='50%'
-        >
-          {(secondaryHeaderItems.length > 0)
-            ? secondaryHeaderItems.map((HeaderItem) => (
-              HeaderItem
-            ))
-            : (
-              <ZooniverseLogotype
-                id='HeaderZooniverseLogo'
-                color='white'
-              />
-            )}
-        </Box>
-      </PageHeader>
-      <PageRightHeader background='neutral-1' />
-      <PageLeftColumn 
-        background={{
-          dark: 'dark-3',
-          light: 'neutral-6'
-        }}
+        primaryHeaderItem={primaryHeaderItem}
+        secondaryHeaderItems={secondaryHeaderItems}
       />
-      <PageBody
+      <Box
         background={{
-          dark: 'dark-3',
-          light: 'neutral-6'
+          dark: 'dark-1',
+          light: 'light-1'
         }}
-        forwardedAs='main'
-        gap='30px'
+        align='center'
       >
-        {children}
-      </PageBody>
-      <PageRightColumn
-        background={{
-          dark: 'dark-3',
-          light: 'neutral-6'
-        }}
-      />
-    </PageContainer>   
+        <InnerPageContainer
+          align='center'
+          background={{ dark: 'dark-3', light: 'neutral-6' }}
+          width='min(100%, 90rem)'
+          elevation='medium'
+        >
+          <PageBody
+            fill
+            forwardedAs='main'
+            gap='30px'
+          >
+            {children}
+          </PageBody>
+        </InnerPageContainer>
+      </Box>
+    </>
   )
 }
 

diff --git a/packages/lib-user/src/components/shared/Layout/Layout.stories.js b/packages/lib-user/src/components/shared/Layout/Layout.stories.js
@@ -0,0 +1,63 @@
+import { Layer, Link, SettingsOption } from 'grommet-icons'
+
+import Layout from './Layout'
+import HeaderLink from '../HeaderLink'
+import ContentBox from '../ContentBox'
+import MainContent from '../MainContent'
+import HeaderToast from '../HeaderToast'
+import HeaderButton from '../HeaderButton'
+
+export default {
+  title: 'Components / Shared / Layout',
+  component: Layout
+}
+
+const pageContent = <MainContent />
+
+export const Default = {
+  args: {
+    children: pageContent,
+    primaryHeaderItem: (
+      <HeaderLink
+        href={`https://www.zooniverse.org/users/zootester1`}
+        label='back to profile'
+        primaryItem={true}
+      />
+    )
+  }
+}
+
+export const WithGroupHeaderItems = {
+  args: {
+    children: pageContent,
+    primaryHeaderItem: (
+      <HeaderLink
+        href={`https://www.zooniverse.org/users/zootester1`}
+        label='back to profile'
+        primaryItem={true}
+      />
+    ),
+    secondaryHeaderItems: [
+      <HeaderToast
+        key='copy-join-link-toast'
+        icon={<Link color='white' size='small' />}
+        label='Copy Join Link'
+        message='Join Link Copied!'
+        textToCopy={`https://www.zooniverse.org/groups/1234?join_token=4321`}
+      />,
+      <HeaderToast
+        key='share-group-toast'
+        icon={<Layer color='white' size='small' />}
+        label='Share Group'
+        message='Group Link Copied!'
+        textToCopy={`https://www.zooniverse.org/groups/1234`}
+      />,
+      <HeaderButton
+        key='manage-group-button'
+        icon={<SettingsOption color='white' size='small' />}
+        label='Manage Group'
+        onClick={() => alert('See the GroupModal Stories')}
+      />
+    ]
+  }
+}