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 .text
margin 0 margin 0
font-size rem(16) font-size rem(16)
@ -16,9 +18,11 @@ for size in 36 28 24 20 18 16 14
.size-{size} .size-{size}
font-size rem(size) font-size rem(size)
for weight in 'normal' 'bold' 'light' for weight in 'normal' 'bold'
.weight-{weight} .weight-{weight}
font-weight unquote(weight) font-weight unquote(weight)
.weight-light
font-weight 300
.align-center .align-center
text-align center text-align center

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

@ -27,19 +27,23 @@ const types: Record<Types, {
}, },
h1: { h1: {
size: 28, size: 28,
weight: 'bold' weight: 'bold',
tag: 'h1'
}, },
h2: { h2: {
size: 24, size: 24,
weight: 'bold' weight: 'bold',
tag: 'h2'
}, },
h3: { h3: {
size: 20, size: 20,
weight: 'bold' weight: 'bold',
tag: 'h3'
}, },
h4: { h4: {
size: 18, size: 18,
weight: 'bold' weight: 'bold',
tag: 'h4'
}, },
text: {}, text: {},
bold: { bold: {
@ -54,10 +58,16 @@ const types: Record<Types, {
export default class Text extends React.PureComponent<Props> { export default class Text extends React.PureComponent<Props> {
public render() { 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, size: 16,
weight: 'normal' weight: 'normal'
}, this.props.type ? types[this.props.type] : {}) }, 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( const classes = buildClassName(
css.text, css.text,
[css[`weight-${data.weight}`], data.weight !== 'normal'], [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 (<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})
} }
} }