Feat: New styleguide, table component and screen
This commit is contained in:
parent
c100c11a2f
commit
8b4a1ff23f
20 changed files with 309 additions and 287 deletions
|
|
@ -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 }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue