Text

index.js

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>
)

Text.module.scss

@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);
      }
    }
  }
}