Skip to content

Instantly share code, notes, and snippets.

@dimensi
Created May 7, 2020 20:06
Show Gist options
  • Save dimensi/a8a8e3acda6000d3ec5f7bd9a90f293d to your computer and use it in GitHub Desktop.
Save dimensi/a8a8e3acda6000d3ec5f7bd9a90f293d to your computer and use it in GitHub Desktop.
Text
import React from 'react'
import classNames from 'classnames'
import style from './Text.module.scss'
/**
* Text tool
* @param {string|function} as
* @param children
* @param {string} className
* @param {'headline64'|'headline48'|'headline36'|'headline35'|'headline28'|'headline24'|'headline20'|'headline18'|'headline16'|'headline14'|'text36'|'text20'|'text18'|'text16'|'text14'|'text12'|'text11'|'link12'|'link14'} xl
* @param {'headline64'|'headline48'|'headline36'|'headline35'|'headline28'|'headline24'|'headline20'|'headline18'|'headline16'|'headline14'|'text36'|'text20'|'text18'|'text16'|'text14'|'text12'|'text11'|'link12'|'link14'} md
* @param {'headline64'|'headline48'|'headline36'|'headline35'|'headline28'|'headline24'|'headline20'|'headline18'|'headline16'|'headline14'|'text36'|'text20'|'text18'|'text16'|'text14'|'text12'|'text11'|'link12'|'link14'} xs
* @param {boolean} bold
* @param {boolean} italic
* @param {boolean} normal
* @param {'black-50'|'black-40'|'black-30'|'royal-blue'|'coral'|'dark-cream'|'graphite-grey'|'white'|'inherit'} color
* @param {boolean} simpleMode
* @param {function} innerRef
* @param {string} innerHTML
* @param props
* @returns {JSX.Element}
*/
export const Text = ({
as: Tag = 'p',
children,
className,
xl,
xs,
md,
bold,
italic,
normal,
color,
simpleMode,
innerRef,
innerHTML,
...props
}) => (
<Tag
className={classNames(className, style.text, color && style[`text--color_${color}`], {
[style[`text--xl_${xl}`]]: xl,
[style[`text--xs_${xs}`]]: xs,
[style[`text--md_${md}`]]: md,
[style['text--bold']]: bold,
[style['text--italic']]: italic,
[style['text--normal']]: normal,
[style['text--default-mode']]: !simpleMode,
})}
ref={innerRef}
{...(innerHTML && { dangerouslySetInnerHTML: { __html: innerHTML } })}
{...props}
>
{children}
</Tag>
)
@function pxToVw($px, $base: 1440) {
@return $px / 10 + rem;
}
$sizes: (
'headline64': (
font-size: 64,
font-weight: 500,
line-height: 1,
),
'headline48': (
font-size: 48,
font-weight: 500,
line-height: 50/48,
),
'headline36': (
font-size: 36,
font-weight: 500,
line-height: 40/36,
),
'headline35': (
font-size: 35,
font-weight: 500,
line-height: 40/35,
),
'headline28': (
font-size: 28,
font-weight: 500,
line-height: 32/28,
),
'headline24': (
font-size: 24,
font-weight: 500,
line-height: 30/24,
),
'headline20': (
font-size: 20,
font-weight: 500,
line-height: 30/20,
),
'headline18': (
font-size: 18,
font-weight: 500,
line-height: 20/18,
),
'headline16': (
font-size: 16,
font-weight: 500,
line-height: 1.4,
),
'headline14': (
font-size: 14,
font-weight: 500,
line-height: 1,
),
'text36': (
font-size: 36,
line-height: 50/36,
),
'text20': (
font-size: 20,
line-height: 30/20,
font-family: var(--font-inter),
),
'text18': (
font-size: 18,
line-height: 26/18,
font-family: var(--font-inter),
),
'text16': (
font-size: 16,
line-height: 24/16,
font-family: var(--font-inter),
),
'text14': (
font-size: 14,
line-height: 20/14,
font-family: var(--font-inter),
),
'text12': (
font-size: 12,
line-height: 18/12,
font-family: var(--font-inter),
),
'text11': (
font-size: 11,
line-height: 18/11,
font-family: var(--font-inter),
),
'link14': (
font-weight: 500,
font-size: 14,
line-height: 1,
),
'link12': (
font-weight: 500,
font-size: 12,
line-height: 1,
),
);
$colors: (
black-50: var(--black-50),
black-40: var(--black-40),
black-30: var(--black-30),
royal-blue: var(--royal-blue),
coral: var(--coral),
dark-cream: var(--dark-cream),
graphite-grey: var(--graphite-grey),
white: white,
inherit: inherit
);
.text {
font-family: inherit;
color: var(--almost-black);
@media (min-width: 1025px) {
@each $name, $params in $sizes {
&--xl_#{$name} {
@each $name, $param in $params {
@if $name == 'font-size' {
#{$name}: pxToVw($param);
} @else {
#{$name}: $param;
}
}
}
}
}
@media (--tablet) {
@each $name, $params in $sizes {
&--md_#{$name} {
@each $name, $param in $params {
@if $name == 'font-size' {
#{$name}: pxToVw($param);
} @else {
#{$name}: $param;
}
}
}
}
}
@media (--phone) {
@each $name, $params in $sizes {
&--xs_#{$name} {
@each $name, $param in $params {
@if $name == 'font-size' {
#{$name}: pxToVw($param);
} @else {
#{$name}: $param;
}
}
}
}
}
&--bold {
font-weight: 500;
}
&--normal {
font-weight: 400;
}
&--italic {
font-style: italic;
}
@each $name, $color in $colors {
&--color_#{$name} {
color: $color;
}
}
a {
text-decoration: none;
}
&--default-mode {
& > a {
color: var(--royal-blue);
transition: color 0.3s;
text-decoration: none;
&:hover {
color: var(--coral);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment