@coorpacademy/components 10.22.4 → 10.22.7

package/lib/molecule/cm-popin/index.js

@@ -9,10 +9,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
+var _map = _interopRequireDefault(require("lodash/fp/map"));
+
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
 var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link-icon-only"));
 
+var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +31,11 @@ const CMPopin = props => {
     header,
     icon,
     backgroundImageUrl,
-    descriptionText
+    descriptionText,
+    thirdButton,
+    cookieTitle,
+    descriptionBtnTxt,
+    listBtnSwicth
   } = props;
   const logo = {
     AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
@@ -38,18 +46,78 @@ const CMPopin = props => {
     backgroundImage: `url(${backgroundImageUrl})`,
     backgroundSize: 'cover'
   } : null;
+
+  const renderHeader = () => {
+    if (header) return /*#__PURE__*/_react.default.createElement("img", {
+      className: _style.default.headerBackground,
+      src: header
+    });
+    if (mode === 'cookie') return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.cookieHeader
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.cookieIconContainer
+    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaLineSettingsCookie, {
+      className: _style.default.cookieIcon
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.cookieTitle
+    }, cookieTitle));
+    return null;
+  };
+
+  const getClassBtnSwitch = (index, btnList) => {
+    switch (index) {
+      case 0:
+        return _style.default.firstBtnSwitchContainer;
+
+      case btnList.length - 1:
+        return _style.default.lastBtnSwitchContainer;
+
+      default:
+        return _style.default.singleSwitchContainer;
+    }
+  };
+
+  const renderBtnSwitch = () => {
+    return _map.default.convert({
+      cap: false
+    })((el, index) => {
+      const {
+        type,
+        title,
+        value,
+        onChange,
+        titlePosition,
+        theme,
+        details,
+        requiredSelection,
+        disabled
+      } = el;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: getClassBtnSwitch(index, listBtnSwicth)
+      }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
+        type,
+        title,
+        value,
+        onChange,
+        titlePosition,
+        theme,
+        details,
+        requiredSelection,
+        disabled
+      }));
+    })(listBtnSwicth);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.background,
+    className: mode !== 'cookie' ? _style.default.background : null,
     style: backgroundImageStyle,
     "data-name": 'cm-popin-container'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.popin
+    className: mode === 'cookie' ? _style.default.popinCookie : _style.default.popin
   }, /*#__PURE__*/_react.default.createElement("header", {
     className: _style.default.popinHeader
-  }, header ? /*#__PURE__*/_react.default.createElement("img", {
-    className: _style.default.headerBackground,
-    src: header
-  }) : null, onClose ? /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, {
+  }, renderHeader(), onClose ? /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, {
     onClick: onClose,
     "data-name": 'close-icon',
     "aria-label": 'close-icon',
@@ -74,10 +142,12 @@ const CMPopin = props => {
     dangerouslySetInnerHTML: {
       __html: descriptionText
     }
-  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+  }) : null), descriptionBtnTxt ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.descriptionBtn
+  }, descriptionBtnTxt) : null, renderBtnSwitch(), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.buttonContainer
   }, firstButton ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.button
+    className: firstButton.largeButton ? _style.default.largeButton : _style.default.button
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: firstButton.label,
     onClick: firstButton.handleOnclick,
@@ -92,30 +162,49 @@ const CMPopin = props => {
     "data-name": `cm-popin-cta-${secondButton.type}`,
     "aria-label": secondButton['aria-label'],
     type: secondButton.type
+  })) : null, thirdButton ? /*#__PURE__*/_react.default.createElement("div", {
+    className: thirdButton.largeButton ? _style.default.largeButton : _style.default.button
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    label: thirdButton.label,
+    onClick: thirdButton.handleOnclick,
+    "data-name": `cm-popin-cta-${thirdButton.type}`,
+    "aria-label": thirdButton['aria-label'],
+    type: thirdButton.type
   })) : null)));
 };
 
 CMPopin.propTypes = process.env.NODE_ENV !== "production" ? {
   content: _propTypes.default.string,
-  mode: _propTypes.default.oneOf(['alert', 'information']),
+  mode: _propTypes.default.oneOf(['alert', 'information', 'cookie']),
   header: _propTypes.default.string,
   firstButton: _propTypes.default.shape({
     label: _propTypes.default.string,
     handleOnclick: _propTypes.default.func,
     'aria-label': _propTypes.default.string,
-    type: _propTypes.default.string
+    largeButton: _propTypes.default.bool,
+    type: _propTypes.default.oneOf(['dangerous', 'primary', 'secondary'])
   }),
   secondButton: _propTypes.default.shape({
     label: _propTypes.default.string,
     handleOnclick: _propTypes.default.func,
-    type: _propTypes.default.oneOf(['dangerous', 'primary']),
+    type: _propTypes.default.oneOf(['dangerous', 'primary', 'secondary']),
+    'aria-label': _propTypes.default.string,
+    largeButton: _propTypes.default.boolean
+  }),
+  thirdButton: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    handleOnclick: _propTypes.default.func,
+    type: _propTypes.default.oneOf(['dangerous', 'primary', 'secondary']),
     'aria-label': _propTypes.default.string,
     largeButton: _propTypes.default.boolean
   }),
   onClose: _propTypes.default.func,
   icon: _propTypes.default.string,
   backgroundImageUrl: _propTypes.default.string,
-  descriptionText: _propTypes.default.string
+  descriptionText: _propTypes.default.string,
+  cookieTitle: _propTypes.default.string,
+  descriptionBtnTxt: _propTypes.default.string,
+  listBtnSwicth: _propTypes.default.arrayOf(_propTypes.default.shape(_inputSwitch.default.propTypes))
 } : {};
 var _default = CMPopin;
 exports.default = _default;

package/lib/molecule/cm-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","logo","AlertDiamond","WindowUpload","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","style","background","popin","popinHeader","headerBackground","titleContainer","contentSection","message","__html","buttonContainer","button","label","handleOnclick","type","largeButton","propTypes","PropTypes","string","oneOf","shape","func","boolean"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload\n} from '@coorpacademy/nova-icons';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n\n  return (\n    <div className={style.background} style={backgroundImageStyle} data-name={'cm-popin-container'}>\n      <div className={style.popin}>\n        <header className={style.popinHeader}>\n          {header ? <img className={style.headerBackground} src={header} /> : null}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div className={style.titleContainer}>\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    type: PropTypes.string\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string\n};\n\nexport default CMPopin;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","AlertDiamond","WindowUpload","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","style","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","background","popinCookie","popin","popinHeader","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","propTypes","PropTypes","string","oneOf","shape","func","bool","boolean","arrayOf","InputSwitch"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const renderHeader = () => {\n    if (header) return <img className={style.headerBackground} src={header} />;\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n    return null;\n  };\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n        <header className={style.popinHeader}>\n          {renderHeader()}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div className={style.titleContainer}>\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderBtnSwitch()}\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={firstButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n              />\n            </div>\n          ) : null}\n          {thirdButton ? (\n            <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={thirdButton.label}\n                onClick={thirdButton.handleOnclick}\n                data-name={`cm-popin-cta-${thirdButton.type}`}\n                aria-label={thirdButton['aria-label']}\n                type={thirdButton.type}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information', 'cookie']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary'])\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  thirdButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string,\n  cookieTitle: PropTypes.string,\n  descriptionBtnTxt: PropTypes.string,\n  listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes))\n};\n\nexport default CMPopin;\n"],"file":"index.js"}

package/lib/molecule/cm-popin/style.css

@@ -15,6 +15,13 @@
 @value cm_grey_200 from colors;
 @value cm_blue_600 from colors;
 @value cm_grey_500 from colors;
+@value cm_grey_700 from colors;
+@value white from colors;
+@value cm_blue_50 from colors;
+@value breakpoints: '../../variables/breakpoints.css';
+@value mobile from breakpoints;
+@value tablet from breakpoints;
+@value cm_grey_75 from colors;
 
 .background {
   top: 0px;
@@ -28,7 +35,7 @@
   box-sizing: border-box;
   overflow: hidden;
   display: flex;
-  position:fixed;
+  position: fixed;
   z-index: 3;
 }
 
@@ -60,7 +67,6 @@
   justify-content: center;
   align-items: center;
   padding: 40px 40px 0px;
-  position: absolute;
   background: xtraLightGrey;
   font-family: 'Gilroy';
   font-weight: 500;
@@ -72,10 +78,10 @@
   margin: 10px 0px;
 }
 @keyframes popup {
-  0%{
+  0% {
     transform: scale(0);
   }
-  100%{
+  100% {
     transform: scale(1);
   }
 }
@@ -85,7 +91,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 65%;
 }
 
 .content {
@@ -101,9 +106,9 @@
 }
 
 .buttonContainer {
-  width: 100%;
-  height: 80px;
+  min-height: 80px;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: center;
 }
@@ -114,7 +119,7 @@
 }
 
 .largeButton {
-  width: 338px;
+  width: 100%;
   padding: 8px;
 }
 
@@ -149,4 +154,143 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-}
+}
+
+.cookieHeader {
+  width: 100%;
+  background-color: cm_grey_700;
+  padding: 16px 24px;
+  border-radius: 10px 10px 0px 0px;
+  display: flex;
+  align-items: center;
+}
+
+.popinCookie {
+  max-width: 550px;
+  flex-grow: 0;
+  margin: 16px;
+  border-radius: 10px;
+  background-color: cm_grey_50;
+  animation: popup 0.7s;
+  position: fixed;
+  bottom: 32px;
+  left: 32px;
+  z-index: 2;
+}
+.cookieTitle {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 32px;
+  color: white;
+  padding-left: 16px;
+  width: 60%;
+}
+.cookieIcon {
+  height: 20px;
+  width: 20px;
+}
+.cookieIconContainer {
+  width: 39px;
+  height: 39px;
+  border-radius: 8px;
+  background-color: cm_blue_50;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.popinCookie .button  {
+  width: 100%;
+  padding: 0px 8px 0px 0px
+}
+.popinCookie .button span {
+  margin: 0
+}
+
+.popinCookie .message {
+  padding: 24px 24px 40px 24px 
+}
+
+.descriptionBtn {
+  font-family: "Gilroy";
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  color: cm_grey_500;
+  font-style: normal;
+  white-space: pre-line;
+  margin-top: 24px;
+  width: calc(100% - 24px);
+  padding-left: 24px;
+  margin-bottom: 24px;
+}
+
+
+.firstBtnSwitchContainer {
+  height: 56px;
+  background-color: cm_grey_75;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.firstBtnSwitchContainer div:first-child {
+  margin-left: 9px;
+}
+.singleSwitchContainer div:first-child {
+ margin-left: 9px;
+}
+
+.lastBtnSwitchContainer {
+  composes: singleSwitchContainer;
+  margin-bottom: 28px;
+ }
+
+.singleSwitchContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-top: 24px;
+}
+a {
+  color: cm_primary_blue;
+  text-decoration: none;
+}
+
+.popinCookie .buttonContainer  {
+  min-height: 44px;
+  padding-bottom: 16px;
+  width: auto;
+  padding-left: 24px;
+  padding-right: 16px;
+}
+.popinCookie .largeButton {
+  padding: 0px 8px 0px 0px
+}
+@media tablet {
+  .popinCookie {
+    position: fixed;
+    bottom: 10px;
+    left: unset;
+    align-self: center;
+    max-height: calc(100vh - 50px);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .popinCookie .button{
+    width: 100%;
+    padding: 0px 0px 8px 0px
+  }
+  .buttonContainer {
+    flex-wrap: wrap;
+    margin-top: 40px;
+  }
+  .popinCookie .largeButton {
+    padding: 8px 0px 0px 0px
+  }
+  .popinCookie .message {
+    padding: 24px 24px 0px 24px
+  }
+ 
+}

package/lib/molecule/questions/free-text/index.native.js

@@ -51,23 +51,23 @@ const FreeText = props => {
   const [styleSheet, setStylesheet] = (0, _react.useState)(null);
   const {
     brandTheme,
-    theme
+    theme,
+    translations
   } = templateContext;
   const PLACEHOLDER_COLOR = theme.colors.gray.medium; // ------------------------------------
 
   const {
     analytics,
     questionType,
-    fullWitdh,
+    fullWitdh = false,
     testID,
     onChange,
     isDisabled,
-    value,
-    placeholder
+    value
   } = props; // ------------------------------------
 
-  const handleFocus = (0, _react.useMemo)(() => analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType), [analytics, questionType]);
-  const handleBlur = (0, _react.useMemo)(() => analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType), [analytics, questionType]); // ------------------------------------
+  const handleFocus = (0, _react.useCallback)(() => analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType), [analytics, questionType]);
+  const handleBlur = (0, _react.useCallback)(() => analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType), [analytics, questionType]); // ------------------------------------
 
   (0, _react.useEffect)(() => {
     const _stylesheet = createStyleSheet(brandTheme, theme);
@@ -86,7 +86,7 @@ const FreeText = props => {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChangeText: onChange,
-    placeholder: placeholder,
+    placeholder: translations.typeHere,
     placeholderTextColor: PLACEHOLDER_COLOR,
     value: value,
     testID: testID,

package/lib/molecule/questions/free-text/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":["createStyleSheet","brandTheme","theme","StyleSheet","create","input","padding","spacing","tiny","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","text","primary","color","medium","fontWeight","bold","fontSize","regular","textAlign","spaced","paddingVertical","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","PLACEHOLDER_COLOR","testID","onChange","isDisabled","value","placeholder","handleFocus","ANALYTICS_EVENT_TYPE","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet"],"mappings":"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","sourcesContent":["import {View, StyleSheet, TextInput} from 'react-native';\nimport React, {useState, useEffect, useMemo} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n  children: string;\n  fullWitdh: boolean;\n  testID: string;\n  questionType: QuestionType;\n  analytics?: Analytics;\n  onChange: Function;\n  isDisabled: boolean;\n  value: string;\n  placeholder: string;\n}\n\ntype StyleSheetType = {\n  input: {\n    padding: string;\n    borderWidth: number;\n    borderColor: string;\n    borderRadius: number;\n    backgroundColor: string;\n    minWidth: number;\n  };\n  text: {\n    color: string;\n    fontWeight: number;\n    fontSize: number;\n    textAlign: string;\n  };\n  spaced: {\n    paddingVertical: number;\n  };\n  fullWitdh: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (brandTheme, theme) =>\n  StyleSheet.create({\n    input: {\n      padding: theme.spacing.tiny,\n      borderWidth: 1,\n      borderColor: theme.colors.gray.lightMedium,\n      borderRadius: theme.radius.common,\n      backgroundColor: theme.colors.white,\n      minWidth: 175\n    },\n    text: {\n      borderColor: brandTheme?.colors.primary,\n      color: brandTheme?.colors.primary || theme.colors.gray.medium,\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.regular,\n      textAlign: 'center'\n    },\n    spaced: {\n      paddingVertical: theme.spacing.tiny\n    },\n    fullWitdh: {\n      width: '100%'\n    }\n  });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: `question-input-text`,\n      questionType\n    });\n};\n\nconst FreeText = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme} = templateContext;\n  const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n  // ------------------------------------\n\n  const {\n    analytics,\n    questionType,\n    fullWitdh,\n    testID,\n    onChange,\n    isDisabled,\n    value,\n    placeholder\n  } = props;\n\n  // ------------------------------------\n\n  const handleFocus = useMemo(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  const handleBlur = useMemo(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  // ------------------------------------\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={[styleSheet.spaced, fullWitdh && styleSheet.fullWitdh]}>\n      <TextInput\n        style={[styleSheet.input, styleSheet.text]}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChangeText={onChange}\n        placeholder={placeholder}\n        placeholderTextColor={PLACEHOLDER_COLOR}\n        value={value}\n        testID={testID}\n        editable={!isDisabled}\n        selectTextOnFocus={!isDisabled}\n      />\n    </View>\n  );\n};\n\nexport default FreeText;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":["createStyleSheet","brandTheme","theme","StyleSheet","create","input","padding","spacing","tiny","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","text","primary","color","medium","fontWeight","bold","fontSize","regular","textAlign","spaced","paddingVertical","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","translations","PLACEHOLDER_COLOR","testID","onChange","isDisabled","value","handleFocus","ANALYTICS_EVENT_TYPE","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet","typeHere"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAiDA,MAAMA,gBAAgB,GAAG,CAACC,UAAD,EAAaC,KAAb,KACvBC,wBAAWC,MAAX,CAAkB;AAChBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAEJ,KAAK,CAACK,OAAN,CAAcC,IADlB;AAELC,IAAAA,WAAW,EAAE,CAFR;AAGLC,IAAAA,WAAW,EAAER,KAAK,CAACS,MAAN,CAAaC,IAAb,CAAkBC,WAH1B;AAILC,IAAAA,YAAY,EAAEZ,KAAK,CAACa,MAAN,CAAaC,MAJtB;AAKLC,IAAAA,eAAe,EAAEf,KAAK,CAACS,MAAN,CAAaO,KALzB;AAMLC,IAAAA,QAAQ,EAAE;AANL,GADS;AAShBC,EAAAA,IAAI,EAAE;AACJV,IAAAA,WAAW,EAAET,UAAU,EAAEU,MAAZ,CAAmBU,OAD5B;AAEJC,IAAAA,KAAK,EAAErB,UAAU,EAAEU,MAAZ,CAAmBU,OAAnB,IAA8BnB,KAAK,CAACS,MAAN,CAAaC,IAAb,CAAkBW,MAFnD;AAGJC,IAAAA,UAAU,EAAEtB,KAAK,CAACsB,UAAN,CAAiBC,IAHzB;AAIJC,IAAAA,QAAQ,EAAExB,KAAK,CAACwB,QAAN,CAAeC,OAJrB;AAKJC,IAAAA,SAAS,EAAE;AALP,GATU;AAgBhBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,eAAe,EAAE5B,KAAK,CAACK,OAAN,CAAcC;AADzB,GAhBQ;AAmBhBuB,EAAAA,SAAS,EAAE;AACTC,IAAAA,KAAK,EAAE;AADE;AAnBK,CAAlB,CADF;;AAyBA,MAAMC,QAAQ,GAAG,CAACC,SAAD,EAAoBC,SAApB,EAA0CC,YAA1C,KAAyE;AACxFD,EAAAA,SAAS,IACPA,SAAS,CAACF,QAAV,CAAmBC,SAAnB,EAA8B;AAC5BG,IAAAA,EAAE,EAAG,qBADuB;AAE5BD,IAAAA;AAF4B,GAA9B,CADF;AAKD,CAND;;AAQA,MAAME,QAAQ,GAAIC,KAAD,IAAkB;AACjC,QAAMC,eAAe,GAAG,0CAAxB;AACA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,qBAAgC,IAAhC,CAApC;AACA,QAAM;AAACzC,IAAAA,UAAD;AAAaC,IAAAA,KAAb;AAAoByC,IAAAA;AAApB,MAAoCH,eAA1C;AACA,QAAMI,iBAAiB,GAAG1C,KAAK,CAACS,MAAN,CAAaC,IAAb,CAAkBW,MAA5C,CAJiC,CAMjC;;AAEA,QAAM;AAACY,IAAAA,SAAD;AAAYC,IAAAA,YAAZ;AAA0BL,IAAAA,SAAS,GAAG,KAAtC;AAA6Cc,IAAAA,MAA7C;AAAqDC,IAAAA,QAArD;AAA+DC,IAAAA,UAA/D;AAA2EC,IAAAA;AAA3E,MAAoFT,KAA1F,CARiC,CAUjC;;AAEA,QAAMU,WAAW,GAAG,wBAClB,MAAMd,SAAS,IAAIF,QAAQ,CAACiB,gCAAqBC,WAAtB,EAAmChB,SAAnC,EAA8CC,YAA9C,CADT,EAElB,CAACD,SAAD,EAAYC,YAAZ,CAFkB,CAApB;AAKA,QAAMgB,UAAU,GAAG,wBACjB,MAAMjB,SAAS,IAAIF,QAAQ,CAACiB,gCAAqBG,UAAtB,EAAkClB,SAAlC,EAA6CC,YAA7C,CADV,EAEjB,CAACD,SAAD,EAAYC,YAAZ,CAFiB,CAAnB,CAjBiC,CAsBjC;;AAEA,wBAAU,MAAM;AACd,UAAMkB,WAAW,GAAGtD,gBAAgB,CAACC,UAAD,EAAaC,KAAb,CAApC;;AACAwC,IAAAA,aAAa,CAACY,WAAD,CAAb;AACD,GAHD,EAGG,CAACrD,UAAD,EAAaC,KAAb,CAHH,EAxBiC,CA6BjC;;AAEA,MAAI,CAACuC,UAAL,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACA,UAAU,CAACZ,MAAZ,EAAoBE,SAAS,IAAIU,UAAU,CAACV,SAA5C;AAAb,kBACE,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,CAACU,UAAU,CAACpC,KAAZ,EAAmBoC,UAAU,CAACrB,IAA9B,CADT;AAEE,IAAA,OAAO,EAAE6B,WAFX;AAGE,IAAA,MAAM,EAAEG,UAHV;AAIE,IAAA,YAAY,EAAEN,QAJhB;AAKE,IAAA,WAAW,EAAEH,YAAY,CAACY,QAL5B;AAME,IAAA,oBAAoB,EAAEX,iBANxB;AAOE,IAAA,KAAK,EAAEI,KAPT;AAQE,IAAA,MAAM,EAAEH,MARV;AASE,IAAA,QAAQ,EAAE,CAACE,UATb;AAUE,IAAA,iBAAiB,EAAE,CAACA;AAVtB,IADF,CADF;AAgBD,CAnDD;;eAqDeT,Q","sourcesContent":["import {View, StyleSheet, TextInput} from 'react-native';\nimport React, {useState, useEffect, useCallback} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n  fullWitdh?: boolean;\n  testID: string;\n  questionType: QuestionType;\n  analytics?: Analytics;\n  onChange: (text: string) => void;\n  isDisabled: boolean;\n  value: string;\n}\n\ntype StyleSheetType = {\n  input: {\n    padding: string;\n    borderWidth: number;\n    borderColor: string;\n    borderRadius: number;\n    backgroundColor: string;\n    minWidth: number;\n  };\n  text: {\n    color: string;\n    fontWeight:\n      | 'normal'\n      | 'bold'\n      | '100'\n      | '200'\n      | '300'\n      | '400'\n      | '500'\n      | '600'\n      | '700'\n      | '800'\n      | '900'\n      | undefined;\n    fontSize: number;\n    textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;\n  };\n  spaced: {\n    paddingVertical: number;\n  };\n  fullWitdh: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (brandTheme, theme) =>\n  StyleSheet.create({\n    input: {\n      padding: theme.spacing.tiny,\n      borderWidth: 1,\n      borderColor: theme.colors.gray.lightMedium,\n      borderRadius: theme.radius.common,\n      backgroundColor: theme.colors.white,\n      minWidth: 175\n    },\n    text: {\n      borderColor: brandTheme?.colors.primary,\n      color: brandTheme?.colors.primary || theme.colors.gray.medium,\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.regular,\n      textAlign: 'center'\n    },\n    spaced: {\n      paddingVertical: theme.spacing.tiny\n    },\n    fullWitdh: {\n      width: '100%'\n    }\n  });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: `question-input-text`,\n      questionType\n    });\n};\n\nconst FreeText = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n  // ------------------------------------\n\n  const {analytics, questionType, fullWitdh = false, testID, onChange, isDisabled, value} = props;\n\n  // ------------------------------------\n\n  const handleFocus = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  const handleBlur = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  // ------------------------------------\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={[styleSheet.spaced, fullWitdh && styleSheet.fullWitdh]}>\n      <TextInput\n        style={[styleSheet.input, styleSheet.text]}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChangeText={onChange}\n        placeholder={translations.typeHere}\n        placeholderTextColor={PLACEHOLDER_COLOR}\n        value={value}\n        testID={testID}\n        editable={!isDisabled}\n        selectTextOnFocus={!isDisabled}\n      />\n    </View>\n  );\n};\n\nexport default FreeText;\n"],"file":"index.native.js"}