@coorpacademy/components 10.22.9 → 10.22.12

package/README.md

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

package/es/atom/choice/index.native.js

@@ -22,7 +22,6 @@ const createStyleSheet = theme => StyleSheet.create({
     minHeight: 80,
     backgroundColor: theme.colors.white,
     borderRadius: theme.radius.regular,
-    overflow: 'hidden',
     flexDirection: 'row',
     alignItems: 'stretch'
   },
@@ -52,7 +51,10 @@ const createStyleSheet = theme => StyleSheet.create({
   },
   imageContainer: {
     height: '100%',
-    width: '25%'
+    width: '25%',
+    overflow: 'hidden',
+    borderTopLeftRadius: theme.radius.regular,
+    borderBottomLeftRadius: theme.radius.regular
   },
   image: {
     flex: 1
@@ -89,7 +91,8 @@ const Choice = ({
   const selectedStyle = brandTheme && {
     backgroundColor: brandTheme.colors.primary,
     borderColor: brandTheme.colors.primary,
-    borderRadius: theme.radius.common
+    borderTopRightRadius: theme.radius.regular,
+    borderBottomRightRadius: theme.radius.regular
   };
   const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';
   const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();

package/es/atom/choice/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["React","useEffect","useState","View","StyleSheet","Html","ImageBackground","getCleanUri","Touchable","useTemplateContext","createStyleSheet","theme","create","boxShadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","backgroundColor","container","minHeight","colors","white","borderRadius","radius","regular","overflow","flexDirection","alignItems","textContainer","paddingHorizontal","paddingVertical","justifyContent","flex","squeezedTextContainer","padding","spacing","small","paddingLeft","undefined","paddingRight","text","fontWeight","bold","color","black","textSelected","unselectedImageContainer","borderRightColor","border","imageContainer","image","Choice","children","isSelected","squeezed","isDisabled","onPress","media","testID","prefixTestID","style","questionType","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","selectedStyle","primary","borderColor","common","selectedSuffix","mediaType","type","toLowerCase","url","src","length","source","uri","mediaSuffix","htmlStyle","push","fontSize","medium"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,QAA1B,QAAyC,OAAzC;AACA,SAAQC,IAAR,EAAcC,UAAd,QAA0C,cAA1C;AAGA,OAAOC,IAAP,MAAiB,sBAAjB;AACA,OAAOC,eAAP,MAA4B,kCAA5B;AACA,OAAOC,WAAP,MAAwB,0BAAxB;AACA,OAAOC,SAAP,MAAsB,kCAAtB;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;;AA2BA,MAAMC,gBAAgB,GAAIC,KAAD,IACvBP,UAAU,CAACQ,MAAX,CAAkB;AAChBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAE,MADJ;AAETC,IAAAA,YAAY,EAAE;AAACC,MAAAA,KAAK,EAAE,CAAR;AAAWC,MAAAA,MAAM,EAAE;AAAnB,KAFL;AAGTC,IAAAA,aAAa,EAAE,IAHN;AAITC,IAAAA,YAAY,EAAE,EAJL;AAKTC,IAAAA,SAAS,EAAE,CALF;AAMTC,IAAAA,eAAe,EAAE;AANR,GADK;AAShBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,SAAS,EAAE,EADF;AAETF,IAAAA,eAAe,EAAEV,KAAK,CAACa,MAAN,CAAaC,KAFrB;AAGTC,IAAAA,YAAY,EAAEf,KAAK,CAACgB,MAAN,CAAaC,OAHlB;AAITC,IAAAA,QAAQ,EAAE,QAJD;AAKTC,IAAAA,aAAa,EAAE,KALN;AAMTC,IAAAA,UAAU,EAAE;AANH,GATK;AAiBhBC,EAAAA,aAAa,EAAE;AACbC,IAAAA,iBAAiB,EAAE,EADN;AAEbC,IAAAA,eAAe,EAAE,EAFJ;AAGbC,IAAAA,cAAc,EAAE,QAHH;AAIbJ,IAAAA,UAAU,EAAE,QAJC;AAKbK,IAAAA,IAAI,EAAE;AALO,GAjBC;AAwBhBC,EAAAA,qBAAqB,EAAE;AACrBC,IAAAA,OAAO,EAAE3B,KAAK,CAAC4B,OAAN,CAAcC,KADF;AAErBC,IAAAA,WAAW,EAAEC,SAFQ;AAGrBR,IAAAA,eAAe,EAAEQ,SAHI;AAIrBC,IAAAA,YAAY,EAAED,SAJO;AAKrBN,IAAAA,IAAI,EAAE;AALe,GAxBP;AA+BhBQ,EAAAA,IAAI,EAAE;AACJC,IAAAA,UAAU,EAAElC,KAAK,CAACkC,UAAN,CAAiBC,IADzB;AAEJC,IAAAA,KAAK,EAAEpC,KAAK,CAACa,MAAN,CAAawB;AAFhB,GA/BU;AAmChBC,EAAAA,YAAY,EAAE;AACZF,IAAAA,KAAK,EAAEpC,KAAK,CAACa,MAAN,CAAaC;AADR,GAnCE;AAsChByB,EAAAA,wBAAwB,EAAE;AACxBC,IAAAA,gBAAgB,EAAExC,KAAK,CAACa,MAAN,CAAa4B;AADP,GAtCV;AAyChBC,EAAAA,cAAc,EAAE;AACdpC,IAAAA,MAAM,EAAE,MADM;AAEdD,IAAAA,KAAK,EAAE;AAFO,GAzCA;AA6ChBsC,EAAAA,KAAK,EAAE;AACLlB,IAAAA,IAAI,EAAE;AADD;AA7CS,CAAlB,CADF;;AAmDA,MAAMmB,MAAM,GAAG,CAAC;AACdC,EAAAA,QADc;AAEdC,EAAAA,UAAU,GAAG,KAFC;AAGdC,EAAAA,QAAQ,GAAG,KAHG;AAIdC,EAAAA,UAJc;AAKdC,EAAAA,OALc;AAMdC,EAAAA,KANc;AAOdC,EAAAA,MAAM,EAAEC,YAPM;AAQdC,EAAAA,KARc;AASdC,EAAAA;AATc,CAAD,KAUF;AACX,QAAMC,eAAe,GAAGzD,kBAAkB,EAA1C;AACA,QAAM;AAACE,IAAAA,KAAD;AAAQwD,IAAAA;AAAR,MAAsBD,eAA5B;AAEA,QAAM,CAACE,UAAD,EAAaC,aAAb,IAA8BnE,QAAQ,CAAwB,IAAxB,CAA5C;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMqE,WAAW,GAAG5D,gBAAgB,CAACC,KAAD,CAApC;;AACA0D,IAAAA,aAAa,CAACC,WAAD,CAAb;AACD,GAHQ,EAGN,CAAC3D,KAAD,CAHM,CAAT;;AAKA,MAAI,CAACyD,UAAL,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,QAAMG,aAAa,GAAGJ,UAAU,IAAI;AAClC9C,IAAAA,eAAe,EAAE8C,UAAU,CAAC3C,MAAX,CAAkBgD,OADD;AAElCC,IAAAA,WAAW,EAAEN,UAAU,CAAC3C,MAAX,CAAkBgD,OAFG;AAGlC9C,IAAAA,YAAY,EAAEf,KAAK,CAACgB,MAAN,CAAa+C;AAHO,GAApC;AAMA,QAAMC,cAAc,GAAGZ,YAAY,IAAIN,UAAhB,GAA6B,WAA7B,GAA2C,EAAlE;AACA,QAAMmB,SAAS,GAAGf,KAAK,IAAIA,KAAK,CAACgB,IAAf,IAAuBhB,KAAK,CAACgB,IAAN,KAAe,KAAtC,IAA+ChB,KAAK,CAACgB,IAAN,CAAWC,WAAX,EAAjE;AACA,QAAMC,GAAG,GACPlB,KAAK,IACLA,KAAK,CAACgB,IAAN,KAAe,KADf,IAEAhB,KAAK,CAACmB,GAFN,IAGAnB,KAAK,CAACmB,GAAN,CAAUC,MAAV,GAAmB,CAHnB,IAIA1E,WAAW,CAACsD,KAAK,CAACmB,GAAN,CAAU,CAAV,EAAaD,GAAd,CALb;AAOA,QAAMG,MAAM,GAAG;AAACC,IAAAA,GAAG,EAAEJ,GAAG,GAAGxE,WAAW,CAACwE,GAAD,CAAd,GAAsBrC;AAA/B,GAAf;AACA,QAAM0C,WAAW,GAAGrB,YAAY,IAAIa,SAAhB,GAA6B,IAAGA,SAAU,EAA1C,GAA8C,EAAlE;AAEA,QAAMS,SAAsB,GAAG,CAACjB,UAAU,CAACxB,IAAZ,CAA/B;;AAEA,MAAIa,UAAJ,EAAgB;AACd4B,IAAAA,SAAS,CAACC,IAAV,CAAelB,UAAU,CAACnB,YAA1B;AACD;;AAED,sBACE,oBAAC,SAAD;AACE,IAAA,OAAO,EAAE,CAACU,UAAD,GAAcC,OAAd,GAAwBlB,SADnC;AAEE,IAAA,KAAK,EAAEsB,KAFT;AAGE,IAAA,WAAW,EAAC,iBAHd;AAIE,IAAA,eAAe,EAAE;AAACC,MAAAA;AAAD;AAJnB,kBAME,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CAACG,UAAU,CAACvD,SAAZ,EAAuBuD,UAAU,CAAC9C,SAAlC,CADT;AAEE,IAAA,MAAM,EAAEyC,YAAY,IAAK,GAAEA,YAAa,GAAEY,cAAe;AAF3D,KAIGI,GAAG,gBACF,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEX,UAAU,CAACf;AAAxB,kBACE,oBAAC,eAAD;AACE,IAAA,MAAM,EAAEU,YAAY,IAAK,GAAEA,YAAa,GAAEqB,WAAY,EADxD;AAEE,IAAA,MAAM,EAAEF,MAFV;AAGE,IAAA,KAAK,EAAEd,UAAU,CAACd;AAHpB,IADF,CADE,GAQA,IAZN,eAaE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLc,UAAU,CAACpC,aADN,EAEL0B,QAAQ,IAAIU,UAAU,CAAC/B,qBAFlB,EAGLoB,UAAU,IAAIc,aAHT;AADT,kBAOE,oBAAC,IAAD;AACE,IAAA,QAAQ,EAAEb,QAAQ,GAAG/C,KAAK,CAAC4E,QAAN,CAAeC,MAAlB,GAA2B7E,KAAK,CAAC4E,QAAN,CAAe3D,OAD9D;AAEE,IAAA,KAAK,EAAEyD;AAFT,KAIG7B,QAJH,CAPF,CAbF,CANF,CADF;AAqCD,CAtFD;;AAwFA,eAAeD,MAAf","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle} from 'react-native';\nimport type {Media, QuestionType} from '../../types/progression-engine';\n\nimport Html from '../html/index.native';\nimport ImageBackground from '../image-background/index.native';\nimport getCleanUri from '../../util/get-clean-uri';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\nexport type Props = {\n  isSelected?: boolean;\n  onPress: () => void;\n  children: string;\n  isDisabled?: boolean;\n  testID?: string;\n  media?: Media;\n  squeezed?: boolean;\n  style?: ViewStyle;\n  questionType: QuestionType;\n};\n\ntype StyleSheetType = {\n  boxShadow: any;\n  container: any;\n  text: any;\n  textSelected: any;\n  textContainer: any;\n  squeezedTextContainer: any;\n  unselectedImageContainer: any;\n  imageContainer: any;\n  image: any;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    boxShadow: {\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: 4},\n      shadowOpacity: 0.12,\n      shadowRadius: 16,\n      elevation: 8,\n      backgroundColor: '#0000'\n    },\n    container: {\n      minHeight: 80,\n      backgroundColor: theme.colors.white,\n      borderRadius: theme.radius.regular,\n      overflow: 'hidden',\n      flexDirection: 'row',\n      alignItems: 'stretch'\n    },\n    textContainer: {\n      paddingHorizontal: 24,\n      paddingVertical: 12,\n      justifyContent: 'center',\n      alignItems: 'center',\n      flex: 1\n    },\n    squeezedTextContainer: {\n      padding: theme.spacing.small,\n      paddingLeft: undefined,\n      paddingVertical: undefined,\n      paddingRight: undefined,\n      flex: 0\n    },\n    text: {\n      fontWeight: theme.fontWeight.bold,\n      color: theme.colors.black\n    },\n    textSelected: {\n      color: theme.colors.white\n    },\n    unselectedImageContainer: {\n      borderRightColor: theme.colors.border\n    },\n    imageContainer: {\n      height: '100%',\n      width: '25%'\n    },\n    image: {\n      flex: 1\n    }\n  });\n\nconst Choice = ({\n  children,\n  isSelected = false,\n  squeezed = false,\n  isDisabled,\n  onPress,\n  media,\n  testID: prefixTestID,\n  style,\n  questionType\n}: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedStyle = brandTheme && {\n    backgroundColor: brandTheme.colors.primary,\n    borderColor: brandTheme.colors.primary,\n    borderRadius: theme.radius.common\n  };\n\n  const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';\n  const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();\n  const url =\n    media &&\n    media.type === 'img' &&\n    media.src &&\n    media.src.length > 0 &&\n    getCleanUri(media.src[0].url);\n\n  const source = {uri: url ? getCleanUri(url) : undefined};\n  const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';\n\n  const htmlStyle: ViewStyle[] = [styleSheet.text];\n\n  if (isSelected) {\n    htmlStyle.push(styleSheet.textSelected);\n  }\n\n  return (\n    <Touchable\n      onPress={!isDisabled ? onPress : undefined}\n      style={style}\n      analyticsID=\"question-choice\"\n      analyticsParams={{questionType}}\n    >\n      <View\n        style={[styleSheet.boxShadow, styleSheet.container]}\n        testID={prefixTestID && `${prefixTestID}${selectedSuffix}`}\n      >\n        {url ? (\n          <View style={styleSheet.imageContainer}>\n            <ImageBackground\n              testID={prefixTestID && `${prefixTestID}${mediaSuffix}`}\n              source={source}\n              style={styleSheet.image}\n            />\n          </View>\n        ) : null}\n        <View\n          style={[\n            styleSheet.textContainer,\n            squeezed && styleSheet.squeezedTextContainer,\n            isSelected && selectedStyle\n          ]}\n        >\n          <Html\n            fontSize={squeezed ? theme.fontSize.medium : theme.fontSize.regular}\n            style={htmlStyle}\n          >\n            {children}\n          </Html>\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nexport default Choice;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["React","useEffect","useState","View","StyleSheet","Html","ImageBackground","getCleanUri","Touchable","useTemplateContext","createStyleSheet","theme","create","boxShadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","backgroundColor","container","minHeight","colors","white","borderRadius","radius","regular","flexDirection","alignItems","textContainer","paddingHorizontal","paddingVertical","justifyContent","flex","squeezedTextContainer","padding","spacing","small","paddingLeft","undefined","paddingRight","text","fontWeight","bold","color","black","textSelected","unselectedImageContainer","borderRightColor","border","imageContainer","overflow","borderTopLeftRadius","borderBottomLeftRadius","image","Choice","children","isSelected","squeezed","isDisabled","onPress","media","testID","prefixTestID","style","questionType","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","selectedStyle","primary","borderColor","borderTopRightRadius","borderBottomRightRadius","selectedSuffix","mediaType","type","toLowerCase","url","src","length","source","uri","mediaSuffix","htmlStyle","push","fontSize","medium"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle} from 'react-native';\nimport type {Media, QuestionType} from '../../types/progression-engine';\n\nimport Html from '../html/index.native';\nimport ImageBackground from '../image-background/index.native';\nimport getCleanUri from '../../util/get-clean-uri';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\nexport type Props = {\n  isSelected?: boolean;\n  onPress: () => void;\n  children: string;\n  isDisabled?: boolean;\n  testID?: string;\n  media?: Media;\n  squeezed?: boolean;\n  style?: ViewStyle;\n  questionType: QuestionType;\n};\n\ntype StyleSheetType = {\n  boxShadow: any;\n  container: any;\n  text: any;\n  textSelected: any;\n  textContainer: any;\n  squeezedTextContainer: any;\n  unselectedImageContainer: any;\n  imageContainer: any;\n  image: any;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    boxShadow: {\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: 4},\n      shadowOpacity: 0.12,\n      shadowRadius: 16,\n      elevation: 8,\n      backgroundColor: '#0000'\n    },\n    container: {\n      minHeight: 80,\n      backgroundColor: theme.colors.white,\n      borderRadius: theme.radius.regular,\n      flexDirection: 'row',\n      alignItems: 'stretch'\n    },\n    textContainer: {\n      paddingHorizontal: 24,\n      paddingVertical: 12,\n      justifyContent: 'center',\n      alignItems: 'center',\n      flex: 1\n    },\n    squeezedTextContainer: {\n      padding: theme.spacing.small,\n      paddingLeft: undefined,\n      paddingVertical: undefined,\n      paddingRight: undefined,\n      flex: 0\n    },\n    text: {\n      fontWeight: theme.fontWeight.bold,\n      color: theme.colors.black\n    },\n    textSelected: {\n      color: theme.colors.white\n    },\n    unselectedImageContainer: {\n      borderRightColor: theme.colors.border\n    },\n    imageContainer: {\n      height: '100%',\n      width: '25%',\n      overflow: 'hidden',\n      borderTopLeftRadius: theme.radius.regular,\n      borderBottomLeftRadius: theme.radius.regular\n    },\n    image: {\n      flex: 1\n    }\n  });\n\nconst Choice = ({\n  children,\n  isSelected = false,\n  squeezed = false,\n  isDisabled,\n  onPress,\n  media,\n  testID: prefixTestID,\n  style,\n  questionType\n}: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedStyle = brandTheme && {\n    backgroundColor: brandTheme.colors.primary,\n    borderColor: brandTheme.colors.primary,\n    borderTopRightRadius: theme.radius.regular,\n    borderBottomRightRadius: theme.radius.regular\n  };\n\n  const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';\n  const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();\n  const url =\n    media &&\n    media.type === 'img' &&\n    media.src &&\n    media.src.length > 0 &&\n    getCleanUri(media.src[0].url);\n\n  const source = {uri: url ? getCleanUri(url) : undefined};\n  const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';\n\n  const htmlStyle: ViewStyle[] = [styleSheet.text];\n\n  if (isSelected) {\n    htmlStyle.push(styleSheet.textSelected);\n  }\n\n  return (\n    <Touchable\n      onPress={!isDisabled ? onPress : undefined}\n      style={style}\n      analyticsID=\"question-choice\"\n      analyticsParams={{questionType}}\n    >\n      <View\n        style={[styleSheet.boxShadow, styleSheet.container]}\n        testID={prefixTestID && `${prefixTestID}${selectedSuffix}`}\n      >\n        {url ? (\n          <View style={styleSheet.imageContainer}>\n            <ImageBackground\n              testID={prefixTestID && `${prefixTestID}${mediaSuffix}`}\n              source={source}\n              style={styleSheet.image}\n            />\n          </View>\n        ) : null}\n        <View\n          style={[\n            styleSheet.textContainer,\n            squeezed && styleSheet.squeezedTextContainer,\n            isSelected && selectedStyle\n          ]}\n        >\n          <Html\n            fontSize={squeezed ? theme.fontSize.medium : theme.fontSize.regular}\n            style={htmlStyle}\n          >\n            {children}\n          </Html>\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nexport default Choice;\n"],"file":"index.native.js"}

package/es/molecule/questions/mobile/draggable/index.native.js

@@ -0,0 +1,144 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import QuestionChoice from '../../../../atom/choice/index.native';
+import { useTemplateContext } from '../../../../template/app-review/template-context';
+
+const createDropZoneStyle = theme => StyleSheet.create({
+  choice: {
+    margin: theme.spacing.micro
+  },
+  dropZone: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    borderStyle: 'dashed',
+    borderWidth: 2,
+    padding: theme.spacing.micro,
+    borderColor: theme.colors.gray.light,
+    backgroundColor: theme.colors.gray.extra,
+    borderRadius: theme.radius.common,
+    marginBottom: theme.spacing.tiny
+  },
+  emptyContent: {
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    height: 60
+  },
+  text: {
+    color: theme.colors.gray.medium
+  }
+});
+
+const DropZone = props => {
+  const templateContext = useTemplateContext();
+  const {
+    theme,
+    translations
+  } = templateContext;
+  const {
+    onPress
+  } = props;
+  const handlePress = useCallback(item => () => onPress(item), [onPress]);
+  const [styleSheet, setStylesheet] = useState(null);
+  useEffect(() => {
+    const _stylesheet = createDropZoneStyle(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const {
+    choices
+  } = props;
+  const mappedSortedChoices = choices.map(item => /*#__PURE__*/React.createElement(QuestionChoice, {
+    style: styleSheet.choice,
+    key: item._id,
+    squeezed: true,
+    isSelected: true,
+    testID: `choice-${item._id}`,
+    onPress: handlePress(item),
+    questionType: "qcmDrag"
+  }, item.label));
+  const hasNoSelectedChoices = mappedSortedChoices.length === 0;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]
+  }, hasNoSelectedChoices ? /*#__PURE__*/React.createElement(Text, {
+    style: styleSheet.text
+  }, translations.selectSomethingBelow) : null, !hasNoSelectedChoices && mappedSortedChoices);
+};
+
+const createStyleSheet = theme => StyleSheet.create({
+  container: {},
+  pickableChoices: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  choice: {
+    margin: theme.spacing.micro
+  }
+}); // this algo could be improve using a  single reduce fuction
+
+
+export const extractSelectedChoices = (availableChoices, userChoices) => {
+  const selectedChoices = userChoices.reduce((accumulator, currentValue) => {
+    const foundItem = availableChoices.find(availableChoice => availableChoice.label === currentValue);
+
+    if (foundItem) {
+      return [...accumulator, foundItem];
+    }
+
+    return accumulator;
+  }, []);
+  const notSelectedChoices = availableChoices.filter(availableChoice => !userChoices.includes(availableChoice.label));
+  return [selectedChoices, notSelectedChoices];
+};
+
+const QuestionDraggable = props => {
+  const templateContext = useTemplateContext();
+  const {
+    theme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = useState(null);
+  useEffect(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const handlePress = item => () => props.onPress(item);
+
+  const {
+    choices,
+    onPress,
+    testID,
+    userChoices
+  } = props;
+  const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);
+  const mappedunselectedChoices = notSelectedChoices.map((item, index) => /*#__PURE__*/React.createElement(QuestionChoice, {
+    style: styleSheet.choice,
+    key: item._id,
+    squeezed: true,
+    testID: `choice-${item._id}-unselected`,
+    onPress: handlePress(item),
+    questionType: "qcmDrag"
+  }, item.label));
+  return /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.container,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(DropZone, {
+    choices: selectedChoices,
+    onPress: onPress
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.pickableChoices
+  }, mappedunselectedChoices));
+};
+
+export default QuestionDraggable;
+//# sourceMappingURL=index.native.js.map

package/es/molecule/questions/mobile/draggable/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":["React","useCallback","useEffect","useState","View","StyleSheet","Text","QuestionChoice","useTemplateContext","createDropZoneStyle","theme","create","choice","margin","spacing","micro","dropZone","flexWrap","flexDirection","borderStyle","borderWidth","padding","borderColor","colors","gray","light","backgroundColor","extra","borderRadius","radius","common","marginBottom","tiny","emptyContent","justifyContent","alignContent","alignItems","height","text","color","medium","DropZone","props","templateContext","translations","onPress","handlePress","item","styleSheet","setStylesheet","_stylesheet","choices","mappedSortedChoices","map","_id","label","hasNoSelectedChoices","length","selectSomethingBelow","createStyleSheet","container","pickableChoices","extractSelectedChoices","availableChoices","userChoices","selectedChoices","reduce","accumulator","currentValue","foundItem","find","availableChoice","notSelectedChoices","filter","includes","QuestionDraggable","testID","mappedunselectedChoices","index"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,SAA5B,EAAuCC,QAAvC,QAAsD,OAAtD;AACA,SAAQC,IAAR,EAAcC,UAAd,EAA0BC,IAA1B,QAAqC,cAArC;AACA,OAAOC,cAAP,MAA2B,sCAA3B;AACA,SAAQC,kBAAR,QAAiC,kDAAjC;;AAUA,MAAMC,mBAAmB,GAAIC,KAAD,IAC1BL,UAAU,CAACM,MAAX,CAAkB;AAChBC,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAEH,KAAK,CAACI,OAAN,CAAcC;AADhB,GADQ;AAIhBC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,QAAQ,EAAE,MADF;AAERC,IAAAA,aAAa,EAAE,KAFP;AAGRC,IAAAA,WAAW,EAAE,QAHL;AAIRC,IAAAA,WAAW,EAAE,CAJL;AAKRC,IAAAA,OAAO,EAAEX,KAAK,CAACI,OAAN,CAAcC,KALf;AAMRO,IAAAA,WAAW,EAAEZ,KAAK,CAACa,MAAN,CAAaC,IAAb,CAAkBC,KANvB;AAORC,IAAAA,eAAe,EAAEhB,KAAK,CAACa,MAAN,CAAaC,IAAb,CAAkBG,KAP3B;AAQRC,IAAAA,YAAY,EAAElB,KAAK,CAACmB,MAAN,CAAaC,MARnB;AASRC,IAAAA,YAAY,EAAErB,KAAK,CAACI,OAAN,CAAckB;AATpB,GAJM;AAehBC,EAAAA,YAAY,EAAE;AACZC,IAAAA,cAAc,EAAE,QADJ;AAEZC,IAAAA,YAAY,EAAE,QAFF;AAGZC,IAAAA,UAAU,EAAE,QAHA;AAIZC,IAAAA,MAAM,EAAE;AAJI,GAfE;AAqBhBC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE7B,KAAK,CAACa,MAAN,CAAaC,IAAb,CAAkBgB;AADrB;AArBU,CAAlB,CADF;;AA2BA,MAAMC,QAAQ,GAAIC,KAAD,IAA0B;AACzC,QAAMC,eAAe,GAAGnC,kBAAkB,EAA1C;AACA,QAAM;AAACE,IAAAA,KAAD;AAAQkC,IAAAA;AAAR,MAAwBD,eAA9B;AACA,QAAM;AAACE,IAAAA;AAAD,MAAYH,KAAlB;AAEA,QAAMI,WAAW,GAAG7C,WAAW,CAAE8C,IAAD,IAAkB,MAAMF,OAAO,CAACE,IAAD,CAAhC,EAAwC,CAACF,OAAD,CAAxC,CAA/B;AACA,QAAM,CAACG,UAAD,EAAaC,aAAb,IAA8B9C,QAAQ,CAAa,IAAb,CAA5C;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMgD,WAAW,GAAGzC,mBAAmB,CAACC,KAAD,CAAvC;;AACAuC,IAAAA,aAAa,CAACC,WAAD,CAAb;AACD,GAHQ,EAGN,CAACxC,KAAD,CAHM,CAAT;;AAKA,MAAI,CAACsC,UAAL,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,QAAM;AAACG,IAAAA;AAAD,MAAYT,KAAlB;AACA,QAAMU,mBAAmB,GAAGD,OAAO,CAACE,GAAR,CAAYN,IAAI,iBAC1C,oBAAC,cAAD;AACE,IAAA,KAAK,EAAEC,UAAU,CAACpC,MADpB;AAEE,IAAA,GAAG,EAAEmC,IAAI,CAACO,GAFZ;AAGE,IAAA,QAAQ,MAHV;AAIE,IAAA,UAAU,MAJZ;AAKE,IAAA,MAAM,EAAG,UAASP,IAAI,CAACO,GAAI,EAL7B;AAME,IAAA,OAAO,EAAER,WAAW,CAACC,IAAD,CANtB;AAOE,IAAA,YAAY,EAAC;AAPf,KASGA,IAAI,CAACQ,KATR,CAD0B,CAA5B;AAcA,QAAMC,oBAAoB,GAAGJ,mBAAmB,CAACK,MAApB,KAA+B,CAA5D;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACT,UAAU,CAAChC,QAAZ,EAAsBwC,oBAAoB,IAAIR,UAAU,CAACf,YAAzD;AAAb,KACGuB,oBAAoB,gBACnB,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAER,UAAU,CAACV;AAAxB,KAA+BM,YAAY,CAACc,oBAA5C,CADmB,GAEjB,IAHN,EAKG,CAACF,oBAAD,IAAyBJ,mBAL5B,CADF;AASD,CA3CD;;AAoDA,MAAMO,gBAAgB,GAAIjD,KAAD,IACvBL,UAAU,CAACM,MAAX,CAAkB;AAChBiD,EAAAA,SAAS,EAAE,EADK;AAEhBC,EAAAA,eAAe,EAAE;AACf3C,IAAAA,aAAa,EAAE,KADA;AAEfD,IAAAA,QAAQ,EAAE;AAFK,GAFD;AAMhBL,EAAAA,MAAM,EAAE;AACNC,IAAAA,MAAM,EAAEH,KAAK,CAACI,OAAN,CAAcC;AADhB;AANQ,CAAlB,CADF,C,CAYA;;;AACA,OAAO,MAAM+C,sBAAsB,GAAG,CACpCC,gBADoC,EAEpCC,WAFoC,KAGX;AACzB,QAAMC,eAA8B,GAAGD,WAAW,CAACE,MAAZ,CACrC,CAACC,WAAD,EAA6BC,YAA7B,KAA8C;AAC5C,UAAMC,SAAS,GAAGN,gBAAgB,CAACO,IAAjB,CAChBC,eAAe,IAAIA,eAAe,CAAChB,KAAhB,KAA0Ba,YAD7B,CAAlB;;AAGA,QAAIC,SAAJ,EAAe;AACb,aAAO,CAAC,GAAGF,WAAJ,EAAiBE,SAAjB,CAAP;AACD;;AACD,WAAOF,WAAP;AACD,GAToC,EAUrC,EAVqC,CAAvC;AAaA,QAAMK,kBAAkB,GAAGT,gBAAgB,CAACU,MAAjB,CACzBF,eAAe,IAAI,CAACP,WAAW,CAACU,QAAZ,CAAqBH,eAAe,CAAChB,KAArC,CADK,CAA3B;AAIA,SAAO,CAACU,eAAD,EAAkBO,kBAAlB,CAAP;AACD,CAtBM;;AAwBP,MAAMG,iBAAiB,GAAIjC,KAAD,IAAkB;AAC1C,QAAMC,eAAe,GAAGnC,kBAAkB,EAA1C;AACA,QAAM;AAACE,IAAAA;AAAD,MAAUiC,eAAhB;AAEA,QAAM,CAACK,UAAD,EAAaC,aAAb,IAA8B9C,QAAQ,CAAa,IAAb,CAA5C;AAEAD,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMgD,WAAW,GAAGS,gBAAgB,CAACjD,KAAD,CAApC;;AACAuC,IAAAA,aAAa,CAACC,WAAD,CAAb;AACD,GAHQ,EAGN,CAACxC,KAAD,CAHM,CAAT;;AAKA,MAAI,CAACsC,UAAL,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,QAAMF,WAAW,GAAIC,IAAD,IAAkB,MAAML,KAAK,CAACG,OAAN,CAAcE,IAAd,CAA5C;;AAEA,QAAM;AAACI,IAAAA,OAAD;AAAUN,IAAAA,OAAV;AAAmB+B,IAAAA,MAAnB;AAA2BZ,IAAAA;AAA3B,MAA0CtB,KAAhD;AACA,QAAM,CAACuB,eAAD,EAAkBO,kBAAlB,IAAwCV,sBAAsB,CAACX,OAAD,EAAUa,WAAV,CAApE;AAEA,QAAMa,uBAAuB,GAAGL,kBAAkB,CAACnB,GAAnB,CAAuB,CAACN,IAAD,EAAO+B,KAAP,kBACrD,oBAAC,cAAD;AACE,IAAA,KAAK,EAAE9B,UAAU,CAACpC,MADpB;AAEE,IAAA,GAAG,EAAEmC,IAAI,CAACO,GAFZ;AAGE,IAAA,QAAQ,MAHV;AAIE,IAAA,MAAM,EAAG,UAASP,IAAI,CAACO,GAAI,aAJ7B;AAKE,IAAA,OAAO,EAAER,WAAW,CAACC,IAAD,CALtB;AAME,IAAA,YAAY,EAAC;AANf,KAQGA,IAAI,CAACQ,KARR,CAD8B,CAAhC;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEP,UAAU,CAACY,SAAxB;AAAmC,IAAA,MAAM,EAAEgB;AAA3C,kBACE,oBAAC,QAAD;AAAU,IAAA,OAAO,EAAEX,eAAnB;AAAoC,IAAA,OAAO,EAAEpB;AAA7C,IADF,eAEE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEG,UAAU,CAACa;AAAxB,KAA0CgB,uBAA1C,CAFF,CADF;AAMD,CAvCD;;AAyCA,eAAeF,iBAAf","sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\n\nimport type {Choice} from '../../../../types/progression-engine';\n\nexport interface DropZoneProps {\n  choices: Array<Choice>;\n  onPress: (item: Choice) => void;\n}\n\nconst createDropZoneStyle = (theme: Theme) =>\n  StyleSheet.create({\n    choice: {\n      margin: theme.spacing.micro\n    },\n    dropZone: {\n      flexWrap: 'wrap',\n      flexDirection: 'row',\n      borderStyle: 'dashed',\n      borderWidth: 2,\n      padding: theme.spacing.micro,\n      borderColor: theme.colors.gray.light,\n      backgroundColor: theme.colors.gray.extra,\n      borderRadius: theme.radius.common,\n      marginBottom: theme.spacing.tiny\n    },\n    emptyContent: {\n      justifyContent: 'center',\n      alignContent: 'center',\n      alignItems: 'center',\n      height: 60\n    },\n    text: {\n      color: theme.colors.gray.medium\n    }\n  });\n\nconst DropZone = (props: DropZoneProps) => {\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n  const {onPress} = props;\n\n  const handlePress = useCallback((item: Choice) => () => onPress(item), [onPress]);\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createDropZoneStyle(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const {choices} = props;\n  const mappedSortedChoices = choices.map(item => (\n    <QuestionChoice\n      style={styleSheet.choice}\n      key={item._id}\n      squeezed\n      isSelected\n      testID={`choice-${item._id}`}\n      onPress={handlePress(item)}\n      questionType=\"qcmDrag\"\n    >\n      {item.label}\n    </QuestionChoice>\n  ));\n\n  const hasNoSelectedChoices = mappedSortedChoices.length === 0;\n\n  return (\n    <View style={[styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]}>\n      {hasNoSelectedChoices ? (\n        <Text style={styleSheet.text}>{translations.selectSomethingBelow}</Text>\n      ) : null}\n\n      {!hasNoSelectedChoices && mappedSortedChoices}\n    </View>\n  );\n};\n\nexport interface Props {\n  choices: Array<Choice>;\n  userChoices: Array<string>;\n  testID?: string;\n  onPress: (item: Choice) => void;\n}\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    container: {},\n    pickableChoices: {\n      flexDirection: 'row',\n      flexWrap: 'wrap'\n    },\n    choice: {\n      margin: theme.spacing.micro\n    }\n  });\n\n// this algo could be improve using a  single reduce fuction\nexport const extractSelectedChoices = (\n  availableChoices: Array<Choice>,\n  userChoices: Array<string>\n): Array<Array<Choice>> => {\n  const selectedChoices: Array<Choice> = userChoices.reduce(\n    (accumulator: Array<Choice>, currentValue) => {\n      const foundItem = availableChoices.find(\n        availableChoice => availableChoice.label === currentValue\n      );\n      if (foundItem) {\n        return [...accumulator, foundItem];\n      }\n      return accumulator;\n    },\n    []\n  );\n\n  const notSelectedChoices = availableChoices.filter(\n    availableChoice => !userChoices.includes(availableChoice.label)\n  );\n\n  return [selectedChoices, notSelectedChoices];\n};\n\nconst QuestionDraggable = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handlePress = (item: Choice) => () => props.onPress(item);\n\n  const {choices, onPress, testID, userChoices} = props;\n  const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);\n\n  const mappedunselectedChoices = notSelectedChoices.map((item, index) => (\n    <QuestionChoice\n      style={styleSheet.choice}\n      key={item._id}\n      squeezed\n      testID={`choice-${item._id}-unselected`}\n      onPress={handlePress(item)}\n      questionType=\"qcmDrag\"\n    >\n      {item.label}\n    </QuestionChoice>\n  ));\n\n  return (\n    <View style={styleSheet.container} testID={testID}>\n      <DropZone choices={selectedChoices} onPress={onPress} />\n      <View style={styleSheet.pickableChoices}>{mappedunselectedChoices}</View>\n    </View>\n  );\n};\n\nexport default QuestionDraggable;\n"],"file":"index.native.js"}

package/es/molecule/questions/mobile/slide/index.native.js

@@ -0,0 +1,119 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Slider from '@coorpacademy/react-native-slider';
+import Text from '../../../../atom/text/index.native';
+import { useTemplateContext } from '../../../../template/app-review/template-context';
+import { BOX_STYLE } from '../../../../variables/shadow';
+
+const createStyleSheet = theme => StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    flexDirection: 'column',
+    justifyContent: 'center'
+  },
+  header: {
+    fontSize: 25,
+    fontWeight: theme.fontWeight.bold,
+    textAlign: 'center'
+  },
+  textValue: {
+    fontSize: 15,
+    color: theme.colors.black,
+    fontWeight: theme.fontWeight.bold,
+    textAlign: 'center'
+  },
+  valuesContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  leftValue: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  rightValue: {
+    flex: 1,
+    alignItems: 'flex-end'
+  },
+  track: {
+    height: 10,
+    borderRadius: theme.radius.button
+  },
+  thumb: _extends(_extends({}, BOX_STYLE), {}, {
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
+    backgroundColor: 'white',
+    borderWidth: 1
+  })
+});
+
+const QuestionSlider = props => {
+  const templateContext = useTemplateContext();
+  const {
+    brandTheme,
+    theme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = useState(null);
+  useEffect(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const {
+    step,
+    style,
+    min,
+    max,
+    unit = '',
+    value,
+    onSlidingComplete,
+    testID,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styleSheet.container, style],
+    testID: testID
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styleSheet.header, {
+      color: brandTheme?.colors.primary
+    }],
+    testID: "slider-value"
+  }, value), /*#__PURE__*/React.createElement(Slider, {
+    step: step || 1,
+    value: value,
+    onValueChange: onChange,
+    maximumValue: max,
+    minimumValue: min,
+    onSlidingComplete: onSlidingComplete,
+    minimumTrackTintColor: brandTheme?.colors.primary,
+    trackStyle: styleSheet.track,
+    thumbStyle: [styleSheet.thumb, {
+      borderColor: brandTheme?.colors.primary
+    }],
+    testID: "slider"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.valuesContainer,
+    testID: "slider-values-container"
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.leftValue
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styleSheet.textValue,
+    testID: "slider-min-value"
+  }, `${min} ${unit}`)), /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.rightValue
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styleSheet.textValue,
+    testID: "slider-max-value"
+  }, `${max} ${unit}`))));
+};
+
+export default QuestionSlider;
+//# sourceMappingURL=index.native.js.map

package/es/molecule/questions/mobile/slide/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/mobile/slide/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","Slider","Text","useTemplateContext","BOX_STYLE","createStyleSheet","theme","create","container","flex","paddingHorizontal","flexDirection","justifyContent","header","fontSize","fontWeight","bold","textAlign","textValue","color","colors","black","valuesContainer","leftValue","alignItems","rightValue","track","height","borderRadius","radius","button","thumb","width","backgroundColor","borderWidth","QuestionSlider","props","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","step","style","min","max","unit","value","onSlidingComplete","testID","onChange","primary","borderColor"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport Slider from '@coorpacademy/react-native-slider';\n\nimport {Theme} from '../../../../variables/theme.native';\nimport Text from '../../../../atom/text/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {BOX_STYLE} from '../../../../variables/shadow';\nimport {FlexDirection, JustifyContent, TextAlign, FontWeight} from '../../../../types/styles';\n\nexport type OnChangeFunction = (value: number) => void;\n\nexport type Props = {\n  min: number;\n  max: number;\n  unit?: string;\n  value: number;\n  onChange: OnChangeFunction;\n  onSlidingComplete: () => void;\n  style?: ViewStyle;\n  step?: number;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: {\n    flex: number;\n    paddingHorizontal: number;\n    flexDirection: FlexDirection;\n    justifyContent: JustifyContent;\n  };\n  header: {\n    fontSize: number;\n    fontWeight: FontWeight;\n    textAlign: TextAlign;\n  };\n  textValue: {\n    fontSize: number;\n    color: string;\n    fontWeight: FontWeight;\n    textAlign: string;\n  };\n  valuesContainer: {\n    flexDirection: FlexDirection;\n    justifyContent: JustifyContent;\n  };\n  leftValue: {\n    flex: number;\n    alignItems: FlexAlignType | undefined;\n  };\n  rightValue: {\n    flex: number;\n    alignItems: FlexAlignType | undefined;\n  };\n  track: {\n    height: number;\n    borderRadius: number;\n  };\n  thumb: {\n    width: number;\n    height: number;\n    borderRadius: number;\n    backgroundColor: string;\n    borderWidth: number;\n  };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    container: {\n      flex: 1,\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'center'\n    },\n    header: {\n      fontSize: 25,\n      fontWeight: theme.fontWeight.bold,\n      textAlign: 'center'\n    },\n    textValue: {\n      fontSize: 15,\n      color: theme.colors.black,\n      fontWeight: theme.fontWeight.bold,\n      textAlign: 'center'\n    },\n    valuesContainer: {\n      flexDirection: 'row',\n      justifyContent: 'space-around'\n    },\n    leftValue: {\n      flex: 1,\n      alignItems: 'flex-start'\n    },\n    rightValue: {\n      flex: 1,\n      alignItems: 'flex-end'\n    },\n    track: {\n      height: 10,\n      borderRadius: theme.radius.button\n    },\n    thumb: {\n      ...BOX_STYLE,\n      width: 30,\n      height: 30,\n      borderRadius: 30 / 2,\n      backgroundColor: 'white',\n      borderWidth: 1\n    }\n  });\n\nconst QuestionSlider = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {brandTheme, theme} = templateContext;\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const {step, style, min, max, unit = '', value, onSlidingComplete, testID, onChange} = props;\n\n  return (\n    <View style={[styleSheet.container, style]} testID={testID}>\n      <Text style={[styleSheet.header, {color: brandTheme?.colors.primary}]} testID=\"slider-value\">\n        {value}\n      </Text>\n      <Slider\n        step={step || 1}\n        value={value}\n        onValueChange={onChange}\n        maximumValue={max}\n        minimumValue={min}\n        onSlidingComplete={onSlidingComplete}\n        minimumTrackTintColor={brandTheme?.colors.primary}\n        trackStyle={styleSheet.track}\n        thumbStyle={[styleSheet.thumb, {borderColor: brandTheme?.colors.primary}]}\n        testID=\"slider\"\n      />\n      <View style={styleSheet.valuesContainer} testID=\"slider-values-container\">\n        <View style={styleSheet.leftValue}>\n          <Text style={styleSheet.textValue} testID=\"slider-min-value\">\n            {`${min} ${unit}`}\n          </Text>\n        </View>\n        <View style={styleSheet.rightValue}>\n          <Text style={styleSheet.textValue} testID=\"slider-max-value\">\n            {`${max} ${unit}`}\n          </Text>\n        </View>\n      </View>\n    </View>\n  );\n};\n\nexport default QuestionSlider;\n"],"file":"index.native.js"}

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

@@ -7,6 +7,7 @@ import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import Answer from '../../molecule/answer';
 import ButtonLink from '../../atom/button-link';
+import Loader from '../../atom/loader';
 import Provider from '../../atom/provider';
 import ReviewCorrectionPopin from '../../molecule/review-correction-popin';
 import propTypes from './prop-types';
@@ -151,6 +152,8 @@ const Slide = (props, context) => {
   } = context;
   const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
   const {
+    loading,
+    loadingAriaLabel,
     parentContentTitle,
     questionText,
     answerUI,
@@ -160,20 +163,27 @@ const Slide = (props, context) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-name": `slide-container`,
     className: style.slide
-  }, /*#__PURE__*/React.createElement(QuestionContainer, {
+  }, loading ? /*#__PURE__*/React.createElement(Loader, {
+    className: style.loader,
+    theme: "default",
+    "aria-label": loadingAriaLabel
+  }) : [/*#__PURE__*/React.createElement(QuestionContainer, {
     questionOrigin: parentContentTitle,
     questionText: questionText,
-    answerUI: answerUI
+    answerUI: answerUI,
+    key: "question-container"
   }), /*#__PURE__*/React.createElement(ValidateButton, {
     slideIndex: slideIndex,
     validateButton: validateButton,
-    primarySkinColor: primarySkinColor
+    primarySkinColor: primarySkinColor,
+    key: "validate-button"
   }), /*#__PURE__*/React.createElement(CorrectionPopin, {
     correctionPopinProps: correctionPopinProps,
     slideIndex: slideIndex,
     showCorrectionPopin: showCorrectionPopin,
-    animateCorrectionPopin: animateCorrectionPopin
-  }));
+    animateCorrectionPopin: animateCorrectionPopin,
+    key: "correction-popin"
+  })]);
 };
 
 Slide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};

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","Provider","ReviewCorrectionPopin","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","Slide","context","skin","parentContentTitle","contextTypes","childContextTypes"],"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 Provider from '../../atom/provider';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\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 Slide = (props, context) => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const {skin} = context;\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\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      <QuestionContainer\n        questionOrigin={parentContentTitle}\n        questionText={questionText}\n        answerUI={answerUI}\n      />\n      <ValidateButton\n        slideIndex={slideIndex}\n        validateButton={validateButton}\n        primarySkinColor={primarySkinColor}\n      />\n      <CorrectionPopin\n        correctionPopinProps={correctionPopinProps}\n        slideIndex={slideIndex}\n        showCorrectionPopin={showCorrectionPopin}\n        animateCorrectionPopin={animateCorrectionPopin}\n      />\n    </div>\n  );\n};\n\nSlide.propTypes = propTypes;\n\nSlide.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Slide;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["React","useMemo","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","Provider","ReviewCorrectionPopin","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","Slide","context","skin","loading","loadingAriaLabel","parentContentTitle","loader","contextTypes","childContextTypes"],"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 Provider from '../../atom/provider';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\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 Slide = (props, context) => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const {skin} = context;\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\nSlide.propTypes = propTypes;\n\nSlide.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Slide;\n"],"file":"index.js"}

package/es/organism/review-slide/prop-types.js

@@ -4,6 +4,8 @@ import AnswerPropTypes from '../../molecule/answer/prop-types';
 export const SlideProp = PropTypes.shape({
   hidden: PropTypes.bool,
   position: PropTypes.number,
+  loading: PropTypes.bool,
+  loadingAriaLabel: PropTypes.string,
   animationType: PropTypes.string,
   // 'unstack' | 'restack'
   isCorrect: PropTypes.bool,

package/es/organism/review-slide/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-slide/prop-types.js"],"names":["PropTypes","ReviewCorrectionPopinPropTypes","AnswerPropTypes","SlideProp","shape","hidden","bool","position","number","animationType","string","isCorrect","animateCorrectionPopin","showCorrectionPopin","parentContentTitle","questionText","answerUI","slideIndex","slide","validateButton","label","isRequired","onClick","func","disabled","correctionPopinProps","klf","information","next","resultLabel","type"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,8BAAP,MAA2C,mDAA3C;AACA,OAAOC,eAAP,MAA4B,kCAA5B;AAEA,OAAO,MAAMC,SAAS,GAAGH,SAAS,CAACI,KAAV,CAAgB;AACvCC,EAAAA,MAAM,EAAEL,SAAS,CAACM,IADqB;AAEvCC,EAAAA,QAAQ,EAAEP,SAAS,CAACQ,MAFmB;AAGvCC,EAAAA,aAAa,EAAET,SAAS,CAACU,MAHc;AAGN;AACjCC,EAAAA,SAAS,EAAEX,SAAS,CAACM,IAJkB;AAKvCM,EAAAA,sBAAsB,EAAEZ,SAAS,CAACM,IALK;AAMvCO,EAAAA,mBAAmB,EAAEb,SAAS,CAACM,IANQ;AAOvCQ,EAAAA,kBAAkB,EAAEd,SAAS,CAACU,MAPS;AAQvCK,EAAAA,YAAY,EAAEf,SAAS,CAACU,MARe;AASvCM,EAAAA,QAAQ,EAAEhB,SAAS,CAACI,KAAV,CAAgBF,eAAhB;AAT6B,CAAhB,CAAlB;AAYP,eAAe;AACbe,EAAAA,UAAU,EAAEjB,SAAS,CAACU,MADT;AAEbQ,EAAAA,KAAK,EAAEf,SAFM;AAGbgB,EAAAA,cAAc,EAAEnB,SAAS,CAACI,KAAV,CAAgB;AAC9BgB,IAAAA,KAAK,EAAEpB,SAAS,CAACU,MAAV,CAAiBW,UADM;AAE9BC,IAAAA,OAAO,EAAEtB,SAAS,CAACuB,IAAV,CAAeF,UAFM;AAG9BG,IAAAA,QAAQ,EAAExB,SAAS,CAACM;AAHU,GAAhB,CAHH;AAQbmB,EAAAA,oBAAoB,EAAEzB,SAAS,CAACI,KAAV,CAAgB;AACpCsB,IAAAA,GAAG,EAAEzB,8BAA8B,CAACyB,GADA;AAEpCC,IAAAA,WAAW,EAAE1B,8BAA8B,CAAC0B,WAFR;AAGpCC,IAAAA,IAAI,EAAE5B,SAAS,CAACI,KAAV,CAAgB;AACpBgB,MAAAA,KAAK,EAAEpB,SAAS,CAACU,MADG;AAEpB,oBAAcV,SAAS,CAACU,MAFJ,CAEW;AAC/B;;AAHoB,KAAhB,CAH8B;AAQpCmB,IAAAA,WAAW,EAAE5B,8BAA8B,CAAC4B,WARR;AASpCC,IAAAA,IAAI,EAAE7B,8BAA8B,CAAC6B;AATD,GAAhB;AART,CAAf","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewCorrectionPopinPropTypes from '../../molecule/review-correction-popin/prop-types';\nimport AnswerPropTypes from '../../molecule/answer/prop-types';\n\nexport const SlideProp = PropTypes.shape({\n  hidden: PropTypes.bool,\n  position: PropTypes.number,\n  animationType: PropTypes.string, // 'unstack' | 'restack'\n  isCorrect: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  showCorrectionPopin: PropTypes.bool,\n  parentContentTitle: PropTypes.string,\n  questionText: PropTypes.string,\n  answerUI: PropTypes.shape(AnswerPropTypes)\n});\n\nexport default {\n  slideIndex: PropTypes.string,\n  slide: SlideProp,\n  validateButton: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func.isRequired,\n    disabled: PropTypes.bool\n  }),\n  correctionPopinProps: PropTypes.shape({\n    klf: ReviewCorrectionPopinPropTypes.klf,\n    information: ReviewCorrectionPopinPropTypes.information,\n    next: PropTypes.shape({\n      label: PropTypes.string,\n      'aria-label': PropTypes.string // Pourquoi le onClick du next n'est pas ici !\n      // updateSlidesOnNext: PropTypes.func.isRequired ???\n    }),\n    resultLabel: ReviewCorrectionPopinPropTypes.resultLabel,\n    type: ReviewCorrectionPopinPropTypes.type\n  })\n};\n"],"file":"prop-types.js"}
+{"version":3,"sources":["../../../src/organism/review-slide/prop-types.js"],"names":["PropTypes","ReviewCorrectionPopinPropTypes","AnswerPropTypes","SlideProp","shape","hidden","bool","position","number","loading","loadingAriaLabel","string","animationType","isCorrect","animateCorrectionPopin","showCorrectionPopin","parentContentTitle","questionText","answerUI","slideIndex","slide","validateButton","label","isRequired","onClick","func","disabled","correctionPopinProps","klf","information","next","resultLabel","type"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,8BAAP,MAA2C,mDAA3C;AACA,OAAOC,eAAP,MAA4B,kCAA5B;AAEA,OAAO,MAAMC,SAAS,GAAGH,SAAS,CAACI,KAAV,CAAgB;AACvCC,EAAAA,MAAM,EAAEL,SAAS,CAACM,IADqB;AAEvCC,EAAAA,QAAQ,EAAEP,SAAS,CAACQ,MAFmB;AAGvCC,EAAAA,OAAO,EAAET,SAAS,CAACM,IAHoB;AAIvCI,EAAAA,gBAAgB,EAAEV,SAAS,CAACW,MAJW;AAKvCC,EAAAA,aAAa,EAAEZ,SAAS,CAACW,MALc;AAKN;AACjCE,EAAAA,SAAS,EAAEb,SAAS,CAACM,IANkB;AAOvCQ,EAAAA,sBAAsB,EAAEd,SAAS,CAACM,IAPK;AAQvCS,EAAAA,mBAAmB,EAAEf,SAAS,CAACM,IARQ;AASvCU,EAAAA,kBAAkB,EAAEhB,SAAS,CAACW,MATS;AAUvCM,EAAAA,YAAY,EAAEjB,SAAS,CAACW,MAVe;AAWvCO,EAAAA,QAAQ,EAAElB,SAAS,CAACI,KAAV,CAAgBF,eAAhB;AAX6B,CAAhB,CAAlB;AAcP,eAAe;AACbiB,EAAAA,UAAU,EAAEnB,SAAS,CAACW,MADT;AAEbS,EAAAA,KAAK,EAAEjB,SAFM;AAGbkB,EAAAA,cAAc,EAAErB,SAAS,CAACI,KAAV,CAAgB;AAC9BkB,IAAAA,KAAK,EAAEtB,SAAS,CAACW,MAAV,CAAiBY,UADM;AAE9BC,IAAAA,OAAO,EAAExB,SAAS,CAACyB,IAAV,CAAeF,UAFM;AAG9BG,IAAAA,QAAQ,EAAE1B,SAAS,CAACM;AAHU,GAAhB,CAHH;AAQbqB,EAAAA,oBAAoB,EAAE3B,SAAS,CAACI,KAAV,CAAgB;AACpCwB,IAAAA,GAAG,EAAE3B,8BAA8B,CAAC2B,GADA;AAEpCC,IAAAA,WAAW,EAAE5B,8BAA8B,CAAC4B,WAFR;AAGpCC,IAAAA,IAAI,EAAE9B,SAAS,CAACI,KAAV,CAAgB;AACpBkB,MAAAA,KAAK,EAAEtB,SAAS,CAACW,MADG;AAEpB,oBAAcX,SAAS,CAACW,MAFJ,CAEW;AAC/B;;AAHoB,KAAhB,CAH8B;AAQpCoB,IAAAA,WAAW,EAAE9B,8BAA8B,CAAC8B,WARR;AASpCC,IAAAA,IAAI,EAAE/B,8BAA8B,CAAC+B;AATD,GAAhB;AART,CAAf","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewCorrectionPopinPropTypes from '../../molecule/review-correction-popin/prop-types';\nimport AnswerPropTypes from '../../molecule/answer/prop-types';\n\nexport const SlideProp = PropTypes.shape({\n  hidden: PropTypes.bool,\n  position: PropTypes.number,\n  loading: PropTypes.bool,\n  loadingAriaLabel: PropTypes.string,\n  animationType: PropTypes.string, // 'unstack' | 'restack'\n  isCorrect: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  showCorrectionPopin: PropTypes.bool,\n  parentContentTitle: PropTypes.string,\n  questionText: PropTypes.string,\n  answerUI: PropTypes.shape(AnswerPropTypes)\n});\n\nexport default {\n  slideIndex: PropTypes.string,\n  slide: SlideProp,\n  validateButton: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    onClick: PropTypes.func.isRequired,\n    disabled: PropTypes.bool\n  }),\n  correctionPopinProps: PropTypes.shape({\n    klf: ReviewCorrectionPopinPropTypes.klf,\n    information: ReviewCorrectionPopinPropTypes.information,\n    next: PropTypes.shape({\n      label: PropTypes.string,\n      'aria-label': PropTypes.string // Pourquoi le onClick du next n'est pas ici !\n      // updateSlidesOnNext: PropTypes.func.isRequired ???\n    }),\n    resultLabel: ReviewCorrectionPopinPropTypes.resultLabel,\n    type: ReviewCorrectionPopinPropTypes.type\n  })\n};\n"],"file":"prop-types.js"}

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

@@ -28,10 +28,6 @@
   flex-direction: column;
   overflow-y: auto;
   position: relative;
-}
-
-/* ie fallback */
-_:-ms-fullscreen, :root .slideContentContainer {
   width: 100%;
 }
 
@@ -52,7 +48,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
 }
 
 .answerContainer {
-  width: 95%;
+  max-width: 95%;
   display: flex;
   justify-content: center;
   height: 100%;
@@ -70,9 +66,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   color: cm_blue_900;
   text-align: center;
   margin: 24px 0 4px;
-  max-width: 70%;
-  width: 100%;
-  padding: 0 9px;
+  max-width: 85%;
   box-sizing: border-box;
 }
 
@@ -82,7 +76,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   color: cm_blue_900;
   margin-top: 49px;
   text-align: center;
-  width: 85%;
+  max-width: 95%;
 }
 
 .questionOrigin:empty:after {
@@ -96,8 +90,7 @@ _:-ms-fullscreen, :root .validateButtonWrapper {
   flex-grow: 0.1;
   margin: 4px 0 10px;
   text-align: center;
-  max-width: 70%;
-  width: 100%;
+  max-width: 95%;
 }
 
 /* to keep the content space even if the help label is empty */
@@ -140,6 +133,11 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
   opacity: 0.8;
 }
 
+.loader {
+  height: 60px;
+  width: 60px;
+}
+
 @media tablet {
   .slideContentContainer {
     height: 473px;
@@ -159,6 +157,10 @@ _:-ms-fullscreen, :root .correctionPopinWrapper {
   .slideContentContainer {
     height: 511px;
   }
+
+  .questionOrigin, .question, .help, .answerContainer {
+    max-width: 90%;
+  }
   
   @keyframes popInAnimation {
     from {

package/es/organism/review-stacked-slides/index.js

@@ -3,8 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import classnames from 'classnames';
 import _toString from 'lodash/fp/toString';
-import isNil from 'lodash/fp/isNil';
-import Loader from '../../atom/loader';
 import ReviewSlide from '../review-slide';
 import propTypes from './prop-types';
 import style from './style.css';
@@ -34,8 +32,7 @@ const StackedSlides = ({
   slides,
   endReview,
   validateButton,
-  correctionPopinProps,
-  loadingAriaLabel
+  correctionPopinProps
 }) => {
   const stackedSlides = []; // eslint-disable-next-line fp/no-loops
 
@@ -51,11 +48,7 @@ const StackedSlides = ({
       key: `slide-${slideIndex}`,
       "data-name": `slide-${slideIndex}`,
       className: classnames(style.slideBase, getSlideAnimation(animationType, position, hidden), endReview ? style.endReview : null)
-    }, isNil(slide.answerUI) && slide.position === 0 ? /*#__PURE__*/React.createElement(Loader, {
-      className: style.loader,
-      theme: "default",
-      "aria-label": loadingAriaLabel
-    }) : /*#__PURE__*/React.createElement(ReviewSlide, _extends({
+    }, /*#__PURE__*/React.createElement(ReviewSlide, _extends({
       slideIndex: _toString(slideIndex),
       slide,
       validateButton,