@coorpacademy/components 10.22.12 → 10.22.15-alpha.8

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

@@ -0,0 +1,171 @@
+import React, { useCallback } from 'react';
+import { View, StyleSheet } from 'react-native';
+import QuestionChoice from '../../../../atom/choice/index.native';
+import Space from '../../../../atom/space/index.native';
+import QuestionDraggable from '../draggable/index.native';
+import QuestionTemplate from '../template/index.native';
+import QuestionSlider from '../slider/index.native';
+import FreeText from '../../free-text/index.native';
+import { useTemplateContext } from '../../../../template/app-review/template-context';
+import { ANALYTICS_EVENT_TYPE } from '../../../../variables/analytics';
+const styleSheet = StyleSheet.create({
+  cards: {
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  card: {
+    flex: 1
+  }
+});
+
+const Switch = props => {
+  const templateContext = useTemplateContext();
+  const {
+    analytics
+  } = templateContext;
+  const {
+    type,
+    template,
+    isDisabled,
+    items,
+    userChoices,
+    min,
+    max,
+    unit,
+    value,
+    step,
+    onSliderChange,
+    onItemPress,
+    onItemInputChange,
+    onInputValueChange,
+    focusedSelectId,
+    handleFocus,
+    handleBlur
+  } = props;
+
+  const isSelected = choice => userChoices && userChoices.includes(choice.label);
+
+  const handleItemPress = item => () => {
+    if (onItemPress) {
+      onItemPress(item);
+    }
+  };
+
+  const handleItemInputChange = useCallback((item, _value) => {
+    if (onItemInputChange) {
+      onItemInputChange(item, _value);
+    }
+  }, [onItemInputChange]);
+  const handleSlidingComplete = useCallback(_value => {
+    analytics && analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {
+      id: 'slider',
+      questionType: 'slider'
+    });
+
+    if (onSliderChange) {
+      onSliderChange(_value);
+    }
+  }, [analytics, onSliderChange]);
+
+  switch (type) {
+    case 'qcm':
+      return /*#__PURE__*/React.createElement(View, {
+        testID: "question-choices"
+      }, items.map((item, index) => /*#__PURE__*/React.createElement(View, {
+        key: `question-choice-${item._id}`
+      }, index > 0 ? /*#__PURE__*/React.createElement(Space, null) : null, /*#__PURE__*/React.createElement(QuestionChoice, {
+        onPress: handleItemPress(item),
+        isDisabled: isDisabled,
+        isSelected: isSelected(item),
+        testID: `question-choice-${item._id}`,
+        questionType: type
+      }, item.label))));
+
+    case 'qcmGraphic':
+      return /*#__PURE__*/React.createElement(View, {
+        testID: "question-choices"
+      }, items.map((item, index) => {
+        return /*#__PURE__*/React.createElement(View, {
+          key: `question-choice-row-${item._id}`
+        }, index > 0 ? /*#__PURE__*/React.createElement(Space, null) : null, /*#__PURE__*/React.createElement(View, {
+          style: styleSheet.cards
+        }, /*#__PURE__*/React.createElement(QuestionChoice, {
+          onPress: handleItemPress(item),
+          media: item.media,
+          isDisabled: isDisabled,
+          isSelected: isSelected(item),
+          testID: `question-choice-${item._id}`,
+          style: styleSheet.card,
+          questionType: type
+        }, item.label), /*#__PURE__*/React.createElement(Space, null)));
+      }));
+
+    case 'slider':
+      {
+        if (min === undefined || max === undefined) {
+          return /*#__PURE__*/React.createElement(View, null);
+        }
+
+        return /*#__PURE__*/React.createElement(QuestionSlider, {
+          min: min,
+          max: max,
+          unit: unit,
+          value: value,
+          step: step,
+          onSlidingComplete: handleSlidingComplete,
+          testID: "question-slider"
+        });
+      }
+
+    case 'template':
+      if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {
+        return /*#__PURE__*/React.createElement(View, null);
+      }
+
+      return /*#__PURE__*/React.createElement(View, {
+        testID: "question-choices"
+      }, /*#__PURE__*/React.createElement(QuestionTemplate, {
+        isDisabled: isDisabled,
+        template: template || '',
+        items: items,
+        userChoices: userChoices,
+        onInputChange: handleItemInputChange,
+        handleBlur: handleBlur,
+        handleFocus: handleFocus,
+        focusedSelectId: focusedSelectId
+      }));
+
+    case 'qcmDrag':
+      if (!onItemPress) {
+        return /*#__PURE__*/React.createElement(View, null);
+      }
+
+      return /*#__PURE__*/React.createElement(View, {
+        testID: "question-draggable"
+      }, /*#__PURE__*/React.createElement(QuestionDraggable, {
+        choices: items,
+        userChoices: userChoices,
+        onPress: onItemPress
+      }));
+
+    case 'basic':
+      if (!onInputValueChange) {
+        return /*#__PURE__*/React.createElement(View, null);
+      }
+
+      return /*#__PURE__*/React.createElement(FreeText, {
+        fullWidth: true,
+        onChange: onInputValueChange,
+        testID: "question-input-text",
+        questionType: "basic",
+        isDisabled: isDisabled,
+        value: ""
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement(View, null);
+  }
+};
+
+export default Switch;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/molecule/questions/mobile/switch/index.native.tsx"],"names":["React","useCallback","View","StyleSheet","QuestionChoice","Space","QuestionDraggable","QuestionTemplate","QuestionSlider","FreeText","useTemplateContext","ANALYTICS_EVENT_TYPE","styleSheet","create","cards","flexDirection","alignItems","card","flex","Switch","props","templateContext","analytics","type","template","isDisabled","items","userChoices","min","max","unit","value","step","onSliderChange","onItemPress","onItemInputChange","onInputValueChange","focusedSelectId","handleFocus","handleBlur","isSelected","choice","includes","label","handleItemPress","item","handleItemInputChange","_value","handleSlidingComplete","logEvent","SLIDE","id","questionType","map","index","_id","media","undefined"],"mappings":"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","sourcesContent":["import React, {useCallback} from 'react';\nimport {View, StyleSheet} from 'react-native';\n\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport QuestionDraggable from '../draggable/index.native';\nimport QuestionTemplate from '../template/index.native';\nimport QuestionSlider from '../slider/index.native';\nimport FreeText from '../../free-text/index.native';\n\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE} from '../../../../variables/analytics';\n\nimport {FocusedSelectId, HandleBlur, HandleFocus} from '../../../../types/app-review';\nimport type {QuestionType, Choice} from '../../../../types/progression-engine';\n\nexport interface Props {\n  type: QuestionType;\n  isDisabled?: boolean;\n  template?: string;\n  items: Array<Choice>;\n  userChoices: Array<string>;\n  onItemPress?: (item: Choice) => void;\n  onSliderChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  unit?: string;\n  step?: number;\n  value?: number;\n  onItemInputChange?: (item: Choice, value: string) => void;\n  onInputValueChange?: (value: string) => void;\n  focusedSelectId?: FocusedSelectId;\n  handleFocus?: HandleFocus;\n  handleBlur?: HandleBlur;\n}\n\nconst styleSheet = StyleSheet.create({\n  cards: {\n    flexDirection: 'row',\n    alignItems: 'stretch'\n  },\n  card: {\n    flex: 1\n  }\n});\n\nconst Switch = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {analytics} = templateContext;\n\n  const {\n    type,\n    template,\n    isDisabled,\n    items,\n    userChoices,\n    min,\n    max,\n    unit,\n    value,\n    step,\n    onSliderChange,\n    onItemPress,\n    onItemInputChange,\n    onInputValueChange,\n    focusedSelectId,\n    handleFocus,\n    handleBlur\n  } = props;\n\n  const isSelected = (choice: Choice): boolean => userChoices && userChoices.includes(choice.label);\n\n  const handleItemPress = (item: Choice) => () => {\n    if (onItemPress) {\n      onItemPress(item);\n    }\n  };\n\n  const handleItemInputChange = useCallback(\n    (item: Choice, _value: string) => {\n      if (onItemInputChange) {\n        onItemInputChange(item, _value);\n      }\n    },\n    [onItemInputChange]\n  );\n\n  const handleSlidingComplete = useCallback(\n    _value => {\n      analytics &&\n        analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {\n          id: 'slider',\n          questionType: 'slider'\n        });\n\n      if (onSliderChange) {\n        onSliderChange(_value);\n      }\n    },\n    [analytics, onSliderChange]\n  );\n\n  switch (type) {\n    case 'qcm':\n      return (\n        <View testID=\"question-choices\">\n          {items.map((item, index) => (\n            <View key={`question-choice-${item._id}`}>\n              {index > 0 ? <Space /> : null}\n              <QuestionChoice\n                onPress={handleItemPress(item)}\n                isDisabled={isDisabled}\n                isSelected={isSelected(item)}\n                testID={`question-choice-${item._id}`}\n                questionType={type}\n              >\n                {item.label}\n              </QuestionChoice>\n            </View>\n          ))}\n        </View>\n      );\n    case 'qcmGraphic':\n      return (\n        <View testID=\"question-choices\">\n          {items.map((item, index) => {\n            return (\n              <View key={`question-choice-row-${item._id}`}>\n                {index > 0 ? <Space /> : null}\n                <View style={styleSheet.cards}>\n                  <QuestionChoice\n                    onPress={handleItemPress(item)}\n                    media={item.media}\n                    isDisabled={isDisabled}\n                    isSelected={isSelected(item)}\n                    testID={`question-choice-${item._id}`}\n                    style={styleSheet.card}\n                    questionType={type}\n                  >\n                    {item.label}\n                  </QuestionChoice>\n                  <Space />\n                </View>\n              </View>\n            );\n          })}\n        </View>\n      );\n    case 'slider': {\n      if (min === undefined || max === undefined) {\n        return <View />;\n      }\n\n      return (\n        <QuestionSlider\n          min={min}\n          max={max}\n          unit={unit}\n          value={value}\n          step={step}\n          onSlidingComplete={handleSlidingComplete}\n          testID=\"question-slider\"\n        />\n      );\n    }\n    case 'template':\n      if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-choices\">\n          <QuestionTemplate\n            isDisabled={isDisabled}\n            template={template || ''}\n            items={items}\n            userChoices={userChoices}\n            onInputChange={handleItemInputChange}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            focusedSelectId={focusedSelectId}\n          />\n        </View>\n      );\n    case 'qcmDrag':\n      if (!onItemPress) {\n        return <View />;\n      }\n\n      return (\n        <View testID=\"question-draggable\">\n          <QuestionDraggable choices={items} userChoices={userChoices} onPress={onItemPress} />\n        </View>\n      );\n    case 'basic':\n      if (!onInputValueChange) {\n        return <View />;\n      }\n\n      return (\n        <FreeText\n          fullWidth\n          onChange={onInputValueChange}\n          testID=\"question-input-text\"\n          questionType=\"basic\"\n          isDisabled={isDisabled}\n          value=\"\"\n        />\n      );\n    default:\n      return <View />;\n  }\n};\n\nexport default Switch;\n"],"file":"index.native.js"}

package/es/molecule/questions/qcm/index.js

@@ -5,20 +5,20 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import getOr from 'lodash/fp/getOr';
 import maxBy from 'lodash/fp/maxBy';
-import Provider from '../../../atom/provider';
+import Provider, { useWebContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
 
-const QCM = (props, context) => {
+const QCM = (props, legacyContext) => {
   const {
     answers
   } = props;
   const longestAnswer = maxBy(({
     title
   }) => title.length, answers);
-  const {
-    skin
-  } = context;
+  const context = useWebContext();
+  const skin = getOr(legacyContext.skin, 'skin', context);
+  console.log(skin);
   const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);
   const answersViews = useMemo(() => answers.map((answer, key) => {
     const {

package/es/molecule/questions/qcm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","getShadowBoxColorFromPrimary","style","QCM","props","context","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,GAAG,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AAC9B,QAAM;AAACC,IAAAA;AAAD,MAAYF,KAAlB;AACA,QAAMG,aAAa,GAAGR,KAAK,CAAC,CAAC;AAACS,IAAAA;AAAD,GAAD,KAAaA,KAAK,CAACC,MAApB,EAA4BH,OAA5B,CAA3B;AACA,QAAM;AAACI,IAAAA;AAAD,MAASL,OAAf;AACA,QAAMM,gBAAgB,GAAGb,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BY,IAA9B,CAA9B;AAEA,QAAME,YAAY,GAAGjB,OAAO,CAC1B,MACEW,OAAO,CAACO,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAC3B,UAAM;AAACC,MAAAA,OAAD;AAAUR,MAAAA,KAAV;AAAiBS,MAAAA,QAAjB;AAA2B,oBAAcC;AAAzC,QAAsDJ,MAA5D;AACA,UAAMK,eAAe,GAAGZ,aAAa,CAACC,KAAd,KAAwBA,KAAxB,GAAgCN,KAAK,CAACK,aAAtC,GAAsDL,KAAK,CAACY,MAApF;AACA,UAAMM,mBAAmB,GAAGH,QAAQ,GAAGf,KAAK,CAACmB,cAAT,GAA0BnB,KAAK,CAACoB,gBAApE;AAEA,wBACE;AACE,mBAAU,QADZ;AAEE,oBAAYJ,SAAS,IAAIV,KAF3B;AAGE,MAAA,SAAS,EAAEZ,UAAU,CAACuB,eAAD,EAAkBjB,KAAK,CAACqB,SAAxB,EAAmCH,mBAAnC,CAHvB;AAIE,MAAA,OAAO,EAAEJ,OAJX;AAKE,MAAA,KAAK,eACCC,QAAQ,IAAI;AACdO,QAAAA,SAAS,EAAG,cAAavB,4BAA4B,CAACU,gBAAD,CAAmB;AAD1D,OADb,CALP;AAUE,uBAAeM,QAVjB;AAWE,MAAA,GAAG,EAAEF;AAXP,oBAaE;AACE,mBAAU,mBADZ;AAEE,MAAA,KAAK,EAAE;AAACU,QAAAA,eAAe,EAAER,QAAQ,GAAGN,gBAAH,GAAsB;AAAU;;AAA1D,OAFT;AAGE,MAAA,SAAS,EAAET,KAAK,CAACwB;AAHnB,MAbF,eAkBE;AACE,mBAAU,cADZ;AAEE,MAAA,SAAS,EAAExB,KAAK,CAACyB,UAFnB,CAGE;AAHF;AAIE,MAAA,uBAAuB,EAAE;AAACC,QAAAA,MAAM,EAAEpB;AAAT;AAJ3B,MAlBF,CADF;AA2BD,GAhCD,CAFwB,EAmC1B,CAACF,OAAD,EAAUC,aAAV,EAAyBI,gBAAzB,CAnC0B,CAA5B;AAsCA,sBACE;AAAK,iBAAU,KAAf;AAAqB,IAAA,SAAS,EAAET,KAAK,CAAC2B;AAAtC,KACGjB,YADH,CADF;AAKD,CAjDD;;AAmDAT,GAAG,CAAC2B,YAAJ,GAAmB;AACjBpB,EAAAA,IAAI,EAAEV,QAAQ,CAAC+B,iBAAT,CAA2BrB;AADhB,CAAnB;AAIAP,GAAG,CAAC6B,SAAJ,2CAAgB;AACd1B,EAAAA,OAAO,EAAET,SAAS,CAACoC,OAAV,CACPpC,SAAS,CAACqC,KAAV,CAAgB;AACd1B,IAAAA,KAAK,EAAEX,SAAS,CAACsC,MADH;AAEdlB,IAAAA,QAAQ,EAAEpB,SAAS,CAACuC,IAFN;AAGdpB,IAAAA,OAAO,EAAEnB,SAAS,CAACwC,IAHL;AAId,kBAAcxC,SAAS,CAACsC;AAJV,GAAhB,CADO;AADK,CAAhB;AAWA,eAAehC,GAAf","sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, context) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  )\n};\n\nexport default QCM;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","useWebContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","longestAnswer","title","length","context","skin","console","log","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {useWebContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n  const {answers} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const context = useWebContext();\n  const skin = getOr(legacyContext.skin, 'skin', context);\n  console.log(skin);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = useMemo(\n    () =>\n      answers.map((answer, key) => {\n        const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n        const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n        const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n        return (\n          <div\n            data-name=\"answer\"\n            aria-label={ariaLabel || title}\n            className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n            onClick={onClick}\n            style={{\n              ...(selected && {\n                boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n              })\n            }}\n            data-selected={selected}\n            key={key}\n          >\n            <div\n              data-name=\"answer-background\"\n              style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n              className={style.background}\n            />\n            <span\n              data-name=\"answer-label\"\n              className={style.answerText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        );\n      }),\n    [answers, longestAnswer, primarySkinColor]\n  );\n\n  return (\n    <div data-name=\"qcm\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCM.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      'aria-label': PropTypes.string\n    })\n  )\n};\n\nexport default QCM;\n"],"file":"index.js"}

package/es/molecule/questions/qcm-drag/index.js

@@ -5,7 +5,7 @@ import _pipe from "lodash/fp/pipe";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Provider from '../../../atom/provider';
+import Provider, { useWebContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
 const AnswersPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.arrayOf(PropTypes.shape({
@@ -22,9 +22,6 @@ const EmptyView = ({
   className: style.emptySpan
 }, help);
 
-EmptyView.contextTypes = {
-  translate: Provider.childContextTypes.translate
-};
 EmptyView.propTypes = process.env.NODE_ENV !== "production" ? {
   help: PropTypes.string
 } : {};
@@ -120,10 +117,12 @@ SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
 const QcmDrag = ({
   answers,
   help
-}, context) => {
-  const {
-    skin
-  } = context;
+}, legacyContext) => {
+  const context = useWebContext();
+
+  const skin = _getOr(legacyContext.skin, 'skin', context);
+
+  console.log(skin);
 
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
 

package/es/molecule/questions/qcm-drag/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":["React","PropTypes","classnames","Provider","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","contextTypes","translate","childContextTypes","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","context","skin","primarySkinColor","wrapper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, context) => {\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper}>\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"names":["React","PropTypes","classnames","Provider","useWebContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","invisibleAnswer","unselected","innerHTML","__html","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","length","emptyAnswers","QcmDrag","legacyContext","context","skin","console","log","primarySkinColor","wrapper","contextTypes","childContextTypes"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {useWebContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst AnswersPropTypes = PropTypes.arrayOf(\n  PropTypes.shape({\n    onClick: PropTypes.func,\n    order: PropTypes.number,\n    selected: PropTypes.bool,\n    title: PropTypes.string,\n    help: PropTypes.string\n  })\n);\n\nconst EmptyView = ({help}) => <span className={style.emptySpan}>{help}</span>;\n\nEmptyView.propTypes = {\n  help: PropTypes.string\n};\n\nconst Choices = ({answers}) => {\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected} = answer;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        onClick={onClick}\n        key={key}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n    );\n  });\n\n  return <div className={style.choices}>{answersViews}</div>;\n};\n\nChoices.propTypes = {\n  answers: AnswersPropTypes\n};\n\nconst SelectedAnswerSections = ({answers, help, backgroundColor}) => {\n  const selectedAnswers = pipe(filter('selected'), orderBy('order', 'asc'))(answers);\n  const selectedAnswersViews = selectedAnswers.map((answer, key) => {\n    const {onClick, title} = answer;\n    return (\n      <div\n        data-selected=\"true\"\n        onClick={onClick}\n        key={key}\n        data-name=\"selectedAnswer\"\n        className={style.selected}\n        style={{\n          boxShadow: `0px 4px 16px ${getShadowBoxColorFromPrimary(backgroundColor)}`\n        }}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor\n          }}\n          className={style.background}\n        />\n        <div className={style.content}>\n          <span\n            data-name=\"answerContent\"\n            className={classnames(style.selectedAnswerText, style.innerHTML)}\n            title={title}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: title}}\n          />\n        </div>\n      </div>\n    );\n  });\n\n  if (selectedAnswersViews.length > 0) {\n    return <div className={style.selectedAnswers}>{selectedAnswersViews}</div>;\n  } else {\n    return (\n      <div className={style.emptyAnswers}>\n        <EmptyView help={help} />\n      </div>\n    );\n  }\n};\n\nSelectedAnswerSections.propTypes = {\n  answers: AnswersPropTypes,\n  help: EmptyView.propTypes.help,\n  backgroundColor: PropTypes.string\n};\n\nconst QcmDrag = ({answers, help}, legacyContext) => {\n  const context = useWebContext();\n  const skin = getOr(legacyContext.skin, 'skin', context);\n  console.log(skin);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper}>\n      <SelectedAnswerSections answers={answers} help={help} backgroundColor={primarySkinColor} />\n      <div data-name=\"qcm-drag-answers\" className={style.answers}>\n        <Choices answers={answers} />\n      </div>\n    </div>\n  );\n};\n\nQcmDrag.propTypes = {\n  answers: AnswersPropTypes,\n  help: SelectedAnswerSections.propTypes.help\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"file":"index.js"}

package/es/molecule/questions/qcm-graphic/index.js

@@ -5,17 +5,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Provider from '../../../atom/provider';
+import Provider, { useWebContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
 
-const QCMImage = (props, context) => {
+const QCMImage = (props, legacyContext) => {
   const {
     answers
   } = props;
-  const {
-    skin
-  } = context;
+  const context = useWebContext();
+
+  const skin = _getOr(legacyContext.skin, 'skin', context);
+
+  console.log(skin);
 
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
 

package/es/molecule/questions/qcm-graphic/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["React","PropTypes","classnames","Provider","getShadowBoxColorFromPrimary","style","QCMImage","props","context","answers","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, context) => {\n  const {answers} = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"names":["React","PropTypes","classnames","Provider","useWebContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","context","skin","console","log","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {useWebContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCMImage = (props, legacyContext) => {\n  const {answers} = props;\n  const context = useWebContext();\n  const skin = getOr(legacyContext.skin, 'skin', context);\n  console.log(skin);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const answersViews = answers.map((answer, key) => {\n    const {onClick, title, selected, image, ariaLabel} = answer;\n\n    return (\n      <div\n        onClick={onClick}\n        data-selected={selected}\n        data-name=\"answerGraphic\"\n        style={{\n          ...(selected && {\n            boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n          })\n        }}\n        className={selected ? style.selected : style.answer}\n        key={key}\n      >\n        <div\n          data-name=\"answerBackground\"\n          style={{\n            backgroundColor: selected ? primarySkinColor : '#F4F4F5'\n          }}\n          className={style.background}\n        />\n        <div data-name=\"answerContent\" className={style.content}>\n          <div\n            className={style.imageWrapper}\n            data-name=\"answerImage\"\n            aria-label={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div\n              title={title}\n              className={classnames(style.title, style.innerHTML)}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: title}}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div data-name=\"qcm-graphic-wrapper\" className={style.wrapper}>\n      {answersViews}\n    </div>\n  );\n};\n\nQCMImage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQCMImage.propTypes = {\n  answers: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string,\n      selected: PropTypes.bool,\n      onClick: PropTypes.func,\n      image: PropTypes.string,\n      ariaLabel: PropTypes.string\n    })\n  )\n};\n\nexport default QCMImage;\n"],"file":"index.js"}

package/es/molecule/questions/question-range/index.js

@@ -7,11 +7,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Provider from '../../../atom/provider';
+import Provider, { useWebContext } from '../../../atom/provider';
 import Range from '../../../atom/range';
 import style from './style.css';
 
-const QuestionRange = (props, context) => {
+const QuestionRange = (props, legacyContext) => {
   const {
     title,
     minLabel,
@@ -19,9 +19,11 @@ const QuestionRange = (props, context) => {
   } = props,
         rangeProps = _objectWithoutPropertiesLoose(props, ["title", "minLabel", "maxLabel"]);
 
-  const {
-    skin
-  } = context;
+  const context = useWebContext();
+
+  const skin = _getOr(legacyContext.skin, 'skin', context);
+
+  console.log(skin);
 
   const defaultColor = _getOr('#00B0FF', 'common.primary', skin);
 

package/es/molecule/questions/question-range/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/molecule/questions/question-range/index.js"],"names":["React","PropTypes","classnames","Provider","Range","style","QuestionRange","props","context","title","minLabel","maxLabel","rangeProps","skin","defaultColor","titleStyle","color","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","childContextTypes","propTypes","string"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;AACxC,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAA6CJ,KAAnD;AAAA,QAAqCK,UAArC,iCAAmDL,KAAnD;;AAEA,QAAM;AAACM,IAAAA;AAAD,MAASL,OAAf;;AACA,QAAMM,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;AAEA,QAAME,UAAU,GAAG;AACjBC,IAAAA,KAAK,EAAEF;AADU,GAAnB;AAIA,sBACE;AAAK,IAAA,SAAS,EAAET,KAAK,CAACY;AAAtB,kBACE;AACE,IAAA,KAAK,EAAEF,UADT;AAEE,IAAA,SAAS,EAAEb,UAAU,CAACG,KAAK,CAACI,KAAP,EAAcJ,KAAK,CAACa,SAApB,CAFvB,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEV;AAAT;AAJ3B,IADF,eAOE,oBAAC,KAAD,EAAWG,UAAX,CAPF,eAQE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACe;AAAtB,kBACE;AACE,IAAA,SAAS,EAAElB,UAAU,CAACG,KAAK,CAACgB,KAAP,EAAchB,KAAK,CAACa,SAApB,CADvB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAET;AAAT;AAH3B,IADF,eAME;AACE,IAAA,SAAS,EAAER,UAAU,CAACG,KAAK,CAACgB,KAAP,EAAchB,KAAK,CAACa,SAApB,CADvB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAER;AAAT;AAH3B,IANF,CARF,CADF;AAuBD,CAjCD;;AAmCAL,aAAa,CAACgB,YAAd,GAA6B;AAC3BT,EAAAA,IAAI,EAAEV,QAAQ,CAACoB,iBAAT,CAA2BV;AADN,CAA7B;AAIAP,aAAa,CAACkB,SAAd,iEACKpB,KAAK,CAACoB,SADX;AAEEf,EAAAA,KAAK,EAAER,SAAS,CAACwB,MAFnB;AAGEf,EAAAA,QAAQ,EAAET,SAAS,CAACwB,MAHtB;AAIEd,EAAAA,QAAQ,EAAEV,SAAS,CAACwB;AAJtB;AAOA,eAAenB,aAAf","sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, context) => {\n  const {title, minLabel, maxLabel, ...rangeProps} = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const titleStyle = {\n    color: defaultColor\n  };\n\n  return (\n    <div className={style.wrapper}>\n      <span\n        style={titleStyle}\n        className={classnames(style.title, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n      <Range {...rangeProps} />\n      <div className={style.labelWrapper}>\n        <span\n          className={classnames(style.label, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: minLabel}}\n        />\n        <span\n          className={classnames(style.label, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: maxLabel}}\n        />\n      </div>\n    </div>\n  );\n};\n\nQuestionRange.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQuestionRange.propTypes = {\n  ...Range.propTypes,\n  title: PropTypes.string,\n  minLabel: PropTypes.string,\n  maxLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/molecule/questions/question-range/index.js"],"names":["React","PropTypes","classnames","Provider","useWebContext","Range","style","QuestionRange","props","legacyContext","title","minLabel","maxLabel","rangeProps","context","skin","console","log","defaultColor","titleStyle","color","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","childContextTypes","propTypes","string"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,aAAlB,QAAsC,wBAAtC;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;AAC9C,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAA6CJ,KAAnD;AAAA,QAAqCK,UAArC,iCAAmDL,KAAnD;;AAEA,QAAMM,OAAO,GAAGV,aAAa,EAA7B;;AACA,QAAMW,IAAI,GAAG,OAAMN,aAAa,CAACM,IAApB,EAA0B,MAA1B,EAAkCD,OAAlC,CAAb;;AACAE,EAAAA,OAAO,CAACC,GAAR,CAAYF,IAAZ;;AACA,QAAMG,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCH,IAAnC,CAArB;;AAEA,QAAMI,UAAU,GAAG;AACjBC,IAAAA,KAAK,EAAEF;AADU,GAAnB;AAIA,sBACE;AAAK,IAAA,SAAS,EAAEZ,KAAK,CAACe;AAAtB,kBACE;AACE,IAAA,KAAK,EAAEF,UADT;AAEE,IAAA,SAAS,EAAEjB,UAAU,CAACI,KAAK,CAACI,KAAP,EAAcJ,KAAK,CAACgB,SAApB,CAFvB,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEb;AAAT;AAJ3B,IADF,eAOE,oBAAC,KAAD,EAAWG,UAAX,CAPF,eAQE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACkB;AAAtB,kBACE;AACE,IAAA,SAAS,EAAEtB,UAAU,CAACI,KAAK,CAACmB,KAAP,EAAcnB,KAAK,CAACgB,SAApB,CADvB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEZ;AAAT;AAH3B,IADF,eAME;AACE,IAAA,SAAS,EAAET,UAAU,CAACI,KAAK,CAACmB,KAAP,EAAcnB,KAAK,CAACgB,SAApB,CADvB,CAEE;AAFF;AAGE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEX;AAAT;AAH3B,IANF,CARF,CADF;AAuBD,CAnCD;;AAqCAL,aAAa,CAACmB,YAAd,GAA6B;AAC3BX,EAAAA,IAAI,EAAEZ,QAAQ,CAACwB,iBAAT,CAA2BZ;AADN,CAA7B;AAIAR,aAAa,CAACqB,SAAd,iEACKvB,KAAK,CAACuB,SADX;AAEElB,EAAAA,KAAK,EAAET,SAAS,CAAC4B,MAFnB;AAGElB,EAAAA,QAAQ,EAAEV,SAAS,CAAC4B,MAHtB;AAIEjB,EAAAA,QAAQ,EAAEX,SAAS,CAAC4B;AAJtB;AAOA,eAAetB,aAAf","sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider, {useWebContext} from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, legacyContext) => {\n  const {title, minLabel, maxLabel, ...rangeProps} = props;\n\n  const context = useWebContext();\n  const skin = getOr(legacyContext.skin, 'skin', context);\n  console.log(skin);\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const titleStyle = {\n    color: defaultColor\n  };\n\n  return (\n    <div className={style.wrapper}>\n      <span\n        style={titleStyle}\n        className={classnames(style.title, style.innerHTML)}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: title}}\n      />\n      <Range {...rangeProps} />\n      <div className={style.labelWrapper}>\n        <span\n          className={classnames(style.label, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: minLabel}}\n        />\n        <span\n          className={classnames(style.label, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: maxLabel}}\n        />\n      </div>\n    </div>\n  );\n};\n\nQuestionRange.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nQuestionRange.propTypes = {\n  ...Range.propTypes,\n  title: PropTypes.string,\n  minLabel: PropTypes.string,\n  maxLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"file":"index.js"}

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

@@ -8,8 +8,8 @@ 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 { useWebContext } from '../../atom/provider';
 import propTypes from './prop-types';
 import style from './style.css';
 
@@ -140,13 +140,14 @@ QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   questionOrigin: PropTypes.string
 } : {};
 
-const Slide = (props, context) => {
+const ReviewSlide = props => {
   const {
     slide,
     validateButton,
     correctionPopinProps,
     slideIndex = '0'
   } = props;
+  const context = useWebContext();
   const {
     skin
   } = context;
@@ -186,9 +187,6 @@ const Slide = (props, context) => {
   })]);
 };
 
-Slide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
-Slide.contextTypes = {
-  skin: Provider.childContextTypes.skin
-};
-export default Slide;
+ReviewSlide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default ReviewSlide;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["React","useMemo","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","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"}
+{"version":3,"sources":["../../../src/organism/review-slide/index.js"],"names":["React","useMemo","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","useWebContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","_correctionPopinProps","onClick","console","log","type","resultLabel","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","answerProps","model","answers","choices","slideContentContainer","question","help","answerContainer","shape","slide","ReviewSlide","context","skin","loading","loadingAriaLabel","parentContentTitle","loader"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,MAAP,MAAmB,uBAAnB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,qBAAP,MAAkC,wCAAlC;AACA,SAAQC,aAAR,QAA4B,qBAA5B;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,eAAe,GAAG,CAAC;AACvBC,EAAAA,oBADuB;AAEvBC,EAAAA,UAFuB;AAGvBC,EAAAA,mBAHuB;AAIvBC,EAAAA;AAJuB,CAAD,KAKlB;AACJ,MAAI,CAACD,mBAAL,EAA0B,OAAO,IAAP;AAE1B,QAAME,GAAG,GAAGb,KAAK,CAAC,EAAD,EAAK,KAAL,EAAYS,oBAAZ,CAAjB;AACA,QAAMK,WAAW,GAAGd,KAAK,CAAC;AAACe,IAAAA,KAAK,EAAE,EAAR;AAAYC,IAAAA,OAAO,EAAE;AAArB,GAAD,EAA2B,aAA3B,EAA0CP,oBAA1C,CAAzB;AACA,QAAMQ,IAAI,GAAGlB,GAAG,CAAC,MAAD,EAASU,oBAAT,CAAhB;AAEA,QAAMS,qBAAqB,GAAG;AAC5BD,IAAAA,IAAI,EAAE;AACJE,MAAAA,OAAO,EAAE,MAAM;AACb;AACAC,QAAAA,OAAO,CAACC,GAAR,CAAY,YAAZ;AACD,OAJG;AAKJN,MAAAA,KAAK,EAAEE,IAAI,IAAIA,IAAI,CAACF,KALhB;AAMJ,mBAAc,wBAAuBL,UAAW,EAN5C;AAOJ,oBAAcO,IAAI,IAAIA,IAAI,CAAC,YAAD;AAPtB,KADsB;AAU5BJ,IAAAA,GAV4B;AAW5BC,IAAAA,WAX4B;AAY5BQ,IAAAA,IAAI,EAAEb,oBAAoB,CAACa,IAZC;AAa5BC,IAAAA,WAAW,EAAEd,oBAAoB,CAACc;AAbN,GAA9B;AAgBA,sBACE;AACE,IAAA,SAAS,EAAEzB,UAAU,CACnBS,KAAK,CAACiB,sBADa,EAEnBZ,sBAAsB,GAAGL,KAAK,CAACkB,cAAT,GAA0B,IAF7B;AADvB,kBAME,oBAAC,qBAAD,EAA2BP,qBAA3B,CANF,CADF;AAUD,CAtCD;;AAwCAV,eAAe,CAACF,SAAhB,2CAA4B;AAC1BI,EAAAA,UAAU,EAAEb,SAAS,CAAC6B,MADI;AAE1Bf,EAAAA,mBAAmB,EAAEd,SAAS,CAAC8B,IAFL;AAG1Bf,EAAAA,sBAAsB,EAAEf,SAAS,CAAC8B,IAHR;AAI1BlB,EAAAA,oBAAoB,EAAEH,SAAS,CAACG;AAJN,CAA5B;;AAOA,MAAMmB,cAAc,GAAG,CAAC;AAAClB,EAAAA,UAAD;AAAamB,EAAAA,cAAb;AAA6BC,EAAAA;AAA7B,CAAD,KAAoD;AACzE,QAAM;AAACf,IAAAA,KAAD;AAAQI,IAAAA,OAAR;AAAiBY,IAAAA;AAAjB,MAA6BF,cAAnC;AACA,QAAMG,mBAAmB,GAAG;AAC1BV,IAAAA,IAAI,EAAE,SADoB;AAE1BP,IAAAA,KAF0B;AAG1B,kBAAcA,KAHY;AAI1B,iBAAc,yBAAwBL,UAAW,EAJvB;AAK1BS,IAAAA,OAL0B;AAM1BY,IAAAA,QAN0B;AAO1BE,IAAAA,SAAS,EAAE1B,KAAK,CAACsB,cAPS;AAQ1BK,IAAAA,WAAW,EAAE;AACXC,MAAAA,eAAe,EAAEL;AADN;AAGb;;;;;;;;;;;;;AAX0B,GAA5B;AA0BA,sBACE;AAAK,IAAA,GAAG,EAAC,gBAAT;AAA0B,IAAA,SAAS,EAAEvB,KAAK,CAAC6B;AAA3C,kBACE,oBAAC,UAAD,EAAgBJ,mBAAhB,CADF,CADF;AAKD,CAjCD;;AAmCAJ,cAAc,CAACtB,SAAf,2CAA2B;AACzBI,EAAAA,UAAU,EAAEb,SAAS,CAAC6B,MADG;AAEzBG,EAAAA,cAAc,EAAEvB,SAAS,CAACuB,cAFD;AAGzBC,EAAAA,gBAAgB,EAAEjC,SAAS,CAAC6B;AAHH,CAA3B;;AAMA,MAAMW,iBAAiB,GAAGC,KAAK,IAAI;AACjC,QAAM;AAACC,IAAAA,QAAD;AAAWC,IAAAA,YAAX;AAAyBC,IAAAA;AAAzB,MAA2CH,KAAjD;AACA,MAAI,CAACC,QAAD,IAAa,CAACC,YAAlB,EAAgC,OAAO,IAAP;AAEhC,QAAME,WAAW,GAAG3C,GAAG,CAAC,CAAC,OAAD,EAAU,SAAV,CAAD,EAAuBwC,QAAvB,CAAH;AAChB;AADgB,wBAEXA,QAFW;AAGdI,IAAAA,KAAK,wBACAJ,QAAQ,CAACI,KADT;AAEHC,MAAAA,OAAO,EAAEL,QAAQ,CAACI,KAAT,CAAeE;AAFrB;AAHS,OAQhBN,QARJ;AAUA,sBACE;AAAK,IAAA,GAAG,EAAC,mBAAT;AAA6B,IAAA,SAAS,EAAEhC,KAAK,CAACuC;AAA9C,kBACE;AAAK,IAAA,GAAG,EAAC,aAAT;AAAuB,IAAA,SAAS,EAAEvC,KAAK,CAACkC;AAAxC,KACGA,cADH,CADF,eAIE;AAAK,IAAA,GAAG,EAAC,OAAT;AAAiB,IAAA,SAAS,EAAElC,KAAK,CAACwC;AAAlC,KACGP,YADH,CAJF,eAOE;AAAK,IAAA,GAAG,EAAC,MAAT;AAAgB,IAAA,SAAS,EAAEjC,KAAK,CAACyC;AAAjC,KACGjD,GAAG,CAAC,MAAD,EAASwC,QAAT,CADN,CAPF,eAUE;AAAK,IAAA,GAAG,EAAC,kBAAT;AAA4B,IAAA,SAAS,EAAEhC,KAAK,CAAC0C;AAA7C,kBACE,oBAAC,MAAD,eAAYP,WAAZ;AAAyB,IAAA,GAAG,EAAC;AAA7B,KADF,CAVF,CADF;AAgBD,CA9BD;;AAgCAL,iBAAiB,CAAC/B,SAAlB,2CAA8B;AAC5BiC,EAAAA,QAAQ,EAAE1C,SAAS,CAACqD,KAAV,CAAgB5C,SAAS,CAAC6C,KAAV,CAAgBZ,QAAhC,CADkB;AAE5BC,EAAAA,YAAY,EAAE3C,SAAS,CAAC6B,MAFI;AAG5Be,EAAAA,cAAc,EAAE5C,SAAS,CAAC6B;AAHE,CAA9B;;AAMA,MAAM0B,WAAW,GAAGd,KAAK,IAAI;AAC3B,QAAM;AAACa,IAAAA,KAAD;AAAQtB,IAAAA,cAAR;AAAwBpB,IAAAA,oBAAxB;AAA8CC,IAAAA,UAAU,GAAG;AAA3D,MAAkE4B,KAAxE;AAEA,QAAMe,OAAO,GAAGhD,aAAa,EAA7B;AACA,QAAM;AAACiD,IAAAA;AAAD,MAASD,OAAf;AACA,QAAMvB,gBAAgB,GAAGlC,OAAO,CAAC,MAAMI,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BsD,IAA9B,CAAZ,EAAiD,CAACA,IAAD,CAAjD,CAAhC;AACA,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,gBAFI;AAGJC,IAAAA,kBAHI;AAIJjB,IAAAA,YAJI;AAKJD,IAAAA,QALI;AAMJ5B,IAAAA,mBANI;AAOJC,IAAAA;AAPI,MAQFuC,KARJ;AAUA,sBACE;AAAK,iBAAY,iBAAjB;AAAmC,IAAA,SAAS,EAAE5C,KAAK,CAAC4C;AAApD,KACGI,OAAO,gBACN,oBAAC,MAAD;AAAQ,IAAA,SAAS,EAAEhD,KAAK,CAACmD,MAAzB;AAAiC,IAAA,KAAK,EAAC,SAAvC;AAAiD,kBAAYF;AAA7D,IADM,GAGN,cACE,oBAAC,iBAAD;AACE,IAAA,cAAc,EAAEC,kBADlB;AAEE,IAAA,YAAY,EAAEjB,YAFhB;AAGE,IAAA,QAAQ,EAAED,QAHZ;AAIE,IAAA,GAAG,EAAC;AAJN,IADF,eAOE,oBAAC,cAAD;AACE,IAAA,UAAU,EAAE7B,UADd;AAEE,IAAA,cAAc,EAAEmB,cAFlB;AAGE,IAAA,gBAAgB,EAAEC,gBAHpB;AAIE,IAAA,GAAG,EAAC;AAJN,IAPF,eAaE,oBAAC,eAAD;AACE,IAAA,oBAAoB,EAAErB,oBADxB;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,mBAAmB,EAAEC,mBAHvB;AAIE,IAAA,sBAAsB,EAAEC,sBAJ1B;AAKE,IAAA,GAAG,EAAC;AALN,IAbF,CAJJ,CADF;AA6BD,CA7CD;;AA+CAwC,WAAW,CAAC9C,SAAZ,2CAAwBA,SAAxB;AAEA,eAAe8C,WAAf","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {useWebContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick: () => {\n        // eslint-disable-next-line no-console\n        console.log('Next Slide');\n      },\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n    /*\n      slide validation action, this will trigger the correction popin\n      (with the useEffect that fires the dispatchers, if there is a nextContent content,\n      it will be loaded here) but will not trigger any animations unless the endReview\n      signal is received (all slide will disappear, also fired in a useEffect),\n\n      if it is the last slide and the content needs to be different, then that update will\n      be handled on the next slide logic but the content will be carried from here.\n    onClick: async () => {\n      // endReview based on nextContent ref exit node values: 'successExitNode' : 'failExitNode'\n      await validateSlide();\n    },\n    */\n  };\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin} = props;\n  if (!answerUI || !questionText) return null;\n\n  const answerProps = get(['model', 'choices'], answerUI)\n    ? /* istanbul ignore next */ {\n        ...answerUI,\n        model: {\n          ...answerUI.model,\n          answers: answerUI.model.choices\n        }\n      }\n    : answerUI;\n\n  return (\n    <div key=\"content-container\" className={style.slideContentContainer}>\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div key=\"title\" className={style.question}>\n        {questionText}\n      </div>\n      <div key=\"help\" className={style.help}>\n        {get('help', answerUI)}\n      </div>\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerProps} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string\n};\n\nconst ReviewSlide = props => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const context = useWebContext();\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\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"file":"index.js"}

package/es/template/app-review/template-context.js

@@ -1,16 +1,14 @@
 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, { createContext, useContext } from 'react';
 import defaultTheme from '../../variables/theme.native';
-// -----------------------------------------------------------------------------
 const Context = createContext({
   theme: defaultTheme,
   translations: {},
   display: {
     statusBarHeight: 42
   }
-}); // -----------------------------------------------------------------------------
+});
 
 const useTemplateContext = () => {
   const context = useContext(Context);
@@ -20,8 +18,7 @@ const useTemplateContext = () => {
   }
 
   return context;
-}; // -----------------------------------------------------------------------------
-
+};
 
 const TemplateContext = ({
   values,
@@ -30,8 +27,7 @@ const TemplateContext = ({
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: _extends({}, values)
   }, children);
-}; // -----------------------------------------------------------------------------
-
+};
 
 export { TemplateContext, useTemplateContext };
 //# sourceMappingURL=template-context.js.map

package/es/template/app-review/template-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/template/app-review/template-context.tsx"],"names":["React","createContext","useContext","defaultTheme","Context","theme","translations","display","statusBarHeight","useTemplateContext","context","Error","TemplateContext","values","children"],"mappings":";;AAAA;AAEA,OAAOA,KAAP,IAAeC,aAAf,EAA8BC,UAA9B,QAA+C,OAA/C;AAGA,OAAOC,YAAP,MAAkC,8BAAlC;AAgBA;AAEA,MAAMC,OAAO,GAAGH,aAAa,CAAC;AAC5BI,EAAAA,KAAK,EAAEF,YADqB;AAE5BG,EAAAA,YAAY,EAAE,EAFc;AAG5BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAE;AADV;AAHmB,CAAD,CAA7B,C,CAQA;;AAEA,MAAMC,kBAAkB,GAAG,MAA6B;AACtD,QAAMC,OAAO,GAAGR,UAAU,CAACE,OAAD,CAA1B;;AAEA,MAAI,CAACM,OAAL,EAAc;AACZ,UAAM,IAAIC,KAAJ,CACH,yFADG,CAAN;AAGD;;AAED,SAAOD,OAAP;AACD,CAVD,C,CAYA;;;AAEA,MAAME,eAAe,GAAG,CAAC;AAACC,EAAAA,MAAD;AAASC,EAAAA;AAAT,CAAD,KAA+B;AACrD,sBAAO,oBAAC,OAAD,CAAS,QAAT;AAAkB,IAAA,KAAK,eAAMD,MAAN;AAAvB,KAAuCC,QAAvC,CAAP;AACD,CAFD,C,CAIA;;;AAEA,SAAQF,eAAR,EAAyBH,kBAAzB","sourcesContent":["// -----------------------------------------------------------------------------\n\nimport React, {createContext, useContext} from 'react';\nimport {Translations} from '../../types/translations';\nimport {Analytics} from '../../variables/analytics';\nimport defaultTheme, {Theme} from '../../variables/theme.native';\nimport {Vibration} from '../../variables/vibration';\n\nexport type TemplateContextValues = {\n  analytics?: Analytics;\n  brandTheme?: any;\n  theme: Theme;\n  translations: Translations;\n  vibration?: Vibration;\n  display: {\n    statusBarHeight: number;\n  };\n};\n\ntype Props = {values: TemplateContextValues; children: any};\n\n// -----------------------------------------------------------------------------\n\nconst Context = createContext({\n  theme: defaultTheme,\n  translations: {},\n  display: {\n    statusBarHeight: 42\n  }\n});\n\n// -----------------------------------------------------------------------------\n\nconst useTemplateContext = (): TemplateContextValues => {\n  const context = useContext(Context);\n\n  if (!context) {\n    throw new Error(\n      `❌ [TemplateContext] useTemplateContext must be used within a provider <TemplateContext>`\n    );\n  }\n\n  return context;\n};\n\n// -----------------------------------------------------------------------------\n\nconst TemplateContext = ({values, children}: Props) => {\n  return <Context.Provider value={{...values}}>{children}</Context.Provider>;\n};\n\n// -----------------------------------------------------------------------------\n\nexport {TemplateContext, useTemplateContext};\n"],"file":"template-context.js"}
+{"version":3,"sources":["../../../src/template/app-review/template-context.tsx"],"names":["React","createContext","useContext","defaultTheme","Context","theme","translations","display","statusBarHeight","useTemplateContext","context","Error","TemplateContext","values","children"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,aAAf,EAA8BC,UAA9B,QAA+C,OAA/C;AAGA,OAAOC,YAAP,MAAkC,8BAAlC;AAgBA,MAAMC,OAAO,GAAGH,aAAa,CAAC;AAC5BI,EAAAA,KAAK,EAAEF,YADqB;AAE5BG,EAAAA,YAAY,EAAE,EAFc;AAG5BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,eAAe,EAAE;AADV;AAHmB,CAAD,CAA7B;;AAQA,MAAMC,kBAAkB,GAAG,MAA6B;AACtD,QAAMC,OAAO,GAAGR,UAAU,CAACE,OAAD,CAA1B;;AAEA,MAAI,CAACM,OAAL,EAAc;AACZ,UAAM,IAAIC,KAAJ,CACH,yFADG,CAAN;AAGD;;AAED,SAAOD,OAAP;AACD,CAVD;;AAYA,MAAME,eAAe,GAAG,CAAC;AAACC,EAAAA,MAAD;AAASC,EAAAA;AAAT,CAAD,KAA+B;AACrD,sBAAO,oBAAC,OAAD,CAAS,QAAT;AAAkB,IAAA,KAAK,eAAMD,MAAN;AAAvB,KAAuCC,QAAvC,CAAP;AACD,CAFD;;AAIA,SAAQF,eAAR,EAAyBH,kBAAzB","sourcesContent":["import React, {createContext, useContext} from 'react';\nimport {Translations} from '../../types/translations';\nimport {Analytics} from '../../variables/analytics';\nimport defaultTheme, {Theme} from '../../variables/theme.native';\nimport {Vibration} from '../../variables/vibration';\n\nexport type TemplateContextValues = {\n  analytics?: Analytics;\n  brandTheme?: any;\n  theme: Theme;\n  translations: Translations;\n  vibration?: Vibration;\n  display: {\n    statusBarHeight: number;\n  };\n};\n\ntype Props = {values: TemplateContextValues; children: any};\n\nconst Context = createContext({\n  theme: defaultTheme,\n  translations: {},\n  display: {\n    statusBarHeight: 42\n  }\n});\n\nconst useTemplateContext = (): TemplateContextValues => {\n  const context = useContext(Context);\n\n  if (!context) {\n    throw new Error(\n      `❌ [TemplateContext] useTemplateContext must be used within a provider <TemplateContext>`\n    );\n  }\n\n  return context;\n};\n\nconst TemplateContext = ({values, children}: Props) => {\n  return <Context.Provider value={{...values}}>{children}</Context.Provider>;\n};\n\nexport {TemplateContext, useTemplateContext};\n"],"file":"template-context.js"}