| 1 |
import { PREFIX } from '../../constants'; |
| 2 |
|
| 3 |
const generateTypographyStyles = ({ controlName, attributes }) => { |
| 4 |
const { |
| 5 |
[`${PREFIX}${controlName}FontFamily`]: fontFamily, |
| 6 |
[`${controlName}FontWeight`]: fontWeight, |
| 7 |
[`${controlName}FontStyle`]: fontStyle, |
| 8 |
[`${controlName}TextTransform`]: textTransform, |
| 9 |
[`${controlName}TextDecoration`]: textDecoration, |
| 10 |
|
| 11 |
[`${controlName}FontSizes`]: fontSizes, |
| 12 |
[`${controlName}LineHeights`]: lineHeights, |
| 13 |
[`${controlName}LetterSpacings`]: letterSpacings, |
| 14 |
|
| 15 |
[`${controlName}FontSizeUnits`]: fontSizeUnits, |
| 16 |
[`${controlName}LineHeightUnits`]: lineHeightUnits, |
| 17 |
[`${controlName}LetterSpacingUnits`]: letterSpacingUnits |
| 18 |
} = attributes; |
| 19 |
|
| 20 |
let desktopStyles = ''; |
| 21 |
let tabletStyles = ''; |
| 22 |
let mobileStyles = ''; |
| 23 |
|
| 24 |
// common to all devices |
| 25 |
if (fontFamily) { |
| 26 |
desktopStyles += `font-family: ${fontFamily};`; |
| 27 |
} |
| 28 |
|
| 29 |
if (fontWeight) { |
| 30 |
desktopStyles += `font-weight: ${fontWeight.value};`; |
| 31 |
} |
| 32 |
|
| 33 |
if (fontStyle) { |
| 34 |
desktopStyles += `font-style: ${fontStyle};`; |
| 35 |
} |
| 36 |
|
| 37 |
if (textTransform) { |
| 38 |
desktopStyles += `text-transform: ${textTransform};`; |
| 39 |
} |
| 40 |
|
| 41 |
if (textDecoration && textDecoration.value) { |
| 42 |
desktopStyles += `text-decoration: ${textDecoration.value};`; |
| 43 |
} |
| 44 |
|
| 45 |
// desktop only |
| 46 |
if (fontSizes && fontSizes.desk !== undefined && fontSizes.desk !== '' && isNaN(fontSizes.desk) === false) { |
| 47 |
desktopStyles += `font-size: ${fontSizes.desk}${fontSizeUnits.desk};`; |
| 48 |
} |
| 49 |
|
| 50 |
if (lineHeights && lineHeights.desk && lineHeights.desk !== undefined && lineHeights.desk !== '' && isNaN(lineHeights.desk) === false) { |
| 51 |
desktopStyles += `line-height: ${lineHeights.desk}${lineHeightUnits.desk};`; |
| 52 |
} |
| 53 |
|
| 54 |
if ( |
| 55 |
letterSpacings && |
| 56 |
letterSpacings.desk && |
| 57 |
letterSpacings.desk !== undefined && |
| 58 |
letterSpacings.desk !== '' && |
| 59 |
isNaN(letterSpacings.desk) === false |
| 60 |
) { |
| 61 |
desktopStyles += `letter-spacing: ${letterSpacings.desk}${letterSpacingUnits.desk};`; |
| 62 |
} |
| 63 |
|
| 64 |
// tablet only |
| 65 |
if (fontSizes && fontSizes.tab && fontSizes.tab !== undefined && fontSizes.tab !== '' && isNaN(fontSizes.tab) === false) { |
| 66 |
tabletStyles += `font-size: ${fontSizes.tab}${fontSizeUnits.tab};`; |
| 67 |
} |
| 68 |
|
| 69 |
if (lineHeights && lineHeights.tab && lineHeights.tab !== undefined && lineHeights.tab !== '' && isNaN(lineHeights.tab) === false) { |
| 70 |
tabletStyles += `line-height: ${lineHeights.tab}${lineHeightUnits.tab};`; |
| 71 |
} |
| 72 |
|
| 73 |
if ( |
| 74 |
letterSpacings && |
| 75 |
letterSpacings.tab && |
| 76 |
letterSpacings.tab !== undefined && |
| 77 |
letterSpacings.tab !== '' && |
| 78 |
isNaN(letterSpacings.tab) === false |
| 79 |
) { |
| 80 |
tabletStyles += `letter-spacing: ${letterSpacings.tab}${letterSpacingUnits.tab};`; |
| 81 |
} |
| 82 |
|
| 83 |
// mobile only |
| 84 |
if (fontSizes && fontSizes.mob && fontSizes.mob !== undefined && fontSizes.mob !== '' && isNaN(fontSizes.mob) === false) { |
| 85 |
mobileStyles += `font-size: ${fontSizes.mob}${fontSizeUnits.mob};`; |
| 86 |
} |
| 87 |
|
| 88 |
if (lineHeights && lineHeights.mob && lineHeights.mob !== undefined && lineHeights.mob !== '' && isNaN(lineHeights.mob) === false) { |
| 89 |
mobileStyles += `line-height: ${lineHeights.mob}${lineHeightUnits.mob};`; |
| 90 |
} |
| 91 |
|
| 92 |
if ( |
| 93 |
letterSpacings && |
| 94 |
letterSpacings.mob && |
| 95 |
letterSpacings.mob !== undefined && |
| 96 |
letterSpacings.mob !== '' && |
| 97 |
isNaN(letterSpacings.mob) === false |
| 98 |
) { |
| 99 |
mobileStyles += `letter-spacing: ${letterSpacings.mob}${letterSpacingUnits.mob};`; |
| 100 |
} |
| 101 |
|
| 102 |
return { |
| 103 |
desktopStyles, |
| 104 |
tabletStyles, |
| 105 |
mobileStyles |
| 106 |
}; |
| 107 |
}; |
| 108 |
|
| 109 |
export default generateTypographyStyles; |
| 110 |
|
