@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, { css } from "styled-components";
import { textAlign } from "../utils/rtl";
import defaultTheme from "../defaultTheme";
import { ELEMENT_OPTIONS, TYPE_OPTIONS, TOKENS, ALIGN } from "./consts";
import getSpacingToken from "../common/getSpacingToken";
import mediaQueries from "../utils/mediaQuery";
import { DEVICES } from "../utils/mediaQuery/consts";
export const getHeadingToken = (name, type) => ({
  theme
}) => {
  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
}) => /*#__PURE__*/React.createElement(Component, {
  className: className,
  "data-test": dataTest,
  "data-a11y-section": dataA11ySection,
  id: id
}, children)).withConfig({
  displayName: "Heading__StyledHeading",
  componentId: "sc-rrd5d-0"
})(["", ""], ({
  theme,
  inverted,
  viewports,
  type,
  align
}) => css(["font-family:", ";text-transform:", ";color:", ";margin:0;text-align:", ";font-size:", ";font-weight:", ";line-height:", ";margin-bottom:", ";", ""], theme.orbit.fontFamily, type === TYPE_OPTIONS.TITLE5 && "uppercase", inverted ? theme.orbit.colorHeadingInverted : theme.orbit.colorHeading, textAlign(align), getHeadingToken(TOKENS.sizeHeading, type), getHeadingToken(TOKENS.weightHeading, type), getHeadingToken(TOKENS.lineHeight, type), getSpacingToken, // temporary fix until we figure out how come `viewports` ended up being `undefined`
DEVICES.filter(viewport => viewports && viewports[viewport]).map(viewport => {
  const {
    type: value,
    spaceAfter,
    align: txtAlign
  } = viewports[viewport];
  return mediaQueries[viewport](css(["font-size:", ";text-align:", ";font-weight:", ";line-height:", ";margin-bottom:", ";"], getHeadingToken(TOKENS.sizeHeading, value), textAlign(txtAlign), getHeadingToken(TOKENS.weightHeading, value), getHeadingToken(TOKENS.lineHeight, value), getSpacingToken({
    spaceAfter,
    theme
  })));
}))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledHeading.defaultProps = {
  theme: defaultTheme
};

const Heading = ({
  children,
  type = TYPE_OPTIONS.TITLE1,
  align = ALIGN.START,
  as = ELEMENT_OPTIONS.DIV,
  dataTest,
  inverted = false,
  spaceAfter,
  dataA11ySection,
  id,
  mediumMobile,
  largeMobile,
  tablet,
  desktop,
  largeDesktop
}) => {
  const viewports = {
    mediumMobile,
    largeMobile,
    tablet,
    desktop,
    largeDesktop
  };
  return /*#__PURE__*/React.createElement(StyledHeading, {
    id: id,
    align: align,
    type: type,
    element: as,
    inverted: inverted,
    dataTest: dataTest,
    spaceAfter: spaceAfter,
    dataA11ySection: dataA11ySection,
    viewports: viewports
  }, children);
};

export default Heading;