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

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

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
    },
    [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
    }
  };

  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"
})(["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;