@coorpacademy/components 11.33.0 → 11.33.2-alpha.0

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

@@ -8,6 +8,7 @@ import FreeText from '../../free-text/index.native';
 import { useTemplateContext } from '../../../../template/app-review/template-context';
 import parseTemplateString from '../../../../util/parse-template-string';
 import { BOX_STYLE } from '../../../../variables/shadow';
+
 const createStyleSheet = theme => ({
   container: {
     width: '100%',
@@ -41,6 +42,7 @@ const createStyleSheet = theme => ({
     textAlign: 'center'
   }
 });
+
 const Item = props => {
   const {
     part,
@@ -60,18 +62,23 @@ const Item = props => {
   const inputNames = choices.map(choice => choice.name);
   const id = `question-part-${part.value}`;
   const isFocused = focusedSelectId === id;
+
   if (part.type === 'answerField' && inputNames.includes(part.value)) {
     const choiceIndex = choices.findIndex(choice => choice.name === part.value);
     const choice = choices[choiceIndex];
     const {
       value
     } = choice;
+
     if (!choice || !choice.type || !choice.name) {
       return null;
     }
+
     const disabledSuffix = isDisabled ? '-disabled' : '';
     const selectedSuffix = value ? '-selected' : '';
+
     const handleInputChange = _item => _value => onInputChange(_item, _value);
+
     if (choice.type === 'text') {
       return /*#__PURE__*/React.createElement(View, {
         style: styles.spaced,
@@ -85,8 +92,10 @@ const Item = props => {
         questionType: "template"
       }));
     }
+
     const selectInputStyle = [styles.selectInput];
     const selectTextStyle = [styles.selectText];
+
     if (choice.type === 'select') {
       return /*#__PURE__*/React.createElement(View, {
         style: styles.spaced,
@@ -108,6 +117,7 @@ const Item = props => {
       }));
     }
   }
+
   return /*#__PURE__*/React.createElement(Html, {
     key: id,
     fontSize: theme.fontSize.regular,
@@ -115,6 +125,7 @@ const Item = props => {
     style: styles.htmlText
   }, part.value === ' ' ? part.value : trim(part.value || ''));
 };
+
 const QuestionTemplate = props => {
   const {
     template,
@@ -132,11 +143,14 @@ const QuestionTemplate = props => {
   const [styleSheet, setStylesheet] = useState(null);
   useEffect(() => {
     const _stylesheet = createStyleSheet(theme);
+
     setStylesheet(_stylesheet);
   }, [theme]);
+
   if (!template || !styleSheet) {
     return null;
   }
+
   const parts = parseTemplateString(template);
   return /*#__PURE__*/React.createElement(View, {
     style: styleSheet.container,
@@ -159,5 +173,6 @@ const QuestionTemplate = props => {
     type: "micro"
   }))));
 };
+
 export default QuestionTemplate;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["React","useEffect","useState","View","trim","Html","Select","Space","FreeText","useTemplateContext","parseTemplateString","BOX_STYLE","createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","translations","inputNames","map","choice","name","id","value","isFocused","type","includes","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","createElement","style","testID","key","onChange","questionType","selectInputStyle","selectTextStyle","values","items","placeholder","selectAnAnswer","onBlur","onFocus","textStyle","analyticsID","QuestionTemplate","template","styleSheet","setStylesheet","_stylesheet","parts"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${part.value}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {part.value === ' ' ? part.value : trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = 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 (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map(part => (\n        <View key={`question-part-${part.value}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":["React","useEffect","useState","View","trim","Html","Select","Space","FreeText","useTemplateContext","parseTemplateString","BOX_STYLE","createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","translations","inputNames","map","choice","name","id","value","isFocused","type","includes","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","selectTextStyle","items","selectAnAnswer","QuestionTemplate","template","styleSheet","setStylesheet","_stylesheet","parts"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${part.value}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {part.value === ' ' ? part.value : trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = 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 (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map(part => (\n        <View key={`question-part-${part.value}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,SAAf,EAA0BC,QAA1B,QAAyC,OAAzC;AACA,SAAmBC,IAAnB,QAAyC,cAAzC;AAEA,OAAOC,IAAP,MAAiB,gBAAjB;AAEA,OAAOC,IAAP,MAAiB,oCAAjB;AACA,OAAOC,MAAP,MAAmB,4CAAnB;AACA,OAAOC,KAAP,MAAkB,qCAAlB;AAEA,OAAOC,QAAP,MAAqB,8BAArB;AACA,SAIEC,kBAJF,QAKO,kDALP;AAOA,OAAOC,mBAAP,MAAgC,wCAAhC;AACA,SAAQC,SAAR,QAAwB,8BAAxB;;AAUA,MAAMC,gBAAgB,GAAIC,KAAD,KAAmC;EAC1DC,SAAS,EAAE;IACTC,KAAK,EAAE,MADE;IAETC,aAAa,EAAE,KAFN;IAGTC,QAAQ,EAAE,MAHD;IAITC,cAAc,EAAE,QAJP;IAKTC,UAAU,EAAE;EALH,CAD+C;EAQ1DC,MAAM,EAAE;IACNC,eAAe,EAAER,KAAK,CAACS,OAAN,CAAcC;EADzB,CARkD;EAW1DC,QAAQ,EAAE;IACRC,KAAK,EAAEZ,KAAK,CAACa,MAAN,CAAaC,KADZ;IAERC,UAAU,EAAEf,KAAK,CAACe,UAAN,CAAiBC,IAFrB;IAGRC,UAAU,EAAE;EAHJ,CAXgD;EAgB1D;EACAC,WAAW,EAAE;IACXC,OAAO,EAAEnB,KAAK,CAACS,OAAN,CAAcC,IADZ;IAEXU,YAAY,EAAEpB,KAAK,CAACqB,MAAN,CAAaC,OAFhB;IAGXC,QAAQ,EAAE,GAHC;IAIXC,gBAAgB,EAAE,EAJP;IAKXhB,eAAe,EAAE,EALN;IAMX,GAAGV,SANQ;IAOX2B,eAAe,EAAEzB,KAAK,CAACa,MAAN,CAAaa;EAPnB,CAjB6C;EA0B1DC,UAAU,EAAE;IACVf,KAAK,EAAEZ,KAAK,CAACa,MAAN,CAAae,IAAb,CAAkBC,MADf;IAEVd,UAAU,EAAEf,KAAK,CAACe,UAAN,CAAiBC,IAFnB;IAGVc,QAAQ,EAAE9B,KAAK,CAAC8B,QAAN,CAAeR,OAHf;IAIVS,SAAS,EAAE;EAJD;AA1B8C,CAAnC,CAAzB;;AAkDA,MAAMC,IAAI,GAAIC,KAAD,IAAsB;EACjC,MAAM;IACJC,IADI;IAEJC,UAAU,GAAG,KAFT;IAGJC,eAHI;IAIJC,OAJI;IAKJC,aALI;IAMJC,UANI;IAOJC,WAPI;IAQJC;EARI,IASFR,KATJ;EAWA,MAAMS,eAAe,GAAG9C,kBAAkB,EAA1C;EACA,MAAM;IAACI,KAAD;IAAQ2C;EAAR,IAAwBD,eAA9B;EAEA,MAAME,UAAU,GAAGP,OAAO,CAACQ,GAAR,CAAYC,MAAM,IAAIA,MAAM,CAACC,IAA7B,CAAnB;EACA,MAAMC,EAAE,GAAI,iBAAgBd,IAAI,CAACe,KAAM,EAAvC;EACA,MAAMC,SAAS,GAAGd,eAAe,KAAKY,EAAtC;;EAEA,IAAId,IAAI,CAACiB,IAAL,KAAc,aAAd,IAA+BP,UAAU,CAACQ,QAAX,CAAoBlB,IAAI,CAACe,KAAzB,CAAnC,EAAoE;IAClE,MAAMI,WAAW,GAAGhB,OAAO,CAACiB,SAAR,CAAkBR,MAAM,IAAIA,MAAM,CAACC,IAAP,KAAgBb,IAAI,CAACe,KAAjD,CAApB;IACA,MAAMH,MAAM,GAAGT,OAAO,CAACgB,WAAD,CAAtB;IACA,MAAM;MAACJ;IAAD,IAAUH,MAAhB;;IAEA,IAAI,CAACA,MAAD,IAAW,CAACA,MAAM,CAACK,IAAnB,IAA2B,CAACL,MAAM,CAACC,IAAvC,EAA6C;MAC3C,OAAO,IAAP;IACD;;IAED,MAAMQ,cAAc,GAAGpB,UAAU,GAAG,WAAH,GAAiB,EAAlD;IACA,MAAMqB,cAAc,GAAGP,KAAK,GAAG,WAAH,GAAiB,EAA7C;;IAEA,MAAMQ,iBAAiB,GACpBC,KAAD,IAAwDC,MAAD,IACrDrB,aAAa,CAACoB,KAAD,EAAQC,MAAR,CAFjB;;IAIA,IAAIb,MAAM,CAACK,IAAP,KAAgB,MAApB,EAA4B;MAC1B,oBACE,oBAAC,IAAD;QAAM,KAAK,EAAEV,MAAM,CAAClC,MAApB;QAA4B,MAAM,EAAEyC;MAApC,gBACE,oBAAC,QAAD;QACE,GAAG,EAAEA,EADP;QAEE,UAAU,EAAEb,UAFd;QAGE,QAAQ,EAAEsB,iBAAiB,CAACX,MAAD,CAH7B;QAIE,KAAK,EAAEG,KAJT;QAKE,MAAM,EAAG,GAAED,EAAG,QAAOQ,cAAe,GAAED,cAAe,EALvD;QAME,YAAY,EAAC;MANf,EADF,CADF;IAYD;;IAED,MAAMK,gBAA6B,GAAG,CAACnB,MAAM,CAACvB,WAAR,CAAtC;IACA,MAAM2C,eAA4B,GAAG,CAACpB,MAAM,CAACd,UAAR,CAArC;;IAEA,IAAImB,MAAM,CAACK,IAAP,KAAgB,QAApB,EAA8B;MAC5B,oBACE,oBAAC,IAAD;QAAM,KAAK,EAAEV,MAAM,CAAClC,MAApB;QAA4B,MAAM,EAAEyC;MAApC,gBACE,oBAAC,MAAD;QACE,UAAU,EAAEb,UADd;QAEE,YAAY,EAAC,UAFf;QAGE,MAAM,EAAEW,MAAM,CAACgB,KAHjB;QAIE,KAAK,EAAEb,KAJT;QAKE,WAAW,EAAEN,YAAY,CAACoB,cAL5B;QAME,SAAS,EAAEb,SANb;QAOE,MAAM,EAAEX,UAPV;QAQE,OAAO,EAAEC,WAAW,CAACQ,EAAD,CARtB;QASE,QAAQ,EAAES,iBAAiB,CAACX,MAAD,CAT7B;QAUE,SAAS,EAAEe,eAVb;QAWE,KAAK,EAAED,gBAXT;QAYE,WAAW,EAAG,GAAEZ,EAAG,UAASQ,cAAe,GAAED,cAAe,EAZ9D;QAaE,MAAM,EAAG,GAAEP,EAAG,UAASQ,cAAe,GAAED,cAAe;MAbzD,EADF,CADF;IAmBD;EACF;;EAED,oBACE,oBAAC,IAAD;IAAM,GAAG,EAAEP,EAAX;IAAe,QAAQ,EAAEhD,KAAK,CAAC8B,QAAN,CAAeR,OAAxC;IAAiD,MAAM,EAAE0B,EAAzD;IAA6D,KAAK,EAAEP,MAAM,CAAC9B;EAA3E,GACGuB,IAAI,CAACe,KAAL,KAAe,GAAf,GAAqBf,IAAI,CAACe,KAA1B,GAAkC1D,IAAI,CAAC2C,IAAI,CAACe,KAAL,IAAc,EAAf,CADzC,CADF;AAKD,CAjFD;;AA6FA,MAAMe,gBAAgB,GAAI/B,KAAD,IAAkB;EACzC,MAAM;IACJgC,QADI;IAEJ3B,aAFI;IAGJD,OAHI;IAIJE,UAJI;IAKJC,WALI;IAMJJ,eANI;IAOJD,UAAU,GAAG;EAPT,IAQFF,KARJ;EAUA,MAAMS,eAAe,GAAG9C,kBAAkB,EAA1C;EACA,MAAM;IAACI;EAAD,IAAU0C,eAAhB;EAEA,MAAM,CAACwB,UAAD,EAAaC,aAAb,IAA8B9E,QAAQ,CAAwB,IAAxB,CAA5C;EAEAD,SAAS,CAAC,MAAM;IACd,MAAMgF,WAAW,GAAGrE,gBAAgB,CAACC,KAAD,CAApC;;IACAmE,aAAa,CAACC,WAAD,CAAb;EACD,CAHQ,EAGN,CAACpE,KAAD,CAHM,CAAT;;EAKA,IAAI,CAACiE,QAAD,IAAa,CAACC,UAAlB,EAA8B;IAC5B,OAAO,IAAP;EACD;;EAED,MAAMG,KAAqB,GAAGxE,mBAAmB,CAACoE,QAAD,CAAjD;EAEA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEC,UAAU,CAACjE,SAAxB;IAAmC,MAAM,EAAC;EAA1C,GACGoE,KAAK,CAACxB,GAAN,CAAUX,IAAI,iBACb,oBAAC,IAAD;IAAM,GAAG,EAAG,iBAAgBA,IAAI,CAACe,KAAM,EAAvC;IAA0C,KAAK,EAAE;MAAC9C,aAAa,EAAE;IAAhB;EAAjD,gBACE,oBAAC,IAAD;IACE,IAAI,EAAE+B,IADR;IAEE,OAAO,EAAEG,OAFX;IAGE,eAAe,EAAED,eAHnB;IAIE,UAAU,EAAED,UAJd;IAKE,UAAU,EAAEI,UALd;IAME,WAAW,EAAEC,WANf;IAOE,aAAa,EAAEF,aAPjB;IAQE,MAAM,EAAE4B;EARV,EADF,eAWE,oBAAC,KAAD;IAAO,IAAI,EAAC;EAAZ,EAXF,CADD,CADH,CADF;AAmBD,CA9CD;;AAgDA,eAAeF,gBAAf"}

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

@@ -6,6 +6,7 @@ import maxBy from 'lodash/fp/maxBy';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
+
 const QCM = (props, legacyContext) => {
   const {
     answers,
@@ -31,8 +32,7 @@ const QCM = (props, legacyContext) => {
       title: ariaLabel || title,
       className: classnames(longAnswerClass, style.innerHTML, selectedAnswerClass),
       onClick: onClick,
-      style: {
-        ...(selected && {
+      style: { ...(selected && {
           boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`
         })
       },
@@ -41,13 +41,14 @@ const QCM = (props, legacyContext) => {
     }, /*#__PURE__*/React.createElement("div", {
       "data-name": "answer-background",
       style: {
-        backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */
+        backgroundColor: selected ? primarySkinColor : '#F4F4F5'
+        /* cm_grey_75 */
+
       },
       className: style.background
     }), /*#__PURE__*/React.createElement("span", {
       "data-name": "answer-label",
-      className: style.answerText
-      // eslint-disable-next-line react/no-danger
+      className: style.answerText // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
@@ -62,6 +63,7 @@ const QCM = (props, legacyContext) => {
     title: groupAriaLabel
   }, answersViews);
 };
+
 QCM.contextTypes = {
   skin: Provider.childContextTypes.skin
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","createElement","className","innerHTML","boxShadow","backgroundColor","background","answerText","dangerouslySetInnerHTML","__html","wrapper","role","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"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, {GetSkinFromContext} 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, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\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            title={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\n      data-name=\"qcm\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\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  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","groupAriaLabel","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"],"sources":["../../../../src/molecule/questions/qcm/index.js"],"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, {GetSkinFromContext} 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, groupAriaLabel} = props;\n  const longestAnswer = maxBy(({title}) => title.length, answers);\n  const skin = GetSkinFromContext(legacyContext);\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            title={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\n      data-name=\"qcm\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\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  groupAriaLabel: PropTypes.string\n};\n\nexport default QCM;\n"],"mappings":"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"}

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

@@ -15,14 +15,17 @@ const AnswersPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.array
   title: PropTypes.string,
   help: PropTypes.string
 })) : {};
+
 const EmptyView = ({
   help
 }) => /*#__PURE__*/React.createElement("span", {
   className: style.emptySpan
 }, help);
+
 EmptyView.propTypes = process.env.NODE_ENV !== "production" ? {
   help: PropTypes.string
 } : {};
+
 const Choices = ({
   answers
 }) => {
@@ -55,15 +58,18 @@ const Choices = ({
     className: style.choices
   }, answersViews);
 };
+
 Choices.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes
 } : {};
+
 const SelectedAnswerSections = ({
   answers,
   help,
   backgroundColor
 }) => {
   const selectedAnswers = _pipe(_filter('selected'), _orderBy('order', 'asc'))(answers);
+
   const selectedAnswersViews = selectedAnswers.map((answer, key) => {
     const {
       onClick,
@@ -89,14 +95,14 @@ const SelectedAnswerSections = ({
     }, /*#__PURE__*/React.createElement("span", {
       "data-name": "answerContent",
       className: classnames(style.selectedAnswerText, style.innerHTML),
-      title: title
-      // eslint-disable-next-line react/no-danger
+      title: title // eslint-disable-next-line react/no-danger
       ,
       dangerouslySetInnerHTML: {
         __html: title
       }
     })));
   });
+
   if (selectedAnswersViews.length > 0) {
     return /*#__PURE__*/React.createElement("div", {
       className: style.selectedAnswers
@@ -109,18 +115,22 @@ const SelectedAnswerSections = ({
     }));
   }
 };
+
 SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
   help: EmptyView.propTypes.help,
   backgroundColor: PropTypes.string
 } : {};
+
 const QcmDrag = ({
   answers,
   help,
   groupAriaLabel
 }, legacyContext) => {
   const skin = GetSkinFromContext(legacyContext);
+
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
+
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper,
     role: "group",
@@ -136,6 +146,7 @@ const QcmDrag = ({
     answers: answers
   })));
 };
+
 QcmDrag.propTypes = process.env.NODE_ENV !== "production" ? {
   answers: AnswersPropTypes,
   help: SelectedAnswerSections.propTypes.help,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","process","env","NODE_ENV","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","createElement","className","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","checkboxId","invisibleAnswer","unselected","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","_pipe","_filter","_orderBy","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","dangerouslySetInnerHTML","__html","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","primarySkinColor","_getOr","wrapper","role","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} 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    const checkboxId = `checkbox-drag-${key}`;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        key={key}\n        onClick={onClick}\n      >\n        <label htmlFor={checkboxId}>\n          <input\n            id={checkboxId}\n            type=\"checkbox\"\n            value={title}\n            title={title}\n            aria-label={title}\n            checked={selected}\n            onChange={onClick}\n            className={style.hiddenCheckbox}\n          />\n          {title}\n        </label>\n      </div>\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, groupAriaLabel}, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\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  groupAriaLabel: PropTypes.string\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,IAAGC,kBAAkB,QAAO,wBAAwB;AACnE,SAAQC,4BAA4B,QAAO,iDAAiD;AAC5F,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,gBAAgB,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGT,SAAS,CAACU,OAAO,CACxCV,SAAS,CAACW,KAAK,CAAC;EACdC,OAAO,EAAEZ,SAAS,CAACa,IAAI;EACvBC,KAAK,EAAEd,SAAS,CAACe,MAAM;EACvBC,QAAQ,EAAEhB,SAAS,CAACiB,IAAI;EACxBC,KAAK,EAAElB,SAAS,CAACmB,MAAM;EACvBC,IAAI,EAAEpB,SAAS,CAACmB;AAClB,CAAC,CACH,CAAC;AAED,MAAME,SAAS,GAAGA,CAAC;EAACD;AAAI,CAAC,kBAAKrB,KAAA,CAAAuB,aAAA;EAAMC,SAAS,EAAElB,KAAK,CAACmB;AAAU,GAAEJ,IAAW,CAAC;AAE7EC,SAAS,CAACI,SAAS,GAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACpBW,IAAI,EAAEpB,SAAS,CAACmB;AAClB,CAAC;AAED,MAAMO,OAAO,GAAGA,CAAC;EAACC;AAAO,CAAC,KAAK;EAC7B,MAAMC,YAAY,GAAGD,OAAO,CAACE,GAAG,CAAC,CAACC,MAAM,EAAEC,GAAG,KAAK;IAChD,MAAM;MAACnB,OAAO;MAAEM,KAAK;MAAEF;IAAQ,CAAC,GAAGc,MAAM;IACzC,MAAME,UAAU,GAAG,iBAAiBD,GAAG,EAAE;IACzC,oBACEhC,KAAA,CAAAuB,aAAA;MACEC,SAAS,EAAEtB,UAAU,CAACe,QAAQ,GAAGX,KAAK,CAAC4B,eAAe,GAAG5B,KAAK,CAAC6B,UAAU,EAAE7B,KAAK,CAAC8B,SAAS,CAAE;MAC5F,aAAU,QAAQ;MAClBJ,GAAG,EAAEA,GAAI;MACTnB,OAAO,EAAEA;IAAQ,gBAEjBb,KAAA,CAAAuB,aAAA;MAAOc,OAAO,EAAEJ;IAAW,gBACzBjC,KAAA,CAAAuB,aAAA;MACEe,EAAE,EAAEL,UAAW;MACfM,IAAI,EAAC,UAAU;MACfC,KAAK,EAAErB,KAAM;MACbA,KAAK,EAAEA,KAAM;MACb,cAAYA,KAAM;MAClBsB,OAAO,EAAExB,QAAS;MAClByB,QAAQ,EAAE7B,OAAQ;MAClBW,SAAS,EAAElB,KAAK,CAACqC;IAAe,CACjC,CAAC,EACDxB,KACI,CACJ,CAAC;EAEV,CAAC,CAAC;EAEF,oBAAOnB,KAAA,CAAAuB,aAAA;IAAKC,SAAS,EAAElB,KAAK,CAACsC;EAAQ,GAAEf,YAAkB,CAAC;AAC5D,CAAC;AAEDF,OAAO,CAACD,SAAS,GAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAClBkB,OAAO,EAAErB;AACX,CAAC;AAED,MAAMsC,sBAAsB,GAAGA,CAAC;EAACjB,OAAO;EAAEP,IAAI;EAAEyB;AAAe,CAAC,KAAK;EACnE,MAAMC,eAAe,GAAGC,KAAA,CAAKC,OAAA,CAAO,UAAU,CAAC,EAAEC,QAAA,CAAQ,OAAO,EAAE,KAAK,CAAC,CAAC,CAACtB,OAAO,CAAC;EAClF,MAAMuB,oBAAoB,GAAGJ,eAAe,CAACjB,GAAG,CAAC,CAACC,MAAM,EAAEC,GAAG,KAAK;IAChE,MAAM;MAACnB,OAAO;MAAEM;IAAK,CAAC,GAAGY,MAAM;IAC/B,oBACE/B,KAAA,CAAAuB,aAAA;MACE,iBAAc,MAAM;MACpBV,OAAO,EAAEA,OAAQ;MACjBmB,GAAG,EAAEA,GAAI;MACT,aAAU,gBAAgB;MAC1BR,SAAS,EAAElB,KAAK,CAACW,QAAS;MAC1BX,KAAK,EAAE;QACL8C,SAAS,EAAE,gBAAgB/C,4BAA4B,CAACyC,eAAe,CAAC;MAC1E;IAAE,gBAEF9C,KAAA,CAAAuB,aAAA;MACE,aAAU,kBAAkB;MAC5BjB,KAAK,EAAE;QACLwC;MACF,CAAE;MACFtB,SAAS,EAAElB,KAAK,CAAC+C;IAAW,CAC7B,CAAC,eACFrD,KAAA,CAAAuB,aAAA;MAAKC,SAAS,EAAElB,KAAK,CAACgD;IAAQ,gBAC5BtD,KAAA,CAAAuB,aAAA;MACE,aAAU,eAAe;MACzBC,SAAS,EAAEtB,UAAU,CAACI,KAAK,CAACiD,kBAAkB,EAAEjD,KAAK,CAAC8B,SAAS,CAAE;MACjEjB,KAAK,EAAEA;MACP;MAAA;MACAqC,uBAAuB,EAAE;QAACC,MAAM,EAAEtC;MAAK;IAAE,CAC1C,CACE,CACF,CAAC;EAEV,CAAC,CAAC;EAEF,IAAIgC,oBAAoB,CAACO,MAAM,GAAG,CAAC,EAAE;IACnC,oBAAO1D,KAAA,CAAAuB,aAAA;MAAKC,SAAS,EAAElB,KAAK,CAACyC;IAAgB,GAAEI,oBAA0B,CAAC;EAC5E,CAAC,MAAM;IACL,oBACEnD,KAAA,CAAAuB,aAAA;MAAKC,SAAS,EAAElB,KAAK,CAACqD;IAAa,gBACjC3D,KAAA,CAAAuB,aAAA,CAACD,SAAS;MAACD,IAAI,EAAEA;IAAK,CAAE,CACrB,CAAC;EAEV;AACF,CAAC;AAEDwB,sBAAsB,CAACnB,SAAS,GAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACjCkB,OAAO,EAAErB,gBAAgB;EACzBc,IAAI,EAAEC,SAAS,CAACI,SAAS,CAACL,IAAI;EAC9ByB,eAAe,EAAE7C,SAAS,CAACmB;AAC7B,CAAC;AAED,MAAMwC,OAAO,GAAGA,CAAC;EAAChC,OAAO;EAAEP,IAAI;EAAEwC;AAAc,CAAC,EAAEC,aAAa,KAAK;EAClE,MAAMC,IAAI,GAAG3D,kBAAkB,CAAC0D,aAAa,CAAC;EAC9C,MAAME,gBAAgB,GAAGC,MAAA,CAAM,SAAS,EAAE,gBAAgB,EAAEF,IAAI,CAAC;EAEjE,oBACE/D,KAAA,CAAAuB,aAAA;IAAKC,SAAS,EAAElB,KAAK,CAAC4D,OAAQ;IAACC,IAAI,EAAC,OAAO;IAAC,cAAYN;EAAe,gBACrE7D,KAAA,CAAAuB,aAAA,CAACsB,sBAAsB;IAACjB,OAAO,EAAEA,OAAQ;IAACP,IAAI,EAAEA,IAAK;IAACyB,eAAe,EAAEkB;EAAiB,CAAE,CAAC,eAC3FhE,KAAA,CAAAuB,aAAA;IAAK,aAAU,kBAAkB;IAACC,SAAS,EAAElB,KAAK,CAACsB;EAAQ,gBACzD5B,KAAA,CAAAuB,aAAA,CAACI,OAAO;IAACC,OAAO,EAAEA;EAAQ,CAAE,CACzB,CACF,CAAC;AAEV,CAAC;AAEDgC,OAAO,CAAClC,SAAS,GAAAlB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EAClBkB,OAAO,EAAErB,gBAAgB;EACzBc,IAAI,EAAEwB,sBAAsB,CAACnB,SAAS,CAACL,IAAI;EAC3CwC,cAAc,EAAE5D,SAAS,CAACmB;AAC5B,CAAC;AAEDwC,OAAO,CAACQ,YAAY,GAAG;EACrBL,IAAI,EAAE5D,QAAQ,CAACkE,iBAAiB,CAACN;AACnC,CAAC;AAED,eAAeH,OAAO","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","AnswersPropTypes","arrayOf","shape","onClick","func","order","number","selected","bool","title","string","help","EmptyView","emptySpan","propTypes","Choices","answers","answersViews","map","answer","key","checkboxId","invisibleAnswer","unselected","innerHTML","hiddenCheckbox","choices","SelectedAnswerSections","backgroundColor","selectedAnswers","selectedAnswersViews","boxShadow","background","content","selectedAnswerText","__html","length","emptyAnswers","QcmDrag","groupAriaLabel","legacyContext","skin","primarySkinColor","wrapper","contextTypes","childContextTypes"],"sources":["../../../../src/molecule/questions/qcm-drag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {pipe, filter, orderBy, getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} 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    const checkboxId = `checkbox-drag-${key}`;\n    return (\n      <div\n        className={classnames(selected ? style.invisibleAnswer : style.unselected, style.innerHTML)}\n        data-name=\"answer\"\n        key={key}\n        onClick={onClick}\n      >\n        <label htmlFor={checkboxId}>\n          <input\n            id={checkboxId}\n            type=\"checkbox\"\n            value={title}\n            title={title}\n            aria-label={title}\n            checked={selected}\n            onChange={onClick}\n            className={style.hiddenCheckbox}\n          />\n          {title}\n        </label>\n      </div>\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, groupAriaLabel}, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  return (\n    <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel}>\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  groupAriaLabel: PropTypes.string\n};\n\nQcmDrag.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default QcmDrag;\n"],"mappings":"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"}

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

@@ -5,13 +5,16 @@ import classnames from 'classnames';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
 import style from './style.css';
+
 const QCMImage = (props, legacyContext) => {
   const {
     answers,
     groupAriaLabel
   } = props;
   const skin = GetSkinFromContext(legacyContext);
+
   const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
+
   const answersViews = answers.map((answer, key) => {
     const {
       onClick,
@@ -25,8 +28,7 @@ const QCMImage = (props, legacyContext) => {
       onClick: onClick,
       "data-selected": selected,
       "data-name": "answerGraphic",
-      style: {
-        ...(selected && {
+      style: { ...(selected && {
           boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`
         })
       },
@@ -76,6 +78,7 @@ const QCMImage = (props, legacyContext) => {
     title: groupAriaLabel
   }, answersViews);
 };
+
 QCMImage.contextTypes = {
   skin: Provider.childContextTypes.skin
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","_getOr","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","createElement","boxShadow","className","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","htmlFor","id","type","value","checked","onChange","hiddenCheckbox","wrapper","role","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} 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, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\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    const checkboxId = `checkbox-graphic-${key}`;\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            title={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div title={title} className={classnames(style.title, style.innerHTML)}>\n              <label htmlFor={checkboxId}>\n                <input\n                  id={checkboxId}\n                  type=\"checkbox\"\n                  value={title}\n                  title={title}\n                  aria-label={title}\n                  checked={selected}\n                  onChange={onClick}\n                  className={style.hiddenCheckbox}\n                />\n                {title}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\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  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCMImage","props","legacyContext","answers","groupAriaLabel","skin","primarySkinColor","answersViews","map","answer","key","onClick","title","selected","image","ariaLabel","checkboxId","boxShadow","backgroundColor","background","content","imageWrapper","backgroundImage","titleWrapper","innerHTML","hiddenCheckbox","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../../src/molecule/questions/qcm-graphic/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} 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, groupAriaLabel} = props;\n  const skin = GetSkinFromContext(legacyContext);\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    const checkboxId = `checkbox-graphic-${key}`;\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            title={ariaLabel || title}\n            style={{\n              backgroundImage: `url(${image})`\n            }}\n          />\n          <div data-name=\"answerText\" className={style.titleWrapper}>\n            <div title={title} className={classnames(style.title, style.innerHTML)}>\n              <label htmlFor={checkboxId}>\n                <input\n                  id={checkboxId}\n                  type=\"checkbox\"\n                  value={title}\n                  title={title}\n                  aria-label={title}\n                  checked={selected}\n                  onChange={onClick}\n                  className={style.hiddenCheckbox}\n                />\n                {title}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  });\n\n  return (\n    <div\n      data-name=\"qcm-graphic-wrapper\"\n      className={style.wrapper}\n      role=\"group\"\n      aria-label={groupAriaLabel}\n      title={groupAriaLabel}\n    >\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  groupAriaLabel: PropTypes.string\n};\n\nexport default QCMImage;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,SAAQC,4BAAR,QAA2C,iDAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAM;IAACC,OAAD;IAAUC;EAAV,IAA4BH,KAAlC;EACA,MAAMI,IAAI,GAAGR,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMI,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAAzB;;EAEA,MAAME,YAAY,GAAGJ,OAAO,CAACK,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;IAChD,MAAM;MAACC,OAAD;MAAUC,KAAV;MAAiBC,QAAjB;MAA2BC,KAA3B;MAAkCC;IAAlC,IAA+CN,MAArD;IACA,MAAMO,UAAU,GAAI,oBAAmBN,GAAI,EAA3C;IAEA,oBACE;MACE,OAAO,EAAEC,OADX;MAEE,iBAAeE,QAFjB;MAGE,aAAU,eAHZ;MAIE,KAAK,EAAE,EACL,IAAIA,QAAQ,IAAI;UACdI,SAAS,EAAG,cAAanB,4BAA4B,CAACQ,gBAAD,CAAmB;QAD1D,CAAhB;MADK,CAJT;MASE,SAAS,EAAEO,QAAQ,GAAGd,KAAK,CAACc,QAAT,GAAoBd,KAAK,CAACU,MAT/C;MAUE,GAAG,EAAEC;IAVP,gBAYE;MACE,aAAU,kBADZ;MAEE,KAAK,EAAE;QACLQ,eAAe,EAAEL,QAAQ,GAAGP,gBAAH,GAAsB;MAD1C,CAFT;MAKE,SAAS,EAAEP,KAAK,CAACoB;IALnB,EAZF,eAmBE;MAAK,aAAU,eAAf;MAA+B,SAAS,EAAEpB,KAAK,CAACqB;IAAhD,gBACE;MACE,SAAS,EAAErB,KAAK,CAACsB,YADnB;MAEE,aAAU,aAFZ;MAGE,cAAYN,SAAS,IAAIH,KAH3B;MAIE,KAAK,EAAEG,SAAS,IAAIH,KAJtB;MAKE,KAAK,EAAE;QACLU,eAAe,EAAG,OAAMR,KAAM;MADzB;IALT,EADF,eAUE;MAAK,aAAU,YAAf;MAA4B,SAAS,EAAEf,KAAK,CAACwB;IAA7C,gBACE;MAAK,KAAK,EAAEX,KAAZ;MAAmB,SAAS,EAAEjB,UAAU,CAACI,KAAK,CAACa,KAAP,EAAcb,KAAK,CAACyB,SAApB;IAAxC,gBACE;MAAO,OAAO,EAAER;IAAhB,gBACE;MACE,EAAE,EAAEA,UADN;MAEE,IAAI,EAAC,UAFP;MAGE,KAAK,EAAEJ,KAHT;MAIE,KAAK,EAAEA,KAJT;MAKE,cAAYA,KALd;MAME,OAAO,EAAEC,QANX;MAOE,QAAQ,EAAEF,OAPZ;MAQE,SAAS,EAAEZ,KAAK,CAAC0B;IARnB,EADF,EAWGb,KAXH,CADF,CADF,CAVF,CAnBF,CADF;EAkDD,CAtDoB,CAArB;EAwDA,oBACE;IACE,aAAU,qBADZ;IAEE,SAAS,EAAEb,KAAK,CAAC2B,OAFnB;IAGE,IAAI,EAAC,OAHP;IAIE,cAAYtB,cAJd;IAKE,KAAK,EAAEA;EALT,GAOGG,YAPH,CADF;AAWD,CAxED;;AA0EAP,QAAQ,CAAC2B,YAAT,GAAwB;EACtBtB,IAAI,EAAET,QAAQ,CAACgC,iBAAT,CAA2BvB;AADX,CAAxB;AAIAL,QAAQ,CAAC6B,SAAT,2CAAqB;EACnB1B,OAAO,EAAET,SAAS,CAACoC,OAAV,CACPpC,SAAS,CAACqC,KAAV,CAAgB;IACdnB,KAAK,EAAElB,SAAS,CAACsC,MADH;IAEdnB,QAAQ,EAAEnB,SAAS,CAACuC,IAFN;IAGdtB,OAAO,EAAEjB,SAAS,CAACwC,IAHL;IAIdpB,KAAK,EAAEpB,SAAS,CAACsC,MAJH;IAKdjB,SAAS,EAAErB,SAAS,CAACsC;EALP,CAAhB,CADO,CADU;EAUnB5B,cAAc,EAAEV,SAAS,CAACsC;AAVP,CAArB;AAaA,eAAehC,QAAf"}

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

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import Provider, { GetSkinFromContext } from '../../../atom/provider';
 import Range from '../../../atom/range';
 import style from './style.css';
+
 const QuestionRange = (props, legacyContext) => {
   const {
     title,
@@ -14,7 +15,9 @@ const QuestionRange = (props, legacyContext) => {
     ...rangeProps
   } = props;
   const skin = GetSkinFromContext(legacyContext);
+
   const defaultColor = _getOr('#00B0FF', 'common.primary', skin);
+
   const titleStyle = {
     color: defaultColor
   };
@@ -25,8 +28,7 @@ const QuestionRange = (props, legacyContext) => {
     title: groupAriaLabel
   }, /*#__PURE__*/React.createElement("span", {
     style: titleStyle,
-    className: classnames(style.title, style.innerHTML)
-    // eslint-disable-next-line react/no-danger
+    className: classnames(style.title, style.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: title
@@ -34,26 +36,24 @@ const QuestionRange = (props, legacyContext) => {
   }), /*#__PURE__*/React.createElement(Range, rangeProps), /*#__PURE__*/React.createElement("div", {
     className: style.labelWrapper
   }, /*#__PURE__*/React.createElement("span", {
-    className: classnames(style.label, style.innerHTML)
-    // eslint-disable-next-line react/no-danger
+    className: classnames(style.label, style.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: minLabel
     }
   }), /*#__PURE__*/React.createElement("span", {
-    className: classnames(style.label, style.innerHTML)
-    // eslint-disable-next-line react/no-danger
+    className: classnames(style.label, style.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: maxLabel
     }
   })));
 };
+
 QuestionRange.contextTypes = {
   skin: Provider.childContextTypes.skin
 };
-QuestionRange.propTypes = process.env.NODE_ENV !== "production" ? {
-  ...Range.propTypes,
+QuestionRange.propTypes = process.env.NODE_ENV !== "production" ? { ...Range.propTypes,
   title: PropTypes.string,
   minLabel: PropTypes.string,
   maxLabel: PropTypes.string,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","Range","style","QuestionRange","props","legacyContext","title","minLabel","maxLabel","groupAriaLabel","rangeProps","skin","defaultColor","_getOr","titleStyle","color","createElement","className","wrapper","role","innerHTML","dangerouslySetInnerHTML","__html","labelWrapper","label","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string"],"sources":["../../../../src/molecule/questions/question-range/index.js"],"sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, legacyContext) => {\n  const {title, minLabel, maxLabel, groupAriaLabel, ...rangeProps} = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const titleStyle = {\n    color: defaultColor\n  };\n\n  return (\n    <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel} title={groupAriaLabel}>\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  groupAriaLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,QAAQ,IAAGC,kBAAkB,QAAO,wBAAwB;AACnE,OAAOC,KAAK,MAAM,qBAAqB;AACvC,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,aAAa,GAAGA,CAACC,KAAK,EAAEC,aAAa,KAAK;EAC9C,MAAM;IAACC,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,cAAc;IAAE,GAAGC;EAAU,CAAC,GAAGN,KAAK;EAExE,MAAMO,IAAI,GAAGX,kBAAkB,CAACK,aAAa,CAAC;EAC9C,MAAMO,YAAY,GAAGC,MAAA,CAAM,SAAS,EAAE,gBAAgB,EAAEF,IAAI,CAAC;EAE7D,MAAMG,UAAU,GAAG;IACjBC,KAAK,EAAEH;EACT,CAAC;EAED,oBACEhB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACgB,OAAQ;IAACC,IAAI,EAAC,OAAO;IAAC,cAAYV,cAAe;IAACH,KAAK,EAAEG;EAAe,gBAC5Fb,KAAA,CAAAoB,aAAA;IACEd,KAAK,EAAEY,UAAW;IAClBG,SAAS,EAAEnB,UAAU,CAACI,KAAK,CAACI,KAAK,EAAEJ,KAAK,CAACkB,SAAS;IAClD;IAAA;IACAC,uBAAuB,EAAE;MAACC,MAAM,EAAEhB;IAAK;EAAE,CAC1C,CAAC,eACFV,KAAA,CAAAoB,aAAA,CAACf,KAAK,EAAKS,UAAa,CAAC,eACzBd,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACqB;EAAa,gBACjC3B,KAAA,CAAAoB,aAAA;IACEC,SAAS,EAAEnB,UAAU,CAACI,KAAK,CAACsB,KAAK,EAAEtB,KAAK,CAACkB,SAAS;IAClD;IAAA;IACAC,uBAAuB,EAAE;MAACC,MAAM,EAAEf;IAAQ;EAAE,CAC7C,CAAC,eACFX,KAAA,CAAAoB,aAAA;IACEC,SAAS,EAAEnB,UAAU,CAACI,KAAK,CAACsB,KAAK,EAAEtB,KAAK,CAACkB,SAAS;IAClD;IAAA;IACAC,uBAAuB,EAAE;MAACC,MAAM,EAAEd;IAAQ;EAAE,CAC7C,CACE,CACF,CAAC;AAEV,CAAC;AAEDL,aAAa,CAACsB,YAAY,GAAG;EAC3Bd,IAAI,EAAEZ,QAAQ,CAAC2B,iBAAiB,CAACf;AACnC,CAAC;AAEDR,aAAa,CAACwB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG;EACxB,GAAG7B,KAAK,CAAC0B,SAAS;EAClBrB,KAAK,EAAET,SAAS,CAACkC,MAAM;EACvBxB,QAAQ,EAAEV,SAAS,CAACkC,MAAM;EAC1BvB,QAAQ,EAAEX,SAAS,CAACkC,MAAM;EAC1BtB,cAAc,EAAEZ,SAAS,CAACkC;AAC5B,CAAC;AAED,eAAe5B,aAAa","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classnames","Provider","GetSkinFromContext","Range","style","QuestionRange","props","legacyContext","title","minLabel","maxLabel","groupAriaLabel","rangeProps","skin","defaultColor","titleStyle","color","wrapper","innerHTML","__html","labelWrapper","label","contextTypes","childContextTypes","propTypes","string"],"sources":["../../../../src/molecule/questions/question-range/index.js"],"sourcesContent":["import React from 'react';\nimport {getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport Range from '../../../atom/range';\nimport style from './style.css';\n\nconst QuestionRange = (props, legacyContext) => {\n  const {title, minLabel, maxLabel, groupAriaLabel, ...rangeProps} = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const titleStyle = {\n    color: defaultColor\n  };\n\n  return (\n    <div className={style.wrapper} role=\"group\" aria-label={groupAriaLabel} title={groupAriaLabel}>\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  groupAriaLabel: PropTypes.string\n};\n\nexport default QuestionRange;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,OAAOC,KAAP,MAAkB,qBAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EAC9C,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBC,QAAlB;IAA4BC,cAA5B;IAA4C,GAAGC;EAA/C,IAA6DN,KAAnE;EAEA,MAAMO,IAAI,GAAGX,kBAAkB,CAACK,aAAD,CAA/B;;EACA,MAAMO,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EAEA,MAAME,UAAU,GAAG;IACjBC,KAAK,EAAEF;EADU,CAAnB;EAIA,oBACE;IAAK,SAAS,EAAEV,KAAK,CAACa,OAAtB;IAA+B,IAAI,EAAC,OAApC;IAA4C,cAAYN,cAAxD;IAAwE,KAAK,EAAEA;EAA/E,gBACE;IACE,KAAK,EAAEI,UADT;IAEE,SAAS,EAAEf,UAAU,CAACI,KAAK,CAACI,KAAP,EAAcJ,KAAK,CAACc,SAApB,CAFvB,CAGE;IAHF;IAIE,uBAAuB,EAAE;MAACC,MAAM,EAAEX;IAAT;EAJ3B,EADF,eAOE,oBAAC,KAAD,EAAWI,UAAX,CAPF,eAQE;IAAK,SAAS,EAAER,KAAK,CAACgB;EAAtB,gBACE;IACE,SAAS,EAAEpB,UAAU,CAACI,KAAK,CAACiB,KAAP,EAAcjB,KAAK,CAACc,SAApB,CADvB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACC,MAAM,EAAEV;IAAT;EAH3B,EADF,eAME;IACE,SAAS,EAAET,UAAU,CAACI,KAAK,CAACiB,KAAP,EAAcjB,KAAK,CAACc,SAApB,CADvB,CAEE;IAFF;IAGE,uBAAuB,EAAE;MAACC,MAAM,EAAET;IAAT;EAH3B,EANF,CARF,CADF;AAuBD,CAjCD;;AAmCAL,aAAa,CAACiB,YAAd,GAA6B;EAC3BT,IAAI,EAAEZ,QAAQ,CAACsB,iBAAT,CAA2BV;AADN,CAA7B;AAIAR,aAAa,CAACmB,SAAd,2CAA0B,EACxB,GAAGrB,KAAK,CAACqB,SADe;EAExBhB,KAAK,EAAET,SAAS,CAAC0B,MAFO;EAGxBhB,QAAQ,EAAEV,SAAS,CAAC0B,MAHI;EAIxBf,QAAQ,EAAEX,SAAS,CAAC0B,MAJI;EAKxBd,cAAc,EAAEZ,SAAS,CAAC0B;AALF,CAA1B;AAQA,eAAepB,aAAf"}

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

@@ -1,37 +1,43 @@
 import _find from "lodash/fp/find";
 import _map from "lodash/fp/map";
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from 'react';
 import PropTypes from 'prop-types';
 import parseTemplateString from '../../../util/parse-template-string';
 import DropDown from '../drop-down';
 import FreeText from '../free-text';
 import style from './style.css';
+
 const Template = ({
   template,
   answers,
   groupAriaLabel
 }) => {
   const totalTemplate = parseTemplateString(template);
+
   const templateCompose = _map.convert({
     cap: false
   })((part, key) => {
     const type = part.type;
+
     if (type === 'string') {
       return /*#__PURE__*/React.createElement("span", {
         key: key,
-        className: style.textPart
-        // eslint-disable-next-line react/no-danger
+        className: style.textPart // eslint-disable-next-line react/no-danger
         ,
         dangerouslySetInnerHTML: {
           __html: part.value
         }
       });
     }
+
     if (type === 'answerField') {
       const field = _find({
         name: part.value
       }, answers);
+
       if (!field) return null;
       const {
         type: fieldType,
@@ -48,6 +54,7 @@ const Template = ({
       }, fieldView);
     }
   }, totalTemplate);
+
   return /*#__PURE__*/React.createElement("div", {
     "data-name": "template-wrapper",
     className: style.wrapper,
@@ -56,8 +63,8 @@ const Template = ({
     title: groupAriaLabel
   }, templateCompose);
 };
-const TextPropTypes = process.env.NODE_ENV !== "production" ? {
-  ...DropDown.propTypes,
+
+const TextPropTypes = process.env.NODE_ENV !== "production" ? { ...DropDown.propTypes,
   type: PropTypes.string
 } : {};
 Template.propTypes = process.env.NODE_ENV !== "production" ? {