From b706fc68577ddc9cf28f464c8cf03c100f26d84b Mon Sep 17 00:00:00 2001
From: Artem <arlaptiev@gmail.com>
Date: Wed, 19 May 2021 15:02:36 +0300
Subject: [PATCH] fix: Surface, PageContainer, TestTopNavBar

---
 src/components/content/ContentBlock.js      |  5 ++--
 src/components/layout/PageContainer.js      |  4 +--
 src/components/layout/Surface.js            |  4 +--
 src/components/navigation/TestTopNavBar.js  | 32 ++++++++++++---------
 src/stories/content/ContentBlock.stories.js |  4 ++-
 5 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/content/ContentBlock.js b/src/components/content/ContentBlock.js
index 40b1cfd..2945616 100644
--- a/src/components/content/ContentBlock.js
+++ b/src/components/content/ContentBlock.js
@@ -10,10 +10,9 @@ const useStyles = props => makeStyles(theme => ({
     width: "100%",
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2),
-    backgroundColor: get(theme.palette, props.color),
   },
   title: {
-    paddingBottom: theme.spacing(2)
+    paddingBottom: theme.spacing(1)
   }
 }));
 
@@ -21,7 +20,7 @@ export function ContentBlock({ children, ...props }) {
   const classes = useStyles(props)();
   return (
     <Grid className={classes.root} direction='column' container>
-      <Grid item container className={classes.title}><Typography variant="body1"><strong>{props.title}</strong></Typography></Grid>
+      {props.title ? <Grid item container className={classes.title}><Typography variant="body1"><strong>{props.title}</strong></Typography></Grid> : null}
       <Grid item container><Typography variant="body1">{children}</Typography></Grid>
     </Grid>
   );
diff --git a/src/components/layout/PageContainer.js b/src/components/layout/PageContainer.js
index 78e978b..9797056 100644
--- a/src/components/layout/PageContainer.js
+++ b/src/components/layout/PageContainer.js
@@ -8,11 +8,11 @@ const useStyles = props => makeStyles( theme => ({
   }
 }));
 
-export function PageContainer({ children, ...props }){
+export function PageContainer({ children, style, ...props }){
   const classes = useStyles(props)();
   const classNames = `${classes.root} ${props.className}`;
   return (
-    <Container maxWidth="sm" className={classNames}>
+    <Container style={style} maxWidth="sm" className={classNames}>
       {children}
     </Container>
   );
diff --git a/src/components/layout/Surface.js b/src/components/layout/Surface.js
index 87c01be..d96d2a4 100644
--- a/src/components/layout/Surface.js
+++ b/src/components/layout/Surface.js
@@ -11,11 +11,11 @@ const useStyles = props => makeStyles( theme => ({
   }
 }));
 
-export function Surface({ children, ...props }){
+export function Surface({ children, style, ...props }){
   const classes = useStyles(props)();
   const classNames = `${classes.root} ${props.className}`;
   return (
-    <Box className={classNames}>
+    <Box style={style} className={classNames}>
       {children}
     </Box>
   );
diff --git a/src/components/navigation/TestTopNavBar.js b/src/components/navigation/TestTopNavBar.js
index b4c0792..463d425 100644
--- a/src/components/navigation/TestTopNavBar.js
+++ b/src/components/navigation/TestTopNavBar.js
@@ -70,20 +70,24 @@ export function TestTopNavBar({ children, ...props }){
 
       </div>
 
-      <Slide in={!props.collapsed} timeout={100} unmountOnExit mountOnEnter>
-        <div>
-          <Grow in={!props.collapsed} timeout={50}>
-            <div>
-              <Fade in={!props.collapsed} timeout={50}>
-                <div>
-                  <div className={classes.standardBottomPadding}>{children}</div>
-                  <div className={classes.fullWidth}><IconButton className={classes.collapseButton} onClick={() => {props.setCollapsed(true)}}><ExpandLessIcon/></IconButton></div>
-                </div>
-              </Fade>
-            </div>
-          </Grow>
-        </div>
-      </Slide>
+      {
+        children ?
+        <Slide in={!props.collapsed} timeout={100} unmountOnExit mountOnEnter>
+          <div>
+            <Grow in={!props.collapsed} timeout={50}>
+              <div>
+                <Fade in={!props.collapsed} timeout={50}>
+                  <div>
+                    <div className={classes.standardBottomPadding}>{children}</div>
+                    <div className={classes.fullWidth}><IconButton className={classes.collapseButton} onClick={() => {props.setCollapsed(true)}}><ExpandLessIcon/></IconButton></div>
+                  </div>
+                </Fade>
+              </div>
+            </Grow>
+          </div>
+        </Slide>
+        : null
+      }
 
     </PageContainer>
   );
diff --git a/src/stories/content/ContentBlock.stories.js b/src/stories/content/ContentBlock.stories.js
index 4c8283a..d9863a8 100644
--- a/src/stories/content/ContentBlock.stories.js
+++ b/src/stories/content/ContentBlock.stories.js
@@ -8,5 +8,7 @@ export default {
   component: ContentBlock
 };
 
-export const Default = () => <ContentBlock color="alternative.redLight">This is content info block's children</ContentBlock>;
+export const Default = () => <ContentBlock title="This is title">This is content block's children</ContentBlock>;
+
+export const NoTitle = () => <ContentBlock>This is content block's children. No title here</ContentBlock>;