@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/js/AuthPage/AuthPage.d.ts

@@ -0,0 +1,32 @@
+declare type AuthPageProps = {
+    /** set this to 'false' to hide the left side illustration/information section */
+    showInformationSection: boolean;
+    /** true if 'sign-up' screen-set is showing, otherwise false.
+     * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */
+    signUp: boolean;
+    /** img src string for 'sign-up' placeholder image */
+    signUpPlaceholderImage?: string;
+    /** img src string for 'sign-in' placeholder image */
+    signInPlaceholderImage?: string;
+    /** img alt text string for 'sign-up' placeholder image */
+    signUpPlaceholderImageAlt?: string;
+    /** img alt text string for 'sign-in' placeholder image */
+    signInPlaceholderImageAlt?: string;
+    /** information header text string below 'sign-up' placeholder image */
+    signUpInformationHeader?: string;
+    /** information header text string below 'sign-in' placeholder image */
+    signInInformationHeader?: string;
+    /** information text string below 'sign-up' header text */
+    signUpInformationText?: string;
+    /** information text string below 'sign-in' header text */
+    signInInformationText?: string;
+    /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */
+    screenSetsContainerId: string;
+};
+/**
+ * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
+ * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
+ * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.
+ */
+declare const AuthPage: ({ showInformationSection, signUp, signUpPlaceholderImage, signInPlaceholderImage, signUpPlaceholderImageAlt, signInPlaceholderImageAlt, signUpInformationHeader, signInInformationHeader, signUpInformationText, signInInformationText, screenSetsContainerId, }: AuthPageProps) => JSX.Element;
+export default AuthPage;

package/dist/js/AuthPage/AuthPage.js

@@ -0,0 +1,69 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("../styles");
+
+var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
+
+var _Information = require("./Information");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.
+ * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).
+ * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.
+ */
+var AuthPage = function AuthPage(_ref) {
+  var showInformationSection = _ref.showInformationSection,
+      signUp = _ref.signUp,
+      signUpPlaceholderImage = _ref.signUpPlaceholderImage,
+      signInPlaceholderImage = _ref.signInPlaceholderImage,
+      signUpPlaceholderImageAlt = _ref.signUpPlaceholderImageAlt,
+      signInPlaceholderImageAlt = _ref.signInPlaceholderImageAlt,
+      signUpInformationHeader = _ref.signUpInformationHeader,
+      signInInformationHeader = _ref.signInInformationHeader,
+      signUpInformationText = _ref.signUpInformationText,
+      signInInformationText = _ref.signInInformationText,
+      screenSetsContainerId = _ref.screenSetsContainerId;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showInformationSection && /*#__PURE__*/React.createElement(_Information.InformationContainer, {
+    color: signUp ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20
+  }, /*#__PURE__*/React.createElement(_Information.InformationContent, null, (signUpPlaceholderImage || signInPlaceholderImage) && /*#__PURE__*/React.createElement(_Information.InformationImage, {
+    src: signUp ? signUpPlaceholderImage : signInPlaceholderImage,
+    alt: signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt
+  }), (signUpInformationHeader || signInInformationHeader) && /*#__PURE__*/React.createElement(_Information.InformationHeader, null, signUp ? signUpInformationHeader : signInInformationHeader), (signUpInformationText || signInInformationText) && /*#__PURE__*/React.createElement(_Information.InformationText, null, signUp ? signUpInformationText : signInInformationText))), /*#__PURE__*/React.createElement(_ScreenSetsContainer.default, {
+    id: screenSetsContainerId,
+    centerContents: !showInformationSection
+  }));
+};
+
+AuthPage.propTypes = {
+  showInformationSection: _propTypes.default.bool.isRequired,
+  signUp: _propTypes.default.bool.isRequired,
+  signUpPlaceholderImage: _propTypes.default.string,
+  signInPlaceholderImage: _propTypes.default.string,
+  signUpPlaceholderImageAlt: _propTypes.default.string,
+  signInPlaceholderImageAlt: _propTypes.default.string,
+  signUpInformationHeader: _propTypes.default.string,
+  signInInformationHeader: _propTypes.default.string,
+  signUpInformationText: _propTypes.default.string,
+  signInInformationText: _propTypes.default.string,
+  screenSetsContainerId: _propTypes.default.string.isRequired
+};
+var _default = AuthPage;
+exports.default = _default;
+//# sourceMappingURL=AuthPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/AuthPage.tsx"],"names":["AuthPage","showInformationSection","signUp","signUpPlaceholderImage","signInPlaceholderImage","signUpPlaceholderImageAlt","signInPlaceholderImageAlt","signUpInformationHeader","signInInformationHeader","signUpInformationText","signInInformationText","screenSetsContainerId","COLORS","accent1_20","primary_20"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMA,QAAQ,GAAG,SAAXA,QAAW,OAYI;AAAA,MAXnBC,sBAWmB,QAXnBA,sBAWmB;AAAA,MAVnBC,MAUmB,QAVnBA,MAUmB;AAAA,MATnBC,sBASmB,QATnBA,sBASmB;AAAA,MARnBC,sBAQmB,QARnBA,sBAQmB;AAAA,MAPnBC,yBAOmB,QAPnBA,yBAOmB;AAAA,MANnBC,yBAMmB,QANnBA,yBAMmB;AAAA,MALnBC,uBAKmB,QALnBA,uBAKmB;AAAA,MAJnBC,uBAImB,QAJnBA,uBAImB;AAAA,MAHnBC,qBAGmB,QAHnBA,qBAGmB;AAAA,MAFnBC,qBAEmB,QAFnBA,qBAEmB;AAAA,MADnBC,qBACmB,QADnBA,qBACmB;AACnB,sBACE,0CACGV,sBAAsB,iBACrB,oBAAC,iCAAD;AAAsB,IAAA,KAAK,EAAEC,MAAM,GAAGU,eAAOC,UAAV,GAAuBD,eAAOE;AAAjE,kBACE,oBAAC,+BAAD,QACG,CAACX,sBAAsB,IAAIC,sBAA3B,kBACC,oBAAC,6BAAD;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,8BAAD,QAAoBN,MAAM,GAAGK,uBAAH,GAA6BC,uBAAvD,CAJ3D,EAKG,CAACC,qBAAqB,IAAIC,qBAA1B,kBAAoD,oBAAC,4BAAD,QAAkBR,MAAM,GAAGO,qBAAH,GAA2BC,qBAAnD,CALvD,CADF,CAFJ,eAYE,oBAAC,4BAAD;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;;eAuCaX,Q","sourcesContent":["import * as React from 'react';\r\nimport { COLORS } from '../styles';\r\nimport ScreenSetsContainer from './ScreenSetsContainer';\r\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\r\n\r\ntype AuthPageProps = {\r\n  /** set this to 'false' to hide the left side illustration/information section */\r\n  showInformationSection: boolean;\r\n  /** true if 'sign-up' screen-set is showing, otherwise false.\r\n   * The value can be set using 'onBeforeScreenLoad' in 'gigya.accounts.showScreenSet(...)' and checking the loaded screen-set */\r\n  signUp: boolean;\r\n  /** img src string for 'sign-up' placeholder image */\r\n  signUpPlaceholderImage?: string;\r\n  /** img src string for 'sign-in' placeholder image */\r\n  signInPlaceholderImage?: string;\r\n  /** img alt text string for 'sign-up' placeholder image */\r\n  signUpPlaceholderImageAlt?: string;\r\n  /** img alt text string for 'sign-in' placeholder image */\r\n  signInPlaceholderImageAlt?: string;\r\n  /** information header text string below 'sign-up' placeholder image */\r\n  signUpInformationHeader?: string;\r\n  /** information header text string below 'sign-in' placeholder image */\r\n  signInInformationHeader?: string;\r\n  /** information text string below 'sign-up' header text */\r\n  signUpInformationText?: string;\r\n  /** information text string below 'sign-in' header text */\r\n  signInInformationText?: string;\r\n  /** ID that will be given to the SAP CDC screen-sets container (must match 'containerID' in 'gigya.accounts.showScreenSet(...)'!) */\r\n  screenSetsContainerId: string;\r\n};\r\n\r\n/**\r\n * The 'AuthPage' component consist of two containers: an 'Information' container on the left, and a 'ScreenSetsContainer' on the right.\r\n * The 'Information' container is optional and its contents depend on the context (sign-up or sign-in).\r\n * The 'ScreenSetsContainer' will contain the SAP CDC screen-sets.\r\n */\r\nconst AuthPage = ({\r\n  showInformationSection,\r\n  signUp,\r\n  signUpPlaceholderImage,\r\n  signInPlaceholderImage,\r\n  signUpPlaceholderImageAlt,\r\n  signInPlaceholderImageAlt,\r\n  signUpInformationHeader,\r\n  signInInformationHeader,\r\n  signUpInformationText,\r\n  signInInformationText,\r\n  screenSetsContainerId,\r\n}: AuthPageProps) => {\r\n  return (\r\n    <>\r\n      {showInformationSection && (\r\n        <InformationContainer color={signUp ? COLORS.accent1_20 : COLORS.primary_20}>\r\n          <InformationContent>\r\n            {(signUpPlaceholderImage || signInPlaceholderImage) && (\r\n              <InformationImage src={signUp ? signUpPlaceholderImage : signInPlaceholderImage} alt={signUp ? signUpPlaceholderImageAlt : signInPlaceholderImageAlt} />\r\n            )}\r\n            {(signUpInformationHeader || signInInformationHeader) && <InformationHeader>{signUp ? signUpInformationHeader : signInInformationHeader}</InformationHeader>}\r\n            {(signUpInformationText || signInInformationText) && <InformationText>{signUp ? signUpInformationText : signInInformationText}</InformationText>}\r\n          </InformationContent>\r\n        </InformationContainer>\r\n      )}\r\n      <ScreenSetsContainer id={screenSetsContainerId} centerContents={!showInformationSection} />\r\n    </>\r\n  );\r\n};\r\n\r\nexport default AuthPage;\r\n"],"file":"AuthPage.js"}

package/dist/js/AuthPage/Information.d.ts

@@ -0,0 +1,7 @@
+export declare const InformationContainer: import("styled-components").StyledComponent<"section", any, {
+    color: string;
+}, never>;
+export declare const InformationContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InformationHeader: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const InformationText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const InformationImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/dist/js/AuthPage/Information.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InformationImage = exports.InformationText = exports.InformationHeader = exports.InformationContent = exports.InformationContainer = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _AuthPageSection = _interopRequireDefault(require("./_AuthPageSection"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var InformationContainer = (0, _styledComponents.default)(_AuthPageSection.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  background: ", ";\n\n  ", " {\n    display: flex;\n    padding-top: 56px;\n  }\n"])), function (props) {
+  return props.color;
+}, _styles.BREAKPOINTS.MEDIUM);
+exports.InformationContainer = InformationContainer;
+
+var InformationContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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  ", " {\n    align-self: flex-end;\n    margin-right: 48px;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+
+exports.InformationContent = InformationContent;
+
+var InformationHeader = _styledComponents.default.h2(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  font-weight: 300;\n  margin-bottom: 0;\n"])), (0, _typography.HeadlineXLStyling)(_styles.COLORS.black));
+
+exports.InformationHeader = InformationHeader;
+
+var InformationText = _styledComponents.default.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  margin: 8px 0;\n"])), (0, _typography.ParagraphLStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
+
+exports.InformationText = InformationText;
+
+var InformationImage = _styledComponents.default.img(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 275px;\n  max-width: 100%;\n"])));
+
+exports.InformationImage = InformationImage;
+//# sourceMappingURL=Information.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","AuthPageSection","props","color","BREAKPOINTS","MEDIUM","InformationContent","styled","div","LARGE","InformationHeader","h2","COLORS","black","InformationText","p","ParagraphTextStyle","Regular","neutral_600","InformationImage","img"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,oBAAoB,GAAG,+BAAOC,wBAAP,CAAH,4KAEjB,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACC,KAAV;AAAA,CAFY,EAI7BC,oBAAYC,MAJiB,CAA1B;;;AAUA,IAAMC,kBAAkB,GAAGC,0BAAOC,GAAV,sRAQ3BJ,oBAAYK,KARe,CAAxB;;;;AAcA,IAAMC,iBAAiB,GAAGH,0BAAOI,EAAV,4HAC1B,mCAAkBC,eAAOC,KAAzB,CAD0B,CAAvB;;;;AAMA,IAAMC,eAAe,GAAGP,0BAAOQ,CAAV,oGACxB,mCAAkBC,2BAAmBC,OAArC,EAA8CL,eAAOM,WAArD,CADwB,CAArB;;;;AAKA,IAAMC,gBAAgB,GAAGZ,0BAAOa,GAAV,+GAAtB","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport AuthPageSection from './_AuthPageSection';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle} from '../styles';\r\nimport {ComponentLStyling, HeadlineXLStyling, ParagraphLStyling} from '../styles/typography';\r\n\r\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\r\n  display: none;\r\n  background: ${props => props.color};\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    display: flex;\r\n    padding-top: 56px;\r\n  }\r\n`;\r\n\r\nexport const InformationContent = styled.div`\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-self: center;\r\n  align-items: center;\r\n  text-align: center;\r\n  max-width: 100%;\r\n\r\n  ${BREAKPOINTS.LARGE} {\r\n    align-self: flex-end;\r\n    margin-right: 48px;\r\n  }\r\n`;\r\n\r\nexport const InformationHeader = styled.h2`\r\n  ${HeadlineXLStyling(COLORS.black)}\r\n  font-weight: 300;\r\n  margin-bottom: 0;\r\n`;\r\n\r\nexport const InformationText = styled.p`\r\n  ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\r\n  margin: 8px 0;\r\n`;\r\n\r\nexport const InformationImage = styled.img`\r\n  height: 275px;\r\n  max-width: 100%;\r\n`;\r\n"],"file":"Information.js"}

package/dist/js/AuthPage/ScreenSetsContainer.d.ts

@@ -0,0 +1,4 @@
+declare const ScreenSetsContainer: import("styled-components").StyledComponent<"section", any, {
+    centerContents: boolean;
+}, never>;
+export default ScreenSetsContainer;

package/dist/js/AuthPage/ScreenSetsContainer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _AuthPageSection = _interopRequireDefault(require("./_AuthPageSection"));
+
+var _styles = require("../styles");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var ScreenSetsContainer = (0, _styledComponents.default)(_AuthPageSection.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px;\n  width: calc(100% - 16px);\n  align-items: ", ";\n\n  .gigya-screen-caption {\n    display: none;\n  }\n\n  .gigya-screen {\n    max-width: 100%;\n    margin: auto;\n  }\n\n  ", " {\n    .gigya-screen {\n      margin: 0;\n      padding: 36px 25px !important;\n    }\n  }\n\n  ", " {\n    .gigya-screen {\n      max-width: 500px;\n    }\n  }\n"])), function (props) {
+  return props.centerContents ? 'center' : 'unset';
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.XLARGE);
+var _default = ScreenSetsContainer;
+exports.default = _default;
+//# sourceMappingURL=ScreenSetsContainer.js.map

package/dist/js/AuthPage/ScreenSetsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/ScreenSetsContainer.tsx"],"names":["ScreenSetsContainer","AuthPageSection","props","centerContents","BREAKPOINTS","MEDIUM","XLARGE"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,mBAAmB,GAAG,+BAAOC,wBAAP,CAAH,gbAGR,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,QAAvB,GAAkC,OAAvC;AAAA,CAHG,EAcrBC,oBAAYC,MAdS,EAqBrBD,oBAAYE,MArBS,CAAzB;eA4BeN,mB","sourcesContent":["import styled from 'styled-components';\r\nimport AuthPageSection from './_AuthPageSection';\r\nimport { BREAKPOINTS } from '../styles';\r\n\r\nconst ScreenSetsContainer = styled(AuthPageSection)<{ centerContents: boolean }>`\r\n  padding: 8px;\r\n  width: calc(100% - 16px);\r\n  align-items: ${props => (props.centerContents ? 'center' : 'unset')};\r\n\r\n  .gigya-screen-caption {\r\n    display: none;\r\n  }\r\n\r\n  .gigya-screen {\r\n    max-width: 100%;\r\n    margin: auto;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    .gigya-screen {\r\n      margin: 0;\r\n      padding: 36px 25px !important;\r\n    }\r\n  }\r\n\r\n  ${BREAKPOINTS.XLARGE} {\r\n    .gigya-screen {\r\n      max-width: 500px;\r\n    }\r\n  }\r\n`;\r\n\r\nexport default ScreenSetsContainer;\r\n"],"file":"ScreenSetsContainer.js"}

package/dist/js/AuthPage/_AuthPageSection.d.ts

@@ -0,0 +1,2 @@
+declare const AuthPageSection: import("styled-components").StyledComponent<"section", any, {}, never>;
+export default AuthPageSection;

package/dist/js/AuthPage/_AuthPageSection.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var AuthPageSection = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ", " {\n    padding: 24px;\n    width: calc(50% - 48px);\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+var _default = AuthPageSection;
+exports.default = _default;
+//# sourceMappingURL=_AuthPageSection.js.map

package/dist/js/AuthPage/_AuthPageSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/_AuthPageSection.tsx"],"names":["AuthPageSection","styled","section","BREAKPOINTS","MEDIUM"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAEA,IAAMA,eAAe,GAAGC,0BAAOC,OAAV,oMAKjBC,oBAAYC,MALK,CAArB;;eAWeJ,e","sourcesContent":["import styled from 'styled-components';\r\nimport { BREAKPOINTS } from '../styles';\r\n\r\nconst AuthPageSection = styled.section`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    padding: 24px;\r\n    width: calc(50% - 48px);\r\n  }\r\n`;\r\n\r\nexport default AuthPageSection;\r\n"],"file":"_AuthPageSection.js"}

package/dist/js/AuthPage/index.d.ts

@@ -0,0 +1,5 @@
+import ScreenSetsContainer from './ScreenSetsContainer';
+import { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';
+import AuthPage from './AuthPage';
+import { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';
+export { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };

package/dist/js/AuthPage/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ScreenSetsContainer", {
+  enumerable: true,
+  get: function get() {
+    return _ScreenSetsContainer.default;
+  }
+});
+Object.defineProperty(exports, "InformationContainer", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationContainer;
+  }
+});
+Object.defineProperty(exports, "InformationContent", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationContent;
+  }
+});
+Object.defineProperty(exports, "InformationHeader", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationHeader;
+  }
+});
+Object.defineProperty(exports, "InformationText", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationText;
+  }
+});
+Object.defineProperty(exports, "InformationImage", {
+  enumerable: true,
+  get: function get() {
+    return _Information.InformationImage;
+  }
+});
+Object.defineProperty(exports, "AuthPage", {
+  enumerable: true,
+  get: function get() {
+    return _AuthPage.default;
+  }
+});
+Object.defineProperty(exports, "screenSetsErrorMessages_EN", {
+  enumerable: true,
+  get: function get() {
+    return _screenSetsErrorMessages.screenSetsErrorMessages_EN;
+  }
+});
+
+var _ScreenSetsContainer = _interopRequireDefault(require("./ScreenSetsContainer"));
+
+var _Information = require("./Information");
+
+var _AuthPage = _interopRequireDefault(require("./AuthPage"));
+
+var _screenSetsErrorMessages = require("./screenSetsErrorMessages");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/dist/js/AuthPage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA","sourcesContent":["import ScreenSetsContainer from './ScreenSetsContainer';\r\nimport { InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage } from './Information';\r\nimport AuthPage from './AuthPage';\r\nimport { screenSetsErrorMessages_EN } from './screenSetsErrorMessages';\r\n\r\nexport { ScreenSetsContainer, InformationContainer, InformationContent, InformationHeader, InformationText, InformationImage, AuthPage, screenSetsErrorMessages_EN };\r\n"],"file":"index.js"}

package/dist/js/AuthPage/screenSetsErrorMessages.d.ts

@@ -0,0 +1,5 @@
+export declare const screenSetsErrorMessages_EN: {
+    email_already_exists: string;
+    email_address_is_invalid: string;
+    please_enter_fieldname: string;
+};

package/dist/js/AuthPage/screenSetsErrorMessages.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.screenSetsErrorMessages_EN = void 0;
+var screenSetsErrorMessages_EN = {
+  email_already_exists: 'An account with that email already exists - try <a href class="sign-in-link" style="font-size: inherit;" data-switch-screen="gigya-login-screen">signing in</a>',
+  email_address_is_invalid: 'Invalid email address',
+  please_enter_fieldname: 'Enter your %fieldname'
+};
+exports.screenSetsErrorMessages_EN = screenSetsErrorMessages_EN;
+//# sourceMappingURL=screenSetsErrorMessages.js.map

package/dist/js/AuthPage/screenSetsErrorMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/AuthPage/screenSetsErrorMessages.ts"],"names":["screenSetsErrorMessages_EN","email_already_exists","email_address_is_invalid","please_enter_fieldname"],"mappings":";;;;;;AAAO,IAAMA,0BAA0B,GAAG;AACxCC,EAAAA,oBAAoB,EAClB,iKAFsC;AAGxCC,EAAAA,wBAAwB,EAAE,uBAHc;AAIxCC,EAAAA,sBAAsB,EAAE;AAJgB,CAAnC","sourcesContent":["export const screenSetsErrorMessages_EN = {\r\n  email_already_exists:\r\n    'An account with that email already exists - try <a href class=\"sign-in-link\" style=\"font-size: inherit;\" data-switch-screen=\"gigya-login-screen\">signing in</a>',\r\n  email_address_is_invalid: 'Invalid email address',\r\n  please_enter_fieldname: 'Enter your %fieldname',\r\n};\r\n"],"file":"screenSetsErrorMessages.js"}

package/dist/js/Banners/Banner.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Size } from '../types';
+declare type BannerProps = {
+    size?: Size.Small | Size.Medium | Size.Large;
+    type?: string;
+    link?: string;
+    linkText?: string;
+    hover?: string;
+    bottom?: boolean;
+    testId?: string;
+    icon?: React.ReactNode;
+    onClose?: () => void;
+    noIcon?: boolean;
+};
+declare const Banner: React.FunctionComponent<BannerProps>;
+export default Banner;

package/dist/js/Banners/Banner.js

@@ -0,0 +1,262 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _Button = require("../Button");
+
+var _styles2 = require("./styles");
+
+var _typography = require("../styles/typography");
+
+var _HyperLink = require("../HyperLink");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+/**
+ * Styles for <Banner />
+ */
+var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  min-height: 48px;\n  display: flex;\n  color: ", ";\n  margin-top: ", ";\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ", " {\n      margin: 0 0 0 16px;\n    }\n    ", " {\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: ", " !important;\n  }\n"])), function (props) {
+  return props.type ? props.type : _styles.COLORS.correct_100;
+}, _styles.COLORS.black, function (props) {
+  return props.bottom ? 'auto' : '0';
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
+  return props.link;
+});
+
+var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  \n  display: flex;\n  width: 100%;\n  margin: 0 0 0 16px;\n  ", " {\n    margin: 0 16px 0 32px;\n  }\n  ", " {\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"])), function (props) {
+  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color);
+}, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
+
+var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 0 0 0 auto;\n"])));
+
+var ButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: contents;\n  ", ";\n"])), function (props) {
+  return props.type ? (0, _styles2.getButtonStyle)(props.type) : null;
+});
+
+var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n"])));
+
+var Banner = function Banner(_ref) {
+  var size = _ref.size,
+      type = _ref.type,
+      children = _ref.children,
+      bottom = _ref.bottom,
+      testId = _ref.testId,
+      linkText = _ref.linkText,
+      link = _ref.link,
+      onClose = _ref.onClose,
+      icon = _ref.icon,
+      noIcon = _ref.noIcon;
+
+  var _React$useState = React.useState(window.innerWidth),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      width = _React$useState2[0],
+      setWidth = _React$useState2[1];
+
+  React.useEffect(function () {
+    function handleResize() {
+      setWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+  });
+  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
+
+  switch (formatTypeToLowerCase) {
+    case 'warning':
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: _styles.COLORS.warning_100,
+        link: _styles.COLORS.warning_700,
+        hover: _styles.COLORS.warning_20,
+        bottom: bottom
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: _styles.COLORS.warning_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Help, {
+        color: _styles.COLORS.warning_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+        size: size,
+        width: width,
+        color: _styles.COLORS.warning_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+        id: "".concat(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(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: _styles.COLORS.white,
+        action: function action() {
+          return onClose();
+        }
+      }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+        color: _styles.COLORS.warning_500,
+        size: "24px"
+      }))))));
+
+    case 'critical':
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: _styles.COLORS.critical_100,
+        link: _styles.COLORS.critical_700,
+        hover: _styles.COLORS.critical_20,
+        bottom: bottom,
+        className: size
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: _styles.COLORS.critical_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
+        color: _styles.COLORS.critical_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+        size: size,
+        width: width,
+        color: _styles.COLORS.critical_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+        id: "".concat(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(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: _styles.COLORS.white,
+        action: function action() {
+          return onClose();
+        }
+      }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+        color: _styles.COLORS.critical_500,
+        size: "24px"
+      }))))));
+
+    case 'positive':
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: _styles.COLORS.correct_100,
+        link: _styles.COLORS.correct_700,
+        hover: _styles.COLORS.correct_20,
+        bottom: bottom,
+        className: size
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: _styles.COLORS.correct_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.ThumbsUp, {
+        color: _styles.COLORS.correct_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+        size: size,
+        width: width,
+        color: _styles.COLORS.correct_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+        id: "".concat(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(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: _styles.COLORS.white,
+        action: function action() {
+          return onClose();
+        }
+      }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+        color: _styles.COLORS.correct_500,
+        size: "24px"
+      }))))));
+
+    default:
+      return /*#__PURE__*/React.createElement(BannerContainer, {
+        "data-testid": testId,
+        type: _styles.COLORS.primary_100,
+        link: _styles.COLORS.primary_700,
+        hover: _styles.COLORS.primary_20,
+        bottom: bottom,
+        className: size
+      }, /*#__PURE__*/React.createElement(BannerCenter, {
+        color: _styles.COLORS.primary_700,
+        className: size
+      }, icon ? icon : noIcon ? null : /*#__PURE__*/React.createElement(_SystemIcons.Tip, {
+        color: _styles.COLORS.primary_700,
+        size: "24px"
+      }), /*#__PURE__*/React.createElement(BannerContentWrapper, null, /*#__PURE__*/React.createElement(_typography.ComponentResponsive, {
+        size: size,
+        width: width,
+        color: _styles.COLORS.primary_700
+      }, children, "\xA0\xA0", link && linkText && /*#__PURE__*/React.createElement(_HyperLink.HyperLink, {
+        id: "".concat(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(_Button.IconButton, {
+        variant: "secondary",
+        shape: "circular",
+        useTransparentBackground: true,
+        tabbedHereBackgroundColor: _styles.COLORS.white,
+        action: function action() {
+          return onClose();
+        }
+      }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+        color: _styles.COLORS.primary_500,
+        size: "24px"
+      }))))));
+  }
+};
+
+Banner.propTypes = {
+  type: _propTypes.default.string,
+  link: _propTypes.default.string,
+  linkText: _propTypes.default.string,
+  hover: _propTypes.default.string,
+  bottom: _propTypes.default.bool,
+  testId: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  onClose: _propTypes.default.func,
+  noIcon: _propTypes.default.bool
+};
+var _default = Banner;
+exports.default = _default;
+//# sourceMappingURL=Banner.js.map