@coorpacademy/components 11.6.1 → 11.7.2

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

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

package/es/atom/select/index.js

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import filter from 'lodash/fp/filter';
@@ -11,7 +11,7 @@ import includes from 'lodash/fp/includes';
 import keys from 'lodash/fp/keys';
 import map from 'lodash/fp/map';
 import size from 'lodash/fp/size';
-import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
+import { NovaCompositionNavigationArrowDown as ArrowDown, NovaCompositionNavigationArrowTop as ArrowUp } from '@coorpacademy/nova-icons';
 import Provider, { GetSkinFromContext } from '../provider';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
@@ -28,6 +28,30 @@ const themeStyle = {
   coorpmanager: null
 };
 
+const ArrowView = ({
+  shouldRender,
+  isArrowUp,
+  ariaLabel,
+  arrowClass,
+  arrowColor
+}) => {
+  const props = useMemo(() => _extends({}, ariaLabel & {
+    'aria-label': ariaLabel
+  }, arrowColor & {
+    color: arrowColor
+  }, {
+    className: arrowClass
+  }), [ariaLabel, arrowClass, arrowColor]);
+
+  if (shouldRender) {
+    return isArrowUp ? /*#__PURE__*/React.createElement(ArrowUp, _extends({}, props, {
+      "data-testid": "select-arrow-up-icon"
+    })) : /*#__PURE__*/React.createElement(ArrowDown, _extends({}, props, {
+      "data-testid": "select-arrow-down-icon"
+    }));
+  } else return null;
+};
+
 const Select = (props, legacyContext) => {
   const {
     name,
@@ -47,6 +71,9 @@ const Select = (props, legacyContext) => {
   } = props;
   const skin = GetSkinFromContext(legacyContext);
   const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
+  const [isArrowUp, setIsArrowUp] = useState(false);
+  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);
+  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/React.createElement("option", {
       key: index,
@@ -72,20 +99,17 @@ const Select = (props, legacyContext) => {
     selected: true
   }, options)), [options, theme]);
   const handleChange = useMemo(() => multiple ? e => {
+    setIsArrowUp(false);
     onChange(map(get('value'), e.target.selectedOptions));
   } : e => {
+    setIsArrowUp(false);
     onChange(e.target.value);
   }, [onChange, multiple]);
   const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);
   const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
-  const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']), [isSelectedInValidOption, selected, theme]);
+  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(() => includes(theme, ['question', 'template', 'player']), [theme]);
+  const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
   const arrowColor = selected ? color : undefined;
-  const arrowView = !multiple ? /*#__PURE__*/React.createElement(ArrowDown, {
-    color: includes(theme, ['question', 'template', 'player']) ? arrowColor : black,
-    className: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
-    "aria-label": ariaLabel,
-    "data-testid": "select-arrow-down-icon"
-  }) : null;
   const behaviorClassName = useMemo(() => getClassState(style.default, style.modified, style.error, modified, error), [error, modified]);
   const composedClassName = useMemo(() => classnames(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? style.selected : style.unselected, className), [behaviorClassName, className, selected, theme]);
   const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);
@@ -104,7 +128,13 @@ const Select = (props, legacyContext) => {
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/React.createElement("select", {
+  }, selectedLabel), /*#__PURE__*/React.createElement(ArrowView, {
+    shouldRender: !multiple,
+    isArrowUp: isArrowUp,
+    ariaLabel: ariaLabel,
+    arrowClass: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
+    arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
+  }), /*#__PURE__*/React.createElement("select", {
     "data-name": "native-select",
     className: style.selectBox,
     title: selectedLabel,
@@ -112,7 +142,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.createElement("div", {
     className: style.description
   }, description));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","filter","find","get","getOr","includes","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","Provider","GetSkinFromContext","getClassState","style","themeStyle","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","optionList","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","contextTypes","childContextTypes","propTypes","func","oneOf","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":["React","useCallback","useMemo","useState","PropTypes","classnames","filter","find","get","getOr","includes","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","Select","legacyContext","name","options","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","optionList","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","contextTypes","childContextTypes","propTypes","func","oneOf","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/es/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/es/molecule/answer/index.js

@@ -14,7 +14,6 @@ import Qcm from '../questions/qcm';
 import QcmGraphic from '../questions/qcm-graphic';
 import QuestionRange from '../questions/question-range';
 import Template from '../questions/template';
-import Provider from '../../atom/provider';
 import Audio from '../audio';
 import style from './style.css';
 import propTypes, { MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO } from './prop-types';
@@ -64,8 +63,6 @@ MediaView.propTypes = process.env.NODE_ENV !== "production" ? MediaViewPropTypes
 const Switch = ({
   model,
   help
-}, {
-  translate
 }) => {
   const {
     type
@@ -87,9 +84,7 @@ const Switch = ({
       return /*#__PURE__*/React.createElement(FreeText, model);
 
     case 'dropDown':
-      return /*#__PURE__*/React.createElement(DropDown, _extends({}, model, {
-        "aria-label": translate('drop_down_icon')
-      }));
+      return /*#__PURE__*/React.createElement(DropDown, model);
 
     case 'slider':
       return /*#__PURE__*/React.createElement(QuestionRange, model);
@@ -103,9 +98,6 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
   model: propTypes.model,
   help: propTypes.help
 } : {};
-Switch.contextTypes = {
-  translate: Provider.childContextTypes.translate
-};
 
 const Answer = props => {
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","VideoPlayer","DropDown","FreeText","QcmDrag","Qcm","QcmGraphic","QuestionRange","Template","Provider","Audio","style","propTypes","MediaViewPropTypes","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","MediaView","media","videoId","type","childProps","backgroundImage","url","video","audio","Switch","model","help","translate","contextTypes","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":"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"}
+{"version":3,"file":"index.js","names":["React","VideoPlayer","DropDown","FreeText","QcmDrag","Qcm","QcmGraphic","QuestionRange","Template","Audio","style","propTypes","MediaViewPropTypes","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","MediaView","media","videoId","type","childProps","backgroundImage","url","video","audio","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":"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"}

package/es/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/es/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/es/molecule/empty-state-dashboard/index.js

@@ -0,0 +1,31 @@
+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); }
+
+import React from 'react';
+import ButtonLink from '../../atom/button-link';
+import style from './style.css';
+import { propTypes } from './types';
+
+const EmptyStateDashboard = ({
+  mainText,
+  subText,
+  imageUrl,
+  buttonLink
+}) => /*#__PURE__*/React.createElement("div", {
+  className: style.container
+}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+  className: style.img,
+  src: imageUrl,
+  "aria-hidden": "true"
+})), /*#__PURE__*/React.createElement("p", {
+  className: style.mainText
+}, mainText), /*#__PURE__*/React.createElement("p", {
+  className: style.subText
+}, subText), /*#__PURE__*/React.createElement("div", {
+  className: style.buttonContainer
+}, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonLink, {
+  className: style.button
+}))));
+
+EmptyStateDashboard.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default EmptyStateDashboard;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ButtonLink","style","propTypes","EmptyStateDashboard","mainText","subText","imageUrl","buttonLink","container","img","buttonContainer","button"],"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,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,SAAeC,SAAf,QAA+B,SAA/B;;AAEA,MAAMC,mBAAmB,GAAG,CAAC;EAACC,QAAD;EAAWC,OAAX;EAAoBC,QAApB;EAA8BC;AAA9B,CAAD,kBAC1B;EAAK,SAAS,EAAEN,KAAK,CAACO;AAAtB,gBACE,8CACE;EAAK,SAAS,EAAEP,KAAK,CAACQ,GAAtB;EAA2B,GAAG,EAAEH,QAAhC;EAA0C,eAAY;AAAtD,EADF,CADF,eAIE;EAAG,SAAS,EAAEL,KAAK,CAACG;AAApB,GAA+BA,QAA/B,CAJF,eAKE;EAAG,SAAS,EAAEH,KAAK,CAACI;AAApB,GAA8BA,OAA9B,CALF,eAME;EAAK,SAAS,EAAEJ,KAAK,CAACS;AAAtB,gBACE,oBAAC,UAAD,eAAgBH,UAAhB;EAA4B,SAAS,EAAEN,KAAK,CAACU;AAA7C,GADF,CANF,CADF;;AAaAR,mBAAmB,CAACD,SAApB,2CAAgCA,SAAhC;AAEA,eAAeC,mBAAf"}

package/es/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/es/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/es/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/es/molecule/empty-state-dashboard/types.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import Picture from '../../atom/picture';
+export const propTypes = {
+  mainText: PropTypes.string,
+  subText: PropTypes.string,
+  imageUrl: Picture.propTypes.src,
+  buttonLink: PropTypes.shape({
+    type: PropTypes.string,
+    label: PropTypes.string,
+    ariaLabel: PropTypes.string,
+    dataName: PropTypes.string,
+    icon: PropTypes.shape({
+      position: PropTypes.string,
+      type: PropTypes.string
+    }),
+    onClick: PropTypes.func
+  })
+};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["PropTypes","Picture","propTypes","mainText","string","subText","imageUrl","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,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,QAAQ,EAAEH,SAAS,CAACI,MADG;EAEvBC,OAAO,EAAEL,SAAS,CAACI,MAFI;EAGvBE,QAAQ,EAAEL,OAAO,CAACC,SAAR,CAAkBK,GAHL;EAIvBC,UAAU,EAAER,SAAS,CAACS,KAAV,CAAgB;IAC1BC,IAAI,EAAEV,SAAS,CAACI,MADU;IAE1BO,KAAK,EAAEX,SAAS,CAACI,MAFS;IAG1BQ,SAAS,EAAEZ,SAAS,CAACI,MAHK;IAI1BS,QAAQ,EAAEb,SAAS,CAACI,MAJM;IAK1BU,IAAI,EAAEd,SAAS,CAACS,KAAV,CAAgB;MACpBM,QAAQ,EAAEf,SAAS,CAACI,MADA;MAEpBM,IAAI,EAAEV,SAAS,CAACI;IAFI,CAAhB,CALoB;IAS1BY,OAAO,EAAEhB,SAAS,CAACiB;EATO,CAAhB;AAJW,CAAlB"}

package/es/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/es/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/es/organism/list-item/index.js

@@ -7,16 +7,20 @@ import BulletPointMenuButton from '../../molecule/bullet-point-menu-button';
 import style from './style.css';
 
 const ListItem = props => {
+  let isPublished = false;
   const {
     bulletPointMenuButton,
     buttonLink,
     tags,
-    title
+    title,
+    order,
+    'aria-label': ariaLabel
   } = props;
 
   const tagsView = _map.convert({
     cap: false
   })((tag, index) => {
+    isPublished = tag.type === 'published';
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: style.tag
@@ -25,7 +29,15 @@ const ListItem = props => {
 
   return /*#__PURE__*/React.createElement("div", {
     className: style.wrapper
+  }, isPublished ? /*#__PURE__*/React.createElement("div", {
+    className: style.orderWrapper
   }, /*#__PURE__*/React.createElement("div", {
+    className: style.order,
+    "aria-label": ariaLabel
+  }, order + 1), /*#__PURE__*/React.createElement("div", {
+    className: style.title,
+    title: title
+  }, title)) : /*#__PURE__*/React.createElement("div", {
     className: style.title,
     title: title
   }, title), /*#__PURE__*/React.createElement("div", {
@@ -62,7 +74,9 @@ ListItem.propTypes = process.env.NODE_ENV !== "production" ? {
     label: PropTypes.string,
     type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])
   })),
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  order: PropTypes.number,
+  'aria-label': PropTypes.string
 } : {};
 export default ListItem;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","props","bulletPointMenuButton","buttonLink","tags","title","tagsView","convert","cap","tag","index","wrapper","settings","edit","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,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,qBAAP,MAAkC,yCAAlC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;EACxB,MAAM;IAACC,qBAAD;IAAwBC,UAAxB;IAAoCC,IAApC;IAA0CC;EAA1C,IAAmDJ,KAAzD;;EACA,MAAMK,QAAQ,GAAG,KAAIC,OAAJ,CAAY;IAACC,GAAG,EAAE;EAAN,CAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;IACzD,oBACE;MAAK,GAAG,EAAEA,KAAV;MAAiB,SAAS,EAAEX,KAAK,CAACU;IAAlC,gBACE,oBAAC,GAAD,EAASA,GAAT,CADF,CADF;EAKD,CANgB,EAMdL,IANc,CAAjB;;EAOA,oBACE;IAAK,SAAS,EAAEL,KAAK,CAACY;EAAtB,gBACE;IAAK,SAAS,EAAEZ,KAAK,CAACM,KAAtB;IAA6B,KAAK,EAAEA;EAApC,GACGA,KADH,CADF,eAIE;IAAK,SAAS,EAAEN,KAAK,CAACa;EAAtB,GACGN,QADH,eAEE;IAAK,SAAS,EAAEP,KAAK,CAACc;EAAtB,gBACE,oBAAC,UAAD,EAAgBV,UAAhB,CADF,CAFF,eAKE,oBAAC,qBAAD,EAA2BD,qBAA3B,CALF,CAJF,CADF;AAcD,CAvBD;;AAyBAF,QAAQ,CAACc,SAAT,2CAAqB;EACnBZ,qBAAqB,EAAEP,SAAS,CAACoB,KAAV,CAAgB;IACrCC,eAAe,EAAErB,SAAS,CAACsB,MADU;IAErCC,aAAa,EAAEvB,SAAS,CAACsB,MAFY;IAGrCE,OAAO,EAAExB,SAAS,CAACyB,OAAV,CACPzB,SAAS,CAACoB,KAAV,CAAgB;MACd,aAAapB,SAAS,CAACsB,MADT;MAEdI,KAAK,EAAE1B,SAAS,CAACsB,MAFH;MAGdK,IAAI,EAAE3B,SAAS,CAACsB,MAHF;MAIdM,OAAO,EAAE5B,SAAS,CAAC6B;IAJL,CAAhB,CADO,CAH4B;IAWrCD,OAAO,EAAE5B,SAAS,CAAC6B;EAXkB,CAAhB,CADJ;EAcnBrB,UAAU,EAAER,SAAS,CAACoB,KAAV,CAAgB;IAC1BO,IAAI,EAAE3B,SAAS,CAACsB,MADU;IAE1BI,KAAK,EAAE1B,SAAS,CAACsB,MAFS;IAG1BQ,SAAS,EAAE9B,SAAS,CAACsB,MAHK;IAI1BS,QAAQ,EAAE/B,SAAS,CAACsB,MAJM;IAK1BU,IAAI,EAAEhC,SAAS,CAACoB,KAAV,CAAgB;MACpBa,QAAQ,EAAEjC,SAAS,CAACsB,MADA;MAEpBK,IAAI,EAAE3B,SAAS,CAACsB;IAFI,CAAhB,CALoB;IAS1BM,OAAO,EAAE5B,SAAS,CAAC6B;EATO,CAAhB,CAdO;EAyBnBpB,IAAI,EAAET,SAAS,CAACyB,OAAV,CACJzB,SAAS,CAACoB,KAAV,CAAgB;IACdM,KAAK,EAAE1B,SAAS,CAACsB,MADH;IAEdK,IAAI,EAAE3B,SAAS,CAACkC,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;EAFQ,CAAhB,CADI,CAzBa;EA+BnBxB,KAAK,EAAEV,SAAS,CAACsB,MAAV,CAAiBa;AA/BL,CAArB;AAkCA,eAAe9B,QAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","props","isPublished","bulletPointMenuButton","buttonLink","tags","title","order","ariaLabel","tagsView","convert","cap","tag","index","type","wrapper","orderWrapper","settings","edit","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":"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"}

package/es/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/es/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/es/organism/list-items/index.js

@@ -1,3 +1,5 @@
+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); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import ListItem from '../list-item';
@@ -15,7 +17,9 @@ const ListItems = ({
     key: item.id,
     className: style.item,
     "data-name": `content-${index}`
-  }, /*#__PURE__*/React.createElement(ListItem, item)));
+  }, /*#__PURE__*/React.createElement(ListItem, _extends({}, item, {
+    order: index
+  }))));
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: style.header
   }, /*#__PURE__*/React.createElement("div", {