Merge pull request #30 from mavka-org/main

Components fixes
mavka-org · May 19, 2021 · 2eaa091 · 2eaa091
2 parents c9c8dbf + 21c2ccb
commit 2eaa091
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git a/src/components/content/ContentBlock.js b/src/components/content/ContentBlock.js
@@ -10,18 +10,17 @@ 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)
   }
 }));
 
 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
@@ -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
@@ -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
@@ -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/components/userInput/TestInputTextSection.js b/src/components/userInput/TestInputTextSection.js
@@ -13,7 +13,7 @@ export function TestInputTextSection({ children, ...props }) {
   const theme = useTheme();
 
   return (
-    <Grid container direction="row" spacing={2}>
+    <Grid container direction="row" spacing={2} style={{justifyContent: "center"}}>
       {props.testInputsList.map((elem) => {
         return (
 

diff --git 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>;