Añadir plantilla

Base para front

2 files changed, 113 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/PapperBlock/PapperBlock.js b/front/odiparpack/app/components/PapperBlock/PapperBlock.js
new file mode 100644
index 0000000..6663ae6
--- /dev/null
+++ b/front/odiparpack/app/components/PapperBlock/PapperBlock.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Typography } from '@material-ui/core';
+import styles from './papperStyle-jss';
+
+
+function PaperSheet(props) {
+  const {
+    classes,
+    title,
+    desc,
+    children,
+    whiteBg,
+    noMargin,
+    colorMode,
+    overflowX
+  } = props;
+  return (
+    <div>
+      <Paper className={classNames(classes.root, noMargin && classes.noMargin, colorMode && classes.colorMode)} elevation={4}>
+        <Typography variant="h6" component="h2" className={classes.title}>
+          {title}
+        </Typography>
+        <Typography component="p" className={classes.description}>
+          {desc}
+        </Typography>
+        <section className={classNames(classes.content, whiteBg && classes.whiteBg, overflowX && classes.overflowX)}>
+          {children}
+        </section>
+      </Paper>
+    </div>
+  );
+}
+
+PaperSheet.propTypes = {
+  classes: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
+  desc: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  whiteBg: PropTypes.bool,
+  colorMode: PropTypes.bool,
+  noMargin: PropTypes.bool,
+  overflowX: PropTypes.bool,
+};
+
+PaperSheet.defaultProps = {
+  whiteBg: false,
+  noMargin: false,
+  colorMode: false,
+  overflowX: false
+};
+
+export default withStyles(styles)(PaperSheet);
diff --git a/front/odiparpack/app/components/PapperBlock/papperStyle-jss.js b/front/odiparpack/app/components/PapperBlock/papperStyle-jss.js
new file mode 100644
index 0000000..521e349
--- /dev/null
+++ b/front/odiparpack/app/components/PapperBlock/papperStyle-jss.js
@@ -0,0 +1,58 @@
+const styles = theme => ({
+  root: theme.mixins.gutters({
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+    marginTop: theme.spacing(3),
+    '&$noMargin': {
+      margin: 0
+    },
+  }),
+  title: {
+    marginBottom: theme.spacing(4),
+    paddingBottom: theme.spacing(2),
+    position: 'relative',
+    textTransform: 'capitalize',
+    fontSize: 28,
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      width: 40,
+      borderBottom: `4px solid ${theme.palette.primary.main}`
+    }
+  },
+  description: {
+    maxWidth: 960,
+    fontSize: 16,
+  },
+  content: {
+    marginTop: theme.spacing(2),
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.default,
+  },
+  whiteBg: {
+    backgroundColor: 'transparent',
+    margin: 0,
+  },
+  noMargin: {},
+  colorMode: {
+    backgroundColor: theme.palette.secondary.main,
+    '& $title': {
+      color: theme.palette.grey[100],
+      '&:after': {
+        borderBottom: `5px solid ${theme.palette.primary.light}`
+      }
+    },
+    '& $description': {
+      color: theme.palette.grey[100],
+    }
+  },
+  overflowX: {
+    width: '100%',
+    overflowX: 'auto',
+  }
+});
+
+export default styles;