@coorpacademy/components 11.11.11 → 11.11.12-alpha.11

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

@@ -48,7 +48,6 @@ const createStyleSheet = theme => ({
 const Item = props => {
   const {
     part,
-    index,
     isDisabled = false,
     focusedSelectId,
     choices,
@@ -63,7 +62,7 @@ const Item = props => {
     translations
   } = templateContext;
   const inputNames = choices.map(choice => choice.name);
-  const id = `question-part-${index + 1}`;
+  const id = `question-part-${part.value}`;
   const isFocused = focusedSelectId === id;
 
   if (part.type === 'answerField' && inputNames.includes(part.value)) {
@@ -126,7 +125,7 @@ const Item = props => {
     fontSize: theme.fontSize.regular,
     testID: id,
     style: styles.htmlText
-  }, trim(part.value || ''));
+  }, part.value === ' ' ? part.value : trim(part.value || ''));
 };
 
 const QuestionTemplate = props => {
@@ -158,15 +157,14 @@ const QuestionTemplate = props => {
   return /*#__PURE__*/React.createElement(View, {
     style: styleSheet.container,
     testID: "question-template"
-  }, parts.map((part, id) => /*#__PURE__*/React.createElement(View, {
-    key: `question-part-${id}`,
+  }, parts.map(part => /*#__PURE__*/React.createElement(View, {
+    key: `question-part-${part.value}`,
     style: {
       flexDirection: 'row'
     }
   }, /*#__PURE__*/React.createElement(Item, {
     part: part,
     choices: choices,
-    index: id,
     focusedSelectId: focusedSelectId,
     isDisabled: isDisabled,
     handleBlur: handleBlur,

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

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

package/es/molecule/questions/qcm-drag/style.css

@@ -142,5 +142,5 @@
   composes: innerHTML from '../../../atom/label/style.css'
 }
 .hiddenCheckbox {
-  opacity: 0;
+  display: none;
 }

package/es/molecule/questions/question-range/index.d.ts

@@ -32,6 +32,16 @@ declare namespace QuestionRange {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
 }

package/es/molecule/skill-card/index.js

@@ -37,7 +37,7 @@ const SkillCard = (props, context) => {
       transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
     },
     onClick,
-    'aria-label': buttonAriaLabel,
+    'aria-label': buttonAriaLabel ? `${skillTitle}, ${buttonAriaLabel}` : skillTitle,
     label: buttonLabel,
     'data-name': 'skill-card-button'
   };

package/es/molecule/skill-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","convert","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","getOr","ButtonLink","style","propTypes","getGradientBackground","baseColor","gradients","SkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","onClick","isCustom","skin","hovered","setHovered","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","titleBackgroundColor","titleBackground","skillCardWrapper","background","questionReviseText","questionReviseIcon","buttonWrapper"],"sources":["../../../src/molecule/skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {convert} from 'css-color-function';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst getGradientBackground = baseColor => {\n  const gradients = [\n    convert(`color(${baseColor} lightness(30%))`),\n    convert(`color(${baseColor} lightness(47%))`),\n    convert(`color(${baseColor} lightness(55%))`)\n  ];\n\n  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(\n    `color(${gradients[0]} a(0))`\n  )} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(\n    `color(${gradients[1]} a(0))`\n  )} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(\n    `color(${gradients[2]} a(0))`\n  )} 100%), ${baseColor}`;\n};\n\nconst SkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    buttonLabel,\n    buttonAriaLabel,\n    reviseLabel,\n    reviseAriaLabel,\n    onClick,\n    isCustom = false\n  } = props;\n  const {skin} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    'aria-label': buttonAriaLabel,\n    label: buttonLabel,\n    'data-name': 'skill-card-button'\n  };\n\n  const titleBackgroundColor = useMemo(\n    () => (isCustom ? '#128C72' : primarySkinColor),\n    [isCustom, primarySkinColor]\n  );\n\n  const titleBackground = useMemo(\n    () => getGradientBackground(titleBackgroundColor),\n    [titleBackgroundColor]\n  );\n\n  return (\n    <div className={style.skillCardWrapper} data-name=\"skill-card-wrapper\" aria-label={ariaLabel}>\n      <div\n        data-name=\"skill-title\"\n        className={style.skillTitle}\n        aria-label={skillAriaLabel || skillTitle}\n        style={{\n          background: titleBackground\n        }}\n      >\n        {skillTitle}\n      </div>\n      <div data-name=\"card-content-wrapper\">\n        <div\n          className={style.questionReviseText}\n          data-name=\"questions-to-revise-label\"\n          aria-label={reviseAriaLabel || reviseLabel}\n        >\n          <QuestionIcon className={style.questionReviseIcon} width={16} height={16} />\n          {reviseLabel}\n        </div>\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-wrapper\"\n        >\n          <ButtonLink {...buttonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSkillCard.propTypes = propTypes;\n\nexport default SkillCard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","convert","NovaSolidInterfaceFeedbackInterfaceQuestionMark","QuestionIcon","getOr","ButtonLink","style","propTypes","getGradientBackground","baseColor","gradients","SkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","buttonLabel","buttonAriaLabel","reviseLabel","reviseAriaLabel","onClick","isCustom","skin","hovered","setHovered","primarySkinColor","handleMouseOver","handleMouseLeave","buttonProps","customStyle","backgroundColor","color","transition","label","titleBackgroundColor","titleBackground","skillCardWrapper","background","questionReviseText","questionReviseIcon","buttonWrapper"],"sources":["../../../src/molecule/skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {convert} from 'css-color-function';\nimport {NovaSolidInterfaceFeedbackInterfaceQuestionMark as QuestionIcon} from '@coorpacademy/nova-icons';\nimport getOr from 'lodash/fp/getOr';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport propTypes from './prop-types';\n\nconst getGradientBackground = baseColor => {\n  const gradients = [\n    convert(`color(${baseColor} lightness(30%))`),\n    convert(`color(${baseColor} lightness(47%))`),\n    convert(`color(${baseColor} lightness(55%))`)\n  ];\n\n  return `radial-gradient(62.12% 56.45% at 0% 77.29%, ${gradients[0]} 0%, ${convert(\n    `color(${gradients[0]} a(0))`\n  )} 100%), radial-gradient(113.85% 103.46% at 93.27% 7.88%, ${gradients[1]} 0%, ${convert(\n    `color(${gradients[1]} a(0))`\n  )} 100%), radial-gradient(49.66% 49.63% at 78.65% 86.26%, ${gradients[2]} 0%, ${convert(\n    `color(${gradients[2]} a(0))`\n  )} 100%), ${baseColor}`;\n};\n\nconst SkillCard = (props, context) => {\n  const {\n    'aria-label': ariaLabel,\n    skillTitle,\n    skillAriaLabel,\n    buttonLabel,\n    buttonAriaLabel,\n    reviseLabel,\n    reviseAriaLabel,\n    onClick,\n    isCustom = false\n  } = props;\n  const {skin} = context;\n  const [hovered, setHovered] = useState(false);\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const buttonProps = {\n    customStyle: {\n      backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n      color: hovered ? '#FFFFFF' : primarySkinColor,\n      transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n    },\n    onClick,\n    'aria-label': buttonAriaLabel ? `${skillTitle}, ${buttonAriaLabel}` : skillTitle,\n    label: buttonLabel,\n    'data-name': 'skill-card-button'\n  };\n\n  const titleBackgroundColor = useMemo(\n    () => (isCustom ? '#128C72' : primarySkinColor),\n    [isCustom, primarySkinColor]\n  );\n\n  const titleBackground = useMemo(\n    () => getGradientBackground(titleBackgroundColor),\n    [titleBackgroundColor]\n  );\n\n  return (\n    <div className={style.skillCardWrapper} data-name=\"skill-card-wrapper\" aria-label={ariaLabel}>\n      <div\n        data-name=\"skill-title\"\n        className={style.skillTitle}\n        aria-label={skillAriaLabel || skillTitle}\n        style={{\n          background: titleBackground\n        }}\n      >\n        {skillTitle}\n      </div>\n      <div data-name=\"card-content-wrapper\">\n        <div\n          className={style.questionReviseText}\n          data-name=\"questions-to-revise-label\"\n          aria-label={reviseAriaLabel || reviseLabel}\n        >\n          <QuestionIcon className={style.questionReviseIcon} width={16} height={16} />\n          {reviseLabel}\n        </div>\n        <div\n          className={style.buttonWrapper}\n          onMouseOver={handleMouseOver}\n          onMouseLeave={handleMouseLeave}\n          data-name=\"button-wrapper\"\n        >\n          <ButtonLink {...buttonProps} />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nSkillCard.propTypes = propTypes;\n\nexport default SkillCard;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,QAA5B,EAAsCC,OAAtC,QAAoD,OAApD;AACA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,SAAQC,+CAA+C,IAAIC,YAA3D,QAA8E,0BAA9E;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAAsB,cAAtB;;AAEA,MAAMC,qBAAqB,GAAGC,SAAS,IAAI;EACzC,MAAMC,SAAS,GAAG,CAChBT,OAAO,CAAE,SAAQQ,SAAU,kBAApB,CADS,EAEhBR,OAAO,CAAE,SAAQQ,SAAU,kBAApB,CAFS,EAGhBR,OAAO,CAAE,SAAQQ,SAAU,kBAApB,CAHS,CAAlB;EAMA,OAAQ,+CAA8CC,SAAS,CAAC,CAAD,CAAI,QAAOT,OAAO,CAC9E,SAAQS,SAAS,CAAC,CAAD,CAAI,QADyD,CAE/E,4DAA2DA,SAAS,CAAC,CAAD,CAAI,QAAOT,OAAO,CACrF,SAAQS,SAAS,CAAC,CAAD,CAAI,QADgE,CAEtF,2DAA0DA,SAAS,CAAC,CAAD,CAAI,QAAOT,OAAO,CACpF,SAAQS,SAAS,CAAC,CAAD,CAAI,QAD+D,CAErF,WAAUD,SAAU,EANtB;AAOD,CAdD;;AAgBA,MAAME,SAAS,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACpC,MAAM;IACJ,cAAcC,SADV;IAEJC,UAFI;IAGJC,cAHI;IAIJC,WAJI;IAKJC,eALI;IAMJC,WANI;IAOJC,eAPI;IAQJC,OARI;IASJC,QAAQ,GAAG;EATP,IAUFV,KAVJ;EAWA,MAAM;IAACW;EAAD,IAASV,OAAf;EACA,MAAM,CAACW,OAAD,EAAUC,UAAV,IAAwB1B,QAAQ,CAAC,KAAD,CAAtC;EACA,MAAM2B,gBAAgB,GAAGtB,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BmB,IAA9B,CAA9B;EAEA,MAAMI,eAAe,GAAG7B,WAAW,CAAC,MAAM2B,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;EAEA,MAAMG,gBAAgB,GAAG9B,WAAW,CAAC,MAAM2B,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;EAEA,MAAMI,WAAW,GAAG;IAClBC,WAAW,EAAE;MACXC,eAAe,EAAEP,OAAO,GAAGE,gBAAH,GAAsBzB,OAAO,CAAE,SAAQyB,gBAAiB,WAA3B,CAD1C;MAEXM,KAAK,EAAER,OAAO,GAAG,SAAH,GAAeE,gBAFlB;MAGXO,UAAU,EAAE;IAHD,CADK;IAMlBZ,OANkB;IAOlB,cAAcH,eAAe,GAAI,GAAEH,UAAW,KAAIG,eAAgB,EAArC,GAAyCH,UAPpD;IAQlBmB,KAAK,EAAEjB,WARW;IASlB,aAAa;EATK,CAApB;EAYA,MAAMkB,oBAAoB,GAAGnC,OAAO,CAClC,MAAOsB,QAAQ,GAAG,SAAH,GAAeI,gBADI,EAElC,CAACJ,QAAD,EAAWI,gBAAX,CAFkC,CAApC;EAKA,MAAMU,eAAe,GAAGpC,OAAO,CAC7B,MAAMQ,qBAAqB,CAAC2B,oBAAD,CADE,EAE7B,CAACA,oBAAD,CAF6B,CAA/B;EAKA,oBACE;IAAK,SAAS,EAAE7B,KAAK,CAAC+B,gBAAtB;IAAwC,aAAU,oBAAlD;IAAuE,cAAYvB;EAAnF,gBACE;IACE,aAAU,aADZ;IAEE,SAAS,EAAER,KAAK,CAACS,UAFnB;IAGE,cAAYC,cAAc,IAAID,UAHhC;IAIE,KAAK,EAAE;MACLuB,UAAU,EAAEF;IADP;EAJT,GAQGrB,UARH,CADF,eAWE;IAAK,aAAU;EAAf,gBACE;IACE,SAAS,EAAET,KAAK,CAACiC,kBADnB;IAEE,aAAU,2BAFZ;IAGE,cAAYnB,eAAe,IAAID;EAHjC,gBAKE,oBAAC,YAAD;IAAc,SAAS,EAAEb,KAAK,CAACkC,kBAA/B;IAAmD,KAAK,EAAE,EAA1D;IAA8D,MAAM,EAAE;EAAtE,EALF,EAMGrB,WANH,CADF,eASE;IACE,SAAS,EAAEb,KAAK,CAACmC,aADnB;IAEE,WAAW,EAAEd,eAFf;IAGE,YAAY,EAAEC,gBAHhB;IAIE,aAAU;EAJZ,gBAME,oBAAC,UAAD,EAAgBC,WAAhB,CANF,CATF,CAXF,CADF;AAgCD,CA1ED;;AA4EAlB,SAAS,CAACJ,SAAV,2CAAsBA,SAAtB;AAEA,eAAeI,SAAf"}

package/es/organism/mooc-header/style.css

@@ -701,11 +701,22 @@
 
   .items .item {
     line-height: 40px;
-    padding: 0;
+    padding:  0 0 0 8px ;
   }
 
   .item .bar {
-    display: none;
+    background-color: brand;
+  width: 3px;
+  height: 0;
+  left: 0;
+  position: absolute;
+  transition: all 0.2s ease-out;
+  display: none;
+  }
+  .item:hover .bar {
+    height: 40px;
+    width: 3px;
+    display: inherit;
   }
 
   .items .currentOption {
@@ -725,7 +736,7 @@
   }
 
   .items .option {
-    padding: 0;
+    padding:  0 0 0 8px ;
     line-height: 40px;
   }
 

package/es/organism/review-header/index.d.ts

@@ -1,5 +1,5 @@
 export default ReviewHeader;
-declare function ReviewHeader(props: any, context: any): JSX.Element;
+declare function ReviewHeader(props: any, legacyContext: any): JSX.Element;
 declare namespace ReviewHeader {
     export { propTypes };
     export namespace contextTypes {
@@ -24,6 +24,7 @@ declare namespace ReviewHeader {
                 [x: string]: any;
             }>;
         }>>;
+        const translate: import("prop-types").Requireable<(...args: any[]) => any>;
     }
 }
 import propTypes from "./types";

package/es/organism/review-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-header/index.js"],"names":[],"mappings":";AASA,qEAuDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-header/index.js"],"names":[],"mappings":";AASA,2EAiDC"}

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

@@ -1,25 +1,24 @@
 import React from 'react';
 import classnames from 'classnames';
 import getOr from 'lodash/fp/getOr';
-import Provider from '../../atom/provider';
+import Provider, { GetTranslateFromContext, GetSkinFromContext } from '../../atom/provider';
 import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
 import ReviewHeaderSteps from '../../molecule/review-header-steps';
 import style from './style.css';
 import propTypes from './types';
 
-const ReviewHeader = (props, context) => {
+const ReviewHeader = (props, legacyContext) => {
   const {
     steps,
     mode,
     skillName,
     'aria-label': ariaLabel,
-    closeButtonAriaLabel,
     onQuitClick,
     hiddenSteps
   } = props;
-  const {
-    skin
-  } = context;
+  const translate = GetTranslateFromContext(legacyContext);
+  const skin = GetSkinFromContext(legacyContext);
+  const closeButtonAriaLabel = translate('close_button_ariaLabel');
   const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);
   const buttonProps = {
     icon: 'close',
@@ -62,7 +61,8 @@ const ReviewHeader = (props, context) => {
 
 ReviewHeader.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 ReviewHeader.contextTypes = {
-  skin: Provider.childContextTypes.skin
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
 };
 export default ReviewHeader;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classnames","getOr","Provider","ButtonLinkIconOnly","ReviewHeaderSteps","style","propTypes","ReviewHeader","props","context","steps","mode","skillName","ariaLabel","closeButtonAriaLabel","onQuitClick","hiddenSteps","skin","primarySkinColor","buttonProps","icon","onClick","size","className","review","stepsWrapper","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","contextTypes","childContextTypes"],"sources":["../../../src/organism/review-header/index.js"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport Provider from '../../atom/provider';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderSteps from '../../molecule/review-header-steps';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst ReviewHeader = (props, context) => {\n  const {\n    steps,\n    mode,\n    skillName,\n    'aria-label': ariaLabel,\n    closeButtonAriaLabel,\n    onQuitClick,\n    hiddenSteps\n  } = props;\n  const {skin} = context;\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderSteps steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-testid=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = propTypes;\n\nReviewHeader.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default ReviewHeader;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,MAAqB,qBAArB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,iBAAP,MAA8B,oCAA9B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAAsB,SAAtB;;AAEA,MAAMC,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IACJC,KADI;IAEJC,IAFI;IAGJC,SAHI;IAIJ,cAAcC,SAJV;IAKJC,oBALI;IAMJC,WANI;IAOJC;EAPI,IAQFR,KARJ;EASA,MAAM;IAACS;EAAD,IAASR,OAAf;EACA,MAAMS,gBAAgB,GAAGjB,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BgB,IAA9B,CAA9B;EAEA,MAAME,WAAW,GAAG;IAClBC,IAAI,EAAE,OADY;IAElB,aAAa,4BAFK;IAGlB,cAAcN,oBAHI;IAIlBO,OAAO,EAAEN,WAJS;IAKlBO,IAAI,EAAE,YALY;IAMlBC,SAAS,EAAElB,KAAK,CAACmB;EANC,CAApB;EASA,MAAMC,YAAY,GAAGzB,UAAU,CAC7BK,KAAK,CAACoB,YADuB,EAE7BT,WAAW,GAAGX,KAAK,CAACqB,qBAAT,GAAiC,IAFf,CAA/B;EAKA,oBACE;IAAK,SAAS,EAAErB,KAAK,CAACsB,aAAtB;IAAqC,aAAU,eAA/C;IAA+D,cAAYd;EAA3E,gBACE;IAAK,SAAS,EAAER,KAAK,CAACuB;EAAtB,gBACE;IAAK,SAAS,EAAEvB,KAAK,CAACwB,KAAtB;IAA6B,KAAK,EAAElB,IAApC;IAA0C,cAAYA,IAAtD;IAA4D,aAAU;EAAtE,GACGA,IADH,CADF,eAIE;IACE,SAAS,EAAEN,KAAK,CAACO,SADnB;IAEE,KAAK,EAAE;MACLkB,KAAK,EAAEZ;IADF,CAFT;IAKE,KAAK,EAAEN,SALT;IAME,cAAYA,SANd;IAOE,aAAU;EAPZ,GASGA,SATH,CAJF,CADF,eAkBE;IAAK,SAAS,EAAEa;EAAhB,gBACE,oBAAC,iBAAD;IAAmB,KAAK,EAAEf,KAA1B;IAAiC,GAAG,EAAE;EAAtC,EADF,CAlBF,eAsBE;IAAK,SAAS,EAAEL,KAAK,CAAC0B,iBAAtB;IAAyC,eAAY;EAArD,gBACE,oBAAC,kBAAD,EAAwBZ,WAAxB,CADF,CAtBF,CADF;AA4BD,CAvDD;;AAyDAZ,YAAY,CAACD,SAAb,2CAAyBA,SAAzB;AAEAC,YAAY,CAACyB,YAAb,GAA4B;EAC1Bf,IAAI,EAAEf,QAAQ,CAAC+B,iBAAT,CAA2BhB;AADP,CAA5B;AAIA,eAAeV,YAAf"}
+{"version":3,"file":"index.js","names":["React","classnames","getOr","Provider","GetTranslateFromContext","GetSkinFromContext","ButtonLinkIconOnly","ReviewHeaderSteps","style","propTypes","ReviewHeader","props","legacyContext","steps","mode","skillName","ariaLabel","onQuitClick","hiddenSteps","translate","skin","closeButtonAriaLabel","primarySkinColor","buttonProps","icon","onClick","size","className","review","stepsWrapper","stepsWrapperAnimation","headerWrapper","titlesWrapper","title","color","iconButtonWrapper","contextTypes","childContextTypes"],"sources":["../../../src/organism/review-header/index.js"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport Provider, {GetTranslateFromContext, GetSkinFromContext} from '../../atom/provider';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ReviewHeaderSteps from '../../molecule/review-header-steps';\nimport style from './style.css';\nimport propTypes from './types';\n\nconst ReviewHeader = (props, legacyContext) => {\n  const {steps, mode, skillName, 'aria-label': ariaLabel, onQuitClick, hiddenSteps} = props;\n  const translate = GetTranslateFromContext(legacyContext);\n  const skin = GetSkinFromContext(legacyContext);\n  const closeButtonAriaLabel = translate('close_button_ariaLabel');\n  const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const buttonProps = {\n    icon: 'close',\n    'data-name': 'review-header-close-button',\n    'aria-label': closeButtonAriaLabel,\n    onClick: onQuitClick,\n    size: 'responsive',\n    className: style.review\n  };\n\n  const stepsWrapper = classnames(\n    style.stepsWrapper,\n    hiddenSteps ? style.stepsWrapperAnimation : null\n  );\n\n  return (\n    <div className={style.headerWrapper} data-name=\"review-header\" aria-label={ariaLabel}>\n      <div className={style.titlesWrapper}>\n        <div className={style.title} title={mode} aria-label={mode} data-name=\"review-header-mode\">\n          {mode}\n        </div>\n        <div\n          className={style.skillName}\n          style={{\n            color: primarySkinColor\n          }}\n          title={skillName}\n          aria-label={skillName}\n          data-name=\"review-header-skill-name\"\n        >\n          {skillName}\n        </div>\n      </div>\n\n      <div className={stepsWrapper}>\n        <ReviewHeaderSteps steps={steps} key={'review-header-steps'} />\n      </div>\n\n      <div className={style.iconButtonWrapper} data-testid=\"review-header-close-button-wrapper\">\n        <ButtonLinkIconOnly {...buttonProps} />\n      </div>\n    </div>\n  );\n};\n\nReviewHeader.propTypes = propTypes;\n\nReviewHeader.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nexport default ReviewHeader;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,EAA2CC,kBAA3C,QAAoE,qBAApE;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,iBAAP,MAA8B,oCAA9B;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,OAAOC,SAAP,MAAsB,SAAtB;;AAEA,MAAMC,YAAY,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EAC7C,MAAM;IAACC,KAAD;IAAQC,IAAR;IAAcC,SAAd;IAAyB,cAAcC,SAAvC;IAAkDC,WAAlD;IAA+DC;EAA/D,IAA8EP,KAApF;EACA,MAAMQ,SAAS,GAAGf,uBAAuB,CAACQ,aAAD,CAAzC;EACA,MAAMQ,IAAI,GAAGf,kBAAkB,CAACO,aAAD,CAA/B;EACA,MAAMS,oBAAoB,GAAGF,SAAS,CAAC,wBAAD,CAAtC;EACA,MAAMG,gBAAgB,GAAGpB,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8BkB,IAA9B,CAA9B;EAEA,MAAMG,WAAW,GAAG;IAClBC,IAAI,EAAE,OADY;IAElB,aAAa,4BAFK;IAGlB,cAAcH,oBAHI;IAIlBI,OAAO,EAAER,WAJS;IAKlBS,IAAI,EAAE,YALY;IAMlBC,SAAS,EAAEnB,KAAK,CAACoB;EANC,CAApB;EASA,MAAMC,YAAY,GAAG5B,UAAU,CAC7BO,KAAK,CAACqB,YADuB,EAE7BX,WAAW,GAAGV,KAAK,CAACsB,qBAAT,GAAiC,IAFf,CAA/B;EAKA,oBACE;IAAK,SAAS,EAAEtB,KAAK,CAACuB,aAAtB;IAAqC,aAAU,eAA/C;IAA+D,cAAYf;EAA3E,gBACE;IAAK,SAAS,EAAER,KAAK,CAACwB;EAAtB,gBACE;IAAK,SAAS,EAAExB,KAAK,CAACyB,KAAtB;IAA6B,KAAK,EAAEnB,IAApC;IAA0C,cAAYA,IAAtD;IAA4D,aAAU;EAAtE,GACGA,IADH,CADF,eAIE;IACE,SAAS,EAAEN,KAAK,CAACO,SADnB;IAEE,KAAK,EAAE;MACLmB,KAAK,EAAEZ;IADF,CAFT;IAKE,KAAK,EAAEP,SALT;IAME,cAAYA,SANd;IAOE,aAAU;EAPZ,GASGA,SATH,CAJF,CADF,eAkBE;IAAK,SAAS,EAAEc;EAAhB,gBACE,oBAAC,iBAAD;IAAmB,KAAK,EAAEhB,KAA1B;IAAiC,GAAG,EAAE;EAAtC,EADF,CAlBF,eAsBE;IAAK,SAAS,EAAEL,KAAK,CAAC2B,iBAAtB;IAAyC,eAAY;EAArD,gBACE,oBAAC,kBAAD,EAAwBZ,WAAxB,CADF,CAtBF,CADF;AA4BD,CAjDD;;AAmDAb,YAAY,CAACD,SAAb,2CAAyBA,SAAzB;AAEAC,YAAY,CAAC0B,YAAb,GAA4B;EAC1BhB,IAAI,EAAEjB,QAAQ,CAACkC,iBAAT,CAA2BjB,IADP;EAE1BD,SAAS,EAAEhB,QAAQ,CAACkC,iBAAT,CAA2BlB;AAFZ,CAA5B;AAKA,eAAeT,YAAf"}

package/es/organism/review-slide/index.d.ts

@@ -1,7 +1,32 @@
 export default ReviewSlide;
-declare function ReviewSlide(props: any): JSX.Element;
+declare function ReviewSlide(props: any, legacyContext: any): JSX.Element;
 declare namespace ReviewSlide {
     export { propTypes };
+    export namespace contextTypes {
+        const skin: PropTypes.Requireable<PropTypes.InferProps<{
+            common: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            images: PropTypes.Requireable<PropTypes.InferProps<{
+                'logo-mobile': PropTypes.Requireable<any>;
+                logo: PropTypes.Requireable<any>;
+                'logo-email': PropTypes.Requireable<any>;
+                login: PropTypes.Requireable<any>;
+            }>>;
+            icons: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            mod: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+            courses: PropTypes.Requireable<any[]>;
+            texts: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
 }
 import propTypes from "./prop-types";
+import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/organism/review-slide/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.js"],"names":[],"mappings":";AA6JA,sDA8CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.js"],"names":[],"mappings":";AA8JA,0EAkDC"}

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

@@ -9,7 +9,7 @@ import Answer from '../../molecule/answer';
 import ButtonLink from '../../atom/button-link';
 import Loader from '../../atom/loader';
 import ReviewCorrectionPopin from '../../molecule/review-correction-popin';
-import { GetSkinFromContext } from '../../atom/provider';
+import Provider, { GetSkinFromContext, GetTranslateFromContext } from '../../atom/provider';
 import propTypes from './prop-types';
 import style from './style.css';
 
@@ -69,7 +69,8 @@ CorrectionPopin.propTypes = process.env.NODE_ENV !== "production" ? {
 const ValidateButton = ({
   slideIndex,
   validateButton,
-  primarySkinColor
+  primarySkinColor,
+  ariaLabel
 }) => {
   const {
     label,
@@ -79,7 +80,7 @@ const ValidateButton = ({
   const validateButtonProps = {
     type: 'primary',
     label,
-    'aria-label': label,
+    'aria-label': ariaLabel,
     'data-name': `slide-validate-button-${slideIndex}`,
     onClick,
     disabled,
@@ -111,7 +112,8 @@ const ValidateButton = ({
 ValidateButton.propTypes = process.env.NODE_ENV !== "production" ? {
   slideIndex: PropTypes.string,
   validateButton: propTypes.validateButton,
-  primarySkinColor: PropTypes.string
+  primarySkinColor: PropTypes.string,
+  ariaLabel: PropTypes.string
 } : {};
 
 const QuestionContainer = props => {
@@ -159,14 +161,16 @@ QuestionContainer.propTypes = process.env.NODE_ENV !== "production" ? {
   disableContent: PropTypes.bool
 } : {};
 
-const ReviewSlide = props => {
+const ReviewSlide = (props, legacyContext) => {
   const {
     slide,
     validateButton,
     correctionPopinProps,
     slideIndex = '0'
   } = props;
-  const skin = GetSkinFromContext();
+  const skin = GetSkinFromContext(legacyContext);
+  const translate = GetTranslateFromContext(legacyContext);
+  const validateariaLabel = translate('validate_aria_label');
   const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
   const {
     loading,
@@ -195,7 +199,8 @@ const ReviewSlide = props => {
     slideIndex: slideIndex,
     validateButton: validateButton,
     primarySkinColor: primarySkinColor,
-    key: "validate-button"
+    key: "validate-button",
+    ariaLabel: validateariaLabel
   }), /*#__PURE__*/React.createElement(CorrectionPopin, {
     correctionPopinProps: correctionPopinProps,
     slideIndex: slideIndex,
@@ -206,5 +211,9 @@ const ReviewSlide = props => {
 };
 
 ReviewSlide.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+ReviewSlide.contextTypes = {
+  skin: Provider.childContextTypes.skin,
+  translate: Provider.childContextTypes.translate
+};
 export default ReviewSlide;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useEffect","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","GetSkinFromContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","onClick","_correctionPopinProps","type","resultLabel","keyDownHandler","event","key","preventDefault","document","removeEventListener","addEventListener","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","disableContent","slideContentContainer","disabledSlideContent","question","__html","help","answerContainer","shape","slide","ReviewSlide","skin","loading","loadingAriaLabel","parentContentTitle","disabledContent","loader"],"sources":["../../../src/organism/review-slide/index.js"],"sourcesContent":["import React, {useMemo, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport {GetSkinFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n  const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick,\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  // there is an error of eslint here because this useEffect will be only there when the correctionPopin will be there\n  // but that is on purpose to go to the next slide if you press enter when the correctionPopin is present\n  // istanbul ignore next\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const keyDownHandler = event => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        onClick();\n        document.removeEventListener('keydown', keyDownHandler);\n      }\n    };\n    document.addEventListener('keydown', keyDownHandler);\n  }, []);\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': label,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n  };\n\n  /* istanbul ignore next */\n  useEffect(() => {\n    const keyDownHandler = event => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n      }\n    };\n    if (disabled) document.addEventListener('keydown', keyDownHandler);\n    return () => {\n      document.removeEventListener('keydown', keyDownHandler);\n    };\n  }, [disabled]);\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin, disableContent} = props;\n  if (!answerUI || !questionText) return null;\n\n  return (\n    <div\n      key=\"content-container\"\n      data-testid=\"content-container\"\n      className={classnames(\n        style.slideContentContainer,\n        disableContent ? style.disabledSlideContent : null\n      )}\n    >\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div\n        key=\"title\"\n        data-testid=\"slide-question\"\n        className={style.question}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: questionText}}\n      />\n      <div\n        key=\"help\"\n        className={style.help}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: get('help', answerUI)}}\n      />\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerUI} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string,\n  disableContent: PropTypes.bool\n};\n\nconst ReviewSlide = props => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const skin = GetSkinFromContext();\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    disabledContent,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-testid=\"review-slide\" className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        <>\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            disableContent={disabledContent}\n            key=\"question-container\"\n          />\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n          />\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        </>\n      )}\n    </div>\n  );\n};\n\nReviewSlide.propTypes = propTypes;\n\nexport default ReviewSlide;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,EAAwBC,SAAxB,QAAwC,OAAxC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,MAAP,MAAmB,uBAAnB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,qBAAP,MAAkC,wCAAlC;AACA,SAAQC,kBAAR,QAAiC,qBAAjC;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,eAAe,GAAG,CAAC;EACvBC,oBADuB;EAEvBC,UAFuB;EAGvBC,mBAHuB;EAIvBC;AAJuB,CAAD,KAKlB;EACJ,IAAI,CAACD,mBAAL,EAA0B,OAAO,IAAP;EAE1B,MAAME,GAAG,GAAGb,KAAK,CAAC,EAAD,EAAK,KAAL,EAAYS,oBAAZ,CAAjB;EACA,MAAMK,WAAW,GAAGd,KAAK,CAAC;IAACe,KAAK,EAAE,EAAR;IAAYC,OAAO,EAAE;EAArB,CAAD,EAA2B,aAA3B,EAA0CP,oBAA1C,CAAzB;EACA,MAAMQ,IAAI,GAAGlB,GAAG,CAAC,MAAD,EAASU,oBAAT,CAAhB;EACA,MAAMS,OAAO,GAAGnB,GAAG,CAAC,CAAC,MAAD,EAAS,SAAT,CAAD,EAAsBU,oBAAtB,CAAnB;EAEA,MAAMU,qBAAqB,GAAG;IAC5BF,IAAI,EAAE;MACJC,OADI;MAEJH,KAAK,EAAEE,IAAI,IAAIA,IAAI,CAACF,KAFhB;MAGJ,aAAc,wBAAuBL,UAAW,EAH5C;MAIJ,cAAcO,IAAI,IAAIA,IAAI,CAAC,YAAD;IAJtB,CADsB;IAO5BJ,GAP4B;IAQ5BC,WAR4B;IAS5BM,IAAI,EAAEX,oBAAoB,CAACW,IATC;IAU5BC,WAAW,EAAEZ,oBAAoB,CAACY;EAVN,CAA9B,CARI,CAqBJ;EACA;EACA;EACA;;EACAzB,SAAS,CAAC,MAAM;IACd,MAAM0B,cAAc,GAAGC,KAAK,IAAI;MAC9B,IAAIA,KAAK,CAACC,GAAN,KAAc,OAAd,IAAyBD,KAAK,CAACC,GAAN,KAAc,GAA3C,EAAgD;QAC9CD,KAAK,CAACE,cAAN;QACAP,OAAO;QACPQ,QAAQ,CAACC,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC;MACD;IACF,CAND;;IAOAI,QAAQ,CAACE,gBAAT,CAA0B,SAA1B,EAAqCN,cAArC;EACD,CATQ,EASN,EATM,CAAT;EAWA,oBACE;IACE,SAAS,EAAExB,UAAU,CACnBS,KAAK,CAACsB,sBADa,EAEnBjB,sBAAsB,GAAGL,KAAK,CAACuB,cAAT,GAA0B,IAF7B;EADvB,gBAME,oBAAC,qBAAD,EAA2BX,qBAA3B,CANF,CADF;AAUD,CAnDD;;AAqDAX,eAAe,CAACF,SAAhB,2CAA4B;EAC1BI,UAAU,EAAEb,SAAS,CAACkC,MADI;EAE1BpB,mBAAmB,EAAEd,SAAS,CAACmC,IAFL;EAG1BpB,sBAAsB,EAAEf,SAAS,CAACmC,IAHR;EAI1BvB,oBAAoB,EAAEH,SAAS,CAACG;AAJN,CAA5B;;AAOA,MAAMwB,cAAc,GAAG,CAAC;EAACvB,UAAD;EAAawB,cAAb;EAA6BC;AAA7B,CAAD,KAAoD;EACzE,MAAM;IAACpB,KAAD;IAAQG,OAAR;IAAiBkB;EAAjB,IAA6BF,cAAnC;EACA,MAAMG,mBAAmB,GAAG;IAC1BjB,IAAI,EAAE,SADoB;IAE1BL,KAF0B;IAG1B,cAAcA,KAHY;IAI1B,aAAc,yBAAwBL,UAAW,EAJvB;IAK1BQ,OAL0B;IAM1BkB,QAN0B;IAO1BE,SAAS,EAAE/B,KAAK,CAAC2B,cAPS;IAQ1BK,WAAW,EAAE;MACXC,eAAe,EAAEL;IADN;EARa,CAA5B;EAaA;;EACAvC,SAAS,CAAC,MAAM;IACd,MAAM0B,cAAc,GAAGC,KAAK,IAAI;MAC9B,IAAIA,KAAK,CAACC,GAAN,KAAc,OAAd,IAAyBD,KAAK,CAACC,GAAN,KAAc,GAA3C,EAAgD;QAC9CD,KAAK,CAACE,cAAN;MACD;IACF,CAJD;;IAKA,IAAIW,QAAJ,EAAcV,QAAQ,CAACE,gBAAT,CAA0B,SAA1B,EAAqCN,cAArC;IACd,OAAO,MAAM;MACXI,QAAQ,CAACC,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC;IACD,CAFD;EAGD,CAVQ,EAUN,CAACc,QAAD,CAVM,CAAT;EAYA,oBACE;IAAK,GAAG,EAAC,gBAAT;IAA0B,SAAS,EAAE7B,KAAK,CAACkC;EAA3C,gBACE,oBAAC,UAAD,EAAgBJ,mBAAhB,CADF,CADF;AAKD,CAjCD;;AAmCAJ,cAAc,CAAC3B,SAAf,2CAA2B;EACzBI,UAAU,EAAEb,SAAS,CAACkC,MADG;EAEzBG,cAAc,EAAE5B,SAAS,CAAC4B,cAFD;EAGzBC,gBAAgB,EAAEtC,SAAS,CAACkC;AAHH,CAA3B;;AAMA,MAAMW,iBAAiB,GAAGC,KAAK,IAAI;EACjC,MAAM;IAACC,QAAD;IAAWC,YAAX;IAAyBC,cAAzB;IAAyCC;EAAzC,IAA2DJ,KAAjE;EACA,IAAI,CAACC,QAAD,IAAa,CAACC,YAAlB,EAAgC,OAAO,IAAP;EAEhC,oBACE;IACE,GAAG,EAAC,mBADN;IAEE,eAAY,mBAFd;IAGE,SAAS,EAAE/C,UAAU,CACnBS,KAAK,CAACyC,qBADa,EAEnBD,cAAc,GAAGxC,KAAK,CAAC0C,oBAAT,GAAgC,IAF3B;EAHvB,gBAQE;IAAK,GAAG,EAAC,aAAT;IAAuB,SAAS,EAAE1C,KAAK,CAACuC;EAAxC,GACGA,cADH,CARF,eAWE;IACE,GAAG,EAAC,OADN;IAEE,eAAY,gBAFd;IAGE,SAAS,EAAEvC,KAAK,CAAC2C,QAHnB,CAIE;IAJF;IAKE,uBAAuB,EAAE;MAACC,MAAM,EAAEN;IAAT;EAL3B,EAXF,eAkBE;IACE,GAAG,EAAC,MADN;IAEE,SAAS,EAAEtC,KAAK,CAAC6C,IAFnB,CAGE;IAHF;IAIE,uBAAuB,EAAE;MAACD,MAAM,EAAEpD,GAAG,CAAC,MAAD,EAAS6C,QAAT;IAAZ;EAJ3B,EAlBF,eAwBE;IAAK,GAAG,EAAC,kBAAT;IAA4B,SAAS,EAAErC,KAAK,CAAC8C;EAA7C,gBACE,oBAAC,MAAD,eAAYT,QAAZ;IAAsB,GAAG,EAAC;EAA1B,GADF,CAxBF,CADF;AA8BD,CAlCD;;AAoCAF,iBAAiB,CAACpC,SAAlB,2CAA8B;EAC5BsC,QAAQ,EAAE/C,SAAS,CAACyD,KAAV,CAAgBhD,SAAS,CAACiD,KAAV,CAAgBX,QAAhC,CADkB;EAE5BC,YAAY,EAAEhD,SAAS,CAACkC,MAFI;EAG5Be,cAAc,EAAEjD,SAAS,CAACkC,MAHE;EAI5BgB,cAAc,EAAElD,SAAS,CAACmC;AAJE,CAA9B;;AAOA,MAAMwB,WAAW,GAAGb,KAAK,IAAI;EAC3B,MAAM;IAACY,KAAD;IAAQrB,cAAR;IAAwBzB,oBAAxB;IAA8CC,UAAU,GAAG;EAA3D,IAAkEiC,KAAxE;EAEA,MAAMc,IAAI,GAAGpD,kBAAkB,EAA/B;EACA,MAAM8B,gBAAgB,GAAGxC,OAAO,CAAC,MAAMK,KAAK,CAAC,SAAD,EAAY,gBAAZ,EAA8ByD,IAA9B,CAAZ,EAAiD,CAACA,IAAD,CAAjD,CAAhC;EACA,MAAM;IACJC,OADI;IAEJC,gBAFI;IAGJC,kBAHI;IAIJf,YAJI;IAKJgB,eALI;IAMJjB,QANI;IAOJjC,mBAPI;IAQJC;EARI,IASF2C,KATJ;EAWA,oBACE;IAAK,eAAY,cAAjB;IAAgC,SAAS,EAAEhD,KAAK,CAACgD;EAAjD,GACGG,OAAO,gBACN,oBAAC,MAAD;IAAQ,SAAS,EAAEnD,KAAK,CAACuD,MAAzB;IAAiC,KAAK,EAAC,SAAvC;IAAiD,cAAYH;EAA7D,EADM,gBAGN,uDACE,oBAAC,iBAAD;IACE,cAAc,EAAEC,kBADlB;IAEE,YAAY,EAAEf,YAFhB;IAGE,QAAQ,EAAED,QAHZ;IAIE,cAAc,EAAEiB,eAJlB;IAKE,GAAG,EAAC;EALN,EADF,eAQE,oBAAC,cAAD;IACE,UAAU,EAAEnD,UADd;IAEE,cAAc,EAAEwB,cAFlB;IAGE,gBAAgB,EAAEC,gBAHpB;IAIE,GAAG,EAAC;EAJN,EARF,eAcE,oBAAC,eAAD;IACE,oBAAoB,EAAE1B,oBADxB;IAEE,UAAU,EAAEC,UAFd;IAGE,mBAAmB,EAAEC,mBAHvB;IAIE,sBAAsB,EAAEC,sBAJ1B;IAKE,GAAG,EAAC;EALN,EAdF,CAJJ,CADF;AA8BD,CA9CD;;AAgDA4C,WAAW,CAAClD,SAAZ,2CAAwBA,SAAxB;AAEA,eAAekD,WAAf"}
+{"version":3,"file":"index.js","names":["React","useMemo","useEffect","PropTypes","classnames","get","getOr","Answer","ButtonLink","Loader","ReviewCorrectionPopin","Provider","GetSkinFromContext","GetTranslateFromContext","propTypes","style","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","klf","information","label","message","next","onClick","_correctionPopinProps","type","resultLabel","keyDownHandler","event","key","preventDefault","document","removeEventListener","addEventListener","correctionPopinWrapper","popinAnimation","string","bool","ValidateButton","validateButton","primarySkinColor","ariaLabel","disabled","validateButtonProps","className","customStyle","backgroundColor","validateButtonWrapper","QuestionContainer","props","answerUI","questionText","questionOrigin","disableContent","slideContentContainer","disabledSlideContent","question","__html","help","answerContainer","shape","slide","ReviewSlide","legacyContext","skin","translate","validateariaLabel","loading","loadingAriaLabel","parentContentTitle","disabledContent","loader","contextTypes","childContextTypes"],"sources":["../../../src/organism/review-slide/index.js"],"sourcesContent":["import React, {useMemo, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport Answer from '../../molecule/answer';\nimport ButtonLink from '../../atom/button-link';\nimport Loader from '../../atom/loader';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nconst CorrectionPopin = ({\n  correctionPopinProps,\n  slideIndex,\n  showCorrectionPopin,\n  animateCorrectionPopin\n}) => {\n  if (!showCorrectionPopin) return null;\n\n  const klf = getOr({}, 'klf', correctionPopinProps);\n  const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n  const next = get('next', correctionPopinProps);\n  const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n  const _correctionPopinProps = {\n    next: {\n      onClick,\n      label: next && next.label,\n      'data-name': `next-question-button-${slideIndex}`,\n      'aria-label': next && next['aria-label']\n    },\n    klf,\n    information,\n    type: correctionPopinProps.type,\n    resultLabel: correctionPopinProps.resultLabel\n  };\n\n  // there is an error of eslint here because this useEffect will be only there when the correctionPopin will be there\n  // but that is on purpose to go to the next slide if you press enter when the correctionPopin is present\n  // istanbul ignore next\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const keyDownHandler = event => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        onClick();\n        document.removeEventListener('keydown', keyDownHandler);\n      }\n    };\n    document.addEventListener('keydown', keyDownHandler);\n  }, []);\n\n  return (\n    <div\n      className={classnames(\n        style.correctionPopinWrapper,\n        animateCorrectionPopin ? style.popinAnimation : null\n      )}\n    >\n      <ReviewCorrectionPopin {..._correctionPopinProps} />\n    </div>\n  );\n};\n\nCorrectionPopin.propTypes = {\n  slideIndex: PropTypes.string,\n  showCorrectionPopin: PropTypes.bool,\n  animateCorrectionPopin: PropTypes.bool,\n  correctionPopinProps: propTypes.correctionPopinProps\n};\n\nconst ValidateButton = ({slideIndex, validateButton, primarySkinColor, ariaLabel}) => {\n  const {label, onClick, disabled} = validateButton;\n  const validateButtonProps = {\n    type: 'primary',\n    label,\n    'aria-label': ariaLabel,\n    'data-name': `slide-validate-button-${slideIndex}`,\n    onClick,\n    disabled,\n    className: style.validateButton,\n    customStyle: {\n      backgroundColor: primarySkinColor\n    }\n  };\n\n  /* istanbul ignore next */\n  useEffect(() => {\n    const keyDownHandler = event => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n      }\n    };\n    if (disabled) document.addEventListener('keydown', keyDownHandler);\n    return () => {\n      document.removeEventListener('keydown', keyDownHandler);\n    };\n  }, [disabled]);\n\n  return (\n    <div key=\"button-wrapper\" className={style.validateButtonWrapper}>\n      <ButtonLink {...validateButtonProps} />\n    </div>\n  );\n};\n\nValidateButton.propTypes = {\n  slideIndex: PropTypes.string,\n  validateButton: propTypes.validateButton,\n  primarySkinColor: PropTypes.string,\n  ariaLabel: PropTypes.string\n};\n\nconst QuestionContainer = props => {\n  const {answerUI, questionText, questionOrigin, disableContent} = props;\n  if (!answerUI || !questionText) return null;\n\n  return (\n    <div\n      key=\"content-container\"\n      data-testid=\"content-container\"\n      className={classnames(\n        style.slideContentContainer,\n        disableContent ? style.disabledSlideContent : null\n      )}\n    >\n      <div key=\"from-course\" className={style.questionOrigin}>\n        {questionOrigin}\n      </div>\n      <div\n        key=\"title\"\n        data-testid=\"slide-question\"\n        className={style.question}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: questionText}}\n      />\n      <div\n        key=\"help\"\n        className={style.help}\n        // eslint-disable-next-line react/no-danger\n        dangerouslySetInnerHTML={{__html: get('help', answerUI)}}\n      />\n      <div key=\"answer-container\" className={style.answerContainer}>\n        <Answer {...answerUI} key=\"answer\" />\n      </div>\n    </div>\n  );\n};\n\nQuestionContainer.propTypes = {\n  answerUI: PropTypes.shape(propTypes.slide.answerUI),\n  questionText: PropTypes.string,\n  questionOrigin: PropTypes.string,\n  disableContent: PropTypes.bool\n};\n\nconst ReviewSlide = (props, legacyContext) => {\n  const {slide, validateButton, correctionPopinProps, slideIndex = '0'} = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const translate = GetTranslateFromContext(legacyContext);\n\n  const validateariaLabel = translate('validate_aria_label');\n  const primarySkinColor = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const {\n    loading,\n    loadingAriaLabel,\n    parentContentTitle,\n    questionText,\n    disabledContent,\n    answerUI,\n    showCorrectionPopin,\n    animateCorrectionPopin\n  } = slide;\n\n  return (\n    <div data-testid=\"review-slide\" className={style.slide}>\n      {loading ? (\n        <Loader className={style.loader} theme=\"default\" aria-label={loadingAriaLabel} />\n      ) : (\n        <>\n          <QuestionContainer\n            questionOrigin={parentContentTitle}\n            questionText={questionText}\n            answerUI={answerUI}\n            disableContent={disabledContent}\n            key=\"question-container\"\n          />\n          <ValidateButton\n            slideIndex={slideIndex}\n            validateButton={validateButton}\n            primarySkinColor={primarySkinColor}\n            key=\"validate-button\"\n            ariaLabel={validateariaLabel}\n          />\n          <CorrectionPopin\n            correctionPopinProps={correctionPopinProps}\n            slideIndex={slideIndex}\n            showCorrectionPopin={showCorrectionPopin}\n            animateCorrectionPopin={animateCorrectionPopin}\n            key=\"correction-popin\"\n          />\n        </>\n      )}\n    </div>\n  );\n};\n\nReviewSlide.propTypes = propTypes;\n\nReviewSlide.contextTypes = {\n  skin: Provider.childContextTypes.skin,\n  translate: Provider.childContextTypes.translate\n};\n\nexport default ReviewSlide;\n"],"mappings":"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"}

package/lib/atom/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";AA0FA,iDA0BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button/index.js"],"names":[],"mappings":";AA6FA,iDA0BC"}

package/lib/atom/button/index.js

@@ -32,7 +32,8 @@ const ButtonContent = props => {
     children,
     type,
     style,
-    'data-name': dataName
+    'data-name': dataName,
+    'aria-label': ariaLabel
   } = props;
   const anchorClassName = disabled && `${className} ${_style.default.disabledAnchor}` || className;
   const anchorOnClick = disabled && null || onClick;
@@ -48,7 +49,8 @@ const ButtonContent = props => {
         onClick: anchorOnClick,
         target: target,
         className: anchorClassName,
-        style: style
+        style: style,
+        "aria-label": ariaLabel
       }, submitValue || children || 'submit');
 
     case 'a':
@@ -88,7 +90,8 @@ ButtonContent.propTypes = process.env.NODE_ENV !== "production" ? {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   style: _propTypes.default.shape({}),
-  'data-name': _propTypes.default.string
+  'data-name': _propTypes.default.string,
+  'aria-label': _propTypes.default.string
 } : {};
 
 const Button = props => {

package/lib/atom/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","cssStyle","button","children","type","style","dataName","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","propTypes","ColorPropType","PropTypes","string","bool","oneOf","func","node","shape","Button","buttonContentClassName","isLinkDisabled","cNames","classnames","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n  const {\n    color,\n    submitValue,\n    disabled,\n    download,\n    href,\n    target,\n    onClick,\n    className = cssStyle.button,\n    children,\n    type,\n    style,\n    'data-name': dataName\n  } = props;\n  const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n  const anchorOnClick = (disabled && null) || onClick;\n  const anchorHref = (disabled && null) || href;\n  const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n  switch (type) {\n    case 'link':\n      return (\n        <Link\n          data-name={dataName}\n          href={anchorHref}\n          download={download}\n          onClick={anchorOnClick}\n          target={target}\n          className={anchorClassName}\n          style={style}\n        >\n          {submitValue || children || 'submit'}\n        </Link>\n      );\n\n    case 'a':\n      return (\n        <a\n          data-name={dataName}\n          href={anchorHref}\n          target={target}\n          className={anchorClassName}\n          onClick={anchorOnClick}\n          style={style}\n        >\n          {submitValue || children}\n        </a>\n      );\n\n    default:\n      return (\n        <input\n          data-name={dataName}\n          type={type}\n          value={submitValue}\n          disabled={disabled}\n          onClick={onClick}\n          className={inputClassName}\n          style={{\n            color,\n            ...style\n          }}\n        />\n      );\n  }\n};\n\nButtonContent.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string\n};\n\nconst Button = props => {\n  const {\n    className,\n    buttonContentClassName,\n    isLinkDisabled,\n    type = 'submit',\n    children,\n    style\n  } = props;\n  const cNames =\n    (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n    classnames([cssStyle.button, className]);\n  return (\n    <div className={cNames}>\n      <ButtonContent\n        {...props}\n        type={type}\n        className={buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent}\n        style={{\n          ...style\n        }}\n      >\n        {children}\n      </ButtonContent>\n    </div>\n  );\n};\n\nButton.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  isLinkDisabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  buttonContentClassName: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string\n};\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","cssStyle","button","children","type","style","dataName","ariaLabel","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","propTypes","ColorPropType","PropTypes","string","bool","oneOf","func","node","shape","Button","buttonContentClassName","isLinkDisabled","cNames","classnames","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n  const {\n    color,\n    submitValue,\n    disabled,\n    download,\n    href,\n    target,\n    onClick,\n    className = cssStyle.button,\n    children,\n    type,\n    style,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  } = props;\n  const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n  const anchorOnClick = (disabled && null) || onClick;\n  const anchorHref = (disabled && null) || href;\n  const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n  switch (type) {\n    case 'link':\n      return (\n        <Link\n          data-name={dataName}\n          href={anchorHref}\n          download={download}\n          onClick={anchorOnClick}\n          target={target}\n          className={anchorClassName}\n          style={style}\n          aria-label={ariaLabel}\n        >\n          {submitValue || children || 'submit'}\n        </Link>\n      );\n\n    case 'a':\n      return (\n        <a\n          data-name={dataName}\n          href={anchorHref}\n          target={target}\n          className={anchorClassName}\n          onClick={anchorOnClick}\n          style={style}\n        >\n          {submitValue || children}\n        </a>\n      );\n\n    default:\n      return (\n        <input\n          data-name={dataName}\n          type={type}\n          value={submitValue}\n          disabled={disabled}\n          onClick={onClick}\n          className={inputClassName}\n          style={{\n            color,\n            ...style\n          }}\n        />\n      );\n  }\n};\n\nButtonContent.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string,\n  'aria-label': PropTypes.string\n};\n\nconst Button = props => {\n  const {\n    className,\n    buttonContentClassName,\n    isLinkDisabled,\n    type = 'submit',\n    children,\n    style\n  } = props;\n  const cNames =\n    (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n    classnames([cssStyle.button, className]);\n  return (\n    <div className={cNames}>\n      <ButtonContent\n        {...props}\n        type={type}\n        className={buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent}\n        style={{\n          ...style\n        }}\n      >\n        {children}\n      </ButtonContent>\n    </div>\n  );\n};\n\nButton.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  isLinkDisabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  buttonContentClassName: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string\n};\n\nexport default Button;\n"],"mappings":"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"}

package/lib/atom/range/handle.d.ts

@@ -5,6 +5,11 @@ declare namespace Handle {
         const onPan: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanStart: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        const HammerForTesting: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
     }
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/atom/range/handle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAwCC"}
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAsCC"}