@coorpacademy/components 11.2.7 → 11.2.8-alpha.3

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

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","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","useTemplateContext","styleSheet","setStylesheet","useState","useEffect","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","useCallback","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","_value","selectedItem","find","item","selected","textStyles","push","dark"],"sources":["../../../src/atom/select-modal/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle} 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 '../../molecule/questions/types';\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 ChoiceItem = {\n  text: string;\n  selected: boolean;\n  _id: string;\n};\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: ViewStyle;\n  text: ViewStyle;\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\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.selected);\n  const text = (selectedItem && selectedItem.text) || placeholder || null;\n  let textStyles: TextStyle[] = [styleSheet.text];\n\n  if (textStyle) {\n    textStyles = [styleSheet.text, ...textStyle];\n  }\n  if (color) {\n    textStyles.push({color});\n  }\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={textStyles}>{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"],"mappings":"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"}
+{"version":3,"file":"index.native.js","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","useTemplateContext","brandTheme","styleSheet","setStylesheet","useState","useEffect","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","useCallback","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","_value","selectedItem","find","item","selected","textStyles","length","primary","push","dark"],"sources":["../../../src/atom/select-modal/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle} 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 '../../molecule/questions/types';\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 ChoiceItem = {\n  text: string;\n  selected: boolean;\n  _id: string;\n  value: string;\n};\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  onChange: OnChangeFunction;\n  onFocus: () => void;\n  onBlur: () => void;\n  style?: ViewStyle[];\n  textStyle?: ViewStyle[];\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  text: ViewStyle;\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\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 {brandTheme, 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    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.selected);\n  const text = (selectedItem && selectedItem.text) || placeholder || null;\n  let textStyles: TextStyle[] = [styleSheet.text];\n\n  if (textStyle) {\n    textStyles = [styleSheet.text, ...textStyle];\n  }\n\n  let color;\n  if ((selectedItem?.value?.length || 0) > 0) {\n    color = brandTheme?.colors?.primary;\n    textStyles.push({color});\n  }\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={textStyles}>{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"],"mappings":"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"}

package/lib/molecule/questions/mobile/template/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE3E,OAAO,EACL,eAAe,EACf,UAAU,EACV,WAAW,EAEZ,MAAM,kDAAkD,CAAC;AA+J1D,oBAAY,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,uBA+CrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE3E,OAAO,EACL,eAAe,EACf,UAAU,EACV,WAAW,EAEZ,MAAM,kDAAkD,CAAC;AAoJ1D,oBAAY,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,uBA+CrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -80,15 +80,11 @@ const Item = props => {
   const templateContext = (0, _templateContext.useTemplateContext)();
   const {
     theme,
-    brandTheme,
     translations
   } = templateContext;
   const inputNames = choices.map(choice => choice.name);
   const id = `question-part-${index + 1}`;
   const isFocused = focusedSelectId === id;
-  const coloredText = brandTheme && {
-    color: brandTheme.colors?.primary
-  };
 
   if (part.type === 'answerField' && inputNames.includes(part.value)) {
     const choiceIndex = choices.findIndex(choice => choice.name === part.value);
@@ -121,17 +117,8 @@ const Item = props => {
     }
 
     const selectInputStyle = [styles.selectInput];
-
-    if (coloredText && value) {
-      selectInputStyle.push(coloredText);
-    }
-
     const selectTextStyle = [styles.selectText];
 
-    if (coloredText && value) {
-      selectTextStyle.push(coloredText);
-    }
-
     if (choice.type === 'select') {
       return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
         style: styles.spaced,

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

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","BOX_STYLE","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","index","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","useTemplateContext","brandTheme","translations","inputNames","map","choice","name","id","isFocused","coloredText","primary","type","includes","value","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","push","selectTextStyle","items","selectAnAnswer","trim","QuestionTemplate","template","styleSheet","setStylesheet","useState","useEffect","_stylesheet","parts","parseTemplateString"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  index: number;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    index,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, brandTheme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${index + 1}`;\n  const isFocused = focusedSelectId === id;\n\n  const coloredText = brandTheme && {\n    color: brandTheme.colors?.primary\n  };\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    if (coloredText && value) {\n      selectInputStyle.push(coloredText);\n    }\n\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n    if (coloredText && value) {\n      selectTextStyle.push(coloredText);\n    }\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map((part, id) => (\n        <View key={`question-part-${id}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            index={id}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","BOX_STYLE","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","index","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","useTemplateContext","translations","inputNames","map","choice","name","id","isFocused","type","includes","value","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","selectTextStyle","items","selectAnAnswer","trim","QuestionTemplate","template","styleSheet","setStylesheet","useState","useEffect","_stylesheet","parts","parseTemplateString"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  index: number;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    index,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${index + 1}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map((part, id) => (\n        <View key={`question-part-${id}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            index={id}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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"}

package/lib/molecule/review-correction-popin/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AA4PvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AA6PvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/molecule/review-correction-popin/index.native.js

@@ -29,9 +29,10 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 const createStyleSheet = (theme, type) => _reactNative.StyleSheet.create({
   wrapper: {
-    height: 'auto',
-    color: theme.colors.white,
-    display: 'flex'
+    backgroundColor: '#00000000',
+    height: 2000,
+    display: 'flex',
+    justifyContent: 'flex-end'
   },
   popin: {
     padding: theme.spacing.medium,

package/lib/molecule/review-correction-popin/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","type","StyleSheet","create","wrapper","height","color","colors","white","display","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","backgroundColor","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","justifyContent","opacity","icon","resultLabel","fontSize","fontWeight","lineHeight","marginLeft","textTransform","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","useState","fadeIn","useAnimateProp","property","fromValue","toValue","easing","Easing","bezier","handlePressKey","useCallback","start","revert","tooltip","animatedStyle","ICONS","RightIcon","wrong","WrongIcon","ReviewCorrectionPopin","information","next","templateContext","useTemplateContext","setStylesheet","handlePressNext","onClick","Icon","useEffect","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon,\n  NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n  wrapper: ViewStyle;\n  popin: ViewStyle;\n  correctionSection: ViewStyle;\n  iconCircle: ViewStyle;\n  icon: ViewStyle;\n  resultLabel: TextStyle;\n  feedbackSection: ViewStyle;\n  labelContainer: ViewStyle;\n  label: TextStyle;\n  htmlInfoMessage: TextStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n  buttonKlf: ViewStyle;\n  buttonKlfActive: TextStyle;\n  buttonKlfText: TextStyle;\n  iconKey: ViewStyle;\n  containerTooltip: ViewStyle;\n  buttonTooltip: ViewStyle;\n  containerButtonKlf: ViewStyle;\n  triangleTooltip: ViewStyle;\n  htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      height: 'auto',\n      color: theme.colors.white,\n      display: 'flex'\n    },\n    popin: {\n      padding: theme.spacing.medium,\n      borderRadius: 16,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowOpacity: 0.5,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 15,\n      elevation: 4\n    },\n    correctionSection: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '80%'\n    },\n    iconCircle: {\n      width: 60,\n      height: 60,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      opacity: 0.7,\n      borderRadius: 50\n    },\n    icon: {\n      height: 30,\n      width: 30\n    },\n    resultLabel: {\n      color: theme.colors.white,\n      fontSize: 24,\n      fontWeight: '600',\n      lineHeight: 24,\n      marginLeft: 12,\n      textTransform: 'uppercase'\n    },\n    feedbackSection: {\n      marginVertical: theme.spacing.medium\n    },\n    labelContainer: {\n      alignSelf: 'flex-start',\n      backgroundColor: 'rgba(255, 255, 255, 0.3)',\n      borderRadius: 56,\n      paddingHorizontal: theme.spacing.tiny,\n      paddingVertical: theme.spacing.micro,\n      marginBottom: 8\n    },\n    label: {\n      color: theme.colors.white,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.extraBold,\n      lineHeight: 17\n    },\n    htmlInfoMessage: {\n      color: theme.colors.white,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 19\n    },\n    button: {\n      alignSelf: 'stretch',\n      backgroundColor: theme.colors.white,\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small\n    },\n    buttonText: {\n      color: theme.colors.cta,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    containerButtonKlf: {\n      width: '100%'\n    },\n    buttonKlf: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(255, 255, 255, 0.1)',\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small,\n      marginBottom: theme.spacing.tiny\n    },\n    buttonKlfActive: {\n      backgroundColor:\n        'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n    },\n    buttonKlfText: {\n      color: 'white',\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    iconKey: {\n      width: 12,\n      height: 12,\n      marginRight: theme.spacing.tiny\n    },\n    containerTooltip: {\n      zIndex: 30,\n      position: 'relative',\n      shadowColor: theme.colors.black,\n      shadowOpacity: 0.3,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 8\n    },\n    buttonTooltip: {\n      flexDirection: 'column',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      borderRadius: 15,\n      padding: theme.spacing.small,\n      width: '112%',\n      position: 'absolute',\n      bottom: 4,\n      right: -15,\n      zIndex: 20\n    },\n    htmlTooltipText: {\n      color: theme.colors.text.primary,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 22,\n      textAlign: 'center'\n    },\n    triangleTooltip: {\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 13,\n      borderRightWidth: 13,\n      borderBottomWidth: 13,\n      borderTopWidth: 13,\n      borderLeftColor: 'transparent',\n      borderTopColor: 'transparent',\n      borderRightColor: theme.colors.white,\n      borderBottomColor: theme.colors.white,\n      transform: [{rotate: '45deg'}],\n      position: 'absolute',\n      left: 110,\n      top: -20,\n      borderRadius: 4\n    }\n  });\n\nconst KlfButton = ({\n  klf,\n  styleSheet\n}: {\n  klf: ReviewCorrectionPopinKLFProps;\n  styleSheet: StyleSheetType;\n}) => {\n  const [displayTooltip, setDisplayTooltip] = useState(false);\n  const fadeIn = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    easing: Easing.bezier(0.25, 1, 0.5, 1)\n  });\n\n  const handlePressKey = useCallback(() => {\n    setDisplayTooltip(!displayTooltip);\n    !displayTooltip ? fadeIn.start() : fadeIn.revert();\n  }, [displayTooltip, fadeIn]);\n\n  const {\n    buttonKlf,\n    buttonKlfActive,\n    buttonKlfText,\n    containerButtonKlf,\n    containerTooltip,\n    buttonTooltip,\n    htmlTooltipText,\n    iconKey,\n    triangleTooltip\n  } = styleSheet;\n\n  const {label, tooltip} = klf;\n\n  return (\n    <View style={containerButtonKlf}>\n      <Animated.View style={[containerTooltip, fadeIn.animatedStyle]}>\n        <Touchable\n          style={buttonTooltip}\n          accessibilityLabel={`aria-label-tooltip`}\n          isHighlight\n          onPress={handlePressKey}\n          testID=\"button-tooltip\"\n        >\n          <Html style={htmlTooltipText}>{tooltip}</Html>\n        </Touchable>\n        <View style={triangleTooltip} />\n      </Animated.View>\n      <Touchable\n        style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n        accessibilityLabel={`aria-label-${label}`}\n        onPress={handlePressKey}\n        testID=\"button-klf\"\n      >\n        <KlfIcon style={iconKey} color=\"white\" />\n        <Text style={buttonKlfText}>{label}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nconst ICONS = {\n  right: RightIcon,\n  wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n  information,\n  klf,\n  next,\n  type,\n  resultLabel\n}: ReviewCorrectionPopinProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const handlePressNext = next.onClick;\n\n  const Icon = ICONS[type];\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme, type);\n    setStylesheet(_stylesheet);\n  }, [theme, type]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.wrapper}>\n      <View style={styleSheet.popin}>\n        <View style={styleSheet.correctionSection}>\n          <View style={styleSheet.iconCircle}>\n            <Icon\n              style={styleSheet.icon}\n              color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n            />\n          </View>\n          <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n        </View>\n        <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n          <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n            <Text accessibilityLabel={information.label} style={styleSheet.label}>\n              {information.label}\n            </Text>\n          </View>\n          <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n        </View>\n        {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n        <Touchable\n          style={styleSheet.button}\n          onPress={handlePressNext}\n          accessibilityLabel={next['aria-label']}\n          testID={next['data-name']}\n        >\n          <Text style={styleSheet.buttonText}>{next.label}</Text>\n        </Touchable>\n      </View>\n    </View>\n  );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","type","StyleSheet","create","wrapper","backgroundColor","height","display","justifyContent","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","colors","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","white","opacity","icon","resultLabel","color","fontSize","fontWeight","lineHeight","marginLeft","textTransform","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","useState","fadeIn","useAnimateProp","property","fromValue","toValue","easing","Easing","bezier","handlePressKey","useCallback","start","revert","tooltip","animatedStyle","ICONS","RightIcon","wrong","WrongIcon","ReviewCorrectionPopin","information","next","templateContext","useTemplateContext","setStylesheet","handlePressNext","onClick","Icon","useEffect","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n  NovaCompositionCoorpacademyCheck as RightIcon,\n  NovaSolidStatusClose as WrongIcon,\n  NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n  wrapper: ViewStyle;\n  popin: ViewStyle;\n  correctionSection: ViewStyle;\n  iconCircle: ViewStyle;\n  icon: ViewStyle;\n  resultLabel: TextStyle;\n  feedbackSection: ViewStyle;\n  labelContainer: ViewStyle;\n  label: TextStyle;\n  htmlInfoMessage: TextStyle;\n  button: ViewStyle;\n  buttonText: TextStyle;\n  buttonKlf: ViewStyle;\n  buttonKlfActive: TextStyle;\n  buttonKlfText: TextStyle;\n  iconKey: ViewStyle;\n  containerTooltip: ViewStyle;\n  buttonTooltip: ViewStyle;\n  containerButtonKlf: ViewStyle;\n  triangleTooltip: ViewStyle;\n  htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n  StyleSheet.create({\n    wrapper: {\n      backgroundColor: '#00000000',\n      height: 2000,\n      display: 'flex',\n      justifyContent: 'flex-end'\n    },\n    popin: {\n      padding: theme.spacing.medium,\n      borderRadius: 16,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n      shadowOpacity: 0.5,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 15,\n      elevation: 4\n    },\n    correctionSection: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: '80%'\n    },\n    iconCircle: {\n      width: 60,\n      height: 60,\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      opacity: 0.7,\n      borderRadius: 50\n    },\n    icon: {\n      height: 30,\n      width: 30\n    },\n    resultLabel: {\n      color: theme.colors.white,\n      fontSize: 24,\n      fontWeight: '600',\n      lineHeight: 24,\n      marginLeft: 12,\n      textTransform: 'uppercase'\n    },\n    feedbackSection: {\n      marginVertical: theme.spacing.medium\n    },\n    labelContainer: {\n      alignSelf: 'flex-start',\n      backgroundColor: 'rgba(255, 255, 255, 0.3)',\n      borderRadius: 56,\n      paddingHorizontal: theme.spacing.tiny,\n      paddingVertical: theme.spacing.micro,\n      marginBottom: 8\n    },\n    label: {\n      color: theme.colors.white,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.extraBold,\n      lineHeight: 17\n    },\n    htmlInfoMessage: {\n      color: theme.colors.white,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 19\n    },\n    button: {\n      alignSelf: 'stretch',\n      backgroundColor: theme.colors.white,\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small\n    },\n    buttonText: {\n      color: theme.colors.cta,\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    containerButtonKlf: {\n      width: '100%'\n    },\n    buttonKlf: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: 'rgba(255, 255, 255, 0.1)',\n      borderRadius: 7,\n      paddingHorizontal: theme.spacing.base,\n      paddingVertical: theme.spacing.small,\n      marginBottom: theme.spacing.tiny\n    },\n    buttonKlfActive: {\n      backgroundColor:\n        'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n    },\n    buttonKlfText: {\n      color: 'white',\n      fontSize: 14,\n      fontWeight: theme.fontWeight.bold,\n      lineHeight: 20,\n      textAlign: 'center'\n    },\n    iconKey: {\n      width: 12,\n      height: 12,\n      marginRight: theme.spacing.tiny\n    },\n    containerTooltip: {\n      zIndex: 30,\n      position: 'relative',\n      shadowColor: theme.colors.black,\n      shadowOpacity: 0.3,\n      shadowOffset: {width: 0, height: 0},\n      shadowRadius: 8\n    },\n    buttonTooltip: {\n      flexDirection: 'column',\n      justifyContent: 'center',\n      backgroundColor: theme.colors.white,\n      borderRadius: 15,\n      padding: theme.spacing.small,\n      width: '112%',\n      position: 'absolute',\n      bottom: 4,\n      right: -15,\n      zIndex: 20\n    },\n    htmlTooltipText: {\n      color: theme.colors.text.primary,\n      fontSize: 16,\n      fontWeight: '600',\n      lineHeight: 22,\n      textAlign: 'center'\n    },\n    triangleTooltip: {\n      width: 0,\n      height: 0,\n      backgroundColor: 'transparent',\n      borderStyle: 'solid',\n      borderLeftWidth: 13,\n      borderRightWidth: 13,\n      borderBottomWidth: 13,\n      borderTopWidth: 13,\n      borderLeftColor: 'transparent',\n      borderTopColor: 'transparent',\n      borderRightColor: theme.colors.white,\n      borderBottomColor: theme.colors.white,\n      transform: [{rotate: '45deg'}],\n      position: 'absolute',\n      left: 110,\n      top: -20,\n      borderRadius: 4\n    }\n  });\n\nconst KlfButton = ({\n  klf,\n  styleSheet\n}: {\n  klf: ReviewCorrectionPopinKLFProps;\n  styleSheet: StyleSheetType;\n}) => {\n  const [displayTooltip, setDisplayTooltip] = useState(false);\n  const fadeIn = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    easing: Easing.bezier(0.25, 1, 0.5, 1)\n  });\n\n  const handlePressKey = useCallback(() => {\n    setDisplayTooltip(!displayTooltip);\n    !displayTooltip ? fadeIn.start() : fadeIn.revert();\n  }, [displayTooltip, fadeIn]);\n\n  const {\n    buttonKlf,\n    buttonKlfActive,\n    buttonKlfText,\n    containerButtonKlf,\n    containerTooltip,\n    buttonTooltip,\n    htmlTooltipText,\n    iconKey,\n    triangleTooltip\n  } = styleSheet;\n\n  const {label, tooltip} = klf;\n\n  return (\n    <View style={containerButtonKlf}>\n      <Animated.View style={[containerTooltip, fadeIn.animatedStyle]}>\n        <Touchable\n          style={buttonTooltip}\n          accessibilityLabel={`aria-label-tooltip`}\n          isHighlight\n          onPress={handlePressKey}\n          testID=\"button-tooltip\"\n        >\n          <Html style={htmlTooltipText}>{tooltip}</Html>\n        </Touchable>\n        <View style={triangleTooltip} />\n      </Animated.View>\n      <Touchable\n        style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n        accessibilityLabel={`aria-label-${label}`}\n        onPress={handlePressKey}\n        testID=\"button-klf\"\n      >\n        <KlfIcon style={iconKey} color=\"white\" />\n        <Text style={buttonKlfText}>{label}</Text>\n      </Touchable>\n    </View>\n  );\n};\n\nconst ICONS = {\n  right: RightIcon,\n  wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n  information,\n  klf,\n  next,\n  type,\n  resultLabel\n}: ReviewCorrectionPopinProps) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {theme} = templateContext;\n  const handlePressNext = next.onClick;\n\n  const Icon = ICONS[type];\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme, type);\n    setStylesheet(_stylesheet);\n  }, [theme, type]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={styleSheet.wrapper}>\n      <View style={styleSheet.popin}>\n        <View style={styleSheet.correctionSection}>\n          <View style={styleSheet.iconCircle}>\n            <Icon\n              style={styleSheet.icon}\n              color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n            />\n          </View>\n          <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n        </View>\n        <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n          <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n            <Text accessibilityLabel={information.label} style={styleSheet.label}>\n              {information.label}\n            </Text>\n          </View>\n          <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n        </View>\n        {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n        <Touchable\n          style={styleSheet.button}\n          onPress={handlePressNext}\n          accessibilityLabel={next['aria-label']}\n          testID={next['data-name']}\n        >\n          <Text style={styleSheet.buttonText}>{next.label}</Text>\n        </Touchable>\n      </View>\n    </View>\n  );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}

package/lib/organism/review-congrats/index.native.js

@@ -46,7 +46,7 @@ const createStyleSheet = theme => _reactNative.StyleSheet.create({
     paddingHorizontal: 20,
     flexDirection: 'column',
     justifyContent: 'space-between',
-    flex: 1
+    height: 114
   },
   title: {
     fontWeight: '400',

package/lib/organism/review-congrats/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","congrats","position","width","height","flexDirection","alignItems","paddingVertical","flex","buttons","paddingHorizontal","justifyContent","title","fontWeight","fontSize","lineHeight","marginVertical","color","colors","text","primary","confettis","flexGrow","pointerEvents","scrollView","scrollViewContent","fadeIn","property","fromValue","toValue","duration","translateHorizontally","ReviewCongrats","props","ariaLabel","animationLottie","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","useTemplateContext","styleSheet","setStylesheet","useState","isCongratsTranslationDone","setCongratsTranslationDone","isRankShown","setRankShown","scrollViewRef","useRef","showCongrats","useAnimateProp","onComplete","translateCongrats","useTranslateY","showConfettis","fadeInRank","translateRank","useTranslateX","setTimeout","current","scrollToEnd","animatedRank","animatedStyle","fadeInStars","delay","translateStars","showButton1","showButton2","congratsSequence","sequence","parallel","useEffect","start","_stylesheet","handleContinueRevisingPress","onClick","handleReviseAnotherSkillPress","showStarLottieAnimation","animationSrc","reviewCardTitle","reviewCardValue","rankSuffix","RankIcon","positive","StarIcon","battle","label","BOX_STYLE","backgroundColor","uri"],"sources":["../../../src/organism/review-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, ScrollView, StyleSheet, Text, TextStyle, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport {\n  sequence,\n  parallel,\n  useAnimateProp,\n  useTranslateY,\n  useTranslateX\n} from '@coorpacademy/react-native-animation';\nimport type {AnimatePropParams} from '@coorpacademy/react-native-animation/es/use-animate-prop';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport CardCongrats from '../../molecule/card-congrats/index.native';\nimport {ReviewCongratsProps} from './prop-types';\n\ntype StyleSheetType = {\n  buttons: ViewStyle;\n  congrats: ViewStyle;\n  confettis: ViewStyle;\n  scrollView: ViewStyle;\n  scrollViewContent: ViewStyle;\n  title: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    congrats: {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingVertical: 90,\n      flex: 1\n    },\n    buttons: {\n      width: '100%',\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      flex: 1\n    },\n    title: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      marginVertical: 20,\n      color: theme.colors.text.primary\n    },\n    confettis: {\n      flexGrow: 1,\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'box-none'\n    },\n    scrollView: {\n      height: 300\n    },\n    scrollViewContent: {\n      alignItems: 'center',\n      paddingHorizontal: 40\n    }\n  });\n\nconst fadeIn: AnimatePropParams = {\n  property: 'opacity',\n  fromValue: 0,\n  toValue: 1,\n  duration: 350\n};\n\nconst translateHorizontally = {\n  property: 'translateX',\n  fromValue: 180,\n  toValue: 0,\n  duration: 800\n};\n\nconst ReviewCongrats = (props: ReviewCongratsProps) => {\n  const {\n    'aria-label': ariaLabel,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [isCongratsTranslationDone, setCongratsTranslationDone] = useState<boolean>(false);\n  const [isRankShown, setRankShown] = useState<boolean>(false);\n\n  const scrollViewRef = useRef<ScrollView>(null);\n\n  const showCongrats = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 950,\n    onComplete: () => {\n      setCongratsTranslationDone(true);\n    }\n  });\n\n  const translateCongrats = useTranslateY({\n    fromValue: 100,\n    toValue: 0,\n    duration: 550\n  });\n\n  const showConfettis = useAnimateProp(fadeIn);\n  const fadeInRank = useAnimateProp(fadeIn);\n  const translateRank = useTranslateX({\n    ...translateHorizontally,\n    onComplete: () => {\n      setRankShown(true);\n      setTimeout(() => {\n        scrollViewRef?.current?.scrollToEnd();\n      }, 700);\n    }\n  });\n\n  const animatedRank = [fadeInRank.animatedStyle, translateRank.animatedStyle];\n\n  const fadeInStars = useAnimateProp({\n    ...fadeIn,\n    delay: cardCongratsRank ? 1000 : 0\n  });\n\n  const translateStars = useTranslateX({\n    ...translateHorizontally,\n    delay: cardCongratsRank ? 1000 : 0\n  });\n\n  const showButton1 = useAnimateProp(fadeIn);\n  const showButton2 = useAnimateProp(fadeIn);\n\n  const congratsSequence = sequence([\n    parallel([showCongrats, translateCongrats]),\n    parallel([\n      showConfettis,\n      cardCongratsRank\n        ? sequence([parallel([fadeInRank, translateRank]), parallel([fadeInStars, translateStars])])\n        : parallel([fadeInStars, translateStars])\n    ]),\n    sequence([showButton1, showButton2])\n  ]);\n\n  useEffect(() => {\n    congratsSequence.start();\n    // (required only once on mount)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handleContinueRevisingPress = buttonRevising?.onClick || noop;\n  const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || noop;\n  const showStarLottieAnimation = !cardCongratsRank || isRankShown;\n\n  return (\n    <Animated.View\n      style={[styleSheet.congrats, translateCongrats.animatedStyle, showCongrats.animatedStyle]}\n      accessibilityLabel={ariaLabel}\n    >\n      <Text style={styleSheet.title}>{title}</Text>\n      <ScrollView\n        ref={scrollViewRef}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        style={styleSheet.scrollView}\n        contentContainerStyle={styleSheet.scrollViewContent}\n      >\n        {cardCongratsRank ? (\n          <Animated.View style={animatedRank}>\n            <CardCongrats\n              animationUri={cardCongratsRank.animationLottie.animationSrc}\n              text={cardCongratsRank.reviewCardTitle}\n              value={`${cardCongratsRank.reviewCardValue} ${cardCongratsRank.rankSuffix}`}\n              Icon={RankIcon}\n              iconColor={theme.colors.positive}\n              textColor={theme.colors.text.primary}\n              direction=\"row-reverse\"\n            />\n          </Animated.View>\n        ) : null}\n        <Animated.View style={[fadeInStars.animatedStyle, translateStars.animatedStyle]}>\n          <CardCongrats\n            animationUri={\n              showStarLottieAnimation ? cardCongratsStar.animationLottie.animationSrc : null\n            }\n            Icon={StarIcon}\n            text={cardCongratsStar.reviewCardTitle}\n            value={cardCongratsStar.reviewCardValue}\n            iconColor={theme.colors.battle}\n            textColor={theme.colors.battle}\n            direction=\"row\"\n          />\n        </Animated.View>\n      </ScrollView>\n\n      <Animated.View style={styleSheet.buttons}>\n        {buttonRevisingSkill ? (\n          <Animated.View style={showButton1.animatedStyle}>\n            <Button\n              onPress={handleReviseAnotherSkillPress}\n              accessibilityLabel={buttonRevisingSkill['aria-label']}\n              submitValue={buttonRevisingSkill.label}\n              style={{...BOX_STYLE, backgroundColor: '#fff'}}\n              textStyle={{color: '#123'}}\n            />\n          </Animated.View>\n        ) : null}\n        {buttonRevising ? (\n          <Animated.View style={showButton2.animatedStyle}>\n            <Button\n              onPress={handleContinueRevisingPress}\n              accessibilityLabel={buttonRevising['aria-label']}\n              submitValue={buttonRevising.label}\n            />\n          </Animated.View>\n        ) : null}\n      </Animated.View>\n\n      {isCongratsTranslationDone ? (\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[styleSheet.confettis, showConfettis.animatedStyle]}\n        >\n          <LottieView source={{uri: animationLottie.animationSrc}} autoPlay loop={false} />\n        </Animated.View>\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default ReviewCongrats;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","congrats","position","width","height","flexDirection","alignItems","paddingVertical","flex","buttons","paddingHorizontal","justifyContent","title","fontWeight","fontSize","lineHeight","marginVertical","color","colors","text","primary","confettis","flexGrow","pointerEvents","scrollView","scrollViewContent","fadeIn","property","fromValue","toValue","duration","translateHorizontally","ReviewCongrats","props","ariaLabel","animationLottie","cardCongratsStar","cardCongratsRank","buttonRevising","buttonRevisingSkill","useTemplateContext","styleSheet","setStylesheet","useState","isCongratsTranslationDone","setCongratsTranslationDone","isRankShown","setRankShown","scrollViewRef","useRef","showCongrats","useAnimateProp","onComplete","translateCongrats","useTranslateY","showConfettis","fadeInRank","translateRank","useTranslateX","setTimeout","current","scrollToEnd","animatedRank","animatedStyle","fadeInStars","delay","translateStars","showButton1","showButton2","congratsSequence","sequence","parallel","useEffect","start","_stylesheet","handleContinueRevisingPress","onClick","handleReviseAnotherSkillPress","showStarLottieAnimation","animationSrc","reviewCardTitle","reviewCardValue","rankSuffix","RankIcon","positive","StarIcon","battle","label","BOX_STYLE","backgroundColor","uri"],"sources":["../../../src/organism/review-congrats/index.native.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react';\nimport {Animated, ScrollView, StyleSheet, Text, TextStyle, ViewStyle} from 'react-native';\nimport LottieView from 'lottie-react-native';\nimport {noop} from 'lodash/fp';\nimport {\n  NovaCompositionCoorpacademyStar as StarIcon,\n  NovaSolidVoteRewardsRewardsBadge5 as RankIcon\n} from '@coorpacademy/nova-icons';\nimport {\n  sequence,\n  parallel,\n  useAnimateProp,\n  useTranslateY,\n  useTranslateX\n} from '@coorpacademy/react-native-animation';\nimport type {AnimatePropParams} from '@coorpacademy/react-native-animation/es/use-animate-prop';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {BOX_STYLE} from '../../variables/shadow';\nimport CardCongrats from '../../molecule/card-congrats/index.native';\nimport {ReviewCongratsProps} from './prop-types';\n\ntype StyleSheetType = {\n  buttons: ViewStyle;\n  congrats: ViewStyle;\n  confettis: ViewStyle;\n  scrollView: ViewStyle;\n  scrollViewContent: ViewStyle;\n  title: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    congrats: {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      flexDirection: 'column',\n      alignItems: 'center',\n      paddingVertical: 90,\n      flex: 1\n    },\n    buttons: {\n      width: '100%',\n      paddingHorizontal: 20,\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n      height: 114\n    },\n    title: {\n      fontWeight: '400',\n      fontSize: 32,\n      lineHeight: 40,\n      marginVertical: 20,\n      color: theme.colors.text.primary\n    },\n    confettis: {\n      flexGrow: 1,\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'box-none'\n    },\n    scrollView: {\n      height: 300\n    },\n    scrollViewContent: {\n      alignItems: 'center',\n      paddingHorizontal: 40\n    }\n  });\n\nconst fadeIn: AnimatePropParams = {\n  property: 'opacity',\n  fromValue: 0,\n  toValue: 1,\n  duration: 350\n};\n\nconst translateHorizontally = {\n  property: 'translateX',\n  fromValue: 180,\n  toValue: 0,\n  duration: 800\n};\n\nconst ReviewCongrats = (props: ReviewCongratsProps) => {\n  const {\n    'aria-label': ariaLabel,\n    animationLottie,\n    title,\n    cardCongratsStar,\n    cardCongratsRank,\n    buttonRevising,\n    buttonRevisingSkill\n  } = props;\n\n  const {theme} = useTemplateContext();\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [isCongratsTranslationDone, setCongratsTranslationDone] = useState<boolean>(false);\n  const [isRankShown, setRankShown] = useState<boolean>(false);\n\n  const scrollViewRef = useRef<ScrollView>(null);\n\n  const showCongrats = useAnimateProp({\n    property: 'opacity',\n    fromValue: 0,\n    toValue: 1,\n    duration: 950,\n    onComplete: () => {\n      setCongratsTranslationDone(true);\n    }\n  });\n\n  const translateCongrats = useTranslateY({\n    fromValue: 100,\n    toValue: 0,\n    duration: 550\n  });\n\n  const showConfettis = useAnimateProp(fadeIn);\n  const fadeInRank = useAnimateProp(fadeIn);\n  const translateRank = useTranslateX({\n    ...translateHorizontally,\n    onComplete: () => {\n      setRankShown(true);\n      setTimeout(() => {\n        scrollViewRef?.current?.scrollToEnd();\n      }, 700);\n    }\n  });\n\n  const animatedRank = [fadeInRank.animatedStyle, translateRank.animatedStyle];\n\n  const fadeInStars = useAnimateProp({\n    ...fadeIn,\n    delay: cardCongratsRank ? 1000 : 0\n  });\n\n  const translateStars = useTranslateX({\n    ...translateHorizontally,\n    delay: cardCongratsRank ? 1000 : 0\n  });\n\n  const showButton1 = useAnimateProp(fadeIn);\n  const showButton2 = useAnimateProp(fadeIn);\n\n  const congratsSequence = sequence([\n    parallel([showCongrats, translateCongrats]),\n    parallel([\n      showConfettis,\n      cardCongratsRank\n        ? sequence([parallel([fadeInRank, translateRank]), parallel([fadeInStars, translateStars])])\n        : parallel([fadeInStars, translateStars])\n    ]),\n    sequence([showButton1, showButton2])\n  ]);\n\n  useEffect(() => {\n    congratsSequence.start();\n    // (required only once on mount)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const handleContinueRevisingPress = buttonRevising?.onClick || noop;\n  const handleReviseAnotherSkillPress = buttonRevisingSkill?.onClick || noop;\n  const showStarLottieAnimation = !cardCongratsRank || isRankShown;\n\n  return (\n    <Animated.View\n      style={[styleSheet.congrats, translateCongrats.animatedStyle, showCongrats.animatedStyle]}\n      accessibilityLabel={ariaLabel}\n    >\n      <Text style={styleSheet.title}>{title}</Text>\n      <ScrollView\n        ref={scrollViewRef}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        style={styleSheet.scrollView}\n        contentContainerStyle={styleSheet.scrollViewContent}\n      >\n        {cardCongratsRank ? (\n          <Animated.View style={animatedRank}>\n            <CardCongrats\n              animationUri={cardCongratsRank.animationLottie.animationSrc}\n              text={cardCongratsRank.reviewCardTitle}\n              value={`${cardCongratsRank.reviewCardValue} ${cardCongratsRank.rankSuffix}`}\n              Icon={RankIcon}\n              iconColor={theme.colors.positive}\n              textColor={theme.colors.text.primary}\n              direction=\"row-reverse\"\n            />\n          </Animated.View>\n        ) : null}\n        <Animated.View style={[fadeInStars.animatedStyle, translateStars.animatedStyle]}>\n          <CardCongrats\n            animationUri={\n              showStarLottieAnimation ? cardCongratsStar.animationLottie.animationSrc : null\n            }\n            Icon={StarIcon}\n            text={cardCongratsStar.reviewCardTitle}\n            value={cardCongratsStar.reviewCardValue}\n            iconColor={theme.colors.battle}\n            textColor={theme.colors.battle}\n            direction=\"row\"\n          />\n        </Animated.View>\n      </ScrollView>\n\n      <Animated.View style={styleSheet.buttons}>\n        {buttonRevisingSkill ? (\n          <Animated.View style={showButton1.animatedStyle}>\n            <Button\n              onPress={handleReviseAnotherSkillPress}\n              accessibilityLabel={buttonRevisingSkill['aria-label']}\n              submitValue={buttonRevisingSkill.label}\n              style={{...BOX_STYLE, backgroundColor: '#fff'}}\n              textStyle={{color: '#123'}}\n            />\n          </Animated.View>\n        ) : null}\n        {buttonRevising ? (\n          <Animated.View style={showButton2.animatedStyle}>\n            <Button\n              onPress={handleContinueRevisingPress}\n              accessibilityLabel={buttonRevising['aria-label']}\n              submitValue={buttonRevising.label}\n            />\n          </Animated.View>\n        ) : null}\n      </Animated.View>\n\n      {isCongratsTranslationDone ? (\n        <Animated.View\n          pointerEvents=\"none\"\n          style={[styleSheet.confettis, showConfettis.animatedStyle]}\n        >\n          <LottieView source={{uri: animationLottie.animationSrc}} autoPlay loop={false} />\n        </Animated.View>\n      ) : null}\n    </Animated.View>\n  );\n};\n\nexport default ReviewCongrats;\n"],"mappings":"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"}

package/lib/organism/user-preferences/index.d.ts

@@ -18,6 +18,7 @@ declare namespace UserPreferences {
             'data-name': PropTypes.Requireable<string>;
             requiredSelection: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
+        const moreInfoAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/organism/user-preferences/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AA+BA,0DAaC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AAoCA,0DAaC"}

package/lib/organism/user-preferences/index.js

@@ -17,7 +17,7 @@ var _inputSwitch = _interopRequireDefault(require("../../atom/input-switch"));
 
 var _style = _interopRequireDefault(require("./style.css"));
 
-const _excluded = ["label", "description"];
+const _excluded = ["label", "description", "moreInfoAriaLabel"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -28,7 +28,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Settings = props => {
   const {
     label,
-    description
+    description,
+    moreInfoAriaLabel
   } = props,
         settings = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -41,7 +42,8 @@ const Settings = props => {
   }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyInformationIcon, {
     height: 16,
     width: 16,
-    className: _style.default.infoIcon
+    className: _style.default.infoIcon,
+    "aria-label": moreInfoAriaLabel
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.showToolTip
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -56,17 +58,20 @@ Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, _input
 
 const UserPreferences = props => {
   const {
-    preferences = []
+    preferences = [],
+    moreInfoAriaLabel
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.preferences
   }, (0, _map2.default)(settings => /*#__PURE__*/_react.default.createElement(Settings, _extends({}, settings, {
-    key: settings.label
+    key: settings.label,
+    moreInfoAriaLabel: moreInfoAriaLabel
   })), preferences));
 };
 
 UserPreferences.propTypes = process.env.NODE_ENV !== "production" ? {
-  preferences: _propTypes.default.arrayOf(_propTypes.default.shape(Settings.propTypes))
+  preferences: _propTypes.default.arrayOf(_propTypes.default.shape(Settings.propTypes)),
+  moreInfoAriaLabel: _propTypes.default.string
 } : {};
 var _default = UserPreferences;
 exports.default = _default;

package/lib/organism/user-preferences/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Settings","props","label","description","settings","style","infoIconWrapper","infoIcon","showToolTip","descriptionLabel","propTypes","InputSwitch","PropTypes","string","isRequired","UserPreferences","preferences","arrayOf","shape"],"sources":["../../../src/organism/user-preferences/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, isEmpty} from 'lodash/fp';\nimport {NovaCompositionCoorpacademyInformationIcon as InfoIcon} from '@coorpacademy/nova-icons';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst Settings = props => {\n  const {label, description, ...settings} = props;\n  return (\n    <div className={style.settings}>\n      <InputSwitch {...settings} />\n      <span className={style.label}>{label}</span>\n      {isEmpty(description) ? null : (\n        <div className={style.infoIconWrapper}>\n          <InfoIcon height={16} width={16} className={style.infoIcon} />\n          <div className={style.showToolTip}>\n            <div className={style.descriptionLabel}>{description}</div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nSettings.propTypes = {\n  ...InputSwitch.propTypes,\n  label: PropTypes.string.isRequired,\n  description: PropTypes.string\n};\n\nconst UserPreferences = props => {\n  const {preferences = []} = props;\n\n  return (\n    <div className={style.preferences}>\n      {map(\n        settings => (\n          <Settings {...settings} key={settings.label} />\n        ),\n        preferences\n      )}\n    </div>\n  );\n};\n\nUserPreferences.propTypes = {\n  preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes))\n};\n\nexport default UserPreferences;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,KAAD;IAAQC;EAAR,IAAoCF,KAA1C;EAAA,MAA8BG,QAA9B,iCAA0CH,KAA1C;;EACA,oBACE;IAAK,SAAS,EAAEI,cAAA,CAAMD;EAAtB,gBACE,6BAAC,oBAAD,EAAiBA,QAAjB,CADF,eAEE;IAAM,SAAS,EAAEC,cAAA,CAAMH;EAAvB,GAA+BA,KAA/B,CAFF,EAGG,uBAAQC,WAAR,IAAuB,IAAvB,gBACC;IAAK,SAAS,EAAEE,cAAA,CAAMC;EAAtB,gBACE,6BAAC,qDAAD;IAAU,MAAM,EAAE,EAAlB;IAAsB,KAAK,EAAE,EAA7B;IAAiC,SAAS,EAAED,cAAA,CAAME;EAAlD,EADF,eAEE;IAAK,SAAS,EAAEF,cAAA,CAAMG;EAAtB,gBACE;IAAK,SAAS,EAAEH,cAAA,CAAMI;EAAtB,GAAyCN,WAAzC,CADF,CAFF,CAJJ,CADF;AAcD,CAhBD;;AAkBAH,QAAQ,CAACU,SAAT,wDACKC,oBAAA,CAAYD,SADjB;EAEER,KAAK,EAAEU,kBAAA,CAAUC,MAAV,CAAiBC,UAF1B;EAGEX,WAAW,EAAES,kBAAA,CAAUC;AAHzB;;AAMA,MAAME,eAAe,GAAGd,KAAK,IAAI;EAC/B,MAAM;IAACe,WAAW,GAAG;EAAf,IAAqBf,KAA3B;EAEA,oBACE;IAAK,SAAS,EAAEI,cAAA,CAAMW;EAAtB,GACG,mBACCZ,QAAQ,iBACN,6BAAC,QAAD,eAAcA,QAAd;IAAwB,GAAG,EAAEA,QAAQ,CAACF;EAAtC,GAFH,EAICc,WAJD,CADH,CADF;AAUD,CAbD;;AAeAD,eAAe,CAACL,SAAhB,2CAA4B;EAC1BM,WAAW,EAAEJ,kBAAA,CAAUK,OAAV,CAAkBL,kBAAA,CAAUM,KAAV,CAAgBlB,QAAQ,CAACU,SAAzB,CAAlB;AADa,CAA5B;eAIeK,e"}
+{"version":3,"file":"index.js","names":["Settings","props","label","description","moreInfoAriaLabel","settings","style","infoIconWrapper","infoIcon","showToolTip","descriptionLabel","propTypes","InputSwitch","PropTypes","string","isRequired","UserPreferences","preferences","arrayOf","shape"],"sources":["../../../src/organism/user-preferences/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map, isEmpty} from 'lodash/fp';\nimport {NovaCompositionCoorpacademyInformationIcon as InfoIcon} from '@coorpacademy/nova-icons';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst Settings = props => {\n  const {label, description, moreInfoAriaLabel, ...settings} = props;\n  return (\n    <div className={style.settings}>\n      <InputSwitch {...settings} />\n      <span className={style.label}>{label}</span>\n      {isEmpty(description) ? null : (\n        <div className={style.infoIconWrapper}>\n          <InfoIcon\n            height={16}\n            width={16}\n            className={style.infoIcon}\n            aria-label={moreInfoAriaLabel}\n          />\n          <div className={style.showToolTip}>\n            <div className={style.descriptionLabel}>{description}</div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nSettings.propTypes = {\n  ...InputSwitch.propTypes,\n  label: PropTypes.string.isRequired,\n  description: PropTypes.string\n};\n\nconst UserPreferences = props => {\n  const {preferences = [], moreInfoAriaLabel} = props;\n\n  return (\n    <div className={style.preferences}>\n      {map(\n        settings => (\n          <Settings {...settings} key={settings.label} moreInfoAriaLabel={moreInfoAriaLabel} />\n        ),\n        preferences\n      )}\n    </div>\n  );\n};\n\nUserPreferences.propTypes = {\n  preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes)),\n  moreInfoAriaLabel: PropTypes.string\n};\n\nexport default UserPreferences;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,KAAD;IAAQC,WAAR;IAAqBC;EAArB,IAAuDH,KAA7D;EAAA,MAAiDI,QAAjD,iCAA6DJ,KAA7D;;EACA,oBACE;IAAK,SAAS,EAAEK,cAAA,CAAMD;EAAtB,gBACE,6BAAC,oBAAD,EAAiBA,QAAjB,CADF,eAEE;IAAM,SAAS,EAAEC,cAAA,CAAMJ;EAAvB,GAA+BA,KAA/B,CAFF,EAGG,uBAAQC,WAAR,IAAuB,IAAvB,gBACC;IAAK,SAAS,EAAEG,cAAA,CAAMC;EAAtB,gBACE,6BAAC,qDAAD;IACE,MAAM,EAAE,EADV;IAEE,KAAK,EAAE,EAFT;IAGE,SAAS,EAAED,cAAA,CAAME,QAHnB;IAIE,cAAYJ;EAJd,EADF,eAOE;IAAK,SAAS,EAAEE,cAAA,CAAMG;EAAtB,gBACE;IAAK,SAAS,EAAEH,cAAA,CAAMI;EAAtB,GAAyCP,WAAzC,CADF,CAPF,CAJJ,CADF;AAmBD,CArBD;;AAuBAH,QAAQ,CAACW,SAAT,wDACKC,oBAAA,CAAYD,SADjB;EAEET,KAAK,EAAEW,kBAAA,CAAUC,MAAV,CAAiBC,UAF1B;EAGEZ,WAAW,EAAEU,kBAAA,CAAUC;AAHzB;;AAMA,MAAME,eAAe,GAAGf,KAAK,IAAI;EAC/B,MAAM;IAACgB,WAAW,GAAG,EAAf;IAAmBb;EAAnB,IAAwCH,KAA9C;EAEA,oBACE;IAAK,SAAS,EAAEK,cAAA,CAAMW;EAAtB,GACG,mBACCZ,QAAQ,iBACN,6BAAC,QAAD,eAAcA,QAAd;IAAwB,GAAG,EAAEA,QAAQ,CAACH,KAAtC;IAA6C,iBAAiB,EAAEE;EAAhE,GAFH,EAICa,WAJD,CADH,CADF;AAUD,CAbD;;AAeAD,eAAe,CAACL,SAAhB,2CAA4B;EAC1BM,WAAW,EAAEJ,kBAAA,CAAUK,OAAV,CAAkBL,kBAAA,CAAUM,KAAV,CAAgBnB,QAAQ,CAACW,SAAzB,CAAlB,CADa;EAE1BP,iBAAiB,EAAES,kBAAA,CAAUC;AAFH,CAA5B;eAKeE,e"}

package/lib/template/activity/index.d.ts

@@ -3,6 +3,7 @@ declare class Progression extends React.Component<any, any, any> {
     static propTypes: {
         mainTitle: PropTypes.Validator<string>;
         mainSubtitle: PropTypes.Validator<string>;
+        adaptiveAriaLabel: PropTypes.Requireable<string>;
         total: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
             label: PropTypes.Validator<string>;
             stars: PropTypes.Validator<number>;
@@ -32,6 +33,7 @@ declare class Progression extends React.Component<any, any, any> {
             label: PropTypes.Validator<string>;
             level: PropTypes.Validator<string>;
             state: PropTypes.Validator<string>;
+            adaptiveAriaLabel: PropTypes.Requireable<string>;
             type: PropTypes.Validator<string>;
             adaptive: PropTypes.Validator<boolean>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/template/activity/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/activity/index.js"],"names":[],"mappings":";AAaA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAuBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,sCAIC;IAED,8BAME;IAEF,oCAKE;IAEF,sBA+EC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/template/activity/index.js"],"names":[],"mappings":";AAaA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAwBE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,sCAIC;IAED,8BAME;IAEF,oCAKE;IAEF,sBAoFC;CACF"}

package/lib/template/activity/index.js

@@ -70,6 +70,7 @@ class Progression extends _react.default.Component {
       mainSubtitle,
       recommendation = {},
       progressions = [],
+      adaptiveAriaLabel,
       total,
       engines = [],
       themeFilter = {},
@@ -83,7 +84,8 @@ class Progression extends _react.default.Component {
       className: _style.default.loader
     }, /*#__PURE__*/_react.default.createElement(_loader.default, null)) : null;
     const allProgressions = progressions.map(progression => /*#__PURE__*/_react.default.createElement(_progressionItem.default, _extends({}, (0, _omit2.default)(['ref'], progression), {
-      key: progression.ref
+      key: progression.ref,
+      adaptiveAriaLabel: adaptiveAriaLabel
     })));
 
     const coreProgression = /*#__PURE__*/_react.default.createElement("div", {
@@ -146,6 +148,7 @@ Progression.contextTypes = {
 Progression.propTypes = process.env.NODE_ENV !== "production" ? {
   mainTitle: _propTypes.default.string.isRequired,
   mainSubtitle: _propTypes.default.string.isRequired,
+  adaptiveAriaLabel: _propTypes.default.string,
   total: _propTypes.default.shape({
     label: _propTypes.default.string.isRequired,
     stars: _propTypes.default.number.isRequired

package/lib/template/activity/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Progression","React","Component","constructor","props","context","handleClick","e","recommendation","stopPropagation","preventDefault","onClick","handleSelectTheme","themeFilter","onChange","bind","render","mainTitle","mainSubtitle","progressions","total","engines","loading","skin","primary","loader","style","allProgressions","map","progression","ref","coreProgression","core","themeSelect","options","selectBorder","select","recommendationSection","recommendationWrapper","title","subtitle","classnames","course","innerHTML","__html","courseTitle","cta","backgroundColor","default","headerProgression","wrapperCta","wrapperProgression","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","label","stars","number","arrayOf","EngineStars","bool","ProgressionItem","Select","func"],"sources":["../../../src/template/activity/index.js"],"sourcesContent":["import React from 'react';\nimport {get, omit, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport Select from '../../atom/select';\nimport Loader from '../../atom/loader';\nimport ProgressionItem from './progression-item';\nimport EngineStars from './engine-stars';\nimport StarsSummary from './stars-summary';\nimport style from './style.css';\n\nclass Progression extends React.Component {\n  static propTypes = {\n    mainTitle: PropTypes.string.isRequired,\n    mainSubtitle: PropTypes.string.isRequired,\n    total: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      stars: PropTypes.number.isRequired\n    }).isRequired,\n    engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n    loading: PropTypes.bool.isRequired,\n    progressions: PropTypes.arrayOf(\n      PropTypes.shape({...ProgressionItem.propTypes, ref: PropTypes.string.isRequired})\n    ),\n    themeFilter: PropTypes.shape({\n      options: Select.propTypes.options.isRequired,\n      onChange: Select.propTypes.onChange\n    }),\n    recommendation: PropTypes.shape({\n      cta: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      subtitle: PropTypes.string.isRequired,\n      courseTitle: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    })\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleSelectTheme = this.handleSelectTheme.bind(this);\n  }\n\n  handleClick = e => {\n    const {recommendation} = this.props;\n    e.stopPropagation();\n    e.preventDefault();\n    const {onClick} = recommendation;\n    onClick && onClick(e);\n  };\n\n  handleSelectTheme = e => {\n    const {\n      themeFilter: {onChange}\n    } = this.props;\n    onChange && onChange(e);\n  };\n\n  render() {\n    const {\n      mainTitle,\n      mainSubtitle,\n      recommendation = {},\n      progressions = [],\n      total,\n      engines = [],\n      themeFilter = {},\n      loading\n    } = this.props;\n    const {skin} = this.context;\n\n    const primary = get('common.primary', skin);\n    const loader = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : null;\n    const allProgressions = progressions.map(progression => (\n      <ProgressionItem {...omit(['ref'], progression)} key={progression.ref} />\n    ));\n\n    const coreProgression = (\n      <div data-name=\"activityCore\" className={style.core}>\n        {allProgressions}\n      </div>\n    );\n    const themeSelect = !isEmpty(themeFilter.options) ? (\n      <Select\n        borderClassName={style.selectBorder}\n        className={style.select}\n        theme=\"thematiques\"\n        options={themeFilter.options}\n        onChange={this.handleSelectTheme}\n      />\n    ) : null;\n    const recommendationSection = !isEmpty(recommendation) ? (\n      <div className={style.recommendationWrapper}>\n        <p className={style.recommendationSection}>{recommendation.title} </p>\n        <p className={style.recommendationSection}>\n          <span>{recommendation.subtitle} </span>\n          <span\n            className={classnames(style.course, style.innerHTML)}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: recommendation.courseTitle}}\n          />\n        </p>\n        <Button\n          type=\"link\"\n          onClick={this.handleClick}\n          submitValue={recommendation.cta}\n          style={{\n            backgroundColor: primary\n          }}\n          className={style.cta}\n        />\n      </div>\n    ) : null;\n    return (\n      <div className={style.default}>\n        <div data-name=\"activity-header\">\n          <div className={style.mainTitle}>\n            <span>{mainTitle}</span> {mainSubtitle}\n          </div>\n          <div className={style.headerProgression}>\n            <div className={style.wrapperCta}>\n              {themeSelect}\n              {recommendationSection}\n            </div>\n            <StarsSummary engines={engines} total={total} />\n          </div>\n        </div>\n        <div className={style.wrapperProgression} data-name=\"activityList\">\n          {coreProgression}\n          {loader}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Progression;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Progression","React","Component","constructor","props","context","handleClick","e","recommendation","stopPropagation","preventDefault","onClick","handleSelectTheme","themeFilter","onChange","bind","render","mainTitle","mainSubtitle","progressions","adaptiveAriaLabel","total","engines","loading","skin","primary","loader","style","allProgressions","map","progression","ref","coreProgression","core","themeSelect","options","selectBorder","select","recommendationSection","recommendationWrapper","title","subtitle","classnames","course","innerHTML","__html","courseTitle","cta","backgroundColor","default","headerProgression","wrapperCta","wrapperProgression","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","isRequired","shape","label","stars","number","arrayOf","EngineStars","bool","ProgressionItem","Select","func"],"sources":["../../../src/template/activity/index.js"],"sourcesContent":["import React from 'react';\nimport {get, omit, isEmpty} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Provider from '../../atom/provider';\nimport Button from '../../atom/button';\nimport Select from '../../atom/select';\nimport Loader from '../../atom/loader';\nimport ProgressionItem from './progression-item';\nimport EngineStars from './engine-stars';\nimport StarsSummary from './stars-summary';\nimport style from './style.css';\n\nclass Progression extends React.Component {\n  static propTypes = {\n    mainTitle: PropTypes.string.isRequired,\n    mainSubtitle: PropTypes.string.isRequired,\n    adaptiveAriaLabel: PropTypes.string,\n    total: PropTypes.shape({\n      label: PropTypes.string.isRequired,\n      stars: PropTypes.number.isRequired\n    }).isRequired,\n    engines: PropTypes.arrayOf(PropTypes.shape(EngineStars.propTypes)),\n    loading: PropTypes.bool.isRequired,\n    progressions: PropTypes.arrayOf(\n      PropTypes.shape({...ProgressionItem.propTypes, ref: PropTypes.string.isRequired})\n    ),\n    themeFilter: PropTypes.shape({\n      options: Select.propTypes.options.isRequired,\n      onChange: Select.propTypes.onChange\n    }),\n    recommendation: PropTypes.shape({\n      cta: PropTypes.string.isRequired,\n      title: PropTypes.string.isRequired,\n      subtitle: PropTypes.string.isRequired,\n      courseTitle: PropTypes.string.isRequired,\n      onClick: PropTypes.func\n    })\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  constructor(props, context) {\n    super(props, context);\n    this.handleClick = this.handleClick.bind(this);\n    this.handleSelectTheme = this.handleSelectTheme.bind(this);\n  }\n\n  handleClick = e => {\n    const {recommendation} = this.props;\n    e.stopPropagation();\n    e.preventDefault();\n    const {onClick} = recommendation;\n    onClick && onClick(e);\n  };\n\n  handleSelectTheme = e => {\n    const {\n      themeFilter: {onChange}\n    } = this.props;\n    onChange && onChange(e);\n  };\n\n  render() {\n    const {\n      mainTitle,\n      mainSubtitle,\n      recommendation = {},\n      progressions = [],\n      adaptiveAriaLabel,\n      total,\n      engines = [],\n      themeFilter = {},\n      loading\n    } = this.props;\n    const {skin} = this.context;\n\n    const primary = get('common.primary', skin);\n    const loader = loading ? (\n      <div className={style.loader}>\n        <Loader />\n      </div>\n    ) : null;\n    const allProgressions = progressions.map(progression => (\n      <ProgressionItem\n        {...omit(['ref'], progression)}\n        key={progression.ref}\n        adaptiveAriaLabel={adaptiveAriaLabel}\n      />\n    ));\n\n    const coreProgression = (\n      <div data-name=\"activityCore\" className={style.core}>\n        {allProgressions}\n      </div>\n    );\n    const themeSelect = !isEmpty(themeFilter.options) ? (\n      <Select\n        borderClassName={style.selectBorder}\n        className={style.select}\n        theme=\"thematiques\"\n        options={themeFilter.options}\n        onChange={this.handleSelectTheme}\n      />\n    ) : null;\n    const recommendationSection = !isEmpty(recommendation) ? (\n      <div className={style.recommendationWrapper}>\n        <p className={style.recommendationSection}>{recommendation.title} </p>\n        <p className={style.recommendationSection}>\n          <span>{recommendation.subtitle} </span>\n          <span\n            className={classnames(style.course, style.innerHTML)}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: recommendation.courseTitle}}\n          />\n        </p>\n        <Button\n          type=\"link\"\n          onClick={this.handleClick}\n          submitValue={recommendation.cta}\n          style={{\n            backgroundColor: primary\n          }}\n          className={style.cta}\n        />\n      </div>\n    ) : null;\n    return (\n      <div className={style.default}>\n        <div data-name=\"activity-header\">\n          <div className={style.mainTitle}>\n            <span>{mainTitle}</span> {mainSubtitle}\n          </div>\n          <div className={style.headerProgression}>\n            <div className={style.wrapperCta}>\n              {themeSelect}\n              {recommendationSection}\n            </div>\n            <StarsSummary engines={engines} total={total} />\n          </div>\n        </div>\n        <div className={style.wrapperProgression} data-name=\"activityList\">\n          {coreProgression}\n          {loader}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Progression;\n"],"mappings":"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"}

package/lib/template/activity/progression-item.d.ts

@@ -10,6 +10,7 @@ declare namespace ProgressionItem {
         const label: PropTypes.Validator<string>;
         const level: PropTypes.Validator<string>;
         const state: PropTypes.Validator<string>;
+        const adaptiveAriaLabel: PropTypes.Requireable<string>;
         const type: PropTypes.Validator<string>;
         const adaptive: PropTypes.Validator<boolean>;
         const onClick: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/template/activity/progression-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progression-item.d.ts","sourceRoot":"","sources":["../../../src/template/activity/progression-item.js"],"names":[],"mappings":";AAmCA,wEAwFC"}
+{"version":3,"file":"progression-item.d.ts","sourceRoot":"","sources":["../../../src/template/activity/progression-item.js"],"names":[],"mappings":";AAmCA,wEAyFC"}

package/lib/template/activity/progression-item.js

@@ -56,7 +56,8 @@ const ProgressionItem = (props, context) => {
     maxStars,
     state,
     type,
-    steps = 0
+    steps = 0,
+    adaptiveAriaLabel
   } = props;
   const dark = (0, _get2.default)('common.dark', skin);
   const primary = (0, _get2.default)('common.primary', skin);
@@ -69,7 +70,8 @@ const ProgressionItem = (props, context) => {
     }
   }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyAdaptive, {
     color: white,
-    height: 14
+    height: 14,
+    "aria-label": adaptiveAriaLabel
   })) : null;
   const handleCTAClick = (0, _react.useMemo)(() => e => {
     e.stopPropagation();
@@ -142,6 +144,7 @@ ProgressionItem.propTypes = process.env.NODE_ENV !== "production" ? {
   label: _propTypes.default.string.isRequired,
   level: _propTypes.default.string.isRequired,
   state: _propTypes.default.string.isRequired,
+  adaptiveAriaLabel: _propTypes.default.string,
   type: _propTypes.default.string.isRequired,
   adaptive: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func