@coorpacademy/components 11.30.1 → 11.32.1-alpha.16

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.
Files changed (227) hide show
  1. package/es/atom/button-link/index.d.ts +1 -0
  2. package/es/atom/button-link/index.d.ts.map +1 -1
  3. package/es/atom/button-link/index.js +21 -12
  4. package/es/atom/button-link/index.js.map +1 -1
  5. package/es/atom/button-link/types.d.ts +11 -1
  6. package/es/atom/button-link/types.d.ts.map +1 -1
  7. package/es/atom/button-link/types.js +1 -0
  8. package/es/atom/button-link/types.js.map +1 -1
  9. package/es/atom/chip/index.d.ts +37 -0
  10. package/es/atom/chip/index.d.ts.map +1 -0
  11. package/es/atom/chip/index.js +85 -0
  12. package/es/atom/chip/index.js.map +1 -0
  13. package/es/atom/chip/style.css +65 -0
  14. package/es/atom/chips/index.d.ts.map +1 -1
  15. package/es/atom/chips/index.js +1 -0
  16. package/es/atom/chips/index.js.map +1 -1
  17. package/es/atom/icon/index.js +2 -2
  18. package/es/atom/icon/index.js.map +1 -1
  19. package/es/molecule/base-modal/index.d.ts +33 -0
  20. package/es/molecule/base-modal/index.d.ts.map +1 -0
  21. package/es/molecule/base-modal/index.js +142 -0
  22. package/es/molecule/base-modal/index.js.map +1 -0
  23. package/es/molecule/base-modal/style.css +125 -0
  24. package/es/molecule/bulk-progress-bar/index.d.ts.map +1 -1
  25. package/es/molecule/bulk-progress-bar/index.js +6 -3
  26. package/es/molecule/bulk-progress-bar/index.js.map +1 -1
  27. package/es/molecule/cm-popin/types.d.ts +2 -0
  28. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  29. package/es/molecule/expandible-actionable-table/index.d.ts +1 -0
  30. package/es/molecule/expandible-actionable-table/index.d.ts.map +1 -1
  31. package/es/molecule/expandible-actionable-table/types.d.ts +1 -0
  32. package/es/molecule/expandible-actionable-table/types.d.ts.map +1 -1
  33. package/es/molecule/learner-skill-card/index.d.ts +23 -0
  34. package/es/molecule/learner-skill-card/index.d.ts.map +1 -0
  35. package/es/molecule/learner-skill-card/index.js +164 -0
  36. package/es/molecule/learner-skill-card/index.js.map +1 -0
  37. package/es/molecule/learner-skill-card/style.css +119 -0
  38. package/es/molecule/learning-profile-radar-chart/index.d.ts +1 -1
  39. package/es/molecule/learning-profile-radar-chart/index.d.ts.map +1 -1
  40. package/es/molecule/learning-profile-radar-chart/index.js +16 -11
  41. package/es/molecule/learning-profile-radar-chart/index.js.map +1 -1
  42. package/es/molecule/learning-profile-radar-chart/types.d.ts +7 -1
  43. package/es/molecule/learning-profile-radar-chart/types.d.ts.map +1 -1
  44. package/es/molecule/learning-profile-radar-chart/types.js.map +1 -1
  45. package/es/molecule/questions/template/index.d.ts +1 -1
  46. package/es/molecule/quick-access-card/index.d.ts.map +1 -1
  47. package/es/molecule/quick-access-card/index.js +5 -1
  48. package/es/molecule/quick-access-card/index.js.map +1 -1
  49. package/es/molecule/skill-picker-modal/index.d.ts +23 -0
  50. package/es/molecule/skill-picker-modal/index.d.ts.map +1 -0
  51. package/es/molecule/skill-picker-modal/index.js +138 -0
  52. package/es/molecule/skill-picker-modal/index.js.map +1 -0
  53. package/es/molecule/skill-picker-modal/style.css +28 -0
  54. package/es/molecule/skills-chart-side-information-item/index.d.ts +1 -1
  55. package/es/molecule/skills-chart-side-information-item/index.js +1 -1
  56. package/es/molecule/skills-chart-side-information-item/index.js.map +1 -1
  57. package/es/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
  58. package/es/organism/list-items/index.d.ts +2 -0
  59. package/es/organism/setup-header/index.d.ts +4 -0
  60. package/es/organism/wizard-contents/index.d.ts +3 -0
  61. package/es/template/app-player/loading/index.d.ts +2 -0
  62. package/es/template/app-player/player/index.d.ts +4 -0
  63. package/es/template/app-player/player/slides/index.d.ts +2 -0
  64. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  65. package/es/template/app-player/popin-correction/index.d.ts +2 -0
  66. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  67. package/es/template/app-player/popin-end/index.d.ts +2 -0
  68. package/es/template/app-review/index.d.ts +2 -0
  69. package/es/template/app-review/index.d.ts.map +1 -1
  70. package/es/template/app-review/player/prop-types.d.ts +2 -0
  71. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  72. package/es/template/app-review/prop-types.d.ts +2 -0
  73. package/es/template/app-review/prop-types.d.ts.map +1 -1
  74. package/es/template/back-office/brand-create/index.d.ts +4 -0
  75. package/es/template/back-office/brand-create/index.d.ts.map +1 -1
  76. package/es/template/back-office/brand-list/index.d.ts +4 -0
  77. package/es/template/back-office/brand-list/index.d.ts.map +1 -1
  78. package/es/template/back-office/brand-update/index.d.ts +11 -0
  79. package/es/template/back-office/dashboard-preview/index.d.ts +4 -0
  80. package/es/template/back-office/layout/index.d.ts +4 -0
  81. package/es/template/back-office/layout/index.d.ts.map +1 -1
  82. package/es/template/common/dashboard/index.d.ts +4 -0
  83. package/es/template/common/search-page/index.d.ts +2 -0
  84. package/es/template/external-course/index.d.ts +2 -0
  85. package/es/template/mobile-login/welcome/index.native.d.ts.map +1 -1
  86. package/es/template/mobile-login/welcome/index.native.js +5 -1
  87. package/es/template/mobile-login/welcome/index.native.js.map +1 -1
  88. package/es/template/my-learning/index.d.ts +34 -0
  89. package/es/template/my-learning/index.d.ts.map +1 -0
  90. package/es/template/my-learning/index.js +354 -0
  91. package/es/template/my-learning/index.js.map +1 -0
  92. package/es/template/my-learning/style.css +179 -0
  93. package/es/variables/colors.d.ts +7 -7
  94. package/es/variables/colors.d.ts.map +1 -1
  95. package/es/variables/colors.js +2 -1
  96. package/es/variables/colors.js.map +1 -1
  97. package/es/variables/theme.native.d.ts.map +1 -1
  98. package/es/variables/theme.native.js +4 -1
  99. package/es/variables/theme.native.js.map +1 -1
  100. package/lib/atom/button-link/index.d.ts +1 -0
  101. package/lib/atom/button-link/index.d.ts.map +1 -1
  102. package/lib/atom/button-link/index.js +22 -12
  103. package/lib/atom/button-link/index.js.map +1 -1
  104. package/lib/atom/button-link/types.d.ts +11 -1
  105. package/lib/atom/button-link/types.d.ts.map +1 -1
  106. package/lib/atom/button-link/types.js +1 -0
  107. package/lib/atom/button-link/types.js.map +1 -1
  108. package/lib/atom/chip/index.d.ts +37 -0
  109. package/lib/atom/chip/index.d.ts.map +1 -0
  110. package/lib/atom/chip/index.js +109 -0
  111. package/lib/atom/chip/index.js.map +1 -0
  112. package/lib/atom/chip/style.css +65 -0
  113. package/lib/atom/chips/index.d.ts.map +1 -1
  114. package/lib/atom/chips/index.js +1 -0
  115. package/lib/atom/chips/index.js.map +1 -1
  116. package/lib/atom/icon/index.js +2 -2
  117. package/lib/atom/icon/index.js.map +1 -1
  118. package/lib/molecule/base-modal/index.d.ts +33 -0
  119. package/lib/molecule/base-modal/index.d.ts.map +1 -0
  120. package/lib/molecule/base-modal/index.js +158 -0
  121. package/lib/molecule/base-modal/index.js.map +1 -0
  122. package/lib/molecule/base-modal/style.css +125 -0
  123. package/lib/molecule/bulk-progress-bar/index.d.ts.map +1 -1
  124. package/lib/molecule/bulk-progress-bar/index.js +7 -3
  125. package/lib/molecule/bulk-progress-bar/index.js.map +1 -1
  126. package/lib/molecule/cm-popin/types.d.ts +2 -0
  127. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  128. package/lib/molecule/expandible-actionable-table/index.d.ts +1 -0
  129. package/lib/molecule/expandible-actionable-table/index.d.ts.map +1 -1
  130. package/lib/molecule/expandible-actionable-table/types.d.ts +1 -0
  131. package/lib/molecule/expandible-actionable-table/types.d.ts.map +1 -1
  132. package/lib/molecule/learner-skill-card/index.d.ts +23 -0
  133. package/lib/molecule/learner-skill-card/index.d.ts.map +1 -0
  134. package/lib/molecule/learner-skill-card/index.js +182 -0
  135. package/lib/molecule/learner-skill-card/index.js.map +1 -0
  136. package/lib/molecule/learner-skill-card/style.css +119 -0
  137. package/lib/molecule/learning-profile-radar-chart/index.d.ts +1 -1
  138. package/lib/molecule/learning-profile-radar-chart/index.d.ts.map +1 -1
  139. package/lib/molecule/learning-profile-radar-chart/index.js +16 -11
  140. package/lib/molecule/learning-profile-radar-chart/index.js.map +1 -1
  141. package/lib/molecule/learning-profile-radar-chart/types.d.ts +7 -1
  142. package/lib/molecule/learning-profile-radar-chart/types.d.ts.map +1 -1
  143. package/lib/molecule/learning-profile-radar-chart/types.js.map +1 -1
  144. package/lib/molecule/questions/template/index.d.ts +1 -1
  145. package/lib/molecule/quick-access-card/index.d.ts.map +1 -1
  146. package/lib/molecule/quick-access-card/index.js +7 -1
  147. package/lib/molecule/quick-access-card/index.js.map +1 -1
  148. package/lib/molecule/skill-picker-modal/index.d.ts +23 -0
  149. package/lib/molecule/skill-picker-modal/index.d.ts.map +1 -0
  150. package/lib/molecule/skill-picker-modal/index.js +156 -0
  151. package/lib/molecule/skill-picker-modal/index.js.map +1 -0
  152. package/lib/molecule/skill-picker-modal/style.css +28 -0
  153. package/lib/molecule/skills-chart-side-information-item/index.d.ts +1 -1
  154. package/lib/molecule/skills-chart-side-information-item/index.js +1 -1
  155. package/lib/molecule/skills-chart-side-information-item/index.js.map +1 -1
  156. package/lib/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
  157. package/lib/organism/list-items/index.d.ts +2 -0
  158. package/lib/organism/setup-header/index.d.ts +4 -0
  159. package/lib/organism/wizard-contents/index.d.ts +3 -0
  160. package/lib/template/app-player/loading/index.d.ts +2 -0
  161. package/lib/template/app-player/player/index.d.ts +4 -0
  162. package/lib/template/app-player/player/slides/index.d.ts +2 -0
  163. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  164. package/lib/template/app-player/popin-correction/index.d.ts +2 -0
  165. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  166. package/lib/template/app-player/popin-end/index.d.ts +2 -0
  167. package/lib/template/app-review/index.d.ts +2 -0
  168. package/lib/template/app-review/index.d.ts.map +1 -1
  169. package/lib/template/app-review/player/prop-types.d.ts +2 -0
  170. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  171. package/lib/template/app-review/prop-types.d.ts +2 -0
  172. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  173. package/lib/template/back-office/brand-create/index.d.ts +4 -0
  174. package/lib/template/back-office/brand-create/index.d.ts.map +1 -1
  175. package/lib/template/back-office/brand-list/index.d.ts +4 -0
  176. package/lib/template/back-office/brand-list/index.d.ts.map +1 -1
  177. package/lib/template/back-office/brand-update/index.d.ts +11 -0
  178. package/lib/template/back-office/dashboard-preview/index.d.ts +4 -0
  179. package/lib/template/back-office/layout/index.d.ts +4 -0
  180. package/lib/template/back-office/layout/index.d.ts.map +1 -1
  181. package/lib/template/common/dashboard/index.d.ts +4 -0
  182. package/lib/template/common/search-page/index.d.ts +2 -0
  183. package/lib/template/external-course/index.d.ts +2 -0
  184. package/lib/template/mobile-login/welcome/index.native.d.ts.map +1 -1
  185. package/lib/template/mobile-login/welcome/index.native.js +7 -1
  186. package/lib/template/mobile-login/welcome/index.native.js.map +1 -1
  187. package/lib/template/my-learning/index.d.ts +34 -0
  188. package/lib/template/my-learning/index.d.ts.map +1 -0
  189. package/lib/template/my-learning/index.js +375 -0
  190. package/lib/template/my-learning/index.js.map +1 -0
  191. package/lib/template/my-learning/style.css +179 -0
  192. package/lib/variables/colors.d.ts +7 -7
  193. package/lib/variables/colors.d.ts.map +1 -1
  194. package/lib/variables/colors.js +2 -1
  195. package/lib/variables/colors.js.map +1 -1
  196. package/lib/variables/theme.native.d.ts.map +1 -1
  197. package/lib/variables/theme.native.js +4 -1
  198. package/lib/variables/theme.native.js.map +1 -1
  199. package/locales/bs/global.json +7 -1
  200. package/locales/cs/global.json +7 -1
  201. package/locales/de/global.json +7 -1
  202. package/locales/en/global.json +31 -0
  203. package/locales/es/global.json +6 -0
  204. package/locales/et/global.json +7 -1
  205. package/locales/fi/global.json +7 -1
  206. package/locales/fr/global.json +6 -0
  207. package/locales/hr/global.json +7 -1
  208. package/locales/hu/global.json +7 -1
  209. package/locales/hy/global.json +7 -1
  210. package/locales/it/global.json +6 -0
  211. package/locales/ja/global.json +7 -1
  212. package/locales/ko/global.json +7 -1
  213. package/locales/nl/global.json +6 -0
  214. package/locales/pl/global.json +7 -1
  215. package/locales/pt/global.json +7 -1
  216. package/locales/ro/global.json +7 -1
  217. package/locales/ru/global.json +7 -1
  218. package/locales/sk/global.json +7 -1
  219. package/locales/sl/global.json +7 -1
  220. package/locales/sv/global.json +7 -1
  221. package/locales/tl/global.json +7 -1
  222. package/locales/tr/global.json +7 -1
  223. package/locales/uk/global.json +7 -1
  224. package/locales/vi/global.json +7 -1
  225. package/locales/zh/global.json +7 -1
  226. package/locales/zh_TW/global.json +7 -1
  227. package/package.json +3 -3
@@ -0,0 +1,142 @@
1
+ import _isEmpty from "lodash/fp/isEmpty";
2
+
3
+ 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); }
4
+
5
+ import React, { useCallback } from 'react';
6
+ import PropTypes from 'prop-types';
7
+ import Icon from '../../atom/icon';
8
+ import ButtonLink from '../../atom/button-link';
9
+ import style from './style.css';
10
+
11
+ const BaseModal = props => {
12
+ const {
13
+ title,
14
+ description,
15
+ headerIcon,
16
+ children,
17
+ isOpen,
18
+ footer,
19
+ onClose
20
+ } = props;
21
+ const Footer = useCallback(() => {
22
+ if (_isEmpty(footer)) return null;
23
+ if (typeof footer === 'function') return footer();
24
+ const {
25
+ cancelButton,
26
+ confirmButton,
27
+ text,
28
+ isError
29
+ } = footer;
30
+ const {
31
+ label: cancelLabel,
32
+ onCancel,
33
+ disabled: cancelDisabled
34
+ } = cancelButton || {};
35
+ const {
36
+ label: confirmLabel,
37
+ onConfirm,
38
+ disabled: confirmDisabled,
39
+ iconName
40
+ } = confirmButton || {};
41
+ return /*#__PURE__*/React.createElement("div", {
42
+ className: style.footer
43
+ }, /*#__PURE__*/React.createElement("div", {
44
+ className: style.footerCTAWrapper
45
+ }, onCancel && cancelLabel ? /*#__PURE__*/React.createElement(ButtonLink, {
46
+ className: style.footerCancelButton,
47
+ type: 'secondary',
48
+ onClick: onCancel,
49
+ label: cancelLabel,
50
+ disabled: cancelDisabled
51
+ }) : null, onConfirm && confirmLabel ? /*#__PURE__*/React.createElement(ButtonLink, _extends({
52
+ className: style.footerConfirmButton,
53
+ type: 'primary',
54
+ onClick: onConfirm,
55
+ label: confirmLabel,
56
+ disabled: confirmDisabled
57
+ }, iconName ? {
58
+ icon: {
59
+ position: 'left',
60
+ faIcon: {
61
+ name: iconName,
62
+ color: '#FFFFFF',
63
+ size: 16
64
+ }
65
+ }
66
+ } : {})) : null), text ? /*#__PURE__*/React.createElement("div", {
67
+ className: `${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`
68
+ }, text) : null);
69
+ }, [footer]);
70
+ if (!isOpen || !title || !children) return null;
71
+
72
+ function handleOnClose(e) {
73
+ e?.stopPropagation();
74
+ onClose();
75
+ }
76
+
77
+ return /*#__PURE__*/React.createElement("div", {
78
+ className: style.modalWrapper
79
+ }, /*#__PURE__*/React.createElement("div", {
80
+ className: style.modal
81
+ }, /*#__PURE__*/React.createElement("header", {
82
+ className: style.header
83
+ }, headerIcon?.name ? /*#__PURE__*/React.createElement("div", {
84
+ className: style.headerIcon
85
+ }, /*#__PURE__*/React.createElement(Icon, {
86
+ iconName: headerIcon.name,
87
+ iconColor: headerIcon.color,
88
+ backgroundColor: headerIcon.backgroundColor,
89
+ size: {
90
+ faSize: 20,
91
+ wrapperSize: 48
92
+ }
93
+ })) : null, /*#__PURE__*/React.createElement("div", {
94
+ className: style.headerContent
95
+ }, /*#__PURE__*/React.createElement("div", {
96
+ className: style.headerTitle
97
+ }, title), description ? /*#__PURE__*/React.createElement("div", {
98
+ className: style.headerDescription
99
+ }, description) : null), /*#__PURE__*/React.createElement("div", {
100
+ className: style.headerCloseIcon,
101
+ onClick: handleOnClose
102
+ }, /*#__PURE__*/React.createElement(Icon, {
103
+ iconName: "close",
104
+ backgroundColor: "#F4F4F5",
105
+ size: {
106
+ faSize: 14,
107
+ wrapperSize: 28
108
+ }
109
+ }))), /*#__PURE__*/React.createElement("div", {
110
+ className: style.body
111
+ }, children), /*#__PURE__*/React.createElement(Footer, null)));
112
+ };
113
+
114
+ BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
115
+ title: PropTypes.string,
116
+ headerIcon: PropTypes.shape({
117
+ name: PropTypes.string,
118
+ color: PropTypes.string,
119
+ backgroundColor: PropTypes.string
120
+ }),
121
+ description: PropTypes.string,
122
+ children: PropTypes.node,
123
+ isOpen: PropTypes.bool,
124
+ footer: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
125
+ text: PropTypes.string,
126
+ isError: PropTypes.boolean,
127
+ cancelButton: PropTypes.shape({
128
+ label: PropTypes.string,
129
+ onCancel: PropTypes.func,
130
+ disabled: PropTypes.bool
131
+ }),
132
+ confirmButton: PropTypes.shape({
133
+ label: PropTypes.string,
134
+ onConfirm: PropTypes.func,
135
+ iconName: PropTypes.string,
136
+ disabled: PropTypes.bool
137
+ })
138
+ })]),
139
+ onClose: PropTypes.func
140
+ } : {};
141
+ export default BaseModal;
142
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Icon","ButtonLink","style","BaseModal","props","title","description","headerIcon","children","isOpen","footer","onClose","Footer","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","footerCTAWrapper","className","footerCancelButton","type","onClick","footerConfirmButton","icon","position","faIcon","name","color","size","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","backgroundColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","body","propTypes","string","shape","node","bool","oneOfType","func","boolean"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst BaseModal = props => {\n const {title, description, headerIcon, children, isOpen, footer, onClose} = props;\n\n const Footer = useCallback(() => {\n if (isEmpty(footer)) return null;\n if (typeof footer === 'function') return footer();\n\n const {cancelButton, confirmButton, text, isError} = footer;\n const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n const {\n label: confirmLabel,\n onConfirm,\n disabled: confirmDisabled,\n iconName\n } = confirmButton || {};\n\n return (\n <div className={style.footer}>\n <div className={style.footerCTAWrapper}>\n {onCancel && cancelLabel ? (\n <ButtonLink\n {...{\n className: style.footerCancelButton,\n type: 'secondary',\n onClick: onCancel,\n label: cancelLabel,\n disabled: cancelDisabled\n }}\n />\n ) : null}\n {onConfirm && confirmLabel ? (\n <ButtonLink\n {...{\n className: style.footerConfirmButton,\n type: 'primary',\n onClick: onConfirm,\n label: confirmLabel,\n disabled: confirmDisabled,\n ...(iconName\n ? {\n icon: {\n position: 'left',\n faIcon: {\n name: iconName,\n color: '#FFFFFF',\n size: 16\n }\n }\n }\n : {})\n }}\n />\n ) : null}\n </div>\n {text ? (\n <div\n className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n >\n {text}\n </div>\n ) : null}\n </div>\n );\n }, [footer]);\n\n if (!isOpen || !title || !children) return null;\n\n function handleOnClose(e) {\n e?.stopPropagation();\n onClose();\n }\n\n return (\n <div className={style.modalWrapper}>\n <div className={style.modal}>\n <header className={style.header}>\n {headerIcon?.name ? (\n <div className={style.headerIcon}>\n <Icon\n iconName={headerIcon.name}\n iconColor={headerIcon.color}\n backgroundColor={headerIcon.backgroundColor}\n size={{faSize: 20, wrapperSize: 48}}\n />\n </div>\n ) : null}\n <div className={style.headerContent}>\n <div className={style.headerTitle}>{title}</div>\n {description ? <div className={style.headerDescription}>{description}</div> : null}\n </div>\n <div className={style.headerCloseIcon} onClick={handleOnClose}>\n <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n </div>\n </header>\n <div className={style.body}>{children}</div>\n <Footer />\n </div>\n </div>\n );\n};\n\nBaseModal.propTypes = {\n title: PropTypes.string,\n headerIcon: PropTypes.shape({\n name: PropTypes.string,\n color: PropTypes.string,\n backgroundColor: PropTypes.string\n }),\n description: PropTypes.string,\n children: PropTypes.node,\n isOpen: PropTypes.bool,\n footer: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n text: PropTypes.string,\n isError: PropTypes.boolean,\n cancelButton: PropTypes.shape({\n label: PropTypes.string,\n onCancel: PropTypes.func,\n disabled: PropTypes.bool\n }),\n confirmButton: PropTypes.shape({\n label: PropTypes.string,\n onConfirm: PropTypes.func,\n iconName: PropTypes.string,\n disabled: PropTypes.bool\n })\n })\n ]),\n onClose: PropTypes.func\n};\n\nexport default BaseModal;\n"],"mappings":"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"}
@@ -0,0 +1,125 @@
1
+ @value colors: "../../variables/colors.css";
2
+ @value breakpoints: "../../variables/breakpoints.css";
3
+ @value tablet from breakpoints;
4
+ @value mobile from breakpoints;
5
+ @value white from colors;
6
+ @value lightDark from colors;
7
+ @value dark from colors;
8
+ @value light from colors;
9
+ @value xtraLightGrey from colors;
10
+ @value cm_grey_150 from colors;
11
+
12
+ .modalWrapper {
13
+ position: fixed;
14
+ z-index: 1000;
15
+ bottom: 0;
16
+ right: 0;
17
+ height: 100vh;
18
+ width: 100vw;
19
+ display: flex;
20
+ font-family: "Gilroy";
21
+ justify-content: center;
22
+ align-items: center;
23
+ background-color: lightDark;
24
+ }
25
+
26
+ .modal {
27
+ max-width: 660px;
28
+ min-width: 450px;
29
+ min-height: 165px;
30
+ overflow: hidden;
31
+ border-radius: 16px;
32
+ background-color: white;
33
+ }
34
+
35
+ .header {
36
+ padding: 24px;
37
+ display: flex;
38
+ position: relative;
39
+ }
40
+
41
+ .headerIcon {
42
+ border-radius: 12px;
43
+ overflow: hidden;
44
+ margin-right: 16px;
45
+ }
46
+
47
+ .headerContent {
48
+ flex: 1;
49
+ }
50
+
51
+ .headerTitle {
52
+ font-size: 18px;
53
+ font-weight: 600;
54
+ line-height: 24px;
55
+ }
56
+
57
+ .headerDescription {
58
+ font-size: 14px;
59
+ font-weight: 500;
60
+ line-height: 20px;
61
+ }
62
+
63
+ .headerCloseIcon {
64
+ position: absolute;
65
+ top: 12px;
66
+ right: 12px;
67
+ cursor: pointer;
68
+ }
69
+
70
+ .body {
71
+ background-color: xtraLightGrey;
72
+ padding: 32px 32px 16px 32px;
73
+ min-height: 100px;
74
+ border-top: 1px solid cm_grey_150;
75
+ border-bottom: 1px solid cm_grey_150;
76
+ }
77
+
78
+ .footer {
79
+ padding: 24px;
80
+ display: flex;
81
+ flex-direction: row-reverse;
82
+ justify-content: space-between;
83
+ align-items: center;
84
+ }
85
+
86
+ .footerDescriptionError {
87
+ color: #991100;
88
+ }
89
+
90
+ .footerCTAWrapper {
91
+ display: flex;
92
+ gap: 8px;
93
+ }
94
+
95
+ .footerCancelButton {
96
+ width: 94px;
97
+ }
98
+
99
+ .footerConfirmButton {
100
+ width: 121px;
101
+ }
102
+
103
+ @media mobile {
104
+ .modal {
105
+ min-width: unset;
106
+ flex: 1;
107
+ margin: 0 16px;
108
+ }
109
+
110
+ .footerCTAWrapper,
111
+ .footer {
112
+ flex-direction: column-reverse;
113
+ }
114
+
115
+ .footerCTAWrapper,
116
+ .footerCancelButton,
117
+ .footerConfirmButton,
118
+ .footerDescription {
119
+ width: 100%;
120
+ }
121
+
122
+ .footerDescription {
123
+ margin-bottom: 16px;
124
+ }
125
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,KAAK,EAAoB,MAAM,SAAS,CAAC;AAgCjD,QAAA,MAAM,eAAe;YAAW,KAAK;;;;;;CAepC,CAAC;AAIF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,KAAK,EAAoB,MAAM,SAAS,CAAC;AA8BjD,QAAA,MAAM,eAAe;YAAW,KAAK;;;;;;CAepC,CAAC;AAIF,eAAe,eAAe,CAAC"}
@@ -1,11 +1,14 @@
1
1
  import React from 'react';
2
2
  import ProgressBar from '../progress-bar';
3
3
  import StatusItem from '../../atom/status-item';
4
+ import { COLORS } from '../../variables/colors';
4
5
  import style from './style.css';
5
6
  import { propTypes } from './types';
6
- const cm_negative_100 = '#ed3436';
7
- const cm_primary_blue = '#0061FF';
8
- const cm_positive_100 = '#35CC7F';
7
+ const {
8
+ negative: cm_negative_100,
9
+ cm_primary_blue,
10
+ positive: cm_positive_100
11
+ } = COLORS;
9
12
  const STATUS = {
10
13
  inProgress: 'inProgress',
11
14
  fail: 'fail'
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","ProgressBar","StatusItem","style","propTypes","cm_negative_100","cm_primary_blue","cm_positive_100","STATUS","inProgress","fail","renderStatusIcon","status","progress","progressText","statusItemWrapper","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","backgroundColor","borderRadius"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst cm_negative_100 = '#ed3436';\nconst cm_primary_blue = '#0061FF';\nconst cm_positive_100 = '#35CC7F';\n\nconst STATUS = {\n inProgress: 'inProgress',\n fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n if (status === STATUS.inProgress)\n return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n return (\n <div className={style.statusItemWrapper}>\n <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n </div>\n );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n switch (status) {\n case STATUS.fail:\n return cm_negative_100;\n case STATUS.inProgress:\n return cm_primary_blue;\n default:\n return cm_positive_100;\n }\n};\n\nconst BulkProgressBar = (props: Props) => {\n const {'data-name': dataName, status, progress} = props;\n\n return (\n <div className={style.container} data-name={dataName}>\n <ProgressBar\n className={style.progressBar}\n value={progress}\n max={100}\n steps={0}\n style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n />\n {renderStatusIcon(status, progress)}\n </div>\n );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,SAAeC,SAAf,QAAuC,SAAvC;AAEA,MAAMC,eAAe,GAAG,SAAxB;AACA,MAAMC,eAAe,GAAG,SAAxB;AACA,MAAMC,eAAe,GAAG,SAAxB;AAEA,MAAMC,MAAM,GAAG;EACbC,UAAU,EAAE,YADC;EAEbC,IAAI,EAAE;AAFO,CAAf;;AAKA,MAAMC,gBAAgB,GAAG,CAACC,MAAD,EAAiBC,QAAjB,KAAsC;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAtB,EACE,oBAAO;IAAK,IAAI,EAAC,QAAV;IAAmB,SAAS,EAAEN,KAAK,CAACW;EAApC,GAAoD,GAAED,QAAS,IAA/D,CAAP;EACF,oBACE;IAAK,SAAS,EAAEV,KAAK,CAACY;EAAtB,gBACE,oBAAC,UAAD;IAAY,IAAI,EAAEH,MAAM,KAAKJ,MAAM,CAACE,IAAlB,GAAyB,SAAzB,GAAqC;EAAvD,EADF,CADF;AAKD,CARD;;AAUA,MAAMM,uBAAuB,GAAIJ,MAAD,IAAoB;EAClD,QAAQA,MAAR;IACE,KAAKJ,MAAM,CAACE,IAAZ;MACE,OAAOL,eAAP;;IACF,KAAKG,MAAM,CAACC,UAAZ;MACE,OAAOH,eAAP;;IACF;MACE,OAAOC,eAAP;EANJ;AAQD,CATD;;AAWA,MAAMU,eAAe,GAAIC,KAAD,IAAkB;EACxC,MAAM;IAAC,aAAaC,QAAd;IAAwBP,MAAxB;IAAgCC;EAAhC,IAA4CK,KAAlD;EAEA,oBACE;IAAK,SAAS,EAAEf,KAAK,CAACiB,SAAtB;IAAiC,aAAWD;EAA5C,gBACE,oBAAC,WAAD;IACE,SAAS,EAAEhB,KAAK,CAACkB,WADnB;IAEE,KAAK,EAAER,QAFT;IAGE,GAAG,EAAE,GAHP;IAIE,KAAK,EAAE,CAJT;IAKE,KAAK,EAAE;MAACS,eAAe,EAAEN,uBAAuB,CAACJ,MAAD,CAAzC;MAAmDW,YAAY,EAAE;IAAjE;EALT,EADF,EAQGZ,gBAAgB,CAACC,MAAD,EAASC,QAAT,CARnB,CADF;AAYD,CAfD;;AAiBAI,eAAe,CAACb,SAAhB,2CAA4BA,SAA5B;AAEA,eAAea,eAAf"}
1
+ {"version":3,"file":"index.js","names":["React","ProgressBar","StatusItem","COLORS","style","propTypes","negative","cm_negative_100","cm_primary_blue","positive","cm_positive_100","STATUS","inProgress","fail","renderStatusIcon","status","progress","progressText","statusItemWrapper","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","backgroundColor","borderRadius"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst {negative: cm_negative_100, cm_primary_blue, positive: cm_positive_100} = COLORS;\n\nconst STATUS = {\n inProgress: 'inProgress',\n fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n if (status === STATUS.inProgress)\n return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n return (\n <div className={style.statusItemWrapper}>\n <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n </div>\n );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n switch (status) {\n case STATUS.fail:\n return cm_negative_100;\n case STATUS.inProgress:\n return cm_primary_blue;\n default:\n return cm_positive_100;\n }\n};\n\nconst BulkProgressBar = (props: Props) => {\n const {'data-name': dataName, status, progress} = props;\n\n return (\n <div className={style.container} data-name={dataName}>\n <ProgressBar\n className={style.progressBar}\n value={progress}\n max={100}\n steps={0}\n style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n />\n {renderStatusIcon(status, progress)}\n </div>\n );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,SAAQC,MAAR,QAAqB,wBAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AACA,SAAeC,SAAf,QAAuC,SAAvC;AAEA,MAAM;EAACC,QAAQ,EAAEC,eAAX;EAA4BC,eAA5B;EAA6CC,QAAQ,EAAEC;AAAvD,IAA0EP,MAAhF;AAEA,MAAMQ,MAAM,GAAG;EACbC,UAAU,EAAE,YADC;EAEbC,IAAI,EAAE;AAFO,CAAf;;AAKA,MAAMC,gBAAgB,GAAG,CAACC,MAAD,EAAiBC,QAAjB,KAAsC;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAtB,EACE,oBAAO;IAAK,IAAI,EAAC,QAAV;IAAmB,SAAS,EAAER,KAAK,CAACa;EAApC,GAAoD,GAAED,QAAS,IAA/D,CAAP;EACF,oBACE;IAAK,SAAS,EAAEZ,KAAK,CAACc;EAAtB,gBACE,oBAAC,UAAD;IAAY,IAAI,EAAEH,MAAM,KAAKJ,MAAM,CAACE,IAAlB,GAAyB,SAAzB,GAAqC;EAAvD,EADF,CADF;AAKD,CARD;;AAUA,MAAMM,uBAAuB,GAAIJ,MAAD,IAAoB;EAClD,QAAQA,MAAR;IACE,KAAKJ,MAAM,CAACE,IAAZ;MACE,OAAON,eAAP;;IACF,KAAKI,MAAM,CAACC,UAAZ;MACE,OAAOJ,eAAP;;IACF;MACE,OAAOE,eAAP;EANJ;AAQD,CATD;;AAWA,MAAMU,eAAe,GAAIC,KAAD,IAAkB;EACxC,MAAM;IAAC,aAAaC,QAAd;IAAwBP,MAAxB;IAAgCC;EAAhC,IAA4CK,KAAlD;EAEA,oBACE;IAAK,SAAS,EAAEjB,KAAK,CAACmB,SAAtB;IAAiC,aAAWD;EAA5C,gBACE,oBAAC,WAAD;IACE,SAAS,EAAElB,KAAK,CAACoB,WADnB;IAEE,KAAK,EAAER,QAFT;IAGE,GAAG,EAAE,GAHP;IAIE,KAAK,EAAE,CAJT;IAKE,KAAK,EAAE;MAACS,eAAe,EAAEN,uBAAuB,CAACJ,MAAD,CAAzC;MAAmDW,YAAY,EAAE;IAAjE;EALT,EADF,EAQGZ,gBAAgB,CAACC,MAAD,EAASC,QAAT,CARnB,CADF;AAYD,CAfD;;AAiBAI,eAAe,CAACf,SAAhB,2CAA4BA,SAA5B;AAEA,eAAee,eAAf"}
@@ -80,6 +80,7 @@ declare const propTypes: {
80
80
  buttonLink: PropTypes.Requireable<PropTypes.InferProps<{
81
81
  type: PropTypes.Requireable<string>;
82
82
  label: PropTypes.Requireable<string>;
83
+ content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
83
84
  'aria-label': PropTypes.Requireable<string>;
84
85
  'data-name': PropTypes.Requireable<string>;
85
86
  'data-testid': PropTypes.Requireable<string>;
@@ -211,6 +212,7 @@ declare const propTypes: {
211
212
  componentType: PropTypes.Requireable<string>;
212
213
  type: PropTypes.Requireable<string>;
213
214
  label: PropTypes.Requireable<string>;
215
+ content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
214
216
  'aria-label': PropTypes.Requireable<string>;
215
217
  'data-name': PropTypes.Requireable<string>;
216
218
  'data-testid': PropTypes.Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -65,6 +65,7 @@ declare const ActionableExpandableTable: {
65
65
  componentType: import("prop-types").Requireable<string>;
66
66
  type: import("prop-types").Requireable<string>;
67
67
  label: import("prop-types").Requireable<string>;
68
+ content: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
68
69
  'aria-label': import("prop-types").Requireable<string>;
69
70
  'data-name': import("prop-types").Requireable<string>;
70
71
  'data-testid': import("prop-types").Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAqCnF,QAAA,MAAM,yBAAyB;YAAW,KAAK,iBAAiB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoL/E,CAAC;AASF,eAAe,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAOjE,OAAO,EAA2C,KAAK,EAAY,MAAM,SAAS,CAAC;AAqCnF,QAAA,MAAM,yBAAyB;YAAW,KAAK,iBAAiB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoL/E,CAAC;AASF,eAAe,yBAAyB,CAAC"}
@@ -42,6 +42,7 @@ export declare const propTypes: {
42
42
  componentType: PropTypes.Requireable<string>;
43
43
  type: PropTypes.Requireable<string>;
44
44
  label: PropTypes.Requireable<string>;
45
+ content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
45
46
  'aria-label': PropTypes.Requireable<string>;
46
47
  'data-name': PropTypes.Requireable<string>;
47
48
  'data-testid': PropTypes.Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC;AAEF,oBAAY,KAAK,GACb,MAAM,GACN,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC;CACzB,CAAC,GACF,CAAC,oBAAoB,GAAG;IACtB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,gBAAgB,GAAG;IAClB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,GACF,CAAC,KAAK,GAAG;IACP,aAAa,EAAE,yBAAyB,CAAC;CAC1C,CAAC,CAAC;AAEP,oBAAY,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AACrC,oBAAY,GAAG,GAAG;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,oBAAY,OAAO,GAAG,MAAM,EAAE,CAAC;AAC/B,oBAAY,IAAI,GAAG,GAAG,EAAE,CAAC;AAEzB,oBAAY,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/expandible-actionable-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,OAAO,EAAC,0BAA0B,EAAC,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAC,KAAK,IAAI,gBAAgB,EAAC,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAC,KAAK,IAAI,oBAAoB,EAAC,MAAM,4BAA4B,CAAC;AA0BzE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBrB,CAAC;AAEF,oBAAY,KAAK,GACb,MAAM,GACN,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,QAAQ,CAAC;CACzB,CAAC,GACF,CAAC,oBAAoB,GAAG;IACtB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,eAAe,GAAG;IACjB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC,GACF,CAAC,0BAA0B,GAAG;IAC5B,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEP,oBAAY,SAAS,GACjB,CAAC,gBAAgB,GAAG;IAClB,aAAa,EAAE,cAAc,CAAC;CAC/B,CAAC,GACF,CAAC,KAAK,GAAG;IACP,aAAa,EAAE,yBAAyB,CAAC;CAC1C,CAAC,CAAC;AAEP,oBAAY,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC;AACrC,oBAAY,GAAG,GAAG;IAChB,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,oBAAY,OAAO,GAAG,MAAM,EAAE,CAAC;AAC/B,oBAAY,IAAI,GAAG,GAAG,EAAE,CAAC;AAEzB,oBAAY,KAAK,GAAG;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,oBAAY,WAAW,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,CAAC"}
@@ -0,0 +1,23 @@
1
+ export default LearnerSkillCard;
2
+ declare function LearnerSkillCard(props: any, context: any): JSX.Element;
3
+ declare namespace LearnerSkillCard {
4
+ namespace contextTypes {
5
+ const translate: PropTypes.Requireable<(...args: any[]) => any>;
6
+ }
7
+ const propTypes: {
8
+ 'aria-label': PropTypes.Requireable<string>;
9
+ skillTitle: PropTypes.Requireable<string>;
10
+ skillAriaLabel: PropTypes.Requireable<string>;
11
+ focus: PropTypes.Requireable<boolean>;
12
+ metrics: PropTypes.Requireable<PropTypes.InferProps<{
13
+ skillCourses: PropTypes.Requireable<number>;
14
+ skillQuestions: PropTypes.Requireable<number>;
15
+ completedCourses: PropTypes.Requireable<number>;
16
+ }>>;
17
+ review: PropTypes.Requireable<boolean>;
18
+ onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
19
+ onExploreClick: PropTypes.Requireable<(...args: any[]) => any>;
20
+ };
21
+ }
22
+ import PropTypes from "prop-types";
23
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEA2JC"}
@@ -0,0 +1,164 @@
1
+ import _getOr from "lodash/fp/getOr";
2
+ import _get from "lodash/fp/get";
3
+ import React, { useCallback, useState } from 'react';
4
+ import { convert } from 'css-color-function';
5
+ import PropTypes from 'prop-types';
6
+ import Icon from '../../atom/icon';
7
+ import ButtonLink from '../../atom/button-link';
8
+ import Provider from '../../atom/provider';
9
+ import style from './style.css';
10
+
11
+ const LearnerSkillCard = (props, context) => {
12
+ const {
13
+ 'aria-label': ariaLabel,
14
+ skillTitle,
15
+ skillAriaLabel,
16
+ focus = false,
17
+ metrics,
18
+ review = false,
19
+ onReviewClick,
20
+ onExploreClick
21
+ } = props;
22
+ const {
23
+ skillCourses,
24
+ skillQuestions,
25
+ completedCourses = 0
26
+ } = metrics;
27
+ const {
28
+ skin,
29
+ translate
30
+ } = context;
31
+ const [hovered, setHovered] = useState(false);
32
+
33
+ const primarySkinColor = _getOr('#0061FF', 'common.primary', skin);
34
+
35
+ const reviewLocale = translate('Review');
36
+ const exploreLocale = translate('Explore');
37
+ const coursesLocale = translate('courses');
38
+ const questionsLocale = translate('questions');
39
+ const skillFocusLocale = translate('skill_focus');
40
+ const coursesCompletedLocale = translate('courses_completed');
41
+ const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
42
+ const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
43
+ const buttonReviewProps = {
44
+ customStyle: {
45
+ backgroundColor: '#FFF',
46
+ transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
47
+ },
48
+ disabled: !review,
49
+ onClick: () => onReviewClick(skillTitle),
50
+ 'aria-label': `${skillTitle}, ${reviewLocale}`,
51
+ label: reviewLocale,
52
+ 'data-name': 'learner-skill-card-review-button'
53
+ };
54
+ const buttonExploreProps = {
55
+ customStyle: {
56
+ backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
57
+ color: hovered ? '#FFFFFF' : primarySkinColor,
58
+ transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'
59
+ },
60
+ onClick: () => onExploreClick(skillTitle),
61
+ 'aria-label': `${skillTitle}, ${exploreLocale}`,
62
+ label: exploreLocale,
63
+ 'data-name': 'learner-skill-card-explore-button',
64
+ icon: {
65
+ position: 'left',
66
+ faIcon: {
67
+ name: 'compass',
68
+ backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),
69
+ color: hovered ? '#FFFFFF' : primarySkinColor,
70
+ size: 16
71
+ }
72
+ }
73
+ };
74
+ const completedPercentage = skillCourses && Number.parseInt(completedCourses / skillCourses * 100);
75
+ const ProgressBar = useCallback(() => {
76
+ if (!skillCourses) return null;
77
+ const progressBarColor = '#3EC483';
78
+ const inlineProgressValueStyle = {
79
+ backgroundColor: progressBarColor,
80
+ width: `${completedPercentage}%`
81
+ };
82
+ return /*#__PURE__*/React.createElement("div", {
83
+ className: style.progressWrapper
84
+ }, /*#__PURE__*/React.createElement("div", {
85
+ "data-name": "progress",
86
+ className: style.progress,
87
+ style: inlineProgressValueStyle,
88
+ role: "progressbar",
89
+ "aria-label": _get('progression', ariaLabel)
90
+ }));
91
+ }, [completedPercentage, ariaLabel, skillCourses]);
92
+ return /*#__PURE__*/React.createElement("div", {
93
+ className: style.learnerSkillCardWrapper,
94
+ "data-name": "learner-skill-card-wrapper",
95
+ "aria-label": ariaLabel
96
+ }, skillCourses || skillQuestions ? /*#__PURE__*/React.createElement("div", {
97
+ className: style.skillCoursesAndQuestionsWrapper
98
+ }, skillCourses ? /*#__PURE__*/React.createElement("div", {
99
+ className: style.skillInformation,
100
+ "data-name": "skill-courses"
101
+ }, /*#__PURE__*/React.createElement("span", {
102
+ className: style.skillInformationNumber
103
+ }, skillCourses), " ", coursesLocale) : null, skillQuestions ? /*#__PURE__*/React.createElement("div", {
104
+ className: style.skillInformation,
105
+ "data-name": "skill-questions"
106
+ }, /*#__PURE__*/React.createElement("span", {
107
+ className: style.skillInformationNumber
108
+ }, skillQuestions), "\xA0", questionsLocale) : null) : null, /*#__PURE__*/React.createElement("div", {
109
+ className: style.skillTitleWrapper
110
+ }, /*#__PURE__*/React.createElement("div", {
111
+ "data-name": "skill-title",
112
+ className: style.skillTitle,
113
+ "aria-label": skillAriaLabel || skillTitle
114
+ }, skillTitle), focus ? /*#__PURE__*/React.createElement("div", {
115
+ className: style.skillFocusBadge
116
+ }, /*#__PURE__*/React.createElement(Icon, {
117
+ iconName: "bullseye-arrow",
118
+ backgroundColor: "#DDD1FF",
119
+ size: {
120
+ faSize: 10,
121
+ wrapperSize: 16
122
+ }
123
+ }), skillFocusLocale) : null), /*#__PURE__*/React.createElement(ProgressBar, null), /*#__PURE__*/React.createElement("div", {
124
+ className: style.progressInformations
125
+ }, skillCourses && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
126
+ className: style.progressInformation,
127
+ "data-name": "skill-completed-courses"
128
+ }, /*#__PURE__*/React.createElement("span", {
129
+ className: style.progressInformationNumber
130
+ }, completedCourses), coursesCompletedLocale), /*#__PURE__*/React.createElement("div", {
131
+ className: style.progressInformation,
132
+ "data-name": "completed-percentage"
133
+ }, /*#__PURE__*/React.createElement("span", {
134
+ className: style.progressInformationNumber
135
+ }, completedPercentage, "%")))), /*#__PURE__*/React.createElement("div", {
136
+ className: style.ctaWrapper,
137
+ "data-name": "cta-wrapper"
138
+ }, /*#__PURE__*/React.createElement(ButtonLink, buttonReviewProps), /*#__PURE__*/React.createElement("div", {
139
+ className: style.buttonWrapper,
140
+ onMouseOver: handleMouseOver,
141
+ onMouseLeave: handleMouseLeave,
142
+ "data-name": "button-explore-wrapper"
143
+ }, /*#__PURE__*/React.createElement(ButtonLink, buttonExploreProps))));
144
+ };
145
+
146
+ LearnerSkillCard.contextTypes = {
147
+ translate: Provider.childContextTypes.translate
148
+ };
149
+ LearnerSkillCard.propTypes = process.env.NODE_ENV !== "production" ? {
150
+ 'aria-label': PropTypes.string,
151
+ skillTitle: PropTypes.string,
152
+ skillAriaLabel: PropTypes.string,
153
+ focus: PropTypes.bool,
154
+ metrics: PropTypes.shape({
155
+ skillCourses: PropTypes.number,
156
+ skillQuestions: PropTypes.number,
157
+ completedCourses: PropTypes.number
158
+ }),
159
+ review: PropTypes.bool,
160
+ onReviewClick: PropTypes.func,
161
+ onExploreClick: PropTypes.func
162
+ } : {};
163
+ export default LearnerSkillCard;
164
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useState","convert","PropTypes","Icon","ButtonLink","Provider","style","LearnerSkillCard","props","context","ariaLabel","skillTitle","skillAriaLabel","focus","metrics","review","onReviewClick","onExploreClick","skillCourses","skillQuestions","completedCourses","skin","translate","hovered","setHovered","primarySkinColor","reviewLocale","exploreLocale","coursesLocale","questionsLocale","skillFocusLocale","coursesCompletedLocale","handleMouseOver","handleMouseLeave","buttonReviewProps","customStyle","backgroundColor","transition","disabled","onClick","label","buttonExploreProps","color","icon","position","faIcon","name","size","completedPercentage","Number","parseInt","ProgressBar","progressBarColor","inlineProgressValueStyle","width","progressWrapper","progress","learnerSkillCardWrapper","skillCoursesAndQuestionsWrapper","skillInformation","skillInformationNumber","skillTitleWrapper","skillFocusBadge","faSize","wrapperSize","progressInformations","progressInformation","progressInformationNumber","ctaWrapper","buttonWrapper","contextTypes","childContextTypes","propTypes","string","bool","shape","number","func"],"sources":["../../../src/molecule/learner-skill-card/index.js"],"sourcesContent":["import React, {useCallback, useState} from 'react';\nimport {convert} from 'css-color-function';\nimport {get, getOr} from 'lodash/fp';\nimport PropTypes from 'prop-types';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport Provider from '../../atom/provider';\nimport style from './style.css';\n\nconst LearnerSkillCard = (props, context) => {\n const {\n 'aria-label': ariaLabel,\n skillTitle,\n skillAriaLabel,\n focus = false,\n metrics,\n review = false,\n onReviewClick,\n onExploreClick\n } = props;\n const {skillCourses, skillQuestions, completedCourses = 0} = metrics;\n const {skin, translate} = context;\n const [hovered, setHovered] = useState(false);\n const primarySkinColor = getOr('#0061FF', 'common.primary', skin);\n\n const reviewLocale = translate('Review');\n const exploreLocale = translate('Explore');\n const coursesLocale = translate('courses');\n const questionsLocale = translate('questions');\n const skillFocusLocale = translate('skill_focus');\n const coursesCompletedLocale = translate('courses_completed');\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const buttonReviewProps = {\n customStyle: {\n backgroundColor: '#FFF',\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n disabled: !review,\n onClick: () => onReviewClick(skillTitle),\n 'aria-label': `${skillTitle}, ${reviewLocale}`,\n label: reviewLocale,\n 'data-name': 'learner-skill-card-review-button'\n };\n\n const buttonExploreProps = {\n customStyle: {\n backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n transition: 'background-color 0.15s ease-in-out, color 0.15s ease-in-out'\n },\n onClick: () => onExploreClick(skillTitle),\n 'aria-label': `${skillTitle}, ${exploreLocale}`,\n label: exploreLocale,\n 'data-name': 'learner-skill-card-explore-button',\n icon: {\n position: 'left',\n faIcon: {\n name: 'compass',\n backgroundColor: hovered ? primarySkinColor : convert(`color(${primarySkinColor} a(0.07))`),\n color: hovered ? '#FFFFFF' : primarySkinColor,\n size: 16\n }\n }\n };\n\n const completedPercentage =\n skillCourses && Number.parseInt((completedCourses / skillCourses) * 100);\n\n const ProgressBar = useCallback(() => {\n if (!skillCourses) return null;\n\n const progressBarColor = '#3EC483';\n const inlineProgressValueStyle = {\n backgroundColor: progressBarColor,\n width: `${completedPercentage}%`\n };\n\n return (\n <div className={style.progressWrapper}>\n <div\n data-name=\"progress\"\n className={style.progress}\n style={inlineProgressValueStyle}\n role=\"progressbar\"\n aria-label={get('progression', ariaLabel)}\n />\n </div>\n );\n }, [completedPercentage, ariaLabel, skillCourses]);\n\n return (\n <div\n className={style.learnerSkillCardWrapper}\n data-name=\"learner-skill-card-wrapper\"\n aria-label={ariaLabel}\n >\n {skillCourses || skillQuestions ? (\n <div className={style.skillCoursesAndQuestionsWrapper}>\n {skillCourses ? (\n <div className={style.skillInformation} data-name=\"skill-courses\">\n <span className={style.skillInformationNumber}>{skillCourses}</span> {coursesLocale}\n </div>\n ) : null}\n {skillQuestions ? (\n <div className={style.skillInformation} data-name=\"skill-questions\">\n <span className={style.skillInformationNumber}>{skillQuestions}</span>\n &nbsp;{questionsLocale}\n </div>\n ) : null}\n </div>\n ) : null}\n <div className={style.skillTitleWrapper}>\n <div\n data-name=\"skill-title\"\n className={style.skillTitle}\n aria-label={skillAriaLabel || skillTitle}\n >\n {skillTitle}\n </div>\n {focus ? (\n <div className={style.skillFocusBadge}>\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 10,\n wrapperSize: 16\n }}\n />\n {skillFocusLocale}\n </div>\n ) : null}\n </div>\n <ProgressBar />\n <div className={style.progressInformations}>\n {skillCourses && (\n <>\n <div className={style.progressInformation} data-name=\"skill-completed-courses\">\n <span className={style.progressInformationNumber}>{completedCourses}</span>\n {coursesCompletedLocale}\n </div>\n <div className={style.progressInformation} data-name=\"completed-percentage\">\n <span className={style.progressInformationNumber}>{completedPercentage}%</span>\n </div>\n </>\n )}\n </div>\n <div className={style.ctaWrapper} data-name=\"cta-wrapper\">\n <ButtonLink {...buttonReviewProps} />\n <div\n className={style.buttonWrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n data-name=\"button-explore-wrapper\"\n >\n <ButtonLink {...buttonExploreProps} />\n </div>\n </div>\n </div>\n );\n};\n\nLearnerSkillCard.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nLearnerSkillCard.propTypes = {\n 'aria-label': PropTypes.string,\n skillTitle: PropTypes.string,\n skillAriaLabel: PropTypes.string,\n focus: PropTypes.bool,\n metrics: PropTypes.shape({\n skillCourses: PropTypes.number,\n skillQuestions: PropTypes.number,\n completedCourses: PropTypes.number\n }),\n review: PropTypes.bool,\n onReviewClick: PropTypes.func,\n onExploreClick: PropTypes.func\n};\n\nexport default LearnerSkillCard;\n"],"mappings":"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"}