@coorpacademy/components 11.7.2 → 11.7.3-alpha.29

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

@@ -0,0 +1,205 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _templateContext = require("../../template/app-review/template-context");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createStyleSheet = theme => _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dot: {
+    position: 'absolute'
+  },
+  blue: {
+    backgroundColor: theme.colors.cta
+  },
+  red: {
+    backgroundColor: theme.colors.negative
+  },
+  green: {
+    backgroundColor: theme.colors.positive
+  },
+  yellow: {
+    backgroundColor: theme.colors.battle
+  }
+});
+
+const CYCLE_DURATION = 3000;
+const MIN_TIME = 1000;
+
+const Loader = props => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const {
+    theme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
+  const [visible, setVisible] = (0, _react.useState)(true);
+  const [minTimeIsSpent, setMinTimeSpent] = (0, _react.useState)(false);
+  const rotation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const hideAnimation = (0, _reactNativeAnimation.useAnimateProp)({
+    property: 'opacity',
+    fromValue: 1,
+    toValue: 0
+  });
+  const {
+    height = 60,
+    color,
+    readyToHide
+  } = props;
+  (0, _react.useEffect)(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+  (0, _react.useEffect)(() => {
+    if (readyToHide && minTimeIsSpent) {
+      setVisible(false);
+    }
+  }, [readyToHide, minTimeIsSpent]);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      hideAnimation.start();
+    }
+  }, [visible, hideAnimation]);
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      setMinTimeSpent(true);
+    }, MIN_TIME);
+
+    const _animation = _reactNative.Animated.parallel([_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 1,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 2,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 3,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    })])), _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(rotation, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(rotation, {
+      toValue: 1,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    })]))]);
+
+    _animation.start();
+
+    return () => {
+      _animation.stop();
+    }; // eslint bad warning --> effect only onmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const interpolatedScale = scale.interpolate({
+    inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],
+    outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]
+  });
+  const interpolatedRotation = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  const dotWidth = rotation.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [height / 2, height / 6, height / 2]
+  });
+  const dotTranslate = rotation.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]
+  });
+  const dotStyle = {
+    width: dotWidth,
+    height: height / 6,
+    borderRadius: height / 12
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: hideAnimation.animatedStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.container, {
+      height,
+      width: height,
+      transform: [{
+        scaleX: interpolatedScale
+      }, {
+        scaleY: interpolatedScale
+      }, {
+        rotateZ: interpolatedRotation
+      }]
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.red, dotStyle, {
+      transform: [{
+        rotateZ: '45deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.green, dotStyle, {
+      transform: [{
+        rotateZ: '135deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.yellow, dotStyle, {
+      transform: [{
+        rotateZ: '225deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.blue, dotStyle, {
+      transform: [{
+        rotateZ: '315deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  })));
+};
+
+var _default = Loader;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","container","alignItems","justifyContent","dot","position","blue","backgroundColor","colors","cta","red","negative","green","positive","yellow","battle","CYCLE_DURATION","MIN_TIME","Loader","props","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","visible","setVisible","minTimeIsSpent","setMinTimeSpent","rotation","useRef","Animated","Value","current","scale","hideAnimation","useAnimateProp","property","fromValue","toValue","height","color","readyToHide","useEffect","_stylesheet","start","setTimeout","_animation","parallel","loop","sequence","timing","duration","useNativeDriver","easing","Easing","inOut","sin","stop","interpolatedScale","interpolate","inputRange","outputRange","interpolatedRotation","dotWidth","dotTranslate","dotStyle","width","borderRadius","animatedStyle","transform","scaleX","scaleY","rotateZ","translateX"],"sources":["../../../src/atom/loader/index.native.tsx"],"sourcesContent":["import {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, Easing, ViewStyle, ColorValue} from 'react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  dot: ViewStyle;\n  blue: ViewStyle;\n  red: ViewStyle;\n  green: ViewStyle;\n  yellow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    container: {\n      alignItems: 'center',\n      justifyContent: 'center'\n    },\n    dot: {\n      position: 'absolute'\n    },\n    blue: {\n      backgroundColor: theme.colors.cta\n    },\n    red: {\n      backgroundColor: theme.colors.negative\n    },\n    green: {\n      backgroundColor: theme.colors.positive\n    },\n    yellow: {\n      backgroundColor: theme.colors.battle\n    }\n  });\n\nexport type Props = {\n  color?: ColorValue;\n  height?: number;\n  readyToHide: boolean;\n};\n\nconst CYCLE_DURATION = 3000;\nconst MIN_TIME = 1000;\n\nconst Loader = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [visible, setVisible] = useState<boolean>(true);\n  const [minTimeIsSpent, setMinTimeSpent] = useState<boolean>(false);\n\n  const rotation = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const scale = useRef<Animated.Value>(new Animated.Value(0)).current;\n\n  const hideAnimation = useAnimateProp({\n    property: 'opacity',\n    fromValue: 1,\n    toValue: 0\n  });\n\n  const {height = 60, color, readyToHide} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  useEffect(() => {\n    if (readyToHide && minTimeIsSpent) {\n      setVisible(false);\n    }\n  }, [readyToHide, minTimeIsSpent]);\n\n  useEffect(() => {\n    if (!visible) {\n      hideAnimation.start();\n    }\n  }, [visible, hideAnimation]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setMinTimeSpent(true);\n    }, MIN_TIME);\n\n    const _animation = Animated.parallel([\n      Animated.loop(\n        Animated.sequence([\n          Animated.timing(scale, {toValue: 0, duration: 0, useNativeDriver: false}),\n          Animated.timing(scale, {\n            toValue: 1,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          }),\n          Animated.timing(scale, {\n            toValue: 2,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          }),\n          Animated.timing(scale, {\n            toValue: 3,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          })\n        ])\n      ),\n      Animated.loop(\n        Animated.sequence([\n          Animated.timing(rotation, {toValue: 0, duration: 0, useNativeDriver: false}),\n          Animated.timing(rotation, {\n            toValue: 1,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          })\n        ])\n      )\n    ]);\n\n    _animation.start();\n\n    return () => {\n      _animation.stop();\n    };\n    // eslint bad warning --> effect only onmount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const interpolatedScale = scale.interpolate({\n    inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],\n    outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]\n  });\n\n  const interpolatedRotation = rotation.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg']\n  });\n  const dotWidth = rotation.interpolate({\n    inputRange: [0, 0.5, 1],\n    outputRange: [height / 2, height / 6, height / 2]\n  });\n  const dotTranslate = rotation.interpolate({\n    inputRange: [0, 0.5, 1],\n    outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]\n  });\n  const dotStyle = {\n    width: dotWidth,\n    height: height / 6,\n    borderRadius: height / 12\n  };\n\n  return (\n    <Animated.View style={hideAnimation.animatedStyle}>\n      <Animated.View\n        style={[\n          styleSheet.container,\n          {\n            height,\n            width: height,\n            transform: [\n              {scaleX: interpolatedScale},\n              {scaleY: interpolatedScale},\n              {rotateZ: interpolatedRotation}\n            ]\n          }\n        ]}\n      >\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.red,\n            dotStyle,\n            {transform: [{rotateZ: '45deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.green,\n            dotStyle,\n            {transform: [{rotateZ: '135deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.yellow,\n            dotStyle,\n            {transform: [{rotateZ: '225deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.blue,\n            dotStyle,\n            {transform: [{rotateZ: '315deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nexport default Loader;\n"],"mappings":"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"}

package/lib/atom/select/index.d.ts

@@ -4,6 +4,15 @@ export namespace SelectOptionPropTypes {
     const selected: PropTypes.Requireable<boolean>;
     const validOption: PropTypes.Requireable<boolean>;
 }
+export namespace SelectOptionGroupPropTypes {
+    const label: PropTypes.Validator<string>;
+    const options: PropTypes.Requireable<(PropTypes.InferProps<{
+        name: PropTypes.Validator<string>;
+        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        selected: PropTypes.Requireable<boolean>;
+        validOption: PropTypes.Requireable<boolean>;
+    }> | null | undefined)[]>;
+}
 export default Select;
 import PropTypes from "prop-types";
 declare function Select(props: any, legacyContext: any): JSX.Element;
@@ -48,6 +57,15 @@ declare namespace Select {
             selected: PropTypes.Requireable<boolean>;
             validOption: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
+        optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }> | null | undefined)[]>;
         modified: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         'aria-label': PropTypes.Requireable<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;AAwDA,qEA4KC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2DA,qEAqLC"}

package/lib/atom/select/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.SelectOptionPropTypes = void 0;
+exports.default = exports.SelectOptionPropTypes = exports.SelectOptionGroupPropTypes = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -9,16 +9,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _concat = _interopRequireDefault(require("lodash/fp/concat"));
+
 var _filter = _interopRequireDefault(require("lodash/fp/filter"));
 
 var _find = _interopRequireDefault(require("lodash/fp/find"));
 
+var _flatMapDeep = _interopRequireDefault(require("lodash/fp/flatMapDeep"));
+
 var _get = _interopRequireDefault(require("lodash/fp/get"));
 
 var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _includes = _interopRequireDefault(require("lodash/fp/includes"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
 var _keys = _interopRequireDefault(require("lodash/fp/keys"));
 
 var _map = _interopRequireDefault(require("lodash/fp/map"));
@@ -82,6 +88,7 @@ const Select = (props, legacyContext) => {
   const {
     name,
     options = [],
+    optgroups = [],
     className,
     borderClassName,
     onChange,
@@ -100,12 +107,20 @@ const Select = (props, legacyContext) => {
   const [isArrowUp, setIsArrowUp] = (0, _react.useState)(false);
   const handleSelectOnFocus = (0, _react.useCallback)(() => setIsArrowUp(true), []);
   const handleSelectOnBlur = (0, _react.useCallback)(() => setIsArrowUp(false), []);
-  const optionList = options && options.map((option, index) => {
+
+  const selectOption = (option, index) => {
     return /*#__PURE__*/_react.default.createElement("option", {
       key: index,
       value: option.value,
       className: _style.default.selectOption
     }, option.name);
+  };
+
+  const optionList = !(0, _isEmpty.default)(options) ? options.map((option, index) => selectOption(option, index)) : optgroups.map((optgroup, index) => {
+    return /*#__PURE__*/_react.default.createElement("optgroup", {
+      key: index,
+      label: optgroup.label
+    }, optgroup.options && optgroup.options.map((option, i) => selectOption(option, i)));
   });
   const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.title
@@ -114,12 +129,12 @@ const Select = (props, legacyContext) => {
     selected: true
   }, options)) : (0, _get.default)('value', (0, _find.default)({
     selected: true
-  }, options)), [multiple, options]);
+  }, (0, _concat.default)(options, (0, _flatMapDeep.default)('options', optgroups)))), [multiple, options, optgroups]);
   const selectedLabel = (0, _react.useMemo)(() => multiple ? (0, _map.default)((0, _get.default)('name'), (0, _filter.default)({
     selected: true
-  }, options)) : (0, _get.default)('name', (0, _find.default)({
+  }, options)) : (0, _get.default)('value', (0, _find.default)({
     selected: true
-  }, options)), [multiple, options]);
+  }, (0, _concat.default)(options, (0, _flatMapDeep.default)('options', optgroups)))), [multiple, options, optgroups]);
   const isSelectedInValidOption = (0, _react.useMemo)(() => theme === 'player' && (0, _getOr.default)(false, 'name', (0, _find.default)({
     validOption: false,
     selected: true
@@ -188,6 +203,11 @@ const SelectOptionPropTypes = {
   validOption: _propTypes.default.bool
 };
 exports.SelectOptionPropTypes = SelectOptionPropTypes;
+const SelectOptionGroupPropTypes = {
+  label: _propTypes.default.string.isRequired,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionPropTypes))
+};
+exports.SelectOptionGroupPropTypes = SelectOptionGroupPropTypes;
 Select.contextTypes = {
   skin: _provider.default.childContextTypes.skin
 };
@@ -203,6 +223,7 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _propTypes.default.func,
   theme: _propTypes.default.oneOf((0, _keys.default)(themeStyle)),
   options: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionPropTypes)),
+  optgroups: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionGroupPropTypes)),
   modified: _propTypes.default.bool,
   error: _propTypes.default.bool,
   'aria-label': _propTypes.default.string

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["themeStyle","filter","style","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","useMemo","color","className","Select","legacyContext","name","options","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","GetSkinFromContext","setIsArrowUp","useState","handleSelectOnFocus","useCallback","handleSelectOnBlur","optionList","map","option","index","value","selectOption","titleView","selected","get","find","selectedLabel","isSelectedInValidOption","getOr","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","includes","shouldUseSkinFontColor","undefined","behaviorClassName","getClassState","default","composedClassName","classnames","unselected","labelSize","size","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","keys","arrayOf","shape"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(ariaLabel &\n        {\n          'aria-label': ariaLabel\n        }),\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [ariaLabel, arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value} className={style.selectOption}>\n          {option.name}\n        </option>\n      );\n    });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, options)),\n    [multiple, options]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, options)),\n    [multiple, options]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["themeStyle","filter","style","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","useMemo","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","GetSkinFromContext","setIsArrowUp","useState","handleSelectOnFocus","useCallback","handleSelectOnBlur","selectOption","option","index","value","optionList","isEmpty","map","optgroup","label","i","titleView","selected","get","find","concat","flatMapDeep","selectedLabel","isSelectedInValidOption","getOr","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","includes","shouldUseSkinFontColor","undefined","behaviorClassName","getClassState","default","composedClassName","classnames","unselected","labelSize","size","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","keys"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(ariaLabel &\n        {\n          'aria-label': ariaLabel\n        }),\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [ariaLabel, arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    optgroups = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const selectOption = (option, index) => {\n    return (\n      <option key={index} value={option.value} className={style.selectOption}>\n        {option.name}\n      </option>\n    );\n  };\n\n  const optionList = !isEmpty(options)\n    ? options.map((option, index) => selectOption(option, index))\n    : optgroups.map((optgroup, index) => {\n        return (\n          <optgroup key={index} label={optgroup.label}>\n            {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n          </optgroup>\n        );\n      });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n  label: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}

package/lib/molecule/answer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAuEA,iDASC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAwEA,iDASC"}

package/lib/molecule/answer/index.js

@@ -25,6 +25,8 @@ var _template = _interopRequireDefault(require("../questions/template"));
 
 var _audio = _interopRequireDefault(require("../audio"));
 
+var _provider = require("../../atom/provider");
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 var _propTypes = _interopRequireWildcard(require("./prop-types"));
@@ -90,30 +92,42 @@ const Switch = ({
   const {
     type
   } = model;
+  const translate = (0, _provider.GetTranslateFromContext)();
 
   switch (type) {
     case 'qcmDrag':
       return /*#__PURE__*/_react.default.createElement(_qcmDrag.default, _extends({}, model, {
-        help: help
+        help: help,
+        groupAriaLabel: translate('answer_the_question')
       }));
 
     case 'qcm':
-      return /*#__PURE__*/_react.default.createElement(_qcm.default, model);
+      return /*#__PURE__*/_react.default.createElement(_qcm.default, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'qcmGraphic':
-      return /*#__PURE__*/_react.default.createElement(_qcmGraphic.default, model);
+      return /*#__PURE__*/_react.default.createElement(_qcmGraphic.default, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'freeText':
       return /*#__PURE__*/_react.default.createElement(_freeText.default, model);
 
     case 'dropDown':
-      return /*#__PURE__*/_react.default.createElement(_dropDown.default, model);
+      return /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'slider':
-      return /*#__PURE__*/_react.default.createElement(_questionRange.default, model);
+      return /*#__PURE__*/_react.default.createElement(_questionRange.default, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'template':
-      return /*#__PURE__*/_react.default.createElement(_template.default, model);
+      return /*#__PURE__*/_react.default.createElement(_template.default, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}) => {\n  const {type} = model;\n\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} />;\n    case 'qcm':\n      return <Qcm {...model} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} />;\n    case 'slider':\n      return <QuestionRange {...model} />;\n    case 'template':\n      return <Template {...model} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;EAACC;AAAD,CAAD,KAAa;EAC7B,MAAM;IAACC,OAAD;IAAUC;EAAV,IAAiCF,KAAvC;EAAA,MAAyBG,UAAzB,iCAAuCH,KAAvC;;EACA,QAAQE,IAAR;IACE,KAAKE,qBAAL;MACE,oBACE;QACE,SAAS,EAAEC,cAAA,CAAML,KADnB;QAEE,KAAK,EAAE;UACLM,eAAe,EAAG,OAAMN,KAAK,CAACO,GAAI;QAD7B;MAFT,EADF;;IAQF,KAAKC,qBAAL;MACE,oBACE;QAAK,SAAS,EAAEH,cAAA,CAAMI;MAAtB,gBACE,6BAAC,oBAAD,eAAiB,oBAAK,IAAL,EAAWN,UAAX,CAAjB;QAAyC,EAAE,EAAEF,OAA7C;QAAsD,MAAM,EAAC,MAA7D;QAAoE,KAAK,EAAC;MAA1E,GADF,CADF;;IAKF,KAAKS,qBAAL;MACE,oBACE;QAAK,SAAS,EAAEL,cAAA,CAAMM;MAAtB,gBACE,6BAAC,cAAD,eAAW,oBAAK,IAAL,EAAWR,UAAX,CAAX;QAAmC,MAAM,EAAC,MAA1C;QAAiD,KAAK,EAAC;MAAvD,GADF,CADF;;IAKF;MACE,OAAO,IAAP;EAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACa,SAAV,2CAAsBC,6BAAtB;;AAEA,MAAMC,MAAM,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAAmB;EAChC,MAAM;IAACd;EAAD,IAASa,KAAf;;EAEA,QAAQb,IAAR;IACE,KAAK,SAAL;MACE,oBAAO,6BAAC,gBAAD,eAAaa,KAAb;QAAoB,IAAI,EAAEC;MAA1B,GAAP;;IACF,KAAK,KAAL;MACE,oBAAO,6BAAC,YAAD,EAASD,KAAT,CAAP;;IACF,KAAK,YAAL;MACE,oBAAO,6BAAC,mBAAD,EAAgBA,KAAhB,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;;IACF,KAAK,QAAL;MACE,oBAAO,6BAAC,sBAAD,EAAmBA,KAAnB,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,6BAAC,iBAAD,EAAcA,KAAd,CAAP;EAdJ;AAgBD,CAnBD;;AAqBAD,MAAM,CAACF,SAAP,2CAAmB;EACjBG,KAAK,EAAEH,kBAAA,CAAUG,KADA;EAEjBC,IAAI,EAAEJ,kBAAA,CAAUI;AAFC,CAAnB;;AAKA,MAAMC,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IAACH,KAAD;IAAQf,KAAR;IAAegB;EAAf,IAAuBE,KAA7B;EAEA,oBACE;IAAK,aAAU,QAAf;IAAwB,SAAS,EAAEb,cAAA,CAAMc;EAAzC,GACGnB,KAAK,gBAAG,6BAAC,SAAD;IAAW,KAAK,EAAEA;EAAlB,EAAH,GAAiC,IADzC,eAEE,6BAAC,MAAD;IAAQ,KAAK,EAAEe,KAAf;IAAsB,IAAI,EAAEC;EAA5B,EAFF,CADF;AAMD,CATD;;AAWAC,MAAM,CAACL,SAAP,2CAAmBA,kBAAnB;eAEeK,M"}
+{"version":3,"file":"index.js","names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","translate","GetTranslateFromContext","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport {GetTranslateFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}) => {\n  const {type} = model;\n  const translate = GetTranslateFromContext();\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcm':\n      return <Qcm {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'slider':\n      return <QuestionRange {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'template':\n      return <Template {...model} groupAriaLabel={translate('answer_the_question')} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <Switch model={model} help={help} />\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nexport default Answer;\n"],"mappings":"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"}

package/lib/molecule/brand-form-group/index.d.ts

@@ -96,6 +96,15 @@ declare namespace BrandFormGroup {
                 selected: PropTypes.Requireable<boolean>;
                 validOption: PropTypes.Requireable<boolean>;
             }> | null | undefined)[]>;
+            optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                options: PropTypes.Requireable<(PropTypes.InferProps<{
+                    name: PropTypes.Validator<string>;
+                    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                    selected: PropTypes.Requireable<boolean>;
+                    validOption: PropTypes.Requireable<boolean>;
+                }> | null | undefined)[]>;
+            }> | null | undefined)[]>;
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
@@ -200,6 +209,15 @@ declare namespace BrandFormGroup {
                         selected: PropTypes.Requireable<boolean>;
                         validOption: PropTypes.Requireable<boolean>;
                     }> | null | undefined)[]>;
+                    optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                        label: PropTypes.Validator<string>;
+                        options: PropTypes.Requireable<(PropTypes.InferProps<{
+                            name: PropTypes.Validator<string>;
+                            value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                            selected: PropTypes.Requireable<boolean>;
+                            validOption: PropTypes.Requireable<boolean>;
+                        }> | null | undefined)[]>;
+                    }> | null | undefined)[]>;
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;

package/lib/molecule/filters/filters-wrapper.d.ts

@@ -7,6 +7,7 @@ declare namespace FiltersWapper {
             type: PropTypes.Validator<string>;
             fieldName: PropTypes.Validator<string>;
         }> | null | undefined)[]>;
+        const filterGroupAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/lib/molecule/filters/filters-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters-wrapper.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/filters-wrapper.js"],"names":[],"mappings":";AAUA,sEAuDC"}
+{"version":3,"file":"filters-wrapper.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/filters-wrapper.js"],"names":[],"mappings":";AAUA,sEA6DC"}

package/lib/molecule/filters/filters-wrapper.js

@@ -30,7 +30,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 const FiltersWapper = (props, context) => {
   const {
     filters,
-    className
+    className,
+    filterGroupAriaLabel
   } = props;
 
   const buildFilter = (filter, idx) => {
@@ -94,9 +95,11 @@ const FiltersWapper = (props, context) => {
   })(buildFilter, filters);
 
   const emptyFilters = (0, _isEmpty2.default)(filters);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(className, emptyFilters ? _filtersWapper.default.wrapperNone : _filtersWapper.default.wrapper)
-  }, filtersList);
+  return /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(className, emptyFilters ? _filtersWapper.default.wrapperNone : _filtersWapper.default.wrapper),
+    role: "group",
+    "aria-label": filterGroupAriaLabel
+  }, filtersList));
 };
 
 FiltersWapper.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -104,7 +107,8 @@ FiltersWapper.propTypes = process.env.NODE_ENV !== "production" ? {
   filters: _propTypes.default.arrayOf(_propTypes.default.shape({
     type: _propTypes.default.oneOf(['select', 'range', 'radio', 'switch']).isRequired,
     fieldName: _propTypes.default.string.isRequired
-  }))
+  })),
+  filterGroupAriaLabel: _propTypes.default.string
 } : {};
 var _default = FiltersWapper;
 exports.default = _default;