@coorpacademy/components 10.22.4 → 10.22.7

package/README.md

@@ -99,7 +99,7 @@ Among the Lottie Atom's props, there are two *important* props: animationSrc & i
 that need an additional step, the ie11ImageBackup is needed as it's name implies because ie11 doesn't
 support Lottie (more specifically Web Components due to the Shadow DOM).
 
-First, you must upload to AWS S3 any new animation, in one of the static buckets (depending on the desired env), ex: 
+First, you must upload to AWS S3 any new animation, in one of the static buckets (depending on the desired env), ex:
 `https://static-staging.coorpacademy.com/animations/review/`.
 
 This animation must be paired with a backup image (svg) that'll be used for the ie11 scenario.
@@ -144,7 +144,6 @@ const props = {
 
 The props include classNames && size control to handle additional styling.
 
-
 ## Locally use in an external project
 
 Link your dependencies:
@@ -160,13 +159,20 @@ Build modifications:
 [@coorpacademy-components] > npm run build:es
 ```
 
-
 ## Use in mobile app
+
 Run `npm run build:watch`
-For more info see the mobile documentaion (`docs/local-sync.md`)
+For more info see the [mobile documentation](https://github.com/CoorpAcademy/mobile/blob/master/docs/local-sync.md)
+
+You may need to install these optional libs depending on which native components you use:
+
+- `color`
+- `react-native-modal`
+- `react-native-render-html`
+- `react-native-linear-gradient`
 
 ## Troubleshooting
 
 Error when trying to launch the storybook:
 
-Try to delete your ```node_modules```, go to the project's root and launch: ```yarn && yarn bootstrap``` 
+Try to delete your ```node_modules```, go to the project's root and launch: ```yarn && yarn bootstrap```

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Html from '../html/index.native';
+import ImageBackground from '../image-background/index.native';
+import getCleanUri from '../../util/get-clean-uri';
+import Touchable from '../../hoc/touchable/index.native';
+import { useTemplateContext } from '../../template/app-review/template-context';
+
+const createStyleSheet = theme => StyleSheet.create({
+  boxShadow: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 8,
+    backgroundColor: '#0000'
+  },
+  container: {
+    minHeight: 80,
+    backgroundColor: theme.colors.white,
+    borderRadius: theme.radius.regular,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  textContainer: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1
+  },
+  squeezedTextContainer: {
+    padding: theme.spacing.small,
+    paddingLeft: undefined,
+    paddingVertical: undefined,
+    paddingRight: undefined,
+    flex: 0
+  },
+  text: {
+    fontWeight: theme.fontWeight.bold,
+    color: theme.colors.black
+  },
+  textSelected: {
+    color: theme.colors.white
+  },
+  unselectedImageContainer: {
+    borderRightColor: theme.colors.border
+  },
+  imageContainer: {
+    height: '100%',
+    width: '25%'
+  },
+  image: {
+    flex: 1
+  }
+});
+
+const Choice = ({
+  children,
+  isSelected = false,
+  squeezed = false,
+  isDisabled,
+  onPress,
+  media,
+  testID: prefixTestID,
+  style,
+  questionType
+}) => {
+  const templateContext = useTemplateContext();
+  const {
+    theme,
+    brandTheme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = useState(null);
+  useEffect(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const selectedStyle = brandTheme && {
+    backgroundColor: brandTheme.colors.primary,
+    borderColor: brandTheme.colors.primary,
+    borderRadius: theme.radius.common
+  };
+  const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';
+  const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();
+  const url = media && media.type === 'img' && media.src && media.src.length > 0 && getCleanUri(media.src[0].url);
+  const source = {
+    uri: url ? getCleanUri(url) : undefined
+  };
+  const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';
+  const htmlStyle = [styleSheet.text];
+
+  if (isSelected) {
+    htmlStyle.push(styleSheet.textSelected);
+  }
+
+  return /*#__PURE__*/React.createElement(Touchable, {
+    onPress: !isDisabled ? onPress : undefined,
+    style: style,
+    analyticsID: "question-choice",
+    analyticsParams: {
+      questionType
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styleSheet.boxShadow, styleSheet.container],
+    testID: prefixTestID && `${prefixTestID}${selectedSuffix}`
+  }, url ? /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.imageContainer
+  }, /*#__PURE__*/React.createElement(ImageBackground, {
+    testID: prefixTestID && `${prefixTestID}${mediaSuffix}`,
+    source: source,
+    style: styleSheet.image
+  })) : null, /*#__PURE__*/React.createElement(View, {
+    style: [styleSheet.textContainer, squeezed && styleSheet.squeezedTextContainer, isSelected && selectedStyle]
+  }, /*#__PURE__*/React.createElement(Html, {
+    fontSize: squeezed ? theme.fontSize.medium : theme.fontSize.regular,
+    style: htmlStyle
+  }, children))));
+};
+
+export default Choice;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["React","useEffect","useState","View","StyleSheet","Html","ImageBackground","getCleanUri","Touchable","useTemplateContext","createStyleSheet","theme","create","boxShadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","backgroundColor","container","minHeight","colors","white","borderRadius","radius","regular","overflow","flexDirection","alignItems","textContainer","paddingHorizontal","paddingVertical","justifyContent","flex","squeezedTextContainer","padding","spacing","small","paddingLeft","undefined","paddingRight","text","fontWeight","bold","color","black","textSelected","unselectedImageContainer","borderRightColor","border","imageContainer","image","Choice","children","isSelected","squeezed","isDisabled","onPress","media","testID","prefixTestID","style","questionType","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","selectedStyle","primary","borderColor","common","selectedSuffix","mediaType","type","toLowerCase","url","src","length","source","uri","mediaSuffix","htmlStyle","push","fontSize","medium"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle} from 'react-native';\nimport type {Media, QuestionType} from '../../types/progression-engine';\n\nimport Html from '../html/index.native';\nimport ImageBackground from '../image-background/index.native';\nimport getCleanUri from '../../util/get-clean-uri';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\nexport type Props = {\n  isSelected?: boolean;\n  onPress: () => void;\n  children: string;\n  isDisabled?: boolean;\n  testID?: string;\n  media?: Media;\n  squeezed?: boolean;\n  style?: ViewStyle;\n  questionType: QuestionType;\n};\n\ntype StyleSheetType = {\n  boxShadow: any;\n  container: any;\n  text: any;\n  textSelected: any;\n  textContainer: any;\n  squeezedTextContainer: any;\n  unselectedImageContainer: any;\n  imageContainer: any;\n  image: any;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    boxShadow: {\n      shadowColor: '#000',\n      shadowOffset: {width: 0, height: 4},\n      shadowOpacity: 0.12,\n      shadowRadius: 16,\n      elevation: 8,\n      backgroundColor: '#0000'\n    },\n    container: {\n      minHeight: 80,\n      backgroundColor: theme.colors.white,\n      borderRadius: theme.radius.regular,\n      overflow: 'hidden',\n      flexDirection: 'row',\n      alignItems: 'stretch'\n    },\n    textContainer: {\n      paddingHorizontal: 24,\n      paddingVertical: 12,\n      justifyContent: 'center',\n      alignItems: 'center',\n      flex: 1\n    },\n    squeezedTextContainer: {\n      padding: theme.spacing.small,\n      paddingLeft: undefined,\n      paddingVertical: undefined,\n      paddingRight: undefined,\n      flex: 0\n    },\n    text: {\n      fontWeight: theme.fontWeight.bold,\n      color: theme.colors.black\n    },\n    textSelected: {\n      color: theme.colors.white\n    },\n    unselectedImageContainer: {\n      borderRightColor: theme.colors.border\n    },\n    imageContainer: {\n      height: '100%',\n      width: '25%'\n    },\n    image: {\n      flex: 1\n    }\n  });\n\nconst Choice = ({\n  children,\n  isSelected = false,\n  squeezed = false,\n  isDisabled,\n  onPress,\n  media,\n  testID: prefixTestID,\n  style,\n  questionType\n}: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedStyle = brandTheme && {\n    backgroundColor: brandTheme.colors.primary,\n    borderColor: brandTheme.colors.primary,\n    borderRadius: theme.radius.common\n  };\n\n  const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';\n  const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();\n  const url =\n    media &&\n    media.type === 'img' &&\n    media.src &&\n    media.src.length > 0 &&\n    getCleanUri(media.src[0].url);\n\n  const source = {uri: url ? getCleanUri(url) : undefined};\n  const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';\n\n  const htmlStyle: ViewStyle[] = [styleSheet.text];\n\n  if (isSelected) {\n    htmlStyle.push(styleSheet.textSelected);\n  }\n\n  return (\n    <Touchable\n      onPress={!isDisabled ? onPress : undefined}\n      style={style}\n      analyticsID=\"question-choice\"\n      analyticsParams={{questionType}}\n    >\n      <View\n        style={[styleSheet.boxShadow, styleSheet.container]}\n        testID={prefixTestID && `${prefixTestID}${selectedSuffix}`}\n      >\n        {url ? (\n          <View style={styleSheet.imageContainer}>\n            <ImageBackground\n              testID={prefixTestID && `${prefixTestID}${mediaSuffix}`}\n              source={source}\n              style={styleSheet.image}\n            />\n          </View>\n        ) : null}\n        <View\n          style={[\n            styleSheet.textContainer,\n            squeezed && styleSheet.squeezedTextContainer,\n            isSelected && selectedStyle\n          ]}\n        >\n          <Html\n            fontSize={squeezed ? theme.fontSize.medium : theme.fontSize.regular}\n            style={htmlStyle}\n          >\n            {children}\n          </Html>\n        </View>\n      </View>\n    </Touchable>\n  );\n};\n\nexport default Choice;\n"],"file":"index.native.js"}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import LinearGradient from 'react-native-linear-gradient';
+import Color from 'color';
+
+const Gradient = ({
+  children,
+  colors,
+  transparencyPosition = 'top',
+  height,
+  style,
+  testID,
+  pointerEvents
+}) => {
+  let calculatedColors = colors;
+
+  if (colors.length === 1) {
+    const {
+      r,
+      g,
+      b
+    } = Color(colors[0]).object();
+    calculatedColors = transparencyPosition === 'top' ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]] : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];
+  }
+
+  const _style = [];
+
+  if (style) {
+    _style.push(style);
+  }
+
+  if (height) {
+    _style.push({
+      height
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(LinearGradient, {
+    colors: calculatedColors,
+    style: _style,
+    pointerEvents: pointerEvents,
+    testID: testID
+  }, children);
+};
+
+export default Gradient;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/gradient/index.native.tsx"],"names":["React","LinearGradient","Color","Gradient","children","colors","transparencyPosition","height","style","testID","pointerEvents","calculatedColors","length","r","g","b","object","_style","push"],"mappings":"AAAA,OAAOA,KAAP,MAA+B,OAA/B;AAEA,OAAOC,cAAP,MAA2B,8BAA3B;AACA,OAAOC,KAAP,MAAkB,OAAlB;;AAYA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,oBAAoB,GAAG,KAHP;AAIhBC,EAAAA,MAJgB;AAKhBC,EAAAA,KALgB;AAMhBC,EAAAA,MANgB;AAOhBC,EAAAA;AAPgB,CAAD,KAQJ;AACX,MAAIC,gBAAgB,GAAGN,MAAvB;;AACA,MAAIA,MAAM,CAACO,MAAP,KAAkB,CAAtB,EAAyB;AACvB,UAAM;AAACC,MAAAA,CAAD;AAAIC,MAAAA,CAAJ;AAAOC,MAAAA;AAAP,QAAYb,KAAK,CAACG,MAAM,CAAC,CAAD,CAAP,CAAL,CAAiBW,MAAjB,EAAlB;AACAL,IAAAA,gBAAgB,GACdL,oBAAoB,KAAK,KAAzB,GACI,CAAE,QAAOO,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAAvB,EAA8BV,MAAM,CAAC,CAAD,CAApC,EAAyCA,MAAM,CAAC,CAAD,CAA/C,CADJ,GAEI,CAACA,MAAM,CAAC,CAAD,CAAP,EAAYA,MAAM,CAAC,CAAD,CAAlB,EAAwB,QAAOQ,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAA7C,CAHN;AAID;;AAED,QAAME,MAAM,GAAG,EAAf;;AAEA,MAAIT,KAAJ,EAAW;AACTS,IAAAA,MAAM,CAACC,IAAP,CAAYV,KAAZ;AACD;;AACD,MAAID,MAAJ,EAAY;AACVU,IAAAA,MAAM,CAACC,IAAP,CAAY;AAACX,MAAAA;AAAD,KAAZ;AACD;;AAED,sBACE,oBAAC,cAAD;AACE,IAAA,MAAM,EAAEI,gBADV;AAEE,IAAA,KAAK,EAAEM,MAFT;AAGE,IAAA,aAAa,EAAEP,aAHjB;AAIE,IAAA,MAAM,EAAED;AAJV,KAMGL,QANH,CADF;AAUD,CArCD;;AAuCA,eAAeD,QAAf","sourcesContent":["import React, {ReactNode} from 'react';\nimport {ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport Color from 'color';\n\nexport type Props = {\n  children?: ReactNode;\n  colors: Array<string>;\n  transparencyPosition?: 'top' | 'bottom';\n  height?: number;\n  style?: ViewStyle | ViewStyle[] | undefined;\n  testID?: string;\n  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only' | undefined;\n};\n\nconst Gradient = ({\n  children,\n  colors,\n  transparencyPosition = 'top',\n  height,\n  style,\n  testID,\n  pointerEvents\n}: Props) => {\n  let calculatedColors = colors;\n  if (colors.length === 1) {\n    const {r, g, b} = Color(colors[0]).object();\n    calculatedColors =\n      transparencyPosition === 'top'\n        ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]]\n        : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];\n  }\n\n  const _style = [];\n\n  if (style) {\n    _style.push(style);\n  }\n  if (height) {\n    _style.push({height});\n  }\n\n  return (\n    <LinearGradient\n      colors={calculatedColors}\n      style={_style}\n      pointerEvents={pointerEvents}\n      testID={testID}\n    >\n      {children}\n    </LinearGradient>\n  );\n};\n\nexport default Gradient;\n"],"file":"index.native.js"}

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

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View } from 'react-native';
 import HtmlBase from 'react-native-render-html';
 import { HTML_ANCHOR_TEXT_COLOR } from '../../variables/theme.native';
@@ -8,6 +8,7 @@ import { useTemplateContext } from '../../template/app-review/template-context';
 import Text, { DEFAULT_STYLE as DEFAULT_TEXT_STYLE } from '../text/index.native';
 
 const Html = props => {
+  const [disableBaseFontStyleColor, setDisableBaseFontStyleColor] = useState(false);
   const templateContext = useTemplateContext();
   const {
     theme,
@@ -28,13 +29,7 @@ const Html = props => {
   const handleLinkPress = useMemo(() => url => {
     vibration?.vibrate();
     onLinkPress && onLinkPress(url);
-  }, [onLinkPress, vibration]);
-  const state = {
-    disableBaseFontStyleColor: false
-  };
-  const {
-    disableBaseFontStyleColor
-  } = state; // Don't use StyleSheet there, it's not a react style
+  }, [onLinkPress, vibration]); // Don't use StyleSheet there, it's not a react style
 
   const styles = {
     p: {
@@ -96,11 +91,9 @@ const Html = props => {
 
   const renderers = {
     // eslint-disable-next-line react/display-name
-    font: (htmlAttribs, children) => {
+    font: (htmlAttribs, _children) => {
       if (htmlAttribs.color) {
-        this.setState({
-          disableBaseFontStyleColor: true
-        });
+        setDisableBaseFontStyleColor(true);
       }
 
       return /*#__PURE__*/React.createElement(Text, {
@@ -108,18 +101,18 @@ const Html = props => {
         style: _extends(_extends({}, baseFontStyle), {}, {
           color: htmlAttribs.color
         })
-      }, children);
+      }, _children);
     },
-    span: (_, children, convertedCSSStyles, {
+    span: function Span(_, _children, convertedCSSStyles, {
       allowFontScaling,
       key
-    }) => {
+    }) {
       return /*#__PURE__*/React.createElement(Text, {
         numberOfLines: numberOfLines,
         allowFontScaling: allowFontScaling,
         key: key,
         style: convertedCSSStyles
-      }, children);
+      }, _children);
     }
   };
   return /*#__PURE__*/React.createElement(View, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/html/index.native.tsx"],"names":["React","useMemo","View","HtmlBase","HTML_ANCHOR_TEXT_COLOR","useTemplateContext","Text","DEFAULT_STYLE","DEFAULT_TEXT_STYLE","Html","props","templateContext","theme","vibration","children","fontSize","containerStyle","imageStyle","style","testID","anchorTextColor","isTextCentered","numberOfLines","onLinkPress","handleLinkPress","url","vibrate","state","disableBaseFontStyleColor","styles","p","marginVertical","textAlign","u","textDecorationLine","i","fontStyle","b","fontWeight","bold","s","tagsStyles","h1","h2","h3","h4","h5","h6","a","color","img","baseFontStyle","colors","black","Array","isArray","styleObject","reduce","result","child","renderers","font","htmlAttribs","setState","span","_","convertedCSSStyles","allowFontScaling","key","html"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport {View, ViewStyle, ImageStyle, TextStyle} from 'react-native';\nimport HtmlBase from 'react-native-render-html';\n\nimport {HTML_ANCHOR_TEXT_COLOR} from '../../variables/theme.native';\nimport {Vibration} from '../../variables/vibration';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Text, {DEFAULT_STYLE as DEFAULT_TEXT_STYLE} from '../text/index.native';\n\ntype State = {\n  disableBaseFontStyleColor: boolean;\n};\n\nexport type Props = {\n  children: string;\n  fontSize: number;\n  numberOfLines?: number;\n  onLinkPress?: (url: string) => void;\n  containerStyle?: ViewStyle;\n  anchorTextColor?: string;\n  imageStyle?: ImageStyle;\n  style?: TextStyle;\n  testID?: string;\n  isTextCentered?: boolean;\n  vibration?: Vibration;\n};\n\nconst Html = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, vibration} = templateContext;\n  const {\n    children,\n    fontSize,\n    containerStyle,\n    imageStyle,\n    style,\n    testID,\n    anchorTextColor = HTML_ANCHOR_TEXT_COLOR,\n    isTextCentered,\n    numberOfLines,\n    onLinkPress\n  } = props;\n\n  const handleLinkPress = useMemo(\n    () => (url: string) => {\n      vibration?.vibrate();\n\n      onLinkPress && onLinkPress(url);\n    },\n    [onLinkPress, vibration]\n  );\n\n  const state: State = {\n    disableBaseFontStyleColor: false\n  };\n\n  const {disableBaseFontStyleColor} = state;\n\n  // Don't use StyleSheet there, it's not a react style\n  const styles = {\n    p: {\n      marginVertical: 0,\n      textAlign: 'center'\n    },\n    u: {\n      textDecorationLine: 'underline'\n    },\n    i: {\n      fontStyle: 'italic'\n    },\n    b: {\n      fontWeight: theme.fontWeight.bold\n    },\n    s: {\n      textDecorationLine: 'line-through'\n    }\n  };\n\n  const tagsStyles = {\n    ...styles,\n    h1: {fontSize},\n    h2: {fontSize},\n    h3: {fontSize},\n    h4: {fontSize},\n    h5: {fontSize},\n    h6: {fontSize},\n    a: {color: anchorTextColor},\n    img: imageStyle\n  };\n\n  let baseFontStyle = {...DEFAULT_TEXT_STYLE, fontSize, color: theme.colors.black};\n  if (style) {\n    if (Array.isArray(style)) {\n      const styleObject = style.reduce((result, child) => ({\n        ...result,\n        ...child\n      }));\n      baseFontStyle = {\n        ...baseFontStyle,\n        ...styleObject\n      };\n    } else {\n      baseFontStyle = {\n        ...baseFontStyle,\n        ...style\n      };\n    }\n  }\n\n  const renderers = {\n    // eslint-disable-next-line react/display-name\n    font: (htmlAttribs, children) => {\n      if (htmlAttribs.color) {\n        this.setState({disableBaseFontStyleColor: true});\n      }\n      return (\n        <Text\n          key={1}\n          style={{\n            ...baseFontStyle,\n            color: htmlAttribs.color\n          }}\n        >\n          {children}\n        </Text>\n      );\n    },\n    span: (_: any, children: any, convertedCSSStyles: any, {allowFontScaling, key}: any) => {\n      return (\n        <Text\n          numberOfLines={numberOfLines}\n          allowFontScaling={allowFontScaling}\n          key={key}\n          style={convertedCSSStyles}\n        >\n          {children}\n        </Text>\n      );\n    }\n  };\n\n  return (\n    <View testID={testID} style={containerStyle}>\n      <HtmlBase\n        // to text-align center on android\n        // we have to encapsulate between <p> tag\n        // and use custom style define on <p>\n        // definition in component style doesn't work\n        source={{\n          // eslint-disable-next-line no-nested-ternary\n          html: isTextCentered\n            ? `<p>${children}</p>`\n            : numberOfLines\n            ? `<span>${children}</span>`\n            : `${children}`\n        }}\n        tagsStyles={tagsStyles}\n        baseFontStyle={{\n          ...baseFontStyle,\n          color: disableBaseFontStyleColor ? null : baseFontStyle.color\n        }}\n        onLinkPress={handleLinkPress}\n        renderers={renderers}\n        // this is exceptionally for the onboarding course\n        // is the only course that has a gif in the context but the img tag\n        // comes with width & height attr and these makes this lib do not render the gif\n        // so to avoid it, we decided to ignore these attr\n        ignoredStyles={['width', 'height']}\n        testID=\"html-base\"\n      />\n    </View>\n  );\n};\n\nexport default Html;\n"],"file":"index.native.js"}
+{"version":3,"sources":["../../../src/atom/html/index.native.tsx"],"names":["React","useMemo","useState","View","HtmlBase","HTML_ANCHOR_TEXT_COLOR","useTemplateContext","Text","DEFAULT_STYLE","DEFAULT_TEXT_STYLE","Html","props","disableBaseFontStyleColor","setDisableBaseFontStyleColor","templateContext","theme","vibration","children","fontSize","containerStyle","imageStyle","style","testID","anchorTextColor","isTextCentered","numberOfLines","onLinkPress","handleLinkPress","url","vibrate","styles","p","marginVertical","textAlign","u","textDecorationLine","i","fontStyle","b","fontWeight","bold","s","tagsStyles","h1","h2","h3","h4","h5","h6","a","color","img","baseFontStyle","colors","black","Array","isArray","styleObject","reduce","result","child","renderers","font","htmlAttribs","_children","span","Span","_","convertedCSSStyles","allowFontScaling","key","html"],"mappings":"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","sourcesContent":["import React, {useMemo, useState} from 'react';\nimport {View, ViewStyle, ImageStyle, TextStyle} from 'react-native';\nimport HtmlBase from 'react-native-render-html';\n\nimport {HTML_ANCHOR_TEXT_COLOR} from '../../variables/theme.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Text, {DEFAULT_STYLE as DEFAULT_TEXT_STYLE} from '../text/index.native';\n\nexport type Props = {\n  children: string;\n  fontSize: TextStyle['fontSize'];\n  numberOfLines?: number;\n  onLinkPress?: (url: string) => void;\n  containerStyle?: ViewStyle;\n  anchorTextColor?: string;\n  imageStyle?: ImageStyle;\n  style?: ViewStyle | ViewStyle[];\n  testID?: string;\n  isTextCentered?: boolean;\n};\n\nconst Html = (props: Props) => {\n  const [disableBaseFontStyleColor, setDisableBaseFontStyleColor] = useState<boolean>(false);\n  const templateContext = useTemplateContext();\n  const {theme, vibration} = templateContext;\n  const {\n    children,\n    fontSize,\n    containerStyle,\n    imageStyle,\n    style,\n    testID,\n    anchorTextColor = HTML_ANCHOR_TEXT_COLOR,\n    isTextCentered,\n    numberOfLines,\n    onLinkPress\n  } = props;\n\n  const handleLinkPress = useMemo(\n    () => (url: string) => {\n      vibration?.vibrate();\n\n      onLinkPress && onLinkPress(url);\n    },\n    [onLinkPress, vibration]\n  );\n\n  // Don't use StyleSheet there, it's not a react style\n  const styles = {\n    p: {\n      marginVertical: 0,\n      textAlign: 'center'\n    },\n    u: {\n      textDecorationLine: 'underline'\n    },\n    i: {\n      fontStyle: 'italic'\n    },\n    b: {\n      fontWeight: theme.fontWeight.bold\n    },\n    s: {\n      textDecorationLine: 'line-through'\n    }\n  };\n\n  const tagsStyles = {\n    ...styles,\n    h1: {fontSize},\n    h2: {fontSize},\n    h3: {fontSize},\n    h4: {fontSize},\n    h5: {fontSize},\n    h6: {fontSize},\n    a: {color: anchorTextColor},\n    img: imageStyle\n  };\n\n  let baseFontStyle = {...DEFAULT_TEXT_STYLE, fontSize, color: theme.colors.black};\n  if (style) {\n    if (Array.isArray(style)) {\n      const styleObject = style.reduce((result, child) => ({\n        ...result,\n        ...child\n      }));\n      baseFontStyle = {\n        ...baseFontStyle,\n        ...styleObject\n      };\n    } else {\n      baseFontStyle = {\n        ...baseFontStyle,\n        ...style\n      };\n    }\n  }\n\n  const renderers = {\n    // eslint-disable-next-line react/display-name\n    font: (htmlAttribs, _children) => {\n      if (htmlAttribs.color) {\n        setDisableBaseFontStyleColor(true);\n      }\n      return (\n        <Text\n          key={1}\n          style={{\n            ...baseFontStyle,\n            color: htmlAttribs.color\n          }}\n        >\n          {_children}\n        </Text>\n      );\n    },\n    span: function Span(\n      _: any,\n      _children: any,\n      convertedCSSStyles: any,\n      {allowFontScaling, key}: any\n    ) {\n      return (\n        <Text\n          numberOfLines={numberOfLines}\n          allowFontScaling={allowFontScaling}\n          key={key}\n          style={convertedCSSStyles}\n        >\n          {_children}\n        </Text>\n      );\n    }\n  };\n\n  return (\n    <View testID={testID} style={containerStyle}>\n      <HtmlBase\n        // to text-align center on android\n        // we have to encapsulate between <p> tag\n        // and use custom style define on <p>\n        // definition in component style doesn't work\n        source={{\n          // eslint-disable-next-line no-nested-ternary\n          html: isTextCentered\n            ? `<p>${children}</p>`\n            : numberOfLines\n            ? `<span>${children}</span>`\n            : `${children}`\n        }}\n        tagsStyles={tagsStyles}\n        baseFontStyle={{\n          ...baseFontStyle,\n          color: disableBaseFontStyleColor ? null : baseFontStyle.color\n        }}\n        onLinkPress={handleLinkPress}\n        renderers={renderers}\n        // this is exceptionally for the onboarding course\n        // is the only course that has a gif in the context but the img tag\n        // comes with width & height attr and these makes this lib do not render the gif\n        // so to avoid it, we decided to ignore these attr\n        ignoredStyles={['width', 'height']}\n        testID=\"html-base\"\n      />\n    </View>\n  );\n};\n\nexport default Html;\n"],"file":"index.native.js"}

package/es/atom/image-background/index.native.js

@@ -0,0 +1,90 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { ImageBackground as ImageBackgroundBase, StyleSheet } from 'react-native';
+import getCleanUri from '../../util/get-clean-uri';
+import getResizedImage from '../../util/get-resized-image';
+import Gradient from '../gradient/index.native';
+const styles = StyleSheet.create({
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  gradient: {
+    flex: 1
+  }
+});
+
+const ImageBackground = (_ref) => {
+  let {
+    source,
+    gradient,
+    gradientStyle,
+    style,
+    testID = 'image-background'
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["source", "gradient", "gradientStyle", "style", "testID"]);
+
+  // @ts-ignore this statement is enough but type is too weak
+  let uri = source && source.uri;
+
+  if (uri) {
+    const {
+      width: _width,
+      height: _height,
+      resizeMode
+    } = props;
+    const {
+      width,
+      height
+    } = StyleSheet.flatten([{
+      width: _width,
+      height: _height
+    }, style]);
+    const maxHeight = typeof height === 'number' ? height : undefined;
+    const maxWidth = typeof width === 'number' ? width : undefined;
+    uri = getResizedImage(getCleanUri(uri), {
+      maxHeight,
+      maxWidth,
+      resizeMode
+    });
+  }
+
+  const resizedSource = uri && {
+    uri
+  } || source;
+
+  if (gradient) {
+    const {
+      children
+    } = props,
+          remainingProps = _objectWithoutPropertiesLoose(props, ["children"]);
+
+    const _style = [styles.gradient];
+
+    if (gradientStyle) {
+      _style.push(gradientStyle);
+    }
+
+    return /*#__PURE__*/React.createElement(ImageBackgroundBase, _extends({}, remainingProps, {
+      source: resizedSource,
+      style: [styles.image, style],
+      testID: testID
+    }), /*#__PURE__*/React.createElement(Gradient, {
+      testID: `${testID}-gradient`,
+      colors: gradient,
+      style: _style
+    }, children));
+  }
+
+  return /*#__PURE__*/React.createElement(ImageBackgroundBase, _extends({}, props, {
+    source: resizedSource,
+    style: [styles.image, style],
+    testID: testID
+  }));
+};
+
+export default ImageBackground;
+//# sourceMappingURL=index.native.js.map

package/es/atom/image-background/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/image-background/index.native.tsx"],"names":["React","ImageBackground","ImageBackgroundBase","StyleSheet","getCleanUri","getResizedImage","Gradient","styles","create","image","width","height","gradient","flex","source","gradientStyle","style","testID","props","uri","_width","_height","resizeMode","flatten","maxHeight","undefined","maxWidth","resizedSource","children","remainingProps","_style","push"],"mappings":";;;;AAAA,OAAOA,KAAP,MAA+B,OAA/B;AACA,SACEC,eAAe,IAAIC,mBADrB,EAEEC,UAFF,QAKO,cALP;AAOA,OAAOC,WAAP,MAAwB,0BAAxB;AAEA,OAAOC,eAAP,MAA4B,8BAA5B;AACA,OAAOC,QAAP,MAAqB,0BAArB;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;AAC/BC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE,MADF;AAELC,IAAAA,MAAM,EAAE;AAFH,GADwB;AAK/BC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,IAAI,EAAE;AADE;AALqB,CAAlB,CAAf;;AAmBA,MAAMZ,eAAe,GAAG,UAOX;AAAA,MAPY;AACvBa,IAAAA,MADuB;AAEvBF,IAAAA,QAFuB;AAGvBG,IAAAA,aAHuB;AAIvBC,IAAAA,KAJuB;AAKvBC,IAAAA,MAAM,GAAG;AALc,GAOZ;AAAA,MADRC,KACQ;;AACX;AACA,MAAIC,GAAuB,GAAGL,MAAM,IAAIA,MAAM,CAACK,GAA/C;;AAEA,MAAIA,GAAJ,EAAS;AACP,UAAM;AAACT,MAAAA,KAAK,EAAEU,MAAR;AAAgBT,MAAAA,MAAM,EAAEU,OAAxB;AAAiCC,MAAAA;AAAjC,QAA+CJ,KAArD;AACA,UAAM;AAACR,MAAAA,KAAD;AAAQC,MAAAA;AAAR,QAAkBR,UAAU,CAACoB,OAAX,CAAmB,CAAC;AAACb,MAAAA,KAAK,EAAEU,MAAR;AAAgBT,MAAAA,MAAM,EAAEU;AAAxB,KAAD,EAAmCL,KAAnC,CAAnB,CAAxB;AACA,UAAMQ,SAA6B,GAAG,OAAOb,MAAP,KAAkB,QAAlB,GAA6BA,MAA7B,GAAsCc,SAA5E;AACA,UAAMC,QAA4B,GAAG,OAAOhB,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCe,SAAzE;AAEAN,IAAAA,GAAG,GAAGd,eAAe,CAACD,WAAW,CAACe,GAAD,CAAZ,EAAmB;AACtCK,MAAAA,SADsC;AAEtCE,MAAAA,QAFsC;AAGtCJ,MAAAA;AAHsC,KAAnB,CAArB;AAKD;;AAED,QAAMK,aAAa,GAAIR,GAAG,IAAI;AAACA,IAAAA;AAAD,GAAR,IAAkBL,MAAxC;;AAEA,MAAIF,QAAJ,EAAc;AACZ,UAAM;AAACgB,MAAAA;AAAD,QAAgCV,KAAtC;AAAA,UAAoBW,cAApB,iCAAsCX,KAAtC;;AACA,UAAMY,MAAmB,GAAG,CAACvB,MAAM,CAACK,QAAR,CAA5B;;AAEA,QAAIG,aAAJ,EAAmB;AACjBe,MAAAA,MAAM,CAACC,IAAP,CAAYhB,aAAZ;AACD;;AAED,wBACE,oBAAC,mBAAD,eACMc,cADN;AAEE,MAAA,MAAM,EAAEF,aAFV;AAGE,MAAA,KAAK,EAAE,CAACpB,MAAM,CAACE,KAAR,EAAeO,KAAf,CAHT;AAIE,MAAA,MAAM,EAAEC;AAJV,qBAME,oBAAC,QAAD;AAAU,MAAA,MAAM,EAAG,GAAEA,MAAO,WAA5B;AAAwC,MAAA,MAAM,EAAEL,QAAhD;AAA0D,MAAA,KAAK,EAAEkB;AAAjE,OACGF,QADH,CANF,CADF;AAYD;;AAED,sBACE,oBAAC,mBAAD,eACMV,KADN;AAEE,IAAA,MAAM,EAAES,aAFV;AAGE,IAAA,KAAK,EAAE,CAACpB,MAAM,CAACE,KAAR,EAAeO,KAAf,CAHT;AAIE,IAAA,MAAM,EAAEC;AAJV,KADF;AAQD,CAxDD;;AA0DA,eAAehB,eAAf","sourcesContent":["import React, {ReactNode} from 'react';\nimport {\n  ImageBackground as ImageBackgroundBase,\n  StyleSheet,\n  ViewStyle,\n  ImageStyle\n} from 'react-native';\n\nimport getCleanUri from '../../util/get-clean-uri';\n\nimport getResizedImage from '../../util/get-resized-image';\nimport Gradient from '../gradient/index.native';\n\nconst styles = StyleSheet.create({\n  image: {\n    width: '100%',\n    height: '100%'\n  },\n  gradient: {\n    flex: 1\n  }\n});\n\nexport type Props = ImageStyle & {\n  children?: ReactNode;\n  gradient?: Array<string>;\n  gradientStyle?: ViewStyle;\n  testID?: string;\n  source: {uri: string | undefined};\n  style?: ViewStyle;\n};\n\nconst ImageBackground = ({\n  source,\n  gradient,\n  gradientStyle,\n  style,\n  testID = 'image-background',\n  ...props\n}: Props) => {\n  // @ts-ignore this statement is enough but type is too weak\n  let uri: string | undefined = source && source.uri;\n\n  if (uri) {\n    const {width: _width, height: _height, resizeMode} = props;\n    const {width, height} = StyleSheet.flatten([{width: _width, height: _height}, style]);\n    const maxHeight: number | undefined = typeof height === 'number' ? height : undefined;\n    const maxWidth: number | undefined = typeof width === 'number' ? width : undefined;\n\n    uri = getResizedImage(getCleanUri(uri), {\n      maxHeight,\n      maxWidth,\n      resizeMode\n    });\n  }\n\n  const resizedSource = (uri && {uri}) || source;\n\n  if (gradient) {\n    const {children, ...remainingProps} = props;\n    const _style: ViewStyle[] = [styles.gradient];\n\n    if (gradientStyle) {\n      _style.push(gradientStyle);\n    }\n\n    return (\n      <ImageBackgroundBase\n        {...remainingProps}\n        source={resizedSource}\n        style={[styles.image, style]}\n        testID={testID}\n      >\n        <Gradient testID={`${testID}-gradient`} colors={gradient} style={_style}>\n          {children}\n        </Gradient>\n      </ImageBackgroundBase>\n    );\n  }\n\n  return (\n    <ImageBackgroundBase\n      {...props}\n      source={resizedSource}\n      style={[styles.image, style]}\n      testID={testID}\n    />\n  );\n};\n\nexport default ImageBackground;\n"],"file":"index.native.js"}

package/es/atom/input-switch/index.js

@@ -16,7 +16,9 @@ const InputSwitch = props => {
     description,
     modified = false,
     theme = 'default',
-    titlePosition = 'left'
+    titlePosition = 'left',
+    details = '',
+    requiredSelection = false
   } = props;
 
   const idSwitch = id || _uniqueId('input-switch-');
@@ -29,13 +31,42 @@ const InputSwitch = props => {
   const descriptionView = description ? /*#__PURE__*/React.createElement("div", {
     className: style.description
   }, description) : null;
-  const defaultClass = theme === 'coorpmanager' ? style.coorpmanager : style.default;
-  const modifiedClass = theme === 'coorpmanager' ? style.coorpmanagerModified : style.modified;
+
+  const getClass = () => {
+    switch (theme) {
+      case 'coorpmanager':
+        return {
+          defaultClass: style.coorpmanager,
+          modifiedClass: style.coorpmanagerModified
+        };
+
+      case 'mooc':
+        return {
+          defaultClass: style.partielUncheck,
+          modifiedClass: style.coorpmanagerModified
+        };
+
+      default:
+        return {
+          defaultClass: style.default,
+          modifiedClass: style.modified
+        };
+    }
+  };
+
+  const {
+    defaultClass,
+    modifiedClass
+  } = getClass();
   const className = getClassState(defaultClass, modifiedClass, null, modified);
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     "data-name": `switch-input-${theme}`
-  }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/React.createElement("input", {
+  }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/React.createElement("div", {
+    className: requiredSelection ? style.requiredSelection : null
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.btnSwitchContainer
+  }, /*#__PURE__*/React.createElement("input", {
     type: "checkbox",
     id: idSwitch,
     name: name,
@@ -46,7 +77,11 @@ const InputSwitch = props => {
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: idSwitch,
     "data-name": "input-switch-label"
-  }), titlePosition === 'right' ? titleView : null, descriptionView);
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: !details ? style.alignedTextContainer : null
+  }, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/React.createElement("div", {
+    className: style.detailsTxt
+  }, details) : null), descriptionView);
 };
 
 InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -59,7 +94,9 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
   description: PropTypes.string,
   modified: PropTypes.bool,
   titlePosition: PropTypes.oneOf(['right', 'left']),
-  theme: PropTypes.oneOf(['default', 'coorpmanager'])
+  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
+  details: PropTypes.string,
+  requiredSelection: PropTypes.bool
 } : {};
 export default InputSwitch;
 //# sourceMappingURL=index.js.map

package/es/atom/input-switch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","defaultClass","coorpmanager","default","modifiedClass","coorpmanagerModified","className","checkbox","propTypes","string","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left'\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const defaultClass = theme === 'coorpmanager' ? style.coorpmanager : style.default;\n  const modifiedClass = theme === 'coorpmanager' ? style.coorpmanagerModified : style.modified;\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <input\n        type=\"checkbox\"\n        id={idSwitch}\n        name={name}\n        onChange={handleChange}\n        checked={value}\n        disabled={isDisabled}\n        className={style.checkbox}\n      />\n      <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n      {titlePosition === 'right' ? titleView : null}\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\nexport default InputSwitch;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.default, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n          />\n          <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? titleView : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  details: PropTypes.string,\n  requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"file":"index.js"}