@coorpacademy/components 11.32.20-alpha.33 → 11.32.20-alpha.35.34

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.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-learning-priorities/index.js"],"names":[],"mappings":";AAWA,gFAyDC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-learning-priorities/index.js"],"names":[],"mappings":";AAYA,gFAqEC"}
@@ -6,6 +6,7 @@ import React, { useState, useCallback, useMemo } from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import { convert } from 'css-color-function';
8
8
  import Provider from '../../atom/provider';
9
+ import Loader from '../../atom/loader';
9
10
  import { SelectOptionPropTypes } from '../../atom/select';
10
11
  import DraggableList from '../../molecule/draggable-list';
11
12
  import ButtonLink from '../../atom/button-link';
@@ -29,6 +30,11 @@ const BrandLearningPriorities = (props, context) => {
29
30
  const primarySkinColor = _get('common.primary', skin);
30
31
 
31
32
  const selectedPriorities = useMemo(() => content.items.map(priority => priority.priorityRef), [content.items]);
33
+
34
+ const Loading = () => /*#__PURE__*/React.createElement("div", {
35
+ className: style.loading
36
+ }, /*#__PURE__*/React.createElement(Loader, null));
37
+
32
38
  const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);
33
39
  const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);
34
40
  return /*#__PURE__*/React.createElement("div", {
@@ -46,7 +52,7 @@ const BrandLearningPriorities = (props, context) => {
46
52
  className: style.LPtitle
47
53
  }, translate('learning_priorities')), /*#__PURE__*/React.createElement("div", {
48
54
  className: style.LPdescription
49
- }, translate('learning_priorities_brand_description')), /*#__PURE__*/React.createElement("div", {
55
+ }, translate('learning_priorities_brand_description')), isLoading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
50
56
  className: style.ctaWrapper
51
57
  }, /*#__PURE__*/React.createElement("div", {
52
58
  className: style.priorityCount
@@ -71,7 +77,7 @@ const BrandLearningPriorities = (props, context) => {
71
77
  size: 16
72
78
  }
73
79
  }
74
- })), /*#__PURE__*/React.createElement(DraggableList, content));
80
+ })), /*#__PURE__*/React.createElement(DraggableList, content)));
75
81
  };
76
82
 
77
83
  BrandLearningPriorities.contextTypes = {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useState","useCallback","useMemo","PropTypes","convert","Provider","SelectOptionPropTypes","DraggableList","ButtonLink","LearningPriorityModal","style","BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","openModal","setOpenModal","skin","translate","primarySkinColor","selectedPriorities","items","map","priority","priorityRef","handleOpenModal","handleCloseModal","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","shape","arrayOf","ref","string","title","courses","number","type","onChange","func","options","count","bool"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport DraggableList from '../../molecule/draggable-list';\nimport ButtonLink from '../../atom/button-link';\nimport LearningPriorityModal from '../../molecule/learning-priority-modal';\nimport style from './style.css';\n\nconst BrandLearningPriorities = (props, context) => {\n const {content, priorities, filters, isLoading, onAdd} = props;\n const [openModal, setOpenModal] = useState(false);\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const selectedPriorities = useMemo(\n () => content.items.map(priority => priority.priorityRef),\n [content.items]\n );\n\n const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);\n const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);\n return (\n <div className={style.container}>\n <LearningPriorityModal\n isLoading={isLoading}\n isOpen={openModal}\n onCancel={handleCloseModal}\n onClose={handleCloseModal}\n onAdd={onAdd}\n priorities={priorities}\n filters={filters}\n preselected={selectedPriorities}\n />\n <div className={style.LPtitle}>{translate('learning_priorities')}</div>\n <div className={style.LPdescription}>\n {translate('learning_priorities_brand_description')}\n </div>\n <div className={style.ctaWrapper}>\n <div className={style.priorityCount}>{`${content.items.length} ${translate('items')}`}</div>\n <ButtonLink\n customStyle={{\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n }}\n hoverBackgroundColor={convert(`color(${primarySkinColor} a(0.07))`)}\n hoverColor={primarySkinColor}\n onClick={handleOpenModal}\n label={translate('add_learning_priority')}\n data-name=\"add-learning-priority\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'plus',\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n size: 16\n }\n }}\n />\n </div>\n <DraggableList {...content} />\n </div>\n );\n};\n\nBrandLearningPriorities.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nBrandLearningPriorities.propTypes = {\n content: PropTypes.shape(DraggableList.propTypes),\n priorities: PropTypes.arrayOf(\n PropTypes.shape({\n ref: PropTypes.string,\n title: PropTypes.string,\n courses: PropTypes.number,\n type: PropTypes.string\n })\n ),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n ...SelectOptionPropTypes,\n count: PropTypes.number\n })\n )\n }),\n isLoading: PropTypes.bool,\n onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useState","useCallback","useMemo","PropTypes","convert","Provider","Loader","SelectOptionPropTypes","DraggableList","ButtonLink","LearningPriorityModal","style","BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","openModal","setOpenModal","skin","translate","primarySkinColor","selectedPriorities","items","map","priority","priorityRef","Loading","loading","handleOpenModal","handleCloseModal","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","position","faIcon","name","size","contextTypes","childContextTypes","propTypes","shape","arrayOf","ref","string","title","courses","number","type","onChange","func","options","count","bool"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, { useState, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { convert } from 'css-color-function';\nimport { get } from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport { SelectOptionPropTypes } from '../../atom/select';\nimport DraggableList from '../../molecule/draggable-list';\nimport ButtonLink from '../../atom/button-link';\nimport LearningPriorityModal from '../../molecule/learning-priority-modal';\nimport style from './style.css';\n\nconst BrandLearningPriorities = (props, context) => {\n const { content, priorities, filters, isLoading, onAdd } = props;\n const [openModal, setOpenModal] = useState(false);\n const { skin, translate } = context;\n const primarySkinColor = get('common.primary', skin);\n\n const selectedPriorities = useMemo(\n () => content.items.map(priority => priority.priorityRef),\n [content.items]\n );\n\n const Loading = () => (\n <div className={style.loading}>\n <Loader />\n </div>\n );\n\n const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);\n const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);\n return (\n <div className={style.container}>\n <LearningPriorityModal\n isLoading={isLoading}\n isOpen={openModal}\n onCancel={handleCloseModal}\n onClose={handleCloseModal}\n onAdd={onAdd}\n priorities={priorities}\n filters={filters}\n preselected={selectedPriorities}\n />\n <div className={style.LPtitle}>{translate('learning_priorities')}</div>\n <div className={style.LPdescription}>\n {translate('learning_priorities_brand_description')}\n </div>\n\n {isLoading ?\n <Loading />\n :\n <>\n <div className={style.ctaWrapper}>\n <div className={style.priorityCount}>{`${content.items.length} ${translate('items')}`}</div>\n <ButtonLink\n customStyle={{\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n }}\n hoverBackgroundColor={convert(`color(${primarySkinColor} a(0.07))`)}\n hoverColor={primarySkinColor}\n onClick={handleOpenModal}\n label={translate('add_learning_priority')}\n data-name=\"add-learning-priority\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'plus',\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n size: 16\n }\n }}\n />\n </div>\n <DraggableList {...content} />\n </>}\n </div>\n );\n};\n\nBrandLearningPriorities.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nBrandLearningPriorities.propTypes = {\n content: PropTypes.shape(DraggableList.propTypes),\n priorities: PropTypes.arrayOf(\n PropTypes.shape({\n ref: PropTypes.string,\n title: PropTypes.string,\n courses: PropTypes.number,\n type: PropTypes.string\n })\n ),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n ...SelectOptionPropTypes,\n count: PropTypes.number\n })\n )\n }),\n isLoading: PropTypes.bool,\n onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":"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"}
@@ -22,6 +22,11 @@
22
22
  margin-bottom: 32px;
23
23
  }
24
24
 
25
+ .loading {
26
+ position: relative;
27
+ height: 200px;
28
+ }
29
+
25
30
  .ctaWrapper {
26
31
  display: flex;
27
32
  justify-content: space-between;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-learning-priorities/index.js"],"names":[],"mappings":";AAWA,gFAyDC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/brand-learning-priorities/index.js"],"names":[],"mappings":";AAYA,gFAqEC"}
@@ -13,6 +13,8 @@ var _cssColorFunction = require("css-color-function");
13
13
 
14
14
  var _provider = _interopRequireDefault(require("../../atom/provider"));
15
15
 
16
+ var _loader = _interopRequireDefault(require("../../atom/loader"));
17
+
16
18
  var _select = require("../../atom/select");
17
19
 
18
20
  var _draggableList = _interopRequireDefault(require("../../molecule/draggable-list"));
@@ -46,6 +48,11 @@ const BrandLearningPriorities = (props, context) => {
46
48
  } = context;
47
49
  const primarySkinColor = (0, _get2.default)('common.primary', skin);
48
50
  const selectedPriorities = (0, _react.useMemo)(() => content.items.map(priority => priority.priorityRef), [content.items]);
51
+
52
+ const Loading = () => /*#__PURE__*/_react.default.createElement("div", {
53
+ className: _style.default.loading
54
+ }, /*#__PURE__*/_react.default.createElement(_loader.default, null));
55
+
49
56
  const handleOpenModal = (0, _react.useCallback)(() => setOpenModal(true), [setOpenModal]);
50
57
  const handleCloseModal = (0, _react.useCallback)(() => setOpenModal(false), [setOpenModal]);
51
58
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -63,7 +70,7 @@ const BrandLearningPriorities = (props, context) => {
63
70
  className: _style.default.LPtitle
64
71
  }, translate('learning_priorities')), /*#__PURE__*/_react.default.createElement("div", {
65
72
  className: _style.default.LPdescription
66
- }, translate('learning_priorities_brand_description')), /*#__PURE__*/_react.default.createElement("div", {
73
+ }, translate('learning_priorities_brand_description')), isLoading ? /*#__PURE__*/_react.default.createElement(Loading, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
67
74
  className: _style.default.ctaWrapper
68
75
  }, /*#__PURE__*/_react.default.createElement("div", {
69
76
  className: _style.default.priorityCount
@@ -88,7 +95,7 @@ const BrandLearningPriorities = (props, context) => {
88
95
  size: 16
89
96
  }
90
97
  }
91
- })), /*#__PURE__*/_react.default.createElement(_draggableList.default, content));
98
+ })), /*#__PURE__*/_react.default.createElement(_draggableList.default, content)));
92
99
  };
93
100
 
94
101
  BrandLearningPriorities.contextTypes = {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","openModal","setOpenModal","useState","skin","translate","primarySkinColor","selectedPriorities","useMemo","items","map","priority","priorityRef","handleOpenModal","useCallback","handleCloseModal","style","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","convert","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","DraggableList","arrayOf","ref","string","title","courses","number","type","onChange","func","options","SelectOptionPropTypes","count","bool"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, {useState, useCallback, useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {convert} from 'css-color-function';\nimport {get} from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport {SelectOptionPropTypes} from '../../atom/select';\nimport DraggableList from '../../molecule/draggable-list';\nimport ButtonLink from '../../atom/button-link';\nimport LearningPriorityModal from '../../molecule/learning-priority-modal';\nimport style from './style.css';\n\nconst BrandLearningPriorities = (props, context) => {\n const {content, priorities, filters, isLoading, onAdd} = props;\n const [openModal, setOpenModal] = useState(false);\n const {skin, translate} = context;\n const primarySkinColor = get('common.primary', skin);\n\n const selectedPriorities = useMemo(\n () => content.items.map(priority => priority.priorityRef),\n [content.items]\n );\n\n const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);\n const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);\n return (\n <div className={style.container}>\n <LearningPriorityModal\n isLoading={isLoading}\n isOpen={openModal}\n onCancel={handleCloseModal}\n onClose={handleCloseModal}\n onAdd={onAdd}\n priorities={priorities}\n filters={filters}\n preselected={selectedPriorities}\n />\n <div className={style.LPtitle}>{translate('learning_priorities')}</div>\n <div className={style.LPdescription}>\n {translate('learning_priorities_brand_description')}\n </div>\n <div className={style.ctaWrapper}>\n <div className={style.priorityCount}>{`${content.items.length} ${translate('items')}`}</div>\n <ButtonLink\n customStyle={{\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n }}\n hoverBackgroundColor={convert(`color(${primarySkinColor} a(0.07))`)}\n hoverColor={primarySkinColor}\n onClick={handleOpenModal}\n label={translate('add_learning_priority')}\n data-name=\"add-learning-priority\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'plus',\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n size: 16\n }\n }}\n />\n </div>\n <DraggableList {...content} />\n </div>\n );\n};\n\nBrandLearningPriorities.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nBrandLearningPriorities.propTypes = {\n content: PropTypes.shape(DraggableList.propTypes),\n priorities: PropTypes.arrayOf(\n PropTypes.shape({\n ref: PropTypes.string,\n title: PropTypes.string,\n courses: PropTypes.number,\n type: PropTypes.string\n })\n ),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n ...SelectOptionPropTypes,\n count: PropTypes.number\n })\n )\n }),\n isLoading: PropTypes.bool,\n onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["BrandLearningPriorities","props","context","content","priorities","filters","isLoading","onAdd","openModal","setOpenModal","useState","skin","translate","primarySkinColor","selectedPriorities","useMemo","items","map","priority","priorityRef","Loading","style","loading","handleOpenModal","useCallback","handleCloseModal","container","LPtitle","LPdescription","ctaWrapper","priorityCount","length","backgroundColor","color","transition","width","convert","position","faIcon","name","size","contextTypes","Provider","childContextTypes","propTypes","PropTypes","shape","DraggableList","arrayOf","ref","string","title","courses","number","type","onChange","func","options","SelectOptionPropTypes","count","bool"],"sources":["../../../src/organism/brand-learning-priorities/index.js"],"sourcesContent":["import React, { useState, useCallback, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { convert } from 'css-color-function';\nimport { get } from 'lodash/fp';\nimport Provider from '../../atom/provider';\nimport Loader from '../../atom/loader';\nimport { SelectOptionPropTypes } from '../../atom/select';\nimport DraggableList from '../../molecule/draggable-list';\nimport ButtonLink from '../../atom/button-link';\nimport LearningPriorityModal from '../../molecule/learning-priority-modal';\nimport style from './style.css';\n\nconst BrandLearningPriorities = (props, context) => {\n const { content, priorities, filters, isLoading, onAdd } = props;\n const [openModal, setOpenModal] = useState(false);\n const { skin, translate } = context;\n const primarySkinColor = get('common.primary', skin);\n\n const selectedPriorities = useMemo(\n () => content.items.map(priority => priority.priorityRef),\n [content.items]\n );\n\n const Loading = () => (\n <div className={style.loading}>\n <Loader />\n </div>\n );\n\n const handleOpenModal = useCallback(() => setOpenModal(true), [setOpenModal]);\n const handleCloseModal = useCallback(() => setOpenModal(false), [setOpenModal]);\n return (\n <div className={style.container}>\n <LearningPriorityModal\n isLoading={isLoading}\n isOpen={openModal}\n onCancel={handleCloseModal}\n onClose={handleCloseModal}\n onAdd={onAdd}\n priorities={priorities}\n filters={filters}\n preselected={selectedPriorities}\n />\n <div className={style.LPtitle}>{translate('learning_priorities')}</div>\n <div className={style.LPdescription}>\n {translate('learning_priorities_brand_description')}\n </div>\n\n {isLoading ?\n <Loading />\n :\n <>\n <div className={style.ctaWrapper}>\n <div className={style.priorityCount}>{`${content.items.length} ${translate('items')}`}</div>\n <ButtonLink\n customStyle={{\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out',\n width: 'fit-content'\n }}\n hoverBackgroundColor={convert(`color(${primarySkinColor} a(0.07))`)}\n hoverColor={primarySkinColor}\n onClick={handleOpenModal}\n label={translate('add_learning_priority')}\n data-name=\"add-learning-priority\"\n icon={{\n position: 'left',\n faIcon: {\n name: 'plus',\n backgroundColor: primarySkinColor,\n color: '#FFFFFF',\n size: 16\n }\n }}\n />\n </div>\n <DraggableList {...content} />\n </>}\n </div>\n );\n};\n\nBrandLearningPriorities.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nBrandLearningPriorities.propTypes = {\n content: PropTypes.shape(DraggableList.propTypes),\n priorities: PropTypes.arrayOf(\n PropTypes.shape({\n ref: PropTypes.string,\n title: PropTypes.string,\n courses: PropTypes.number,\n type: PropTypes.string\n })\n ),\n filters: PropTypes.shape({\n onChange: PropTypes.func,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n ...SelectOptionPropTypes,\n count: PropTypes.number\n })\n )\n }),\n isLoading: PropTypes.bool,\n onAdd: PropTypes.func\n};\n\nexport default BrandLearningPriorities;\n"],"mappings":"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"}
@@ -22,6 +22,11 @@
22
22
  margin-bottom: 32px;
23
23
  }
24
24
 
25
+ .loading {
26
+ position: relative;
27
+ height: 200px;
28
+ }
29
+
25
30
  .ctaWrapper {
26
31
  display: flex;
27
32
  justify-content: space-between;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.32.20-alpha.33+56f780785",
3
+ "version": "11.32.20-alpha.35.34+541138198",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -177,5 +177,5 @@
177
177
  "last 2 versions",
178
178
  "IE 11"
179
179
  ],
180
- "gitHead": "56f780785e5c1c66348657cd462b3e435d43f341"
180
+ "gitHead": "541138198da8654824521778a4b77df5e331faa4"
181
181
  }