Feat: New styleguide, table component and screen

This commit is contained in:
Rafael Taranto 2019-11-11 15:34:14 +00:00
parent c100c11a2f
commit 8b4a1ff23f
20 changed files with 309 additions and 287 deletions

View file

@ -25,22 +25,25 @@ function H4 ({ children, className, ...props }) {
return <h4 className={classnames(classes.h3, className)} {...props}>{children}</h4>
}
const P = pBuilder()
const P = pBuilder('p')
const Info1 = pBuilder('info1')
const Info2 = pBuilder('info2')
const Info3 = pBuilder('info3')
const Info4 = pBuilder('info4')
const Mono = pBuilder('mono')
const TL1 = pBuilder('tl1')
const TL2 = pBuilder('tl2')
const Label1 = pBuilder('label1')
const Label2 = pBuilder('label2')
const Label3 = pBuilder('label3')
function pBuilder (elementClass) {
return ({ inline, className, children, ...props }) => {
return ({ inline, noMargin, className, children, ...props }) => {
const classes = useStyles()
const classNames = {
[classes[elementClass]]: elementClass,
className: true,
[classes.inline]: inline
[classes.inline]: inline,
[classes.noMarginP]: noMargin
}
return (
<p className={classnames(classNames, className)} {...props}>
@ -50,4 +53,4 @@ function pBuilder (elementClass) {
}
}
export { H1, H2, H3, H4, TL1, TL2, P, Info1, Info2, Info3, Info4, Mono }
export { H1, H2, H3, H4, TL1, TL2, P, Info1, Info2, Info3, Mono, Label1, Label2, Label3 }