@coorpacademy/components 11.5.2 → 11.6.0

package/lib/molecule/select-multiple/test/snapshots/index.js.md

@@ -0,0 +1,211 @@
+# Snapshot report for `src/molecule/select-multiple/test/index.js`
+
+The actual snapshot is saved in `index.js.snap`.
+
+Generated by [AVA](https://ava.li).
+
+## should shallow render when select is opened
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow select-multiple__down"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__activeChoices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }
+
+## should shallow render with default props
+
+> Snapshot 1
+
+    ShallowWrapper {
+      <div
+        className="select-multiple__default variables__defaultText"
+      >
+        <span
+          className="select-multiple__title"
+        >
+          Learning Path:
+        </span>
+        <div
+          className="select-multiple__select"
+          onClick={Function {}}
+          title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          <SvgComponent⍟
+            className="select-multiple__arrow"
+            color={undefined}
+          />
+        </div>
+        <div
+          className="select-multiple__choices"
+        >
+          <ul
+            className="select-multiple__list"
+          >
+            <li
+              className="select-multiple__choice"
+              key="0"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 0,
+                    name: 'Digital',
+                    selected: false,
+                    value: 'digital',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="1"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 1,
+                    name: 'Esprit du temps',
+                    selected: false,
+                    value: 'espritDuTemps',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="2"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 2,
+                    name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
+                    selected: true,
+                    value: 'loremIpsum',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+            <li
+              className="select-multiple__choice"
+              key="3"
+            >
+              <TitledCheckbox⍟
+                background={undefined}
+                choice={
+                  {
+                    i: 3,
+                    name: 'Le monde du projet',
+                    selected: false,
+                    value: 'project',
+                  }
+                }
+                onToggle={Function {}}
+              />
+            </li>
+          </ul>
+        </div>
+      </div>,
+    }

package/lib/template/app-review/index.d.ts

@@ -424,7 +424,6 @@ declare const AppReview: {
                 }>>>;
                 endReview: import("prop-types").Requireable<boolean>;
             }>>;
-            reviewBackgroundAriaLabel: import("prop-types").Requireable<string>;
             congrats: import("prop-types").Requireable<import("prop-types").InferProps<{
                 'aria-label': import("prop-types").Requireable<string>;
                 'data-name': import("prop-types").Requireable<string>;

package/lib/template/app-review/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/app-review/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAEvD,QAAA,MAAM,SAAS;2BAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpD,CAAC;AAIF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/app-review/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,cAAc,EAAC,MAAM,cAAc,CAAC;AAEvD,QAAA,MAAM,SAAS;2BAAwB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOpD,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/lib/template/app-review/player/background-review.css

@@ -0,0 +1,235 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+
+.interrogationBase {
+    position: absolute;
+    font-family: "Gilroy";
+    font-size: 700px;
+    font-weight: 700;
+    text-align: center;
+    color: black;
+    opacity: 0.02;
+    user-select: none;
+    z-index: 1;
+  }
+  
+  .mainContainer {
+    position: relative;
+    width: 100vw;
+    height: 100%;
+    background: #ffffff;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+  
+  .container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+  }
+  
+  .interrogationLeft {
+    composes: interrogationBase;
+    left: -14%;
+    top: -15%;
+    transform: rotate(49.77deg);
+  }
+  
+  .interrogationRight {
+    composes: interrogationBase;
+    left: 72%;
+    top: 12%;
+    transform: rotate(135deg);
+  }
+  
+  .recYellow {
+    position: absolute;
+    left: -40.79%;
+    right: 60.63%;
+    top: 0.34%;
+    bottom: 24.77%;
+    background: radial-gradient(
+      circle closest-side at 57.97% 41.54%,
+      #ffc043 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.4;
+    filter: blur(80px);
+  }
+  
+  .recRed {
+    position: absolute;
+    left: 3.72%;
+    right: 42.62%;
+    top: 23.04%;
+    bottom: -9.22%;
+    background: radial-gradient(
+      circle closest-side at 57.97% 41.54%,
+      #ff7043 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.2;
+    filter: blur(80px);
+  }
+  
+  .recBlue {
+    position: absolute;
+    left: 42.5%;
+    right: 0.35%;
+    top: 40.78%;
+    bottom: -67.67%;
+    background: radial-gradient(
+      circle closest-side at 39.9% 50%,
+      rgba(0, 97, 255, 0.55) 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.5;
+    filter: blur(80px);
+  }
+  
+  .recGreen {
+    position: absolute;
+    left: 64.14%;
+    right: -20.87%;
+    top: -27.96%;
+    bottom: 45.85%;
+    background: radial-gradient(
+      circle closest-side at 56.78% 61.36%,
+      #2199ab 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.5;
+    filter: blur(100px);
+  }
+  
+  .recGreenLight {
+    position: absolute;
+    left: 50.13%;
+    right: -18.51%;
+    top: 13.13%;
+    bottom: 6.78%;
+    background: radial-gradient(
+      circle closest-side at 54.18% 40.45%,
+      #18bb98 0%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    opacity: 0.5;
+    filter: blur(100px);
+  }
+  
+  @media tablet {
+    .interrogationLeft {
+      left: -8%;
+      top: 6%;
+      font-size: 500px;
+    }
+  
+    .interrogationRight {
+      left: 70%;
+      top: 6%;
+      font-size: 500px;
+    }
+  
+    .recYellow {
+      left: -20.79%;
+      right: 55.63%;
+      top: 5.34%;
+      bottom: 34.77%;
+      background: radial-gradient(
+        circle closest-side at 57.97% 41.54%,
+        #ffc043 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  
+    .recRed {
+      left: 10.72%;
+      right: 42.62%;
+      top: 33.04%;
+      bottom: -9.22%;
+      background: radial-gradient(
+        circle closest-side at 57.97% 41.54%,
+        #ff7043 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      filter: blur(50px);
+      opacity: 0.2;
+    }
+  
+    .recBlue {
+      bottom: -80.78%;
+      background: radial-gradient(
+        circle closest-side at 39.9% 50%,
+        rgba(0, 97, 255, 0.55) 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  
+    .recGreen {
+      bottom: 43.13%;
+      background: radial-gradient(
+        circle closest-side at 56.78% 61.36%,
+        #2199ab 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      opacity: 0.3;
+    }
+  
+    .recGreenLight {
+      left: 40%;
+      top: 13.13%;
+      background: radial-gradient(
+        circle closest-side at 54.18% 40.45%,
+        #18bb98 0%,
+        rgba(255, 255, 255, 0) 100%
+      );
+    }
+  }
+  
+  @media mobile {
+    .interrogationLeft {
+      left: -25%;
+      top: 3%;
+      font-size: 400px;
+    }
+  
+    .interrogationRight {
+      left: 55%;
+      top: 36%;
+      font-size: 400px;
+    }
+  
+    .recYellow {
+      right: 50%;
+      top: -5.34%;
+      opacity: 0.5;
+    }
+  
+    .recRed {
+      opacity: 0.5;
+    }
+  
+    .recBlue {
+      left: 48.5%;
+      right: -35%;
+      bottom: -50.78%;
+      opacity: 0.5;
+    }
+  
+    .recGreen {
+      top: -23.13%;
+      left: 30%;
+      opacity: 0.5;
+    }
+  
+    .recGreenLight {
+      top: -3.13%;
+      left: 30%;
+      opacity: 0.5;
+    }
+  }
+  

package/lib/template/app-review/player/background-review.d.ts

@@ -0,0 +1,3 @@
+export default ReviewBackground;
+declare function ReviewBackground(): JSX.Element;
+//# sourceMappingURL=background-review.d.ts.map

package/lib/template/app-review/player/background-review.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-review.d.ts","sourceRoot":"","sources":["../../../../src/template/app-review/player/background-review.js"],"names":[],"mappings":";AAGA,iDAkBC"}

package/lib/{atom/review-background/index.js → template/app-review/player/background-review.js}

@@ -5,48 +5,41 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _style = _interopRequireDefault(require("./style.css"));
-
-var _propTypes = _interopRequireDefault(require("./prop-types"));
+var _backgroundReview = _interopRequireDefault(require("./background-review.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ReviewBackground = props => {
-  const {
-    'aria-label': ariaLabel
-  } = props;
+const ReviewBackground = () => {
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.mainContainer,
-    "aria-label": ariaLabel,
+    className: _backgroundReview.default.mainContainer,
     tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.container,
+    className: _backgroundReview.default.container,
     tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.interrogationLeft,
+    className: _backgroundReview.default.interrogationLeft,
     tabIndex: -1
   }, "?"), /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.default.interrogationRight,
+    className: _backgroundReview.default.interrogationRight,
     tabIndex: -1
   }, "?"), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.recYellow,
+    className: _backgroundReview.default.recYellow,
     tabIndex: -1
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.recRed,
+    className: _backgroundReview.default.recRed,
     tabIndex: -1
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.recBlue,
+    className: _backgroundReview.default.recBlue,
     tabIndex: -1
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.recGreen,
+    className: _backgroundReview.default.recGreen,
     tabIndex: -1
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.recGreenLight,
+    className: _backgroundReview.default.recGreenLight,
     tabIndex: -1
   })));
 };
 
-ReviewBackground.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
 var _default = ReviewBackground;
 exports.default = _default;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=background-review.js.map

package/lib/template/app-review/player/background-review.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-review.js","names":["ReviewBackground","style","mainContainer","container","interrogationLeft","interrogationRight","recYellow","recRed","recBlue","recGreen","recGreenLight"],"sources":["../../../../src/template/app-review/player/background-review.js"],"sourcesContent":["import React from 'react';\nimport style from './background-review.css';\n\nconst ReviewBackground = () => {\n  return (\n    <div className={style.mainContainer} tabIndex={-1}>\n      <div className={style.container} tabIndex={-1}>\n        <span className={style.interrogationLeft} tabIndex={-1}>\n          ?\n        </span>\n        <span className={style.interrogationRight} tabIndex={-1}>\n          ?\n        </span>\n        <div className={style.recYellow} tabIndex={-1} />\n        <div className={style.recRed} tabIndex={-1} />\n        <div className={style.recBlue} tabIndex={-1} />\n        <div className={style.recGreen} tabIndex={-1} />\n        <div className={style.recGreenLight} tabIndex={-1} />\n      </div>\n    </div>\n  );\n};\n\nexport default ReviewBackground;\n"],"mappings":";;;;;AAAA;;AACA;;;;AAEA,MAAMA,gBAAgB,GAAG,MAAM;EAC7B,oBACE;IAAK,SAAS,EAAEC,yBAAA,CAAMC,aAAtB;IAAqC,QAAQ,EAAE,CAAC;EAAhD,gBACE;IAAK,SAAS,EAAED,yBAAA,CAAME,SAAtB;IAAiC,QAAQ,EAAE,CAAC;EAA5C,gBACE;IAAM,SAAS,EAAEF,yBAAA,CAAMG,iBAAvB;IAA0C,QAAQ,EAAE,CAAC;EAArD,OADF,eAIE;IAAM,SAAS,EAAEH,yBAAA,CAAMI,kBAAvB;IAA2C,QAAQ,EAAE,CAAC;EAAtD,OAJF,eAOE;IAAK,SAAS,EAAEJ,yBAAA,CAAMK,SAAtB;IAAiC,QAAQ,EAAE,CAAC;EAA5C,EAPF,eAQE;IAAK,SAAS,EAAEL,yBAAA,CAAMM,MAAtB;IAA8B,QAAQ,EAAE,CAAC;EAAzC,EARF,eASE;IAAK,SAAS,EAAEN,yBAAA,CAAMO,OAAtB;IAA+B,QAAQ,EAAE,CAAC;EAA1C,EATF,eAUE;IAAK,SAAS,EAAEP,yBAAA,CAAMQ,QAAtB;IAAgC,QAAQ,EAAE,CAAC;EAA3C,EAVF,eAWE;IAAK,SAAS,EAAER,yBAAA,CAAMS,aAAtB;IAAqC,QAAQ,EAAE,CAAC;EAAhD,EAXF,CADF,CADF;AAiBD,CAlBD;;eAoBeV,gB"}

package/lib/template/app-review/player/index.d.ts

@@ -1,8 +1,7 @@
 export default PlayerReview;
-declare function PlayerReview({ header, stack, reviewBackgroundAriaLabel, congrats, quitPopin }: {
+declare function PlayerReview({ header, stack, congrats, quitPopin }: {
     header: any;
     stack: any;
-    reviewBackgroundAriaLabel: any;
     congrats: any;
     quitPopin: any;
 }): JSX.Element;

package/lib/template/app-review/player/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/app-review/player/index.js"],"names":[],"mappings":";AAWA;;;;;;gBAiCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/app-review/player/index.js"],"names":[],"mappings":";AAWA;;;;;gBAiCC"}

package/lib/template/app-review/player/index.js

@@ -9,8 +9,6 @@ var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reviewBackground = _interopRequireDefault(require("../../../atom/review-background"));
-
 var _reviewCongrats = _interopRequireDefault(require("../../../organism/review-congrats"));
 
 var _reviewHeader = _interopRequireDefault(require("../../../organism/review-header"));
@@ -19,6 +17,8 @@ var _reviewStackedSlides = _interopRequireDefault(require("../../../organism/rev
 
 var _cmPopin = _interopRequireDefault(require("../../../molecule/cm-popin"));
 
+var _backgroundReview = _interopRequireDefault(require("./background-review"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 var _propTypes = _interopRequireDefault(require("./prop-types"));
@@ -28,7 +28,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const PlayerReview = ({
   header,
   stack,
-  reviewBackgroundAriaLabel,
   congrats,
   quitPopin
 }) => {
@@ -39,9 +38,7 @@ const PlayerReview = ({
   }, /*#__PURE__*/_react.default.createElement("div", {
     key: "player-background-container",
     className: _style.default.playerBackground
-  }, /*#__PURE__*/_react.default.createElement(_reviewBackground.default, {
-    "aria-label": reviewBackgroundAriaLabel
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_backgroundReview.default, null)), /*#__PURE__*/_react.default.createElement("div", {
     key: "review-header-wrapper",
     className: (0, _classnames.default)(_style.default.reviewHeaderContainer, congrats && _style.default.reviewHeaderContainerCongrats)
   }, /*#__PURE__*/_react.default.createElement(_reviewHeader.default, header)), /*#__PURE__*/_react.default.createElement(_reviewStackedSlides.default, stack), (0, _isNil.default)(congrats) ? null : /*#__PURE__*/_react.default.createElement("div", {

package/lib/template/app-review/player/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PlayerReview","header","stack","reviewBackgroundAriaLabel","congrats","quitPopin","style","playerReviewContainer","playerBackground","classnames","reviewHeaderContainer","reviewHeaderContainerCongrats","isNil","propTypes"],"sources":["../../../../src/template/app-review/player/index.js"],"sourcesContent":["import React from 'react';\nimport isNil from 'lodash/fp/isNil';\nimport classnames from 'classnames';\nimport ReviewBackground from '../../../atom/review-background';\nimport ReviewCongrats from '../../../organism/review-congrats';\nimport ReviewHeader from '../../../organism/review-header';\nimport StackedSlides from '../../../organism/review-stacked-slides';\nimport CMPopin from '../../../molecule/cm-popin';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst PlayerReview = ({header, stack, reviewBackgroundAriaLabel, congrats, quitPopin}) => {\n  return (\n    <div\n      key=\"review-player-container\"\n      data-name=\"review-player-container\"\n      className={style.playerReviewContainer}\n    >\n      <div key=\"player-background-container\" className={style.playerBackground}>\n        <ReviewBackground aria-label={reviewBackgroundAriaLabel} />\n      </div>\n      <div\n        key=\"review-header-wrapper\"\n        className={classnames(\n          style.reviewHeaderContainer,\n          congrats && style.reviewHeaderContainerCongrats\n        )}\n      >\n        <ReviewHeader {...header} />\n      </div>\n      <StackedSlides {...stack} />\n      {isNil(congrats) ? null : (\n        <div className={style.congrats} data-testid=\"congrats-container\">\n          <ReviewCongrats {...congrats} />\n        </div>\n      )}\n\n      {isNil(quitPopin) ? null : (\n        <div className={style.quitPopin} data-testid=\"quit-popin-container\">\n          <CMPopin {...quitPopin} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nPlayerReview.propTypes = propTypes;\n\nexport default PlayerReview;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAAC;EAACC,MAAD;EAASC,KAAT;EAAgBC,yBAAhB;EAA2CC,QAA3C;EAAqDC;AAArD,CAAD,KAAqE;EACxF,oBACE;IACE,GAAG,EAAC,yBADN;IAEE,aAAU,yBAFZ;IAGE,SAAS,EAAEC,cAAA,CAAMC;EAHnB,gBAKE;IAAK,GAAG,EAAC,6BAAT;IAAuC,SAAS,EAAED,cAAA,CAAME;EAAxD,gBACE,6BAAC,yBAAD;IAAkB,cAAYL;EAA9B,EADF,CALF,eAQE;IACE,GAAG,EAAC,uBADN;IAEE,SAAS,EAAE,IAAAM,mBAAA,EACTH,cAAA,CAAMI,qBADG,EAETN,QAAQ,IAAIE,cAAA,CAAMK,6BAFT;EAFb,gBAOE,6BAAC,qBAAD,EAAkBV,MAAlB,CAPF,CARF,eAiBE,6BAAC,4BAAD,EAAmBC,KAAnB,CAjBF,EAkBG,IAAAU,cAAA,EAAMR,QAAN,IAAkB,IAAlB,gBACC;IAAK,SAAS,EAAEE,cAAA,CAAMF,QAAtB;IAAgC,eAAY;EAA5C,gBACE,6BAAC,uBAAD,EAAoBA,QAApB,CADF,CAnBJ,EAwBG,IAAAQ,cAAA,EAAMP,SAAN,IAAmB,IAAnB,gBACC;IAAK,SAAS,EAAEC,cAAA,CAAMD,SAAtB;IAAiC,eAAY;EAA7C,gBACE,6BAAC,gBAAD,EAAaA,SAAb,CADF,CAzBJ,CADF;AAgCD,CAjCD;;AAmCAL,YAAY,CAACa,SAAb,2CAAyBA,kBAAzB;eAEeb,Y"}
+{"version":3,"file":"index.js","names":["PlayerReview","header","stack","congrats","quitPopin","style","playerReviewContainer","playerBackground","classnames","reviewHeaderContainer","reviewHeaderContainerCongrats","isNil","propTypes"],"sources":["../../../../src/template/app-review/player/index.js"],"sourcesContent":["import React from 'react';\nimport isNil from 'lodash/fp/isNil';\nimport classnames from 'classnames';\nimport ReviewCongrats from '../../../organism/review-congrats';\nimport ReviewHeader from '../../../organism/review-header';\nimport StackedSlides from '../../../organism/review-stacked-slides';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBackground from './background-review';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst PlayerReview = ({header, stack, congrats, quitPopin}) => {\n  return (\n    <div\n      key=\"review-player-container\"\n      data-name=\"review-player-container\"\n      className={style.playerReviewContainer}\n    >\n      <div key=\"player-background-container\" className={style.playerBackground}>\n        <ReviewBackground />\n      </div>\n      <div\n        key=\"review-header-wrapper\"\n        className={classnames(\n          style.reviewHeaderContainer,\n          congrats && style.reviewHeaderContainerCongrats\n        )}\n      >\n        <ReviewHeader {...header} />\n      </div>\n      <StackedSlides {...stack} />\n      {isNil(congrats) ? null : (\n        <div className={style.congrats} data-testid=\"congrats-container\">\n          <ReviewCongrats {...congrats} />\n        </div>\n      )}\n\n      {isNil(quitPopin) ? null : (\n        <div className={style.quitPopin} data-testid=\"quit-popin-container\">\n          <CMPopin {...quitPopin} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nPlayerReview.propTypes = propTypes;\n\nexport default PlayerReview;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAAC;EAACC,MAAD;EAASC,KAAT;EAAgBC,QAAhB;EAA0BC;AAA1B,CAAD,KAA0C;EAC7D,oBACE;IACE,GAAG,EAAC,yBADN;IAEE,aAAU,yBAFZ;IAGE,SAAS,EAAEC,cAAA,CAAMC;EAHnB,gBAKE;IAAK,GAAG,EAAC,6BAAT;IAAuC,SAAS,EAAED,cAAA,CAAME;EAAxD,gBACE,6BAAC,yBAAD,OADF,CALF,eAQE;IACE,GAAG,EAAC,uBADN;IAEE,SAAS,EAAE,IAAAC,mBAAA,EACTH,cAAA,CAAMI,qBADG,EAETN,QAAQ,IAAIE,cAAA,CAAMK,6BAFT;EAFb,gBAOE,6BAAC,qBAAD,EAAkBT,MAAlB,CAPF,CARF,eAiBE,6BAAC,4BAAD,EAAmBC,KAAnB,CAjBF,EAkBG,IAAAS,cAAA,EAAMR,QAAN,IAAkB,IAAlB,gBACC;IAAK,SAAS,EAAEE,cAAA,CAAMF,QAAtB;IAAgC,eAAY;EAA5C,gBACE,6BAAC,uBAAD,EAAoBA,QAApB,CADF,CAnBJ,EAwBG,IAAAQ,cAAA,EAAMP,SAAN,IAAmB,IAAnB,gBACC;IAAK,SAAS,EAAEC,cAAA,CAAMD,SAAtB;IAAiC,eAAY;EAA7C,gBACE,6BAAC,gBAAD,EAAaA,SAAb,CADF,CAzBJ,CADF;AAgCD,CAjCD;;AAmCAJ,YAAY,CAACY,SAAb,2CAAyBA,kBAAzB;eAEeZ,Y"}

package/lib/template/app-review/player/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/app-review/player/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAmB/C,QAAA,MAAM,MAAM,UAAW,iBAAiB,uBAwBvC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/app-review/player/index.native.tsx"],"names":[],"mappings":";AASA,OAAO,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AA6B/C,QAAA,MAAM,MAAM,UAAW,iBAAiB,uBA2BvC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/template/app-review/player/index.native.js

@@ -32,6 +32,15 @@ const createStyleSheet = theme => _reactNative.StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'space-between',
     alignItems: 'center'
+  },
+  backgroundImage: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    width: '100%',
+    height: '100%'
   }
 });
 
@@ -40,7 +49,8 @@ const Slides = props => {
     congrats,
     header,
     stack,
-    quitPopin
+    quitPopin,
+    backgroundImage
   } = props;
   const {
     theme
@@ -56,9 +66,14 @@ const Slides = props => {
     return null;
   }
 
+  const source = backgroundImage;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styleSheet.container
-  }, /*#__PURE__*/_react.default.createElement(_index3.default, header), stack ? /*#__PURE__*/_react.default.createElement(_index.default, stack) : null, congrats ? /*#__PURE__*/_react.default.createElement(_index2.default, congrats) : null, quitPopin ? /*#__PURE__*/_react.default.createElement(_index4.default, quitPopin) : null);
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.ImageBackground, {
+    style: styleSheet.backgroundImage,
+    source: source,
+    resizeMode: "cover"
+  }), /*#__PURE__*/_react.default.createElement(_index3.default, header), stack ? /*#__PURE__*/_react.default.createElement(_index.default, stack) : null, congrats ? /*#__PURE__*/_react.default.createElement(_index2.default, congrats) : null, quitPopin ? /*#__PURE__*/_react.default.createElement(_index4.default, quitPopin) : null);
 };
 
 var _default = Slides;