Merge pull request #130 from spotify/alund/layouts

Add back Content and ContentHeader

frontend/packages/core/src/index.ts

@@ -5,6 +5,8 @@ export {
 } from './components/EntityLink';
 export { default as Page } from './layout/Page';
 export { gradients, theme } from './layout/Page';
+export { default as Content } from './layout/Content/Content';
+export { default as ContentHeader } from './layout/ContentHeader/ContentHeader';
 export { default as Header } from './layout/Header/Header';
 export { default as HeaderLabel } from './layout/HeaderLabel';
 export { default as InfoCard } from './layout/InfoCard';

frontend/packages/core/src/layout/Content/Content.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
+import { Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    gridArea: 'pageContent',
+    minWidth: 0,
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+    ...theme.mixins.gutters({}),
+  },
+  centered: {
+    maxWidth: 1600,
+    justifySelf: 'center',
+  },
+  centerWrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  centerContent: {
+    width: '100%',
+    maxWidth: 1600,
+  },
+}));
+
+type Props = {
+  centered?: boolean;
+  className?: string;
+};
+
+const Content: FC<Props> = ({ centered = false, className = '', children, ...props }) => {
+  const classes = useStyles();
+
+  if (centered) {
+    return (
+      <article {...props} className={classNames(classes.root, className, classes.centerWrapper)}>
+        <div className={classes.centerContent}>{children}</div>
+      </article>
+    );
+  }
+
+  return (
+    <article {...props} className={classNames(classes.root, className)}>
+      {children}
+    </article>
+  );
+};
+
+export default Content;

frontend/packages/core/src/layout/ContentHeader/ContentHeader.js

@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { Typography, withStyles } from '@material-ui/core';
 import Helmet from 'react-helmet';
-import FavoriteButton from 'shared/components/layout/FavoriteButton';
+// import FavoriteButton from 'shared/components/layout/FavoriteButton';
 
 const styles = theme => ({
   container: {
@@ -39,20 +39,37 @@ class ContentHeader extends Component {
   static defaultProps = {
     favoriteable: true,
     title: 'Unknown page',
+    titleComponent: undefined,
   };
 
   render() {
-    const { title, description, favoriteable, children, classes } = this.props;
+    const {
+      title,
+      description,
+      /* favoriteable,*/ children,
+      classes,
+    } = this.props;
+    const TitleComponent = this.props.titleComponent;
+    const renderedTitle =
+      TitleComponent !== undefined ? (
+        <TitleComponent />
+      ) : (
+        <Typography
+          variant="h4"
+          className={classes.title}
+          data-testid="header-title"
+        >
+          {title}
+        </Typography>
+      );
 
     return (
       <Fragment>
         <Helmet title={title} />
         <div className={classes.container}>
           <div className={classes.leftItemsBox}>
-            <Typography variant="h3" className={classes.title} data-testid="header-title">
-              {title}
-            </Typography>
-            {favoriteable && <FavoriteButton />}
+            {renderedTitle}
+            {/* favoriteable && <FavoriteButton /> */}
             {description && (
               <Typography className={classes.description} variant="body2">
                 {description}

frontend/packages/plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { Typography, makeStyles, Theme, Grid } from '@material-ui/core';
 import HomePageTimer from '../HomepageTimer';
 import {
+  Content,
   EntityLink,
   InfoCard,
   SortableTable,
@@ -48,9 +49,6 @@ const useStyles = makeStyles<Theme>(theme => ({
     overflowX: 'hidden',
     overflowY: 'auto',
   },
-  pageBody: {
-    padding: theme.spacing(3),
-  },
   avatarButton: {
     padding: theme.spacing(2),
   },
@@ -91,7 +89,7 @@ const HomePage: FC<{}> = () => {
         >
           <HomePageTimer />
         </Header>
-        <div className={classes.pageBody}>
+        <Content>
           <Grid container direction="row" spacing={3}>
             <Grid item xs={6}>
               <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
@@ -105,7 +103,7 @@ const HomePage: FC<{}> = () => {
               <SquadTechHealth />
             </Grid>
           </Grid>
-        </div>
+        </Content>
       </div>
     </Page>
   );