@coorpacademy/components 10.17.3 → 10.19.1-alpha.0

package/es/organism/review-congrats/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-congrats/index.js"],"names":["React","useEffect","useRef","PropTypes","ButtonLink","MoleculeReviewCardCongrats","style","setScroll","container","current","scrollTo","left","behavior","ReviewCongrats","props","ariaLabel","dataName","title","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","timer","setTimeout","clearTimeout","containerCongrats","containerCards","cardStar","cardRank","buttonContainer","buttonRevise","propTypes","string","shape","label","onClick","func","type"],"mappings":"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","sourcesContent":["import React, {useEffect, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../atom/button-link';\nimport MoleculeReviewCardCongrats from '../../molecule/review-card-congrats';\nimport style from './style.css';\n\nexport const setScroll = container => () => {\n  container.current.scrollTo({\n    left: 1000,\n    behavior: 'smooth'\n  });\n};\n\nconst ReviewCongrats = props => {\n  const {\n    'aria-label': ariaLabel,\n    'data-name': dataName,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const container = useRef(null);\n\n  useEffect(() => {\n    const timer = setTimeout(setScroll(container), 2000);\n    return () => timer && clearTimeout(timer);\n  }, []);\n\n  return (\n    <div className={style.containerCongrats} aria-label={ariaLabel} data-name={dataName}>\n      <div className={style.title}>{title}</div>\n      <div ref={container} className={style.containerCards}>\n        <MoleculeReviewCardCongrats {...cardCongratsStar} className={style.cardStar} />\n        <MoleculeReviewCardCongrats\n          {...cardCongratsRank}\n          timerAnimation={1800}\n          className={style.cardRank}\n        />\n      </div>\n      <div className={style.buttonContainer}>\n        <ButtonLink\n          {...buttonRevising}\n          className={style.buttonRevise}\n          data-name=\"revise-skill-link\"\n        />\n        <ButtonLink {...buttonRevisingSkill} className={style.buttonRevise} />\n      </div>\n    </div>\n  );\n};\n\nReviewCongrats.propTypes = {\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  title: PropTypes.string,\n  cardCongratsStar: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),\n  cardCongratsRank: PropTypes.shape(MoleculeReviewCardCongrats.propTypes),\n  buttonRevising: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    type: PropTypes.string\n  }),\n  buttonRevisingSkill: PropTypes.shape({\n    label: PropTypes.string,\n    onClick: PropTypes.func,\n    type: PropTypes.string\n  })\n};\n\nexport default ReviewCongrats;\n"],"file":"index.js"}

package/es/organism/review-congrats/style.css

@@ -0,0 +1,225 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value colors: "../../variables/colors.css";
+@value cm_blue_900 from colors;
+
+@keyframes translateTitle {
+  0% {
+    transform: translateY(50%) scale(1);
+  }
+  50% {
+    transform: translateY(50%) scale(1);
+  }
+  100% {
+    transform: translateY(-300%) scale(0.6);
+  }
+}
+
+@keyframes translateYCardStar {
+  0% {
+    opacity: 0;
+    transform: translateY(0%);
+  }
+  30% {
+    opacity: 0;
+    transform: translateY(40%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+@keyframes translateXCardStar {
+  0% {
+    transform: translateX(50%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes translateCardRank {
+  0% {
+    position: absolute;
+    visibility: hidden;
+    z-index: -1;
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  1% {
+    position: relative;
+    visibility: hidden;
+    z-index: -1;
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  100% {
+    position: relative;
+    visibility: visible;
+    z-index: 0;
+    opacity: 1;
+    transform: translateX(0%);
+  }
+}
+
+.containerCongrats {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+.title {
+  color: cm_blue_900;
+  font-family: 'Gilroy';
+  font-size: 65px;
+  font-style: normal;
+  font-weight: 500;
+  position: relative;
+  top: 200px;
+  user-select: none;
+  animation: translateTitle 1.4s ease-out 0s forwards;
+}
+
+.containerCards {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.cardStar {
+  animation: translateYCardStar 0.5s ease-out 0.8s forwards,
+    translateXCardStar 0.2s ease-in-out 2s forwards;
+  opacity: 0;
+}
+
+.cardRank {
+  animation: translateCardRank 0.2s ease-in-out 2s forwards;
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  margin-left: 32px;
+}
+
+/* ie fallback */
+_:-ms-fullscreen,
+:root .cardRank {
+  position: inherit;
+}
+
+_:-ms-fullscreen,
+:root .cardStar,
+.cardRank {
+  transform: translateX(50%);
+}
+
+.buttonContainer {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-top: 50px;
+}
+
+.buttonRevise {
+  width: fit-content;
+  margin-left: 16px;
+  padding: 12px 16px;
+}
+
+@media mobile {
+  @keyframes translateTitle {
+    0% {
+      transform: translateY(50%) scale(1);
+    }
+    50% {
+      transform: translateY(50%) scale(1);
+    }
+    100% {
+      transform: translateY(-400%) scale(0.9);
+    }
+  }
+
+  @keyframes translateXCardStar {
+    0% {
+      margin-left: calc(100% - (100% - 240px));
+      margin-right: calc((100% - 240px) / 2);
+    }
+    100% {
+      margin-left: 100%;
+      margin-right: calc((100% - 240px) / 2);
+    }
+  }
+
+  @keyframes translateCardRank {
+    0% {
+      opacity: 0;
+      position: absolute;
+      transform: translateX(0);
+      visibility: hidden;
+      z-index: -1;
+    }
+    100% {
+      opacity: 1;
+      position: relative;
+      transform: translateX(0);
+      visibility: visible;
+      z-index: 0;
+    }
+  }
+
+  .containerCongrats {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .title {
+    animation: translateTitle 1.6s ease-out forwards;
+    font-size: 35px;
+  }
+
+  .containerCards {
+    width: 100%;
+    min-height: 350px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin-top: 54px;
+    padding-bottom: 10px;
+  }
+
+  .cardStar {
+    animation: translateYCardStar 0.6s ease-out 0.8s forwards,
+      translateXCardStar 0.2s ease-in-out 2s forwards;
+    flex-shrink: 0;
+    opacity: 0;
+    transform: translateX(0);
+  }
+
+  .cardRank {
+    animation: translateCardRank 0.2s ease-in-out 2s forwards;
+    flex-shrink: 0;
+    margin-right: calc((100% - 240px) / 2);
+  }
+
+  .buttonContainer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 25px;
+    width: 90%;
+  }
+
+  .buttonRevise {
+    margin-bottom: 8px;
+    margin-left: 0;
+    width: 100%;
+  }
+}

package/es/organism/review-congrats/test/fixtures/default.js

@@ -0,0 +1,25 @@
+import moleculeReviewCardStar from '../../../../molecule/review-card-congrats/test/fixtures/star';
+import moleculeReviewCardRank from '../../../../molecule/review-card-congrats/test/fixtures/rank';
+export const defaultProps = {
+  'aria-label': 'Review Congratulations',
+  'data-name': 'review-congrats',
+  title: 'Congratulations!',
+  cardCongratsStar: moleculeReviewCardStar.props,
+  cardCongratsRank: moleculeReviewCardRank.props,
+  buttonRevising: {
+    'aria-label': 'Continue revising button',
+    label: 'Continue revising',
+    onClick: () => console.log('Continue revising'),
+    type: 'tertiary'
+  },
+  buttonRevisingSkill: {
+    label: 'Revise another skill',
+    'aria-label': 'Revise another skill button',
+    onClick: () => console.log('Revise another skill'),
+    type: 'primary'
+  }
+};
+export default {
+  props: defaultProps
+};
+//# sourceMappingURL=default.js.map

package/es/organism/review-congrats/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/review-congrats/test/fixtures/default.js"],"names":["moleculeReviewCardStar","moleculeReviewCardRank","defaultProps","title","cardCongratsStar","props","cardCongratsRank","buttonRevising","label","onClick","console","log","type","buttonRevisingSkill"],"mappings":"AAAA,OAAOA,sBAAP,MAAmC,8DAAnC;AACA,OAAOC,sBAAP,MAAmC,8DAAnC;AAEA,OAAO,MAAMC,YAAY,GAAG;AAC1B,gBAAc,wBADY;AAE1B,eAAa,iBAFa;AAG1BC,EAAAA,KAAK,EAAE,kBAHmB;AAI1BC,EAAAA,gBAAgB,EAAEJ,sBAAsB,CAACK,KAJf;AAK1BC,EAAAA,gBAAgB,EAAEL,sBAAsB,CAACI,KALf;AAM1BE,EAAAA,cAAc,EAAE;AACd,kBAAc,0BADA;AAEdC,IAAAA,KAAK,EAAE,mBAFO;AAGdC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,mBAAZ,CAHD;AAIdC,IAAAA,IAAI,EAAE;AAJQ,GANU;AAY1BC,EAAAA,mBAAmB,EAAE;AACnBL,IAAAA,KAAK,EAAE,sBADY;AAEnB,kBAAc,6BAFK;AAGnBC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,sBAAZ,CAHI;AAInBC,IAAAA,IAAI,EAAE;AAJa;AAZK,CAArB;AAoBP,eAAe;AAACP,EAAAA,KAAK,EAAEH;AAAR,CAAf","sourcesContent":["import moleculeReviewCardStar from '../../../../molecule/review-card-congrats/test/fixtures/star';\nimport moleculeReviewCardRank from '../../../../molecule/review-card-congrats/test/fixtures/rank';\n\nexport const defaultProps = {\n  'aria-label': 'Review Congratulations',\n  'data-name': 'review-congrats',\n  title: 'Congratulations!',\n  cardCongratsStar: moleculeReviewCardStar.props,\n  cardCongratsRank: moleculeReviewCardRank.props,\n  buttonRevising: {\n    'aria-label': 'Continue revising button',\n    label: 'Continue revising',\n    onClick: () => console.log('Continue revising'),\n    type: 'tertiary'\n  },\n  buttonRevisingSkill: {\n    label: 'Revise another skill',\n    'aria-label': 'Revise another skill button',\n    onClick: () => console.log('Revise another skill'),\n    type: 'primary'\n  }\n};\n\nexport default {props: defaultProps};\n"],"file":"default.js"}

package/es/organism/review-congrats/test/fixtures.js

@@ -0,0 +1,13 @@
+import test from 'ava';
+import forEach from 'lodash/forEach';
+import renderComponentMacro from '../../../test/helpers/render-component';
+import OrganismReviewCongrats from '..';
+import fixtureDefault from './fixtures/default';
+test('Organism › OrganismReviewCongrats > should have valid propTypes', t => {
+  t.pass();
+  forEach(OrganismReviewCongrats.propTypes, (value, key) => {
+    t.not(value, undefined, `PropType for "Organism.OrganismReviewCongrats.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
+  });
+});
+test('Organism › OrganismReviewCongrats › Default › should be rendered', renderComponentMacro, OrganismReviewCongrats, fixtureDefault);
+//# sourceMappingURL=fixtures.js.map

package/es/organism/review-congrats/test/fixtures.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/organism/review-congrats/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","OrganismReviewCongrats","fixtureDefault","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,sBAAP,MAAmC,IAAnC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAJ,IAAI,CAAC,iEAAD,EAAoEK,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACAL,EAAAA,OAAO,CAACE,sBAAsB,CAACI,SAAxB,EAAmC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAT,IAAI,CAAC,kEAAD,EAAqEE,oBAArE,EAA2FC,sBAA3F,EAAmHC,cAAnH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismReviewCongrats from '..';\nimport fixtureDefault from './fixtures/default';\n\ntest('Organism › OrganismReviewCongrats > should have valid propTypes', t => {\n  t.pass();\n  forEach(OrganismReviewCongrats.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Organism.OrganismReviewCongrats.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Organism › OrganismReviewCongrats › Default › should be rendered', renderComponentMacro, OrganismReviewCongrats, fixtureDefault);\n"],"file":"fixtures.js"}

package/es/organism/review-congrats/test/review-congrats.js

@@ -0,0 +1,37 @@
+import browserEnv from 'browser-env';
+import test from 'ava';
+import React from 'react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import ReviewCongrats, { setScroll } from '..';
+import defaultFixture from './fixtures/default';
+browserEnv();
+test.afterEach(cleanup);
+test('should click on skill button', async t => {
+  const {
+    container
+  } = render( /*#__PURE__*/React.createElement(ReviewCongrats, defaultFixture.props));
+  await waitFor(() => {
+    const skillLink = container.querySelector('[data-name="revise-skill-link"]');
+    t.truthy(skillLink);
+    if (skillLink) t.notThrows(() => {
+      return fireEvent.click(skillLink);
+    });
+  });
+  t.pass();
+});
+test('setScroll', t => {
+  t.plan(2);
+  const _container = {
+    current: {
+      scrollTo: ({
+        left,
+        behavior
+      }) => {
+        t.is(left, 1000);
+        t.is(behavior, 'smooth');
+      }
+    }
+  };
+  setScroll(_container)();
+});
+//# sourceMappingURL=review-congrats.js.map

package/es/organism/review-congrats/test/review-congrats.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/organism/review-congrats/test/review-congrats.js"],"names":["browserEnv","test","React","render","cleanup","fireEvent","waitFor","ReviewCongrats","setScroll","defaultFixture","afterEach","t","container","props","skillLink","querySelector","truthy","notThrows","click","pass","plan","_container","current","scrollTo","left","behavior","is"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,aAAvB;AACA,OAAOC,IAAP,MAAiB,KAAjB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,EAAgBC,OAAhB,EAAyBC,SAAzB,EAAoCC,OAApC,QAAkD,wBAAlD;AACA,OAAOC,cAAP,IAAwBC,SAAxB,QAAwC,IAAxC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AAEAT,UAAU;AAEVC,IAAI,CAACS,SAAL,CAAeN,OAAf;AAEAH,IAAI,CAAC,8BAAD,EAAiC,MAAMU,CAAN,IAAW;AAC9C,QAAM;AAACC,IAAAA;AAAD,MAAcT,MAAM,eAAC,oBAAC,cAAD,EAAoBM,cAAc,CAACI,KAAnC,CAAD,CAA1B;AAEA,QAAMP,OAAO,CAAC,MAAM;AAClB,UAAMQ,SAAS,GAAGF,SAAS,CAACG,aAAV,CAAwB,iCAAxB,CAAlB;AACAJ,IAAAA,CAAC,CAACK,MAAF,CAASF,SAAT;AACA,QAAIA,SAAJ,EACEH,CAAC,CAACM,SAAF,CAAY,MAAM;AAChB,aAAOZ,SAAS,CAACa,KAAV,CAAgBJ,SAAhB,CAAP;AACD,KAFD;AAGH,GAPY,CAAb;AASAH,EAAAA,CAAC,CAACQ,IAAF;AACD,CAbG,CAAJ;AAeAlB,IAAI,CAAC,WAAD,EAAcU,CAAC,IAAI;AACrBA,EAAAA,CAAC,CAACS,IAAF,CAAO,CAAP;AAEA,QAAMC,UAAU,GAAG;AACjBC,IAAAA,OAAO,EAAE;AACPC,MAAAA,QAAQ,EAAE,CAAC;AAACC,QAAAA,IAAD;AAAOC,QAAAA;AAAP,OAAD,KAAsB;AAC9Bd,QAAAA,CAAC,CAACe,EAAF,CAAKF,IAAL,EAAW,IAAX;AACAb,QAAAA,CAAC,CAACe,EAAF,CAAKD,QAAL,EAAe,QAAf;AACD;AAJM;AADQ,GAAnB;AASAjB,EAAAA,SAAS,CAACa,UAAD,CAAT;AACD,CAbG,CAAJ","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {render, cleanup, fireEvent, waitFor} from '@testing-library/react';\nimport ReviewCongrats, {setScroll} from '..';\nimport defaultFixture from './fixtures/default';\n\nbrowserEnv();\n\ntest.afterEach(cleanup);\n\ntest('should click on skill button', async t => {\n  const {container} = render(<ReviewCongrats {...defaultFixture.props} />);\n\n  await waitFor(() => {\n    const skillLink = container.querySelector('[data-name=\"revise-skill-link\"]');\n    t.truthy(skillLink);\n    if (skillLink)\n      t.notThrows(() => {\n        return fireEvent.click(skillLink);\n      });\n  });\n\n  t.pass();\n});\n\ntest('setScroll', t => {\n  t.plan(2);\n\n  const _container = {\n    current: {\n      scrollTo: ({left, behavior}) => {\n        t.is(left, 1000);\n        t.is(behavior, 'smooth');\n      }\n    }\n  };\n\n  setScroll(_container)();\n});\n"],"file":"review-congrats.js"}

package/es/organism/review-header/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import getOr from 'lodash/fp/getOr';
 import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
 import ReviewHeaderStep from '../../molecule/review-header-steps';
@@ -12,7 +13,8 @@ const ReviewHeader = (props, context) => {
     skillName,
     'aria-label': ariaLabel,
     closeButtonAriaLabel,
-    onQuitClick
+    onQuitClick,
+    hiddenSteps
   } = props;
   const {
     skin
@@ -26,6 +28,7 @@ const ReviewHeader = (props, context) => {
     size: 'responsive',
     className: style.review
   };
+  const stepsWrapper = classnames(style.stepsWrapper, hiddenSteps ? style.stepsWrapperAnimation : null);
   return /*#__PURE__*/React.createElement("div", {
     className: style.headerWrapper,
     "data-name": "review-header",
@@ -46,7 +49,7 @@ const ReviewHeader = (props, context) => {
     "aria-label": skillName,
     "data-name": "review-header-skill-name"
   }, skillName)), /*#__PURE__*/React.createElement("div", {
-    className: style.stepsWrapper
+    className: stepsWrapper
   }, /*#__PURE__*/React.createElement(ReviewHeaderStep, {
     steps: steps,
     key: 'review-header-steps'
@@ -62,7 +65,8 @@ ReviewHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   skillName: PropTypes.string.isRequired,
   'aria-label': PropTypes.string,
   closeButtonAriaLabel: PropTypes.string,
-  onQuitClick: PropTypes.func
+  onQuitClick: PropTypes.func,
+  hiddenSteps: PropTypes.bool
 } : {};
 export default ReviewHeader;
 //# sourceMappingURL=index.js.map

package/es/organism/review-header/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-header/index.js"],"names":["React","PropTypes","getOr","ButtonLinkIconOnly","ReviewHeaderStep","style","ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","skin","primarySkinColor","buttonProps","icon","onClick","size","className","review","headerWrapper","titlesWrapper","title","color","stepsWrapper","iconButtonWrapper","propTypes","string","isRequired","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,gBAAP,MAA6B,oCAA7B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,SAHI;AAIJ,kBAAcC,SAJV;AAKJC,IAAAA,oBALI;AAMJC,IAAAA;AANI,MAOFP,KAPJ;AAQA,QAAM;AAACQ,IAAAA;AAAD,MAASP,OAAf;AACA,QAAMQ,gBAAgB,GAAGd,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8Ba,IAA9B,CAA9B;AAEA,QAAME,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAE,OADY;AAElB,iBAAa,4BAFK;AAGlB,kBAAcL,oBAHI;AAIlBM,IAAAA,OAAO,EAAEL,WAJS;AAKlBM,IAAAA,IAAI,EAAE,YALY;AAMlBC,IAAAA,SAAS,EAAEhB,KAAK,CAACiB;AANC,GAApB;AASA,sBACE;AAAK,IAAA,SAAS,EAAEjB,KAAK,CAACkB,aAAtB;AAAqC,iBAAU,eAA/C;AAA+D,kBAAYX;AAA3E,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACmB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEnB,KAAK,CAACoB,KAAtB;AAA6B,IAAA,KAAK,EAAEf,IAApC;AAA0C,kBAAYA,IAAtD;AAA4D,iBAAU;AAAtE,KACGA,IADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEL,KAAK,CAACM,SADnB;AAEE,IAAA,KAAK,EAAE;AACLe,MAAAA,KAAK,EAAEV;AADF,KAFT;AAKE,IAAA,KAAK,EAAEL,SALT;AAME,kBAAYA,SANd;AAOE,iBAAU;AAPZ,KASGA,SATH,CAJF,CADF,eAkBE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACsB;AAAtB,kBACE,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAElB,KAAzB;AAAgC,IAAA,GAAG,EAAE;AAArC,IADF,CAlBF,eAsBE;AAAK,IAAA,SAAS,EAAEJ,KAAK,CAACuB,iBAAtB;AAAyC,iBAAU;AAAnD,kBACE,oBAAC,kBAAD,EAAwBX,WAAxB,CADF,CAtBF,CADF;AA4BD,CAjDD;;AAmDAX,YAAY,CAACuB,SAAb,2CAAyB;AACvBpB,EAAAA,KAAK,EAAEL,gBAAgB,CAACyB,SAAjB,CAA2BpB,KADX;AAEvBC,EAAAA,IAAI,EAAET,SAAS,CAAC6B,MAAV,CAAiBC,UAFA;AAGvBpB,EAAAA,SAAS,EAAEV,SAAS,CAAC6B,MAAV,CAAiBC,UAHL;AAIvB,gBAAc9B,SAAS,CAAC6B,MAJD;AAKvBjB,EAAAA,oBAAoB,EAAEZ,SAAS,CAAC6B,MALT;AAMvBhB,EAAAA,WAAW,EAAEb,SAAS,CAAC+B;AANA,CAAzB;AASA,eAAe1B,YAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderStep from '../../molecule/review-header-steps';\nimport style from './style.css';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={style.stepsWrapper}>\n        <ReviewHeaderStep steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-name=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = {\n  steps: ReviewHeaderStep.propTypes.steps,\n  mode: PropTypes.string.isRequired,\n  skillName: PropTypes.string.isRequired,\n  'aria-label': PropTypes.string,\n  closeButtonAriaLabel: PropTypes.string,\n  onQuitClick: PropTypes.func\n};\n\nexport default ReviewHeader;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/review-header/index.js"],"names":["React","PropTypes","classnames","getOr","ButtonLinkIconOnly","ReviewHeaderStep","style","ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","hiddenSteps","skin","primarySkinColor","buttonProps","icon","onClick","size","className","review","stepsWrapper","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","propTypes","string","isRequired","func","bool"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,gBAAP,MAA6B,oCAA7B;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACvC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,SAHI;AAIJ,kBAAcC,SAJV;AAKJC,IAAAA,oBALI;AAMJC,IAAAA,WANI;AAOJC,IAAAA;AAPI,MAQFR,KARJ;AASA,QAAM;AAACS,IAAAA;AAAD,MAASR,OAAf;AACA,QAAMS,gBAAgB,GAAGf,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8Bc,IAA9B,CAA9B;AAEA,QAAME,WAAW,GAAG;AAClBC,IAAAA,IAAI,EAAE,OADY;AAElB,iBAAa,4BAFK;AAGlB,kBAAcN,oBAHI;AAIlBO,IAAAA,OAAO,EAAEN,WAJS;AAKlBO,IAAAA,IAAI,EAAE,YALY;AAMlBC,IAAAA,SAAS,EAAEjB,KAAK,CAACkB;AANC,GAApB;AASA,QAAMC,YAAY,GAAGvB,UAAU,CAC7BI,KAAK,CAACmB,YADuB,EAE7BT,WAAW,GAAGV,KAAK,CAACoB,qBAAT,GAAiC,IAFf,CAA/B;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEpB,KAAK,CAACqB,aAAtB;AAAqC,iBAAU,eAA/C;AAA+D,kBAAYd;AAA3E,kBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACsB;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEtB,KAAK,CAACuB,KAAtB;AAA6B,IAAA,KAAK,EAAElB,IAApC;AAA0C,kBAAYA,IAAtD;AAA4D,iBAAU;AAAtE,KACGA,IADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEL,KAAK,CAACM,SADnB;AAEE,IAAA,KAAK,EAAE;AACLkB,MAAAA,KAAK,EAAEZ;AADF,KAFT;AAKE,IAAA,KAAK,EAAEN,SALT;AAME,kBAAYA,SANd;AAOE,iBAAU;AAPZ,KASGA,SATH,CAJF,CADF,eAkBE;AAAK,IAAA,SAAS,EAAEa;AAAhB,kBACE,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEf,KAAzB;AAAgC,IAAA,GAAG,EAAE;AAArC,IADF,CAlBF,eAsBE;AAAK,IAAA,SAAS,EAAEJ,KAAK,CAACyB,iBAAtB;AAAyC,iBAAU;AAAnD,kBACE,oBAAC,kBAAD,EAAwBZ,WAAxB,CADF,CAtBF,CADF;AA4BD,CAvDD;;AAyDAZ,YAAY,CAACyB,SAAb,2CAAyB;AACvBtB,EAAAA,KAAK,EAAEL,gBAAgB,CAAC2B,SAAjB,CAA2BtB,KADX;AAEvBC,EAAAA,IAAI,EAAEV,SAAS,CAACgC,MAAV,CAAiBC,UAFA;AAGvBtB,EAAAA,SAAS,EAAEX,SAAS,CAACgC,MAAV,CAAiBC,UAHL;AAIvB,gBAAcjC,SAAS,CAACgC,MAJD;AAKvBnB,EAAAA,oBAAoB,EAAEb,SAAS,CAACgC,MALT;AAMvBlB,EAAAA,WAAW,EAAEd,SAAS,CAACkC,IANA;AAOvBnB,EAAAA,WAAW,EAAEf,SAAS,CAACmC;AAPA,CAAzB;AAUA,eAAe7B,YAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderStep from '../../molecule/review-header-steps';\nimport style from './style.css';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick,\n    hiddenSteps\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderStep steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-name=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = {\n  steps: ReviewHeaderStep.propTypes.steps,\n  mode: PropTypes.string.isRequired,\n  skillName: PropTypes.string.isRequired,\n  'aria-label': PropTypes.string,\n  closeButtonAriaLabel: PropTypes.string,\n  onQuitClick: PropTypes.func,\n  hiddenSteps: PropTypes.bool\n};\n\nexport default ReviewHeader;\n"],"file":"index.js"}

package/es/organism/review-header/style.css

@@ -45,6 +45,13 @@
   left: 50%;
   transform: translate(-50%, 0);
   display: flex;
+  opacity: 1;
+}
+
+.stepsWrapperAnimation {
+  opacity: 0;
+  transform: translate(-50%, -180%);
+  transition: opacity 0.5s ease-in-out 0.5s, transform 0.5s ease-in-out 0.5s;
 }
 
 .iconButtonWrapper {
@@ -96,6 +103,7 @@
 }
 
 @media mobile {
+
   .headerWrapper {
     height: 126px;
     align-items: start;
@@ -108,6 +116,11 @@
     bottom: 20px;
   }
 
+  .stepsWrapperAnimation {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out 0.5s;
+  }
+
   .titlesWrapper {
     margin-top: 16px;
     margin-left: 20px;

package/es/organism/review-header/test/fixtures/steps-animation.js

@@ -0,0 +1,11 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import stepsProps from '../../../../molecule/review-header-steps/test/fixtures/all-questions-ok';
+import { defaultHeaderProps } from './all-questions-ok';
+export default {
+  props: _extends(_extends({}, defaultHeaderProps), {}, {
+    steps: stepsProps.props.steps,
+    hiddenSteps: true
+  })
+};
+//# sourceMappingURL=steps-animation.js.map

package/es/organism/review-header/test/fixtures/steps-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/organism/review-header/test/fixtures/steps-animation.js"],"names":["stepsProps","defaultHeaderProps","props","steps","hiddenSteps"],"mappings":";;AAAA,OAAOA,UAAP,MAAuB,yEAAvB;AACA,SAAQC,kBAAR,QAAiC,oBAAjC;AAEA,eAAe;AACbC,EAAAA,KAAK,wBACAD,kBADA;AAEHE,IAAAA,KAAK,EAAEH,UAAU,CAACE,KAAX,CAAiBC,KAFrB;AAGHC,IAAAA,WAAW,EAAE;AAHV;AADQ,CAAf","sourcesContent":["import stepsProps from '../../../../molecule/review-header-steps/test/fixtures/all-questions-ok';\nimport {defaultHeaderProps} from './all-questions-ok';\n\nexport default {\n  props: {\n    ...defaultHeaderProps,\n    steps: stepsProps.props.steps,\n    hiddenSteps: true\n  }\n};\n"],"file":"steps-animation.js"}

package/es/organism/review-header/test/fixtures.js

@@ -8,6 +8,7 @@ import fixtureCurrentQuestionWrong from './fixtures/current-question-wrong';
 import fixtureFirstQuestionCurrentRight from './fixtures/first-question-current-right';
 import fixtureNoAnsweredQuestion from './fixtures/no-answered-question';
 import fixtureQuestionToRepeat from './fixtures/question-to-repeat';
+import fixtureStepsAnimation from './fixtures/steps-animation';
 test('Organism › OrganismReviewHeader > should have valid propTypes', t => {
   t.pass();
   forEach(OrganismReviewHeader.propTypes, (value, key) => {
@@ -20,4 +21,5 @@ test('Organism › OrganismReviewHeader › CurrentQuestionWrong › should be r
 test('Organism › OrganismReviewHeader › FirstQuestionCurrentRight › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureFirstQuestionCurrentRight);
 test('Organism › OrganismReviewHeader › NoAnsweredQuestion › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureNoAnsweredQuestion);
 test('Organism › OrganismReviewHeader › QuestionToRepeat › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureQuestionToRepeat);
+test('Organism › OrganismReviewHeader › StepsAnimation › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureStepsAnimation);
 //# sourceMappingURL=fixtures.js.map

package/es/organism/review-header/test/fixtures.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/organism/review-header/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","OrganismReviewHeader","fixtureAllQuestionsOk","fixtureCurrentQuestionNoAnswered","fixtureCurrentQuestionWrong","fixtureFirstQuestionCurrentRight","fixtureNoAnsweredQuestion","fixtureQuestionToRepeat","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,oBAAP,MAAiC,IAAjC;AACA,OAAOC,qBAAP,MAAkC,6BAAlC;AACA,OAAOC,gCAAP,MAA6C,yCAA7C;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,gCAAP,MAA6C,yCAA7C;AACA,OAAOC,yBAAP,MAAsC,iCAAtC;AACA,OAAOC,uBAAP,MAAoC,+BAApC;AAEAT,IAAI,CAAC,+DAAD,EAAkEU,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACAV,EAAAA,OAAO,CAACE,oBAAoB,CAACS,SAAtB,EAAiC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAd,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,oBAAhG,EAAsHC,qBAAtH,CAAJ;AACAJ,IAAI,CAAC,kFAAD,EAAqFE,oBAArF,EAA2GC,oBAA3G,EAAiIE,gCAAjI,CAAJ;AACAL,IAAI,CAAC,6EAAD,EAAgFE,oBAAhF,EAAsGC,oBAAtG,EAA4HG,2BAA5H,CAAJ;AACAN,IAAI,CAAC,kFAAD,EAAqFE,oBAArF,EAA2GC,oBAA3G,EAAiII,gCAAjI,CAAJ;AACAP,IAAI,CAAC,2EAAD,EAA8EE,oBAA9E,EAAoGC,oBAApG,EAA0HK,yBAA1H,CAAJ;AACAR,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,oBAAlG,EAAwHM,uBAAxH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismReviewHeader from '..';\nimport fixtureAllQuestionsOk from './fixtures/all-questions-ok';\nimport fixtureCurrentQuestionNoAnswered from './fixtures/current-question-no-answered';\nimport fixtureCurrentQuestionWrong from './fixtures/current-question-wrong';\nimport fixtureFirstQuestionCurrentRight from './fixtures/first-question-current-right';\nimport fixtureNoAnsweredQuestion from './fixtures/no-answered-question';\nimport fixtureQuestionToRepeat from './fixtures/question-to-repeat';\n\ntest('Organism › OrganismReviewHeader > should have valid propTypes', t => {\n  t.pass();\n  forEach(OrganismReviewHeader.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Organism.OrganismReviewHeader.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Organism › OrganismReviewHeader › AllQuestionsOk › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureAllQuestionsOk);\ntest('Organism › OrganismReviewHeader › CurrentQuestionNoAnswered › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionNoAnswered);\ntest('Organism › OrganismReviewHeader › CurrentQuestionWrong › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionWrong);\ntest('Organism › OrganismReviewHeader › FirstQuestionCurrentRight › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureFirstQuestionCurrentRight);\ntest('Organism › OrganismReviewHeader › NoAnsweredQuestion › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureNoAnsweredQuestion);\ntest('Organism › OrganismReviewHeader › QuestionToRepeat › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureQuestionToRepeat);\n"],"file":"fixtures.js"}
+{"version":3,"sources":["../../../../src/organism/review-header/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","OrganismReviewHeader","fixtureAllQuestionsOk","fixtureCurrentQuestionNoAnswered","fixtureCurrentQuestionWrong","fixtureFirstQuestionCurrentRight","fixtureNoAnsweredQuestion","fixtureQuestionToRepeat","fixtureStepsAnimation","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,oBAAP,MAAiC,IAAjC;AACA,OAAOC,qBAAP,MAAkC,6BAAlC;AACA,OAAOC,gCAAP,MAA6C,yCAA7C;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,gCAAP,MAA6C,yCAA7C;AACA,OAAOC,yBAAP,MAAsC,iCAAtC;AACA,OAAOC,uBAAP,MAAoC,+BAApC;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AAEAV,IAAI,CAAC,+DAAD,EAAkEW,CAAC,IAAI;AACzEA,EAAAA,CAAC,CAACC,IAAF;AACAX,EAAAA,OAAO,CAACE,oBAAoB,CAACU,SAAtB,EAAiC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACtDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,yDAAwDF,GAAI,mEAArF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAf,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,oBAAhG,EAAsHC,qBAAtH,CAAJ;AACAJ,IAAI,CAAC,kFAAD,EAAqFE,oBAArF,EAA2GC,oBAA3G,EAAiIE,gCAAjI,CAAJ;AACAL,IAAI,CAAC,6EAAD,EAAgFE,oBAAhF,EAAsGC,oBAAtG,EAA4HG,2BAA5H,CAAJ;AACAN,IAAI,CAAC,kFAAD,EAAqFE,oBAArF,EAA2GC,oBAA3G,EAAiII,gCAAjI,CAAJ;AACAP,IAAI,CAAC,2EAAD,EAA8EE,oBAA9E,EAAoGC,oBAApG,EAA0HK,yBAA1H,CAAJ;AACAR,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,oBAAlG,EAAwHM,uBAAxH,CAAJ;AACAT,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,oBAAhG,EAAsHO,qBAAtH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport OrganismReviewHeader from '..';\nimport fixtureAllQuestionsOk from './fixtures/all-questions-ok';\nimport fixtureCurrentQuestionNoAnswered from './fixtures/current-question-no-answered';\nimport fixtureCurrentQuestionWrong from './fixtures/current-question-wrong';\nimport fixtureFirstQuestionCurrentRight from './fixtures/first-question-current-right';\nimport fixtureNoAnsweredQuestion from './fixtures/no-answered-question';\nimport fixtureQuestionToRepeat from './fixtures/question-to-repeat';\nimport fixtureStepsAnimation from './fixtures/steps-animation';\n\ntest('Organism › OrganismReviewHeader > should have valid propTypes', t => {\n  t.pass();\n  forEach(OrganismReviewHeader.propTypes, (value, key) => {\n    t.not(value, undefined, `PropType for \"Organism.OrganismReviewHeader.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n  });\n});\n\ntest('Organism › OrganismReviewHeader › AllQuestionsOk › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureAllQuestionsOk);\ntest('Organism › OrganismReviewHeader › CurrentQuestionNoAnswered › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionNoAnswered);\ntest('Organism › OrganismReviewHeader › CurrentQuestionWrong › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureCurrentQuestionWrong);\ntest('Organism › OrganismReviewHeader › FirstQuestionCurrentRight › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureFirstQuestionCurrentRight);\ntest('Organism › OrganismReviewHeader › NoAnsweredQuestion › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureNoAnsweredQuestion);\ntest('Organism › OrganismReviewHeader › QuestionToRepeat › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureQuestionToRepeat);\ntest('Organism › OrganismReviewHeader › StepsAnimation › should be rendered', renderComponentMacro, OrganismReviewHeader, fixtureStepsAnimation);\n"],"file":"fixtures.js"}

package/es/variables/colors.css

@@ -55,6 +55,7 @@
 @value cm_pink_50: #ffefeb;
 @value cm_purple_200: #7340FF;
 @value cm_yellow_scorm: #FFB800;
+@value cm_yellow_secondary_200: #ffde03;
 @value cm_yellow_100: #ffc043;
 @value cm_yellow_200: #DB9200;
 @value cm_yellow_400: #bd7e00;

package/lib/atom/checkbox-with-title/index.js

@@ -32,8 +32,9 @@ const CheckboxWithTitle = props => {
   } = props;
   const idCheckbox = (0, _uniqueId2.default)('input-checkbox-');
   const handleChange = (0, _react.useMemo)(() => e => onChange(e.target.checked), [onChange]);
-  return /*#__PURE__*/_react.default.createElement("label", {
-    className: _style.default.container,
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: idCheckbox
   }, /*#__PURE__*/_react.default.createElement("input", {
     type: "checkbox",
@@ -48,7 +49,7 @@ const CheckboxWithTitle = props => {
     className: _style.default.label
   }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusValidate, {
     className: _style.default.icon
-  })), /*#__PURE__*/_react.default.createElement("span", {
+  }))), /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.title
   }, title));
 };

package/lib/atom/checkbox-with-title/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/checkbox-with-title/index.js"],"names":["CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","style","container","checkbox","label","icon","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,iBAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;AASA,QAAMO,UAAU,GAAG,wBAAS,iBAAT,CAAnB;AACA,QAAMC,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAA3B,EAA+C,CAACC,QAAD,CAA/C,CAArB;AAEA,sBACE;AAAO,IAAA,SAAS,EAAEO,eAAMC,SAAxB;AAAmC,IAAA,OAAO,EAAEL;AAA5C,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEA,UAFN;AAGE,IAAA,IAAI,EAAEL,IAHR;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,OAAO,EAAEL,OALX;AAME,IAAA,SAAS,EAAEQ,eAAME,QANnB;AAOE,iBAAWR,QAPb;AAQE,kBAAYC;AARd,IADF,eAWE;AAAK,IAAA,SAAS,EAAEK,eAAMG;AAAtB,kBACE,6BAAC,kCAAD;AAAW,IAAA,SAAS,EAAEH,eAAMI;AAA5B,IADF,CAXF,eAcE;AAAM,IAAA,SAAS,EAAEJ,eAAMV;AAAvB,KAA+BA,KAA/B,CAdF,CADF;AAkBD,CA/BD;;AAiCAF,iBAAiB,CAACiB,SAAlB,2CAA8B;AAC5Bf,EAAAA,KAAK,EAAEgB,mBAAUC,MADW;AAE5BhB,EAAAA,IAAI,EAAEe,mBAAUC,MAFY;AAG5Bf,EAAAA,OAAO,EAAEc,mBAAUE,IAHS;AAI5Bf,EAAAA,QAAQ,EAAEa,mBAAUG,IAJQ;AAK5B,gBAAcH,mBAAUC,MALI;AAM5B,eAAaD,mBAAUC;AANK,CAA9B;eAQenB,iB","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst CheckboxWithTitle = props => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  } = props;\n\n  const idCheckbox = uniqueId('input-checkbox-');\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <label className={style.container} htmlFor={idCheckbox}>\n      <input\n        type=\"checkbox\"\n        id={idCheckbox}\n        name={name}\n        onChange={handleChange}\n        checked={checked}\n        className={style.checkbox}\n        data-name={dataName}\n        aria-label={ariaLabel}\n      />\n      <div className={style.label}>\n        <CheckIcon className={style.icon} />\n      </div>\n      <span className={style.title}>{title}</span>\n    </label>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string\n};\nexport default CheckboxWithTitle;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/checkbox-with-title/index.js"],"names":["CheckboxWithTitle","props","title","name","checked","onChange","dataName","ariaLabel","idCheckbox","handleChange","e","target","style","container","checkbox","label","icon","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAAQ,iBAJJ;AAKJ,iBAAaC,QALT;AAMJ,kBAAcC;AANV,MAOFN,KAPJ;AASA,QAAMO,UAAU,GAAG,wBAAS,iBAAT,CAAnB;AACA,QAAMC,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,OAAV,CAA3B,EAA+C,CAACC,QAAD,CAA/C,CAArB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEO,eAAMC;AAAtB,kBACE;AAAO,IAAA,OAAO,EAAEL;AAAhB,kBACE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEA,UAFN;AAGE,IAAA,IAAI,EAAEL,IAHR;AAIE,IAAA,QAAQ,EAAEM,YAJZ;AAKE,IAAA,OAAO,EAAEL,OALX;AAME,IAAA,SAAS,EAAEQ,eAAME,QANnB;AAOE,iBAAWR,QAPb;AAQE,kBAAYC;AARd,IADF,eAWE;AAAK,IAAA,SAAS,EAAEK,eAAMG;AAAtB,kBACE,6BAAC,kCAAD;AAAW,IAAA,SAAS,EAAEH,eAAMI;AAA5B,IADF,CAXF,CADF,eAgBE;AAAM,IAAA,SAAS,EAAEJ,eAAMV;AAAvB,KAA+BA,KAA/B,CAhBF,CADF;AAoBD,CAjCD;;AAmCAF,iBAAiB,CAACiB,SAAlB,2CAA8B;AAC5Bf,EAAAA,KAAK,EAAEgB,mBAAUC,MADW;AAE5BhB,EAAAA,IAAI,EAAEe,mBAAUC,MAFY;AAG5Bf,EAAAA,OAAO,EAAEc,mBAAUE,IAHS;AAI5Bf,EAAAA,QAAQ,EAAEa,mBAAUG,IAJQ;AAK5B,gBAAcH,mBAAUC,MALI;AAM5B,eAAaD,mBAAUC;AANK,CAA9B;eAQenB,iB","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst CheckboxWithTitle = props => {\n  const {\n    title,\n    name,\n    checked,\n    onChange = noop,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  } = props;\n\n  const idCheckbox = uniqueId('input-checkbox-');\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  return (\n    <div className={style.container}>\n      <label htmlFor={idCheckbox}>\n        <input\n          type=\"checkbox\"\n          id={idCheckbox}\n          name={name}\n          onChange={handleChange}\n          checked={checked}\n          className={style.checkbox}\n          data-name={dataName}\n          aria-label={ariaLabel}\n        />\n        <div className={style.label}>\n          <CheckIcon className={style.icon} />\n        </div>\n      </label>\n      <span className={style.title}>{title}</span>\n    </div>\n  );\n};\n\nCheckboxWithTitle.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string\n};\nexport default CheckboxWithTitle;\n"],"file":"index.js"}

package/lib/atom/lottie-wrapper/index.js

@@ -114,9 +114,9 @@ const LottieWrapper = props => {
     // to remove when the migration towards @testing-library/react is done
 
     /* istanbul ignore next */
-    if (animationItem && (0, _includes.default)(animationControl, (0, _keys.default)((0, _omit.default)('loading', ANIMATION_CONTROL))) && !autoplay) {
+    if ((0, _includes.default)(animationControl, (0, _keys.default)((0, _omit.default)('loading', ANIMATION_CONTROL))) && !autoplay) {
       setIsAnimationVisible(true);
-      animationItem[animationControl]();
+      if (animationItem) animationItem[animationControl]();
       if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);
     }
   }, [animationControl, animationItem, autoplay]);

package/lib/atom/lottie-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","style","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","lottie","unfetch","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","PropTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n  play: 'play',\n  pause: 'pause',\n  stop: 'stop',\n  loading: 'loading'\n};\n\nconst isIE11 = () => {\n  if (typeof window === 'undefined') return;\n  const userAgent = get('navigator.userAgent', window);\n  const hasMsCrypto = has('msCrypto', window);\n  const hasRevision = includes('rv:', userAgent);\n  const hasTrident = includes('Trident/', userAgent);\n\n  return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n  _lottie,\n  _fetch,\n  animationSrc,\n  containerRef,\n  loop,\n  animationClassnames,\n  hideOnTransparent,\n  autoplay\n) => {\n  const animationUrl = new URL(animationSrc).toString();\n  const fetchResult = await _fetch(animationUrl, {\n    headers: {\n      'X-Requested-With': 'XMLHttpRequest',\n      'Content-Type': 'application/json'\n    }\n  });\n\n  const animationData = await fetchResult.json();\n\n  const animation = _lottie.loadAnimation({\n    container: containerRef.current, // the dom element that will contain the animation\n    renderer: 'svg',\n    autoplay,\n    loop,\n    animationData,\n    rendererSettings: {\n      className: animationClassnames,\n      hideOnTransparent,\n      preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n    }\n  });\n  return animation;\n};\n\nconst LottieWrapper = props => {\n  const {\n    className,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    animationSrc,\n    loop = false,\n    rendererSettings = {},\n    width,\n    height,\n    ie11ImageBackup,\n    backupImageClassName,\n    autoplay = true,\n    animationControl\n  } = props;\n\n  const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n  const containerRef = useRef(null);\n\n  // lottie's animation instance\n  const [animationItem, setAnimationItem] = useState(null);\n\n  const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n  const _isIE11 = useMemo(() => isIE11(), []);\n\n  const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n  const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n    animationClassName\n  ]);\n\n  const ie11BackupImageClassName = useMemo(\n    () => classnames(backupImageClassName, style.backupImage),\n    [backupImageClassName]\n  );\n\n  useEffect(() => {\n    // enzyme does not handle well the state update after an async useEffect in tests\n    // to remove when the migration towards @testing-library/react is done\n    /* istanbul ignore next */\n    if (\n      animationItem &&\n      includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) &&\n      !autoplay\n    ) {\n      setIsAnimationVisible(true);\n      animationItem[animationControl]();\n      if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n    }\n  }, [animationControl, animationItem, autoplay]);\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      if (!_isIE11 && !animationItem) {\n        /* istanbul ignore else */\n        if (typeof window !== 'undefined') {\n          window.lottie = lottie;\n        }\n        const animation = await fetchAndLoadAnimation(\n          lottie,\n          unfetch,\n          animationSrc,\n          containerRef,\n          loop,\n          lottieAnimationClassName,\n          hideOnTransparent,\n          autoplay\n        );\n\n        /* istanbul ignore next */\n        setAnimationItem(animation);\n      }\n    };\n\n    loadAnimation();\n    return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n  }, [\n    lottieAnimationClassName,\n    containerRef,\n    hideOnTransparent,\n    loop,\n    animationSrc,\n    _isIE11,\n    animationItem,\n    autoplay\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      aria-label={ariaLabel}\n      data-name={dataName}\n      className={wrapperClassName}\n      style={{\n        ...(width && {\n          width: `${width}px`,\n          maxWidth: `${width}px`\n        }),\n        ...(height && {\n          height: `${height}px`,\n          maxHeight: `${height}px`\n        }),\n        opacity: isAnimationVisible ? 1 : 0,\n        transition: 'opacity 0.25s ease-in'\n      }}\n    >\n      {_isIE11 ? (\n        <img\n          src={ie11ImageBackup}\n          className={ie11BackupImageClassName}\n          data-name=\"ie11-backup-image\"\n        />\n      ) : null}\n    </div>\n  );\n};\n\nLottieWrapper.propTypes = {\n  'aria-label': PropTypes.string.isRequired,\n  'data-name': PropTypes.string,\n  animationSrc: PropTypes.string.isRequired,\n  loop: PropTypes.bool,\n  rendererSettings: PropTypes.shape({\n    hideOnTransparent: PropTypes.bool,\n    className: PropTypes.string\n  }),\n  height: PropTypes.number,\n  width: PropTypes.number,\n  className: PropTypes.string,\n  ie11ImageBackup: PropTypes.string.isRequired,\n  backupImageClassName: PropTypes.string,\n  autoplay: PropTypes.bool,\n  animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/lottie-wrapper/index.js"],"names":["ANIMATION_CONTROL","play","pause","stop","loading","isIE11","window","userAgent","hasMsCrypto","hasRevision","hasTrident","fetchAndLoadAnimation","_lottie","_fetch","animationSrc","containerRef","loop","animationClassnames","hideOnTransparent","autoplay","animationUrl","URL","toString","fetchResult","headers","animationData","json","animation","loadAnimation","container","current","renderer","rendererSettings","className","preserveAspectRatio","LottieWrapper","props","dataName","ariaLabel","width","height","ie11ImageBackup","backupImageClassName","animationControl","animationClassName","animationItem","setAnimationItem","isAnimationVisible","setIsAnimationVisible","_isIE11","wrapperClassName","style","lottieContainer","lottieAnimationClassName","ie11BackupImageClassName","backupImage","lottie","unfetch","destroy","name","maxWidth","maxHeight","opacity","transition","propTypes","PropTypes","string","isRequired","bool","shape","number","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo, useRef, useEffect, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport lottie from 'lottie-web';\nimport get from 'lodash/fp/get';\nimport has from 'lodash/fp/has';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport omit from 'lodash/fp/omit';\nimport unfetch from 'isomorphic-unfetch';\nimport style from './style.css';\n\nexport const ANIMATION_CONTROL = {\n  play: 'play',\n  pause: 'pause',\n  stop: 'stop',\n  loading: 'loading'\n};\n\nconst isIE11 = () => {\n  if (typeof window === 'undefined') return;\n  const userAgent = get('navigator.userAgent', window);\n  const hasMsCrypto = has('msCrypto', window);\n  const hasRevision = includes('rv:', userAgent);\n  const hasTrident = includes('Trident/', userAgent);\n\n  return hasMsCrypto || (hasRevision && hasTrident);\n};\n\nexport const fetchAndLoadAnimation = async (\n  _lottie,\n  _fetch,\n  animationSrc,\n  containerRef,\n  loop,\n  animationClassnames,\n  hideOnTransparent,\n  autoplay\n) => {\n  const animationUrl = new URL(animationSrc).toString();\n  const fetchResult = await _fetch(animationUrl, {\n    headers: {\n      'X-Requested-With': 'XMLHttpRequest',\n      'Content-Type': 'application/json'\n    }\n  });\n\n  const animationData = await fetchResult.json();\n\n  const animation = _lottie.loadAnimation({\n    container: containerRef.current, // the dom element that will contain the animation\n    renderer: 'svg',\n    autoplay,\n    loop,\n    animationData,\n    rendererSettings: {\n      className: animationClassnames,\n      hideOnTransparent,\n      preserveAspectRatio: 'xMidYMid meet' // same options as a preserveAspectRatio prop\n    }\n  });\n  return animation;\n};\n\nconst LottieWrapper = props => {\n  const {\n    className,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    animationSrc,\n    loop = false,\n    rendererSettings = {},\n    width,\n    height,\n    ie11ImageBackup,\n    backupImageClassName,\n    autoplay = true,\n    animationControl\n  } = props;\n\n  const {className: animationClassName, hideOnTransparent = true} = rendererSettings;\n\n  const containerRef = useRef(null);\n\n  // lottie's animation instance\n  const [animationItem, setAnimationItem] = useState(null);\n\n  const [isAnimationVisible, setIsAnimationVisible] = useState(autoplay);\n\n  const _isIE11 = useMemo(() => isIE11(), []);\n\n  const wrapperClassName = useMemo(() => classnames(className, style.lottieContainer), [className]);\n\n  const lottieAnimationClassName = useMemo(() => classnames(animationClassName, style.animation), [\n    animationClassName\n  ]);\n\n  const ie11BackupImageClassName = useMemo(\n    () => classnames(backupImageClassName, style.backupImage),\n    [backupImageClassName]\n  );\n\n  useEffect(() => {\n    // enzyme does not handle well the state update after an async useEffect in tests\n    // to remove when the migration towards @testing-library/react is done\n    /* istanbul ignore next */\n    if (includes(animationControl, keys(omit('loading', ANIMATION_CONTROL))) && !autoplay) {\n      setIsAnimationVisible(true);\n      if (animationItem) animationItem[animationControl]();\n      if (animationControl === ANIMATION_CONTROL.stop) setIsAnimationVisible(false);\n    }\n  }, [animationControl, animationItem, autoplay]);\n\n  useEffect(() => {\n    const loadAnimation = async () => {\n      if (!_isIE11 && !animationItem) {\n        /* istanbul ignore else */\n        if (typeof window !== 'undefined') {\n          window.lottie = lottie;\n        }\n        const animation = await fetchAndLoadAnimation(\n          lottie,\n          unfetch,\n          animationSrc,\n          containerRef,\n          loop,\n          lottieAnimationClassName,\n          hideOnTransparent,\n          autoplay\n        );\n\n        /* istanbul ignore next */\n        setAnimationItem(animation);\n      }\n    };\n\n    loadAnimation();\n    return () => animationItem && /* istanbul ignore next */ lottie.destroy(animationItem.name);\n  }, [\n    lottieAnimationClassName,\n    containerRef,\n    hideOnTransparent,\n    loop,\n    animationSrc,\n    _isIE11,\n    animationItem,\n    autoplay\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      aria-label={ariaLabel}\n      data-name={dataName}\n      className={wrapperClassName}\n      style={{\n        ...(width && {\n          width: `${width}px`,\n          maxWidth: `${width}px`\n        }),\n        ...(height && {\n          height: `${height}px`,\n          maxHeight: `${height}px`\n        }),\n        opacity: isAnimationVisible ? 1 : 0,\n        transition: 'opacity 0.25s ease-in'\n      }}\n    >\n      {_isIE11 ? (\n        <img\n          src={ie11ImageBackup}\n          className={ie11BackupImageClassName}\n          data-name=\"ie11-backup-image\"\n        />\n      ) : null}\n    </div>\n  );\n};\n\nLottieWrapper.propTypes = {\n  'aria-label': PropTypes.string.isRequired,\n  'data-name': PropTypes.string,\n  animationSrc: PropTypes.string.isRequired,\n  loop: PropTypes.bool,\n  rendererSettings: PropTypes.shape({\n    hideOnTransparent: PropTypes.bool,\n    className: PropTypes.string\n  }),\n  height: PropTypes.number,\n  width: PropTypes.number,\n  className: PropTypes.string,\n  ie11ImageBackup: PropTypes.string.isRequired,\n  backupImageClassName: PropTypes.string,\n  autoplay: PropTypes.bool,\n  animationControl: PropTypes.oneOf(keys(ANIMATION_CONTROL))\n};\n\nexport default LottieWrapper;\n"],"file":"index.js"}

package/lib/molecule/brand-create-form/index.js

@@ -66,6 +66,7 @@ const BrandCreateForm = (props, context) => {
     className: fieldClass
   }, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("input", {
     type: "text",
+    maxLength: "40",
     "data-name": "brand_create_text_input",
     placeholder: field.placeholder,
     defaultValue: field.value,