@laerdal/life-react-components 1.3.1-dev.3 → 1.3.2-dev.1.full

package/dist/esm/AuthPage/AuthPage.js

@@ -23,7 +23,7 @@ const AuthPage = ({
   screenSetsContainerId
 }) => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, showInformationSection && /*#__PURE__*/React.createElement(InformationContainer, {
-    $color: signUp ? COLORS.accent1_20 : COLORS.primary_20
+    color: signUp ? COLORS.accent1_20 : COLORS.primary_20
   }, /*#__PURE__*/React.createElement(InformationContent, null, (signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/React.createElement(InformationImage, {
     src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
     alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt

package/dist/esm/AuthPage/AuthPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["React","COLORS","ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","accent1_20","primary_20"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;;AA4BA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,sBADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,sBAHgB;AAIhBC,EAAAA,sBAJgB;AAKhBC,EAAAA,yBALgB;AAMhBC,EAAAA,yBANgB;AAOhBC,EAAAA,uBAPgB;AAQhBC,EAAAA,uBARgB;AAShBC,EAAAA,qBATgB;AAUhBC,EAAAA,qBAVgB;AAWhBC,EAAAA;AAXgB,CAAD,KAYI;AACnB,sBACE,0CACGV,sBAAsB,iBACrB,oBAAC,oBAAD;AAAsB,IAAA,MAAM,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAV,GAAuBnB,MAAM,CAACoB;AAAlE,kBACE,oBAAC,kBAAD,QACG,CAACV,sBAAsB,IAAIC,sBAA3B,kBACC,oBAAC,gBAAD;AAAkB,IAAA,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;AAAiF,IAAA,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;AAA3H,IAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,oBAAC,iBAAD,QAAoBN,MAAM,GAAGK,uBAAH,GAA6BC,uBAAvD,CAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,oBAAC,eAAD,QAAkBR,MAAM,GAAGO,qBAAH,GAA2BC,qBAAnD,CALvD,CADF,CAFJ,eAYE,oBAAC,mBAAD;AAAqB,IAAA,EAAE,EAAEC,qBAAzB;AAAgD,IAAA,cAAc,EAAE,CAACV;AAAjE,IAZF,CADF;AAgBD,CA7BD;;;AA7BEA,EAAAA,sB;AAGAC,EAAAA,M;AAEAC,EAAAA,sB;AAEAC,EAAAA,sB;AAEAC,EAAAA,yB;AAEAC,EAAAA,yB;AAEAC,EAAAA,uB;AAEAC,EAAAA,uB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;;AAuCF,eAAeX,QAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer $color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"file":"AuthPage.js"}
+{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["React","COLORS","ScreenSetsContainer","InformationContainer","InformationContent","InformationHeader","InformationText","InformationImage","AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","accent1_20","primary_20"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,iBAAnD,EAAsEC,eAAtE,EAAuFC,gBAAvF,QAA+G,eAA/G;;AA4BA;AACA;AACA;AACA;AACA;AACA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,sBADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,sBAHgB;AAIhBC,EAAAA,sBAJgB;AAKhBC,EAAAA,yBALgB;AAMhBC,EAAAA,yBANgB;AAOhBC,EAAAA,uBAPgB;AAQhBC,EAAAA,uBARgB;AAShBC,EAAAA,qBATgB;AAUhBC,EAAAA,qBAVgB;AAWhBC,EAAAA;AAXgB,CAAD,KAYI;AACnB,sBACE,0CACGV,sBAAsB,iBACrB,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAEC,MAAM,GAAGT,MAAM,CAACmB,UAAV,GAAuBnB,MAAM,CAACoB;AAAjE,kBACE,oBAAC,kBAAD,QACG,CAACV,sBAAsB,IAAIC,sBAA3B,kBACC,oBAAC,gBAAD;AAAkB,IAAA,GAAG,EAAEF,MAAM,GAAGC,sBAAH,GAA4BC,sBAAzD;AAAiF,IAAA,GAAG,EAAEF,MAAM,GAAGG,yBAAH,GAA+BC;AAA3H,IAFJ,EAIG,CAACC,uBAAuB,IAAIC,uBAA5B,kBAAwD,oBAAC,iBAAD,QAAoBN,MAAM,GAAGK,uBAAH,GAA6BC,uBAAvD,CAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,oBAAC,eAAD,QAAkBR,MAAM,GAAGO,qBAAH,GAA2BC,qBAAnD,CALvD,CADF,CAFJ,eAYE,oBAAC,mBAAD;AAAqB,IAAA,EAAE,EAAEC,qBAAzB;AAAgD,IAAA,cAAc,EAAE,CAACV;AAAjE,IAZF,CADF;AAgBD,CA7BD;;;AA7BEA,EAAAA,sB;AAGAC,EAAAA,M;AAEAC,EAAAA,sB;AAEAC,EAAAA,sB;AAEAC,EAAAA,yB;AAEAC,EAAAA,yB;AAEAC,EAAAA,uB;AAEAC,EAAAA,uB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;AAEAC,EAAAA,qB;;AAuCF,eAAeX,QAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\n\ntype AuthPageProps = {\n  /** set this to 'false' to hide the left side illustration/information section */\n  showInformationSection: boolean;\n  /** true if 'sign-up' screen-set is showing, otherwise false.\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\n  signUp: boolean;\n  /** img src string for 'sign-up' placeholder image */\n  signUpPlaceholderImage?: string;\n  /** img src string for 'sign-in' placeholder image */\n  signInPlaceholderImage?: string;\n  /** img alt text string for 'sign-up' placeholder image */\n  signUpPlaceholderImageAlt?: string;\n  /** img alt text string for 'sign-in' placeholder image */\n  signInPlaceholderImageAlt?: string;\n  /** information header text string below 'sign-up' placeholder image */\n  signUpInformationHeader?: string;\n  /** information header text string below 'sign-in' placeholder image */\n  signInInformationHeader?: string;\n  /** information text string below 'sign-up' header text */\n  signUpInformationText?: string;\n  /** information text string below 'sign-in' header text */\n  signInInformationText?: string;\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\n  screenSetsContainerId: string;\n};\n\n/**\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\n */\nconst AuthPage = ({\n  showInformationSection,\n  signUp,\n  signUpPlaceholderImage,\n  signInPlaceholderImage,\n  signUpPlaceholderImageAlt,\n  signInPlaceholderImageAlt,\n  signUpInformationHeader,\n  signInInformationHeader,\n  signUpInformationText,\n  signInInformationText,\n  screenSetsContainerId,\n}: AuthPageProps) => {\n  return (\n    <>\n      {showInformationSection && (\n        <InformationContainer color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\n          <InformationContent>\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\n            )}\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\n          </InformationContent>\n        </InformationContainer>\n      )}\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\n    </>\n  );\n};\n\nexport default AuthPage;\n"],"file":"AuthPage.js"}

package/dist/esm/AuthPage/Information.js

@@ -4,7 +4,7 @@ import { BREAKPOINTS, COLORS, ParagraphTextStyle } from '../styles';
 import { HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';
 export const InformationContainer = styled(AuthPageSection)`
   display: none;
-  background: ${props => props.$color};
+  background: ${props => props.color};
 
   ${BREAKPOINTS.MEDIUM} {
     display: flex;

package/dist/esm/AuthPage/Information.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","$color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8DC,kBAA9D,QAAwF,WAAxF;AACA,SAA4BC,iBAA5B,EAA+CC,iBAA/C,QAAwE,sBAAxE;AAEA,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAsC;AAChF;AACA,gBAAiBO,KAAD,IAAWA,KAAK,CAACC,MAAO;AACxC;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA,CARO;AAUP,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIV,WAAW,CAACW,KAAM;AACtB;AACA;AACA;AACA,CAZO;AAcP,OAAO,MAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAG;AAC3C,IAAIV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CAAe;AACpC;AACA;AACA,CAJO;AAMP,OAAO,MAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAE;AACxC,IAAIZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CAAiD;AACtE;AACA,CAHO;AAKP,OAAO,MAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAI;AAC3C;AACA;AACA,CAHO","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle } from '../styles';\nimport { ComponentLStyling, HeadlineXLStyling, ParagraphLStyling } from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ $color: string }>`\n  display: none;\n  background: ${(props) => props.$color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["styled","AuthPageSection","BREAKPOINTS","COLORS","ParagraphTextStyle","HeadlineXLStyling","ParagraphLStyling","InformationContainer","props","color","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","black","InformationText","p","Regular","neutral_600","InformationImage","img"],"mappings":"AACA,OAAOA,MAAP,MAAmB,mBAAnB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6DC,kBAA7D,QAAsF,WAAtF;AACA,SAA2BC,iBAA3B,EAA8CC,iBAA9C,QAAsE,sBAAtE;AAEA,OAAO,MAAMC,oBAAoB,GAAGP,MAAM,CAACC,eAAD,CAAqC;AAC/E;AACA,gBAAgBO,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA,CARO;AAUP,OAAO,MAAMC,kBAAkB,GAAGX,MAAM,CAACY,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIV,WAAW,CAACW,KAAM;AACtB;AACA;AACA;AACA,CAZO;AAcP,OAAO,MAAMC,iBAAiB,GAAGd,MAAM,CAACe,EAAG;AAC3C,IAAIV,iBAAiB,CAACF,MAAM,CAACa,KAAR,CAAe;AACpC;AACA;AACA,CAJO;AAMP,OAAO,MAAMC,eAAe,GAAGjB,MAAM,CAACkB,CAAE;AACxC,IAAIZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6BhB,MAAM,CAACiB,WAApC,CAAiD;AACtE;AACA,CAHO;AAKP,OAAO,MAAMC,gBAAgB,GAAGrB,MAAM,CAACsB,GAAI;AAC3C;AACA;AACA,CAHO","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle} from '../styles';\nimport {ComponentLStyling, HeadlineXLStyling, ParagraphLStyling} from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\n  display: none;\n  background: ${props => props.color};\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n    padding-top: 56px;\n  }\n`;\n\nexport const InformationContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: center;\n  align-items: center;\n  text-align: center;\n  max-width: 100%;\n\n  ${BREAKPOINTS.LARGE} {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n`;\n\nexport const InformationHeader = styled.h2`\n  ${HeadlineXLStyling(COLORS.black)}\n  font-weight: 300;\n  margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n  margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n  height: 275px;\n  max-width: 100%;\n`;\n"],"file":"Information.js"}

package/dist/esm/Banners/Banner.js

@@ -12,7 +12,7 @@ import { HyperLink } from '../HyperLink';
  */
 
 const BannerContainer = styled.div`
-  background: ${props => props.$type ? props.$type : COLORS.correct_100};
+  background: ${props => props.type ? props.type : COLORS.correct_100};
   min-height: 48px;
   display: flex;
   color: ${COLORS.black};
@@ -43,8 +43,8 @@ const BannerContainer = styled.div`
   }
 `;
 const BannerCenter = styled.div`
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}
-
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, props.color)}
+  
   display: flex;
   width: 100%;
   margin: 0 0 0 16px;
@@ -74,7 +74,7 @@ const ButtonWrapper = styled.div`
 `;
 const ButtonContainer = styled.div`
   display: contents;
-  ${props => props.$type ? getButtonStyle(props.$type) : null};
+  ${props => props.type ? getButtonStyle(props.type) : null};
 `;
 const BannerContentWrapper = styled.div`
   display: flex;
@@ -111,12 +111,12 @@ const Banner = ({
     case 'warning':
       return /*#__PURE__*/React.createElement(BannerContainer, {
         "data-testid": testId,
-        $type: COLORS.warning_100,
+        type: COLORS.warning_100,
         link: COLORS.warning_700,
         hover: COLORS.warning_20,
         bottom: bottom
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.warning_700,
+        color: COLORS.warning_700,
         className: size
       }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Help, {
         color: COLORS.warning_700,
@@ -130,7 +130,7 @@ const Banner = ({
         href: link,
         variant: "default"
       }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: formatTypeToLowerCase
+        type: formatTypeToLowerCase
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: "secondary",
         shape: "circular",
@@ -145,13 +145,13 @@ const Banner = ({
     case 'critical':
       return /*#__PURE__*/React.createElement(BannerContainer, {
         "data-testid": testId,
-        $type: COLORS.critical_100,
+        type: COLORS.critical_100,
         link: COLORS.critical_700,
         hover: COLORS.critical_20,
         bottom: bottom,
         className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.critical_700,
+        color: COLORS.critical_700,
         className: size
       }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(TechnicalWarning, {
         color: COLORS.critical_700,
@@ -165,7 +165,7 @@ const Banner = ({
         href: link,
         variant: "default"
       }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: formatTypeToLowerCase
+        type: formatTypeToLowerCase
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: "secondary",
         shape: "circular",
@@ -180,13 +180,13 @@ const Banner = ({
     case 'positive':
       return /*#__PURE__*/React.createElement(BannerContainer, {
         "data-testid": testId,
-        $type: COLORS.correct_100,
+        type: COLORS.correct_100,
         link: COLORS.correct_700,
         hover: COLORS.correct_20,
         bottom: bottom,
         className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.correct_700,
+        color: COLORS.correct_700,
         className: size
       }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(ThumbsUp, {
         color: COLORS.correct_700,
@@ -200,7 +200,7 @@ const Banner = ({
         href: link,
         variant: "default"
       }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: formatTypeToLowerCase
+        type: formatTypeToLowerCase
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: "secondary",
         shape: "circular",
@@ -215,13 +215,13 @@ const Banner = ({
     default:
       return /*#__PURE__*/React.createElement(BannerContainer, {
         "data-testid": testId,
-        $type: COLORS.primary_100,
+        type: COLORS.primary_100,
         link: COLORS.primary_700,
         hover: COLORS.primary_20,
         bottom: bottom,
         className: size
       }, /*#__PURE__*/React.createElement(BannerCenter, {
-        $color: COLORS.primary_700,
+        color: COLORS.primary_700,
         className: size
       }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(Tip, {
         color: COLORS.primary_700,
@@ -235,7 +235,7 @@ const Banner = ({
         href: link,
         variant: "default"
       }, linkText))), onClose && /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, {
-        $type: "neutral"
+        type: "neutral"
       }, /*#__PURE__*/React.createElement(IconButton, {
         variant: "secondary",
         shape: "circular",

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

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

package/dist/esm/Modals/__tests__/Modal.test.js

@@ -0,0 +1,154 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import 'jest-styled-components';
+import { ModalDialog } from '..';
+import { Size, SystemIcons } from '../..';
+describe('<ModalDialog />', () => {
+  let mountingDiv;
+  beforeEach(() => {
+    //being rendered as a React.Portal we need to have the 'root' div defined
+    mountingDiv = document.createElement('div');
+    mountingDiv.id = 'root';
+    document.body.appendChild(mountingDiv);
+  });
+  afterEach(() => {
+    document.body.removeChild(mountingDiv);
+  });
+  it('Check modal not rendered when isModalOpen is false', async () => {
+    const {
+      container,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: false,
+      closeAction: () => {},
+      submitAction: () => {}
+    })); //check modal portal not exists when modal not opened
+
+    expect(container.querySelector('.ReactModalPortal')).toBeNull();
+  });
+  it('Check modal visible, title and footer buttons displayed correctly', async () => {
+    const {
+      container,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      buttons: [{
+        action: () => {},
+        text: 'Close',
+        variant: 'tertiary'
+      }, {
+        action: () => {},
+        text: 'Save'
+      }]
+    })); //check modal portal defined
+
+    expect(container.querySelector('.ReactModalPortal')).toBeDefined(); //Check header and footer buttons
+
+    expect(getByText('Header')).toBeDefined();
+    expect(getByText('Close')).toBeDefined();
+    expect(getByText('Save')).toBeDefined();
+  });
+  it('Check tooltip, and link displayed without right footer buttons', async () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      tooltip: 'some test tooltip',
+      leftFooterAction: {
+        id: 'test-link',
+        actionType: 'hyperlink',
+        text: 'Link',
+        href: 'http://test.com',
+        icon: /*#__PURE__*/React.createElement(React.Fragment, null),
+        variant: 'default'
+      }
+    })); //check tooltip displayed
+
+    expect(getByText('some test tooltip').textContent).toBeDefined(); //check footer link displayed
+
+    expect(getByText('Link').children).toBeDefined();
+  });
+  it('Check note and footer note displayed', async () => {
+    const {
+      baseElement,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {},
+      leftFooterAction: {
+        id: 'test-note',
+        actionType: 'note',
+        text: 'Test note',
+        icon: /*#__PURE__*/React.createElement(SystemIcons.Information, null)
+      },
+      note: 'Message text',
+      state: 'critical'
+    })); //check footer note text displayed
+
+    expect(getByText('Test note').textContent).toBeDefined(); //check note section added
+
+    expect(baseElement.querySelectorAll('section')?.length).toEqual(4); //check note message displayed
+
+    expect(getByText('Message text').children).toBeDefined();
+  });
+  it('Check back button and close icon displayed', async () => {
+    const {
+      baseElement,
+      getByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      backButton: () => {},
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {}
+    })); //only 2 svg elements should be found in the header of the modal
+
+    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);
+  });
+  it('Check modal body displayed', async () => {
+    const {
+      baseElement,
+      getByText,
+      container
+    } = render( /*#__PURE__*/React.createElement(ModalDialog, {
+      key: "smallModalWithoutImage",
+      closeModalAndClearInput: () => {},
+      title: 'Header',
+      size: Size.Small,
+      isModalOpen: true,
+      closeAction: () => {},
+      submitAction: () => {}
+    }, /*#__PURE__*/React.createElement("span", null, "Inner modal text"))); //Check all dialog sections are displayed
+
+    expect(baseElement.querySelectorAll('section')?.length).toEqual(3); //Check that the second section (modal body) has the correct text
+
+    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');
+  });
+});
+//# sourceMappingURL=Modal.test.js.map

package/dist/esm/Modals/__tests__/Modal.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Modals/__tests__/Modal.test.tsx"],"names":["React","render","ModalDialog","Size","SystemIcons","describe","mountingDiv","beforeEach","document","createElement","id","body","appendChild","afterEach","removeChild","it","container","getByText","Small","expect","querySelector","toBeNull","action","text","variant","toBeDefined","baseElement","actionType","href","icon","textContent","children","querySelectorAll","length","toEqual"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,WAAT,QAA4B,IAA5B;AACA,SAAiBC,IAAjB,EAAuBC,WAAvB,QAA0C,OAA1C;AAEAC,QAAQ,CAAC,iBAAD,EAAoB,MAAM;AAChC,MAAIC,WAAJ;AAEAC,EAAAA,UAAU,CAAC,MAAM;AACf;AACAD,IAAAA,WAAW,GAAGE,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAd;AACAH,IAAAA,WAAW,CAACI,EAAZ,GAAiB,MAAjB;AACAF,IAAAA,QAAQ,CAACG,IAAT,CAAcC,WAAd,CAA0BN,WAA1B;AACD,GALS,CAAV;AAOAO,EAAAA,SAAS,CAAC,MAAM;AACdL,IAAAA,QAAQ,CAACG,IAAT,CAAcG,WAAd,CAA0BR,WAA1B;AACD,GAFQ,CAAT;AAIAS,EAAAA,EAAE,CAAC,oDAAD,EAAuD,YAAY;AACnE,UAAM;AAAEC,MAAAA,SAAF;AAAaC,MAAAA;AAAb,QAA2BhB,MAAM,eACrC,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,wBADN;AAEE,MAAA,uBAAuB,EAAE,MAAM,CAAE,CAFnC;AAGE,MAAA,KAAK,EAAE,QAHT;AAIE,MAAA,IAAI,EAAEE,IAAI,CAACe,KAJb;AAKE,MAAA,WAAW,EAAE,KALf;AAME,MAAA,WAAW,EAAE,MAAM,CAAE,CANvB;AAOE,MAAA,YAAY,EAAE,MAAM,CAAE;AAPxB,MADqC,CAAvC,CADmE,CAYnE;;AACAC,IAAAA,MAAM,CAACH,SAAS,CAACI,aAAV,CAAwB,mBAAxB,CAAD,CAAN,CAAqDC,QAArD;AACD,GAdC,CAAF;AAgBAN,EAAAA,EAAE,CAAC,mEAAD,EAAsE,YAAY;AAClF,UAAM;AAAEC,MAAAA,SAAF;AAAaC,MAAAA;AAAb,QAA2BhB,MAAM,eACrC,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,wBADN;AAEE,MAAA,uBAAuB,EAAE,MAAM,CAAE,CAFnC;AAGE,MAAA,KAAK,EAAE,QAHT;AAIE,MAAA,IAAI,EAAEE,IAAI,CAACe,KAJb;AAKE,MAAA,WAAW,EAAE,IALf;AAME,MAAA,WAAW,EAAE,MAAM,CAAE,CANvB;AAOE,MAAA,YAAY,EAAE,MAAM,CAAE,CAPxB;AAQE,MAAA,OAAO,EAAE,CACP;AACEI,QAAAA,MAAM,EAAE,MAAM,CAAE,CADlB;AAEEC,QAAAA,IAAI,EAAE,OAFR;AAGEC,QAAAA,OAAO,EAAE;AAHX,OADO,EAMP;AACEF,QAAAA,MAAM,EAAE,MAAM,CAAE,CADlB;AAEEC,QAAAA,IAAI,EAAE;AAFR,OANO;AARX,MADqC,CAAvC,CADkF,CAuBlF;;AACAJ,IAAAA,MAAM,CAACH,SAAS,CAACI,aAAV,CAAwB,mBAAxB,CAAD,CAAN,CAAqDK,WAArD,GAxBkF,CAyBlF;;AACAN,IAAAA,MAAM,CAACF,SAAS,CAAC,QAAD,CAAV,CAAN,CAA4BQ,WAA5B;AACAN,IAAAA,MAAM,CAACF,SAAS,CAAC,OAAD,CAAV,CAAN,CAA2BQ,WAA3B;AACAN,IAAAA,MAAM,CAACF,SAAS,CAAC,MAAD,CAAV,CAAN,CAA0BQ,WAA1B;AACD,GA7BC,CAAF;AA+BAV,EAAAA,EAAE,CAAC,gEAAD,EAAmE,YAAY;AAC/E,UAAM;AAAEW,MAAAA,WAAF;AAAeT,MAAAA;AAAf,QAA6BhB,MAAM,eACvC,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,wBADN;AAEE,MAAA,uBAAuB,EAAE,MAAM,CAAE,CAFnC;AAGE,MAAA,KAAK,EAAE,QAHT;AAIE,MAAA,IAAI,EAAEE,IAAI,CAACe,KAJb;AAKE,MAAA,WAAW,EAAE,IALf;AAME,MAAA,WAAW,EAAE,MAAM,CAAE,CANvB;AAOE,MAAA,YAAY,EAAE,MAAM,CAAE,CAPxB;AAQE,MAAA,OAAO,EAAE,mBARX;AASE,MAAA,gBAAgB,EAAE;AAAER,QAAAA,EAAE,EAAE,WAAN;AAAmBiB,QAAAA,UAAU,EAAE,WAA/B;AAA4CJ,QAAAA,IAAI,EAAE,MAAlD;AAA0DK,QAAAA,IAAI,EAAE,iBAAhE;AAAmFC,QAAAA,IAAI,eAAE,yCAAzF;AAAgGL,QAAAA,OAAO,EAAE;AAAzG;AATpB,MADuC,CAAzC,CAD+E,CAc/E;;AACAL,IAAAA,MAAM,CAACF,SAAS,CAAC,mBAAD,CAAT,CAA+Ba,WAAhC,CAAN,CAAmDL,WAAnD,GAf+E,CAgB/E;;AACAN,IAAAA,MAAM,CAACF,SAAS,CAAC,MAAD,CAAT,CAAkBc,QAAnB,CAAN,CAAmCN,WAAnC;AACD,GAlBC,CAAF;AAoBAV,EAAAA,EAAE,CAAC,sCAAD,EAAyC,YAAY;AACrD,UAAM;AAAEW,MAAAA,WAAF;AAAeT,MAAAA;AAAf,QAA6BhB,MAAM,eACvC,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,wBADN;AAEE,MAAA,uBAAuB,EAAE,MAAM,CAAE,CAFnC;AAGE,MAAA,KAAK,EAAE,QAHT;AAIE,MAAA,IAAI,EAAEE,IAAI,CAACe,KAJb;AAKE,MAAA,WAAW,EAAE,IALf;AAME,MAAA,WAAW,EAAE,MAAM,CAAE,CANvB;AAOE,MAAA,YAAY,EAAE,MAAM,CAAE,CAPxB;AAQE,MAAA,gBAAgB,EAAE;AAAER,QAAAA,EAAE,EAAE,WAAN;AAAmBiB,QAAAA,UAAU,EAAE,MAA/B;AAAuCJ,QAAAA,IAAI,EAAE,WAA7C;AAA0DM,QAAAA,IAAI,eAAE,oBAAC,WAAD,CAAa,WAAb;AAAhE,OARpB;AASE,MAAA,IAAI,EAAE,cATR;AAUE,MAAA,KAAK,EAAE;AAVT,MADuC,CAAzC,CADqD,CAerD;;AACAV,IAAAA,MAAM,CAACF,SAAS,CAAC,WAAD,CAAT,CAAuBa,WAAxB,CAAN,CAA2CL,WAA3C,GAhBqD,CAiBrD;;AACAN,IAAAA,MAAM,CAACO,WAAW,CAACM,gBAAZ,CAA6B,SAA7B,GAAyCC,MAA1C,CAAN,CAAwDC,OAAxD,CAAgE,CAAhE,EAlBqD,CAmBrD;;AACAf,IAAAA,MAAM,CAACF,SAAS,CAAC,cAAD,CAAT,CAA0Bc,QAA3B,CAAN,CAA2CN,WAA3C;AACD,GArBC,CAAF;AAuBAV,EAAAA,EAAE,CAAC,4CAAD,EAA+C,YAAY;AAC3D,UAAM;AAAEW,MAAAA,WAAF;AAAeT,MAAAA,SAAf;AAA0BD,MAAAA;AAA1B,QAAwCf,MAAM,eAClD,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,wBADN;AAEE,MAAA,uBAAuB,EAAE,MAAM,CAAE,CAFnC;AAGE,MAAA,KAAK,EAAE,QAHT;AAIE,MAAA,IAAI,EAAEE,IAAI,CAACe,KAJb;AAKE,MAAA,UAAU,EAAE,MAAM,CAAE,CALtB;AAME,MAAA,WAAW,EAAE,IANf;AAOE,MAAA,WAAW,EAAE,MAAM,CAAE,CAPvB;AAQE,MAAA,YAAY,EAAE,MAAM,CAAE;AARxB,MADkD,CAApD,CAD2D,CAa3D;;AACAC,IAAAA,MAAM,CAACO,WAAW,CAACM,gBAAZ,CAA6B,KAA7B,GAAqCC,MAAtC,CAAN,CAAoDC,OAApD,CAA4D,CAA5D;AACD,GAfC,CAAF;AAiBAnB,EAAAA,EAAE,CAAC,4BAAD,EAA+B,YAAY;AAC3C,UAAM;AAAEW,MAAAA,WAAF;AAAeT,MAAAA,SAAf;AAA0BD,MAAAA;AAA1B,QAAwCf,MAAM,eAClD,oBAAC,WAAD;AACE,MAAA,GAAG,EAAC,wBADN;AAEE,MAAA,uBAAuB,EAAE,MAAM,CAAE,CAFnC;AAGE,MAAA,KAAK,EAAE,QAHT;AAIE,MAAA,IAAI,EAAEE,IAAI,CAACe,KAJb;AAKE,MAAA,WAAW,EAAE,IALf;AAME,MAAA,WAAW,EAAE,MAAM,CAAE,CANvB;AAOE,MAAA,YAAY,EAAE,MAAM,CAAE;AAPxB,oBAQE,qDARF,CADkD,CAApD,CAD2C,CAa3C;;AACAC,IAAAA,MAAM,CAACO,WAAW,CAACM,gBAAZ,CAA6B,SAA7B,GAAyCC,MAA1C,CAAN,CAAwDC,OAAxD,CAAgE,CAAhE,EAd2C,CAe3C;;AACAf,IAAAA,MAAM,CAACO,WAAW,CAACM,gBAAZ,CAA6B,SAA7B,IAA0C,CAA1C,EAA6CF,WAA9C,CAAN,CAAiEI,OAAjE,CAAyE,kBAAzE;AACD,GAjBC,CAAF;AAkBD,CA3IO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { ModalDialog } from '..';\nimport { COLORS, Size, SystemIcons } from '../..';\n\ndescribe('<ModalDialog />', () => {\n  let mountingDiv: HTMLElement;\n\n  beforeEach(() => {\n    //being rendered as a React.Portal we need to have the 'root' div defined\n    mountingDiv = document.createElement('div');\n    mountingDiv.id = 'root';\n    document.body.appendChild(mountingDiv);\n  });\n\n  afterEach(() => {\n    document.body.removeChild(mountingDiv);\n  });\n\n  it('Check modal not rendered when isModalOpen is false', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={false}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //check modal portal not exists when modal not opened\n    expect(container.querySelector('.ReactModalPortal')).toBeNull();\n  });\n\n  it('Check modal visible, title and footer buttons displayed correctly', async () => {\n    const { container, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        buttons={[\n          {\n            action: () => {},\n            text: 'Close',\n            variant: 'tertiary',\n          },\n          {\n            action: () => {},\n            text: 'Save',\n          },\n        ]}\n      />,\n    );\n    //check modal portal defined\n    expect(container.querySelector('.ReactModalPortal')).toBeDefined();\n    //Check header and footer buttons\n    expect(getByText('Header')).toBeDefined();\n    expect(getByText('Close')).toBeDefined();\n    expect(getByText('Save')).toBeDefined();\n  });\n\n  it('Check tooltip, and link displayed without right footer buttons', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        tooltip={'some test tooltip'}\n        leftFooterAction={{ id: 'test-link', actionType: 'hyperlink', text: 'Link', href: 'http://test.com', icon: <></>, variant: 'default' }}\n      />,\n    );\n    //check tooltip displayed\n    expect(getByText('some test tooltip').textContent).toBeDefined();\n    //check footer link displayed\n    expect(getByText('Link').children).toBeDefined();\n  });\n\n  it('Check note and footer note displayed', async () => {\n    const { baseElement, getByText } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n        leftFooterAction={{ id: 'test-note', actionType: 'note', text: 'Test note', icon: <SystemIcons.Information /> }}\n        note={'Message text'}\n        state={'critical'}\n      />,\n    );\n    //check footer note text displayed\n    expect(getByText('Test note').textContent).toBeDefined();\n    //check note section added\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(4);\n    //check note message displayed\n    expect(getByText('Message text').children).toBeDefined();\n  });\n\n  it('Check back button and close icon displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        backButton={() => {}}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}\n      />,\n    );\n    //only 2 svg elements should be found in the header of the modal\n    expect(baseElement.querySelectorAll('svg')?.length).toEqual(2);\n  });\n\n  it('Check modal body displayed', async () => {\n    const { baseElement, getByText, container } = render(\n      <ModalDialog\n        key=\"smallModalWithoutImage\"\n        closeModalAndClearInput={() => {}}\n        title={'Header'}\n        size={Size.Small}\n        isModalOpen={true}\n        closeAction={() => {}}\n        submitAction={() => {}}>\n        <span>Inner modal text</span>\n      </ModalDialog>,\n    );\n    //Check all dialog sections are displayed\n    expect(baseElement.querySelectorAll('section')?.length).toEqual(3);\n    //Check that the second section (modal body) has the correct text\n    expect(baseElement.querySelectorAll('section')?.[1].textContent).toEqual('Inner modal text');\n  });\n});\n"],"file":"Modal.test.js"}