@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/esm/Banners/Banner.js

@@ -1,264 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
-import { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';
-import { IconButton } from '../Button';
-import { getButtonStyle } from './styles';
-import { ComponentMStyling, ComponentResponsive } from '../styles/typography';
-import { HyperLink } from '../HyperLink';
-/**
- * Styles for <Banner />
- */
-
-const BannerContainer = styled.div`
-  background: ${props => props.type ? props.type : COLORS.correct_100};
-  min-height: 48px;
-  display: flex;
-  color: ${COLORS.black};
-  margin-top: ${props => props.bottom ? 'auto' : '0'};
-
-  button:last-child {
-    line-height: 0;
-    margin: 0 0 0 8px;
-    ${BREAKPOINTS.MEDIUM} {
-      margin: 0 0 0 16px;
-    }
-    ${BREAKPOINTS.LARGE} {
-      margin: 0 0 0 32px;
-    }
-    &.small {
-      margin: 0 0 0 8px;
-    }
-    &.medium {
-      margin: 0 0 0 16px;
-    }
-    &.large {
-      margin: 0 0 0 32px;
-    }
-  }
-
-  a {
-    color: ${props => props.link} !important;
-  }
-`;
-const BannerCenter = styled.div`
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color)}
-  
-  display: flex;
-  width: 100%;
-  margin: 0 0 0 16px;
-  ${BREAKPOINTS.MEDIUM} {
-    margin: 0 16px 0 32px;
-  }
-  ${BREAKPOINTS.LARGE} {
-    margin: 0 40px 0 56px;
-  }
-  &.small {
-    margin: 0 0 0 16px;
-  }
-  &.medium {
-    margin: 0 16px 0 32px;
-  }
-  &.large {
-    margin: 0 40px 0 56px;
-  }
-
-  > svg {
-    flex-shrink: 0;
-    margin: 12px 0;
-  }
-`;
-const ButtonWrapper = styled.div`
-  margin: 0 0 0 auto;
-`;
-const ButtonContainer = styled.div`
-  display: contents;
-  ${props => props.type ? getButtonStyle(props.type) : null};
-`;
-const BannerContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: 12px 0;
-  &:not(:first-child) {
-    margin-left: 8px;
-  }
-`;
-
-const Banner = ({
-  size,
-  type,
-  children,
-  bottom,
-  testId,
-  linkText,
-  link,
-  onClose,
-  icon,
-  noIcon
-}) => {
-  const [width, setWidth] = React.useState(window.innerWidth);
-  React.useEffect(() => {
-    function handleResize() {
-      setWidth(window.innerWidth);
-    }
-
-    window.addEventListener('resize', handleResize);
-  });
-  const formatTypeToLowerCase = type?.toLowerCase();
-
-  switch (formatTypeToLowerCase) {
-    case 'warning':
-      return /*#__PURE__*/React.createElement(BannerContainer, {
-        "data-testid": testId,
-        type: COLORS.warning_100,
-        link: COLORS.warning_700,
-        hover: COLORS.warning_20,
-        bottom: bottom
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.warning_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
-        color: COLORS.warning_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.warning_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        type: formatTypeToLowerCase
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.warning_500,
-        size: "24px"
-      }))))));
-
-    case 'critical':
-      return /*#__PURE__*/React.createElement(BannerContainer, {
-        "data-testid": testId,
-        type: COLORS.critical_100,
-        link: COLORS.critical_700,
-        hover: COLORS.critical_20,
-        bottom: bottom,
-        className: size
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.critical_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(TechnicalWarning, {
-        color: COLORS.critical_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.critical_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        type: formatTypeToLowerCase
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.critical_500,
-        size: "24px"
-      }))))));
-
-    case 'positive':
-      return /*#__PURE__*/React.createElement(BannerContainer, {
-        "data-testid": testId,
-        type: COLORS.correct_100,
-        link: COLORS.correct_700,
-        hover: COLORS.correct_20,
-        bottom: bottom,
-        className: size
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.correct_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
-        color: COLORS.correct_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.correct_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        type: formatTypeToLowerCase
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.correct_500,
-        size: "24px"
-      }))))));
-
-    default:
-      return /*#__PURE__*/React.createElement(BannerContainer, {
-        "data-testid": testId,
-        type: COLORS.primary_100,
-        link: COLORS.primary_700,
-        hover: COLORS.primary_20,
-        bottom: bottom,
-        className: size
-      }, /*#__PURE__*/React.createElement(BannerCenter, {
-        color: COLORS.primary_700,
-        className: size
-      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
-        color: COLORS.primary_700,
-        size: "24px"
-      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(ComponentResponsive, {
-        size: size,
-        width: width,
-        color: COLORS.primary_700
-      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(HyperLink, {
-        id: `${Math.floor(Math.random() * 999999999999)}_BannerLink`,
-        href: link,
-        variant: "default"
-      }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        type: "neutral"
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        variant: "secondary",
-        shape: "circular",
-        useTransparentBackground: true,
-        tabbedHereBackgroundColor: COLORS.white,
-        action: () => onClose()
-      }, /*#__PURE__*/React.createElement(Close, {
-        color: COLORS.primary_500,
-        size: "24px"
-      }))))));
-  }
-};
-
-Banner.propTypes = {
-  type: _pt.string,
-  link: _pt.string,
-  linkText: _pt.string,
-  hover: _pt.string,
-  bottom: _pt.bool,
-  testId: _pt.string,
-  icon: _pt.node,
-  onClose: _pt.func,
-  noIcon: _pt.bool
-};
-export default Banner;
-//# sourceMappingURL=Banner.js.map

package/dist/esm/Banners/Banner.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","children","testId","linkText","onClose","icon","noIcon","width","setWidth","useState","window","innerWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","white","warning_500","critical_100","critical_700","critical_20","critical_500","correct_700","correct_20","correct_500","primary_100","primary_700","primary_20","primary_500","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\r\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\r\nimport {IconButton} from '../Button';\r\nimport {getButtonStyle} from './styles';\r\nimport {Size} from '../types';\r\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\r\nimport {HyperLink} from '../HyperLink';\r\n\r\n/**\r\n * Styles for <Banner />\r\n */\r\nconst BannerContainer = styled.div<BannerProps>`\r\n  background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\r\n  min-height: 48px;\r\n  display: flex;\r\n  color: ${COLORS.black};\r\n  margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\r\n\r\n  button:last-child {\r\n    line-height: 0;\r\n    margin: 0 0 0 8px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    ${BREAKPOINTS.LARGE} {\r\n      margin: 0 0 0 32px;\r\n    }\r\n    &.small {\r\n      margin: 0 0 0 8px;\r\n    }\r\n    &.medium {\r\n      margin: 0 0 0 16px;\r\n    }\r\n    &.large {\r\n      margin: 0 0 0 32px;\r\n    }\r\n  }\r\n\r\n  a {\r\n    color: ${(props: BannerProps) => props.link} !important;\r\n  }\r\n`;\r\n\r\nconst BannerCenter = styled.div`\r\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\r\n  \r\n  display: flex;\r\n  width: 100%;\r\n  margin: 0 0 0 16px;\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin: 0 16px 0 32px;\r\n  }\r\n  ${BREAKPOINTS.LARGE} {\r\n    margin: 0 40px 0 56px;\r\n  }\r\n  &.small {\r\n    margin: 0 0 0 16px;\r\n  }\r\n  &.medium {\r\n    margin: 0 16px 0 32px;\r\n  }\r\n  &.large {\r\n    margin: 0 40px 0 56px;\r\n  }\r\n\r\n  > svg {\r\n    flex-shrink: 0;\r\n    margin: 12px 0;\r\n  }\r\n`;\r\n\r\nconst ButtonWrapper = styled.div`\r\n  margin: 0 0 0 auto;\r\n`;\r\n\r\nconst ButtonContainer = styled.div<{ type?: string }>`\r\n  display: contents;\r\n  ${(props) => (props.type ? getButtonStyle(props.type) : null)};\r\n`;\r\n\r\nconst BannerContentWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin: 12px 0;\r\n  &:not(:first-child) {\r\n    margin-left: 8px;\r\n  }\r\n`;\r\n\r\ntype BannerProps = {\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  type?: string;\r\n  link?: string;\r\n  linkText?: string;\r\n  hover?: string;\r\n  bottom?: boolean;\r\n  testId?: string;\r\n  icon?: React.ReactNode;\r\n  onClose?: () => void;\r\n  noIcon?: boolean;\r\n};\r\n\r\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\r\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\r\n  React.useEffect(() => {\r\n    function handleResize() {\r\n      setWidth(window.innerWidth);\r\n    }\r\n    window.addEventListener('resize', handleResize);\r\n  });\r\n\r\n  const formatTypeToLowerCase = type?.toLowerCase();\r\n  switch (formatTypeToLowerCase) {\r\n    case 'warning':\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\r\n          <BannerCenter color={COLORS.warning_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type={formatTypeToLowerCase}>\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.warning_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n    case 'critical':\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\r\n          <BannerCenter color={COLORS.critical_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type={formatTypeToLowerCase}>\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.critical_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n    case 'positive':\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\r\n          <BannerCenter color={COLORS.correct_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type={formatTypeToLowerCase}>\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.correct_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n    default:\r\n      return (\r\n        <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\r\n          <BannerCenter color={COLORS.primary_700} className={size}>\r\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\r\n            <BannerContentWrapper>\r\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\r\n                {children}&nbsp;&nbsp;\r\n                {link && linkText && (\r\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\r\n                    {linkText}\r\n                  </HyperLink>\r\n                )}\r\n              </ComponentResponsive>\r\n            </BannerContentWrapper>\r\n            {onClose && (\r\n              <ButtonWrapper>\r\n                <ButtonContainer type=\"neutral\">\r\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\r\n                    <Close color={COLORS.primary_500} size=\"24px\" />\r\n                  </IconButton>\r\n                </ButtonContainer>\r\n              </ButtonWrapper>\r\n            )}\r\n          </BannerCenter>\r\n        </BannerContainer>\r\n      );\r\n  }\r\n};\r\n\r\nexport default Banner;\r\n"],"file":"Banner.js"}

package/dist/esm/Banners/OverviewBanner.js

@@ -1,71 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../styles';
-import { PageWidth } from '../Layouts';
-import { HeadlineXSStyling } from '../styles/typography';
-const BannersWrapper = styled.div`
-  background-color: ${COLORS.primary_20};
-`;
-const BannerContent = styled(PageWidth)`
-  background-color: ${COLORS.primary_20};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  ${BREAKPOINTS.MEDIUM} {
-    flex-direction: row;
-    padding: 48px 12px;
-  }
-
-  & > *:first-child {
-    padding-top: 12px;
-    width: 320px;
-    height: 180px;
-    ${BREAKPOINTS.MEDIUM} {
-      padding-top: 0;
-      margin-right: 20px;
-      width: 384px;
-      height: 216px;
-    }
-  }
-  & h2 {
-    ${HeadlineXSStyling(COLORS.black)}
-    margin: 16px 0 24px 0;
-  }
-  & p {
-    margin: 0;
-    padding: 0 0 28px 0;
-    max-width: 310px;
-  }
-  & div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    margin-bottom: 18px;
-    ${BREAKPOINTS.MEDIUM} {
-      margin-left: 20px;
-      align-items: start;
-      justify-content: start;
-      width: 384px;
-    }
-  }
-`;
-
-const OverviewBanner = ({
-  children,
-  testId
-}) => {
-  return /*#__PURE__*/React.createElement(BannersWrapper, null, /*#__PURE__*/React.createElement(BannerContent, {
-    "data-testid": testId
-  }, children));
-};
-
-OverviewBanner.propTypes = {
-  children: _pt.any.isRequired,
-  testId: _pt.string
-};
-export default OverviewBanner;
-//# sourceMappingURL=OverviewBanner.js.map

package/dist/esm/Banners/OverviewBanner.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","PageWidth","HeadlineXSStyling","BannersWrapper","div","primary_20","BannerContent","MEDIUM","black","OverviewBanner","children","testId"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,WAAR,EAAqBC,MAArB,QAAkC,WAAlC;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AAEA,MAAMC,cAAc,GAAGL,MAAM,CAACM,GAAI;AAClC,sBAAsBJ,MAAM,CAACK,UAAW;AACxC,CAFA;AAIA,MAAMC,aAAa,GAAGR,MAAM,CAACG,SAAD,CAAY;AACxC,sBAAsBD,MAAM,CAACK,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA,IAAIN,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMR,WAAW,CAACQ,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAML,iBAAiB,CAACF,MAAM,CAACQ,KAAR,CAAe;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMT,WAAW,CAACQ,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,CA7CA;;AAiDA,MAAME,cAAc,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD,KAAiC;AACtD,sBACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,mBAAaA;AAA5B,KAAqCD,QAArC,CADF,CADF;AAKD,CAND;;;AAFeA,EAAAA,Q;AAAeC,EAAAA,M;;AAU9B,eAAeF,cAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {BREAKPOINTS, COLORS} from '../styles';\r\nimport {PageWidth} from '../Layouts';\r\nimport {HeadlineXSStyling} from '../styles/typography';\r\n\r\nconst BannersWrapper = styled.div`\r\n  background-color: ${COLORS.primary_20};\r\n`;\r\n\r\nconst BannerContent = styled(PageWidth)`\r\n  background-color: ${COLORS.primary_20};\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    flex-direction: row;\r\n    padding: 48px 12px;\r\n  }\r\n\r\n  & > *:first-child {\r\n    padding-top: 12px;\r\n    width: 320px;\r\n    height: 180px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      padding-top: 0;\r\n      margin-right: 20px;\r\n      width: 384px;\r\n      height: 216px;\r\n    }\r\n  }\r\n  & h2 {\r\n    ${HeadlineXSStyling(COLORS.black)}\r\n    margin: 16px 0 24px 0;\r\n  }\r\n  & p {\r\n    margin: 0;\r\n    padding: 0 0 28px 0;\r\n    max-width: 310px;\r\n  }\r\n  & div {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-direction: column;\r\n    margin-bottom: 18px;\r\n    ${BREAKPOINTS.MEDIUM} {\r\n      margin-left: 20px;\r\n      align-items: start;\r\n      justify-content: start;\r\n      width: 384px;\r\n    }\r\n  }\r\n`;\r\n\r\ntype Props = { children: any; testId?: string };\r\n\r\nconst OverviewBanner = ({ children, testId }: Props) => {\r\n  return (\r\n    <BannersWrapper>\r\n      <BannerContent data-testid={testId}>{children}</BannerContent>\r\n    </BannersWrapper>\r\n  );\r\n};\r\n\r\nexport default OverviewBanner;\r\n"],"file":"OverviewBanner.js"}

package/dist/esm/Banners/__tests__/Banner.test.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Banner } from '../index';
-import 'jest-styled-components';
-import { COLORS } from '../../styles';
-describe('<Banner />', () => {
-  it('Renders warning banner', async () => {
-    const {
-      queryByText,
-      getByTestId
-    } = render( /*#__PURE__*/React.createElement(Banner, {
-      type: "warning",
-      testId: "TestBanner"
-    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
-    expect(queryByText('TestHeader')).toBeDefined();
-    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.warning_100);
-  });
-  it('Renders critial banner', async () => {
-    const {
-      queryByText,
-      getByTestId
-    } = render( /*#__PURE__*/React.createElement(Banner, {
-      type: "critical",
-      testId: "TestBanner"
-    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
-    expect(queryByText('TestHeader')).toBeDefined();
-    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.critical_100);
-  });
-  it('Renders positive banner', async () => {
-    const {
-      queryByText,
-      getByTestId
-    } = render( /*#__PURE__*/React.createElement(Banner, {
-      type: "positive",
-      testId: "TestBanner"
-    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
-    expect(queryByText('TestHeader')).toBeDefined();
-    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.correct_100);
-  });
-  it('Renders default banner', async () => {
-    const {
-      queryByText,
-      getByTestId
-    } = render( /*#__PURE__*/React.createElement(Banner, {
-      testId: "TestBanner"
-    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
-    expect(queryByText('TestHeader')).toBeDefined();
-    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.primary_100);
-  });
-});
-//# sourceMappingURL=Banner.test.js.map

package/dist/esm/Banners/__tests__/Banner.test.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/Banners/__tests__/Banner.test.tsx"],"names":["React","render","Banner","COLORS","describe","it","queryByText","getByTestId","expect","toBeDefined","toHaveStyleRule","warning_100","critical_100","correct_100","primary_100"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEAC,QAAQ,CAAC,YAAD,EAAe,MAAM;AAC3BC,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,IAAI,EAAC,SAAb;AAAuB,MAAA,MAAM,EAAC;AAA9B,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACQ,WAAvE;AACD,GARC,CAAF;AASAN,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,IAAI,EAAC,UAAb;AAAwB,MAAA,MAAM,EAAC;AAA/B,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACS,YAAvE;AACD,GARC,CAAF;AASAP,EAAAA,EAAE,CAAC,yBAAD,EAA4B,YAAY;AACxC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,IAAI,EAAC,UAAb;AAAwB,MAAA,MAAM,EAAC;AAA/B,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACU,WAAvE;AACD,GARC,CAAF;AASAR,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,MAAM,EAAC;AAAf,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACW,WAAvE;AACD,GARC,CAAF;AASD,CArCO,CAAR","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport { Banner } from '../index';\r\nimport 'jest-styled-components';\r\nimport { COLORS } from '../../styles';\r\n\r\ndescribe('<Banner />', () => {\r\n  it('Renders warning banner', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Banner type=\"warning\" testId=\"TestBanner\">\r\n        <h2>TestBanner</h2>\r\n      </Banner>,\r\n    );\r\n    expect(queryByText('TestHeader')).toBeDefined();\r\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.warning_100);\r\n  });\r\n  it('Renders critial banner', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Banner type=\"critical\" testId=\"TestBanner\">\r\n        <h2>TestBanner</h2>\r\n      </Banner>,\r\n    );\r\n    expect(queryByText('TestHeader')).toBeDefined();\r\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.critical_100);\r\n  });\r\n  it('Renders positive banner', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Banner type=\"positive\" testId=\"TestBanner\">\r\n        <h2>TestBanner</h2>\r\n      </Banner>,\r\n    );\r\n    expect(queryByText('TestHeader')).toBeDefined();\r\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.correct_100);\r\n  });\r\n  it('Renders default banner', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <Banner testId=\"TestBanner\">\r\n        <h2>TestBanner</h2>\r\n      </Banner>,\r\n    );\r\n    expect(queryByText('TestHeader')).toBeDefined();\r\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.primary_100);\r\n  });\r\n});\r\n"],"file":"Banner.test.js"}

package/dist/esm/Banners/__tests__/OverviewBanner.test.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { OverviewBanner } from '../index';
-import 'jest-styled-components';
-import { COLORS } from '../../styles';
-describe('<OverviewBanner />', () => {
-  it('Renders', async () => {
-    const {
-      queryByText,
-      getByTestId
-    } = render( /*#__PURE__*/React.createElement(OverviewBanner, {
-      testId: "TestBanner"
-    }, /*#__PURE__*/React.createElement("h2", null, "TestHeader")));
-    expect(queryByText('TestHeader')).toBeDefined();
-    expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', COLORS.primary_20);
-  });
-});
-//# sourceMappingURL=OverviewBanner.test.js.map

package/dist/esm/Banners/__tests__/OverviewBanner.test.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/Banners/__tests__/OverviewBanner.test.tsx"],"names":["React","render","OverviewBanner","COLORS","describe","it","queryByText","getByTestId","expect","toBeDefined","toHaveStyleRule","primary_20"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,cAAT,QAA+B,UAA/B;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEAC,QAAQ,CAAC,oBAAD,EAAuB,MAAM;AACnCC,EAAAA,EAAE,CAAC,SAAD,EAAY,YAAY;AACxB,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,cAAD;AAAgB,MAAA,MAAM,EAAC;AAAvB,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,kBAAlD,EAAsEP,MAAM,CAACQ,UAA7E;AACD,GARC,CAAF;AASD,CAVO,CAAR","sourcesContent":["import React from 'react';\r\nimport { render } from '@testing-library/react';\r\nimport { OverviewBanner } from '../index';\r\nimport 'jest-styled-components';\r\nimport { COLORS } from '../../styles';\r\n\r\ndescribe('<OverviewBanner />', () => {\r\n  it('Renders', async () => {\r\n    const { queryByText, getByTestId } = render(\r\n      <OverviewBanner testId=\"TestBanner\">\r\n        <h2>TestHeader</h2>\r\n      </OverviewBanner>,\r\n    );\r\n    expect(queryByText('TestHeader')).toBeDefined();\r\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', COLORS.primary_20);\r\n  });\r\n});\r\n"],"file":"OverviewBanner.test.js"}

package/dist/esm/Banners/index.js

@@ -1,5 +0,0 @@
-import Banner from './Banner';
-import OverviewBanner from './OverviewBanner'; // eslint-disable-next-line import/prefer-default-export
-
-export { Banner, OverviewBanner };
-//# sourceMappingURL=index.js.map

package/dist/esm/Banners/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Banners/index.ts"],"names":["Banner","OverviewBanner"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B,C,CAEA;;AACA,SAASD,MAAT,EAAiBC,cAAjB","sourcesContent":["import Banner from './Banner';\r\nimport OverviewBanner from './OverviewBanner';\r\n\r\n// eslint-disable-next-line import/prefer-default-export\r\nexport { Banner, OverviewBanner };\r\n"],"file":"index.js"}

package/dist/esm/Banners/styles.js

@@ -1,122 +0,0 @@
-import { css } from 'styled-components';
-import { COLORS } from '../styles';
-export const getButtonStyle = type => {
-  switch (type) {
-    case 'warning':
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.warning_500};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.warning_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.warning_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.warning_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.warning_100};
-          }
-        }
-      `;
-
-    case 'critical':
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.critical_600};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.critical_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.critical_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.critical_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.critical_100};
-          }
-        }
-      `;
-
-    case 'positive':
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.correct_500};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.correct_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.correct_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.correct_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.correct_100};
-          }
-        }
-      `;
-
-    default:
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.primary_500};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.neutral_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.primary_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.primary_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.primary_100};
-          }
-        }
-      `;
-  }
-};
-//# sourceMappingURL=styles.js.map

package/dist/esm/Banners/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["css","COLORS","getButtonStyle","type","warning_500","warning_20","warning_700","warning_800","warning_100","critical_600","critical_20","critical_700","critical_800","critical_100","correct_500","correct_20","correct_700","correct_800","correct_100","primary_500","neutral_20","primary_700","primary_800","primary_100"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,MAAMC,cAAc,GAAIC,IAAD,IAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,aAAOH,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACG,WAAY;AACrC;AACA;AACA;AACA,gCAAgCH,MAAM,CAACI,UAAW;AAClD;AACA;AACA;AACA,oBAAoBJ,MAAM,CAACK,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BL,MAAM,CAACM,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBN,MAAM,CAACO,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOR,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACQ,YAAa;AACtC;AACA;AACA;AACA,gCAAgCR,MAAM,CAACS,WAAY;AACnD;AACA;AACA;AACA,oBAAoBT,MAAM,CAACU,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBX,MAAM,CAACY,YAAa;AACxC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOb,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,gCAAgCb,MAAM,CAACc,UAAW;AAClD;AACA;AACA;AACA,oBAAoBd,MAAM,CAACe,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBhB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF;AACE,aAAOlB,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA,gCAAgClB,MAAM,CAACmB,UAAW;AAClD;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BpB,MAAM,CAACqB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBrB,MAAM,CAACsB,WAAY;AACvC;AACA;AACA,OA1BM;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\n\r\nexport const getButtonStyle = (type: string) => {\r\n  switch (type) {\r\n    case 'warning':\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.warning_500};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.warning_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.warning_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.warning_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.warning_100};\r\n          }\r\n        }\r\n      `;\r\n    case 'critical':\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.critical_600};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.critical_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.critical_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.critical_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.critical_100};\r\n          }\r\n        }\r\n      `;\r\n    case 'positive':\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.correct_500};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.correct_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.correct_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.correct_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.correct_100};\r\n          }\r\n        }\r\n      `;\r\n    default:\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.primary_500};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.neutral_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.primary_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.primary_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.primary_100};\r\n          }\r\n        }\r\n      `;\r\n  }\r\n};\r\n"],"file":"styles.js"}