Textblock Component Example

classNames.js

/**
 * @module @moovelna/junction-utils~classNames
 */
/**
 * @description A module that takes n string arguments that contain class names for a node and then concatenates them.
 * @param  {...string} classes
 * @return a single string connected with a space
 * @example Simple
 * <div className={
 *  classNames(
 *    className, // pass through className prop
 *    iconStyles.MyClass,
 *  ) }
 * />
 *  @example Conditional
 * <div className={
 *  classNames(
 *    className, // pass through className prop
 *    styles.MyClass,
 *    condition && styles.ConditionalClass
 *  ) }
 * />
 */
export const classNames = (...classes) => classes.filter(Boolean).join(' ');

rem.js

/**
 * @module @moovelna/junction-utils
 */

/**
 * @description  converts a pixel value into a rem value
 * @param {number} value
 * @returns {string}
 * ---
 * @example
 * rem(2) = '0.125rem'
*/

export const rem = value => `${value / 16}rem`;

Textblock.css

.Textblock {
  display: var(--display);
}

Textblock.js

import PropTypes from 'prop-types';
import { createElement as h } from 'react';
import { classNames, tokens } from '@moovelna/junction-utils';
import { typography } from '../foundation/foundation.js';
import foundationStyles from '../foundation/foundation.css';
import textblockStyles from './Textblock.css';

export const Textblock = ({
  children,
  inline,
  forwardRef,
  htmlTag,
  className,
  style,
  alignSelf,
  justifySelf,
  order,
  flex,
  gridArea,
  padding,
  kind,
  ...rest
}) => {
  const tag = (kind === 'h1')
    ? 'h1'
    : (kind === 'h2')
    ? 'h2'
    : (kind === 'h3')
    ? 'h3'
    : (kind === 'h4')
    ? 'h4'
    : htmlTag
    /* eslint-disable no-unneeded-ternary */
    ? htmlTag
    /* eslint-enable */
    : inline
    ? 'span'
    : 'p';
  return h(
    tag,
    {
      className: classNames(
        className,
        foundationStyles.Typography,
        textblockStyles.Textblock,
      ),
      style: {
        ...tokens(
          inline ? { display: 'inline' } : { display: 'block' },
          typography[kind],
        ),
        alignSelf,
        justifySelf,
        order,
        flex,
        gridArea,
        padding,
        ...style,
      },
      ref: forwardRef,
      ...rest,
    },
    children,
  );
};

Textblock.defaultProps = {
  kind: 'body',
};

Textblock.displayName = 'Primitive(Textblock)';

Textblock.propTypes = {
  alignSelf: PropTypes.string,
  justifySelf: PropTypes.string,
  order: PropTypes.string,
  flex: PropTypes.string,
  gridArea: PropTypes.string,
  padding: PropTypes.string,
  htmlTag: PropTypes.string,
  inline: PropTypes.bool,
  className: PropTypes.string,
  style: PropTypes.object,
  kind: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.arrayOf(PropTypes.node),
  ]),
};

tokens.js

/**
 * @module @moovelna/junction-utils~tokens
 */
/**
 * @param {...{}} objs - object containing camelCased style properties or css custom properties
 * @returns {<{'--prop': 'value'}>} containing prefixed css custom properties to be inlined.
 * @example Simple
 * <Textblock style={tokens({
*    lineHeight: 1.2,
*    fontSize: rem(47.78),
*  })} />
 * @example Conditional Example
 * <Textblock style={tokens(
 *  inline ? { display: 'inline' } : { display: 'block' },
 *  {
 *    lineHeight: 1.2,
 *    fontSize: rem(47.78),
 *  },
 * )} />
 */
export const tokens = (...objs) => objs
  .filter(Boolean)
  .map(obj => Object.entries(obj))
  .reduce((acc, cur) => acc.concat(cur), [])
  .reduce((acc, [key, value]) => ({ ...acc, [`--${key}`]: value }), {});

typography.js

/**
 * @module @moovelna/junction
 */
import { rem } from '@moovelna/junction-utils';

export const d1 = {
  lineHeight: 1.2,
  fontSize: rem(47.78),
};

export const d2 = {
  lineHeight: 1.2,
  fontSize: rem(39.81),
};

export const h1 = {
  lineHeight: 1.2,
  fontSize: rem(33.18),
};

export const h2 = {
  lineHeight: 1.2,
  fontSize: rem(27.65),
};

export const h3 = {
  lineHeight: 1.2,
  fontSize: rem(23.04),
};

export const h4 = {
  lineHeight: 1.2,
  fontSize: rem(19.20),
};

export const body = {
  lineHeight: 1.2,
  fontSize: rem(16),
};

export const label = {
  lineHeight: 1.2,
  fontSize: rem(13.33),
};

export const sub1 = {
  lineHeight: 1.2,
  fontSize: rem(11.11),
};

export const sub2 = {
  lineHeight: 1.2,
  fontSize: rem(9.26),
};

export const sub3 = {
  lineHeight: 1.2,
  fontSize: rem(7.72),
};