@coorpacademy/components 10.22.22 → 10.22.24-alpha.5

package/README.md

@@ -171,6 +171,7 @@ You may need to install these optional libs depending on which native components
 - `react-native-render-html`
 - `react-native-linear-gradient`
 - `@coorpacademy/react-native-slider`
+- `@react-native-community/blur`
 
 ## Troubleshooting
 

package/es/organism/mobile-navigation/index.native.js

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { BlurView } from '@react-native-community/blur';
+import { NovaCompositionNavigationNavBar as BlurredShadow } from '@coorpacademy/nova-icons';
+import { useTemplateContext } from '../../template/app-review/template-context';
+
+const createStyleSheet = theme => StyleSheet.create({
+  main: {
+    marginHorizontal: 20
+  },
+  container: {
+    position: 'absolute',
+    bottom: 34,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    overflow: 'hidden',
+    height: 66,
+    borderRadius: 12,
+    backgroundColor: theme.colors.gray.light
+  },
+  button: {
+    alignItems: 'center',
+    flex: 1,
+    height: '100%',
+    marginTop: theme.spacing.small
+  },
+  buttonText: {
+    fontSize: theme.fontSize.small,
+    lineHeight: 26,
+    // height: 11,
+    color: theme.colors.text.primary
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 8,
+    backgroundColor: theme.colors.cta,
+    marginTop: 3,
+    position: 'absolute',
+    alignSelf: 'center'
+  },
+  blur: {
+    marginTop: -87,
+    width: 200,
+    height: 100,
+    position: 'absolute',
+    alignSelf: 'center',
+    transform: [{
+      rotateX: '180deg'
+    }, {
+      scaleX: 0.7
+    }]
+  }
+});
+
+const Button = ({
+  testID,
+  title,
+  selected,
+  Icon,
+  styles,
+  theme
+}) => /*#__PURE__*/React.createElement(View, {
+  testID: testID,
+  style: styles.button
+}, /*#__PURE__*/React.createElement(View, {
+  style: {
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/React.createElement(Icon, {
+  height: 16,
+  width: 16,
+  color: selected ? theme.colors.cta : theme.colors.text.primary
+}), /*#__PURE__*/React.createElement(Text, {
+  style: styles.buttonText
+}, title)), selected ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+  style: styles.dot
+}), /*#__PURE__*/React.createElement(BlurredShadow, {
+  color: theme.colors.cta,
+  style: styles.blur
+})) : null);
+
+const NavigationBar = ({
+  items,
+  selectedItemIndex
+}) => {
+  const templateContext = useTemplateContext();
+  const [styleSheet, setStylesheet] = useState(null);
+  const {
+    theme
+  } = templateContext;
+  useEffect(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.main
+  }, /*#__PURE__*/React.createElement(BlurView, {
+    style: styleSheet.container,
+    blurAmount: 32,
+    reducedTransparencyFallbackColor: "rgba(17, 17, 23, 0.5)"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.container
+  }, items.map((prop, index) => /*#__PURE__*/React.createElement(Button, {
+    key: `button-${prop.label}`,
+    title: prop.label,
+    Icon: prop.icon,
+    selected: index === selectedItemIndex,
+    testID: `navigationButton_${index}`,
+    styles: styleSheet,
+    theme: theme
+  }))));
+};
+
+export default NavigationBar;
+//# sourceMappingURL=index.native.js.map

package/es/organism/mobile-navigation/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","Text","BlurView","NovaCompositionNavigationNavBar","BlurredShadow","useTemplateContext","createStyleSheet","theme","create","main","marginHorizontal","container","position","bottom","width","flexDirection","justifyContent","alignSelf","overflow","height","borderRadius","backgroundColor","colors","gray","light","button","alignItems","flex","marginTop","spacing","small","buttonText","fontSize","lineHeight","color","text","primary","dot","cta","blur","transform","rotateX","scaleX","Button","testID","title","selected","Icon","styles","NavigationBar","items","selectedItemIndex","templateContext","styleSheet","setStylesheet","_stylesheet","map","prop","index","label","icon"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport {BlurView} from '@react-native-community/blur';\n\nimport {NovaCompositionNavigationNavBar as BlurredShadow} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {\n  Position,\n  FlexDirection,\n  JustifyContent,\n  AlignSelf,\n  Overflow,\n  FlexAlignType,\n  FontSize\n} from '../../types/styles';\nimport {Theme} from '../../variables/theme.native';\n\nexport type NavItemType = {\n  label: string;\n  icon: any;\n  onPress: () => void;\n};\n\nexport interface Props {\n  testID?: string;\n  items: Array<NavItemType>;\n  selectedItemIndex: number;\n}\n\ntype StyleSheetType = {\n  main: {\n    marginHorizontal: number;\n  };\n  container: {\n    position: Position;\n    bottom: number;\n    width: string;\n    flexDirection: FlexDirection;\n    justifyContent: JustifyContent;\n    alignSelf: AlignSelf;\n    overflow: Overflow;\n    height: number;\n    borderRadius: number;\n    backgroundColor: string;\n  };\n  button: {\n    alignItems: FlexAlignType;\n    flex: number;\n    height: string;\n    marginTop: number;\n  };\n  buttonText: {\n    fontSize: FontSize;\n    lineHeight: number;\n    color: string;\n  };\n\n  dot: {\n    width: number;\n    height: number;\n    borderRadius: number;\n    backgroundColor: string;\n    marginTop: number;\n  };\n  blur: {\n    marginTop: number;\n    width: number;\n    height: number;\n  };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    main: {\n      marginHorizontal: 20\n    },\n    container: {\n      position: 'absolute',\n      bottom: 34,\n      width: '100%',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignSelf: 'center',\n      overflow: 'hidden',\n      height: 66,\n      borderRadius: 12,\n      backgroundColor: theme.colors.gray.light\n    },\n    button: {\n      alignItems: 'center',\n      flex: 1,\n      height: '100%',\n      marginTop: theme.spacing.small\n    },\n    buttonText: {\n      fontSize: theme.fontSize.small,\n      lineHeight: 26,\n      // height: 11,\n      color: theme.colors.text.primary\n    },\n\n    dot: {\n      width: 8,\n      height: 8,\n      borderRadius: 8,\n      backgroundColor: theme.colors.cta,\n      marginTop: 3,\n      position: 'absolute',\n      alignSelf: 'center'\n    },\n    blur: {\n      marginTop: -87,\n      width: 200,\n      height: 100,\n      position: 'absolute',\n      alignSelf: 'center',\n      transform: [{rotateX: '180deg'}, {scaleX: 0.7}]\n    }\n  });\n\ninterface ButtonProps {\n  title: string;\n  testID: string;\n  selected: boolean;\n  Icon: any;\n  styles: StyleSheetType;\n  theme: Theme;\n}\n\nconst Button = ({testID, title, selected, Icon, styles, theme}: ButtonProps) => (\n  <View testID={testID} style={styles.button}>\n    <View style={{alignItems: 'center'}}>\n      <Icon\n        height={16}\n        width={16}\n        color={selected ? theme.colors.cta : theme.colors.text.primary}\n      />\n      <Text style={styles.buttonText}>{title}</Text>\n    </View>\n    {selected ? (\n      <View>\n        <View style={styles.dot} />\n        <BlurredShadow color={theme.colors.cta} style={styles.blur} />\n      </View>\n    ) : null}\n  </View>\n);\n\nconst NavigationBar = ({items, selectedItemIndex}: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.main}>\n      <BlurView\n        style={styleSheet.container}\n        blurAmount={32}\n        reducedTransparencyFallbackColor=\"rgba(17, 17, 23, 0.5)\"\n      />\n      <View style={styleSheet.container}>\n        {items.map((prop, index) => (\n          <Button\n            key={`button-${prop.label}`}\n            title={prop.label}\n            Icon={prop.icon}\n            selected={index === selectedItemIndex}\n            testID={`navigationButton_${index}`}\n            styles={styleSheet}\n            theme={theme}\n          />\n        ))}\n      </View>\n    </View>\n  );\n};\n\nexport default NavigationBar;\n"],"file":"index.native.js"}

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

@@ -122,8 +122,12 @@ const QuestionContainer = props => {
     className: style.questionOrigin
   }, questionOrigin), /*#__PURE__*/React.createElement("div", {
     key: "title",
-    className: style.question
-  }, questionText), /*#__PURE__*/React.createElement("div", {
+    className: style.question // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: questionText
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     key: "help",
     className: style.help
   }, get('help', answerUI)), /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["React","useMemo","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","GetSkinFromContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","help","answerContainer","shape","slide","ReviewSlide","skin","loading","loadingAriaLabel","parentContentTitle","loader"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {GetSkinFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick: () => {\n        // eslint-disable-next-line no-console\n        console.log('Next Slide');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextContent content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slide will disappear, also fired in a useEffect),\n\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    onClick: async () => {\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    */\n  };\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin} = props;\n  if (!answerUI || !questionText) return null;\n\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div key=\"content-container\" className={style.slideContentContainer}>\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div key=\"title\" className={style.question}>\n        {questionText}\n      </div>\n      <div key=\"help\" className={style.help}>\n        {get('help', answerUI)}\n      </div>\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerProps} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string\n};\n\nconst ReviewSlide = props => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const skin = GetSkinFromContext();\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-name={`slide-container`} className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        [\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            key=\"question-container\"\n          />,\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n          />,\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        ]\n      )}\n    </div>\n  );\n};\n\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["React","useMemo","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","GetSkinFromContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","__html","help","answerContainer","shape","slide","ReviewSlide","skin","loading","loadingAriaLabel","parentContentTitle","loader"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {GetSkinFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick: () => {\n        // eslint-disable-next-line no-console\n        console.log('Next Slide');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextContent content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slide will disappear, also fired in a useEffect),\n\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    onClick: async () => {\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    */\n  };\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin} = props;\n  if (!answerUI || !questionText) return null;\n\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div key=\"content-container\" className={style.slideContentContainer}>\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div\n        key=\"title\"\n        className={style.question}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: questionText}}\n      />\n      <div key=\"help\" className={style.help}>\n        {get('help', answerUI)}\n      </div>\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerProps} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string\n};\n\nconst ReviewSlide = props => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const skin = GetSkinFromContext();\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-name={`slide-container`} className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        [\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            key=\"question-container\"\n          />,\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n          />,\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        ]\n      )}\n    </div>\n  );\n};\n\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"file":"index.js"}

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

@@ -17,11 +17,13 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  height: 100%;
 }
 
 .slideContentContainer {
   margin-top: 15px;
-  height: 563px;
+  min-height: calc(100% - 100px);
+  max-height: calc(100% - 100px);
   display: flex;
   justify-items: center;
   align-items: center;
@@ -32,19 +34,16 @@
 }
 
 .validateButtonWrapper {
-  position: absolute;
-  bottom: 64px;
-  background-color: black;
   border-radius: 7px;
   min-width: 250px;
   width: min-content;
+  position: relative;
+  margin: 15px auto;
 }
 
 /* ie fallback */
 _:-ms-fullscreen, :root .validateButtonWrapper {
-  width: 300px;
-  left: 40%;
-  right: 40%;
+  width: auto;
 }
 
 .answerContainer {
@@ -74,7 +73,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   composes: fontBase;
   font-size: 15px;
   color: cm_blue_900;
-  margin-top: 49px;
+  margin-top: 34px;
   text-align: center;
   max-width: 95%;
 }
@@ -111,7 +110,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   position: absolute;
   bottom: 0px;
   border-radius: 7px;
-  margin: 0 15px 40px;
+  margin: 0 15px 15px;
   width: 95%;
 }
 
@@ -126,6 +125,7 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
 
 .validateButton {
   color: white;
+  width: 300px;
   transition: opacity 0.25s ease-in;
 }
 
@@ -139,10 +139,6 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
 }
 
 @media tablet {
-  .slideContentContainer {
-    height: 473px;
-  }
-  
   @keyframes popInAnimation {
     from {
       transform: translate3d(0, 400px, 0);
@@ -154,10 +150,6 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
 }
 
 @media mobile {
-  .slideContentContainer {
-    height: 511px;
-  }
-
   .questionOrigin, .question, .help, .answerContainer {
     max-width: 90%;
   }

package/es/organism/review-stacked-slides/style.css

@@ -4,9 +4,8 @@
 
 .stackedSlidesYAxisOverflowContainer {
   width: 100%;
-  padding-top: 20px;
-  height: 100%;
-  min-height: 870px;
+  padding-top: 50px;
+  height: calc(100vh - 155px);
   /* --- ie11 fallback --- */
   overflow-y: hidden;
   /* --------------------- */
@@ -19,17 +18,14 @@
 
 .stackedSlidesContainer {
   position: relative;
-  padding-top: 20px;
-  height: 788px;
   max-width: 1240px;
   width: 85%;
-  align-self: center;
 }
 
 .slideBase {
   box-shadow: 0px 4px 58px rgba(0, 0, 0, 0.05);
   background: white;
-  height: 706px;
+  height: calc(100vh - 155px);
   border-radius: 24px;
   overflow: hidden;
   position: absolute;
@@ -47,6 +43,7 @@
   width: 100%;
   transform: translate(0, 0);
   transition: transform 0.5s ease-in;
+  
 }
 
 .position1 {
@@ -153,22 +150,15 @@
 
 @media tablet {
   .stackedSlidesContainer {
-    height: 638px;
     max-width: 960px;
   }
-
-  .slideBase {
-    height: 606px;
-  }
 }
 
 @media mobile {
   .stackedSlidesContainer {
-    height: 670px;
     max-width: 335px;
   }
-
   .slideBase {
-    height: 654px;
+    height: calc(100vh - 185px);
   }
 }

package/es/template/app-player/popin-correction/index.js

@@ -74,6 +74,7 @@ const AssistanceLink = (props, context) => {
     title,
     onClick
   } = props;
+  if (_isEmpty(title)) return null;
   const {
     skin
   } = context;

package/es/template/app-player/popin-correction/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-player/popin-correction/index.js"],"names":["React","Component","PropTypes","NovaCompositionCoorpacademyCheck","CheckIcon","NovaLineInterfaceFeedbackInterfaceAlertCircle","AlertIcon","classnames","Loader","Link","Provider","ResourceBrowser","Accordion","Header","style","extractTabs","items","map","type","item","iconType","title","isOpen","open","Resources","resources","overlay","browserWrapper","value","browser","propTypes","shape","SimpleText","text","simpleTextWrapper","simpleText","innerHTML","__html","string","AssistanceLink","props","context","onClick","skin","white","wrapperAssistance","alertIcon","titleLink","contextTypes","childContextTypes","func","Question","header","answer","answerPrefix","question","questionHeader","answerWrapper","checkIcon","PopinCorrection","constructor","state","initWrapper","bind","componentDidMount","deferOpen","clearTimeout","deferedOpen","onOpen","setState","wrapper","render","extraLifeGranted","gameOver","klf","tips","quit","assistanceLink","primary","tabs","isLoading","failed","className","finalBackground","initialBackground","cta","linkProps","quitCta","color","hideQuitCta","scrollWrapper","loadingWrapper","loadingContent","content","activeLoader"],"mappings":"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","sourcesContent":["import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport {defer, isNil, isEmpty, get, getOr, keys, omit} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyCheck as CheckIcon,\n  NovaLineInterfaceFeedbackInterfaceAlertCircle as AlertIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../../../atom/loader';\nimport Link from '../../../atom/link';\nimport Provider from '../../../atom/provider';\nimport ResourceBrowser from '../../../organism/resource-browser';\nimport Accordion from '../../../organism/accordion/container';\nimport Header from '../popin-header';\nimport style from './style.css';\n\nconst extractTabs = items =>\n  keys(items).map(type => {\n    const item = items[type];\n    return {iconType: type, title: item.title, isOpen: item.open};\n  });\n\nconst Resources = ({resources, overlay}) => (\n  <div className={style.browserWrapper}>\n    <ResourceBrowser resources={resources.value} overlay={overlay} className={style.browser} />\n  </div>\n);\n\nResources.propTypes = {\n  resources: PropTypes.shape({\n    value: ResourceBrowser.propTypes.resources\n  }),\n  overlay: ResourceBrowser.propTypes.overlay\n};\n\nconst SimpleText = ({text}) => (\n  <div data-name=\"simpleText\" className={style.simpleTextWrapper}>\n    <p\n      className={classnames(style.simpleText, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: text}}\n    />\n  </div>\n);\n\nSimpleText.propTypes = {\n  text: PropTypes.string\n};\n\nconst AssistanceLink = (props, context) => {\n  if (isEmpty(props)) return null;\n  const {title, onClick} = props;\n  const {skin} = context;\n  const white = get('common.white', skin);\n\n  return (\n    <div className={style.wrapperAssistance} onClick={onClick}>\n      <AlertIcon className={style.alertIcon} color={white} />\n      <span className={style.titleLink}> {title} </span>\n    </div>\n  );\n};\n\nAssistanceLink.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nAssistanceLink.propTypes = {\n  title: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst Question = ({header, answer, answerPrefix}) => (\n  <div className={style.question}>\n    <p\n      className={classnames(style.questionHeader, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: header}}\n    />\n    <div className={style.answerWrapper}>\n      <CheckIcon className={style.checkIcon} color=\"inherit\" />\n      {answerPrefix ? <span className={style.answerPrefix}>{answerPrefix}</span> : null}\n      <span\n        className={classnames(style.answer, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: answer}}\n      />\n    </div>\n  </div>\n);\n\nQuestion.propTypes = {\n  header: PropTypes.string,\n  answerPrefix: PropTypes.string,\n  answer: PropTypes.string\n};\n\nclass PopinCorrection extends Component {\n  static propTypes = {\n    resources: Resources.propTypes.resources,\n    overlay: ResourceBrowser.propTypes.overlay,\n    assistanceLink: PropTypes.shape(AssistanceLink.propTypes),\n    header: PropTypes.shape(omit(['animated'], Header.propTypes)),\n    extraLifeGranted: Header.propTypes.extraLifeGranted,\n    gameOver: Header.propTypes.gameOver,\n    question: PropTypes.shape(Question.propTypes),\n    klf: PropTypes.shape(SimpleText.propTypes),\n    tips: PropTypes.shape(SimpleText.propTypes),\n    onClick: Accordion.propTypes.onClick,\n    quit: PropTypes.shape({\n      cta: PropTypes.shape({\n        ...Link.propTypes,\n        title: PropTypes.string\n      })\n    }),\n    onOpen: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {open: false};\n    this.initWrapper = this.initWrapper.bind(this);\n  }\n\n  componentDidMount() {\n    this.deferOpen();\n  }\n\n  deferOpen() {\n    clearTimeout(this.deferedOpen);\n\n    this.deferedOpen = defer(() => {\n      const {onOpen} = this.props;\n      this.setState({open: true});\n      onOpen && onOpen();\n    });\n  }\n\n  initWrapper(wrapper) {\n    this.wrapper = wrapper;\n  }\n\n  render() {\n    const {\n      header = {},\n      extraLifeGranted,\n      gameOver,\n      question,\n      overlay,\n      resources,\n      klf,\n      tips,\n      onClick,\n      quit = {},\n      assistanceLink = {}\n    } = this.props;\n\n    const {open} = this.state;\n\n    const {skin} = this.context;\n    const primary = getOr('#f0f', 'common.primary', skin);\n\n    const tabs = extractTabs({resources, klf, tips});\n    const isLoading = isNil(header.failed);\n    const className = open ? style.finalBackground : style.initialBackground;\n    const {title, ...linkProps} = quit.cta || {};\n\n    const quitCta =\n      title || extraLifeGranted ? (\n        <Link\n          {...linkProps}\n          style={{\n            color: primary\n          }}\n          className={extraLifeGranted ? style.hideQuitCta : style.quitCta}\n          data-name=\"nextLink\"\n          data-popin=\"popinCorrection\"\n          data-next=\"quit-with-extra-life\"\n        >\n          {title}\n        </Link>\n      ) : null;\n\n    return (\n      <div ref={this.initWrapper} className={className} data-name=\"popinCorrection\">\n        <div className={style.scrollWrapper}>\n          <div className={isLoading ? style.loadingWrapper : style.wrapper}>\n            <div className={isLoading ? style.loadingContent : style.content}>\n              <Header\n                {...header}\n                gameOver={gameOver}\n                extraLifeGranted={extraLifeGranted}\n                animated\n              />\n              <Question {...question} />\n              <Accordion tabProps={tabs} onClick={onClick} oneTabOnly>\n                {isEmpty(getOr([], 'value', resources)) ? null : (\n                  <Resources resources={resources} overlay={overlay} />\n                )}\n                {klf.value ? <SimpleText text={klf.value} /> : null}\n                {tips.value ? <SimpleText text={tips.value} /> : null}\n              </Accordion>\n            </div>\n            {quitCta}\n            <AssistanceLink {...assistanceLink} />\n          </div>\n          {isLoading ? <Loader className={style.activeLoader} /> : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default PopinCorrection;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/template/app-player/popin-correction/index.js"],"names":["React","Component","PropTypes","NovaCompositionCoorpacademyCheck","CheckIcon","NovaLineInterfaceFeedbackInterfaceAlertCircle","AlertIcon","classnames","Loader","Link","Provider","ResourceBrowser","Accordion","Header","style","extractTabs","items","map","type","item","iconType","title","isOpen","open","Resources","resources","overlay","browserWrapper","value","browser","propTypes","shape","SimpleText","text","simpleTextWrapper","simpleText","innerHTML","__html","string","AssistanceLink","props","context","onClick","skin","white","wrapperAssistance","alertIcon","titleLink","contextTypes","childContextTypes","func","Question","header","answer","answerPrefix","question","questionHeader","answerWrapper","checkIcon","PopinCorrection","constructor","state","initWrapper","bind","componentDidMount","deferOpen","clearTimeout","deferedOpen","onOpen","setState","wrapper","render","extraLifeGranted","gameOver","klf","tips","quit","assistanceLink","primary","tabs","isLoading","failed","className","finalBackground","initialBackground","cta","linkProps","quitCta","color","hideQuitCta","scrollWrapper","loadingWrapper","loadingContent","content","activeLoader"],"mappings":"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","sourcesContent":["import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport {defer, isNil, isEmpty, get, getOr, keys, omit} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyCheck as CheckIcon,\n  NovaLineInterfaceFeedbackInterfaceAlertCircle as AlertIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../../../atom/loader';\nimport Link from '../../../atom/link';\nimport Provider from '../../../atom/provider';\nimport ResourceBrowser from '../../../organism/resource-browser';\nimport Accordion from '../../../organism/accordion/container';\nimport Header from '../popin-header';\nimport style from './style.css';\n\nconst extractTabs = items =>\n  keys(items).map(type => {\n    const item = items[type];\n    return {iconType: type, title: item.title, isOpen: item.open};\n  });\n\nconst Resources = ({resources, overlay}) => (\n  <div className={style.browserWrapper}>\n    <ResourceBrowser resources={resources.value} overlay={overlay} className={style.browser} />\n  </div>\n);\n\nResources.propTypes = {\n  resources: PropTypes.shape({\n    value: ResourceBrowser.propTypes.resources\n  }),\n  overlay: ResourceBrowser.propTypes.overlay\n};\n\nconst SimpleText = ({text}) => (\n  <div data-name=\"simpleText\" className={style.simpleTextWrapper}>\n    <p\n      className={classnames(style.simpleText, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: text}}\n    />\n  </div>\n);\n\nSimpleText.propTypes = {\n  text: PropTypes.string\n};\n\nconst AssistanceLink = (props, context) => {\n  if (isEmpty(props)) return null;\n  const {title, onClick} = props;\n  if (isEmpty(title)) return null;\n  const {skin} = context;\n  const white = get('common.white', skin);\n\n  return (\n    <div className={style.wrapperAssistance} onClick={onClick}>\n      <AlertIcon className={style.alertIcon} color={white} />\n      <span className={style.titleLink}> {title} </span>\n    </div>\n  );\n};\n\nAssistanceLink.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nAssistanceLink.propTypes = {\n  title: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst Question = ({header, answer, answerPrefix}) => (\n  <div className={style.question}>\n    <p\n      className={classnames(style.questionHeader, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: header}}\n    />\n    <div className={style.answerWrapper}>\n      <CheckIcon className={style.checkIcon} color=\"inherit\" />\n      {answerPrefix ? <span className={style.answerPrefix}>{answerPrefix}</span> : null}\n      <span\n        className={classnames(style.answer, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: answer}}\n      />\n    </div>\n  </div>\n);\n\nQuestion.propTypes = {\n  header: PropTypes.string,\n  answerPrefix: PropTypes.string,\n  answer: PropTypes.string\n};\n\nclass PopinCorrection extends Component {\n  static propTypes = {\n    resources: Resources.propTypes.resources,\n    overlay: ResourceBrowser.propTypes.overlay,\n    assistanceLink: PropTypes.shape(AssistanceLink.propTypes),\n    header: PropTypes.shape(omit(['animated'], Header.propTypes)),\n    extraLifeGranted: Header.propTypes.extraLifeGranted,\n    gameOver: Header.propTypes.gameOver,\n    question: PropTypes.shape(Question.propTypes),\n    klf: PropTypes.shape(SimpleText.propTypes),\n    tips: PropTypes.shape(SimpleText.propTypes),\n    onClick: Accordion.propTypes.onClick,\n    quit: PropTypes.shape({\n      cta: PropTypes.shape({\n        ...Link.propTypes,\n        title: PropTypes.string\n      })\n    }),\n    onOpen: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {open: false};\n    this.initWrapper = this.initWrapper.bind(this);\n  }\n\n  componentDidMount() {\n    this.deferOpen();\n  }\n\n  deferOpen() {\n    clearTimeout(this.deferedOpen);\n\n    this.deferedOpen = defer(() => {\n      const {onOpen} = this.props;\n      this.setState({open: true});\n      onOpen && onOpen();\n    });\n  }\n\n  initWrapper(wrapper) {\n    this.wrapper = wrapper;\n  }\n\n  render() {\n    const {\n      header = {},\n      extraLifeGranted,\n      gameOver,\n      question,\n      overlay,\n      resources,\n      klf,\n      tips,\n      onClick,\n      quit = {},\n      assistanceLink = {}\n    } = this.props;\n\n    const {open} = this.state;\n\n    const {skin} = this.context;\n    const primary = getOr('#f0f', 'common.primary', skin);\n\n    const tabs = extractTabs({resources, klf, tips});\n    const isLoading = isNil(header.failed);\n    const className = open ? style.finalBackground : style.initialBackground;\n    const {title, ...linkProps} = quit.cta || {};\n\n    const quitCta =\n      title || extraLifeGranted ? (\n        <Link\n          {...linkProps}\n          style={{\n            color: primary\n          }}\n          className={extraLifeGranted ? style.hideQuitCta : style.quitCta}\n          data-name=\"nextLink\"\n          data-popin=\"popinCorrection\"\n          data-next=\"quit-with-extra-life\"\n        >\n          {title}\n        </Link>\n      ) : null;\n\n    return (\n      <div ref={this.initWrapper} className={className} data-name=\"popinCorrection\">\n        <div className={style.scrollWrapper}>\n          <div className={isLoading ? style.loadingWrapper : style.wrapper}>\n            <div className={isLoading ? style.loadingContent : style.content}>\n              <Header\n                {...header}\n                gameOver={gameOver}\n                extraLifeGranted={extraLifeGranted}\n                animated\n              />\n              <Question {...question} />\n              <Accordion tabProps={tabs} onClick={onClick} oneTabOnly>\n                {isEmpty(getOr([], 'value', resources)) ? null : (\n                  <Resources resources={resources} overlay={overlay} />\n                )}\n                {klf.value ? <SimpleText text={klf.value} /> : null}\n                {tips.value ? <SimpleText text={tips.value} /> : null}\n              </Accordion>\n            </div>\n            {quitCta}\n            <AssistanceLink {...assistanceLink} />\n          </div>\n          {isLoading ? <Loader className={style.activeLoader} /> : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default PopinCorrection;\n"],"file":"index.js"}

package/es/template/app-review/player/style.css

@@ -1,12 +1,13 @@
 .playerReviewContainer {
-  position: relative;
   display: flex;
   flex-direction: column;
-  /* --- ie11 fallback --- */
+  min-height: 700px;
+  position: fixed;
+  top: 0px;
+  left: 0px;
   height: 100%;
-  /* --------------------- */
-  height: min-content;
-  min-height: 832px;
+  width: 100%;
+  z-index: 10;
 }
 
 /* 
@@ -35,7 +36,6 @@
   position: absolute;
   display: block;
   height: 100%;
-  min-height: 120vh;
   top: 0;
   left: 0;
 }

package/lib/organism/mobile-navigation/index.native.js

@@ -0,0 +1,138 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _blur = require("@react-native-community/blur");
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _templateContext = require("../../template/app-review/template-context");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createStyleSheet = theme => _reactNative.StyleSheet.create({
+  main: {
+    marginHorizontal: 20
+  },
+  container: {
+    position: 'absolute',
+    bottom: 34,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    overflow: 'hidden',
+    height: 66,
+    borderRadius: 12,
+    backgroundColor: theme.colors.gray.light
+  },
+  button: {
+    alignItems: 'center',
+    flex: 1,
+    height: '100%',
+    marginTop: theme.spacing.small
+  },
+  buttonText: {
+    fontSize: theme.fontSize.small,
+    lineHeight: 26,
+    // height: 11,
+    color: theme.colors.text.primary
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 8,
+    backgroundColor: theme.colors.cta,
+    marginTop: 3,
+    position: 'absolute',
+    alignSelf: 'center'
+  },
+  blur: {
+    marginTop: -87,
+    width: 200,
+    height: 100,
+    position: 'absolute',
+    alignSelf: 'center',
+    transform: [{
+      rotateX: '180deg'
+    }, {
+      scaleX: 0.7
+    }]
+  }
+});
+
+const Button = ({
+  testID,
+  title,
+  selected,
+  Icon,
+  styles,
+  theme
+}) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  testID: testID,
+  style: styles.button
+}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: {
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(Icon, {
+  height: 16,
+  width: 16,
+  color: selected ? theme.colors.cta : theme.colors.text.primary
+}), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  style: styles.buttonText
+}, title)), selected ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  style: styles.dot
+}), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationNavBar, {
+  color: theme.colors.cta,
+  style: styles.blur
+})) : null);
+
+const NavigationBar = ({
+  items,
+  selectedItemIndex
+}) => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
+  const {
+    theme
+  } = templateContext;
+  (0, _react.useEffect)(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styleSheet.main
+  }, /*#__PURE__*/_react.default.createElement(_blur.BlurView, {
+    style: styleSheet.container,
+    blurAmount: 32,
+    reducedTransparencyFallbackColor: "rgba(17, 17, 23, 0.5)"
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styleSheet.container
+  }, items.map((prop, index) => /*#__PURE__*/_react.default.createElement(Button, {
+    key: `button-${prop.label}`,
+    title: prop.label,
+    Icon: prop.icon,
+    selected: index === selectedItemIndex,
+    testID: `navigationButton_${index}`,
+    styles: styleSheet,
+    theme: theme
+  }))));
+};
+
+var _default = NavigationBar;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/organism/mobile-navigation/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","main","marginHorizontal","container","position","bottom","width","flexDirection","justifyContent","alignSelf","overflow","height","borderRadius","backgroundColor","colors","gray","light","button","alignItems","flex","marginTop","spacing","small","buttonText","fontSize","lineHeight","color","text","primary","dot","cta","blur","transform","rotateX","scaleX","Button","testID","title","selected","Icon","styles","NavigationBar","items","selectedItemIndex","templateContext","styleSheet","setStylesheet","_stylesheet","map","prop","index","label","icon"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport {BlurView} from '@react-native-community/blur';\n\nimport {NovaCompositionNavigationNavBar as BlurredShadow} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {\n  Position,\n  FlexDirection,\n  JustifyContent,\n  AlignSelf,\n  Overflow,\n  FlexAlignType,\n  FontSize\n} from '../../types/styles';\nimport {Theme} from '../../variables/theme.native';\n\nexport type NavItemType = {\n  label: string;\n  icon: any;\n  onPress: () => void;\n};\n\nexport interface Props {\n  testID?: string;\n  items: Array<NavItemType>;\n  selectedItemIndex: number;\n}\n\ntype StyleSheetType = {\n  main: {\n    marginHorizontal: number;\n  };\n  container: {\n    position: Position;\n    bottom: number;\n    width: string;\n    flexDirection: FlexDirection;\n    justifyContent: JustifyContent;\n    alignSelf: AlignSelf;\n    overflow: Overflow;\n    height: number;\n    borderRadius: number;\n    backgroundColor: string;\n  };\n  button: {\n    alignItems: FlexAlignType;\n    flex: number;\n    height: string;\n    marginTop: number;\n  };\n  buttonText: {\n    fontSize: FontSize;\n    lineHeight: number;\n    color: string;\n  };\n\n  dot: {\n    width: number;\n    height: number;\n    borderRadius: number;\n    backgroundColor: string;\n    marginTop: number;\n  };\n  blur: {\n    marginTop: number;\n    width: number;\n    height: number;\n  };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    main: {\n      marginHorizontal: 20\n    },\n    container: {\n      position: 'absolute',\n      bottom: 34,\n      width: '100%',\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignSelf: 'center',\n      overflow: 'hidden',\n      height: 66,\n      borderRadius: 12,\n      backgroundColor: theme.colors.gray.light\n    },\n    button: {\n      alignItems: 'center',\n      flex: 1,\n      height: '100%',\n      marginTop: theme.spacing.small\n    },\n    buttonText: {\n      fontSize: theme.fontSize.small,\n      lineHeight: 26,\n      // height: 11,\n      color: theme.colors.text.primary\n    },\n\n    dot: {\n      width: 8,\n      height: 8,\n      borderRadius: 8,\n      backgroundColor: theme.colors.cta,\n      marginTop: 3,\n      position: 'absolute',\n      alignSelf: 'center'\n    },\n    blur: {\n      marginTop: -87,\n      width: 200,\n      height: 100,\n      position: 'absolute',\n      alignSelf: 'center',\n      transform: [{rotateX: '180deg'}, {scaleX: 0.7}]\n    }\n  });\n\ninterface ButtonProps {\n  title: string;\n  testID: string;\n  selected: boolean;\n  Icon: any;\n  styles: StyleSheetType;\n  theme: Theme;\n}\n\nconst Button = ({testID, title, selected, Icon, styles, theme}: ButtonProps) => (\n  <View testID={testID} style={styles.button}>\n    <View style={{alignItems: 'center'}}>\n      <Icon\n        height={16}\n        width={16}\n        color={selected ? theme.colors.cta : theme.colors.text.primary}\n      />\n      <Text style={styles.buttonText}>{title}</Text>\n    </View>\n    {selected ? (\n      <View>\n        <View style={styles.dot} />\n        <BlurredShadow color={theme.colors.cta} style={styles.blur} />\n      </View>\n    ) : null}\n  </View>\n);\n\nconst NavigationBar = ({items, selectedItemIndex}: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.main}>\n      <BlurView\n        style={styleSheet.container}\n        blurAmount={32}\n        reducedTransparencyFallbackColor=\"rgba(17, 17, 23, 0.5)\"\n      />\n      <View style={styleSheet.container}>\n        {items.map((prop, index) => (\n          <Button\n            key={`button-${prop.label}`}\n            title={prop.label}\n            Icon={prop.icon}\n            selected={index === selectedItemIndex}\n            testID={`navigationButton_${index}`}\n            styles={styleSheet}\n            theme={theme}\n          />\n        ))}\n      </View>\n    </View>\n  );\n};\n\nexport default NavigationBar;\n"],"file":"index.native.js"}

package/lib/organism/review-slide/index.js

@@ -144,8 +144,12 @@ const QuestionContainer = props => {
     className: _style.default.questionOrigin
   }, questionOrigin), /*#__PURE__*/_react.default.createElement("div", {
     key: "title",
-    className: _style.default.question
-  }, questionText), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.question // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: questionText
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
     key: "help",
     className: _style.default.help
   }, (0, _get.default)('help', answerUI)), /*#__PURE__*/_react.default.createElement("div", {

package/lib/organism/review-slide/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","style","correctionPopinWrapper","popinAnimation","propTypes","PropTypes","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","help","answerContainer","shape","slide","ReviewSlide","skin","loading","loadingAriaLabel","parentContentTitle","loader"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {GetSkinFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick: () => {\n        // eslint-disable-next-line no-console\n        console.log('Next Slide');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextContent content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slide will disappear, also fired in a useEffect),\n\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    onClick: async () => {\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    */\n  };\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin} = props;\n  if (!answerUI || !questionText) return null;\n\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div key=\"content-container\" className={style.slideContentContainer}>\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div key=\"title\" className={style.question}>\n        {questionText}\n      </div>\n      <div key=\"help\" className={style.help}>\n        {get('help', answerUI)}\n      </div>\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerProps} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string\n};\n\nconst ReviewSlide = props => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const skin = GetSkinFromContext();\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-name={`slide-container`} className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        [\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            key=\"question-container\"\n          />,\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n          />,\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        ]\n      )}\n    </div>\n  );\n};\n\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","style","correctionPopinWrapper","popinAnimation","propTypes","PropTypes","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","__html","help","answerContainer","shape","slide","ReviewSlide","skin","loading","loadingAriaLabel","parentContentTitle","loader"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {GetSkinFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick: () => {\n        // eslint-disable-next-line no-console\n        console.log('Next Slide');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextContent content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slide will disappear, also fired in a useEffect),\n\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    onClick: async () => {\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    */\n  };\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin} = props;\n  if (!answerUI || !questionText) return null;\n\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div key=\"content-container\" className={style.slideContentContainer}>\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div\n        key=\"title\"\n        className={style.question}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: questionText}}\n      />\n      <div key=\"help\" className={style.help}>\n        {get('help', answerUI)}\n      </div>\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerProps} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string\n};\n\nconst ReviewSlide = props => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const skin = GetSkinFromContext();\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-name={`slide-container`} className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        [\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            key=\"question-container\"\n          />,\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n          />,\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        ]\n      )}\n    </div>\n  );\n};\n\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"file":"index.js"}

package/lib/organism/review-slide/style.css

@@ -17,11 +17,13 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  height: 100%;
 }
 
 .slideContentContainer {
   margin-top: 15px;
-  height: 563px;
+  min-height: calc(100% - 100px);
+  max-height: calc(100% - 100px);
   display: flex;
   justify-items: center;
   align-items: center;
@@ -32,19 +34,16 @@
 }
 
 .validateButtonWrapper {
-  position: absolute;
-  bottom: 64px;
-  background-color: black;
   border-radius: 7px;
   min-width: 250px;
   width: min-content;
+  position: relative;
+  margin: 15px auto;
 }
 
 /* ie fallback */
 _:-ms-fullscreen, :root .validateButtonWrapper {
-  width: 300px;
-  left: 40%;
-  right: 40%;
+  width: auto;
 }
 
 .answerContainer {
@@ -74,7 +73,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   composes: fontBase;
   font-size: 15px;
   color: cm_blue_900;
-  margin-top: 49px;
+  margin-top: 34px;
   text-align: center;
   max-width: 95%;
 }
@@ -111,7 +110,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   position: absolute;
   bottom: 0px;
   border-radius: 7px;
-  margin: 0 15px 40px;
+  margin: 0 15px 15px;
   width: 95%;
 }
 
@@ -126,6 +125,7 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
 
 .validateButton {
   color: white;
+  width: 300px;
   transition: opacity 0.25s ease-in;
 }
 
@@ -139,10 +139,6 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
 }
 
 @media tablet {
-  .slideContentContainer {
-    height: 473px;
-  }
-  
   @keyframes popInAnimation {
     from {
       transform: translate3d(0, 400px, 0);
@@ -154,10 +150,6 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
 }
 
 @media mobile {
-  .slideContentContainer {
-    height: 511px;
-  }
-
   .questionOrigin, .question, .help, .answerContainer {
     max-width: 90%;
   }

package/lib/organism/review-stacked-slides/style.css

@@ -4,9 +4,8 @@
 
 .stackedSlidesYAxisOverflowContainer {
   width: 100%;
-  padding-top: 20px;
-  height: 100%;
-  min-height: 870px;
+  padding-top: 50px;
+  height: calc(100vh - 155px);
   /* --- ie11 fallback --- */
   overflow-y: hidden;
   /* --------------------- */
@@ -19,17 +18,14 @@
 
 .stackedSlidesContainer {
   position: relative;
-  padding-top: 20px;
-  height: 788px;
   max-width: 1240px;
   width: 85%;
-  align-self: center;
 }
 
 .slideBase {
   box-shadow: 0px 4px 58px rgba(0, 0, 0, 0.05);
   background: white;
-  height: 706px;
+  height: calc(100vh - 155px);
   border-radius: 24px;
   overflow: hidden;
   position: absolute;
@@ -47,6 +43,7 @@
   width: 100%;
   transform: translate(0, 0);
   transition: transform 0.5s ease-in;
+  
 }
 
 .position1 {
@@ -153,22 +150,15 @@
 
 @media tablet {
   .stackedSlidesContainer {
-    height: 638px;
     max-width: 960px;
   }
-
-  .slideBase {
-    height: 606px;
-  }
 }
 
 @media mobile {
   .stackedSlidesContainer {
-    height: 670px;
     max-width: 335px;
   }
-
   .slideBase {
-    height: 654px;
+    height: calc(100vh - 185px);
   }
 }

package/lib/template/app-player/popin-correction/index.js

@@ -101,6 +101,7 @@ const AssistanceLink = (props, context) => {
     title,
     onClick
   } = props;
+  if ((0, _isEmpty2.default)(title)) return null;
   const {
     skin
   } = context;

package/lib/template/app-player/popin-correction/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/template/app-player/popin-correction/index.js"],"names":["extractTabs","items","map","type","item","iconType","title","isOpen","open","Resources","resources","overlay","style","browserWrapper","value","browser","propTypes","PropTypes","shape","ResourceBrowser","SimpleText","text","simpleTextWrapper","simpleText","innerHTML","__html","string","AssistanceLink","props","context","onClick","skin","white","wrapperAssistance","alertIcon","titleLink","contextTypes","Provider","childContextTypes","func","Question","header","answer","answerPrefix","question","questionHeader","answerWrapper","checkIcon","PopinCorrection","Component","constructor","state","initWrapper","bind","componentDidMount","deferOpen","clearTimeout","deferedOpen","onOpen","setState","wrapper","render","extraLifeGranted","gameOver","klf","tips","quit","assistanceLink","primary","tabs","isLoading","failed","className","finalBackground","initialBackground","cta","linkProps","quitCta","color","hideQuitCta","scrollWrapper","loadingWrapper","loadingContent","content","activeLoader","Header","Accordion","Link"],"mappings":"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","sourcesContent":["import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport {defer, isNil, isEmpty, get, getOr, keys, omit} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyCheck as CheckIcon,\n  NovaLineInterfaceFeedbackInterfaceAlertCircle as AlertIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../../../atom/loader';\nimport Link from '../../../atom/link';\nimport Provider from '../../../atom/provider';\nimport ResourceBrowser from '../../../organism/resource-browser';\nimport Accordion from '../../../organism/accordion/container';\nimport Header from '../popin-header';\nimport style from './style.css';\n\nconst extractTabs = items =>\n  keys(items).map(type => {\n    const item = items[type];\n    return {iconType: type, title: item.title, isOpen: item.open};\n  });\n\nconst Resources = ({resources, overlay}) => (\n  <div className={style.browserWrapper}>\n    <ResourceBrowser resources={resources.value} overlay={overlay} className={style.browser} />\n  </div>\n);\n\nResources.propTypes = {\n  resources: PropTypes.shape({\n    value: ResourceBrowser.propTypes.resources\n  }),\n  overlay: ResourceBrowser.propTypes.overlay\n};\n\nconst SimpleText = ({text}) => (\n  <div data-name=\"simpleText\" className={style.simpleTextWrapper}>\n    <p\n      className={classnames(style.simpleText, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: text}}\n    />\n  </div>\n);\n\nSimpleText.propTypes = {\n  text: PropTypes.string\n};\n\nconst AssistanceLink = (props, context) => {\n  if (isEmpty(props)) return null;\n  const {title, onClick} = props;\n  const {skin} = context;\n  const white = get('common.white', skin);\n\n  return (\n    <div className={style.wrapperAssistance} onClick={onClick}>\n      <AlertIcon className={style.alertIcon} color={white} />\n      <span className={style.titleLink}> {title} </span>\n    </div>\n  );\n};\n\nAssistanceLink.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nAssistanceLink.propTypes = {\n  title: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst Question = ({header, answer, answerPrefix}) => (\n  <div className={style.question}>\n    <p\n      className={classnames(style.questionHeader, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: header}}\n    />\n    <div className={style.answerWrapper}>\n      <CheckIcon className={style.checkIcon} color=\"inherit\" />\n      {answerPrefix ? <span className={style.answerPrefix}>{answerPrefix}</span> : null}\n      <span\n        className={classnames(style.answer, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: answer}}\n      />\n    </div>\n  </div>\n);\n\nQuestion.propTypes = {\n  header: PropTypes.string,\n  answerPrefix: PropTypes.string,\n  answer: PropTypes.string\n};\n\nclass PopinCorrection extends Component {\n  static propTypes = {\n    resources: Resources.propTypes.resources,\n    overlay: ResourceBrowser.propTypes.overlay,\n    assistanceLink: PropTypes.shape(AssistanceLink.propTypes),\n    header: PropTypes.shape(omit(['animated'], Header.propTypes)),\n    extraLifeGranted: Header.propTypes.extraLifeGranted,\n    gameOver: Header.propTypes.gameOver,\n    question: PropTypes.shape(Question.propTypes),\n    klf: PropTypes.shape(SimpleText.propTypes),\n    tips: PropTypes.shape(SimpleText.propTypes),\n    onClick: Accordion.propTypes.onClick,\n    quit: PropTypes.shape({\n      cta: PropTypes.shape({\n        ...Link.propTypes,\n        title: PropTypes.string\n      })\n    }),\n    onOpen: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {open: false};\n    this.initWrapper = this.initWrapper.bind(this);\n  }\n\n  componentDidMount() {\n    this.deferOpen();\n  }\n\n  deferOpen() {\n    clearTimeout(this.deferedOpen);\n\n    this.deferedOpen = defer(() => {\n      const {onOpen} = this.props;\n      this.setState({open: true});\n      onOpen && onOpen();\n    });\n  }\n\n  initWrapper(wrapper) {\n    this.wrapper = wrapper;\n  }\n\n  render() {\n    const {\n      header = {},\n      extraLifeGranted,\n      gameOver,\n      question,\n      overlay,\n      resources,\n      klf,\n      tips,\n      onClick,\n      quit = {},\n      assistanceLink = {}\n    } = this.props;\n\n    const {open} = this.state;\n\n    const {skin} = this.context;\n    const primary = getOr('#f0f', 'common.primary', skin);\n\n    const tabs = extractTabs({resources, klf, tips});\n    const isLoading = isNil(header.failed);\n    const className = open ? style.finalBackground : style.initialBackground;\n    const {title, ...linkProps} = quit.cta || {};\n\n    const quitCta =\n      title || extraLifeGranted ? (\n        <Link\n          {...linkProps}\n          style={{\n            color: primary\n          }}\n          className={extraLifeGranted ? style.hideQuitCta : style.quitCta}\n          data-name=\"nextLink\"\n          data-popin=\"popinCorrection\"\n          data-next=\"quit-with-extra-life\"\n        >\n          {title}\n        </Link>\n      ) : null;\n\n    return (\n      <div ref={this.initWrapper} className={className} data-name=\"popinCorrection\">\n        <div className={style.scrollWrapper}>\n          <div className={isLoading ? style.loadingWrapper : style.wrapper}>\n            <div className={isLoading ? style.loadingContent : style.content}>\n              <Header\n                {...header}\n                gameOver={gameOver}\n                extraLifeGranted={extraLifeGranted}\n                animated\n              />\n              <Question {...question} />\n              <Accordion tabProps={tabs} onClick={onClick} oneTabOnly>\n                {isEmpty(getOr([], 'value', resources)) ? null : (\n                  <Resources resources={resources} overlay={overlay} />\n                )}\n                {klf.value ? <SimpleText text={klf.value} /> : null}\n                {tips.value ? <SimpleText text={tips.value} /> : null}\n              </Accordion>\n            </div>\n            {quitCta}\n            <AssistanceLink {...assistanceLink} />\n          </div>\n          {isLoading ? <Loader className={style.activeLoader} /> : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default PopinCorrection;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/template/app-player/popin-correction/index.js"],"names":["extractTabs","items","map","type","item","iconType","title","isOpen","open","Resources","resources","overlay","style","browserWrapper","value","browser","propTypes","PropTypes","shape","ResourceBrowser","SimpleText","text","simpleTextWrapper","simpleText","innerHTML","__html","string","AssistanceLink","props","context","onClick","skin","white","wrapperAssistance","alertIcon","titleLink","contextTypes","Provider","childContextTypes","func","Question","header","answer","answerPrefix","question","questionHeader","answerWrapper","checkIcon","PopinCorrection","Component","constructor","state","initWrapper","bind","componentDidMount","deferOpen","clearTimeout","deferedOpen","onOpen","setState","wrapper","render","extraLifeGranted","gameOver","klf","tips","quit","assistanceLink","primary","tabs","isLoading","failed","className","finalBackground","initialBackground","cta","linkProps","quitCta","color","hideQuitCta","scrollWrapper","loadingWrapper","loadingContent","content","activeLoader","Header","Accordion","Link"],"mappings":"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","sourcesContent":["import React, {Component} from 'react';\nimport PropTypes from 'prop-types';\nimport {defer, isNil, isEmpty, get, getOr, keys, omit} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyCheck as CheckIcon,\n  NovaLineInterfaceFeedbackInterfaceAlertCircle as AlertIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../../../atom/loader';\nimport Link from '../../../atom/link';\nimport Provider from '../../../atom/provider';\nimport ResourceBrowser from '../../../organism/resource-browser';\nimport Accordion from '../../../organism/accordion/container';\nimport Header from '../popin-header';\nimport style from './style.css';\n\nconst extractTabs = items =>\n  keys(items).map(type => {\n    const item = items[type];\n    return {iconType: type, title: item.title, isOpen: item.open};\n  });\n\nconst Resources = ({resources, overlay}) => (\n  <div className={style.browserWrapper}>\n    <ResourceBrowser resources={resources.value} overlay={overlay} className={style.browser} />\n  </div>\n);\n\nResources.propTypes = {\n  resources: PropTypes.shape({\n    value: ResourceBrowser.propTypes.resources\n  }),\n  overlay: ResourceBrowser.propTypes.overlay\n};\n\nconst SimpleText = ({text}) => (\n  <div data-name=\"simpleText\" className={style.simpleTextWrapper}>\n    <p\n      className={classnames(style.simpleText, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: text}}\n    />\n  </div>\n);\n\nSimpleText.propTypes = {\n  text: PropTypes.string\n};\n\nconst AssistanceLink = (props, context) => {\n  if (isEmpty(props)) return null;\n  const {title, onClick} = props;\n  if (isEmpty(title)) return null;\n  const {skin} = context;\n  const white = get('common.white', skin);\n\n  return (\n    <div className={style.wrapperAssistance} onClick={onClick}>\n      <AlertIcon className={style.alertIcon} color={white} />\n      <span className={style.titleLink}> {title} </span>\n    </div>\n  );\n};\n\nAssistanceLink.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nAssistanceLink.propTypes = {\n  title: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nconst Question = ({header, answer, answerPrefix}) => (\n  <div className={style.question}>\n    <p\n      className={classnames(style.questionHeader, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: header}}\n    />\n    <div className={style.answerWrapper}>\n      <CheckIcon className={style.checkIcon} color=\"inherit\" />\n      {answerPrefix ? <span className={style.answerPrefix}>{answerPrefix}</span> : null}\n      <span\n        className={classnames(style.answer, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: answer}}\n      />\n    </div>\n  </div>\n);\n\nQuestion.propTypes = {\n  header: PropTypes.string,\n  answerPrefix: PropTypes.string,\n  answer: PropTypes.string\n};\n\nclass PopinCorrection extends Component {\n  static propTypes = {\n    resources: Resources.propTypes.resources,\n    overlay: ResourceBrowser.propTypes.overlay,\n    assistanceLink: PropTypes.shape(AssistanceLink.propTypes),\n    header: PropTypes.shape(omit(['animated'], Header.propTypes)),\n    extraLifeGranted: Header.propTypes.extraLifeGranted,\n    gameOver: Header.propTypes.gameOver,\n    question: PropTypes.shape(Question.propTypes),\n    klf: PropTypes.shape(SimpleText.propTypes),\n    tips: PropTypes.shape(SimpleText.propTypes),\n    onClick: Accordion.propTypes.onClick,\n    quit: PropTypes.shape({\n      cta: PropTypes.shape({\n        ...Link.propTypes,\n        title: PropTypes.string\n      })\n    }),\n    onOpen: PropTypes.func\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {open: false};\n    this.initWrapper = this.initWrapper.bind(this);\n  }\n\n  componentDidMount() {\n    this.deferOpen();\n  }\n\n  deferOpen() {\n    clearTimeout(this.deferedOpen);\n\n    this.deferedOpen = defer(() => {\n      const {onOpen} = this.props;\n      this.setState({open: true});\n      onOpen && onOpen();\n    });\n  }\n\n  initWrapper(wrapper) {\n    this.wrapper = wrapper;\n  }\n\n  render() {\n    const {\n      header = {},\n      extraLifeGranted,\n      gameOver,\n      question,\n      overlay,\n      resources,\n      klf,\n      tips,\n      onClick,\n      quit = {},\n      assistanceLink = {}\n    } = this.props;\n\n    const {open} = this.state;\n\n    const {skin} = this.context;\n    const primary = getOr('#f0f', 'common.primary', skin);\n\n    const tabs = extractTabs({resources, klf, tips});\n    const isLoading = isNil(header.failed);\n    const className = open ? style.finalBackground : style.initialBackground;\n    const {title, ...linkProps} = quit.cta || {};\n\n    const quitCta =\n      title || extraLifeGranted ? (\n        <Link\n          {...linkProps}\n          style={{\n            color: primary\n          }}\n          className={extraLifeGranted ? style.hideQuitCta : style.quitCta}\n          data-name=\"nextLink\"\n          data-popin=\"popinCorrection\"\n          data-next=\"quit-with-extra-life\"\n        >\n          {title}\n        </Link>\n      ) : null;\n\n    return (\n      <div ref={this.initWrapper} className={className} data-name=\"popinCorrection\">\n        <div className={style.scrollWrapper}>\n          <div className={isLoading ? style.loadingWrapper : style.wrapper}>\n            <div className={isLoading ? style.loadingContent : style.content}>\n              <Header\n                {...header}\n                gameOver={gameOver}\n                extraLifeGranted={extraLifeGranted}\n                animated\n              />\n              <Question {...question} />\n              <Accordion tabProps={tabs} onClick={onClick} oneTabOnly>\n                {isEmpty(getOr([], 'value', resources)) ? null : (\n                  <Resources resources={resources} overlay={overlay} />\n                )}\n                {klf.value ? <SimpleText text={klf.value} /> : null}\n                {tips.value ? <SimpleText text={tips.value} /> : null}\n              </Accordion>\n            </div>\n            {quitCta}\n            <AssistanceLink {...assistanceLink} />\n          </div>\n          {isLoading ? <Loader className={style.activeLoader} /> : null}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default PopinCorrection;\n"],"file":"index.js"}

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

@@ -1,12 +1,13 @@
 .playerReviewContainer {
-  position: relative;
   display: flex;
   flex-direction: column;
-  /* --- ie11 fallback --- */
+  min-height: 700px;
+  position: fixed;
+  top: 0px;
+  left: 0px;
   height: 100%;
-  /* --------------------- */
-  height: min-content;
-  min-height: 832px;
+  width: 100%;
+  z-index: 10;
 }
 
 /* 
@@ -35,7 +36,6 @@
   position: absolute;
   display: block;
   height: 100%;
-  min-height: 120vh;
   top: 0;
   left: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "10.22.22",
+  "version": "10.22.24-alpha.5+31142bfd9",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -100,6 +100,7 @@
     "@coorpacademy/react-native-slider": "^0.11.1",
     "@coorpacademy/translate": "6.1.5",
     "@coorpacademy/webpack-config": "10.0.4",
+    "@react-native-community/blur": "^4.2.0",
     "@storybook/addon-knobs": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
@@ -139,5 +140,5 @@
     "webpack": "^4.43.0"
   },
   "author": "CoorpAcademy",
-  "gitHead": "6eca157ba8c342a0d345a7d303166b43e4a9792a"
+  "gitHead": "31142bfd914b3f169048c3e0bc261835ab74c030"
 }