@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 defaultTheme from "../defaultTheme";
import { ELEMENT_OPTIONS, TYPE_OPTIONS, TOKENS } from "./consts";
import getSpacingToken from "../common/getSpacingToken";
export const getHeadingToken = name => ({
  theme,
  type
}) => {
  const tokens = {
    [TOKENS.weightHeading]: {
      [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontWeightHeadingDisplay,
      [TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.fontWeightHeadingDisplaySubtitle,
      [TYPE_OPTIONS.TITLE1]: theme.orbit.fontWeightHeadingTitle1,
      [TYPE_OPTIONS.TITLE2]: theme.orbit.fontWeightHeadingTitle2,
      [TYPE_OPTIONS.TITLE3]: theme.orbit.fontWeightHeadingTitle3,
      [TYPE_OPTIONS.TITLE4]: theme.orbit.fontWeightHeadingTitle4,
      [TYPE_OPTIONS.TITLE5]: theme.orbit.fontWeightHeadingTitle5
    },
    [TOKENS.sizeHeading]: {
      [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontSizeHeadingDisplay,
      [TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.fontSizeHeadingDisplaySubtitle,
      [TYPE_OPTIONS.TITLE1]: theme.orbit.fontSizeHeadingTitle1,
      [TYPE_OPTIONS.TITLE2]: theme.orbit.fontSizeHeadingTitle2,
      [TYPE_OPTIONS.TITLE3]: theme.orbit.fontSizeHeadingTitle3,
      [TYPE_OPTIONS.TITLE4]: theme.orbit.fontSizeHeadingTitle4,
      [TYPE_OPTIONS.TITLE5]: theme.orbit.fontSizeHeadingTitle5
    },
    [TOKENS.lineHeight]: {
      [TYPE_OPTIONS.DISPLAY]: theme.orbit.lineHeightHeadingDisplay,
      [TYPE_OPTIONS.DISPLAYSUBTITLE]: theme.orbit.lineHeightHeadingDisplaySubtitle,
      [TYPE_OPTIONS.TITLE1]: theme.orbit.lineHeightHeadingTitle1,
      [TYPE_OPTIONS.TITLE2]: theme.orbit.lineHeightHeadingTitle2,
      [TYPE_OPTIONS.TITLE3]: theme.orbit.lineHeightHeadingTitle3,
      [TYPE_OPTIONS.TITLE4]: theme.orbit.lineHeightHeadingTitle4,
      [TYPE_OPTIONS.TITLE5]: theme.orbit.lineHeightHeadingTitle5
    }
  };
  return tokens[name][type];
};
export const StyledHeading = styled(({
  element: Component,
  className,
  children,
  dataTest,
  dataA11ySection,
  id
}) => React.createElement(Component, {
  className: className,
  "data-test": dataTest,
  "data-a11y-section": dataA11ySection,
  id: id
}, children)).withConfig({
  displayName: "Heading__StyledHeading",
  componentId: "sc-1b8cso5-0"
})(["font-family:", ";font-size:", ";font-weight:", ";color:", ";line-height:", ";text-transform:", ";margin:0;margin-bottom:", ";"], ({
  theme
}) => theme.orbit.fontFamily, getHeadingToken(TOKENS.sizeHeading), getHeadingToken(TOKENS.weightHeading), ({
  theme,
  inverted
}) => inverted ? theme.orbit.colorHeadingInverted : theme.orbit.colorHeading, getHeadingToken(TOKENS.lineHeight), ({
  type
}) => type === TYPE_OPTIONS.TITLE5 && "uppercase", getSpacingToken);
StyledHeading.defaultProps = {
  theme: defaultTheme
};

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

export default Heading;