@coorpacademy/components 11.6.1 → 11.7.2

package/lib/atom/select/index.js

@@ -54,6 +54,30 @@ const themeStyle = {
   coorpmanager: null
 };
 
+const ArrowView = ({
+  shouldRender,
+  isArrowUp,
+  ariaLabel,
+  arrowClass,
+  arrowColor
+}) => {
+  const props = (0, _react.useMemo)(() => _extends({}, ariaLabel & {
+    'aria-label': ariaLabel
+  }, arrowColor & {
+    color: arrowColor
+  }, {
+    className: arrowClass
+  }), [ariaLabel, arrowClass, arrowColor]);
+
+  if (shouldRender) {
+    return isArrowUp ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowTop, _extends({}, props, {
+      "data-testid": "select-arrow-up-icon"
+    })) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, _extends({}, props, {
+      "data-testid": "select-arrow-down-icon"
+    }));
+  } else return null;
+};
+
 const Select = (props, legacyContext) => {
   const {
     name,
@@ -73,6 +97,9 @@ const Select = (props, legacyContext) => {
   } = props;
   const skin = (0, _provider.GetSkinFromContext)(legacyContext);
   const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
+  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) => {
     return /*#__PURE__*/_react.default.createElement("option", {
       key: index,
@@ -98,20 +125,17 @@ const Select = (props, legacyContext) => {
     selected: true
   }, options)), [options, theme]);
   const handleChange = (0, _react.useMemo)(() => multiple ? e => {
+    setIsArrowUp(false);
     onChange((0, _map.default)((0, _get.default)('value'), e.target.selectedOptions));
   } : e => {
+    setIsArrowUp(false);
     onChange(e.target.value);
   }, [onChange, multiple]);
   const black = (0, _react.useMemo)(() => (0, _getOr.default)('#14171A', 'common.black', skin), [skin]);
   const color = (0, _react.useMemo)(() => (0, _getOr.default)('#00B0FF', 'common.primary', skin), [skin]);
-  const shouldUseSkinFontColor = (0, _react.useMemo)(() => !isSelectedInValidOption && selected && (0, _includes.default)(theme, ['question', 'template', 'player']), [isSelectedInValidOption, selected, theme]);
+  const isThemeOneOfQuestionTemplateOrPlayer = (0, _react.useMemo)(() => (0, _includes.default)(theme, ['question', 'template', 'player']), [theme]);
+  const shouldUseSkinFontColor = (0, _react.useMemo)(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
   const arrowColor = selected ? color : undefined;
-  const arrowView = !multiple ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
-    color: (0, _includes.default)(theme, ['question', 'template', 'player']) ? arrowColor : black,
-    className: shouldUseSkinFontColor ? _style.default.selectedArrow : _style.default.arrow,
-    "aria-label": ariaLabel,
-    "data-testid": "select-arrow-down-icon"
-  }) : null;
   const behaviorClassName = (0, _react.useMemo)(() => (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error), [error, modified]);
   const composedClassName = (0, _react.useMemo)(() => (0, _classnames.default)(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? _style.default.selected : _style.default.unselected, className), [behaviorClassName, className, selected, theme]);
   const labelSize = (0, _react.useMemo)(() => (0, _size.default)(selectedLabel), [selectedLabel]);
@@ -130,7 +154,13 @@ const Select = (props, legacyContext) => {
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/_react.default.createElement("select", {
+  }, selectedLabel), /*#__PURE__*/_react.default.createElement(ArrowView, {
+    shouldRender: !multiple,
+    isArrowUp: isArrowUp,
+    ariaLabel: ariaLabel,
+    arrowClass: shouldUseSkinFontColor ? _style.default.selectedArrow : _style.default.arrow,
+    arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
+  }), /*#__PURE__*/_react.default.createElement("select", {
     "data-name": "native-select",
     className: _style.default.selectBox,
     title: selectedLabel,
@@ -138,7 +168,14 @@ const Select = (props, legacyContext) => {
     onChange: handleChange,
     value: selected,
     multiple: multiple,
-    disabled: disabled
+    disabled: disabled,
+    onClick: handleSelectOnFocus,
+    onBlur: handleSelectOnBlur // onBlur does not handle completely an out of bounds click
+    // ex: select is Opened and a click is done outside, cancelling the select
+    // that doesn't count as a Blur, so an onMouseLeave is needed
+    ,
+    onMouseLeave: handleSelectOnBlur,
+    "data-testid": "native-select"
   }, optionList)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.description
   }, description));

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","Select","props","legacyContext","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabel","skin","GetSkinFromContext","useMemo","optionList","map","option","index","value","selectOption","titleView","selected","get","find","selectedLabel","isSelectedInValidOption","getOr","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","includes","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviorClassName","getClassState","default","composedClassName","classnames","unselected","labelSize","size","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","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, {useMemo} 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 {NovaCompositionNavigationArrowDown as ArrowDown} 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 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 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            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\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 shouldUseSkinFontColor = useMemo(\n    () =>\n      !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n    [isSelectedInValidOption, selected, theme]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const arrowView = !multiple ? (\n    <ArrowDown\n      color={includes(theme, ['question', 'template', 'player']) ? arrowColor : black}\n      className={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n      aria-label={ariaLabel}\n      data-testid=\"select-arrow-down-icon\"\n    />\n  ) : null;\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        <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        >\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","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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"}

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":";AA4EA,iDASC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAuEA,iDASC"}

package/lib/molecule/answer/index.js

@@ -23,8 +23,6 @@ var _questionRange = _interopRequireDefault(require("../questions/question-range
 
 var _template = _interopRequireDefault(require("../questions/template"));
 
-var _provider = _interopRequireDefault(require("../../atom/provider"));
-
 var _audio = _interopRequireDefault(require("../audio"));
 
 var _style = _interopRequireDefault(require("./style.css"));
@@ -88,8 +86,6 @@ MediaView.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.MediaVi
 const Switch = ({
   model,
   help
-}, {
-  translate
 }) => {
   const {
     type
@@ -111,9 +107,7 @@ const Switch = ({
       return /*#__PURE__*/_react.default.createElement(_freeText.default, model);
 
     case 'dropDown':
-      return /*#__PURE__*/_react.default.createElement(_dropDown.default, _extends({}, model, {
-        "aria-label": translate('drop_down_icon')
-      }));
+      return /*#__PURE__*/_react.default.createElement(_dropDown.default, model);
 
     case 'slider':
       return /*#__PURE__*/_react.default.createElement(_questionRange.default, model);
@@ -127,9 +121,6 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
   model: _propTypes.default.model,
   help: _propTypes.default.help
 } : {};
-Switch.contextTypes = {
-  translate: _provider.default.childContextTypes.translate
-};
 
 const Answer = props => {
   const {

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","translate","contextTypes","Provider","childContextTypes","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 Provider from '../../atom/provider';\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}, {translate}) => {\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} aria-label={translate('drop_down_icon')} />;\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\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\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;;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,EAAgB;EAACC;AAAD,CAAhB,KAAgC;EAC7C,MAAM;IAACf;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;QAAqB,cAAYE,SAAS,CAAC,gBAAD;MAA1C,GAAP;;IACF,KAAK,QAAL;MACE,oBAAO,6BAAC,sBAAD,EAAmBF,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;AAKAF,MAAM,CAACI,YAAP,GAAsB;EACpBD,SAAS,EAAEE,iBAAA,CAASC,iBAAT,CAA2BH;AADlB,CAAtB;;AAIA,MAAMI,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IAACP,KAAD;IAAQf,KAAR;IAAegB;EAAf,IAAuBM,KAA7B;EAEA,oBACE;IAAK,aAAU,QAAf;IAAwB,SAAS,EAAEjB,cAAA,CAAMkB;EAAzC,GACGvB,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;;AAWAK,MAAM,CAACT,SAAP,2CAAmBA,kBAAnB;eAEeS,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","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"}

package/lib/molecule/empty-state-dashboard/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Props } from './types';
+declare const EmptyStateDashboard: {
+    ({ mainText, subText, imageUrl, buttonLink }: Props): JSX.Element;
+    propTypes: {
+        mainText: import("prop-types").Requireable<string>;
+        subText: import("prop-types").Requireable<string>;
+        imageUrl: import("prop-types").Requireable<any>;
+        buttonLink: import("prop-types").Requireable<import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            ariaLabel: import("prop-types").Requireable<string>;
+            dataName: import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                position: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+            }>>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        }>>;
+    };
+};
+export default EmptyStateDashboard;
+//# sourceMappingURL=index.d.ts.map

package/lib/molecule/empty-state-dashboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/empty-state-dashboard/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,KAAK,EAAY,MAAM,SAAS,CAAC;AAEzC,QAAA,MAAM,mBAAmB;kDAA+C,KAAK;;;;;;;;;;;;;;;;;CAW5E,CAAC;AAIF,eAAe,mBAAmB,CAAC"}

package/lib/molecule/empty-state-dashboard/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+var _types = require("./types");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const EmptyStateDashboard = ({
+  mainText,
+  subText,
+  imageUrl,
+  buttonLink
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.container
+}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
+  className: _style.default.img,
+  src: imageUrl,
+  "aria-hidden": "true"
+})), /*#__PURE__*/_react.default.createElement("p", {
+  className: _style.default.mainText
+}, mainText), /*#__PURE__*/_react.default.createElement("p", {
+  className: _style.default.subText
+}, subText), /*#__PURE__*/_react.default.createElement("div", {
+  className: _style.default.buttonContainer
+}, /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, buttonLink, {
+  className: _style.default.button
+}))));
+
+EmptyStateDashboard.propTypes = process.env.NODE_ENV !== "production" ? _types.propTypes : {};
+var _default = EmptyStateDashboard;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/empty-state-dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["EmptyStateDashboard","mainText","subText","imageUrl","buttonLink","style","container","img","buttonContainer","button","propTypes"],"sources":["../../../src/molecule/empty-state-dashboard/index.tsx"],"sourcesContent":["import React from 'react';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\nimport {Props, propTypes} from './types';\n\nconst EmptyStateDashboard = ({mainText, subText, imageUrl, buttonLink}: Props) => (\n  <div className={style.container}>\n    <div>\n      <img className={style.img} src={imageUrl} aria-hidden=\"true\" />\n    </div>\n    <p className={style.mainText}>{mainText}</p>\n    <p className={style.subText}>{subText}</p>\n    <div className={style.buttonContainer}>\n      <ButtonLink {...buttonLink} className={style.button} />\n    </div>\n  </div>\n);\n\nEmptyStateDashboard.propTypes = propTypes;\n\nexport default EmptyStateDashboard;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,mBAAmB,GAAG,CAAC;EAACC,QAAD;EAAWC,OAAX;EAAoBC,QAApB;EAA8BC;AAA9B,CAAD,kBAC1B;EAAK,SAAS,EAAEC,cAAA,CAAMC;AAAtB,gBACE,uDACE;EAAK,SAAS,EAAED,cAAA,CAAME,GAAtB;EAA2B,GAAG,EAAEJ,QAAhC;EAA0C,eAAY;AAAtD,EADF,CADF,eAIE;EAAG,SAAS,EAAEE,cAAA,CAAMJ;AAApB,GAA+BA,QAA/B,CAJF,eAKE;EAAG,SAAS,EAAEI,cAAA,CAAMH;AAApB,GAA8BA,OAA9B,CALF,eAME;EAAK,SAAS,EAAEG,cAAA,CAAMG;AAAtB,gBACE,6BAAC,mBAAD,eAAgBJ,UAAhB;EAA4B,SAAS,EAAEC,cAAA,CAAMI;AAA7C,GADF,CANF,CADF;;AAaAT,mBAAmB,CAACU,SAApB,2CAAgCA,gBAAhC;eAEeV,mB"}

package/lib/molecule/empty-state-dashboard/style.css

@@ -0,0 +1,55 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_500: from colors;
+@value cm_grey_800: from colors;
+
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    width: 100%;
+}
+
+.img {
+    height: 170px;
+    width: 220px;
+}
+
+.text {
+    font-family: 'Gilroy';
+    margin: 0 auto 0 auto;
+}
+
+.mainText {
+    composes: text;
+    color: cm_grey_800;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    padding-top: 36px;
+}
+
+.subText {
+    composes: text;
+    color: cm_grey_500;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    padding-top: 4px;
+    ;
+}
+
+.buttonContainer {
+    display: flex;
+    justify-content: center;
+    padding-top: 32px;
+    width: 100%;
+}
+
+.button {
+    width: 152px;
+    height: 44px;
+}

package/lib/molecule/empty-state-dashboard/types.d.ts

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+export declare const propTypes: {
+    mainText: PropTypes.Requireable<string>;
+    subText: PropTypes.Requireable<string>;
+    imageUrl: PropTypes.Requireable<any>;
+    buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        label: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        dataName: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<PropTypes.InferProps<{
+            position: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+        }>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }>>;
+};
+export declare type Props = PropTypes.InferProps<typeof propTypes>;
+//# sourceMappingURL=types.d.ts.map

package/lib/molecule/empty-state-dashboard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/empty-state-dashboard/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAerB,CAAC;AAEF,oBAAY,KAAK,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC"}

package/lib/molecule/empty-state-dashboard/types.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _picture = _interopRequireDefault(require("../../atom/picture"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const propTypes = {
+  mainText: _propTypes.default.string,
+  subText: _propTypes.default.string,
+  imageUrl: _picture.default.propTypes.src,
+  buttonLink: _propTypes.default.shape({
+    type: _propTypes.default.string,
+    label: _propTypes.default.string,
+    ariaLabel: _propTypes.default.string,
+    dataName: _propTypes.default.string,
+    icon: _propTypes.default.shape({
+      position: _propTypes.default.string,
+      type: _propTypes.default.string
+    }),
+    onClick: _propTypes.default.func
+  })
+};
+exports.propTypes = propTypes;
+//# sourceMappingURL=types.js.map

package/lib/molecule/empty-state-dashboard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["propTypes","mainText","PropTypes","string","subText","imageUrl","Picture","src","buttonLink","shape","type","label","ariaLabel","dataName","icon","position","onClick","func"],"sources":["../../../src/molecule/empty-state-dashboard/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport Picture from '../../atom/picture';\n\nexport const propTypes = {\n  mainText: PropTypes.string,\n  subText: PropTypes.string,\n  imageUrl: Picture.propTypes.src,\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  })\n};\n\nexport type Props = PropTypes.InferProps<typeof propTypes>;\n"],"mappings":";;;;;AAAA;;AACA;;;;AAEO,MAAMA,SAAS,GAAG;EACvBC,QAAQ,EAAEC,kBAAA,CAAUC,MADG;EAEvBC,OAAO,EAAEF,kBAAA,CAAUC,MAFI;EAGvBE,QAAQ,EAAEC,gBAAA,CAAQN,SAAR,CAAkBO,GAHL;EAIvBC,UAAU,EAAEN,kBAAA,CAAUO,KAAV,CAAgB;IAC1BC,IAAI,EAAER,kBAAA,CAAUC,MADU;IAE1BQ,KAAK,EAAET,kBAAA,CAAUC,MAFS;IAG1BS,SAAS,EAAEV,kBAAA,CAAUC,MAHK;IAI1BU,QAAQ,EAAEX,kBAAA,CAAUC,MAJM;IAK1BW,IAAI,EAAEZ,kBAAA,CAAUO,KAAV,CAAgB;MACpBM,QAAQ,EAAEb,kBAAA,CAAUC,MADA;MAEpBO,IAAI,EAAER,kBAAA,CAAUC;IAFI,CAAhB,CALoB;IAS1Ba,OAAO,EAAEd,kBAAA,CAAUe;EATO,CAAhB;AAJW,CAAlB"}

package/lib/organism/list-item/index.d.ts

@@ -1,8 +1,8 @@
 export default ListItem;
 declare function ListItem(props: any): JSX.Element;
 declare namespace ListItem {
-    namespace propTypes {
-        const bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
+    const propTypes: {
+        bulletPointMenuButton: PropTypes.Requireable<PropTypes.InferProps<{
             buttonAriaLabel: PropTypes.Requireable<string>;
             menuAriaLabel: PropTypes.Requireable<string>;
             buttons: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -13,7 +13,7 @@ declare namespace ListItem {
             }> | null | undefined)[]>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        const buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
+        buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             label: PropTypes.Requireable<string>;
             ariaLabel: PropTypes.Requireable<string>;
@@ -24,12 +24,14 @@ declare namespace ListItem {
             }>>;
             onClick: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        const tags: PropTypes.Requireable<(PropTypes.InferProps<{
+        tags: PropTypes.Requireable<(PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
-        const title: PropTypes.Validator<string>;
-    }
+        title: PropTypes.Validator<string>;
+        order: PropTypes.Requireable<number>;
+        'aria-label': PropTypes.Requireable<string>;
+    };
 }
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/lib/organism/list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDAuBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-item/index.js"],"names":[],"mappings":";AAQA,mDAqCC"}

package/lib/organism/list-item/index.js

@@ -20,16 +20,20 @@ var _style = _interopRequireDefault(require("./style.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const ListItem = props => {
+  let isPublished = false;
   const {
     bulletPointMenuButton,
     buttonLink,
     tags,
-    title
+    title,
+    order,
+    'aria-label': ariaLabel
   } = props;
 
   const tagsView = _map2.default.convert({
     cap: false
   })((tag, index) => {
+    isPublished = tag.type === 'published';
     return /*#__PURE__*/_react.default.createElement("div", {
       key: index,
       className: _style.default.tag
@@ -38,7 +42,15 @@ const ListItem = props => {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.wrapper
+  }, isPublished ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.orderWrapper
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.order,
+    "aria-label": ariaLabel
+  }, order + 1), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.title,
+    title: title
+  }, title)) : /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.title,
     title: title
   }, title), /*#__PURE__*/_react.default.createElement("div", {
@@ -75,7 +87,9 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     label: _propTypes.default.string,
     type: _propTypes.default.oneOf(['published', 'draft', 'archived', 'revised', 'default'])
   })),
-  title: _propTypes.default.string.isRequired
+  title: _propTypes.default.string.isRequired,
+  order: _propTypes.default.number,
+  'aria-label': _propTypes.default.string
 } : {};
 var _default = ListItem;
 exports.default = _default;

package/lib/organism/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ListItem","props","bulletPointMenuButton","buttonLink","tags","title","tagsView","convert","cap","tag","index","style","wrapper","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","type","onClick","func","ariaLabel","dataName","icon","position","oneOf","isRequired"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n  const {bulletPointMenuButton, buttonLink, tags, title} = props;\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n  return (\n    <div className={style.wrapper}>\n      <div className={style.title} title={title}>\n        {title}\n      </div>\n      <div className={style.settings}>\n        {tagsView}\n        <div className={style.edit}>\n          <ButtonLink {...buttonLink} />\n        </div>\n        <BulletPointMenuButton {...bulletPointMenuButton} />\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n    })\n  ),\n  title: PropTypes.string.isRequired\n};\n\nexport default ListItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,qBAAD;IAAwBC,UAAxB;IAAoCC,IAApC;IAA0CC;EAA1C,IAAmDJ,KAAzD;;EACA,MAAMK,QAAQ,GAAG,cAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;IACzD,oBACE;MAAK,GAAG,EAAEA,KAAV;MAAiB,SAAS,EAAEC,cAAA,CAAMF;IAAlC,gBACE,6BAAC,YAAD,EAASA,GAAT,CADF,CADF;EAKD,CANgB,EAMdL,IANc,CAAjB;;EAOA,oBACE;IAAK,SAAS,EAAEO,cAAA,CAAMC;EAAtB,gBACE;IAAK,SAAS,EAAED,cAAA,CAAMN,KAAtB;IAA6B,KAAK,EAAEA;EAApC,GACGA,KADH,CADF,eAIE;IAAK,SAAS,EAAEM,cAAA,CAAME;EAAtB,GACGP,QADH,eAEE;IAAK,SAAS,EAAEK,cAAA,CAAMG;EAAtB,gBACE,6BAAC,mBAAD,EAAgBX,UAAhB,CADF,CAFF,eAKE,6BAAC,8BAAD,EAA2BD,qBAA3B,CALF,CAJF,CADF;AAcD,CAvBD;;AAyBAF,QAAQ,CAACe,SAAT,2CAAqB;EACnBb,qBAAqB,EAAEc,kBAAA,CAAUC,KAAV,CAAgB;IACrCC,eAAe,EAAEF,kBAAA,CAAUG,MADU;IAErCC,aAAa,EAAEJ,kBAAA,CAAUG,MAFY;IAGrCE,OAAO,EAAEL,kBAAA,CAAUM,OAAV,CACPN,kBAAA,CAAUC,KAAV,CAAgB;MACd,aAAaD,kBAAA,CAAUG,MADT;MAEdI,KAAK,EAAEP,kBAAA,CAAUG,MAFH;MAGdK,IAAI,EAAER,kBAAA,CAAUG,MAHF;MAIdM,OAAO,EAAET,kBAAA,CAAUU;IAJL,CAAhB,CADO,CAH4B;IAWrCD,OAAO,EAAET,kBAAA,CAAUU;EAXkB,CAAhB,CADJ;EAcnBvB,UAAU,EAAEa,kBAAA,CAAUC,KAAV,CAAgB;IAC1BO,IAAI,EAAER,kBAAA,CAAUG,MADU;IAE1BI,KAAK,EAAEP,kBAAA,CAAUG,MAFS;IAG1BQ,SAAS,EAAEX,kBAAA,CAAUG,MAHK;IAI1BS,QAAQ,EAAEZ,kBAAA,CAAUG,MAJM;IAK1BU,IAAI,EAAEb,kBAAA,CAAUC,KAAV,CAAgB;MACpBa,QAAQ,EAAEd,kBAAA,CAAUG,MADA;MAEpBK,IAAI,EAAER,kBAAA,CAAUG;IAFI,CAAhB,CALoB;IAS1BM,OAAO,EAAET,kBAAA,CAAUU;EATO,CAAhB,CAdO;EAyBnBtB,IAAI,EAAEY,kBAAA,CAAUM,OAAV,CACJN,kBAAA,CAAUC,KAAV,CAAgB;IACdM,KAAK,EAAEP,kBAAA,CAAUG,MADH;IAEdK,IAAI,EAAER,kBAAA,CAAUe,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;EAFQ,CAAhB,CADI,CAzBa;EA+BnB1B,KAAK,EAAEW,kBAAA,CAAUG,MAAV,CAAiBa;AA/BL,CAArB;eAkCehC,Q"}
+{"version":3,"file":"index.js","names":["ListItem","props","isPublished","bulletPointMenuButton","buttonLink","tags","title","order","ariaLabel","tagsView","convert","cap","tag","index","type","style","wrapper","orderWrapper","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","onClick","func","dataName","icon","position","oneOf","isRequired","number"],"sources":["../../../src/organism/list-item/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n  let isPublished = false;\n  const {bulletPointMenuButton, buttonLink, tags, title, order, 'aria-label': ariaLabel} = props;\n\n  const tagsView = map.convert({cap: false})((tag, index) => {\n    isPublished = tag.type === 'published';\n    return (\n      <div key={index} className={style.tag}>\n        <Tag {...tag} />\n      </div>\n    );\n  })(tags);\n  return (\n    <div className={style.wrapper}>\n      {isPublished ? (\n        <div className={style.orderWrapper}>\n          <div className={style.order} aria-label={ariaLabel}>\n            {order + 1}\n          </div>\n          <div className={style.title} title={title}>\n            {title}\n          </div>\n        </div>\n      ) : (\n        <div className={style.title} title={title}>\n          {title}\n        </div>\n      )}\n      <div className={style.settings}>\n        {tagsView}\n        <div className={style.edit}>\n          <ButtonLink {...buttonLink} />\n        </div>\n        <BulletPointMenuButton {...bulletPointMenuButton} />\n      </div>\n    </div>\n  );\n};\n\nListItem.propTypes = {\n  bulletPointMenuButton: PropTypes.shape({\n    buttonAriaLabel: PropTypes.string,\n    menuAriaLabel: PropTypes.string,\n    buttons: PropTypes.arrayOf(\n      PropTypes.shape({\n        'data-name': PropTypes.string,\n        label: PropTypes.string,\n        type: PropTypes.string,\n        onClick: PropTypes.func\n      })\n    ),\n    onClick: PropTypes.func\n  }),\n  buttonLink: PropTypes.shape({\n    type: PropTypes.string,\n    label: PropTypes.string,\n    ariaLabel: PropTypes.string,\n    dataName: PropTypes.string,\n    icon: PropTypes.shape({\n      position: PropTypes.string,\n      type: PropTypes.string\n    }),\n    onClick: PropTypes.func\n  }),\n  tags: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n    })\n  ),\n  title: PropTypes.string.isRequired,\n  order: PropTypes.number,\n  'aria-label': PropTypes.string\n};\n\nexport default ListItem;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;EACxB,IAAIC,WAAW,GAAG,KAAlB;EACA,MAAM;IAACC,qBAAD;IAAwBC,UAAxB;IAAoCC,IAApC;IAA0CC,KAA1C;IAAiDC,KAAjD;IAAwD,cAAcC;EAAtE,IAAmFP,KAAzF;;EAEA,MAAMQ,QAAQ,GAAG,cAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;IACzDX,WAAW,GAAGU,GAAG,CAACE,IAAJ,KAAa,WAA3B;IACA,oBACE;MAAK,GAAG,EAAED,KAAV;MAAiB,SAAS,EAAEE,cAAA,CAAMH;IAAlC,gBACE,6BAAC,YAAD,EAASA,GAAT,CADF,CADF;EAKD,CAPgB,EAOdP,IAPc,CAAjB;;EAQA,oBACE;IAAK,SAAS,EAAEU,cAAA,CAAMC;EAAtB,GACGd,WAAW,gBACV;IAAK,SAAS,EAAEa,cAAA,CAAME;EAAtB,gBACE;IAAK,SAAS,EAAEF,cAAA,CAAMR,KAAtB;IAA6B,cAAYC;EAAzC,GACGD,KAAK,GAAG,CADX,CADF,eAIE;IAAK,SAAS,EAAEQ,cAAA,CAAMT,KAAtB;IAA6B,KAAK,EAAEA;EAApC,GACGA,KADH,CAJF,CADU,gBAUV;IAAK,SAAS,EAAES,cAAA,CAAMT,KAAtB;IAA6B,KAAK,EAAEA;EAApC,GACGA,KADH,CAXJ,eAeE;IAAK,SAAS,EAAES,cAAA,CAAMG;EAAtB,GACGT,QADH,eAEE;IAAK,SAAS,EAAEM,cAAA,CAAMI;EAAtB,gBACE,6BAAC,mBAAD,EAAgBf,UAAhB,CADF,CAFF,eAKE,6BAAC,8BAAD,EAA2BD,qBAA3B,CALF,CAfF,CADF;AAyBD,CArCD;;AAuCAH,QAAQ,CAACoB,SAAT,2CAAqB;EACnBjB,qBAAqB,EAAEkB,kBAAA,CAAUC,KAAV,CAAgB;IACrCC,eAAe,EAAEF,kBAAA,CAAUG,MADU;IAErCC,aAAa,EAAEJ,kBAAA,CAAUG,MAFY;IAGrCE,OAAO,EAAEL,kBAAA,CAAUM,OAAV,CACPN,kBAAA,CAAUC,KAAV,CAAgB;MACd,aAAaD,kBAAA,CAAUG,MADT;MAEdI,KAAK,EAAEP,kBAAA,CAAUG,MAFH;MAGdV,IAAI,EAAEO,kBAAA,CAAUG,MAHF;MAIdK,OAAO,EAAER,kBAAA,CAAUS;IAJL,CAAhB,CADO,CAH4B;IAWrCD,OAAO,EAAER,kBAAA,CAAUS;EAXkB,CAAhB,CADJ;EAcnB1B,UAAU,EAAEiB,kBAAA,CAAUC,KAAV,CAAgB;IAC1BR,IAAI,EAAEO,kBAAA,CAAUG,MADU;IAE1BI,KAAK,EAAEP,kBAAA,CAAUG,MAFS;IAG1BhB,SAAS,EAAEa,kBAAA,CAAUG,MAHK;IAI1BO,QAAQ,EAAEV,kBAAA,CAAUG,MAJM;IAK1BQ,IAAI,EAAEX,kBAAA,CAAUC,KAAV,CAAgB;MACpBW,QAAQ,EAAEZ,kBAAA,CAAUG,MADA;MAEpBV,IAAI,EAAEO,kBAAA,CAAUG;IAFI,CAAhB,CALoB;IAS1BK,OAAO,EAAER,kBAAA,CAAUS;EATO,CAAhB,CAdO;EAyBnBzB,IAAI,EAAEgB,kBAAA,CAAUM,OAAV,CACJN,kBAAA,CAAUC,KAAV,CAAgB;IACdM,KAAK,EAAEP,kBAAA,CAAUG,MADH;IAEdV,IAAI,EAAEO,kBAAA,CAAUa,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;EAFQ,CAAhB,CADI,CAzBa;EA+BnB5B,KAAK,EAAEe,kBAAA,CAAUG,MAAV,CAAiBW,UA/BL;EAgCnB5B,KAAK,EAAEc,kBAAA,CAAUe,MAhCE;EAiCnB,cAAcf,kBAAA,CAAUG;AAjCL,CAArB;eAoCexB,Q"}

package/lib/organism/list-item/style.css

@@ -4,6 +4,7 @@
 @value xtraLightGrey from colors;
 @value cm_grey_900 from colors;
 @value primaryAdd1 from colors;
+@value cm_grey_400 from colors;
 
 .wrapper {
   align-items: center;
@@ -51,3 +52,20 @@
   margin: 0 16px 0 0;
   min-width: 93px;
 }
+
+.order {
+  width: 6px;
+  height: 20px;
+  font-family: 'Gilroy';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 20px;
+  color: cm_grey_400;
+  margin: 0 16px 0 0;
+}
+.orderWrapper {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}

package/lib/organism/list-items/index.d.ts

@@ -56,6 +56,8 @@ declare namespace ListItems {
                 type: PropTypes.Requireable<string>;
             }> | null | undefined)[]>;
             title: PropTypes.Validator<string>;
+            order: PropTypes.Requireable<number>;
+            'aria-label': PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
         title: PropTypes.Requireable<string>;
     };

package/lib/organism/list-items/index.js

@@ -17,6 +17,8 @@ var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const ListItems = ({
   title,
   buttonLink,
@@ -27,7 +29,9 @@ const ListItems = ({
     key: item.id,
     className: _style.default.item,
     "data-name": `content-${index}`
-  }, /*#__PURE__*/_react.default.createElement(_listItem.default, item)));
+  }, /*#__PURE__*/_react.default.createElement(_listItem.default, _extends({}, item, {
+    order: index
+  }))));
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.header
   }, /*#__PURE__*/_react.default.createElement("div", {