@laerdal/life-react-components 1.4.1-dev.7 → 1.4.1-dev.9

package/dist/umd/styles/typography.js

@@ -1,650 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", ".", "../types"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("."), require("../types"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global._, global.types);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _, _types) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.HeadlineXXSStyling = exports.HeadlineXSStyling = exports.HeadlineSStyling = exports.HeadlineMStyling = exports.HeadlineLStyling = exports.HeadlineXLStyling = exports.ParagraphXSStyling = exports.ParagraphSStyling = exports.ParagraphMStyling = exports.ParagraphLStyling = exports.ParagraphXlStyling = exports.ComponentXXSStyling = exports.ComponentXSStyling = exports.ComponentSStyling = exports.ComponentMStyling = exports.ComponentLStyling = exports.ComponentXLStyling = exports.ComponentResponsive = exports.ComponentXXS = exports.ComponentXS = exports.ComponentS = exports.ComponentM = exports.ComponentL = exports.ComponentXL = exports.ComponentTextStyle = exports.ParagraphXS = exports.ParagraphS = exports.ParagraphM = exports.ParagraphL = exports.ParagraphXL = exports.ParagraphTextStyle = exports.HeadlineXXS = exports.HeadlineXS = exports.HeadlineS = exports.HeadlineM = exports.HeadlineL = exports.HeadlineXL = exports.TYPOGRAPHY = undefined;
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var _react2 = _interopRequireDefault(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  const TYPOGRAPHY = {
-    fontFamily: 'Lato, sans-serif'
-  };
-  const TypographyBase = (0, _styledComponents2.default)('div')(({
-    $color,
-    lineHeight,
-    $fontSize,
-    $fontWeight,
-    $fontStyle,
-    textTransform,
-    textDecorationLine
-  }) => ({
-    fontFamily: TYPOGRAPHY.fontFamily,
-    fontSize: $fontSize,
-    fontWeight: $fontWeight,
-    lineHeight: lineHeight + 'px',
-    textTransform: textTransform ? textTransform : 'none',
-    textDecorationLine: textDecorationLine ? textDecorationLine : 'none',
-    fontStyle: $fontStyle ? $fontStyle : 'normal',
-    color: $color ? $color : _.COLORS.black
-  }));
-
-  const HeadlineBaseStyling = (fontSize, lineHeight, color) => {
-    return _styledComponents.css`
-    font-family: ${TYPOGRAPHY.fontFamily};
-    font-size: ${fontSize};
-    line-height: ${lineHeight};
-    font-weight: 700;
-    color: ${color};
-  `;
-  };
-
-  const HeadlineBase = (0, _styledComponents2.default)(TypographyBase)(({
-    $color,
-    lineHeight,
-    fontSize
-  }) => ({
-    fontSize: fontSize,
-    fontWeight: 700,
-    lineHeight: lineHeight,
-    color: $color
-  }));
-
-  const HeadlineXLStyling = color => HeadlineBaseStyling('48px', '64px', color);
-
-  const HeadlineXL = (0, _styledComponents2.default)(HeadlineBase)(({
-    $color
-  }) => ({
-    fontSize: '48px',
-    lineHeight: '64px',
-    color: $color
-  }));
-
-  const HeadlineLStyling = color => HeadlineBaseStyling('40px', '52px', color);
-
-  const HeadlineL = (0, _styledComponents2.default)(HeadlineBase)(({
-    $color
-  }) => ({
-    fontSize: '40px',
-    lineHeight: '52px',
-    color: $color
-  }));
-
-  const HeadlineMStyling = color => HeadlineBaseStyling('32px', '40px', color);
-
-  const HeadlineM = (0, _styledComponents2.default)(HeadlineBase)(({
-    $color
-  }) => ({
-    fontSize: '32px',
-    lineHeight: '40px',
-    color: $color
-  }));
-
-  const HeadlineSStyling = color => HeadlineBaseStyling('28px', '36px', color);
-
-  const HeadlineS = (0, _styledComponents2.default)(HeadlineBase)(({
-    $color
-  }) => ({
-    fontSize: '28px',
-    lineHeight: '36px',
-    color: $color
-  }));
-
-  const HeadlineXSStyling = color => HeadlineBaseStyling('24px', '32px', color);
-
-  const HeadlineXS = (0, _styledComponents2.default)(HeadlineBase)(({
-    $color
-  }) => ({
-    fontSize: '24px',
-    lineHeight: '32px',
-    color: $color
-  }));
-
-  const HeadlineXXSStyling = color => HeadlineBaseStyling('20px', '24px', color);
-
-  const HeadlineXXS = (0, _styledComponents2.default)(HeadlineBase)(({
-    $color
-  }) => ({
-    fontSize: '20px',
-    lineHeight: '24px',
-    color: $color
-  }));
-  const ParagraphStyling = _styledComponents.css`
-  :lang(ja-jp) > h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 30em;
-  }
-  :lang(ko-kr) > h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 30em;
-  }
-  :lang(zh-CN) > h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 30em;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  span {
-    max-width: 34em;
-  }
-`;
-  const ParagraphBase = (0, _styledComponents2.default)(TypographyBase)`
-  p {
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-  p:not(:only-of-type) {
-    margin-bottom: ${props => props.marginBetweenParagraphs || '0'};
-  }
-  ${ParagraphStyling}
-`;
-  var ParagraphTextStyle;
-
-  (function (ParagraphTextStyle) {
-    ParagraphTextStyle[ParagraphTextStyle["Regular"] = 1] = "Regular";
-    ParagraphTextStyle[ParagraphTextStyle["Bold"] = 2] = "Bold";
-    ParagraphTextStyle[ParagraphTextStyle["Italic"] = 3] = "Italic";
-    ParagraphTextStyle[ParagraphTextStyle["Underline"] = 4] = "Underline";
-  })(ParagraphTextStyle || (exports.ParagraphTextStyle = ParagraphTextStyle = {}));
-
-  const paragraphFontWeight = textStyle => {
-    let fontWeight = 400;
-
-    if (textStyle === ParagraphTextStyle.Bold) {
-      fontWeight = 700;
-    }
-
-    return fontWeight;
-  };
-
-  const paragraphFontStyle = textStyle => {
-    let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';
-    return fontStyle;
-  };
-
-  const paragraphTextDecorationLine = textStyle => {
-    let textDecoration = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';
-    return textDecoration;
-  };
-
-  const ParagraphBaseStyling = (fontSize, lineHeight, textStyle, color) => {
-    return _styledComponents.css`
-    font-family: ${TYPOGRAPHY.fontFamily};
-    font-size: ${fontSize};
-    font-weight: ${paragraphFontWeight(textStyle)};
-    line-height: ${lineHeight};
-    font-style: ${paragraphFontStyle(textStyle)};
-    color: ${color};
-  `;
-  };
-
-  const ParagraphXlStyling = (textStyle, color) => ParagraphBaseStyling('24px', '36px', textStyle, color);
-
-  const ParagraphXL = ({
-    color,
-    textStyle,
-    children
-  }) => {
-    let fontWeight = paragraphFontWeight(textStyle);
-    let fontStyle = paragraphFontStyle(textStyle);
-    let textDecorationLine = paragraphTextDecorationLine(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
-      $color: color,
-      lineHeight: 36,
-      $fontSize: 24,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textDecorationLine: textDecorationLine,
-      marginBetweenParagraphs: "18px"
-    }, children);
-  };
-
-  ParagraphXL.propTypes = {
-    color: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ParagraphLStyling = (textStyle, color) => ParagraphBaseStyling('20px', '32px', textStyle, color);
-
-  const ParagraphL = ({
-    color,
-    textStyle,
-    children
-  }) => {
-    let fontWeight = paragraphFontWeight(textStyle);
-    let fontStyle = paragraphFontStyle(textStyle);
-    let textDecorationLine = paragraphTextDecorationLine(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
-      $color: color,
-      lineHeight: 32,
-      $fontSize: 20,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textDecorationLine: textDecorationLine,
-      marginBetweenParagraphs: "16px"
-    }, children);
-  };
-
-  ParagraphL.propTypes = {
-    color: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ParagraphMStyling = (textStyle, color) => ParagraphBaseStyling('18px', '28px', textStyle, color);
-
-  const ParagraphM = ({
-    color,
-    textStyle,
-    children
-  }) => {
-    let fontWeight = paragraphFontWeight(textStyle);
-    let fontStyle = paragraphFontStyle(textStyle);
-    let textDecorationLine = paragraphTextDecorationLine(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
-      $color: color,
-      lineHeight: 28,
-      $fontSize: 18,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textDecorationLine: textDecorationLine,
-      marginBetweenParagraphs: "14px"
-    }, children);
-  };
-
-  ParagraphM.propTypes = {
-    color: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ParagraphSStyling = (textStyle, color) => ParagraphBaseStyling('16px', '24px', textStyle, color);
-
-  const ParagraphS = ({
-    color,
-    textStyle,
-    children
-  }) => {
-    let fontWeight = paragraphFontWeight(textStyle);
-    let fontStyle = paragraphFontStyle(textStyle);
-    let textDecorationLine = paragraphTextDecorationLine(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
-      $color: color,
-      lineHeight: 24,
-      $fontSize: 16,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textDecorationLine: textDecorationLine,
-      marginBetweenParagraphs: "12px"
-    }, children);
-  };
-
-  ParagraphS.propTypes = {
-    color: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ParagraphXSStyling = (textStyle, color) => ParagraphBaseStyling('14px', '20px', textStyle, color);
-
-  const ParagraphXS = ({
-    color,
-    textStyle,
-    children
-  }) => {
-    let fontWeight = paragraphFontWeight(textStyle);
-    let fontStyle = paragraphFontStyle(textStyle);
-    let textDecorationLine = paragraphTextDecorationLine(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(ParagraphBase, {
-      $color: color,
-      lineHeight: 20,
-      $fontSize: 14,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textDecorationLine: textDecorationLine,
-      marginBetweenParagraphs: "10px"
-    }, children);
-  };
-
-  ParagraphXS.propTypes = {
-    color: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-  var ComponentTextStyle;
-
-  (function (ComponentTextStyle) {
-    ComponentTextStyle[ComponentTextStyle["Regular"] = 1] = "Regular";
-    ComponentTextStyle[ComponentTextStyle["Bold"] = 2] = "Bold";
-    ComponentTextStyle[ComponentTextStyle["Italic"] = 3] = "Italic";
-    ComponentTextStyle[ComponentTextStyle["UppercaseBold"] = 4] = "UppercaseBold";
-  })(ComponentTextStyle || (exports.ComponentTextStyle = ComponentTextStyle = {}));
-
-  const componentFontWeight = textStyle => {
-    let fontWeight = 400;
-
-    if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {
-      fontWeight = 700;
-    }
-
-    return fontWeight;
-  };
-
-  const componentFontStyle = textStyle => {
-    let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';
-    return fontStyle;
-  };
-
-  const componentTextTransformation = textStyle => {
-    let fontStyle = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';
-    return fontStyle;
-  };
-
-  const ComponentStyling = (fontSize, lineHeight, textStyle, color) => {
-    return _styledComponents.css`
-    font-family: ${TYPOGRAPHY.fontFamily};
-    font-size: ${fontSize};
-    font-weight: ${componentFontWeight(textStyle)};
-    line-height: ${lineHeight};
-    font-style: ${componentFontStyle(textStyle)};
-    ${color === null ? '' : `color: ${color || _.COLORS.black};`}
-  `;
-  };
-
-  const ComponentXLStyling = (textStyle, color) => ComponentStyling('24px', '28px', textStyle, color);
-
-  const ComponentXL = ({
-    color,
-    textStyle,
-    children,
-    className
-  }) => {
-    let fontWeight = componentFontWeight(textStyle);
-    let fontStyle = componentFontStyle(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(TypographyBase, {
-      className: className,
-      $color: color,
-      lineHeight: 28,
-      $fontSize: 24,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle
-    }, children);
-  };
-
-  ComponentXL.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ComponentLStyling = (textStyle, color) => ComponentStyling('20px', '24px', textStyle, color);
-
-  const ComponentL = ({
-    color,
-    textStyle,
-    children,
-    className
-  }) => {
-    let fontWeight = componentFontWeight(textStyle);
-    let fontStyle = componentFontStyle(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(TypographyBase, {
-      className: className,
-      $color: color,
-      lineHeight: 24,
-      $fontSize: 20,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle
-    }, children);
-  };
-
-  ComponentL.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ComponentMStyling = (textStyle, color) => ComponentStyling('18px', '24px', textStyle, color);
-
-  const ComponentM = ({
-    color,
-    textStyle,
-    children,
-    className
-  }) => {
-    let fontWeight = componentFontWeight(textStyle);
-    let fontStyle = componentFontStyle(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(TypographyBase, {
-      className: className,
-      $color: color,
-      lineHeight: 24,
-      $fontSize: 18,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle
-    }, children);
-  };
-
-  ComponentM.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ComponentSStyling = (textStyle, color) => ComponentStyling('16px', '20px', textStyle, color);
-
-  const ComponentS = ({
-    color,
-    textStyle,
-    children,
-    className
-  }) => {
-    let fontWeight = componentFontWeight(textStyle);
-    let fontStyle = componentFontStyle(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(TypographyBase, {
-      className: className,
-      $color: color,
-      lineHeight: 20,
-      $fontSize: 16,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle
-    }, children);
-  };
-
-  ComponentS.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ComponentXSStyling = (textStyle, color) => ComponentStyling('14px', '16px', textStyle, color);
-
-  const ComponentXS = ({
-    color,
-    textStyle,
-    children,
-    className
-  }) => {
-    let fontWeight = componentFontWeight(textStyle);
-    let fontStyle = componentFontStyle(textStyle);
-    let textTransform = componentTextTransformation(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(TypographyBase, {
-      className: className,
-      $color: color,
-      lineHeight: 16,
-      $fontSize: 14,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textTransform: textTransform
-    }, children);
-  };
-
-  ComponentXS.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ComponentXXSStyling = (textStyle, color) => ComponentStyling('12px', '16px', textStyle, color);
-
-  const ComponentXXS = ({
-    color,
-    textStyle,
-    children,
-    className
-  }) => {
-    let fontWeight = componentFontWeight(textStyle);
-    let fontStyle = componentFontStyle(textStyle);
-    let textTransform = componentTextTransformation(textStyle);
-    return /*#__PURE__*/_react2.default.createElement(TypographyBase, {
-      className: className,
-      $color: color,
-      lineHeight: 16,
-      $fontSize: 12,
-      $fontWeight: fontWeight,
-      $fontStyle: fontStyle,
-      textTransform: textTransform
-    }, children);
-  };
-
-  ComponentXXS.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-
-  const ComponentResponsive = ({
-    color,
-    textStyle,
-    children,
-    size,
-    width
-  }) => {
-    let fontsize = size;
-
-    if (!size) {
-      if (width < 768) {
-        fontsize = _types.Size.Small;
-      } else if (width < 992) {
-        fontsize = _types.Size.Medium;
-      } else {
-        fontsize = _types.Size.Large;
-      }
-    }
-
-    switch (fontsize) {
-      case _types.Size.XXSmall:
-        return /*#__PURE__*/_react2.default.createElement(ComponentXXS, {
-          color: color,
-          textStyle: textStyle,
-          children: children
-        });
-
-      case _types.Size.XSmall:
-        return /*#__PURE__*/_react2.default.createElement(ComponentXS, {
-          color: color,
-          textStyle: textStyle,
-          children: children
-        });
-
-      case _types.Size.Small:
-        return /*#__PURE__*/_react2.default.createElement(ComponentS, {
-          color: color,
-          textStyle: textStyle,
-          children: children
-        });
-
-      case _types.Size.Medium:
-        return /*#__PURE__*/_react2.default.createElement(ComponentM, {
-          color: color,
-          textStyle: textStyle,
-          children: children
-        });
-
-      case _types.Size.Large:
-      default:
-        return /*#__PURE__*/_react2.default.createElement(ComponentL, {
-          color: color,
-          textStyle: textStyle,
-          children: children
-        });
-    }
-  };
-
-  ComponentResponsive.propTypes = {
-    color: _propTypes2.default.string,
-    className: _propTypes2.default.string,
-    textStyle: _propTypes2.default.oneOf([1, 2, 3, 4])
-  };
-  exports.TYPOGRAPHY = TYPOGRAPHY;
-  exports.HeadlineXL = HeadlineXL;
-  exports.HeadlineL = HeadlineL;
-  exports.HeadlineM = HeadlineM;
-  exports.HeadlineS = HeadlineS;
-  exports.HeadlineXS = HeadlineXS;
-  exports.HeadlineXXS = HeadlineXXS;
-  exports.ParagraphTextStyle = ParagraphTextStyle;
-  exports.ParagraphXL = ParagraphXL;
-  exports.ParagraphL = ParagraphL;
-  exports.ParagraphM = ParagraphM;
-  exports.ParagraphS = ParagraphS;
-  exports.ParagraphXS = ParagraphXS;
-  exports.ComponentTextStyle = ComponentTextStyle;
-  exports.ComponentXL = ComponentXL;
-  exports.ComponentL = ComponentL;
-  exports.ComponentM = ComponentM;
-  exports.ComponentS = ComponentS;
-  exports.ComponentXS = ComponentXS;
-  exports.ComponentXXS = ComponentXXS;
-  exports.ComponentResponsive = ComponentResponsive;
-  exports.ComponentXLStyling = ComponentXLStyling;
-  exports.ComponentLStyling = ComponentLStyling;
-  exports.ComponentMStyling = ComponentMStyling;
-  exports.ComponentSStyling = ComponentSStyling;
-  exports.ComponentXSStyling = ComponentXSStyling;
-  exports.ComponentXXSStyling = ComponentXXSStyling;
-  exports.ParagraphXlStyling = ParagraphXlStyling;
-  exports.ParagraphLStyling = ParagraphLStyling;
-  exports.ParagraphMStyling = ParagraphMStyling;
-  exports.ParagraphSStyling = ParagraphSStyling;
-  exports.ParagraphXSStyling = ParagraphXSStyling;
-  exports.HeadlineXLStyling = HeadlineXLStyling;
-  exports.HeadlineLStyling = HeadlineLStyling;
-  exports.HeadlineMStyling = HeadlineMStyling;
-  exports.HeadlineSStyling = HeadlineSStyling;
-  exports.HeadlineXSStyling = HeadlineXSStyling;
-  exports.HeadlineXXSStyling = HeadlineXXSStyling;
-});
-//# sourceMappingURL=typography.js.map