dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-06-07 16:49:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated text

Browse Source 
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon 2021-10-01 16:35:14 +02:00
parent 91674f6f6d
commit bb001148a5
Signed by: Florian Bouillon
GPG Key ID: BEEAF3722D0EBF64
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/dzeio/Text/Text.module.styl
View File

@ -1,3 +1,5 @@
@import "../config"
.text
margin 0
font-size rem(16)
@ -16,9 +18,11 @@ for size in 36 28 24 20 18 16 14
.size-{size}
font-size rem(size)
for weight in 'normal' 'bold' 'light'
for weight in 'normal' 'bold'
.weight-{weight}
font-weight unquote(weight)
.weight-light
font-weight 300
.align-center
text-align center

22
src/dzeio/Text/index.tsx
View File

@ -27,19 +27,23 @@ const types: Record<Types, {
},
h1: {
size: 28,
weight: 'bold'
weight: 'bold',
tag: 'h1'
},
h2: {
size: 24,
weight: 'bold'
weight: 'bold',
tag: 'h2'
},
h3: {
size: 20,
weight: 'bold'
weight: 'bold',
tag: 'h3'
},
h4: {
size: 18,
weight: 'bold'
weight: 'bold',
tag: 'h4'
},
text: {},
bold: {
@ -54,10 +58,16 @@ const types: Record<Types, {
export default class Text extends React.PureComponent<Props> {
public render() {
let data: { weight: Props['weight'], size: Props['size'] } = Object.assign({
let data: { weight: Props['weight'], size: Props['size'], tag?: Props['tag'] } = Object.assign({
size: 16,
weight: 'normal'
}, this.props.type ? types[this.props.type] : {})
if (this.props.size) {
data.size = this.props.size
}
if (this.props.weight) {
data.weight = this.props.weight
}
const classes = buildClassName(
css.text,
[css[`weight-${data.weight}`], data.weight !== 'normal'],
@ -73,6 +83,6 @@ export default class Text extends React.PureComponent<Props> {
return (<p className={classes}><em>{this.props.children}</em></p>)
}
return React.createElement(this.props.tag || 'p', {className: classes, children: this.props.children})
return React.createElement(this.props.tag ?? data.tag ?? 'p', {className: classes, children: this.props.children})
}
}