@coorpacademy/components 11.14.2 → 11.14.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -31,8 +31,9 @@
31
31
  }
32
32
 
33
33
  .courseWrapper {
34
- display: inline-block;
34
+ display: flex;
35
35
  vertical-align: top;
36
+ flex-direction: column;
36
37
  padding-left: 30px;
37
38
  }
38
39
 
@@ -69,13 +70,12 @@
69
70
  }
70
71
 
71
72
  .lastUpdatedWrapperShort {
72
- height: 31px;
73
- align-items: flex-end;
73
+ margin-top: auto;
74
74
  }
75
75
 
76
76
  .lastUpdatedWrapper {
77
77
  display: flex;
78
- margin-top: 8px;
78
+ padding-top: 6px;
79
79
  }
80
80
 
81
81
  .lastUpdatedText {
@@ -100,11 +100,11 @@
100
100
  font-size: 14px;
101
101
  transition: all time ease-in-out;
102
102
  cursor: pointer;
103
- order: 1;
104
103
  font-family: Gilroy;
105
104
  font-weight: bold;
106
105
  text-align: left;
107
106
  color: brand;
107
+ padding-top: 2px;
108
108
  }
109
109
 
110
110
  .showMore:hover {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/select-multiple/index.js"],"names":[],"mappings":"AAsBO,oEAcN;;AAmCD;;;;;;;;;;;;;;;gBA+KC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/select-multiple/index.js"],"names":[],"mappings":"AAsBO,oEAcN;;AA2BD;;;;;;;;;;;;;;;gBAoLC"}
@@ -48,14 +48,10 @@ const CMMultipleView = ({
48
48
  onChange
49
49
  }) => {
50
50
  const handleChange = useCallback(checked => {
51
- if (!multiple) {
52
- return onChange(choice);
53
- }
54
-
55
51
  return onChange(_extends({}, choice, {
56
52
  selected: checked
57
53
  }));
58
- }, [onChange, choice, multiple]);
54
+ }, [onChange, choice]);
59
55
  return multiple ? /*#__PURE__*/React.createElement("div", {
60
56
  className: style.item
61
57
  }, /*#__PURE__*/React.createElement(Checkbox, {
@@ -66,7 +62,6 @@ const CMMultipleView = ({
66
62
  title: choice.name
67
63
  })) : /*#__PURE__*/React.createElement("span", {
68
64
  className: style.item,
69
- onClick: handleChange,
70
65
  title: choice.name,
71
66
  "data-name": `${choice.name}-language`
72
67
  }, choice.name);
@@ -128,12 +123,17 @@ const SelectMultiple = ({
128
123
  }, [closeHandle]);
129
124
  const isCMTheme = theme === 'coorpmanager';
130
125
 
126
+ const handleOnClickOnListElement = choice => () => handleChange(choice);
127
+
131
128
  const lines = _map.convert({
132
129
  cap: false
133
130
  })((choice, i) => {
134
131
  return /*#__PURE__*/React.createElement("li", {
135
132
  key: i,
136
- className: style.choice
133
+ className: style.choice,
134
+ onClick: isCMTheme && !multiple ? handleOnClickOnListElement(_extends({}, choice, {
135
+ i
136
+ })) : null
137
137
  }, isCMTheme ? /*#__PURE__*/React.createElement(CMMultipleView, {
138
138
  multiple: multiple,
139
139
  choice: _extends({}, choice, {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useState","useEffect","useRef","useCallback","PropTypes","classnames","NovaCompositionNavigationArrowDown","ArrowDown","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","TitledCheckbox","Provider","Checkbox","getClassState","style","themeStyle","setup","cockpit","sidebar","coorpmanager","useChoices","options","choicesRef","current","getChoices","setChoices","choice","choices","i","selected","filter","c","CMMultipleView","multiple","onChange","handleChange","checked","item","name","SelectMultiple","title","theme","placeholder","description","hint","onError","modified","error","disabled","skin","isOpened","updateIsOpened","nodeRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","document","addEventListener","removeEventListener","isCMTheme","lines","convert","cap","selection","isActive","titleView","titleWithSelection","noValue","active","infoIconWrapper","infoIcon","descriptionLabel","hintView","hideHint","__html","mainClass","default","showPlaceholder","behaviourClassName","errorIconView","errorIcon","select","noselection","iconsWrapper","flex","clicked","color","arrow","down","activeChoices","list","contextTypes","childContextTypes","propTypes","bool","func","string","arrayOf","oneOf"],"sources":["../../../src/molecule/select-multiple/index.js"],"sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport Checkbox from '../../atom/input-checkbox';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar,\n coorpmanager: style.coorpmanager\n};\n\nexport const useChoices = options => {\n const choicesRef = {current: options};\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst CMMultipleView = ({multiple, choice, onChange}) => {\n const handleChange = useCallback(\n checked => {\n if (!multiple) {\n return onChange(choice);\n }\n return onChange({...choice, selected: checked});\n },\n [onChange, choice, multiple]\n );\n\n return multiple ? (\n <div className={style.item}>\n <Checkbox\n titleStyle=\"inherit\"\n checked={choice.selected}\n onChange={handleChange}\n noLabelMargins\n title={choice.name}\n />\n </div>\n ) : (\n <span\n className={style.item}\n onClick={handleChange}\n title={choice.name}\n data-name={`${choice.name}-language`}\n >\n {choice.name}\n </span>\n );\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n hint,\n multiple,\n onChange,\n onError,\n modified = false,\n error = '',\n disabled = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(\n e => {\n if (disabled) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n updateIsOpened(prev => !prev);\n },\n [disabled]\n );\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n\n return onChange(getChoices());\n }\n updateIsOpened(false);\n return onChange(choice);\n },\n [multiple, onChange, setChoices, getChoices]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const isCMTheme = theme === 'coorpmanager';\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li key={i} className={style.choice}>\n {isCMTheme ? (\n <CMMultipleView multiple={multiple} choice={{...choice, i}} onChange={handleChange} />\n ) : (\n <TitledCheckbox\n onToggle={handleChange}\n choice={{...choice, i}}\n background={defaultColor}\n />\n )}\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const isActive = isOpened === true;\n\n const titleView = title ? (\n <span\n className={classnames(\n style.title,\n isCMTheme && selection && style.titleWithSelection,\n isCMTheme && isEmpty(selection) && style.noValue,\n isActive && style.active\n )}\n >\n {title}\n {isCMTheme ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null}\n </span>\n ) : null;\n\n const hintView = isCMTheme ? (\n <div\n className={classnames(style.hint, isActive && style.hideHint)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n\n const mainClass = theme ? themeStyle[theme] : style.default;\n const showPlaceholder = isCMTheme && isActive;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n const errorIconView = error ? <ErrorIcon onClick={onError} className={style.errorIcon} /> : null;\n\n return (\n <div\n className={classnames(mainClass, behaviourClassName, disabled && style.disabled)}\n ref={nodeRef}\n >\n <label>\n {!isCMTheme && titleView}\n <div\n className={style.select}\n title={selection || placeholder}\n data-name={`select-languages`}\n onClick={handleOnClick}\n >\n {isCMTheme && titleView}\n <span\n className={classnames(\n style.selection,\n isCMTheme && isEmpty(selection) && style.noselection\n )}\n >\n {selection || !isCMTheme || (showPlaceholder && placeholder) || null}\n </span>\n {isCMTheme ? (\n <div className={style.iconsWrapper}>\n <div className={style.flex}>{errorIconView}</div>\n <div className={classnames(style.flex, isActive && style.clicked)}>\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n </div>\n </div>\n ) : (\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n )}\n </div>\n <div className={classnames(style.choices, isActive && style.activeChoices)}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n {!isCMTheme ? <div className={style.description}>{description}</div> : null}\n {hintView}\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCMMultipleView.propTypes = {\n multiple: PropTypes.bool,\n choice: TitledCheckbox.propTypes.choice,\n onChange: PropTypes.func\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n hint: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n onError: PropTypes.func,\n multiple: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle))\n};\n\nexport default SelectMultiple;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useState","useEffect","useRef","useCallback","PropTypes","classnames","NovaCompositionNavigationArrowDown","ArrowDown","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","TitledCheckbox","Provider","Checkbox","getClassState","style","themeStyle","setup","cockpit","sidebar","coorpmanager","useChoices","options","choicesRef","current","getChoices","setChoices","choice","choices","i","selected","filter","c","CMMultipleView","multiple","onChange","handleChange","checked","item","name","SelectMultiple","title","theme","placeholder","description","hint","onError","modified","error","disabled","skin","isOpened","updateIsOpened","nodeRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","document","addEventListener","removeEventListener","isCMTheme","handleOnClickOnListElement","lines","convert","cap","selection","isActive","titleView","titleWithSelection","noValue","active","infoIconWrapper","infoIcon","descriptionLabel","hintView","hideHint","__html","mainClass","default","showPlaceholder","behaviourClassName","errorIconView","errorIcon","select","noselection","iconsWrapper","flex","clicked","color","arrow","down","activeChoices","list","contextTypes","childContextTypes","propTypes","bool","func","string","arrayOf","oneOf"],"sources":["../../../src/molecule/select-multiple/index.js"],"sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport Checkbox from '../../atom/input-checkbox';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar,\n coorpmanager: style.coorpmanager\n};\n\nexport const useChoices = options => {\n const choicesRef = {current: options};\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst CMMultipleView = ({multiple, choice, onChange}) => {\n const handleChange = useCallback(\n checked => {\n return onChange({...choice, selected: checked});\n },\n [onChange, choice]\n );\n\n return multiple ? (\n <div className={style.item}>\n <Checkbox\n titleStyle=\"inherit\"\n checked={choice.selected}\n onChange={handleChange}\n noLabelMargins\n title={choice.name}\n />\n </div>\n ) : (\n <span className={style.item} title={choice.name} data-name={`${choice.name}-language`}>\n {choice.name}\n </span>\n );\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n hint,\n multiple,\n onChange,\n onError,\n modified = false,\n error = '',\n disabled = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(\n e => {\n if (disabled) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n updateIsOpened(prev => !prev);\n },\n [disabled]\n );\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n return onChange(getChoices());\n }\n updateIsOpened(false);\n return onChange(choice);\n },\n [multiple, onChange, setChoices, getChoices]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const isCMTheme = theme === 'coorpmanager';\n\n const handleOnClickOnListElement = choice => () => handleChange(choice);\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li\n key={i}\n className={style.choice}\n onClick={isCMTheme && !multiple ? handleOnClickOnListElement({...choice, i}) : null}\n >\n {isCMTheme ? (\n <CMMultipleView multiple={multiple} choice={{...choice, i}} onChange={handleChange} />\n ) : (\n <TitledCheckbox\n onToggle={handleChange}\n choice={{...choice, i}}\n background={defaultColor}\n />\n )}\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const isActive = isOpened === true;\n\n const titleView = title ? (\n <span\n className={classnames(\n style.title,\n isCMTheme && selection && style.titleWithSelection,\n isCMTheme && isEmpty(selection) && style.noValue,\n isActive && style.active\n )}\n >\n {title}\n {isCMTheme ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null}\n </span>\n ) : null;\n\n const hintView = isCMTheme ? (\n <div\n className={classnames(style.hint, isActive && style.hideHint)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n\n const mainClass = theme ? themeStyle[theme] : style.default;\n const showPlaceholder = isCMTheme && isActive;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n const errorIconView = error ? <ErrorIcon onClick={onError} className={style.errorIcon} /> : null;\n\n return (\n <div\n className={classnames(mainClass, behaviourClassName, disabled && style.disabled)}\n ref={nodeRef}\n >\n <label>\n {!isCMTheme && titleView}\n <div\n className={style.select}\n title={selection || placeholder}\n data-name={`select-languages`}\n onClick={handleOnClick}\n >\n {isCMTheme && titleView}\n <span\n className={classnames(\n style.selection,\n isCMTheme && isEmpty(selection) && style.noselection\n )}\n >\n {selection || !isCMTheme || (showPlaceholder && placeholder) || null}\n </span>\n {isCMTheme ? (\n <div className={style.iconsWrapper}>\n <div className={style.flex}>{errorIconView}</div>\n <div className={classnames(style.flex, isActive && style.clicked)}>\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n </div>\n </div>\n ) : (\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n )}\n </div>\n <div className={classnames(style.choices, isActive && style.activeChoices)}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n {!isCMTheme ? <div className={style.description}>{description}</div> : null}\n {hintView}\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCMMultipleView.propTypes = {\n multiple: PropTypes.bool,\n choice: TitledCheckbox.propTypes.choice,\n onChange: PropTypes.func\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n hint: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n onError: PropTypes.func,\n multiple: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle))\n};\n\nexport default SelectMultiple;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-items/index.js"],"names":[],"mappings":";AAgCA;;;;;;gBAwBC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-items/index.js"],"names":[],"mappings":";AAoCA;;;;;;gBAwBC"}
@@ -9,7 +9,7 @@ import SelectMultiple from '../../molecule/select-multiple';
9
9
  import ExpandibleActionableTable from '../../molecule/expandible-actionable-table';
10
10
  import style from './style.css';
11
11
 
12
- const buildListItemsView = (content, ariaLabel) => {
12
+ const buildListItemsView = (content, ariaLabel, selectMultiple) => {
13
13
  const {
14
14
  items,
15
15
  itemType
@@ -23,20 +23,20 @@ const buildListItemsView = (content, ariaLabel) => {
23
23
  contentType: itemType
24
24
  }))));
25
25
  return /*#__PURE__*/React.createElement("ul", {
26
- className: style.list,
26
+ className: !selectMultiple ? style.list : style.listWithSelectMultiple,
27
27
  "aria-label": ariaLabel,
28
28
  "data-name": 'content-list'
29
29
  }, itemsView);
30
30
  };
31
31
 
32
- const buildContentView = (content, ariaLabel) => {
32
+ const buildContentView = (content, ariaLabel, selectMultiple) => {
33
33
  const {
34
34
  type
35
35
  } = content;
36
36
 
37
37
  switch (type) {
38
38
  case 'list':
39
- return buildListItemsView(content, ariaLabel);
39
+ return buildListItemsView(content, ariaLabel, selectMultiple);
40
40
 
41
41
  case 'expandible-actionable-table':
42
42
  return /*#__PURE__*/React.createElement(ExpandibleActionableTable, content);
@@ -50,7 +50,7 @@ const ListItems = ({
50
50
  content,
51
51
  'aria-label': ariaLabel
52
52
  }) => {
53
- const contentView = buildContentView(content, ariaLabel);
53
+ const contentView = buildContentView(content, ariaLabel, selectMultiple);
54
54
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
55
55
  className: style.header
56
56
  }, /*#__PURE__*/React.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","ListItem","Title","ButtonLink","SelectMultiple","ExpandibleActionableTable","style","buildListItemsView","content","ariaLabel","items","itemType","itemsView","map","item","index","id","list","buildContentView","type","ListItems","title","buttonLink","selectMultiple","contentView","header","actionsWrapper","buttonCreate","propTypes","string","shape","arrayOf","oneOfType","oneOf"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport ExpandibleActionableTable from '../../molecule/expandible-actionable-table';\nimport style from './style.css';\n\nconst buildListItemsView = (content, ariaLabel) => {\n const {items, itemType} = content;\n const itemsView = items.map((item, index) => (\n <li key={item.id} className={style.item} data-name={`content-${index}`}>\n <ListItem {...item} order={index} contentType={itemType} />\n </li>\n ));\n return (\n <ul className={style.list} aria-label={ariaLabel} data-name={'content-list'}>\n {itemsView}\n </ul>\n );\n};\nconst buildContentView = (content, ariaLabel) => {\n const {type} = content;\n switch (type) {\n case 'list':\n return buildListItemsView(content, ariaLabel);\n case 'expandible-actionable-table':\n return <ExpandibleActionableTable {...content} />;\n }\n};\n\nconst ListItems = ({title, buttonLink, selectMultiple, content, 'aria-label': ariaLabel}) => {\n const contentView = buildContentView(content, ariaLabel);\n\n return (\n <div>\n <div className={style.header}>\n <div className={style.title}>\n <Title title={title} type={'form-group'} data-name={'list-title'} />\n </div>\n <div className={style.actionsWrapper}>\n {selectMultiple ? (\n <div className={style.selectMultiple}>\n <SelectMultiple {...selectMultiple} />\n </div>\n ) : null}\n\n <div className={style.buttonCreate}>\n <ButtonLink {...buttonLink} />\n </div>\n </div>\n </div>\n {contentView}\n </div>\n );\n};\n\nListItems.propTypes = {\n 'aria-label': PropTypes.string,\n buttonLink: PropTypes.shape(ButtonLink.propTypes),\n selectMultiple: PropTypes.shape(SelectMultiple.propTypes),\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n content: PropTypes.oneOfType([\n PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n type: PropTypes.oneOf(['list']),\n itemType: PropTypes.string\n }),\n PropTypes.shape({\n ...ExpandibleActionableTable.propTypes,\n type: PropTypes.oneOf(['expandible-actionable-table'])\n })\n ]),\n title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","ListItem","Title","ButtonLink","SelectMultiple","ExpandibleActionableTable","style","buildListItemsView","content","ariaLabel","selectMultiple","items","itemType","itemsView","map","item","index","id","list","listWithSelectMultiple","buildContentView","type","ListItems","title","buttonLink","contentView","header","actionsWrapper","buttonCreate","propTypes","string","shape","arrayOf","oneOfType","oneOf"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport ExpandibleActionableTable from '../../molecule/expandible-actionable-table';\nimport style from './style.css';\n\nconst buildListItemsView = (content, ariaLabel, selectMultiple) => {\n const {items, itemType} = content;\n const itemsView = items.map((item, index) => (\n <li key={item.id} className={style.item} data-name={`content-${index}`}>\n <ListItem {...item} order={index} contentType={itemType} />\n </li>\n ));\n return (\n <ul\n className={!selectMultiple ? style.list : style.listWithSelectMultiple}\n aria-label={ariaLabel}\n data-name={'content-list'}\n >\n {itemsView}\n </ul>\n );\n};\nconst buildContentView = (content, ariaLabel, selectMultiple) => {\n const {type} = content;\n switch (type) {\n case 'list':\n return buildListItemsView(content, ariaLabel, selectMultiple);\n case 'expandible-actionable-table':\n return <ExpandibleActionableTable {...content} />;\n }\n};\n\nconst ListItems = ({title, buttonLink, selectMultiple, content, 'aria-label': ariaLabel}) => {\n const contentView = buildContentView(content, ariaLabel, selectMultiple);\n\n return (\n <div>\n <div className={style.header}>\n <div className={style.title}>\n <Title title={title} type={'form-group'} data-name={'list-title'} />\n </div>\n <div className={style.actionsWrapper}>\n {selectMultiple ? (\n <div className={style.selectMultiple}>\n <SelectMultiple {...selectMultiple} />\n </div>\n ) : null}\n\n <div className={style.buttonCreate}>\n <ButtonLink {...buttonLink} />\n </div>\n </div>\n </div>\n {contentView}\n </div>\n );\n};\n\nListItems.propTypes = {\n 'aria-label': PropTypes.string,\n buttonLink: PropTypes.shape(ButtonLink.propTypes),\n selectMultiple: PropTypes.shape(SelectMultiple.propTypes),\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n content: PropTypes.oneOfType([\n PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n type: PropTypes.oneOf(['list']),\n itemType: PropTypes.string\n }),\n PropTypes.shape({\n ...ExpandibleActionableTable.propTypes,\n type: PropTypes.oneOf(['expandible-actionable-table'])\n })\n ]),\n title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":"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"}
@@ -46,4 +46,11 @@
46
46
  list-style-type: none;
47
47
  margin: 0;
48
48
  padding: 0;
49
+ }
50
+
51
+ .listWithSelectMultiple {
52
+ list-style-type: none;
53
+ margin: 0;
54
+ padding: 0;
55
+ min-height: 200px;
49
56
  }
@@ -31,8 +31,9 @@
31
31
  }
32
32
 
33
33
  .courseWrapper {
34
- display: inline-block;
34
+ display: flex;
35
35
  vertical-align: top;
36
+ flex-direction: column;
36
37
  padding-left: 30px;
37
38
  }
38
39
 
@@ -69,13 +70,12 @@
69
70
  }
70
71
 
71
72
  .lastUpdatedWrapperShort {
72
- height: 31px;
73
- align-items: flex-end;
73
+ margin-top: auto;
74
74
  }
75
75
 
76
76
  .lastUpdatedWrapper {
77
77
  display: flex;
78
- margin-top: 8px;
78
+ padding-top: 6px;
79
79
  }
80
80
 
81
81
  .lastUpdatedText {
@@ -100,11 +100,11 @@
100
100
  font-size: 14px;
101
101
  transition: all time ease-in-out;
102
102
  cursor: pointer;
103
- order: 1;
104
103
  font-family: Gilroy;
105
104
  font-weight: bold;
106
105
  text-align: left;
107
106
  color: brand;
107
+ padding-top: 2px;
108
108
  }
109
109
 
110
110
  .showMore:hover {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/select-multiple/index.js"],"names":[],"mappings":"AAsBO,oEAcN;;AAmCD;;;;;;;;;;;;;;;gBA+KC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/select-multiple/index.js"],"names":[],"mappings":"AAsBO,oEAcN;;AA2BD;;;;;;;;;;;;;;;gBAoLC"}
@@ -77,14 +77,10 @@ const CMMultipleView = ({
77
77
  onChange
78
78
  }) => {
79
79
  const handleChange = (0, _react.useCallback)(checked => {
80
- if (!multiple) {
81
- return onChange(choice);
82
- }
83
-
84
80
  return onChange(_extends({}, choice, {
85
81
  selected: checked
86
82
  }));
87
- }, [onChange, choice, multiple]);
83
+ }, [onChange, choice]);
88
84
  return multiple ? /*#__PURE__*/_react.default.createElement("div", {
89
85
  className: _style.default.item
90
86
  }, /*#__PURE__*/_react.default.createElement(_inputCheckbox.default, {
@@ -95,7 +91,6 @@ const CMMultipleView = ({
95
91
  title: choice.name
96
92
  })) : /*#__PURE__*/_react.default.createElement("span", {
97
93
  className: _style.default.item,
98
- onClick: handleChange,
99
94
  title: choice.name,
100
95
  "data-name": `${choice.name}-language`
101
96
  }, choice.name);
@@ -154,12 +149,17 @@ const SelectMultiple = ({
154
149
  }, [closeHandle]);
155
150
  const isCMTheme = theme === 'coorpmanager';
156
151
 
152
+ const handleOnClickOnListElement = choice => () => handleChange(choice);
153
+
157
154
  const lines = _map2.default.convert({
158
155
  cap: false
159
156
  })((choice, i) => {
160
157
  return /*#__PURE__*/_react.default.createElement("li", {
161
158
  key: i,
162
- className: _style.default.choice
159
+ className: _style.default.choice,
160
+ onClick: isCMTheme && !multiple ? handleOnClickOnListElement(_extends({}, choice, {
161
+ i
162
+ })) : null
163
163
  }, isCMTheme ? /*#__PURE__*/_react.default.createElement(CMMultipleView, {
164
164
  multiple: multiple,
165
165
  choice: _extends({}, choice, {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["themeStyle","setup","style","cockpit","sidebar","coorpmanager","useChoices","options","choicesRef","current","getChoices","setChoices","choice","choices","i","selected","filter","c","CMMultipleView","multiple","onChange","handleChange","useCallback","checked","item","name","SelectMultiple","title","theme","placeholder","description","hint","onError","modified","error","disabled","skin","isOpened","updateIsOpened","useState","nodeRef","useRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","useEffect","document","addEventListener","removeEventListener","isCMTheme","lines","convert","cap","selection","isActive","titleView","classnames","titleWithSelection","noValue","active","infoIconWrapper","infoIcon","descriptionLabel","hintView","hideHint","__html","mainClass","default","showPlaceholder","behaviourClassName","getClassState","errorIconView","errorIcon","select","noselection","iconsWrapper","flex","clicked","color","arrow","down","activeChoices","list","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","TitledCheckbox","func","string","arrayOf","oneOf"],"sources":["../../../src/molecule/select-multiple/index.js"],"sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport Checkbox from '../../atom/input-checkbox';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar,\n coorpmanager: style.coorpmanager\n};\n\nexport const useChoices = options => {\n const choicesRef = {current: options};\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst CMMultipleView = ({multiple, choice, onChange}) => {\n const handleChange = useCallback(\n checked => {\n if (!multiple) {\n return onChange(choice);\n }\n return onChange({...choice, selected: checked});\n },\n [onChange, choice, multiple]\n );\n\n return multiple ? (\n <div className={style.item}>\n <Checkbox\n titleStyle=\"inherit\"\n checked={choice.selected}\n onChange={handleChange}\n noLabelMargins\n title={choice.name}\n />\n </div>\n ) : (\n <span\n className={style.item}\n onClick={handleChange}\n title={choice.name}\n data-name={`${choice.name}-language`}\n >\n {choice.name}\n </span>\n );\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n hint,\n multiple,\n onChange,\n onError,\n modified = false,\n error = '',\n disabled = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(\n e => {\n if (disabled) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n updateIsOpened(prev => !prev);\n },\n [disabled]\n );\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n\n return onChange(getChoices());\n }\n updateIsOpened(false);\n return onChange(choice);\n },\n [multiple, onChange, setChoices, getChoices]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const isCMTheme = theme === 'coorpmanager';\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li key={i} className={style.choice}>\n {isCMTheme ? (\n <CMMultipleView multiple={multiple} choice={{...choice, i}} onChange={handleChange} />\n ) : (\n <TitledCheckbox\n onToggle={handleChange}\n choice={{...choice, i}}\n background={defaultColor}\n />\n )}\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const isActive = isOpened === true;\n\n const titleView = title ? (\n <span\n className={classnames(\n style.title,\n isCMTheme && selection && style.titleWithSelection,\n isCMTheme && isEmpty(selection) && style.noValue,\n isActive && style.active\n )}\n >\n {title}\n {isCMTheme ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null}\n </span>\n ) : null;\n\n const hintView = isCMTheme ? (\n <div\n className={classnames(style.hint, isActive && style.hideHint)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n\n const mainClass = theme ? themeStyle[theme] : style.default;\n const showPlaceholder = isCMTheme && isActive;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n const errorIconView = error ? <ErrorIcon onClick={onError} className={style.errorIcon} /> : null;\n\n return (\n <div\n className={classnames(mainClass, behaviourClassName, disabled && style.disabled)}\n ref={nodeRef}\n >\n <label>\n {!isCMTheme && titleView}\n <div\n className={style.select}\n title={selection || placeholder}\n data-name={`select-languages`}\n onClick={handleOnClick}\n >\n {isCMTheme && titleView}\n <span\n className={classnames(\n style.selection,\n isCMTheme && isEmpty(selection) && style.noselection\n )}\n >\n {selection || !isCMTheme || (showPlaceholder && placeholder) || null}\n </span>\n {isCMTheme ? (\n <div className={style.iconsWrapper}>\n <div className={style.flex}>{errorIconView}</div>\n <div className={classnames(style.flex, isActive && style.clicked)}>\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n </div>\n </div>\n ) : (\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n )}\n </div>\n <div className={classnames(style.choices, isActive && style.activeChoices)}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n {!isCMTheme ? <div className={style.description}>{description}</div> : null}\n {hintView}\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCMMultipleView.propTypes = {\n multiple: PropTypes.bool,\n choice: TitledCheckbox.propTypes.choice,\n onChange: PropTypes.func\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n hint: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n onError: PropTypes.func,\n multiple: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle))\n};\n\nexport default SelectMultiple;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["themeStyle","setup","style","cockpit","sidebar","coorpmanager","useChoices","options","choicesRef","current","getChoices","setChoices","choice","choices","i","selected","filter","c","CMMultipleView","multiple","onChange","handleChange","useCallback","checked","item","name","SelectMultiple","title","theme","placeholder","description","hint","onError","modified","error","disabled","skin","isOpened","updateIsOpened","useState","nodeRef","useRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","useEffect","document","addEventListener","removeEventListener","isCMTheme","handleOnClickOnListElement","lines","convert","cap","selection","isActive","titleView","classnames","titleWithSelection","noValue","active","infoIconWrapper","infoIcon","descriptionLabel","hintView","hideHint","__html","mainClass","default","showPlaceholder","behaviourClassName","getClassState","errorIconView","errorIcon","select","noselection","iconsWrapper","flex","clicked","color","arrow","down","activeChoices","list","contextTypes","Provider","childContextTypes","propTypes","PropTypes","bool","TitledCheckbox","func","string","arrayOf","oneOf"],"sources":["../../../src/molecule/select-multiple/index.js"],"sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport Checkbox from '../../atom/input-checkbox';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar,\n coorpmanager: style.coorpmanager\n};\n\nexport const useChoices = options => {\n const choicesRef = {current: options};\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst CMMultipleView = ({multiple, choice, onChange}) => {\n const handleChange = useCallback(\n checked => {\n return onChange({...choice, selected: checked});\n },\n [onChange, choice]\n );\n\n return multiple ? (\n <div className={style.item}>\n <Checkbox\n titleStyle=\"inherit\"\n checked={choice.selected}\n onChange={handleChange}\n noLabelMargins\n title={choice.name}\n />\n </div>\n ) : (\n <span className={style.item} title={choice.name} data-name={`${choice.name}-language`}>\n {choice.name}\n </span>\n );\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n hint,\n multiple,\n onChange,\n onError,\n modified = false,\n error = '',\n disabled = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(\n e => {\n if (disabled) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n updateIsOpened(prev => !prev);\n },\n [disabled]\n );\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n return onChange(getChoices());\n }\n updateIsOpened(false);\n return onChange(choice);\n },\n [multiple, onChange, setChoices, getChoices]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const isCMTheme = theme === 'coorpmanager';\n\n const handleOnClickOnListElement = choice => () => handleChange(choice);\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li\n key={i}\n className={style.choice}\n onClick={isCMTheme && !multiple ? handleOnClickOnListElement({...choice, i}) : null}\n >\n {isCMTheme ? (\n <CMMultipleView multiple={multiple} choice={{...choice, i}} onChange={handleChange} />\n ) : (\n <TitledCheckbox\n onToggle={handleChange}\n choice={{...choice, i}}\n background={defaultColor}\n />\n )}\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const isActive = isOpened === true;\n\n const titleView = title ? (\n <span\n className={classnames(\n style.title,\n isCMTheme && selection && style.titleWithSelection,\n isCMTheme && isEmpty(selection) && style.noValue,\n isActive && style.active\n )}\n >\n {title}\n {isCMTheme ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null}\n </span>\n ) : null;\n\n const hintView = isCMTheme ? (\n <div\n className={classnames(style.hint, isActive && style.hideHint)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n\n const mainClass = theme ? themeStyle[theme] : style.default;\n const showPlaceholder = isCMTheme && isActive;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n const errorIconView = error ? <ErrorIcon onClick={onError} className={style.errorIcon} /> : null;\n\n return (\n <div\n className={classnames(mainClass, behaviourClassName, disabled && style.disabled)}\n ref={nodeRef}\n >\n <label>\n {!isCMTheme && titleView}\n <div\n className={style.select}\n title={selection || placeholder}\n data-name={`select-languages`}\n onClick={handleOnClick}\n >\n {isCMTheme && titleView}\n <span\n className={classnames(\n style.selection,\n isCMTheme && isEmpty(selection) && style.noselection\n )}\n >\n {selection || !isCMTheme || (showPlaceholder && placeholder) || null}\n </span>\n {isCMTheme ? (\n <div className={style.iconsWrapper}>\n <div className={style.flex}>{errorIconView}</div>\n <div className={classnames(style.flex, isActive && style.clicked)}>\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n </div>\n </div>\n ) : (\n <ArrowDown\n style={{color: black}}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n )}\n </div>\n <div className={classnames(style.choices, isActive && style.activeChoices)}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n {!isCMTheme ? <div className={style.description}>{description}</div> : null}\n {hintView}\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCMMultipleView.propTypes = {\n multiple: PropTypes.bool,\n choice: TitledCheckbox.propTypes.choice,\n onChange: PropTypes.func\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n hint: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n onError: PropTypes.func,\n multiple: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle))\n};\n\nexport default SelectMultiple;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-items/index.js"],"names":[],"mappings":";AAgCA;;;;;;gBAwBC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/list-items/index.js"],"names":[],"mappings":";AAoCA;;;;;;gBAwBC"}
@@ -23,7 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
23
23
 
24
24
  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); }
25
25
 
26
- const buildListItemsView = (content, ariaLabel) => {
26
+ const buildListItemsView = (content, ariaLabel, selectMultiple) => {
27
27
  const {
28
28
  items,
29
29
  itemType
@@ -37,20 +37,20 @@ const buildListItemsView = (content, ariaLabel) => {
37
37
  contentType: itemType
38
38
  }))));
39
39
  return /*#__PURE__*/_react.default.createElement("ul", {
40
- className: _style.default.list,
40
+ className: !selectMultiple ? _style.default.list : _style.default.listWithSelectMultiple,
41
41
  "aria-label": ariaLabel,
42
42
  "data-name": 'content-list'
43
43
  }, itemsView);
44
44
  };
45
45
 
46
- const buildContentView = (content, ariaLabel) => {
46
+ const buildContentView = (content, ariaLabel, selectMultiple) => {
47
47
  const {
48
48
  type
49
49
  } = content;
50
50
 
51
51
  switch (type) {
52
52
  case 'list':
53
- return buildListItemsView(content, ariaLabel);
53
+ return buildListItemsView(content, ariaLabel, selectMultiple);
54
54
 
55
55
  case 'expandible-actionable-table':
56
56
  return /*#__PURE__*/_react.default.createElement(_expandibleActionableTable.default, content);
@@ -64,7 +64,7 @@ const ListItems = ({
64
64
  content,
65
65
  'aria-label': ariaLabel
66
66
  }) => {
67
- const contentView = buildContentView(content, ariaLabel);
67
+ const contentView = buildContentView(content, ariaLabel, selectMultiple);
68
68
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
69
69
  className: _style.default.header
70
70
  }, /*#__PURE__*/_react.default.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["buildListItemsView","content","ariaLabel","items","itemType","itemsView","map","item","index","id","style","list","buildContentView","type","ListItems","title","buttonLink","selectMultiple","contentView","header","actionsWrapper","buttonCreate","propTypes","PropTypes","string","shape","ButtonLink","SelectMultiple","arrayOf","ListItem","oneOfType","oneOf","ExpandibleActionableTable"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport ExpandibleActionableTable from '../../molecule/expandible-actionable-table';\nimport style from './style.css';\n\nconst buildListItemsView = (content, ariaLabel) => {\n const {items, itemType} = content;\n const itemsView = items.map((item, index) => (\n <li key={item.id} className={style.item} data-name={`content-${index}`}>\n <ListItem {...item} order={index} contentType={itemType} />\n </li>\n ));\n return (\n <ul className={style.list} aria-label={ariaLabel} data-name={'content-list'}>\n {itemsView}\n </ul>\n );\n};\nconst buildContentView = (content, ariaLabel) => {\n const {type} = content;\n switch (type) {\n case 'list':\n return buildListItemsView(content, ariaLabel);\n case 'expandible-actionable-table':\n return <ExpandibleActionableTable {...content} />;\n }\n};\n\nconst ListItems = ({title, buttonLink, selectMultiple, content, 'aria-label': ariaLabel}) => {\n const contentView = buildContentView(content, ariaLabel);\n\n return (\n <div>\n <div className={style.header}>\n <div className={style.title}>\n <Title title={title} type={'form-group'} data-name={'list-title'} />\n </div>\n <div className={style.actionsWrapper}>\n {selectMultiple ? (\n <div className={style.selectMultiple}>\n <SelectMultiple {...selectMultiple} />\n </div>\n ) : null}\n\n <div className={style.buttonCreate}>\n <ButtonLink {...buttonLink} />\n </div>\n </div>\n </div>\n {contentView}\n </div>\n );\n};\n\nListItems.propTypes = {\n 'aria-label': PropTypes.string,\n buttonLink: PropTypes.shape(ButtonLink.propTypes),\n selectMultiple: PropTypes.shape(SelectMultiple.propTypes),\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n content: PropTypes.oneOfType([\n PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n type: PropTypes.oneOf(['list']),\n itemType: PropTypes.string\n }),\n PropTypes.shape({\n ...ExpandibleActionableTable.propTypes,\n type: PropTypes.oneOf(['expandible-actionable-table'])\n })\n ]),\n title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,kBAAkB,GAAG,CAACC,OAAD,EAAUC,SAAV,KAAwB;EACjD,MAAM;IAACC,KAAD;IAAQC;EAAR,IAAoBH,OAA1B;EACA,MAAMI,SAAS,GAAGF,KAAK,CAACG,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,kBAC1B;IAAI,GAAG,EAAED,IAAI,CAACE,EAAd;IAAkB,SAAS,EAAEC,cAAA,CAAMH,IAAnC;IAAyC,aAAY,WAAUC,KAAM;EAArE,gBACE,6BAAC,iBAAD,eAAcD,IAAd;IAAoB,KAAK,EAAEC,KAA3B;IAAkC,WAAW,EAAEJ;EAA/C,GADF,CADgB,CAAlB;EAKA,oBACE;IAAI,SAAS,EAAEM,cAAA,CAAMC,IAArB;IAA2B,cAAYT,SAAvC;IAAkD,aAAW;EAA7D,GACGG,SADH,CADF;AAKD,CAZD;;AAaA,MAAMO,gBAAgB,GAAG,CAACX,OAAD,EAAUC,SAAV,KAAwB;EAC/C,MAAM;IAACW;EAAD,IAASZ,OAAf;;EACA,QAAQY,IAAR;IACE,KAAK,MAAL;MACE,OAAOb,kBAAkB,CAACC,OAAD,EAAUC,SAAV,CAAzB;;IACF,KAAK,6BAAL;MACE,oBAAO,6BAAC,kCAAD,EAA+BD,OAA/B,CAAP;EAJJ;AAMD,CARD;;AAUA,MAAMa,SAAS,GAAG,CAAC;EAACC,KAAD;EAAQC,UAAR;EAAoBC,cAApB;EAAoChB,OAApC;EAA6C,cAAcC;AAA3D,CAAD,KAA2E;EAC3F,MAAMgB,WAAW,GAAGN,gBAAgB,CAACX,OAAD,EAAUC,SAAV,CAApC;EAEA,oBACE,uDACE;IAAK,SAAS,EAAEQ,cAAA,CAAMS;EAAtB,gBACE;IAAK,SAAS,EAAET,cAAA,CAAMK;EAAtB,gBACE,6BAAC,cAAD;IAAO,KAAK,EAAEA,KAAd;IAAqB,IAAI,EAAE,YAA3B;IAAyC,aAAW;EAApD,EADF,CADF,eAIE;IAAK,SAAS,EAAEL,cAAA,CAAMU;EAAtB,GACGH,cAAc,gBACb;IAAK,SAAS,EAAEP,cAAA,CAAMO;EAAtB,gBACE,6BAAC,uBAAD,EAAoBA,cAApB,CADF,CADa,GAIX,IALN,eAOE;IAAK,SAAS,EAAEP,cAAA,CAAMW;EAAtB,gBACE,6BAAC,mBAAD,EAAgBL,UAAhB,CADF,CAPF,CAJF,CADF,EAiBGE,WAjBH,CADF;AAqBD,CAxBD;;AA0BAJ,SAAS,CAACQ,SAAV,2CAAsB;EACpB,cAAcC,kBAAA,CAAUC,MADJ;EAEpBR,UAAU,EAAEO,kBAAA,CAAUE,KAAV,CAAgBC,mBAAA,CAAWJ,SAA3B,CAFQ;EAGpBL,cAAc,EAAEM,kBAAA,CAAUE,KAAV,CAAgBE,uBAAA,CAAeL,SAA/B,CAHI;EAIpBnB,KAAK,EAAEoB,kBAAA,CAAUK,OAAV,CAAkBL,kBAAA,CAAUE,KAAV,CAAgBI,iBAAA,CAASP,SAAzB,CAAlB,CAJa;EAKpBrB,OAAO,EAAEsB,kBAAA,CAAUO,SAAV,CAAoB,CAC3BP,kBAAA,CAAUE,KAAV,CAAgB;IACdtB,KAAK,EAAEoB,kBAAA,CAAUK,OAAV,CAAkBL,kBAAA,CAAUE,KAAV,CAAgBI,iBAAA,CAASP,SAAzB,CAAlB,CADO;IAEdT,IAAI,EAAEU,kBAAA,CAAUQ,KAAV,CAAgB,CAAC,MAAD,CAAhB,CAFQ;IAGd3B,QAAQ,EAAEmB,kBAAA,CAAUC;EAHN,CAAhB,CAD2B,EAM3BD,kBAAA,CAAUE,KAAV,cACKO,kCAAA,CAA0BV,SAD/B;IAEET,IAAI,EAAEU,kBAAA,CAAUQ,KAAV,CAAgB,CAAC,6BAAD,CAAhB;EAFR,GAN2B,CAApB,CALW;EAgBpBhB,KAAK,EAAEQ,kBAAA,CAAUC;AAhBG,CAAtB;eAmBeV,S"}
1
+ {"version":3,"file":"index.js","names":["buildListItemsView","content","ariaLabel","selectMultiple","items","itemType","itemsView","map","item","index","id","style","list","listWithSelectMultiple","buildContentView","type","ListItems","title","buttonLink","contentView","header","actionsWrapper","buttonCreate","propTypes","PropTypes","string","shape","ButtonLink","SelectMultiple","arrayOf","ListItem","oneOfType","oneOf","ExpandibleActionableTable"],"sources":["../../../src/organism/list-items/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ListItem from '../list-item';\nimport Title from '../../atom/title';\nimport ButtonLink from '../../atom/button-link';\nimport SelectMultiple from '../../molecule/select-multiple';\nimport ExpandibleActionableTable from '../../molecule/expandible-actionable-table';\nimport style from './style.css';\n\nconst buildListItemsView = (content, ariaLabel, selectMultiple) => {\n const {items, itemType} = content;\n const itemsView = items.map((item, index) => (\n <li key={item.id} className={style.item} data-name={`content-${index}`}>\n <ListItem {...item} order={index} contentType={itemType} />\n </li>\n ));\n return (\n <ul\n className={!selectMultiple ? style.list : style.listWithSelectMultiple}\n aria-label={ariaLabel}\n data-name={'content-list'}\n >\n {itemsView}\n </ul>\n );\n};\nconst buildContentView = (content, ariaLabel, selectMultiple) => {\n const {type} = content;\n switch (type) {\n case 'list':\n return buildListItemsView(content, ariaLabel, selectMultiple);\n case 'expandible-actionable-table':\n return <ExpandibleActionableTable {...content} />;\n }\n};\n\nconst ListItems = ({title, buttonLink, selectMultiple, content, 'aria-label': ariaLabel}) => {\n const contentView = buildContentView(content, ariaLabel, selectMultiple);\n\n return (\n <div>\n <div className={style.header}>\n <div className={style.title}>\n <Title title={title} type={'form-group'} data-name={'list-title'} />\n </div>\n <div className={style.actionsWrapper}>\n {selectMultiple ? (\n <div className={style.selectMultiple}>\n <SelectMultiple {...selectMultiple} />\n </div>\n ) : null}\n\n <div className={style.buttonCreate}>\n <ButtonLink {...buttonLink} />\n </div>\n </div>\n </div>\n {contentView}\n </div>\n );\n};\n\nListItems.propTypes = {\n 'aria-label': PropTypes.string,\n buttonLink: PropTypes.shape(ButtonLink.propTypes),\n selectMultiple: PropTypes.shape(SelectMultiple.propTypes),\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n content: PropTypes.oneOfType([\n PropTypes.shape({\n items: PropTypes.arrayOf(PropTypes.shape(ListItem.propTypes)),\n type: PropTypes.oneOf(['list']),\n itemType: PropTypes.string\n }),\n PropTypes.shape({\n ...ExpandibleActionableTable.propTypes,\n type: PropTypes.oneOf(['expandible-actionable-table'])\n })\n ]),\n title: PropTypes.string\n};\n\nexport default ListItems;\n"],"mappings":"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"}
@@ -46,4 +46,11 @@
46
46
  list-style-type: none;
47
47
  margin: 0;
48
48
  padding: 0;
49
+ }
50
+
51
+ .listWithSelectMultiple {
52
+ list-style-type: none;
53
+ margin: 0;
54
+ padding: 0;
55
+ min-height: 200px;
49
56
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.14.2",
3
+ "version": "11.14.4",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -166,5 +166,5 @@
166
166
  "last 2 versions",
167
167
  "IE 11"
168
168
  ],
169
- "gitHead": "d188b22d4ae4c8f4e593a1882a13ec146fdd1a4b"
169
+ "gitHead": "24387437a4745a82310ac099c9032bc44872897b"
170
170
  }