@coorpacademy/components 10.22.4 → 10.22.5

package/lib/atom/input-switch/style.css

@@ -8,11 +8,10 @@
 @value cm_grey_200 from colors;
 @value black from colors;
 @value cm_primary_blue from colors;
+@value light_blue from colors;
 
 .default {
   display: flex;
-  align-items: center;
-  align-content: center;
 }
 
 .modified {
@@ -27,6 +26,10 @@
   composes: modified;
 }
 
+.partielUncheck {
+  composes: coorpmanager;
+}
+
 .default label {
   height: 30px;
   position: relative;
@@ -97,12 +100,11 @@
   font-size: 15px;
   text-transform: none;
   color: dark;
-  width: 180px;
   margin-right: 20px;
-  min-height: 50px;
   display: flex;
   align-items: center;
   align-content: center;
+  min-height: 24px;
 }
 
 .description {
@@ -118,7 +120,7 @@
   width: 48px;
   height: 24px;
   border: solid 2px cm_grey_200;
-  margin-right: 8px;
+  margin-right: 16px;
   background: cm_grey_200;
 }
 
@@ -148,4 +150,52 @@
 
 .coorpmanager .checkbox:disabled ~ label::after {
   background: white;
-}
+}
+
+.partielUncheck label::after {
+  width: 19px;
+  height: 19px;
+  border: 3px solid cm_primary_blue;
+  margin-left: 8px;
+}
+.partielUncheck label {
+  width: 50px;
+  height: 26px;
+  background: light_blue;
+  border: 0px;
+}
+.partielUncheck .checkbox:checked ~ label {
+  background-color: cm_primary_blue;
+  border: 0px;
+  width: 50px;
+  height: 26px;
+}
+
+.partielUncheck .checkbox:checked ~ label::after {
+  margin-left: 0px;
+}
+
+.btnSwitchContainer {
+  display: flex;
+  align-items: center;
+}
+.alignedTextContainer {
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
+.detailsTxt {
+  font-family: Gilroy;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: black;
+  font-style: normal;
+  white-space: pre-line;
+  margin-right: 24px;
+}
+.requiredSelection label, .requiredSelection .checkbox:disabled ~ label {
+  background-color: cm_primary_blue;
+  border-color: cm_primary_blue;
+  opacity: 0.4;
+}

package/lib/atom/select-modal/index.native.js

@@ -78,20 +78,20 @@ const Select = props => {
     isDisabled = false,
     testID = 'select'
   } = props;
-  const handleFocus = (0, _react.useMemo)(() => () => {
+  const handleFocus = (0, _react.useCallback)(() => {
     if (!onFocus) return;
     analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);
     onFocus();
   }, [analytics, analyticsID, onFocus, questionType]);
-  const handleBlur = (0, _react.useMemo)(() => () => {
+  const handleBlur = (0, _react.useCallback)(() => {
     if (!onBlur) return;
     analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);
     onBlur();
   }, [analytics, analyticsID, onBlur, questionType]);
-  const handleChange = (0, _react.useMemo)(() => () => {
-    onChange(value);
+  const handleChange = (0, _react.useCallback)(_value => {
+    onChange(_value);
     handleBlur();
-  }, [value, onChange, handleBlur]);
+  }, [onChange, handleBlur]);
 
   if (!styleSheet) {
     return null;

package/lib/atom/select-modal/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/select-modal/index.native.tsx"],"names":["ICON_WIDTH","createStyleSheet","theme","StyleSheet","create","container","alignItems","flexDirection","text","flex","color","colors","gray","medium","textAlign","logEvent","eventName","analyticsID","analytics","questionType","id","Select","props","templateContext","styleSheet","setStylesheet","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","selectedItem","find","item","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle, FlexAlignType, FlexStyle} from 'react-native';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Modal from 'react-native-modal';\nimport Touchable from '../../hoc/touchable/index.native';\nimport type {QuestionType} from '../../types/progression-engine';\nimport {Theme} from '../../variables/theme.native';\n\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../variables/analytics';\nimport Space from '../space/index.native';\nimport Text from '../text/index.native';\nimport ModalSelect, {OnChangeFunction} from '../../hoc/modal/select/index.native';\nimport type {Props as ModalSelectProps} from '../../hoc/modal/select/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport type Props = {\n  analyticsID: string;\n  questionType: QuestionType;\n  isDisabled?: boolean;\n  isFocused?: boolean;\n  values: Pick<ModalSelectProps, 'values'>;\n  value?: Pick<ModalSelectProps, 'value'>;\n  placeholder?: string;\n  color?: string;\n  onChange: OnChangeFunction;\n  onFocus: () => void;\n  onBlur: () => void;\n  style?: ViewStyle;\n  textStyle?: ViewStyle;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: {\n    alignItems: FlexAlignType;\n    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined;\n  };\n  text: {\n    flex: number;\n    color: string;\n    textAlign: string;\n  };\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    container: {\n      alignItems: 'center',\n      flexDirection: 'row'\n    },\n    text: {\n      flex: 1,\n      color: theme.colors.gray.medium,\n      textAlign: 'center'\n    }\n  });\n\nconst logEvent = (\n  eventName: string,\n  analyticsID: String,\n  analytics: Analytics,\n  questionType: QuestionType\n) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: analyticsID,\n      questionType\n    });\n};\n\nconst Select = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, analytics} = templateContext;\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  const {\n    analyticsID,\n    onBlur,\n    onFocus,\n    onChange,\n    values,\n    placeholder,\n    value,\n    style,\n    textStyle,\n    color,\n    questionType,\n    isFocused = false,\n    isDisabled = false,\n    testID = 'select'\n  } = props;\n\n  const handleFocus = useMemo(\n    () => () => {\n      if (!onFocus) return;\n\n      analytics && logEvent(ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);\n      onFocus();\n    },\n    [analytics, analyticsID, onFocus, questionType]\n  );\n\n  const handleBlur = useMemo(\n    () => () => {\n      if (!onBlur) return;\n\n      analytics &&\n        logEvent(ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);\n      onBlur();\n    },\n    [analytics, analyticsID, onBlur, questionType]\n  );\n\n  const handleChange = useMemo(\n    () => () => {\n      onChange(value);\n      handleBlur();\n    },\n    [value, onChange, handleBlur]\n  );\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedItem = values.find(item => item.text === value);\n  const text = (selectedItem && selectedItem.text) || placeholder || null;\n\n  return (\n    <>\n      <Touchable\n        disabled={isDisabled}\n        onPress={handleFocus}\n        analyticsID={analyticsID}\n        testID={`${testID}-input`}\n      >\n        <View style={[styleSheet.container, style]}>\n          <Text style={[styleSheet.text, textStyle, color && {color}]}>{text}</Text>\n          <Space type=\"tiny\" />\n          <ArrowDown\n            color={color || theme.colors.gray.dark}\n            height={ICON_WIDTH}\n            width={ICON_WIDTH}\n          />\n        </View>\n      </Touchable>\n      <Modal\n        isVisible={isFocused}\n        onSwipeComplete={handleBlur}\n        onBackdropPress={handleBlur}\n        testID={testID}\n      >\n        <ModalSelect\n          value={value}\n          values={values}\n          onChange={handleChange}\n          onClose={handleBlur}\n          testID={`${testID}-modal`}\n        />\n      </Modal>\n    </>\n  );\n};\n\nexport default Select;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../src/atom/select-modal/index.native.tsx"],"names":["ICON_WIDTH","createStyleSheet","theme","StyleSheet","create","container","alignItems","flexDirection","text","flex","color","colors","gray","medium","textAlign","logEvent","eventName","analyticsID","analytics","questionType","id","Select","props","templateContext","styleSheet","setStylesheet","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","_value","selectedItem","find","item","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Modal from 'react-native-modal';\nimport Touchable from '../../hoc/touchable/index.native';\nimport type {ChoiceItem, QuestionType} from '../../types/progression-engine.d';\nimport {Theme} from '../../variables/theme.native';\n\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../variables/analytics';\nimport Space from '../space/index.native';\nimport Text from '../text/index.native';\nimport ModalSelect, {OnChangeFunction} from '../../hoc/modal/select/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport type Props = {\n  analyticsID: string;\n  questionType: QuestionType;\n  isDisabled?: boolean;\n  isFocused?: boolean;\n  values: Array<ChoiceItem>;\n  value?: string;\n  placeholder?: string;\n  color?: string;\n  onChange: OnChangeFunction;\n  onFocus: () => void;\n  onBlur: () => void;\n  style?: ViewStyle;\n  textStyle?: ViewStyle;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: {\n    alignItems: FlexAlignType;\n    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined;\n  };\n  text: {\n    flex: number;\n    color: string;\n    textAlign: string;\n  };\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    container: {\n      alignItems: 'center',\n      flexDirection: 'row'\n    },\n    text: {\n      flex: 1,\n      color: theme.colors.gray.medium,\n      textAlign: 'center'\n    }\n  });\n\nconst logEvent = (\n  eventName: string,\n  analyticsID: String,\n  analytics: Analytics,\n  questionType: QuestionType\n) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: analyticsID,\n      questionType\n    });\n};\n\nconst Select = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, analytics} = templateContext;\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  const {\n    analyticsID,\n    onBlur,\n    onFocus,\n    onChange,\n    values,\n    placeholder,\n    value,\n    style,\n    textStyle,\n    color,\n    questionType,\n    isFocused = false,\n    isDisabled = false,\n    testID = 'select'\n  } = props;\n\n  const handleFocus = useCallback(() => {\n    if (!onFocus) return;\n\n    analytics && logEvent(ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);\n    onFocus();\n  }, [analytics, analyticsID, onFocus, questionType]);\n\n  const handleBlur = useCallback(() => {\n    if (!onBlur) return;\n\n    analytics && logEvent(ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);\n    onBlur();\n  }, [analytics, analyticsID, onBlur, questionType]);\n\n  const handleChange = useCallback(\n    _value => {\n      onChange(_value);\n      handleBlur();\n    },\n    [onChange, handleBlur]\n  );\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedItem = values.find(item => item.text === value);\n  const text = (selectedItem && selectedItem.text) || placeholder || null;\n\n  return (\n    <>\n      <Touchable\n        disabled={isDisabled}\n        onPress={handleFocus}\n        analyticsID={analyticsID}\n        testID={`${testID}-input`}\n      >\n        <View style={[styleSheet.container, style]}>\n          <Text style={[styleSheet.text, textStyle, color && {color}]}>{text}</Text>\n          <Space type=\"tiny\" />\n          <ArrowDown\n            color={color || theme.colors.gray.dark}\n            height={ICON_WIDTH}\n            width={ICON_WIDTH}\n          />\n        </View>\n      </Touchable>\n      <Modal\n        isVisible={isFocused}\n        onSwipeComplete={handleBlur}\n        onBackdropPress={handleBlur}\n        testID={testID}\n      >\n        <ModalSelect\n          value={value}\n          values={values}\n          onChange={handleChange}\n          onClose={handleBlur}\n          testID={`${testID}-modal`}\n        />\n      </Modal>\n    </>\n  );\n};\n\nexport default Select;\n"],"file":"index.native.js"}

package/lib/atom/text/index.native.js

@@ -30,9 +30,11 @@ const Text = props => {
     children,
     style,
     testID,
-    numberOfLines
+    numberOfLines,
+    allowFontScaling = true
   } = props;
   return /*#__PURE__*/React.createElement(_reactNative.Text, {
+    allowFontScaling: allowFontScaling,
     style: [styles.text, style],
     testID: testID,
     numberOfLines: numberOfLines

package/lib/atom/text/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/text/index.native.tsx"],"names":["DEFAULT_STYLE","Platform","select","android","fontFamily","styles","StyleSheet","create","text","Text","props","children","style","testID","numberOfLines"],"mappings":";;;;;AAAA;;AACA;;;;;;;;AAUO,MAAMA,aAAa,gBACrBC,sBAASC,MAAT,CAAgB;AACjBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,EAAE;AADL;AADQ,CAAhB,CADqB,CAAnB;;;;AAQP,MAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,IAAI,eACCR,aADD;AAD2B,CAAlB,CAAf;;AAMA,MAAMS,IAAI,GAAIC,KAAD,IAAkB;AAC7B,QAAM;AAACC,IAAAA,QAAD;AAAWC,IAAAA,KAAX;AAAkBC,IAAAA,MAAlB;AAA0BC,IAAAA;AAA1B,MAA2CJ,KAAjD;AAEA,sBACE,oBAAC,iBAAD;AAAU,IAAA,KAAK,EAAE,CAACL,MAAM,CAACG,IAAR,EAAcI,KAAd,CAAjB;AAAuC,IAAA,MAAM,EAAEC,MAA/C;AAAuD,IAAA,aAAa,EAAEC;AAAtE,KACGH,QADH,CADF;AAKD,CARD;;eAUeF,I","sourcesContent":["import * as React from 'react';\nimport {Text as TextBase, Platform, StyleSheet, ViewStyle} from 'react-native';\n\nexport type Props = {\n  // copied from node_modules/react-native/Libraries/Text/TextProps.js\n  children: React.ReactNode;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  numberOfLines?: number;\n};\n\nexport const DEFAULT_STYLE = {\n  ...Platform.select({\n    android: {\n      fontFamily: 'Roboto'\n    }\n  })\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    ...DEFAULT_STYLE\n  }\n});\n\nconst Text = (props: Props) => {\n  const {children, style, testID, numberOfLines} = props;\n\n  return (\n    <TextBase style={[styles.text, style]} testID={testID} numberOfLines={numberOfLines}>\n      {children}\n    </TextBase>\n  );\n};\n\nexport default Text;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../src/atom/text/index.native.tsx"],"names":["DEFAULT_STYLE","Platform","select","android","fontFamily","styles","StyleSheet","create","text","Text","props","children","style","testID","numberOfLines","allowFontScaling"],"mappings":";;;;;AAAA;;AACA;;;;;;;;AAWO,MAAMA,aAAa,gBACrBC,sBAASC,MAAT,CAAgB;AACjBC,EAAAA,OAAO,EAAE;AACPC,IAAAA,UAAU,EAAE;AADL;AADQ,CAAhB,CADqB,CAAnB;;;;AAQP,MAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,IAAI,eACCR,aADD;AAD2B,CAAlB,CAAf;;AAMA,MAAMS,IAAI,GAAIC,KAAD,IAAkB;AAC7B,QAAM;AAACC,IAAAA,QAAD;AAAWC,IAAAA,KAAX;AAAkBC,IAAAA,MAAlB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,gBAAgB,GAAG;AAA5D,MAAoEL,KAA1E;AAEA,sBACE,oBAAC,iBAAD;AACE,IAAA,gBAAgB,EAAEK,gBADpB;AAEE,IAAA,KAAK,EAAE,CAACV,MAAM,CAACG,IAAR,EAAcI,KAAd,CAFT;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,aAAa,EAAEC;AAJjB,KAMGH,QANH,CADF;AAUD,CAbD;;eAeeF,I","sourcesContent":["import * as React from 'react';\nimport {Text as TextBase, Platform, StyleSheet, ViewStyle} from 'react-native';\n\nexport type Props = {\n  // copied from node_modules/react-native/Libraries/Text/TextProps.js\n  children: React.ReactNode;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  numberOfLines?: number;\n  allowFontScaling?: boolean;\n};\n\nexport const DEFAULT_STYLE = {\n  ...Platform.select({\n    android: {\n      fontFamily: 'Roboto'\n    }\n  })\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    ...DEFAULT_STYLE\n  }\n});\n\nconst Text = (props: Props) => {\n  const {children, style, testID, numberOfLines, allowFontScaling = true} = props;\n\n  return (\n    <TextBase\n      allowFontScaling={allowFontScaling}\n      style={[styles.text, style]}\n      testID={testID}\n      numberOfLines={numberOfLines}\n    >\n      {children}\n    </TextBase>\n  );\n};\n\nexport default Text;\n"],"file":"index.native.js"}

package/lib/hoc/modal/select/index.native.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
+var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
@@ -13,12 +15,12 @@ var _index = _interopRequireDefault(require("../index.native"));
 
 var _index2 = _interopRequireDefault(require("../select-item/index.native"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const createStyleSheet = theme => _reactNative.StyleSheet.create({
   content: {
     paddingHorizontal: 0
@@ -63,10 +65,10 @@ const ModalSelect = props => {
     theme
   } = templateContext;
   const {
-    value,
+    value = '',
     values,
     onChange,
-    onClose,
+    onClose = _noop2.default,
     testID = 'modal-select'
   } = props;
   (0, _react.useEffect)(() => {
@@ -75,7 +77,7 @@ const ModalSelect = props => {
     setStylesheet(_stylesheet);
   }, [theme]);
   const renderItem = (0, _react.useMemo)(() => createRenderItem(value, testID, onChange), [value, testID, onChange]);
-  const renderSeparator = (0, _react.useMemo)(() => createSeparator(styleSheet), [styleSheet]);
+  const renderSeparator = (0, _react.useMemo)(() => styleSheet ? createSeparator(styleSheet) : null, [styleSheet]);
 
   if (!styleSheet) {
     return null;

package/lib/hoc/modal/select/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport type {Choice} from '../../../types/progression-engine.d';\n\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\ntype ChoiceValue = Pick<Choice, 'value'>;\ntype ChoiceItem = Pick<Choice, 'items'>;\nexport type OnChangeFunction = (value: ChoiceValue) => void;\n\nexport type Props = {\n  value?: ChoiceValue;\n  values: Array<ChoiceItem>;\n  onChange: OnChangeFunction;\n  onClose?: () => void;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  content: {\n    paddingHorizontal: number;\n  };\n  separator: {\n    borderTopWidth: number;\n    borderColor: string;\n  };\n  list: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    content: {\n      paddingHorizontal: 0\n    },\n    separator: {\n      borderTopWidth: 1,\n      borderColor: theme.colors.border\n    },\n    list: {\n      width: '100%'\n    }\n  });\n\nconst keyExtractor = (item: ChoiceItem, index: number): string => {\n  return `modal-select-item-${index + 1}`;\n};\n\nconst createRenderItem = (value: ChoiceValue, testID: String, onChange: OnChangeFunction) => ({\n  item,\n  index\n}: {\n  item: ChoiceItem;\n  index: number;\n}) => {\n  // eslint-disable-next-line unicorn/consistent-function-scoping\n  const handleChange = (_value: ChoiceValue | void) => () => onChange(_value);\n\n  return (\n    <ModalSelectItem\n      onPress={handleChange(item.text)}\n      isSelected={value === item.text}\n      testID={`${testID}-item-${index + 1}`}\n    >\n      {item.text}\n    </ModalSelectItem>\n  );\n};\n\nconst createSeparator = (styleSheet: StyleSheetType) => () => {\n  return <View style={styleSheet?.separator} />;\n};\n\nconst ModalSelect = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const {value, values, onChange, onClose, testID = 'modal-select'} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [\n    value,\n    testID,\n    onChange\n  ]);\n  const renderSeparator = useMemo(() => createSeparator(styleSheet), [styleSheet]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <Modal onClose={onClose} contentStyle={styleSheet?.content} testID={testID}>\n      <FlatList\n        data={values}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        showsVerticalScrollIndicator={false}\n        ItemSeparatorComponent={renderSeparator}\n        style={styleSheet?.list}\n        testID={`${testID}-items`}\n      />\n    </Modal>\n  );\n};\n\nexport default ModalSelect;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport {noop} from 'lodash/fp';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport type {ChoiceItem} from '../../../types/progression-engine.d';\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\nexport type OnChangeFunction = (value: string) => void;\n\nexport type Props = {\n  value?: string;\n  values: Array<ChoiceItem>;\n  onChange: OnChangeFunction;\n  onClose?: (event: PressEvent) => void;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  content: {\n    paddingHorizontal: number;\n  };\n  separator: {\n    borderTopWidth: number;\n    borderColor: string;\n  };\n  list: {\n    width: string;\n  };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    content: {\n      paddingHorizontal: 0\n    },\n    separator: {\n      borderTopWidth: 1,\n      borderColor: theme.colors.border\n    },\n    list: {\n      width: '100%'\n    }\n  });\n\nconst keyExtractor = (item: ChoiceItem, index: number): string => {\n  return `modal-select-item-${index + 1}`;\n};\n\nconst createRenderItem = (value: string, testID: String, onChange: OnChangeFunction) => ({\n  item,\n  index\n}: {\n  item: ChoiceItem;\n  index: number;\n}) => {\n  // eslint-disable-next-line unicorn/consistent-function-scoping\n  const handleChange = (_value: string) => () => onChange(_value);\n\n  return (\n    <ModalSelectItem\n      onPress={handleChange(item.text)}\n      isSelected={value === item.text}\n      testID={`${testID}-item-${index + 1}`}\n    >\n      {item.text}\n    </ModalSelectItem>\n  );\n};\n\nconst createSeparator = (styleSheet: StyleSheetType) => () => {\n  return <View style={styleSheet?.separator} />;\n};\n\nconst ModalSelect = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const {value = '', values, onChange, onClose = noop, testID = 'modal-select'} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [\n    value,\n    testID,\n    onChange\n  ]);\n\n  const renderSeparator = useMemo(() => (styleSheet ? createSeparator(styleSheet) : null), [\n    styleSheet\n  ]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <Modal onClose={onClose} contentStyle={styleSheet?.content} testID={testID}>\n      <FlatList\n        data={values}\n        renderItem={renderItem}\n        keyExtractor={keyExtractor}\n        showsVerticalScrollIndicator={false}\n        ItemSeparatorComponent={renderSeparator}\n        style={styleSheet?.list}\n        testID={`${testID}-items`}\n      />\n    </Modal>\n  );\n};\n\nexport default ModalSelect;\n"],"file":"index.native.js"}

package/lib/molecule/answer/index.js

@@ -81,53 +81,60 @@ const MediaView = ({
 
 MediaView.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.MediaViewPropTypes : {};
 
-const Answer = props => {
+const Switch = ({
+  model,
+  help
+}) => {
   const {
-    model,
-    media,
-    help
-  } = props;
+    type
+  } = model;
 
-  const buildAnswer = () => {
-    // (propTypes model.type is properly defined)
-    // eslint-disable-next-line react/prop-types
-    const {
-      type
-    } = model;
+  switch (type) {
+    case 'qcmDrag':
+      return /*#__PURE__*/_react.default.createElement(_qcmDrag.default, _extends({}, model, {
+        help: help
+      }));
 
-    switch (type) {
-      case 'qcmDrag':
-        return /*#__PURE__*/_react.default.createElement(_qcmDrag.default, _extends({}, model, {
-          help: help
-        }));
+    case 'qcm':
+      return /*#__PURE__*/_react.default.createElement(_qcm.default, model);
 
-      case 'qcm':
-        return /*#__PURE__*/_react.default.createElement(_qcm.default, model);
+    case 'qcmGraphic':
+      return /*#__PURE__*/_react.default.createElement(_qcmGraphic.default, model);
 
-      case 'qcmGraphic':
-        return /*#__PURE__*/_react.default.createElement(_qcmGraphic.default, model);
+    case 'freeText':
+      return /*#__PURE__*/_react.default.createElement(_freeText.default, model);
 
-      case 'freeText':
-        return /*#__PURE__*/_react.default.createElement(_freeText.default, model);
+    case 'dropDown':
+      return /*#__PURE__*/_react.default.createElement(_dropDown.default, model);
 
-      case 'dropDown':
-        return /*#__PURE__*/_react.default.createElement(_dropDown.default, model);
+    case 'slider':
+      return /*#__PURE__*/_react.default.createElement(_questionRange.default, model);
 
-      case 'slider':
-        return /*#__PURE__*/_react.default.createElement(_questionRange.default, model);
+    case 'template':
+      return /*#__PURE__*/_react.default.createElement(_template.default, model);
+  }
+};
 
-      case 'template':
-        return /*#__PURE__*/_react.default.createElement(_template.default, model);
-    }
-  };
+Switch.propTypes = process.env.NODE_ENV !== "production" ? {
+  model: _propTypes.default.model,
+  help: _propTypes.default.help
+} : {};
 
-  const answerView = buildAnswer(model);
+const Answer = props => {
+  const {
+    model,
+    media,
+    help
+  } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "answer",
     className: _style.default.wrapper
   }, media ? /*#__PURE__*/_react.default.createElement(MediaView, {
     media: media
-  }) : null, answerView);
+  }) : null, /*#__PURE__*/_react.default.createElement(Switch, {
+    model: model,
+    help: help
+  }));
 };
 
 Answer.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};

package/lib/molecule/answer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/answer/index.js"],"names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Answer","props","model","help","buildAnswer","answerView","wrapper"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAa;AAC7B,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA;AAAV,MAAiCF,KAAvC;AAAA,QAAyBG,UAAzB,iCAAuCH,KAAvC;;AACA,UAAQE,IAAR;AACE,SAAKE,qBAAL;AACE,0BACE;AACE,QAAA,SAAS,EAAEC,eAAML,KADnB;AAEE,QAAA,KAAK,EAAE;AACLM,UAAAA,eAAe,EAAG,OAAMN,KAAK,CAACO,GAAI;AAD7B;AAFT,QADF;;AAQF,SAAKC,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEH,eAAMI;AAAtB,sBACE,6BAAC,oBAAD,eAAiB,oBAAK,IAAL,EAAWN,UAAX,CAAjB;AAAyC,QAAA,EAAE,EAAEF,OAA7C;AAAsD,QAAA,MAAM,EAAC,MAA7D;AAAoE,QAAA,KAAK,EAAC;AAA1E,SADF,CADF;;AAKF,SAAKS,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEL,eAAMM;AAAtB,sBACE,6BAAC,cAAD,eAAW,oBAAK,IAAL,EAAWR,UAAX,CAAX;AAAmC,QAAA,MAAM,EAAC,MAA1C;AAAiD,QAAA,KAAK,EAAC;AAAvD,SADF,CADF;;AAKF;AACE,aAAO,IAAP;AAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACa,SAAV,2CAAsBC,6BAAtB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,KAAD;AAAQhB,IAAAA,KAAR;AAAeiB,IAAAA;AAAf,MAAuBF,KAA7B;;AACA,QAAMG,WAAW,GAAG,MAAM;AACxB;AACA;AACA,UAAM;AAAChB,MAAAA;AAAD,QAASc,KAAf;;AAEA,YAAQd,IAAR;AACE,WAAK,SAAL;AACE,4BAAO,6BAAC,gBAAD,eAAac,KAAb;AAAoB,UAAA,IAAI,EAAEC;AAA1B,WAAP;;AACF,WAAK,KAAL;AACE,4BAAO,6BAAC,YAAD,EAASD,KAAT,CAAP;;AACF,WAAK,YAAL;AACE,4BAAO,6BAAC,mBAAD,EAAgBA,KAAhB,CAAP;;AACF,WAAK,UAAL;AACE,4BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,WAAK,UAAL;AACE,4BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,WAAK,QAAL;AACE,4BAAO,6BAAC,sBAAD,EAAmBA,KAAnB,CAAP;;AACF,WAAK,UAAL;AACE,4BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;AAdJ;AAgBD,GArBD;;AAsBA,QAAMG,UAAU,GAAGD,WAAW,CAACF,KAAD,CAA9B;AAEA,sBACE;AAAK,iBAAU,QAAf;AAAwB,IAAA,SAAS,EAAEX,eAAMe;AAAzC,KACGpB,KAAK,gBAAG,6BAAC,SAAD;AAAW,IAAA,KAAK,EAAEA;AAAlB,IAAH,GAAiC,IADzC,EAEGmB,UAFH,CADF;AAMD,CAhCD;;AAkCAL,MAAM,CAACF,SAAP,2CAAmBA,kBAAnB;eAEeE,M","sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Answer = props => {\n  const {model, media, help} = props;\n  const buildAnswer = () => {\n    // (propTypes model.type is properly defined)\n    // eslint-disable-next-line react/prop-types\n    const {type} = model;\n\n    switch (type) {\n      case 'qcmDrag':\n        return <QcmDrag {...model} help={help} />;\n      case 'qcm':\n        return <Qcm {...model} />;\n      case 'qcmGraphic':\n        return <QcmGraphic {...model} />;\n      case 'freeText':\n        return <FreeText {...model} />;\n      case 'dropDown':\n        return <DropDown {...model} />;\n      case 'slider':\n        return <QuestionRange {...model} />;\n      case 'template':\n        return <Template {...model} />;\n    }\n  };\n  const answerView = buildAnswer(model);\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      {answerView}\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/answer/index.js"],"names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","Answer","props","wrapper"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAa;AAC7B,QAAM;AAACC,IAAAA,OAAD;AAAUC,IAAAA;AAAV,MAAiCF,KAAvC;AAAA,QAAyBG,UAAzB,iCAAuCH,KAAvC;;AACA,UAAQE,IAAR;AACE,SAAKE,qBAAL;AACE,0BACE;AACE,QAAA,SAAS,EAAEC,eAAML,KADnB;AAEE,QAAA,KAAK,EAAE;AACLM,UAAAA,eAAe,EAAG,OAAMN,KAAK,CAACO,GAAI;AAD7B;AAFT,QADF;;AAQF,SAAKC,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEH,eAAMI;AAAtB,sBACE,6BAAC,oBAAD,eAAiB,oBAAK,IAAL,EAAWN,UAAX,CAAjB;AAAyC,QAAA,EAAE,EAAEF,OAA7C;AAAsD,QAAA,MAAM,EAAC,MAA7D;AAAoE,QAAA,KAAK,EAAC;AAA1E,SADF,CADF;;AAKF,SAAKS,qBAAL;AACE,0BACE;AAAK,QAAA,SAAS,EAAEL,eAAMM;AAAtB,sBACE,6BAAC,cAAD,eAAW,oBAAK,IAAL,EAAWR,UAAX,CAAX;AAAmC,QAAA,MAAM,EAAC,MAA1C;AAAiD,QAAA,KAAK,EAAC;AAAvD,SADF,CADF;;AAKF;AACE,aAAO,IAAP;AAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACa,SAAV,2CAAsBC,6BAAtB;;AAEA,MAAMC,MAAM,GAAG,CAAC;AAACC,EAAAA,KAAD;AAAQC,EAAAA;AAAR,CAAD,KAAmB;AAChC,QAAM;AAACd,IAAAA;AAAD,MAASa,KAAf;;AAEA,UAAQb,IAAR;AACE,SAAK,SAAL;AACE,0BAAO,6BAAC,gBAAD,eAAaa,KAAb;AAAoB,QAAA,IAAI,EAAEC;AAA1B,SAAP;;AACF,SAAK,KAAL;AACE,0BAAO,6BAAC,YAAD,EAASD,KAAT,CAAP;;AACF,SAAK,YAAL;AACE,0BAAO,6BAAC,mBAAD,EAAgBA,KAAhB,CAAP;;AACF,SAAK,UAAL;AACE,0BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,SAAK,UAAL;AACE,0BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;AACF,SAAK,QAAL;AACE,0BAAO,6BAAC,sBAAD,EAAmBA,KAAnB,CAAP;;AACF,SAAK,UAAL;AACE,0BAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;AAdJ;AAgBD,CAnBD;;AAqBAD,MAAM,CAACF,SAAP,2CAAmB;AACjBG,EAAAA,KAAK,EAAEH,mBAAUG,KADA;AAEjBC,EAAAA,IAAI,EAAEJ,mBAAUI;AAFC,CAAnB;;AAKA,MAAMC,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACH,IAAAA,KAAD;AAAQf,IAAAA,KAAR;AAAegB,IAAAA;AAAf,MAAuBE,KAA7B;AAEA,sBACE;AAAK,iBAAU,QAAf;AAAwB,IAAA,SAAS,EAAEb,eAAMc;AAAzC,KACGnB,KAAK,gBAAG,6BAAC,SAAD;AAAW,IAAA,KAAK,EAAEA;AAAlB,IAAH,GAAiC,IADzC,eAEE,6BAAC,MAAD;AAAQ,IAAA,KAAK,EAAEe,KAAf;AAAsB,IAAA,IAAI,EAAEC;AAA5B,IAFF,CADF;AAMD,CATD;;AAWAC,MAAM,CAACL,SAAP,2CAAmBA,kBAAnB;eAEeK,M","sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}) => {\n  const {type} = model;\n\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} />;\n    case 'qcm':\n      return <Qcm {...model} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} />;\n    case 'slider':\n      return <QuestionRange {...model} />;\n    case 'template':\n      return <Template {...model} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"file":"index.js"}

package/lib/molecule/cm-popin/index.js

@@ -9,10 +9,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _novaIcons = require("@coorpacademy/nova-icons");
 
+var _map = _interopRequireDefault(require("lodash/fp/map"));
+
 var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
 
 var _buttonLinkIconOnly = _interopRequireDefault(require("../../atom/button-link-icon-only"));
 
+var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,7 +31,11 @@ const CMPopin = props => {
     header,
     icon,
     backgroundImageUrl,
-    descriptionText
+    descriptionText,
+    thirdButton,
+    cookieTitle,
+    descriptionBtnTxt,
+    listBtnSwicth
   } = props;
   const logo = {
     AlertDiamond: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
@@ -38,18 +46,78 @@ const CMPopin = props => {
     backgroundImage: `url(${backgroundImageUrl})`,
     backgroundSize: 'cover'
   } : null;
+
+  const renderHeader = () => {
+    if (header) return /*#__PURE__*/_react.default.createElement("img", {
+      className: _style.default.headerBackground,
+      src: header
+    });
+    if (mode === 'cookie') return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.cookieHeader
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.cookieIconContainer
+    }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaLineSettingsCookie, {
+      className: _style.default.cookieIcon
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.cookieTitle
+    }, cookieTitle));
+    return null;
+  };
+
+  const getClassBtnSwitch = (index, btnList) => {
+    switch (index) {
+      case 0:
+        return _style.default.firstBtnSwitchContainer;
+
+      case btnList.length - 1:
+        return _style.default.lastBtnSwitchContainer;
+
+      default:
+        return _style.default.singleSwitchContainer;
+    }
+  };
+
+  const renderBtnSwitch = () => {
+    return _map.default.convert({
+      cap: false
+    })((el, index) => {
+      const {
+        type,
+        title,
+        value,
+        onChange,
+        titlePosition,
+        theme,
+        details,
+        requiredSelection,
+        disabled
+      } = el;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: getClassBtnSwitch(index, listBtnSwicth)
+      }, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
+        type,
+        title,
+        value,
+        onChange,
+        titlePosition,
+        theme,
+        details,
+        requiredSelection,
+        disabled
+      }));
+    })(listBtnSwicth);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.background,
+    className: mode !== 'cookie' ? _style.default.background : null,
     style: backgroundImageStyle,
     "data-name": 'cm-popin-container'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.popin
+    className: mode === 'cookie' ? _style.default.popinCookie : _style.default.popin
   }, /*#__PURE__*/_react.default.createElement("header", {
     className: _style.default.popinHeader
-  }, header ? /*#__PURE__*/_react.default.createElement("img", {
-    className: _style.default.headerBackground,
-    src: header
-  }) : null, onClose ? /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, {
+  }, renderHeader(), onClose ? /*#__PURE__*/_react.default.createElement(_buttonLinkIconOnly.default, {
     onClick: onClose,
     "data-name": 'close-icon',
     "aria-label": 'close-icon',
@@ -74,10 +142,12 @@ const CMPopin = props => {
     dangerouslySetInnerHTML: {
       __html: descriptionText
     }
-  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+  }) : null), descriptionBtnTxt ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.descriptionBtn
+  }, descriptionBtnTxt) : null, renderBtnSwitch(), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.buttonContainer
   }, firstButton ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.button
+    className: firstButton.largeButton ? _style.default.largeButton : _style.default.button
   }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
     label: firstButton.label,
     onClick: firstButton.handleOnclick,
@@ -92,30 +162,49 @@ const CMPopin = props => {
     "data-name": `cm-popin-cta-${secondButton.type}`,
     "aria-label": secondButton['aria-label'],
     type: secondButton.type
+  })) : null, thirdButton ? /*#__PURE__*/_react.default.createElement("div", {
+    className: thirdButton.largeButton ? _style.default.largeButton : _style.default.button
+  }, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    label: thirdButton.label,
+    onClick: thirdButton.handleOnclick,
+    "data-name": `cm-popin-cta-${thirdButton.type}`,
+    "aria-label": thirdButton['aria-label'],
+    type: thirdButton.type
   })) : null)));
 };
 
 CMPopin.propTypes = process.env.NODE_ENV !== "production" ? {
   content: _propTypes.default.string,
-  mode: _propTypes.default.oneOf(['alert', 'information']),
+  mode: _propTypes.default.oneOf(['alert', 'information', 'cookie']),
   header: _propTypes.default.string,
   firstButton: _propTypes.default.shape({
     label: _propTypes.default.string,
     handleOnclick: _propTypes.default.func,
     'aria-label': _propTypes.default.string,
-    type: _propTypes.default.string
+    largeButton: _propTypes.default.bool,
+    type: _propTypes.default.oneOf(['dangerous', 'primary', 'secondary'])
   }),
   secondButton: _propTypes.default.shape({
     label: _propTypes.default.string,
     handleOnclick: _propTypes.default.func,
-    type: _propTypes.default.oneOf(['dangerous', 'primary']),
+    type: _propTypes.default.oneOf(['dangerous', 'primary', 'secondary']),
+    'aria-label': _propTypes.default.string,
+    largeButton: _propTypes.default.boolean
+  }),
+  thirdButton: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    handleOnclick: _propTypes.default.func,
+    type: _propTypes.default.oneOf(['dangerous', 'primary', 'secondary']),
     'aria-label': _propTypes.default.string,
     largeButton: _propTypes.default.boolean
   }),
   onClose: _propTypes.default.func,
   icon: _propTypes.default.string,
   backgroundImageUrl: _propTypes.default.string,
-  descriptionText: _propTypes.default.string
+  descriptionText: _propTypes.default.string,
+  cookieTitle: _propTypes.default.string,
+  descriptionBtnTxt: _propTypes.default.string,
+  listBtnSwicth: _propTypes.default.arrayOf(_propTypes.default.shape(_inputSwitch.default.propTypes))
 } : {};
 var _default = CMPopin;
 exports.default = _default;

package/lib/molecule/cm-popin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","logo","AlertDiamond","WindowUpload","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","style","background","popin","popinHeader","headerBackground","titleContainer","contentSection","message","__html","buttonContainer","button","label","handleOnclick","type","largeButton","propTypes","PropTypes","string","oneOf","shape","func","boolean"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload\n} from '@coorpacademy/nova-icons';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n\n  return (\n    <div className={style.background} style={backgroundImageStyle} data-name={'cm-popin-container'}>\n      <div className={style.popin}>\n        <header className={style.popinHeader}>\n          {header ? <img className={style.headerBackground} src={header} /> : null}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div className={style.titleContainer}>\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    type: PropTypes.string\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string\n};\n\nexport default CMPopin;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/molecule/cm-popin/index.js"],"names":["CMPopin","props","content","mode","firstButton","secondButton","onClose","header","icon","backgroundImageUrl","descriptionText","thirdButton","cookieTitle","descriptionBtnTxt","listBtnSwicth","logo","AlertDiamond","WindowUpload","LogoComponent","backgroundImageStyle","backgroundImage","backgroundSize","renderHeader","style","headerBackground","cookieHeader","cookieIconContainer","cookieIcon","getClassBtnSwitch","index","btnList","firstBtnSwitchContainer","length","lastBtnSwitchContainer","singleSwitchContainer","renderBtnSwitch","map","convert","cap","el","type","title","value","onChange","titlePosition","theme","details","requiredSelection","disabled","background","popinCookie","popin","popinHeader","titleContainer","contentSection","message","__html","descriptionBtn","buttonContainer","largeButton","button","label","handleOnclick","propTypes","PropTypes","string","oneOf","shape","func","bool","boolean","arrayOf","InputSwitch"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  NovaSolidInterfaceFeedbackInterfaceAlertDiamond as AlertDiamond,\n  NovaSolidApplicationsWindowUpload3 as WindowUpload,\n  NovaLineSettingsCookie as Cookie\n} from '@coorpacademy/nova-icons';\nimport map from 'lodash/fp/map';\nimport Cta from '../../atom/button-link';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst CMPopin = props => {\n  const {\n    content,\n    mode = 'alert',\n    firstButton,\n    secondButton,\n    onClose,\n    header,\n    icon,\n    backgroundImageUrl,\n    descriptionText,\n    thirdButton,\n    cookieTitle,\n    descriptionBtnTxt,\n    listBtnSwicth\n  } = props;\n\n  const logo = {\n    AlertDiamond,\n    WindowUpload\n  };\n  const LogoComponent = logo[icon];\n\n  const backgroundImageStyle = backgroundImageUrl\n    ? {\n        backgroundImage: `url(${backgroundImageUrl})`,\n        backgroundSize: 'cover'\n      }\n    : null;\n  const renderHeader = () => {\n    if (header) return <img className={style.headerBackground} src={header} />;\n    if (mode === 'cookie')\n      return (\n        <div className={style.cookieHeader}>\n          <div className={style.cookieIconContainer}>\n            <Cookie className={style.cookieIcon} />\n          </div>\n          <div className={style.cookieTitle}>{cookieTitle}</div>\n        </div>\n      );\n    return null;\n  };\n  const getClassBtnSwitch = (index, btnList) => {\n    switch (index) {\n      case 0:\n        return style.firstBtnSwitchContainer;\n      case btnList.length - 1:\n        return style.lastBtnSwitchContainer;\n      default:\n        return style.singleSwitchContainer;\n    }\n  };\n  const renderBtnSwitch = () => {\n    return map.convert({cap: false})((el, index) => {\n      const {\n        type,\n        title,\n        value,\n        onChange,\n        titlePosition,\n        theme,\n        details,\n        requiredSelection,\n        disabled\n      } = el;\n      return (\n        <div key={index} className={getClassBtnSwitch(index, listBtnSwicth)}>\n          <InputSwitch\n            {...{\n              type,\n              title,\n              value,\n              onChange,\n              titlePosition,\n              theme,\n              details,\n              requiredSelection,\n              disabled\n            }}\n          />\n        </div>\n      );\n    })(listBtnSwicth);\n  };\n  return (\n    <div\n      className={mode !== 'cookie' ? style.background : null}\n      style={backgroundImageStyle}\n      data-name={'cm-popin-container'}\n    >\n      <div className={mode === 'cookie' ? style.popinCookie : style.popin}>\n        <header className={style.popinHeader}>\n          {renderHeader()}\n          {onClose ? (\n            <ButtonLinkIconOnly\n              onClick={onClose}\n              data-name={'close-icon'}\n              aria-label={'close-icon'}\n              size=\"small\"\n              icon=\"close\"\n            />\n          ) : null}\n        </header>\n        <div className={style.titleContainer}>\n          <div className={style.contentSection}>\n            {LogoComponent ? <LogoComponent className={style.icon} /> : null}\n            {content ? (\n              <p\n                className={mode === 'alert' ? style.content : style.message}\n                data-name={'cm-popin-content'}\n                // eslint-disable-next-line react/no-danger\n                dangerouslySetInnerHTML={{__html: content}}\n              />\n            ) : null}\n          </div>\n          {descriptionText ? (\n            <p\n              className={style.descriptionText}\n              // eslint-disable-next-line react/no-danger\n              dangerouslySetInnerHTML={{__html: descriptionText}}\n            />\n          ) : null}\n        </div>\n        {descriptionBtnTxt ? <div className={style.descriptionBtn}>{descriptionBtnTxt}</div> : null}\n        {renderBtnSwitch()}\n        <div className={style.buttonContainer}>\n          {firstButton ? (\n            <div className={firstButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={firstButton.label}\n                onClick={firstButton.handleOnclick}\n                data-name={'cm-popin-cta'}\n                aria-label={firstButton['aria-label']}\n                type={firstButton.type}\n              />\n            </div>\n          ) : null}\n          {secondButton ? (\n            <div className={secondButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={secondButton.label}\n                onClick={secondButton.handleOnclick}\n                data-name={`cm-popin-cta-${secondButton.type}`}\n                aria-label={secondButton['aria-label']}\n                type={secondButton.type}\n              />\n            </div>\n          ) : null}\n          {thirdButton ? (\n            <div className={thirdButton.largeButton ? style.largeButton : style.button}>\n              <Cta\n                label={thirdButton.label}\n                onClick={thirdButton.handleOnclick}\n                data-name={`cm-popin-cta-${thirdButton.type}`}\n                aria-label={thirdButton['aria-label']}\n                type={thirdButton.type}\n              />\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nCMPopin.propTypes = {\n  content: PropTypes.string,\n  mode: PropTypes.oneOf(['alert', 'information', 'cookie']),\n  header: PropTypes.string,\n  firstButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.bool,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary'])\n  }),\n  secondButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  thirdButton: PropTypes.shape({\n    label: PropTypes.string,\n    handleOnclick: PropTypes.func,\n    type: PropTypes.oneOf(['dangerous', 'primary', 'secondary']),\n    'aria-label': PropTypes.string,\n    largeButton: PropTypes.boolean\n  }),\n  onClose: PropTypes.func,\n  icon: PropTypes.string,\n  backgroundImageUrl: PropTypes.string,\n  descriptionText: PropTypes.string,\n  cookieTitle: PropTypes.string,\n  descriptionBtnTxt: PropTypes.string,\n  listBtnSwicth: PropTypes.arrayOf(PropTypes.shape(InputSwitch.propTypes))\n};\n\nexport default CMPopin;\n"],"file":"index.js"}