@coorpacademy/components 11.2.7-alpha.3 → 11.2.8

package/lib/organism/review-congrats/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","congrats","position","width","height","flexDirection","alignItems","paddingVertical","flex","buttons","paddingHorizontal","justifyContent","title","fontWeight","fontSize","lineHeight","marginVertical","color","colors","text","primary","confettis","flexGrow","pointerEvents","scrollView","scrollViewContent","fadeIn","property","fromValue","toValue","duration","translateHorizontally","ReviewCongrats","props","ariaLabel","animationLottie","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","useTemplateContext","styleSheet","setStylesheet","useState","isCongratsTranslationDone","setCongratsTranslationDone","isRankShown","setRankShown","scrollViewRef","useRef","showCongrats","useAnimateProp","onComplete","translateCongrats","useTranslateY","showConfettis","fadeInRank","translateRank","useTranslateX","setTimeout","current","scrollToEnd","animatedRank","animatedStyle","fadeInStars","delay","translateStars","showButton1","showButton2","congratsSequence","sequence","parallel","useEffect","start","_stylesheet","handleContinueRevisingPress","onClick","handleReviseAnotherSkillPress","animationSrc","reviewCardTitle","reviewCardValue","rankSuffix","RankIcon","positive","StarIcon","battle","label","BOX_STYLE","backgroundColor","uri"],"sources":["../../../src/organism/review-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, ScrollView, StyleSheet, Text, TextStyle, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport {\n  sequence,\n  parallel,\n  useAnimateProp,\n  useTranslateY,\n  useTranslateX\n} from '@coorpacademy/react-native-animation';\nimport type {AnimatePropParams} from '@coorpacademy/react-native-animation/es/use-animate-prop';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport CardCongrats from '../../molecule/card-congrats/index.native';\nimport {ReviewCongratsProps} from './prop-types';\n\ntype StyleSheetType = {\n  buttons: ViewStyle;\n  congrats: ViewStyle;\n  confettis: ViewStyle;\n  scrollView: ViewStyle;\n  scrollViewContent: ViewStyle;\n  title: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    congrats: {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingVertical: 90,\n      flex: 1\n    },\n    buttons: {\n      width: '100%',\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      flex: 1\n    },\n    title: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      marginVertical: 20,\n      color: theme.colors.text.primary\n    },\n    confettis: {\n      flexGrow: 1,\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'box-none'\n    },\n    scrollView: {\n      height: 300\n    },\n    scrollViewContent: {\n      alignItems: 'center',\n      paddingHorizontal: 40\n    }\n  });\n\nconst fadeIn: AnimatePropParams = {\n  property: 'opacity',\n  fromValue: 0,\n  toValue: 1,\n  duration: 350\n};\n\nconst translateHorizontally = {\n  property: 'translateX',\n  fromValue: 180,\n  toValue: 0,\n  duration: 800\n};\n\nconst ReviewCongrats = (props: ReviewCongratsProps) => {\n  const {\n    'aria-label': ariaLabel,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [isCongratsTranslationDone, setCongratsTranslationDone] = useState<boolean>(false);\n  const [isRankShown, setRankShown] = useState<boolean>(false);\n\n  const scrollViewRef = useRef<ScrollView>(null);\n\n  const showCongrats = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 950,\n    onComplete: () => {\n      setCongratsTranslationDone(true);\n    }\n  });\n\n  const translateCongrats = useTranslateY({\n    fromValue: 100,\n    toValue: 0,\n    duration: 550\n  });\n\n  const showConfettis = useAnimateProp(fadeIn);\n  const fadeInRank = useAnimateProp(fadeIn);\n  const translateRank = useTranslateX({\n    ...translateHorizontally,\n    onComplete: () => {\n      setRankShown(true);\n      setTimeout(() => {\n        scrollViewRef?.current?.scrollToEnd();\n      }, 700);\n    }\n  });\n\n  const animatedRank = [fadeInRank.animatedStyle, translateRank.animatedStyle];\n\n  const fadeInStars = useAnimateProp({\n    ...fadeIn,\n    delay: 1000\n  });\n\n  const translateStars = useTranslateX({\n    ...translateHorizontally,\n    delay: 1000\n  });\n\n  const showButton1 = useAnimateProp(fadeIn);\n  const showButton2 = useAnimateProp(fadeIn);\n\n  const congratsSequence = sequence([\n    parallel([showCongrats, translateCongrats]),\n    parallel([showConfettis, fadeInRank, translateRank]),\n    parallel([fadeInStars, translateStars]),\n    sequence([showButton1, showButton2])\n  ]);\n\n  useEffect(() => {\n    congratsSequence.start();\n    // (required only once on mount)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handleContinueRevisingPress = buttonRevising?.onClick || noop;\n  const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || noop;\n\n  return (\n    <Animated.View\n      style={[styleSheet.congrats, translateCongrats.animatedStyle, showCongrats.animatedStyle]}\n      accessibilityLabel={ariaLabel}\n    >\n      <Text style={styleSheet.title}>{title}</Text>\n      <ScrollView\n        ref={scrollViewRef}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        style={styleSheet.scrollView}\n        contentContainerStyle={styleSheet.scrollViewContent}\n      >\n        {cardCongratsRank ? (\n          <Animated.View style={animatedRank}>\n            <CardCongrats\n              animationUri={cardCongratsRank.animationLottie.animationSrc}\n              text={cardCongratsRank.reviewCardTitle}\n              value={`${cardCongratsRank.reviewCardValue} ${cardCongratsRank.rankSuffix}`}\n              Icon={RankIcon}\n              iconColor={theme.colors.positive}\n              textColor={theme.colors.text.primary}\n              direction=\"row-reverse\"\n            />\n          </Animated.View>\n        ) : null}\n        <Animated.View style={[fadeInStars.animatedStyle, translateStars.animatedStyle]}>\n          <CardCongrats\n            animationUri={isRankShown ? cardCongratsStar.animationLottie.animationSrc : null}\n            Icon={StarIcon}\n            text={cardCongratsStar.reviewCardTitle}\n            value={cardCongratsStar.reviewCardValue}\n            iconColor={theme.colors.battle}\n            textColor={theme.colors.battle}\n            direction=\"row\"\n          />\n        </Animated.View>\n      </ScrollView>\n\n      <Animated.View style={styleSheet.buttons}>\n        {buttonRevisingSkill ? (\n          <Animated.View style={showButton1.animatedStyle}>\n            <Button\n              onPress={handleReviseAnotherSkillPress}\n              accessibilityLabel={buttonRevisingSkill['aria-label']}\n              submitValue={buttonRevisingSkill.label}\n              style={{...BOX_STYLE, backgroundColor: '#fff'}}\n              textStyle={{color: '#123'}}\n            />\n          </Animated.View>\n        ) : null}\n        {buttonRevising ? (\n          <Animated.View style={showButton2.animatedStyle}>\n            <Button\n              onPress={handleContinueRevisingPress}\n              accessibilityLabel={buttonRevising['aria-label']}\n              submitValue={buttonRevising.label}\n            />\n          </Animated.View>\n        ) : null}\n      </Animated.View>\n\n      {isCongratsTranslationDone ? (\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[styleSheet.confettis, showConfettis.animatedStyle]}\n        >\n          <LottieView source={{uri: animationLottie.animationSrc}} autoPlay loop={false} />\n        </Animated.View>\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default ReviewCongrats;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","congrats","position","width","height","flexDirection","alignItems","paddingVertical","flex","buttons","paddingHorizontal","justifyContent","title","fontWeight","fontSize","lineHeight","marginVertical","color","colors","text","primary","confettis","flexGrow","pointerEvents","scrollView","scrollViewContent","fadeIn","property","fromValue","toValue","duration","translateHorizontally","ReviewCongrats","props","ariaLabel","animationLottie","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","useTemplateContext","styleSheet","setStylesheet","useState","isCongratsTranslationDone","setCongratsTranslationDone","isRankShown","setRankShown","scrollViewRef","useRef","showCongrats","useAnimateProp","onComplete","translateCongrats","useTranslateY","showConfettis","fadeInRank","translateRank","useTranslateX","setTimeout","current","scrollToEnd","animatedRank","animatedStyle","fadeInStars","delay","translateStars","showButton1","showButton2","congratsSequence","sequence","parallel","useEffect","start","_stylesheet","handleContinueRevisingPress","onClick","handleReviseAnotherSkillPress","showStarLottieAnimation","animationSrc","reviewCardTitle","reviewCardValue","rankSuffix","RankIcon","positive","StarIcon","battle","label","BOX_STYLE","backgroundColor","uri"],"sources":["../../../src/organism/review-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, ScrollView, StyleSheet, Text, TextStyle, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport {\n  sequence,\n  parallel,\n  useAnimateProp,\n  useTranslateY,\n  useTranslateX\n} from '@coorpacademy/react-native-animation';\nimport type {AnimatePropParams} from '@coorpacademy/react-native-animation/es/use-animate-prop';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport CardCongrats from '../../molecule/card-congrats/index.native';\nimport {ReviewCongratsProps} from './prop-types';\n\ntype StyleSheetType = {\n  buttons: ViewStyle;\n  congrats: ViewStyle;\n  confettis: ViewStyle;\n  scrollView: ViewStyle;\n  scrollViewContent: ViewStyle;\n  title: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    congrats: {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingVertical: 90,\n      flex: 1\n    },\n    buttons: {\n      width: '100%',\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      height: 114\n    },\n    title: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      marginVertical: 20,\n      color: theme.colors.text.primary\n    },\n    confettis: {\n      flexGrow: 1,\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'box-none'\n    },\n    scrollView: {\n      height: 300\n    },\n    scrollViewContent: {\n      alignItems: 'center',\n      paddingHorizontal: 40\n    }\n  });\n\nconst fadeIn: AnimatePropParams = {\n  property: 'opacity',\n  fromValue: 0,\n  toValue: 1,\n  duration: 350\n};\n\nconst translateHorizontally = {\n  property: 'translateX',\n  fromValue: 180,\n  toValue: 0,\n  duration: 800\n};\n\nconst ReviewCongrats = (props: ReviewCongratsProps) => {\n  const {\n    'aria-label': ariaLabel,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [isCongratsTranslationDone, setCongratsTranslationDone] = useState<boolean>(false);\n  const [isRankShown, setRankShown] = useState<boolean>(false);\n\n  const scrollViewRef = useRef<ScrollView>(null);\n\n  const showCongrats = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 950,\n    onComplete: () => {\n      setCongratsTranslationDone(true);\n    }\n  });\n\n  const translateCongrats = useTranslateY({\n    fromValue: 100,\n    toValue: 0,\n    duration: 550\n  });\n\n  const showConfettis = useAnimateProp(fadeIn);\n  const fadeInRank = useAnimateProp(fadeIn);\n  const translateRank = useTranslateX({\n    ...translateHorizontally,\n    onComplete: () => {\n      setRankShown(true);\n      setTimeout(() => {\n        scrollViewRef?.current?.scrollToEnd();\n      }, 700);\n    }\n  });\n\n  const animatedRank = [fadeInRank.animatedStyle, translateRank.animatedStyle];\n\n  const fadeInStars = useAnimateProp({\n    ...fadeIn,\n    delay: cardCongratsRank ? 1000 : 0\n  });\n\n  const translateStars = useTranslateX({\n    ...translateHorizontally,\n    delay: cardCongratsRank ? 1000 : 0\n  });\n\n  const showButton1 = useAnimateProp(fadeIn);\n  const showButton2 = useAnimateProp(fadeIn);\n\n  const congratsSequence = sequence([\n    parallel([showCongrats, translateCongrats]),\n    parallel([\n      showConfettis,\n      cardCongratsRank\n        ? sequence([parallel([fadeInRank, translateRank]), parallel([fadeInStars, translateStars])])\n        : parallel([fadeInStars, translateStars])\n    ]),\n    sequence([showButton1, showButton2])\n  ]);\n\n  useEffect(() => {\n    congratsSequence.start();\n    // (required only once on mount)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handleContinueRevisingPress = buttonRevising?.onClick || noop;\n  const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || noop;\n  const showStarLottieAnimation = !cardCongratsRank || isRankShown;\n\n  return (\n    <Animated.View\n      style={[styleSheet.congrats, translateCongrats.animatedStyle, showCongrats.animatedStyle]}\n      accessibilityLabel={ariaLabel}\n    >\n      <Text style={styleSheet.title}>{title}</Text>\n      <ScrollView\n        ref={scrollViewRef}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        style={styleSheet.scrollView}\n        contentContainerStyle={styleSheet.scrollViewContent}\n      >\n        {cardCongratsRank ? (\n          <Animated.View style={animatedRank}>\n            <CardCongrats\n              animationUri={cardCongratsRank.animationLottie.animationSrc}\n              text={cardCongratsRank.reviewCardTitle}\n              value={`${cardCongratsRank.reviewCardValue} ${cardCongratsRank.rankSuffix}`}\n              Icon={RankIcon}\n              iconColor={theme.colors.positive}\n              textColor={theme.colors.text.primary}\n              direction=\"row-reverse\"\n            />\n          </Animated.View>\n        ) : null}\n        <Animated.View style={[fadeInStars.animatedStyle, translateStars.animatedStyle]}>\n          <CardCongrats\n            animationUri={\n              showStarLottieAnimation ? cardCongratsStar.animationLottie.animationSrc : null\n            }\n            Icon={StarIcon}\n            text={cardCongratsStar.reviewCardTitle}\n            value={cardCongratsStar.reviewCardValue}\n            iconColor={theme.colors.battle}\n            textColor={theme.colors.battle}\n            direction=\"row\"\n          />\n        </Animated.View>\n      </ScrollView>\n\n      <Animated.View style={styleSheet.buttons}>\n        {buttonRevisingSkill ? (\n          <Animated.View style={showButton1.animatedStyle}>\n            <Button\n              onPress={handleReviseAnotherSkillPress}\n              accessibilityLabel={buttonRevisingSkill['aria-label']}\n              submitValue={buttonRevisingSkill.label}\n              style={{...BOX_STYLE, backgroundColor: '#fff'}}\n              textStyle={{color: '#123'}}\n            />\n          </Animated.View>\n        ) : null}\n        {buttonRevising ? (\n          <Animated.View style={showButton2.animatedStyle}>\n            <Button\n              onPress={handleContinueRevisingPress}\n              accessibilityLabel={buttonRevising['aria-label']}\n              submitValue={buttonRevising.label}\n            />\n          </Animated.View>\n        ) : null}\n      </Animated.View>\n\n      {isCongratsTranslationDone ? (\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[styleSheet.confettis, showConfettis.animatedStyle]}\n        >\n          <LottieView source={{uri: animationLottie.animationSrc}} autoPlay loop={false} />\n        </Animated.View>\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default ReviewCongrats;\n"],"mappings":"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"}

package/lib/organism/review-slide/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAa,gBAAgB,EAAa,MAAM,cAAc,CAAC;AAwKtE,QAAA,MAAM,KAAK,UAAW,gBAAgB,gBA8CrC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAa,gBAAgB,EAAa,MAAM,cAAc,CAAC;AA0KtE,QAAA,MAAM,KAAK,UAAW,gBAAgB,gBA8CrC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -48,7 +48,9 @@ const CorrectionPopin = ({
     toValue: 0,
     duration: 500,
     easing: _reactNative.Easing.bezier(0.34, 1.36, 0.64, 1)
-  });
+  }); // the translation is required only once on mount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
   (0, _react.useEffect)(() => translateUp.start(), []);
   if (!showCorrectionPopin) return null;
   const klf = (0, _getOr.default)(undefined, 'klf', correctionPopinProps);

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

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["styles","StyleSheet","create","correctionPopinWrapper","position","bottom","width","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","translateUp","useTranslateY","fromValue","toValue","duration","easing","Easing","bezier","useEffect","start","klf","getOr","undefined","information","label","message","next","get","onClick","_correctionPopinProps","type","resultLabel","style","animatedStyle","createQuestionStyle","theme","questionHeading","justifyContent","questionOrigin","fontSize","lineHeight","color","colors","text","primary","marginBottom","spacing","tiny","marginTop","small","textAlign","questionText","fontWeight","questionHelp","gray","medium","choicesScrollView","marginVertical","choicesScrollContent","padding","Question","props","answerUI","useTemplateContext","setStyle","useState","questionStyle","createSlideStyle","num","screenWidth","slideWidth","slide","left","backgroundColor","height","alignItems","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","borderRadius","Slide","validateButton","useWindowDimensions","slideStyle","loading","parentContentTitle","handleValidatePress","disabled"],"sources":["../../../src/organism/review-slide/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {\n  Animated,\n  Easing,\n  ScrollView,\n  StyleSheet,\n  TextStyle,\n  useWindowDimensions,\n  View,\n  ViewStyle\n} from 'react-native';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Text from '../../atom/text/index.native';\nimport Answer from '../../molecule/answer/index.native';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {PopinProps, ReviewSlideProps, SlideProps} from './prop-types';\n\nconst styles = StyleSheet.create({\n  correctionPopinWrapper: {\n    position: 'absolute',\n    bottom: 16,\n    width: '105%'\n  }\n});\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}: PopinProps) => {\n  const translateUp = useTranslateY({\n    fromValue: 500,\n    toValue: 0,\n    duration: 500,\n    easing: Easing.bezier(0.34, 1.36, 0.64, 1)\n  });\n\n  useEffect(() => translateUp.start(), []);\n\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr(undefined, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n  const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick,\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  const style = animateCorrectionPopin\n    ? [styles.correctionPopinWrapper, translateUp.animatedStyle]\n    : styles.correctionPopinWrapper;\n\n  return (\n    <Animated.View style={style}>\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </Animated.View>\n  );\n};\n\ntype StyleSheetType = {\n  questionHeading: ViewStyle;\n  questionOrigin: ViewStyle;\n  questionText: TextStyle;\n  questionHelp: ViewStyle;\n  choicesScrollView: ViewStyle;\n  choicesScrollContent: ViewStyle;\n};\n\nconst createQuestionStyle = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    questionHeading: {\n      justifyContent: 'space-between'\n    },\n    questionOrigin: {\n      fontSize: 12,\n      lineHeight: 16,\n      color: theme.colors.text.primary,\n      marginBottom: theme.spacing.tiny,\n      marginTop: theme.spacing.small,\n      textAlign: 'center'\n    },\n    questionText: {\n      fontSize: 16,\n      lineHeight: 22,\n      fontWeight: '700',\n      color: theme.colors.text.primary,\n      textAlign: 'center'\n    },\n    questionHelp: {\n      fontSize: 12,\n      lineHeight: 16,\n      color: theme.colors.gray.medium,\n      marginBottom: 0,\n      marginTop: theme.spacing.small,\n      textAlign: 'center'\n    },\n    choicesScrollView: {\n      marginVertical: 20,\n      width: '100%'\n    },\n    choicesScrollContent: {\n      padding: 10\n    }\n  });\n\ntype QuestionProps = {\n  answerUI: SlideProps['answerUI'];\n  questionText: SlideProps['questionText'];\n  questionOrigin: SlideProps['parentContentTitle'];\n};\n\nconst Question = (props: QuestionProps) => {\n  const {answerUI, questionText, questionOrigin} = props;\n  const {theme} = useTemplateContext();\n  const [style, setStyle] = useState<StyleSheetType>();\n\n  useEffect(() => {\n    const questionStyle = createQuestionStyle(theme);\n    setStyle(questionStyle);\n  }, [theme]);\n\n  if (!answerUI || !questionText || !style) return null;\n\n  return (\n    <>\n      <View style={style.questionHeading}>\n        <Text style={style.questionOrigin}>{questionOrigin}</Text>\n        <Text style={style.questionText}>{questionText}</Text>\n        <Text style={style.questionHelp}>{get('help', answerUI)}</Text>\n      </View>\n      <ScrollView\n        style={style.choicesScrollView}\n        contentContainerStyle={style.choicesScrollContent}\n        centerContent\n        showsHorizontalScrollIndicator={false}\n        showsVerticalScrollIndicator={false}\n      >\n        <Answer {...answerUI} />\n      </ScrollView>\n    </>\n  );\n};\n\ntype SlideStyle = {\n  slide: ViewStyle;\n};\n\nconst createSlideStyle = (num: number, screenWidth: number): SlideStyle => {\n  const slideWidth = screenWidth - 40 - num * 8;\n\n  return StyleSheet.create({\n    slide: {\n      position: 'absolute',\n      left: 20 + num * 4,\n      bottom: 34 + num * 5,\n      backgroundColor: '#fff', // theme.colors.white\n      height: '90%',\n      width: slideWidth,\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      padding: 25,\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.05,\n      shadowRadius: 16,\n      elevation: 10 - num * 1,\n      borderRadius: 16\n    }\n  });\n};\n\nconst Slide = (props: ReviewSlideProps) => {\n  const {animatedStyle, slide, correctionPopinProps, validateButton, num, slideIndex = '0'} = props;\n\n  const {width} = useWindowDimensions();\n  const slideStyle = createSlideStyle(num, width);\n\n  const {\n    loading,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  if (loading) {\n    return <View style={slideStyle.slide} />;\n  }\n\n  const {onClick: handleValidatePress} = validateButton;\n\n  return (\n    <Animated.View style={[slideStyle.slide, animatedStyle]}>\n      <Question\n        questionOrigin={parentContentTitle}\n        questionText={questionText}\n        answerUI={answerUI}\n        key=\"question-container\"\n      />\n      <Button\n        disabled={validateButton.disabled}\n        submitValue={validateButton.label}\n        onPress={handleValidatePress}\n        testID={`slide-validate-button-${slideIndex}`}\n      />\n      {correctionPopinProps ? (\n        <CorrectionPopin\n          correctionPopinProps={correctionPopinProps}\n          slideIndex={slideIndex}\n          showCorrectionPopin={showCorrectionPopin}\n          animateCorrectionPopin={animateCorrectionPopin}\n          key=\"correction-popin\"\n        />\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default Slide;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["styles","StyleSheet","create","correctionPopinWrapper","position","bottom","width","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","translateUp","useTranslateY","fromValue","toValue","duration","easing","Easing","bezier","useEffect","start","klf","getOr","undefined","information","label","message","next","get","onClick","_correctionPopinProps","type","resultLabel","style","animatedStyle","createQuestionStyle","theme","questionHeading","justifyContent","questionOrigin","fontSize","lineHeight","color","colors","text","primary","marginBottom","spacing","tiny","marginTop","small","textAlign","questionText","fontWeight","questionHelp","gray","medium","choicesScrollView","marginVertical","choicesScrollContent","padding","Question","props","answerUI","useTemplateContext","setStyle","useState","questionStyle","createSlideStyle","num","screenWidth","slideWidth","slide","left","backgroundColor","height","alignItems","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","borderRadius","Slide","validateButton","useWindowDimensions","slideStyle","loading","parentContentTitle","handleValidatePress","disabled"],"sources":["../../../src/organism/review-slide/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {\n  Animated,\n  Easing,\n  ScrollView,\n  StyleSheet,\n  TextStyle,\n  useWindowDimensions,\n  View,\n  ViewStyle\n} from 'react-native';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Text from '../../atom/text/index.native';\nimport Answer from '../../molecule/answer/index.native';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {PopinProps, ReviewSlideProps, SlideProps} from './prop-types';\n\nconst styles = StyleSheet.create({\n  correctionPopinWrapper: {\n    position: 'absolute',\n    bottom: 16,\n    width: '105%'\n  }\n});\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}: PopinProps) => {\n  const translateUp = useTranslateY({\n    fromValue: 500,\n    toValue: 0,\n    duration: 500,\n    easing: Easing.bezier(0.34, 1.36, 0.64, 1)\n  });\n\n  // the translation is required only once on mount\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => translateUp.start(), []);\n\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr(undefined, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n  const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick,\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  const style = animateCorrectionPopin\n    ? [styles.correctionPopinWrapper, translateUp.animatedStyle]\n    : styles.correctionPopinWrapper;\n\n  return (\n    <Animated.View style={style}>\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </Animated.View>\n  );\n};\n\ntype StyleSheetType = {\n  questionHeading: ViewStyle;\n  questionOrigin: ViewStyle;\n  questionText: TextStyle;\n  questionHelp: ViewStyle;\n  choicesScrollView: ViewStyle;\n  choicesScrollContent: ViewStyle;\n};\n\nconst createQuestionStyle = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    questionHeading: {\n      justifyContent: 'space-between'\n    },\n    questionOrigin: {\n      fontSize: 12,\n      lineHeight: 16,\n      color: theme.colors.text.primary,\n      marginBottom: theme.spacing.tiny,\n      marginTop: theme.spacing.small,\n      textAlign: 'center'\n    },\n    questionText: {\n      fontSize: 16,\n      lineHeight: 22,\n      fontWeight: '700',\n      color: theme.colors.text.primary,\n      textAlign: 'center'\n    },\n    questionHelp: {\n      fontSize: 12,\n      lineHeight: 16,\n      color: theme.colors.gray.medium,\n      marginBottom: 0,\n      marginTop: theme.spacing.small,\n      textAlign: 'center'\n    },\n    choicesScrollView: {\n      marginVertical: 20,\n      width: '100%'\n    },\n    choicesScrollContent: {\n      padding: 10\n    }\n  });\n\ntype QuestionProps = {\n  answerUI: SlideProps['answerUI'];\n  questionText: SlideProps['questionText'];\n  questionOrigin: SlideProps['parentContentTitle'];\n};\n\nconst Question = (props: QuestionProps) => {\n  const {answerUI, questionText, questionOrigin} = props;\n  const {theme} = useTemplateContext();\n  const [style, setStyle] = useState<StyleSheetType>();\n\n  useEffect(() => {\n    const questionStyle = createQuestionStyle(theme);\n    setStyle(questionStyle);\n  }, [theme]);\n\n  if (!answerUI || !questionText || !style) return null;\n\n  return (\n    <>\n      <View style={style.questionHeading}>\n        <Text style={style.questionOrigin}>{questionOrigin}</Text>\n        <Text style={style.questionText}>{questionText}</Text>\n        <Text style={style.questionHelp}>{get('help', answerUI)}</Text>\n      </View>\n      <ScrollView\n        style={style.choicesScrollView}\n        contentContainerStyle={style.choicesScrollContent}\n        centerContent\n        showsHorizontalScrollIndicator={false}\n        showsVerticalScrollIndicator={false}\n      >\n        <Answer {...answerUI} />\n      </ScrollView>\n    </>\n  );\n};\n\ntype SlideStyle = {\n  slide: ViewStyle;\n};\n\nconst createSlideStyle = (num: number, screenWidth: number): SlideStyle => {\n  const slideWidth = screenWidth - 40 - num * 8;\n\n  return StyleSheet.create({\n    slide: {\n      position: 'absolute',\n      left: 20 + num * 4,\n      bottom: 34 + num * 5,\n      backgroundColor: '#fff', // theme.colors.white\n      height: '90%',\n      width: slideWidth,\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      padding: 25,\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: -1},\n      shadowOpacity: 0.05,\n      shadowRadius: 16,\n      elevation: 10 - num * 1,\n      borderRadius: 16\n    }\n  });\n};\n\nconst Slide = (props: ReviewSlideProps) => {\n  const {animatedStyle, slide, correctionPopinProps, validateButton, num, slideIndex = '0'} = props;\n\n  const {width} = useWindowDimensions();\n  const slideStyle = createSlideStyle(num, width);\n\n  const {\n    loading,\n    parentContentTitle,\n    questionText,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  if (loading) {\n    return <View style={slideStyle.slide} />;\n  }\n\n  const {onClick: handleValidatePress} = validateButton;\n\n  return (\n    <Animated.View style={[slideStyle.slide, animatedStyle]}>\n      <Question\n        questionOrigin={parentContentTitle}\n        questionText={questionText}\n        answerUI={answerUI}\n        key=\"question-container\"\n      />\n      <Button\n        disabled={validateButton.disabled}\n        submitValue={validateButton.label}\n        onPress={handleValidatePress}\n        testID={`slide-validate-button-${slideIndex}`}\n      />\n      {correctionPopinProps ? (\n        <CorrectionPopin\n          correctionPopinProps={correctionPopinProps}\n          slideIndex={slideIndex}\n          showCorrectionPopin={showCorrectionPopin}\n          animateCorrectionPopin={animateCorrectionPopin}\n          key=\"correction-popin\"\n        />\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default Slide;\n"],"mappings":"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"}

package/lib/organism/review-stacked-slides/index.native.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import type { ReviewStackProps } from './prop-types';
-export declare const TOTAL_SLIDES_STACK = 5;
 declare const StackedSlides: (props: ReviewStackProps) => JSX.Element;
 export default StackedSlides;
 //# sourceMappingURL=index.native.d.ts.map

package/lib/organism/review-stacked-slides/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAyBpC,QAAA,MAAM,aAAa,UAAW,gBAAgB,gBA2G7C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAenD,QAAA,MAAM,aAAa,UAAW,gBAAgB,gBAuI7C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/organism/review-stacked-slides/index.native.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.TOTAL_SLIDES_STACK = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -19,9 +19,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const TOTAL_SLIDES_STACK = 5;
-exports.TOTAL_SLIDES_STACK = TOTAL_SLIDES_STACK;
-
 const style = _reactNative.StyleSheet.create({
   slides: {
     flex: 1,
@@ -29,19 +26,6 @@ const style = _reactNative.StyleSheet.create({
     width: '100%'
   }
 });
-
-const FakeSlide = ({
-  position,
-  validateButton
-}) => /*#__PURE__*/_react.default.createElement(_index.default, {
-  num: position,
-  slide: {
-    loading: true,
-    position
-  },
-  slideIndex: `${position}`,
-  validateButton: validateButton
-});
 /*
    - slides are ordered to be played from left to right: [0,1,2,3]
    - slides are piled on the view, so we need to reverse the order:
@@ -60,7 +44,8 @@ const StackedSlides = props => {
     correctionPopinProps
   } = props;
   const [unstacked, setUnstacked] = (0, _react.useState)([]);
-  const [restacked, setRestacked] = (0, _react.useState)();
+  const [restacking, setRestacking] = (0, _react.useState)(null);
+  const [restackingDone, setRestackingDone] = (0, _react.useState)(false);
   const hideSlides = (0, _reactNativeAnimation.useTranslateY)({
     fromValue: 0,
     toValue: windowHeight,
@@ -72,6 +57,12 @@ const StackedSlides = props => {
     duration: 500,
     easing: _reactNative.Easing.cubic
   });
+  const restackTranslation = (0, _reactNativeAnimation.useTranslateY)({
+    toValue: 0,
+    fromValue: -windowHeight,
+    duration: 1200,
+    easing: _reactNative.Easing.out(_reactNative.Easing.cubic)
+  });
   (0, _react.useEffect)(() => {
     if (endReview) {
       hideSlides.start();
@@ -81,10 +72,12 @@ const StackedSlides = props => {
   const unstackingSlide = (0, _keys.default)(slides).find(k => slides[k].animationType === 'unstack');
   const remainingKeys = (0, _keys.default)(slides).filter(k => slides[k].position >= 0 && !slides[k].animationType);
   const orderedKeys = remainingKeys.sort((k1, k2) => slides[k2].position > slides[k1].position ? 1 : -1);
-  const animatedSlide = restackingSlide || unstackingSlide;
+  const animatedFrontSlide = unstackingSlide || (restackingSlide && restacking === null ? restackingSlide : undefined);
+  const animatedRestackedSlide = restacking !== null;
   (0, _react.useEffect)(() => {
-    if (restacked && orderedKeys.includes(restacked)) {
-      setRestacked(null);
+    if (restacking !== null && orderedKeys.includes(restacking)) {
+      setRestacking(null);
+      setRestackingDone(false);
     } // this effect is required only when the list orderedKeys changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -99,18 +92,24 @@ const StackedSlides = props => {
     }
   }, [unstackingSlide, unstacked, setUnstacked, translateDown]);
   (0, _react.useEffect)(() => {
-    const restacking = restackingSlide && restacked !== restackingSlide;
+    const startRestacking = !restackingDone && restackingSlide && restacking !== restackingSlide;
 
-    if (restacking) {
+    if (startRestacking) {
       translateDown.start(() => {
-        setRestacked(restackingSlide);
+        setRestacking(restackingSlide);
+        restackTranslation.start(() => {
+          setRestackingDone(true);
+        });
       });
-    }
-  }, [restackingSlide, restacked, setRestacked, translateDown]);
+    } // this effect is required only to trigger the restack animation when a new restackingSlide is set
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [restackingSlide, restacking]);
   const stackedSlides = orderedKeys.map((slideIndex, index) => {
     const slide = slides[slideIndex];
+    const num = orderedKeys.length - index;
     return /*#__PURE__*/_react.default.createElement(_index.default, {
-      num: orderedKeys.length - index,
+      num,
       slideIndex,
       slide,
       validateButton,
@@ -119,23 +118,28 @@ const StackedSlides = props => {
     });
   });
 
-  if (animatedSlide) {
+  if (animatedFrontSlide) {
     stackedSlides.push( /*#__PURE__*/_react.default.createElement(_index.default, {
       num: 0,
-      slideIndex: animatedSlide,
-      slide: slides[animatedSlide],
+      slideIndex: animatedFrontSlide,
+      slide: slides[animatedFrontSlide],
       validateButton,
       correctionPopinProps,
       animatedStyle: [translateDown.animatedStyle],
-      key: animatedSlide
+      key: animatedFrontSlide
     }));
   }
 
   return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: [style.slides, hideSlides.animatedStyle]
-  }, restacked ? /*#__PURE__*/_react.default.createElement(FakeSlide, {
-    position: orderedKeys.length + 1,
-    validateButton: validateButton
+  }, animatedRestackedSlide ? /*#__PURE__*/_react.default.createElement(_index.default, {
+    num: orderedKeys.length + 1,
+    slideIndex: restacking,
+    slide: slides[restacking],
+    validateButton,
+    correctionPopinProps,
+    animatedStyle: [restackTranslation.animatedStyle],
+    key: restacking
   }) : null, stackedSlides);
 };
 

package/lib/organism/review-stacked-slides/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["TOTAL_SLIDES_STACK","style","StyleSheet","create","slides","flex","height","width","FakeSlide","position","validateButton","loading","StackedSlides","props","windowHeight","useWindowDimensions","endReview","correctionPopinProps","unstacked","setUnstacked","useState","restacked","setRestacked","hideSlides","useTranslateY","fromValue","toValue","duration","translateDown","easing","Easing","cubic","useEffect","start","restackingSlide","keys","find","k","animationType","unstackingSlide","remainingKeys","filter","orderedKeys","sort","k1","k2","animatedSlide","includes","toString","unstacking","restacking","stackedSlides","map","slideIndex","index","slide","num","length","push","animatedStyle"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {Animated, Easing, StyleSheet, useWindowDimensions} from 'react-native';\nimport keys from 'lodash/fp/keys';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Slide from '../review-slide/index.native';\nimport type {ReviewSlideProps} from '../review-slide/prop-types';\nimport type {ReviewStackProps} from './prop-types';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst style = StyleSheet.create({\n  slides: {\n    flex: 1,\n    height: '100%',\n    width: '100%'\n  }\n});\n\ntype FakeSlideProps = {position: number; validateButton: ReviewSlideProps['validateButton']};\nconst FakeSlide = ({position, validateButton}: FakeSlideProps) => (\n  <Slide\n    num={position}\n    slide={{loading: true, position}}\n    slideIndex={`${position}`}\n    validateButton={validateButton}\n  />\n);\n\n/*\n   - slides are ordered to be played from left to right: [0,1,2,3]\n   - slides are piled on the view, so we need to reverse the order:\n   -> it's like our eye is looking from the right [3,2,1,0] <-- oO\n*/\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {endReview, slides, validateButton, correctionPopinProps} = props;\n  const [unstacked, setUnstacked] = useState<string[]>([]);\n  const [restacked, setRestacked] = useState<string | null>();\n\n  const hideSlides = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  const translateDown = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight - 100,\n    duration: 500,\n    easing: Easing.cubic\n  });\n\n  useEffect(() => {\n    if (endReview) {\n      hideSlides.start();\n    }\n  }, [endReview, hideSlides]);\n\n  const restackingSlide = keys(slides).find(k => slides[k].animationType === 'restack');\n  const unstackingSlide = keys(slides).find(k => slides[k].animationType === 'unstack');\n\n  const remainingKeys = keys(slides).filter(\n    k => slides[k].position >= 0 && !slides[k].animationType\n  );\n\n  const orderedKeys = remainingKeys.sort((k1, k2) =>\n    slides[k2].position > slides[k1].position ? 1 : -1\n  );\n\n  const animatedSlide = restackingSlide || unstackingSlide;\n\n  useEffect(() => {\n    if (restacked && orderedKeys.includes(restacked)) {\n      setRestacked(null);\n    }\n    // this effect is required only when the list orderedKeys changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [orderedKeys.toString()]);\n\n  useEffect(() => {\n    const unstacking = unstackingSlide && !unstacked.includes(unstackingSlide);\n\n    if (unstacking) {\n      translateDown.start(() => {\n        setUnstacked([...unstacked, unstackingSlide]);\n      });\n    }\n  }, [unstackingSlide, unstacked, setUnstacked, translateDown]);\n\n  useEffect(() => {\n    const restacking = restackingSlide && restacked !== restackingSlide;\n\n    if (restacking) {\n      translateDown.start(() => {\n        setRestacked(restackingSlide);\n      });\n    }\n  }, [restackingSlide, restacked, setRestacked, translateDown]);\n\n  const stackedSlides = orderedKeys.map((slideIndex, index) => {\n    const slide = slides[slideIndex];\n\n    return (\n      <Slide\n        {...{\n          num: orderedKeys.length - index,\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  if (animatedSlide) {\n    stackedSlides.push(\n      <Slide\n        {...{\n          num: 0,\n          slideIndex: animatedSlide,\n          slide: slides[animatedSlide],\n          validateButton,\n          correctionPopinProps\n        }}\n        animatedStyle={[translateDown.animatedStyle]}\n        key={animatedSlide}\n      />\n    );\n  }\n\n  return (\n    <Animated.View style={[style.slides, hideSlides.animatedStyle]}>\n      {restacked ? (\n        <FakeSlide position={orderedKeys.length + 1} validateButton={validateButton} />\n      ) : null}\n      {stackedSlides}\n    </Animated.View>\n  );\n};\n\nexport default StackedSlides;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["style","StyleSheet","create","slides","flex","height","width","StackedSlides","props","windowHeight","useWindowDimensions","endReview","validateButton","correctionPopinProps","unstacked","setUnstacked","useState","restacking","setRestacking","restackingDone","setRestackingDone","hideSlides","useTranslateY","fromValue","toValue","duration","translateDown","easing","Easing","cubic","restackTranslation","out","useEffect","start","restackingSlide","keys","find","k","animationType","unstackingSlide","remainingKeys","filter","position","orderedKeys","sort","k1","k2","animatedFrontSlide","undefined","animatedRestackedSlide","includes","toString","unstacking","startRestacking","stackedSlides","map","slideIndex","index","slide","num","length","push","animatedStyle"],"sources":["../../../src/organism/review-stacked-slides/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {Animated, Easing, StyleSheet, useWindowDimensions} from 'react-native';\nimport keys from 'lodash/fp/keys';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Slide from '../review-slide/index.native';\nimport type {ReviewStackProps} from './prop-types';\n\nconst style = StyleSheet.create({\n  slides: {\n    flex: 1,\n    height: '100%',\n    width: '100%'\n  }\n});\n\n/*\n   - slides are ordered to be played from left to right: [0,1,2,3]\n   - slides are piled on the view, so we need to reverse the order:\n   -> it's like our eye is looking from the right [3,2,1,0] <-- oO\n*/\nconst StackedSlides = (props: ReviewStackProps) => {\n  const {height: windowHeight} = useWindowDimensions();\n  const {endReview, slides, validateButton, correctionPopinProps} = props;\n  const [unstacked, setUnstacked] = useState<string[]>([]);\n  const [restacking, setRestacking] = useState<string | null>(null);\n  const [restackingDone, setRestackingDone] = useState<boolean>(false);\n\n  const hideSlides = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight,\n    duration: 800\n  });\n\n  const translateDown = useTranslateY({\n    fromValue: 0,\n    toValue: windowHeight - 100,\n    duration: 500,\n    easing: Easing.cubic\n  });\n\n  const restackTranslation = useTranslateY({\n    toValue: 0,\n    fromValue: -windowHeight,\n    duration: 1200,\n    easing: Easing.out(Easing.cubic)\n  });\n\n  useEffect(() => {\n    if (endReview) {\n      hideSlides.start();\n    }\n  }, [endReview, hideSlides]);\n\n  const restackingSlide = keys(slides).find(k => slides[k].animationType === 'restack');\n  const unstackingSlide = keys(slides).find(k => slides[k].animationType === 'unstack');\n\n  const remainingKeys = keys(slides).filter(\n    k => slides[k].position >= 0 && !slides[k].animationType\n  );\n\n  const orderedKeys = remainingKeys.sort((k1, k2) =>\n    slides[k2].position > slides[k1].position ? 1 : -1\n  );\n\n  const animatedFrontSlide =\n    unstackingSlide || (restackingSlide && restacking === null ? restackingSlide : undefined);\n\n  const animatedRestackedSlide = restacking !== null;\n\n  useEffect(() => {\n    if (restacking !== null && orderedKeys.includes(restacking)) {\n      setRestacking(null);\n      setRestackingDone(false);\n    }\n    // this effect is required only when the list orderedKeys changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [orderedKeys.toString()]);\n\n  useEffect(() => {\n    const unstacking = unstackingSlide && !unstacked.includes(unstackingSlide);\n\n    if (unstacking) {\n      translateDown.start(() => {\n        setUnstacked([...unstacked, unstackingSlide]);\n      });\n    }\n  }, [unstackingSlide, unstacked, setUnstacked, translateDown]);\n\n  useEffect(() => {\n    const startRestacking = !restackingDone && restackingSlide && restacking !== restackingSlide;\n\n    if (startRestacking) {\n      translateDown.start(() => {\n        setRestacking(restackingSlide);\n        restackTranslation.start(() => {\n          setRestackingDone(true);\n        });\n      });\n    }\n    // this effect is required only to trigger the restack animation when a new restackingSlide is set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [restackingSlide, restacking]);\n\n  const stackedSlides = orderedKeys.map((slideIndex, index) => {\n    const slide = slides[slideIndex];\n    const num = orderedKeys.length - index;\n\n    return (\n      <Slide\n        {...{\n          num,\n          slideIndex,\n          slide,\n          validateButton,\n          correctionPopinProps\n        }}\n        key={slideIndex}\n      />\n    );\n  });\n\n  if (animatedFrontSlide) {\n    stackedSlides.push(\n      <Slide\n        {...{\n          num: 0,\n          slideIndex: animatedFrontSlide,\n          slide: slides[animatedFrontSlide],\n          validateButton,\n          correctionPopinProps\n        }}\n        animatedStyle={[translateDown.animatedStyle]}\n        key={animatedFrontSlide}\n      />\n    );\n  }\n\n  return (\n    <Animated.View style={[style.slides, hideSlides.animatedStyle]}>\n      {animatedRestackedSlide ? (\n        <Slide\n          {...{\n            num: orderedKeys.length + 1,\n            slideIndex: restacking,\n            slide: slides[restacking],\n            validateButton,\n            correctionPopinProps\n          }}\n          animatedStyle={[restackTranslation.animatedStyle]}\n          key={restacking}\n        />\n      ) : null}\n      {stackedSlides}\n    </Animated.View>\n  );\n};\n\nexport default StackedSlides;\n"],"mappings":"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"}

package/lib/template/activity/stars-summary.css

@@ -21,6 +21,8 @@
     display: flex;
     flex-direction: row;
     overflow: hidden;
+    margin: auto;
+    padding-left: 0;
 }
 
 .myStars {

package/lib/template/activity/stars-summary.js

@@ -40,7 +40,7 @@ const EngineTab = ({
     type
   } = engine;
   const state = engineIndex < firstItem ? 'hidden' : 'active';
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("li", {
     className: _starsSummary.default[state],
     key: type,
     "data-name": `${type}_total_${state}`
@@ -154,7 +154,7 @@ class StarsSummary extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement("div", {
       "data-name": "myStars-wrapper",
       className: _starsSummary.default.myStarsWrapper
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/_react.default.createElement("ul", {
       className: _starsSummary.default.allStars,
       "data-name": "engineList"
     }, /*#__PURE__*/_react.default.createElement(EngineTabs, {

package/lib/template/activity/stars-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"stars-summary.js","names":["EngineTab","engine","engineIndex","firstItem","type","state","style","hidden","active","propTypes","PropTypes","shape","EngineStars","number","EngineTabs","engines","useMemo","convert","cap","index","arrayOf","StarsSummary","React","Component","constructor","props","totalItems","length","handleOnLeft","bind","handleOnRight","scrollTo","page","setState","render","total","skin","context","dark","primary","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","contextTypes","Provider","childContextTypes","string","isRequired"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationArrowLeft as ArrowLeft,\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItem}) => {\n  const {type} = engine;\n  const state = engineIndex < firstItem ? 'hidden' : 'active';\n  return (\n    <div className={style[state]} key={type} data-name={`${type}_total_${state}`}>\n      <EngineStars {...engine} className={engineIndex < firstItem ? style.hidden : style.active} />\n    </div>\n  );\n};\nEngineTab.propTypes = {\n  engine: PropTypes.shape(EngineStars.propTypes),\n  engineIndex: PropTypes.number,\n  firstItem: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItem}) => {\n  return useMemo(\n    () =>\n      map.convert({cap: false})(\n        (engine, index) => (\n          <EngineTab\n            engine={engine}\n            key={`engineTab_${index}`}\n            firstItem={firstItem}\n            engineIndex={index}\n          />\n        ),\n        engines\n      ),\n    [engines, firstItem]\n  );\n};\n\nEngineTabs.propTypes = {\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n  firstItem: PropTypes.number\n};\n\nclass StarsSummary extends React.Component {\n  static propTypes = {\n    total: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      stars: PropTypes.number.isRequired\n    }).isRequired,\n    engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes))\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n\n    const {engines = []} = props;\n    this.state = {\n      firstItem: 0,\n      totalItems: engines.length\n    };\n\n    this.handleOnLeft = this.handleOnLeft.bind(this);\n    this.handleOnRight = this.handleOnRight.bind(this);\n    this.scrollTo = this.scrollTo.bind(this);\n  }\n\n  handleOnLeft() {\n    const {firstItem} = this.state;\n    this.scrollTo(firstItem - 1);\n  }\n\n  handleOnRight() {\n    const {firstItem} = this.state;\n    this.scrollTo(firstItem + 1);\n  }\n\n  scrollTo(page) {\n    this.setState({\n      firstItem: page\n    });\n  }\n\n  render() {\n    const {total, engines = []} = this.props;\n    const {skin} = this.context;\n    const {firstItem, totalItems} = this.state;\n    const dark = getOr('#90A4AE', 'common.dark', skin);\n    const primary = get('common.primary', skin);\n\n    if (isEmpty(engines)) {\n      return null;\n    }\n    const leftArrowView =\n      totalItems > 6 && firstItem > 0 ? (\n        <div className={style.circle} onClick={this.handleOnLeft} data-name=\"left-arrow\">\n          <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n        </div>\n      ) : null;\n\n    const rightArrowView =\n      totalItems > 6 && firstItem < totalItems - 6 ? (\n        <div className={style.circle} onClick={this.handleOnRight} data-name=\"right-arrow\">\n          <ArrowRight color={dark} className={style.right} width={10} height={10} />\n        </div>\n      ) : null;\n\n    return (\n      <div data-name=\"myStars\" className={style.myStars}>\n        <div data-name=\"myStars-wrapper\" className={style.myStarsWrapper}>\n          <div className={style.allStars} data-name=\"engineList\">\n            <EngineTabs engines={engines} firstItem={firstItem} />\n          </div>\n          <div\n            className={style.footerSummaryStars}\n            style={{\n              backgroundColor: primary\n            }}\n          >\n            <div className={style.totalStars}>\n              <span>{total.label}</span>\n              <p data-name=\"star-counter\">{total.stars}</p>\n              <div className={style.iconBubble}>\n                <StarIcon className={style.iconHeader} color={primary} />\n              </div>\n            </div>\n            <div className={style.navigationLeft}>{leftArrowView}</div>\n            <div className={style.navigationRight}>{rightArrowView}</div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default StarsSummary;\n"],"mappings":"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"}
+{"version":3,"file":"stars-summary.js","names":["EngineTab","engine","engineIndex","firstItem","type","state","style","hidden","active","propTypes","PropTypes","shape","EngineStars","number","EngineTabs","engines","useMemo","convert","cap","index","arrayOf","StarsSummary","React","Component","constructor","props","totalItems","length","handleOnLeft","bind","handleOnRight","scrollTo","page","setState","render","total","skin","context","dark","primary","leftArrowView","circle","left","rightArrowView","right","myStars","myStarsWrapper","allStars","footerSummaryStars","backgroundColor","totalStars","label","stars","iconBubble","iconHeader","navigationLeft","navigationRight","contextTypes","Provider","childContextTypes","string","isRequired"],"sources":["../../../src/template/activity/stars-summary.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map} from 'lodash/fp';\nimport {\n  NovaCompositionNavigationArrowLeft as ArrowLeft,\n  NovaCompositionNavigationArrowRight as ArrowRight,\n  NovaCompositionCoorpacademyStar as StarIcon\n} from '@coorpacademy/nova-icons';\nimport Provider from '../../atom/provider';\nimport EngineStars from './engine-stars';\nimport style from './stars-summary.css';\n\nconst EngineTab = ({engine, engineIndex, firstItem}) => {\n  const {type} = engine;\n  const state = engineIndex < firstItem ? 'hidden' : 'active';\n  return (\n    <li className={style[state]} key={type} data-name={`${type}_total_${state}`}>\n      <EngineStars {...engine} className={engineIndex < firstItem ? style.hidden : style.active} />\n    </li>\n  );\n};\nEngineTab.propTypes = {\n  engine: PropTypes.shape(EngineStars.propTypes),\n  engineIndex: PropTypes.number,\n  firstItem: PropTypes.number\n};\n\nconst EngineTabs = ({engines, firstItem}) => {\n  return useMemo(\n    () =>\n      map.convert({cap: false})(\n        (engine, index) => (\n          <EngineTab\n            engine={engine}\n            key={`engineTab_${index}`}\n            firstItem={firstItem}\n            engineIndex={index}\n          />\n        ),\n        engines\n      ),\n    [engines, firstItem]\n  );\n};\n\nEngineTabs.propTypes = {\n  engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n  firstItem: PropTypes.number\n};\n\nclass StarsSummary extends React.Component {\n  static propTypes = {\n    total: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      stars: PropTypes.number.isRequired\n    }).isRequired,\n    engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes))\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props) {\n    super(props);\n\n    const {engines = []} = props;\n    this.state = {\n      firstItem: 0,\n      totalItems: engines.length\n    };\n\n    this.handleOnLeft = this.handleOnLeft.bind(this);\n    this.handleOnRight = this.handleOnRight.bind(this);\n    this.scrollTo = this.scrollTo.bind(this);\n  }\n\n  handleOnLeft() {\n    const {firstItem} = this.state;\n    this.scrollTo(firstItem - 1);\n  }\n\n  handleOnRight() {\n    const {firstItem} = this.state;\n    this.scrollTo(firstItem + 1);\n  }\n\n  scrollTo(page) {\n    this.setState({\n      firstItem: page\n    });\n  }\n\n  render() {\n    const {total, engines = []} = this.props;\n    const {skin} = this.context;\n    const {firstItem, totalItems} = this.state;\n    const dark = getOr('#90A4AE', 'common.dark', skin);\n    const primary = get('common.primary', skin);\n\n    if (isEmpty(engines)) {\n      return null;\n    }\n    const leftArrowView =\n      totalItems > 6 && firstItem > 0 ? (\n        <div className={style.circle} onClick={this.handleOnLeft} data-name=\"left-arrow\">\n          <ArrowLeft color={dark} className={style.left} width={10} height={10} />\n        </div>\n      ) : null;\n\n    const rightArrowView =\n      totalItems > 6 && firstItem < totalItems - 6 ? (\n        <div className={style.circle} onClick={this.handleOnRight} data-name=\"right-arrow\">\n          <ArrowRight color={dark} className={style.right} width={10} height={10} />\n        </div>\n      ) : null;\n\n    return (\n      <div data-name=\"myStars\" className={style.myStars}>\n        <div data-name=\"myStars-wrapper\" className={style.myStarsWrapper}>\n          <ul className={style.allStars} data-name=\"engineList\">\n            <EngineTabs engines={engines} firstItem={firstItem} />\n          </ul>\n          <div\n            className={style.footerSummaryStars}\n            style={{\n              backgroundColor: primary\n            }}\n          >\n            <div className={style.totalStars}>\n              <span>{total.label}</span>\n              <p data-name=\"star-counter\">{total.stars}</p>\n              <div className={style.iconBubble}>\n                <StarIcon className={style.iconHeader} color={primary} />\n              </div>\n            </div>\n            <div className={style.navigationLeft}>{leftArrowView}</div>\n            <div className={style.navigationRight}>{rightArrowView}</div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default StarsSummary;\n"],"mappings":"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"}

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

@@ -12,22 +12,18 @@ declare const AppReview: {
                 skills: import("prop-types").Requireable<import("prop-types").InferProps<{
                     text: import("prop-types").Requireable<string>;
                     tooltipText: import("prop-types").Requireable<string>;
-                    moreDetailsAreaLabel: import("prop-types").Requireable<string>;
                 }>>;
                 questions: import("prop-types").Requireable<import("prop-types").InferProps<{
                     text: import("prop-types").Requireable<string>;
                     tooltipText: import("prop-types").Requireable<string>;
-                    moreDetailsAreaLabel: import("prop-types").Requireable<string>;
                 }>>;
                 lifes: import("prop-types").Requireable<import("prop-types").InferProps<{
                     text: import("prop-types").Requireable<string>;
                     tooltipText: import("prop-types").Requireable<string>;
-                    moreDetailsAreaLabel: import("prop-types").Requireable<string>;
                 }>>;
                 allright: import("prop-types").Requireable<import("prop-types").InferProps<{
                     text: import("prop-types").Requireable<string>;
                     tooltipText: import("prop-types").Requireable<string>;
-                    moreDetailsAreaLabel: import("prop-types").Requireable<string>;
                 }>>;
             }>>;
         }>>;

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

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

package/lib/template/app-review/prop-types.d.ts

@@ -20,22 +20,18 @@ declare const propTypes: {
             skills: PropTypes.Requireable<PropTypes.InferProps<{
                 text: PropTypes.Requireable<string>;
                 tooltipText: PropTypes.Requireable<string>;
-                moreDetailsAreaLabel: PropTypes.Requireable<string>;
             }>>;
             questions: PropTypes.Requireable<PropTypes.InferProps<{
                 text: PropTypes.Requireable<string>;
                 tooltipText: PropTypes.Requireable<string>;
-                moreDetailsAreaLabel: PropTypes.Requireable<string>;
             }>>;
             lifes: PropTypes.Requireable<PropTypes.InferProps<{
                 text: PropTypes.Requireable<string>;
                 tooltipText: PropTypes.Requireable<string>;
-                moreDetailsAreaLabel: PropTypes.Requireable<string>;
             }>>;
             allright: PropTypes.Requireable<PropTypes.InferProps<{
                 text: PropTypes.Requireable<string>;
                 tooltipText: PropTypes.Requireable<string>;
-                moreDetailsAreaLabel: PropTypes.Requireable<string>;
             }>>;
         }>>;
     }>>;

package/lib/template/app-review/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/template/app-review/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAEtD,oBAAY,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,oBAAY,cAAc,GAAG;IAC3B,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/template/app-review/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAEtD,oBAAY,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErE,oBAAY,cAAc,GAAG;IAC3B,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/template/common/search-page/index.d.ts

@@ -62,6 +62,8 @@ declare namespace SearchPage {
             onSearch: PropTypes.Requireable<(...args: any[]) => any>;
             onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;
             onToggleSorts: PropTypes.Requireable<(...args: any[]) => any>;
+            moreSortAriaLabel: PropTypes.Requireable<string>;
+            moreFilterAriaLabel: PropTypes.Requireable<string>;
         }>>;
         const cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
@@ -96,6 +98,8 @@ declare namespace SearchPage {
                 showMoreOnRightAriaLabel: PropTypes.Requireable<string>;
             }>>;
         }>>;
+        const moreSortAriaLabel: PropTypes.Requireable<string>;
+        const moreFilterAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/template/common/search-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAUA,mEAmCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAUA,mEAgDC"}

package/lib/template/common/search-page/index.js

@@ -34,7 +34,9 @@ const SearchPage = (props, context) => {
     cards,
     noresultsfound,
     clearFilters,
-    recommendations
+    recommendations,
+    moreSortAriaLabel,
+    moreFilterAriaLabel
   } = props;
   const {
     skin
@@ -53,7 +55,10 @@ const SearchPage = (props, context) => {
     },
     type: "link"
   }))), recommendationsView) : /*#__PURE__*/_react.default.createElement(_cardsGrid.default, cards);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_filters.default, searchFilters), /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_filters.default, _extends({}, searchFilters, {
+    moreSortAriaLabel: moreSortAriaLabel,
+    moreFilterAriaLabel: moreFilterAriaLabel
+  })), /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "searchResult",
     className: _style.default.cardsWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -70,7 +75,9 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   searchFilters: _propTypes.default.shape(_filters.default.propTypes),
   cards: _propTypes.default.shape(_cardsGrid.default.propTypes),
   clearFilters: _propTypes.default.shape(_button.default.propTypes),
-  recommendations: _propTypes.default.shape(_cardsList.default.propTypes)
+  recommendations: _propTypes.default.shape(_cardsList.default.propTypes),
+  moreSortAriaLabel: _propTypes.default.string,
+  moreFilterAriaLabel: _propTypes.default.string
 } : {};
 var _default = SearchPage;
 exports.default = _default;

package/lib/template/common/search-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SearchPage","props","context","title","searchFilters","cards","noresultsfound","clearFilters","recommendations","skin","defaultColor","recommendationsView","cardsView","list","style","noresults","noresultstxt","clear","background","cardsWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","Filters","CardsGrid","Button","CardsList"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {title, searchFilters, cards, noresultsfound, clearFilters, recommendations} = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  const cardsView = isEmpty(cards.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  return (\n    <div>\n      <Filters {...searchFilters} />\n      <div data-name=\"searchResult\" className={style.cardsWrapper}>\n        <div className={style.title}>{title}</div>\n        {cardsView}\n      </div>\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes)\n};\n\nexport default SearchPage;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IAACC,KAAD;IAAQC,aAAR;IAAuBC,KAAvB;IAA8BC,cAA9B;IAA8CC,YAA9C;IAA4DC;EAA5D,IAA+EP,KAArF;EAEA,MAAM;IAACQ;EAAD,IAASP,OAAf;EACA,MAAMQ,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;EAEA,MAAME,mBAAmB,GAAG,uBAAQH,eAAR,IAA2B,IAA3B,gBAAkC,6BAAC,kBAAD,EAAeA,eAAf,CAA9D;EAEA,MAAMI,SAAS,GAAG,uBAAQP,KAAK,CAACQ,IAAd,iBAChB,uDACE;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAME;EAAtB,GAAqCV,cAArC,CADF,eAEE,6BAAC,eAAD,eACMC,YADN;IAEE,aAAU,iBAFZ;IAGE,SAAS,EAAEO,cAAA,CAAMG,KAHnB;IAIE,KAAK,EAAE;MAACC,UAAU,EAAER;IAAb,CAJT;IAKE,IAAI,EAAC;EALP,GAFF,CADF,EAWGC,mBAXH,CADgB,gBAehB,6BAAC,kBAAD,EAAeN,KAAf,CAfF;EAkBA,oBACE,uDACE,6BAAC,gBAAD,EAAaD,aAAb,CADF,eAEE;IAAK,aAAU,cAAf;IAA8B,SAAS,EAAEU,cAAA,CAAMK;EAA/C,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMX;EAAtB,GAA8BA,KAA9B,CADF,EAEGS,SAFH,CAFF,CADF;AASD,CAnCD;;AAqCAZ,UAAU,CAACoB,YAAX,GAA0B;EACxBX,IAAI,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AADT,CAA1B;AAIAT,UAAU,CAACuB,SAAX,2CAAuB;EACrBjB,cAAc,EAAEkB,kBAAA,CAAUC,MADL;EAErBtB,KAAK,EAAEqB,kBAAA,CAAUC,MAFI;EAGrBrB,aAAa,EAAEoB,kBAAA,CAAUE,KAAV,CAAgBC,gBAAA,CAAQJ,SAAxB,CAHM;EAIrBlB,KAAK,EAAEmB,kBAAA,CAAUE,KAAV,CAAgBE,kBAAA,CAAUL,SAA1B,CAJc;EAKrBhB,YAAY,EAAEiB,kBAAA,CAAUE,KAAV,CAAgBG,eAAA,CAAON,SAAvB,CALO;EAMrBf,eAAe,EAAEgB,kBAAA,CAAUE,KAAV,CAAgBI,kBAAA,CAAUP,SAA1B;AANI,CAAvB;eASevB,U"}
+{"version":3,"file":"index.js","names":["SearchPage","props","context","title","searchFilters","cards","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","skin","defaultColor","recommendationsView","cardsView","list","style","noresults","noresultstxt","clear","background","cardsWrapper","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","shape","Filters","CardsGrid","Button","CardsList"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {\n    title,\n    searchFilters,\n    cards,\n    noresultsfound,\n    clearFilters,\n    recommendations,\n    moreSortAriaLabel,\n    moreFilterAriaLabel\n  } = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  const cardsView = isEmpty(cards.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  return (\n    <div>\n      <Filters\n        {...searchFilters}\n        moreSortAriaLabel={moreSortAriaLabel}\n        moreFilterAriaLabel={moreFilterAriaLabel}\n      />\n      <div data-name=\"searchResult\" className={style.cardsWrapper}>\n        <div className={style.title}>{title}</div>\n        {cardsView}\n      </div>\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes),\n  moreSortAriaLabel: PropTypes.string,\n  moreFilterAriaLabel: PropTypes.string\n};\n\nexport default SearchPage;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJC,KADI;IAEJC,aAFI;IAGJC,KAHI;IAIJC,cAJI;IAKJC,YALI;IAMJC,eANI;IAOJC,iBAPI;IAQJC;EARI,IASFT,KATJ;EAWA,MAAM;IAACU;EAAD,IAAST,OAAf;EACA,MAAMU,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;EAEA,MAAME,mBAAmB,GAAG,uBAAQL,eAAR,IAA2B,IAA3B,gBAAkC,6BAAC,kBAAD,EAAeA,eAAf,CAA9D;EAEA,MAAMM,SAAS,GAAG,uBAAQT,KAAK,CAACU,IAAd,iBAChB,uDACE;IAAK,SAAS,EAAEC,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAME;EAAtB,GAAqCZ,cAArC,CADF,eAEE,6BAAC,eAAD,eACMC,YADN;IAEE,aAAU,iBAFZ;IAGE,SAAS,EAAES,cAAA,CAAMG,KAHnB;IAIE,KAAK,EAAE;MAACC,UAAU,EAAER;IAAb,CAJT;IAKE,IAAI,EAAC;EALP,GAFF,CADF,EAWGC,mBAXH,CADgB,gBAehB,6BAAC,kBAAD,EAAeR,KAAf,CAfF;EAkBA,oBACE,uDACE,6BAAC,gBAAD,eACMD,aADN;IAEE,iBAAiB,EAAEK,iBAFrB;IAGE,mBAAmB,EAAEC;EAHvB,GADF,eAME;IAAK,aAAU,cAAf;IAA8B,SAAS,EAAEM,cAAA,CAAMK;EAA/C,gBACE;IAAK,SAAS,EAAEL,cAAA,CAAMb;EAAtB,GAA8BA,KAA9B,CADF,EAEGW,SAFH,CANF,CADF;AAaD,CAhDD;;AAkDAd,UAAU,CAACsB,YAAX,GAA0B;EACxBX,IAAI,EAAEY,iBAAA,CAASC,iBAAT,CAA2Bb;AADT,CAA1B;AAIAX,UAAU,CAACyB,SAAX,2CAAuB;EACrBnB,cAAc,EAAEoB,kBAAA,CAAUC,MADL;EAErBxB,KAAK,EAAEuB,kBAAA,CAAUC,MAFI;EAGrBvB,aAAa,EAAEsB,kBAAA,CAAUE,KAAV,CAAgBC,gBAAA,CAAQJ,SAAxB,CAHM;EAIrBpB,KAAK,EAAEqB,kBAAA,CAAUE,KAAV,CAAgBE,kBAAA,CAAUL,SAA1B,CAJc;EAKrBlB,YAAY,EAAEmB,kBAAA,CAAUE,KAAV,CAAgBG,eAAA,CAAON,SAAvB,CALO;EAMrBjB,eAAe,EAAEkB,kBAAA,CAAUE,KAAV,CAAgBI,kBAAA,CAAUP,SAA1B,CANI;EAOrBhB,iBAAiB,EAAEiB,kBAAA,CAAUC,MAPR;EAQrBjB,mBAAmB,EAAEgB,kBAAA,CAAUC;AARV,CAAvB;eAWe3B,U"}