@kiwicom/orbit-components/es/Heading/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled from "styled-components";
import defaultTokens from "../defaultTokens";
import { ELEMENT_OPTIONS, TYPE_OPTIONS, TOKENS } from "./consts";
import getSpacingToken from "../common/getSpacingToken";

const getToken = name => ({
  theme,
  type
}) => {
  const tokens = {
    [TOKENS.weightHeading]: {
      [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontWeightHeadingDisplay,
      [TYPE_OPTIONS.TITLE1]: theme.orbit.fontWeightHeadingTitle1,
      [TYPE_OPTIONS.TITLE2]: theme.orbit.fontWeightHeadingTitle2,
      [TYPE_OPTIONS.TITLE3]: theme.orbit.fontWeightHeadingTitle3,
      [TYPE_OPTIONS.TITLE4]: theme.orbit.fontWeightMedium // TODO: create token fontWeightHeadingTitle4

    },
    [TOKENS.sizeHeading]: {
      [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontSizeHeadingDisplay,
      [TYPE_OPTIONS.TITLE1]: theme.orbit.fontSizeHeadingTitle1,
      [TYPE_OPTIONS.TITLE2]: theme.orbit.fontSizeHeadingTitle2,
      [TYPE_OPTIONS.TITLE3]: theme.orbit.fontSizeHeadingTitle3,
      [TYPE_OPTIONS.TITLE4]: theme.orbit.fontSizeTextNormal // TODO: create token fontSizeHeadingTitle4

    }
  };
  return tokens[name][type];
};

export const StyledHeading = styled(({
  element: Component,
  className,
  children,
  dataTest
}) => React.createElement(Component, {
  className: className,
  "data-test": dataTest
}, children)).withConfig({
  displayName: "Heading__StyledHeading",
  componentId: "sc-1b8cso5-0"
})(["font-family:", ";font-size:", ";font-weight:", ";color:", ";line-height:", ";margin:0;margin-bottom:", ";"], ({
  theme
}) => theme.orbit.fontFamily, getToken(TOKENS.sizeHeading), getToken(TOKENS.weightHeading), ({
  theme,
  inverted
}) => inverted ? theme.orbit.colorHeadingInverted : theme.orbit.colorHeading, ({
  theme
}) => theme.orbit.lineHeightHeading, getSpacingToken);
StyledHeading.defaultProps = {
  theme: defaultTokens
};

const Heading = ({
  children,
  type = TYPE_OPTIONS.TITLE1,
  element = ELEMENT_OPTIONS.H1,
  dataTest,
  inverted = false,
  spaceAfter
}) => React.createElement(StyledHeading, {
  type: type,
  element: element,
  inverted: inverted,
  dataTest: dataTest,
  spaceAfter: spaceAfter
}, children);

export default Heading;