@coorpacademy/components 11.32.19 → 11.32.20-alpha.32

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 (241) hide show
  1. package/es/atom/button-link/index.d.ts +2 -0
  2. package/es/atom/button-link/index.d.ts.map +1 -1
  3. package/es/atom/button-link/index.js +22 -8
  4. package/es/atom/button-link/index.js.map +1 -1
  5. package/es/atom/button-link/types.d.ts +4 -0
  6. package/es/atom/button-link/types.d.ts.map +1 -1
  7. package/es/atom/button-link/types.js +2 -0
  8. package/es/atom/button-link/types.js.map +1 -1
  9. package/es/atom/circular-progress-bar/index.d.ts +15 -0
  10. package/es/atom/circular-progress-bar/index.d.ts.map +1 -0
  11. package/es/atom/circular-progress-bar/index.js +86 -0
  12. package/es/atom/circular-progress-bar/index.js.map +1 -0
  13. package/es/atom/circular-progress-bar/style.css +51 -0
  14. package/es/atom/circular-progress-bar/types.d.ts +18 -0
  15. package/es/atom/circular-progress-bar/types.d.ts.map +1 -0
  16. package/es/atom/circular-progress-bar/types.js +10 -0
  17. package/es/atom/circular-progress-bar/types.js.map +1 -0
  18. package/es/atom/tag/index.d.ts +10 -1
  19. package/es/atom/tag/index.d.ts.map +1 -1
  20. package/es/atom/tag/index.js +19 -11
  21. package/es/atom/tag/index.js.map +1 -1
  22. package/es/atom/tag/style.css +38 -19
  23. package/es/molecule/base-modal/index.d.ts.map +1 -1
  24. package/es/molecule/base-modal/index.js +6 -10
  25. package/es/molecule/base-modal/index.js.map +1 -1
  26. package/es/molecule/cm-popin/types.d.ts +8 -0
  27. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  28. package/es/molecule/draggable-list/index.d.ts +12 -0
  29. package/es/molecule/draggable-list/index.d.ts.map +1 -1
  30. package/es/molecule/draggable-list/index.js +4 -2
  31. package/es/molecule/draggable-list/index.js.map +1 -1
  32. package/es/molecule/expandible-actionable-table/index.d.ts +2 -0
  33. package/es/molecule/expandible-actionable-table/index.d.ts.map +1 -1
  34. package/es/molecule/expandible-actionable-table/types.d.ts +2 -0
  35. package/es/molecule/expandible-actionable-table/types.d.ts.map +1 -1
  36. package/es/molecule/learner-skill-card/index.d.ts.map +1 -1
  37. package/es/molecule/learner-skill-card/index.js +7 -10
  38. package/es/molecule/learner-skill-card/index.js.map +1 -1
  39. package/es/molecule/learning-priority-card/index.d.ts +40 -0
  40. package/es/molecule/learning-priority-card/index.d.ts.map +1 -0
  41. package/es/molecule/learning-priority-card/index.js +77 -0
  42. package/es/molecule/learning-priority-card/index.js.map +1 -0
  43. package/es/molecule/learning-priority-card/style.css +34 -0
  44. package/es/molecule/learning-priority-card/types.d.ts +18 -0
  45. package/es/molecule/learning-priority-card/types.d.ts.map +1 -0
  46. package/es/molecule/learning-priority-card/types.js +10 -0
  47. package/es/molecule/learning-priority-card/types.js.map +1 -0
  48. package/es/molecule/learning-priority-modal/index.d.ts +33 -0
  49. package/es/molecule/learning-priority-modal/index.d.ts.map +1 -0
  50. package/es/molecule/learning-priority-modal/index.js +231 -0
  51. package/es/molecule/learning-priority-modal/index.js.map +1 -0
  52. package/es/molecule/learning-priority-modal/style.css +68 -0
  53. package/es/molecule/learning-priority-setup-item/index.d.ts +18 -0
  54. package/es/molecule/learning-priority-setup-item/index.d.ts.map +1 -0
  55. package/es/molecule/learning-priority-setup-item/index.js +69 -0
  56. package/es/molecule/learning-priority-setup-item/index.js.map +1 -0
  57. package/es/molecule/learning-priority-setup-item/style.css +47 -0
  58. package/es/molecule/skill-card/index.d.ts.map +1 -1
  59. package/es/molecule/skill-card/index.js +5 -8
  60. package/es/molecule/skill-card/index.js.map +1 -1
  61. package/es/organism/brand-learning-priorities/index.d.ts +170 -0
  62. package/es/organism/brand-learning-priorities/index.d.ts.map +1 -0
  63. package/es/organism/brand-learning-priorities/index.js +99 -0
  64. package/es/organism/brand-learning-priorities/index.js.map +1 -0
  65. package/es/organism/brand-learning-priorities/style.css +35 -0
  66. package/es/organism/list-item/index.d.ts +34 -2
  67. package/es/organism/list-item/index.d.ts.map +1 -1
  68. package/es/organism/list-item/index.js +58 -14
  69. package/es/organism/list-item/index.js.map +1 -1
  70. package/es/organism/list-item/style.css +21 -1
  71. package/es/organism/list-items/index.d.ts +8 -0
  72. package/es/organism/setup-header/index.d.ts +8 -0
  73. package/es/organism/wizard-contents/index.d.ts +6 -0
  74. package/es/template/app-player/loading/index.d.ts +8 -0
  75. package/es/template/app-player/player/index.d.ts +16 -0
  76. package/es/template/app-player/player/slides/index.d.ts +8 -0
  77. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  78. package/es/template/app-player/popin-correction/index.d.ts +8 -0
  79. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  80. package/es/template/app-player/popin-end/index.d.ts +8 -0
  81. package/es/template/app-review/index.d.ts +8 -0
  82. package/es/template/app-review/index.d.ts.map +1 -1
  83. package/es/template/app-review/player/prop-types.d.ts +8 -0
  84. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  85. package/es/template/app-review/prop-types.d.ts +8 -0
  86. package/es/template/app-review/prop-types.d.ts.map +1 -1
  87. package/es/template/back-office/brand-create/index.d.ts +8 -0
  88. package/es/template/back-office/brand-create/index.d.ts.map +1 -1
  89. package/es/template/back-office/brand-list/index.d.ts +8 -0
  90. package/es/template/back-office/brand-list/index.d.ts.map +1 -1
  91. package/es/template/back-office/brand-update/index.d.ts +171 -0
  92. package/es/template/back-office/brand-update/index.d.ts.map +1 -1
  93. package/es/template/back-office/brand-update/index.js +7 -0
  94. package/es/template/back-office/brand-update/index.js.map +1 -1
  95. package/es/template/back-office/dashboard-preview/index.d.ts +8 -0
  96. package/es/template/back-office/layout/index.d.ts +8 -0
  97. package/es/template/back-office/layout/index.d.ts.map +1 -1
  98. package/es/template/common/dashboard/index.d.ts +16 -0
  99. package/es/template/common/search-page/index.d.ts +8 -0
  100. package/es/template/external-course/index.d.ts +8 -0
  101. package/es/template/my-learning/index.d.ts.map +1 -1
  102. package/es/template/my-learning/index.js +10 -18
  103. package/es/template/my-learning/index.js.map +1 -1
  104. package/es/template/skill-detail/index.d.ts.map +1 -1
  105. package/es/template/skill-detail/index.js +4 -8
  106. package/es/template/skill-detail/index.js.map +1 -1
  107. package/lib/atom/button-link/index.d.ts +2 -0
  108. package/lib/atom/button-link/index.d.ts.map +1 -1
  109. package/lib/atom/button-link/index.js +21 -7
  110. package/lib/atom/button-link/index.js.map +1 -1
  111. package/lib/atom/button-link/types.d.ts +4 -0
  112. package/lib/atom/button-link/types.d.ts.map +1 -1
  113. package/lib/atom/button-link/types.js +2 -0
  114. package/lib/atom/button-link/types.js.map +1 -1
  115. package/lib/atom/circular-progress-bar/index.d.ts +15 -0
  116. package/lib/atom/circular-progress-bar/index.d.ts.map +1 -0
  117. package/lib/atom/circular-progress-bar/index.js +101 -0
  118. package/lib/atom/circular-progress-bar/index.js.map +1 -0
  119. package/lib/atom/circular-progress-bar/style.css +51 -0
  120. package/lib/atom/circular-progress-bar/types.d.ts +18 -0
  121. package/lib/atom/circular-progress-bar/types.d.ts.map +1 -0
  122. package/lib/atom/circular-progress-bar/types.js +19 -0
  123. package/lib/atom/circular-progress-bar/types.js.map +1 -0
  124. package/lib/atom/tag/index.d.ts +10 -1
  125. package/lib/atom/tag/index.d.ts.map +1 -1
  126. package/lib/atom/tag/index.js +20 -11
  127. package/lib/atom/tag/index.js.map +1 -1
  128. package/lib/atom/tag/style.css +38 -19
  129. package/lib/molecule/base-modal/index.d.ts.map +1 -1
  130. package/lib/molecule/base-modal/index.js +5 -9
  131. package/lib/molecule/base-modal/index.js.map +1 -1
  132. package/lib/molecule/cm-popin/types.d.ts +8 -0
  133. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  134. package/lib/molecule/draggable-list/index.d.ts +12 -0
  135. package/lib/molecule/draggable-list/index.d.ts.map +1 -1
  136. package/lib/molecule/draggable-list/index.js +5 -2
  137. package/lib/molecule/draggable-list/index.js.map +1 -1
  138. package/lib/molecule/expandible-actionable-table/index.d.ts +2 -0
  139. package/lib/molecule/expandible-actionable-table/index.d.ts.map +1 -1
  140. package/lib/molecule/expandible-actionable-table/types.d.ts +2 -0
  141. package/lib/molecule/expandible-actionable-table/types.d.ts.map +1 -1
  142. package/lib/molecule/learner-skill-card/index.d.ts.map +1 -1
  143. package/lib/molecule/learner-skill-card/index.js +6 -9
  144. package/lib/molecule/learner-skill-card/index.js.map +1 -1
  145. package/lib/molecule/learning-priority-card/index.d.ts +40 -0
  146. package/lib/molecule/learning-priority-card/index.d.ts.map +1 -0
  147. package/lib/molecule/learning-priority-card/index.js +95 -0
  148. package/lib/molecule/learning-priority-card/index.js.map +1 -0
  149. package/lib/molecule/learning-priority-card/style.css +34 -0
  150. package/lib/molecule/learning-priority-card/types.d.ts +18 -0
  151. package/lib/molecule/learning-priority-card/types.d.ts.map +1 -0
  152. package/lib/molecule/learning-priority-card/types.js +19 -0
  153. package/lib/molecule/learning-priority-card/types.js.map +1 -0
  154. package/lib/molecule/learning-priority-modal/index.d.ts +33 -0
  155. package/lib/molecule/learning-priority-modal/index.d.ts.map +1 -0
  156. package/lib/molecule/learning-priority-modal/index.js +254 -0
  157. package/lib/molecule/learning-priority-modal/index.js.map +1 -0
  158. package/lib/molecule/learning-priority-modal/style.css +68 -0
  159. package/lib/molecule/learning-priority-setup-item/index.d.ts +18 -0
  160. package/lib/molecule/learning-priority-setup-item/index.d.ts.map +1 -0
  161. package/lib/molecule/learning-priority-setup-item/index.js +86 -0
  162. package/lib/molecule/learning-priority-setup-item/index.js.map +1 -0
  163. package/lib/molecule/learning-priority-setup-item/style.css +47 -0
  164. package/lib/molecule/skill-card/index.d.ts.map +1 -1
  165. package/lib/molecule/skill-card/index.js +4 -7
  166. package/lib/molecule/skill-card/index.js.map +1 -1
  167. package/lib/organism/brand-learning-priorities/index.d.ts +170 -0
  168. package/lib/organism/brand-learning-priorities/index.d.ts.map +1 -0
  169. package/lib/organism/brand-learning-priorities/index.js +117 -0
  170. package/lib/organism/brand-learning-priorities/index.js.map +1 -0
  171. package/lib/organism/brand-learning-priorities/style.css +35 -0
  172. package/lib/organism/list-item/index.d.ts +34 -2
  173. package/lib/organism/list-item/index.d.ts.map +1 -1
  174. package/lib/organism/list-item/index.js +62 -16
  175. package/lib/organism/list-item/index.js.map +1 -1
  176. package/lib/organism/list-item/style.css +21 -1
  177. package/lib/organism/list-items/index.d.ts +8 -0
  178. package/lib/organism/setup-header/index.d.ts +8 -0
  179. package/lib/organism/wizard-contents/index.d.ts +6 -0
  180. package/lib/template/app-player/loading/index.d.ts +8 -0
  181. package/lib/template/app-player/player/index.d.ts +16 -0
  182. package/lib/template/app-player/player/slides/index.d.ts +8 -0
  183. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  184. package/lib/template/app-player/popin-correction/index.d.ts +8 -0
  185. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  186. package/lib/template/app-player/popin-end/index.d.ts +8 -0
  187. package/lib/template/app-review/index.d.ts +8 -0
  188. package/lib/template/app-review/index.d.ts.map +1 -1
  189. package/lib/template/app-review/player/prop-types.d.ts +8 -0
  190. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  191. package/lib/template/app-review/prop-types.d.ts +8 -0
  192. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  193. package/lib/template/back-office/brand-create/index.d.ts +8 -0
  194. package/lib/template/back-office/brand-create/index.d.ts.map +1 -1
  195. package/lib/template/back-office/brand-list/index.d.ts +8 -0
  196. package/lib/template/back-office/brand-list/index.d.ts.map +1 -1
  197. package/lib/template/back-office/brand-update/index.d.ts +171 -0
  198. package/lib/template/back-office/brand-update/index.d.ts.map +1 -1
  199. package/lib/template/back-office/brand-update/index.js +8 -0
  200. package/lib/template/back-office/brand-update/index.js.map +1 -1
  201. package/lib/template/back-office/dashboard-preview/index.d.ts +8 -0
  202. package/lib/template/back-office/layout/index.d.ts +8 -0
  203. package/lib/template/back-office/layout/index.d.ts.map +1 -1
  204. package/lib/template/common/dashboard/index.d.ts +16 -0
  205. package/lib/template/common/search-page/index.d.ts +8 -0
  206. package/lib/template/external-course/index.d.ts +8 -0
  207. package/lib/template/my-learning/index.d.ts.map +1 -1
  208. package/lib/template/my-learning/index.js +10 -18
  209. package/lib/template/my-learning/index.js.map +1 -1
  210. package/lib/template/skill-detail/index.d.ts.map +1 -1
  211. package/lib/template/skill-detail/index.js +4 -8
  212. package/lib/template/skill-detail/index.js.map +1 -1
  213. package/locales/bs/global.json +1 -0
  214. package/locales/cs/global.json +1 -0
  215. package/locales/de/global.json +1 -0
  216. package/locales/en/global.json +12 -0
  217. package/locales/es/global.json +1 -0
  218. package/locales/et/global.json +1 -0
  219. package/locales/fi/global.json +1 -0
  220. package/locales/fr/global.json +2 -1
  221. package/locales/hr/global.json +1 -0
  222. package/locales/hu/global.json +1 -0
  223. package/locales/hy/global.json +1 -0
  224. package/locales/it/global.json +1 -0
  225. package/locales/ja/global.json +1 -0
  226. package/locales/ko/global.json +1 -0
  227. package/locales/nl/global.json +1 -0
  228. package/locales/pl/global.json +1 -0
  229. package/locales/pt/global.json +1 -0
  230. package/locales/ro/global.json +1 -0
  231. package/locales/ru/global.json +1 -0
  232. package/locales/sk/global.json +1 -0
  233. package/locales/sl/global.json +1 -0
  234. package/locales/sv/global.json +1 -0
  235. package/locales/tl/global.json +1 -0
  236. package/locales/tr/global.json +1 -0
  237. package/locales/uk/global.json +1 -0
  238. package/locales/vi/global.json +1 -0
  239. package/locales/zh/global.json +1 -0
  240. package/locales/zh_TW/global.json +1 -0
  241. package/package.json +2 -2
@@ -19,6 +19,8 @@ declare const ButtonLink: {
19
19
  download: import("prop-types").Requireable<boolean>;
20
20
  target: import("prop-types").Requireable<string>;
21
21
  }>>;
22
+ hoverBackgroundColor: import("prop-types").Requireable<string>;
23
+ hoverColor: import("prop-types").Requireable<string>;
22
24
  disabled: import("prop-types").Requireable<boolean>;
23
25
  className: import("prop-types").Requireable<string>;
24
26
  customStyle: import("prop-types").Requireable<import("prop-types").InferProps<{}>>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAwC7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;CAuEzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAMA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA+C7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;CA4FzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
@@ -2,7 +2,7 @@ import _noop from "lodash/fp/noop";
2
2
 
3
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
4
 
5
- import React, { useCallback } from 'react';
5
+ import React, { useCallback, useState, useMemo } from 'react';
6
6
  import classnames from 'classnames';
7
7
  import Link from '../link';
8
8
  import FaIcon from '../icon';
@@ -10,7 +10,7 @@ import { ICONS } from '../../util/button-icons';
10
10
  import propTypes from './types';
11
11
  import style from './style.css';
12
12
 
13
- const getButtonContent = (icon, content) => {
13
+ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor) => {
14
14
  const {
15
15
  type,
16
16
  faIcon,
@@ -20,6 +20,7 @@ const getButtonContent = (icon, content) => {
20
20
  position: ''
21
21
  };
22
22
  const Icon = type && ICONS[type];
23
+ const isApplyHover = hovered && hoverBackgroundColor && hoverColor;
23
24
 
24
25
  if (!Icon && !faIcon) {
25
26
  return /*#__PURE__*/React.createElement("div", {
@@ -31,8 +32,8 @@ const getButtonContent = (icon, content) => {
31
32
 
32
33
  const iconComponent = faIcon ? /*#__PURE__*/React.createElement(FaIcon, {
33
34
  iconName: faIcon.name,
34
- iconColor: faIcon.color,
35
- backgroundColor: faIcon.backgroundColor,
35
+ iconColor: isApplyHover ? hoverColor : faIcon.color,
36
+ backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,
36
37
  size: {
37
38
  faSize: faIcon.size,
38
39
  wrapperSize: faIcon.size
@@ -53,6 +54,8 @@ const ButtonLink = props => {
53
54
  type,
54
55
  label,
55
56
  content,
57
+ hoverBackgroundColor,
58
+ hoverColor,
56
59
  disabled = false,
57
60
  icon,
58
61
  'data-name': dataName,
@@ -65,10 +68,19 @@ const ButtonLink = props => {
65
68
  customStyle,
66
69
  useTitle = true
67
70
  } = props;
68
- const contentView = getButtonContent(icon, content ?? label);
69
71
  const styleButton = classnames(className, style.button, type === 'primary' && style.primary, type === 'secondary' && style.secondary, type === 'tertiary' && style.tertiary, type === 'text' && style.text, type === 'dangerous' && style.dangerous, link && style.link, disabled && style.disabled);
72
+ const [hovered, setHovered] = useState(false);
70
73
  const handleOnClick = useCallback(() => onClick(), [onClick]);
71
74
  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);
75
+ const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
76
+ const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
77
+
78
+ const _customStyle = useMemo(() => {
79
+ return _extends({}, customStyle, (hoverBackgroundColor || hoverColor) && hovered ? {
80
+ backgroundColor: hoverBackgroundColor,
81
+ color: hoverColor
82
+ } : null);
83
+ }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);
72
84
 
73
85
  if (link) {
74
86
  return /*#__PURE__*/React.createElement(Link, _extends({}, link, useTitle && {
@@ -79,7 +91,7 @@ const ButtonLink = props => {
79
91
  "data-name": dataName,
80
92
  "data-testid": dataTestId,
81
93
  "aria-label": ariaLabel || label
82
- }), contentView);
94
+ }), getButtonContent(icon, content ?? label));
83
95
  }
84
96
 
85
97
  return /*#__PURE__*/React.createElement("button", _extends({}, useTitle && {
@@ -89,13 +101,15 @@ const ButtonLink = props => {
89
101
  "aria-label": ariaLabel || label,
90
102
  "data-name": dataName,
91
103
  "data-testid": dataTestId,
92
- style: customStyle,
104
+ style: _customStyle,
93
105
  className: styleButton,
94
106
  onClick: handleOnClick,
95
107
  onKeyDown: handleOnKeyDown,
108
+ onMouseOver: handleMouseOver,
109
+ onMouseLeave: handleMouseLeave,
96
110
  tabIndex: 0,
97
111
  disabled: disabled
98
- }), contentView);
112
+ }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor));
99
113
  };
100
114
 
101
115
  ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","classnames","Link","FaIcon","ICONS","propTypes","style","getButtonContent","icon","content","type","faIcon","position","Icon","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","button","primary","secondary","tertiary","text","dangerous","handleOnClick","handleOnKeyDown","event","title"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (icon?: IconType, content?: string | React.ReactNode) => {\n const {type, faIcon, position} = icon || {type: '', position: ''};\n const Icon = type && ICONS[type];\n\n if (!Icon && !faIcon) {\n return (\n <div className={style.buttonContent}>\n <span className={style.label}>{content}</span>\n </div>\n );\n }\n\n const iconComponent = faIcon ? (\n <FaIcon\n {...{\n iconName: faIcon.name,\n iconColor: faIcon.color,\n backgroundColor: faIcon.backgroundColor,\n size: {\n faSize: faIcon.size,\n wrapperSize: faIcon.size\n }\n }}\n />\n ) : (\n <Icon className={style.icon} theme=\"coorpmanager\" />\n );\n\n return (\n <div className={style.buttonContent}>\n {position === 'left' ? iconComponent : null}\n {content ? <span className={style.label}>{content}</span> : null}\n {position === 'right' ? iconComponent : null}\n </div>\n );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n const {\n type,\n label,\n content,\n disabled = false,\n icon,\n 'data-name': dataName,\n 'data-testid': dataTestId = 'button-link',\n 'aria-label': ariaLabel,\n link,\n onClick = noop,\n onKeyDown = noop,\n className,\n customStyle,\n useTitle = true\n } = props;\n const contentView = getButtonContent(icon, content ?? label);\n const styleButton = classnames(\n className,\n style.button,\n type === 'primary' && style.primary,\n type === 'secondary' && style.secondary,\n type === 'tertiary' && style.tertiary,\n type === 'text' && style.text,\n type === 'dangerous' && style.dangerous,\n link && style.link,\n disabled && style.disabled\n );\n\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n if (link) {\n return (\n <Link\n {...link}\n {...(useTitle && {\n title: ariaLabel || label\n })}\n style={customStyle}\n className={styleButton}\n data-name={dataName}\n data-testid={dataTestId}\n aria-label={ariaLabel || label}\n >\n {contentView}\n </Link>\n );\n }\n\n return (\n <button\n {...(useTitle && {\n title: ariaLabel || label\n })}\n type=\"button\"\n aria-label={ariaLabel || label}\n data-name={dataName}\n data-testid={dataTestId}\n style={customStyle}\n className={styleButton}\n onClick={handleOnClick}\n onKeyDown={handleOnKeyDown}\n tabIndex={0}\n disabled={disabled}\n >\n {contentView}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","ICONS","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","isApplyHover","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","styleButton","button","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","handleOnKeyDown","event","handleMouseOver","handleMouseLeave","_customStyle","title"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n icon?: IconType,\n content?: string | React.ReactNode,\n hovered?: boolean,\n hoverBackgroundColor?: string,\n hoverColor?: string\n) => {\n const {type, faIcon, position} = icon || {type: '', position: ''};\n const Icon = type && ICONS[type];\n const isApplyHover = hovered && hoverBackgroundColor && hoverColor;\n\n if (!Icon && !faIcon) {\n return (\n <div className={style.buttonContent}>\n <span className={style.label}>{content}</span>\n </div>\n );\n }\n\n const iconComponent = faIcon ? (\n <FaIcon\n {...{\n iconName: faIcon.name,\n iconColor: isApplyHover ? hoverColor : faIcon.color,\n backgroundColor: isApplyHover ? hoverBackgroundColor : faIcon.backgroundColor,\n size: {\n faSize: faIcon.size,\n wrapperSize: faIcon.size\n }\n }}\n />\n ) : (\n <Icon className={style.icon} theme=\"coorpmanager\" />\n );\n\n return (\n <div className={style.buttonContent}>\n {position === 'left' ? iconComponent : null}\n {content ? <span className={style.label}>{content}</span> : null}\n {position === 'right' ? iconComponent : null}\n </div>\n );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n const {\n type,\n label,\n content,\n hoverBackgroundColor,\n hoverColor,\n disabled = false,\n icon,\n 'data-name': dataName,\n 'data-testid': dataTestId = 'button-link',\n 'aria-label': ariaLabel,\n link,\n onClick = noop,\n onKeyDown = noop,\n className,\n customStyle,\n useTitle = true\n } = props;\n const styleButton = classnames(\n className,\n style.button,\n type === 'primary' && style.primary,\n type === 'secondary' && style.secondary,\n type === 'tertiary' && style.tertiary,\n type === 'text' && style.text,\n type === 'dangerous' && style.dangerous,\n link && style.link,\n disabled && style.disabled\n );\n\n const [hovered, setHovered] = useState(false);\n\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const _customStyle = useMemo(() => {\n return {\n ...customStyle,\n ...((hoverBackgroundColor || hoverColor) && hovered\n ? {\n backgroundColor: hoverBackgroundColor,\n color: hoverColor\n }\n : null)\n };\n }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n if (link) {\n return (\n <Link\n {...link}\n {...(useTitle && {\n title: ariaLabel || label\n })}\n style={customStyle}\n className={styleButton}\n data-name={dataName}\n data-testid={dataTestId}\n aria-label={ariaLabel || label}\n >\n {getButtonContent(icon, content ?? label)}\n </Link>\n );\n }\n\n return (\n <button\n {...(useTitle && {\n title: ariaLabel || label\n })}\n type=\"button\"\n aria-label={ariaLabel || label}\n data-name={dataName}\n data-testid={dataTestId}\n style={_customStyle}\n className={styleButton}\n onClick={handleOnClick}\n onKeyDown={handleOnKeyDown}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n tabIndex={0}\n disabled={disabled}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}
@@ -18,6 +18,8 @@ declare const propTypes: {
18
18
  download: PropTypes.Requireable<boolean>;
19
19
  target: PropTypes.Requireable<string>;
20
20
  }>>;
21
+ hoverBackgroundColor: PropTypes.Requireable<string>;
22
+ hoverColor: PropTypes.Requireable<string>;
21
23
  disabled: PropTypes.Requireable<boolean>;
22
24
  className: PropTypes.Requireable<string>;
23
25
  customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
@@ -48,6 +50,8 @@ export declare type ButtonLinkProps = {
48
50
  download?: boolean;
49
51
  target?: '_self' | '_blank' | '_parent' | '_top';
50
52
  };
53
+ hoverBackgroundColor?: string;
54
+ hoverColor?: string;
51
55
  disabled?: boolean;
52
56
  className?: string;
53
57
  customStyle?: Record<string, unknown>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AACF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAE9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAsBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AACF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}
@@ -18,6 +18,8 @@ const propTypes = {
18
18
  download: PropTypes.bool,
19
19
  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])
20
20
  }),
21
+ hoverBackgroundColor: PropTypes.string,
22
+ hoverColor: PropTypes.string,
21
23
  disabled: PropTypes.bool,
22
24
  className: PropTypes.string,
23
25
  customStyle: PropTypes.shape({})
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","label","string","content","node","icon","shape","position","onClick","func","link","href","download","bool","target","disabled","className","customStyle"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst propTypes = {\n type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n label: PropTypes.string,\n content: PropTypes.node,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n 'data-testid': PropTypes.string,\n icon: PropTypes.shape({\n position: PropTypes.oneOf(['right', 'left']),\n type: PropTypes.oneOf(keys(ICONS))\n }),\n onClick: PropTypes.func,\n link: PropTypes.shape({\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n }),\n disabled: PropTypes.bool,\n className: PropTypes.string,\n customStyle: PropTypes.shape({})\n};\n\nexport type FaIcontype = {\n name: string;\n color?: string;\n backgroundColor?: string;\n size?: number;\n};\n\nexport type IconType = {\n position: 'right' | 'left';\n type?: keyof typeof ICONS;\n faIcon?: FaIcontype;\n};\nexport type ButtonLinkProps = {\n type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n label?: string;\n content?: React.ReactNode;\n 'aria-label'?: string;\n 'data-name'?: string;\n 'data-testid'?: string;\n icon?: IconType;\n onClick?: () => void;\n onKeyDown?: () => void;\n link?: {\n href?: string;\n download?: boolean;\n target?: '_self' | '_blank' | '_parent' | '_top';\n };\n disabled?: boolean;\n className?: string;\n customStyle?: Record<string, unknown>;\n useTitle?: boolean;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,SAAQC,KAAR,QAAoB,yBAApB;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,EAAyB,UAAzB,EAAqC,MAArC,EAA6C,WAA7C,CAAhB,CADU;EAEhBC,KAAK,EAAEL,SAAS,CAACM,MAFD;EAGhBC,OAAO,EAAEP,SAAS,CAACQ,IAHH;EAIhB,cAAcR,SAAS,CAACM,MAJR;EAKhB,aAAaN,SAAS,CAACM,MALP;EAMhB,eAAeN,SAAS,CAACM,MANT;EAOhBG,IAAI,EAAET,SAAS,CAACU,KAAV,CAAgB;IACpBC,QAAQ,EAAEX,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBD,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,MAAKH,KAAL,CAAhB;EAFc,CAAhB,CAPU;EAWhBW,OAAO,EAAEZ,SAAS,CAACa,IAXH;EAYhBC,IAAI,EAAEd,SAAS,CAACU,KAAV,CAAgB;IACpBK,IAAI,EAAEf,SAAS,CAACM,MADI;IAEpBU,QAAQ,EAAEhB,SAAS,CAACiB,IAFA;IAGpBC,MAAM,EAAElB,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAZU;EAiBhBe,QAAQ,EAAEnB,SAAS,CAACiB,IAjBJ;EAkBhBG,SAAS,EAAEpB,SAAS,CAACM,MAlBL;EAmBhBe,WAAW,EAAErB,SAAS,CAACU,KAAV,CAAgB,EAAhB;AAnBG,CAAlB;AAyDA,eAAeR,SAAf"}
1
+ {"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","label","string","content","node","icon","shape","position","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","customStyle"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst propTypes = {\n type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n label: PropTypes.string,\n content: PropTypes.node,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string,\n 'data-testid': PropTypes.string,\n icon: PropTypes.shape({\n position: PropTypes.oneOf(['right', 'left']),\n type: PropTypes.oneOf(keys(ICONS))\n }),\n onClick: PropTypes.func,\n link: PropTypes.shape({\n href: PropTypes.string,\n download: PropTypes.bool,\n target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n }),\n hoverBackgroundColor: PropTypes.string,\n hoverColor: PropTypes.string,\n disabled: PropTypes.bool,\n className: PropTypes.string,\n customStyle: PropTypes.shape({})\n};\n\nexport type FaIcontype = {\n name: string;\n color?: string;\n backgroundColor?: string;\n size?: number;\n};\n\nexport type IconType = {\n position: 'right' | 'left';\n type?: keyof typeof ICONS;\n faIcon?: FaIcontype;\n};\nexport type ButtonLinkProps = {\n type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n label?: string;\n content?: React.ReactNode;\n 'aria-label'?: string;\n 'data-name'?: string;\n 'data-testid'?: string;\n icon?: IconType;\n onClick?: () => void;\n onKeyDown?: () => void;\n link?: {\n href?: string;\n download?: boolean;\n target?: '_self' | '_blank' | '_parent' | '_top';\n };\n hoverBackgroundColor?: string;\n hoverColor?: string;\n disabled?: boolean;\n className?: string;\n customStyle?: Record<string, unknown>;\n useTitle?: boolean;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,SAAQC,KAAR,QAAoB,yBAApB;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,EAAyB,UAAzB,EAAqC,MAArC,EAA6C,WAA7C,CAAhB,CADU;EAEhBC,KAAK,EAAEL,SAAS,CAACM,MAFD;EAGhBC,OAAO,EAAEP,SAAS,CAACQ,IAHH;EAIhB,cAAcR,SAAS,CAACM,MAJR;EAKhB,aAAaN,SAAS,CAACM,MALP;EAMhB,eAAeN,SAAS,CAACM,MANT;EAOhBG,IAAI,EAAET,SAAS,CAACU,KAAV,CAAgB;IACpBC,QAAQ,EAAEX,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBD,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,MAAKH,KAAL,CAAhB;EAFc,CAAhB,CAPU;EAWhBW,OAAO,EAAEZ,SAAS,CAACa,IAXH;EAYhBC,IAAI,EAAEd,SAAS,CAACU,KAAV,CAAgB;IACpBK,IAAI,EAAEf,SAAS,CAACM,MADI;IAEpBU,QAAQ,EAAEhB,SAAS,CAACiB,IAFA;IAGpBC,MAAM,EAAElB,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAZU;EAiBhBe,oBAAoB,EAAEnB,SAAS,CAACM,MAjBhB;EAkBhBc,UAAU,EAAEpB,SAAS,CAACM,MAlBN;EAmBhBe,QAAQ,EAAErB,SAAS,CAACiB,IAnBJ;EAoBhBK,SAAS,EAAEtB,SAAS,CAACM,MApBL;EAqBhBiB,WAAW,EAAEvB,SAAS,CAACU,KAAV,CAAgB,EAAhB;AArBG,CAAlB;AA6DA,eAAeR,SAAf"}
@@ -0,0 +1,15 @@
1
+ /// <reference types="react" />
2
+ import { LearningPriorityCardPropTypes } from './types';
3
+ declare const CircularProgressBar: {
4
+ ({ label, progression, size, strokeWidth, "aria-label": ariaLabel, "data-name": dataName }: LearningPriorityCardPropTypes): JSX.Element;
5
+ propTypes: {
6
+ label: import("prop-types").Requireable<string>;
7
+ progression: import("prop-types").Validator<number>;
8
+ size: import("prop-types").Requireable<number>;
9
+ strokeWidth: import("prop-types").Requireable<number>;
10
+ 'aria-label': import("prop-types").Requireable<string>;
11
+ 'data-name': import("prop-types").Requireable<string>;
12
+ };
13
+ };
14
+ export default CircularProgressBar;
15
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,6BAA6B,EAA+B,MAAM,SAAS,CAAC;AAmBpF,QAAA,MAAM,mBAAmB;gGAOtB,6BAA6B;;;;;;;;;CAgD/B,CAAC;AAIF,eAAe,mBAAmB,CAAC"}
@@ -0,0 +1,86 @@
1
+ import _isNull from "lodash/fp/isNull";
2
+ import React, { useMemo, useState, useEffect } from 'react';
3
+ import { CircularProgressBarPropTypes } from './types';
4
+ import style from './style.css';
5
+
6
+ const ProgressionGradient = () => /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
7
+ id: "gradient-stroke-progression",
8
+ x1: "81",
9
+ y1: "0",
10
+ x2: "81",
11
+ y2: "162",
12
+ gradientUnits: "userSpaceOnUse"
13
+ }, /*#__PURE__*/React.createElement("stop", {
14
+ stopColor: "#35CC7F"
15
+ }), /*#__PURE__*/React.createElement("stop", {
16
+ offset: "1",
17
+ stopColor: "#55F2A7"
18
+ })));
19
+
20
+ const CircularProgressBar = ({
21
+ label,
22
+ progression,
23
+ size,
24
+ strokeWidth,
25
+ 'aria-label': ariaLabel,
26
+ 'data-name': dataName
27
+ }) => {
28
+ const [offset, setOffset] = useState(null);
29
+ const {
30
+ center,
31
+ radius,
32
+ length
33
+ } = useMemo(() => {
34
+ const center_ = size / 2;
35
+ const radius_ = center_ - strokeWidth;
36
+ const length_ = Math.ceil(2 * Math.PI * radius_);
37
+ return {
38
+ center: center_,
39
+ radius: radius_,
40
+ length: length_
41
+ };
42
+ }, [size, strokeWidth]);
43
+ useEffect(() => setOffset(Math.ceil(length * ((100 - progression) / 100))), [length, progression]);
44
+ return /*#__PURE__*/React.createElement("div", {
45
+ className: style.container,
46
+ "aria-label": ariaLabel,
47
+ "data-name": dataName
48
+ }, /*#__PURE__*/React.createElement("svg", {
49
+ className: style.svg,
50
+ width: size,
51
+ height: size
52
+ }, /*#__PURE__*/React.createElement(ProgressionGradient, null), /*#__PURE__*/React.createElement("circle", {
53
+ className: style.mainCircle,
54
+ cx: center,
55
+ cy: center,
56
+ r: radius,
57
+ strokeWidth: 3,
58
+ fill: "transparent"
59
+ }), /*#__PURE__*/React.createElement("circle", {
60
+ cx: center,
61
+ cy: center,
62
+ r: radius - 10 / radius * 100,
63
+ fill: "#fafafa"
64
+ }), /*#__PURE__*/React.createElement("circle", {
65
+ className: style.progressionCircle,
66
+ cx: center,
67
+ cy: center,
68
+ r: radius,
69
+ stroke: `url(#gradient-stroke-progression)`,
70
+ strokeWidth: strokeWidth,
71
+ strokeDasharray: length,
72
+ strokeDashoffset: _isNull(offset) ? length : offset,
73
+ fill: "transparent",
74
+ strokeLinecap: "round"
75
+ })), /*#__PURE__*/React.createElement("div", {
76
+ className: style.infos
77
+ }, /*#__PURE__*/React.createElement("span", {
78
+ className: style.progression
79
+ }, progression, "%"), /*#__PURE__*/React.createElement("span", {
80
+ className: style.label
81
+ }, label)));
82
+ };
83
+
84
+ CircularProgressBar.propTypes = process.env.NODE_ENV !== "production" ? CircularProgressBarPropTypes : {};
85
+ export default CircularProgressBar;
86
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useMemo","useState","useEffect","CircularProgressBarPropTypes","style","ProgressionGradient","CircularProgressBar","label","progression","size","strokeWidth","ariaLabel","dataName","offset","setOffset","center","radius","length","center_","radius_","length_","Math","ceil","PI","container","svg","mainCircle","progressionCircle","infos","propTypes"],"sources":["../../../src/atom/circular-progress-bar/index.tsx"],"sourcesContent":["import React, {useMemo, useState, useEffect} from 'react';\nimport {isNull} from 'lodash/fp';\nimport {LearningPriorityCardPropTypes, CircularProgressBarPropTypes} from './types';\nimport style from './style.css';\n\nconst ProgressionGradient = () => (\n <defs>\n <linearGradient\n id=\"gradient-stroke-progression\"\n x1=\"81\"\n y1=\"0\"\n x2=\"81\"\n y2=\"162\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stopColor=\"#35CC7F\" />\n <stop offset=\"1\" stopColor=\"#55F2A7\" />\n </linearGradient>\n </defs>\n);\n\nconst CircularProgressBar = ({\n label,\n progression,\n size,\n strokeWidth,\n 'aria-label': ariaLabel,\n 'data-name': dataName\n}: LearningPriorityCardPropTypes) => {\n const [offset, setOffset] = useState<null | number>(null);\n\n const {center, radius, length} = useMemo(() => {\n const center_ = size / 2;\n const radius_ = center_ - strokeWidth;\n const length_ = Math.ceil(2 * Math.PI * radius_);\n\n return {center: center_, radius: radius_, length: length_};\n }, [size, strokeWidth]);\n\n useEffect(\n () => setOffset(Math.ceil(length * ((100 - progression) / 100))),\n [length, progression]\n );\n\n return (\n <div className={style.container} aria-label={ariaLabel} data-name={dataName}>\n <svg className={style.svg} width={size} height={size}>\n <ProgressionGradient />\n <circle\n className={style.mainCircle}\n cx={center}\n cy={center}\n r={radius}\n strokeWidth={3}\n fill=\"transparent\"\n />\n <circle cx={center} cy={center} r={radius - (10 / radius) * 100} fill=\"#fafafa\" />\n <circle\n className={style.progressionCircle}\n cx={center}\n cy={center}\n r={radius}\n stroke={`url(#gradient-stroke-progression)`}\n strokeWidth={strokeWidth}\n strokeDasharray={length}\n strokeDashoffset={isNull(offset) ? length : offset}\n fill=\"transparent\"\n strokeLinecap=\"round\"\n />\n </svg>\n <div className={style.infos}>\n <span className={style.progression}>{progression}%</span>\n <span className={style.label}>{label}</span>\n </div>\n </div>\n );\n};\n\nCircularProgressBar.propTypes = CircularProgressBarPropTypes;\n\nexport default CircularProgressBar;\n"],"mappings":"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"}
@@ -0,0 +1,51 @@
1
+ @value colors: "../../variables/colors.css";
2
+ @value cm_grey_400 from colors;
3
+ @value cm_grey_50 from colors;
4
+
5
+ .container {
6
+ position: relative;
7
+ display: flex;
8
+ flex-direction: column;
9
+ justify-content: center;
10
+ align-items: center;
11
+ }
12
+
13
+ .svg {
14
+ transform: rotate(-90deg);
15
+ }
16
+
17
+ .mainCircle {
18
+ stroke: cm_grey_50;
19
+ }
20
+
21
+ .progressionCircle {
22
+ transition: stroke-dashoffset 1.5s ease-in-out;
23
+ }
24
+
25
+ .infos {
26
+ font-family: Gilroy;
27
+ display: flex;
28
+ flex-direction: column;
29
+ justify-content: center;
30
+ align-items: center;
31
+ text-align: center;
32
+ position: absolute;
33
+ top: 50%;
34
+ left: 50%;
35
+ transform: translate(-50%, -50%);
36
+ text-align: center;
37
+ }
38
+
39
+ .label {
40
+ color: cm_grey_400;
41
+ font-size: 10px;
42
+ font-weight: 500;
43
+ line-height: 12px;
44
+ }
45
+
46
+ .progression {
47
+ color: #2caf6c;
48
+ font-size: 24px;
49
+ font-weight: 700;
50
+ line-height: 32px;
51
+ }
@@ -0,0 +1,18 @@
1
+ import PropTypes from 'prop-types';
2
+ export declare type LearningPriorityCardPropTypes = {
3
+ label: string;
4
+ progression: number;
5
+ size: number;
6
+ strokeWidth: number;
7
+ 'aria-label': string;
8
+ 'data-name': string;
9
+ };
10
+ export declare const CircularProgressBarPropTypes: {
11
+ label: PropTypes.Requireable<string>;
12
+ progression: PropTypes.Validator<number>;
13
+ size: PropTypes.Requireable<number>;
14
+ strokeWidth: PropTypes.Requireable<number>;
15
+ 'aria-label': PropTypes.Requireable<string>;
16
+ 'data-name': PropTypes.Requireable<string>;
17
+ };
18
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/circular-progress-bar/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,oBAAY,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;;;;;CAOxC,CAAC"}
@@ -0,0 +1,10 @@
1
+ import PropTypes from 'prop-types';
2
+ export const CircularProgressBarPropTypes = {
3
+ label: PropTypes.string,
4
+ progression: PropTypes.number.isRequired,
5
+ size: PropTypes.number,
6
+ strokeWidth: PropTypes.number,
7
+ 'aria-label': PropTypes.string,
8
+ 'data-name': PropTypes.string
9
+ };
10
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","names":["PropTypes","CircularProgressBarPropTypes","label","string","progression","number","isRequired","size","strokeWidth"],"sources":["../../../src/atom/circular-progress-bar/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport type LearningPriorityCardPropTypes = {\n label: string;\n progression: number;\n size: number;\n strokeWidth: number;\n 'aria-label': string;\n 'data-name': string;\n};\n\nexport const CircularProgressBarPropTypes = {\n label: PropTypes.string,\n progression: PropTypes.number.isRequired,\n size: PropTypes.number,\n strokeWidth: PropTypes.number,\n 'aria-label': PropTypes.string,\n 'data-name': PropTypes.string\n};\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAWA,OAAO,MAAMC,4BAA4B,GAAG;EAC1CC,KAAK,EAAEF,SAAS,CAACG,MADyB;EAE1CC,WAAW,EAAEJ,SAAS,CAACK,MAAV,CAAiBC,UAFY;EAG1CC,IAAI,EAAEP,SAAS,CAACK,MAH0B;EAI1CG,WAAW,EAAER,SAAS,CAACK,MAJmB;EAK1C,cAAcL,SAAS,CAACG,MALkB;EAM1C,aAAaH,SAAS,CAACG;AANmB,CAArC"}
@@ -1,9 +1,18 @@
1
1
  export default Tag;
2
- declare function Tag(props: any): JSX.Element;
2
+ declare function Tag({ label, type, size, customStyle }: {
3
+ label: any;
4
+ type?: string | undefined;
5
+ size?: string | undefined;
6
+ customStyle?: {} | undefined;
7
+ }): JSX.Element;
3
8
  declare namespace Tag {
4
9
  namespace propTypes {
5
10
  const label: PropTypes.Requireable<string>;
6
11
  const type: PropTypes.Requireable<string>;
12
+ const size: PropTypes.Requireable<string>;
13
+ const customStyle: PropTypes.Requireable<{
14
+ [x: string]: string | null | undefined;
15
+ }>;
7
16
  }
8
17
  }
9
18
  import PropTypes from "prop-types";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAaA,8CAQC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAoBA;;;;;gBAQC"}
@@ -1,6 +1,7 @@
1
1
  import _keys from "lodash/fp/keys";
2
2
  import React from 'react';
3
3
  import PropTypes from 'prop-types';
4
+ import classnames from 'classnames';
4
5
  import style from './style.css';
5
6
  const TAG_STYLES = {
6
7
  default: style.default,
@@ -9,21 +10,28 @@ const TAG_STYLES = {
9
10
  warning: style.warning,
10
11
  progress: style.progress
11
12
  };
12
-
13
- const Tag = props => {
14
- const {
15
- label,
16
- type = 'default'
17
- } = props;
18
- return /*#__PURE__*/React.createElement("span", {
19
- className: TAG_STYLES[type],
20
- "data-name": `content-tag-${label}`
21
- }, label);
13
+ const TAG_SIZE = {
14
+ S: style.small,
15
+ M: style.medium,
16
+ L: style.large
22
17
  };
23
18
 
19
+ const Tag = ({
20
+ label,
21
+ type = 'default',
22
+ size = 'M',
23
+ customStyle = {}
24
+ }) => /*#__PURE__*/React.createElement("span", {
25
+ className: classnames(TAG_STYLES[type], TAG_SIZE[size]),
26
+ "data-name": `content-tag-${label}`,
27
+ style: customStyle
28
+ }, label);
29
+
24
30
  Tag.propTypes = process.env.NODE_ENV !== "production" ? {
25
31
  label: PropTypes.string,
26
- type: PropTypes.oneOf(_keys(TAG_STYLES))
32
+ type: PropTypes.oneOf(_keys(TAG_STYLES)),
33
+ size: PropTypes.oneOf(['S', 'M', 'L']),
34
+ customStyle: PropTypes.objectOf(PropTypes.string)
27
35
  } : {};
28
36
  export default Tag;
29
37
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","style","TAG_STYLES","default","success","failure","warning","progress","Tag","props","label","type","propTypes","string","oneOf"],"sources":["../../../src/atom/tag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport style from './style.css';\n\nconst TAG_STYLES = {\n default: style.default,\n success: style.success,\n failure: style.failure,\n warning: style.warning,\n progress: style.progress\n};\n\nconst Tag = props => {\n const {label, type = 'default'} = props;\n\n return (\n <span className={TAG_STYLES[type]} data-name={`content-tag-${label}`}>\n {label}\n </span>\n );\n};\n\nTag.propTypes = {\n label: PropTypes.string,\n type: PropTypes.oneOf(keys(TAG_STYLES))\n};\n\nexport default Tag;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,UAAU,GAAG;EACjBC,OAAO,EAAEF,KAAK,CAACE,OADE;EAEjBC,OAAO,EAAEH,KAAK,CAACG,OAFE;EAGjBC,OAAO,EAAEJ,KAAK,CAACI,OAHE;EAIjBC,OAAO,EAAEL,KAAK,CAACK,OAJE;EAKjBC,QAAQ,EAAEN,KAAK,CAACM;AALC,CAAnB;;AAQA,MAAMC,GAAG,GAAGC,KAAK,IAAI;EACnB,MAAM;IAACC,KAAD;IAAQC,IAAI,GAAG;EAAf,IAA4BF,KAAlC;EAEA,oBACE;IAAM,SAAS,EAAEP,UAAU,CAACS,IAAD,CAA3B;IAAmC,aAAY,eAAcD,KAAM;EAAnE,GACGA,KADH,CADF;AAKD,CARD;;AAUAF,GAAG,CAACI,SAAJ,2CAAgB;EACdF,KAAK,EAAEV,SAAS,CAACa,MADH;EAEdF,IAAI,EAAEX,SAAS,CAACc,KAAV,CAAgB,MAAKZ,UAAL,CAAhB;AAFQ,CAAhB;AAKA,eAAeM,GAAf"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","classnames","style","TAG_STYLES","default","success","failure","warning","progress","TAG_SIZE","S","small","M","medium","L","large","Tag","label","type","size","customStyle","propTypes","string","oneOf","objectOf"],"sources":["../../../src/atom/tag/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport style from './style.css';\n\nconst TAG_STYLES = {\n default: style.default,\n success: style.success,\n failure: style.failure,\n warning: style.warning,\n progress: style.progress\n};\n\nconst TAG_SIZE = {\n S: style.small,\n M: style.medium,\n L: style.large\n};\n\nconst Tag = ({label, type = 'default', size = 'M', customStyle = {}}) => (\n <span\n className={classnames(TAG_STYLES[type], TAG_SIZE[size])}\n data-name={`content-tag-${label}`}\n style={customStyle}\n >\n {label}\n </span>\n);\n\nTag.propTypes = {\n label: PropTypes.string,\n type: PropTypes.oneOf(keys(TAG_STYLES)),\n size: PropTypes.oneOf(['S', 'M', 'L']),\n customStyle: PropTypes.objectOf(PropTypes.string)\n};\n\nexport default Tag;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,UAAU,GAAG;EACjBC,OAAO,EAAEF,KAAK,CAACE,OADE;EAEjBC,OAAO,EAAEH,KAAK,CAACG,OAFE;EAGjBC,OAAO,EAAEJ,KAAK,CAACI,OAHE;EAIjBC,OAAO,EAAEL,KAAK,CAACK,OAJE;EAKjBC,QAAQ,EAAEN,KAAK,CAACM;AALC,CAAnB;AAQA,MAAMC,QAAQ,GAAG;EACfC,CAAC,EAAER,KAAK,CAACS,KADM;EAEfC,CAAC,EAAEV,KAAK,CAACW,MAFM;EAGfC,CAAC,EAAEZ,KAAK,CAACa;AAHM,CAAjB;;AAMA,MAAMC,GAAG,GAAG,CAAC;EAACC,KAAD;EAAQC,IAAI,GAAG,SAAf;EAA0BC,IAAI,GAAG,GAAjC;EAAsCC,WAAW,GAAG;AAApD,CAAD,kBACV;EACE,SAAS,EAAEnB,UAAU,CAACE,UAAU,CAACe,IAAD,CAAX,EAAmBT,QAAQ,CAACU,IAAD,CAA3B,CADvB;EAEE,aAAY,eAAcF,KAAM,EAFlC;EAGE,KAAK,EAAEG;AAHT,GAKGH,KALH,CADF;;AAUAD,GAAG,CAACK,SAAJ,2CAAgB;EACdJ,KAAK,EAAEjB,SAAS,CAACsB,MADH;EAEdJ,IAAI,EAAElB,SAAS,CAACuB,KAAV,CAAgB,MAAKpB,UAAL,CAAhB,CAFQ;EAGdgB,IAAI,EAAEnB,SAAS,CAACuB,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAhB,CAHQ;EAIdH,WAAW,EAAEpB,SAAS,CAACwB,QAAV,CAAmBxB,SAAS,CAACsB,MAA7B;AAJC,CAAhB;AAOA,eAAeN,GAAf"}
@@ -5,41 +5,60 @@
5
5
  @value cm_negative_100 from colors;
6
6
  @value cm_orange_700 from colors;
7
7
  @value black from colors;
8
+ @value cm_grey_100 from colors;
9
+ @value cm_grey_500 from colors;
8
10
 
9
11
  .tag {
10
12
  border-radius: 24px;
11
- font-family: 'Gilroy';
12
- font-size: 14px;
13
- font-weight: bold;
13
+ font-family: "Gilroy";
14
+ font-weight: 600;
14
15
  text-align: center;
15
- padding: 12px 16px;
16
+ }
17
+
18
+ .small {
19
+ composes: tag;
20
+ font-size: 10px;
21
+ padding: 2px 4px;
22
+ }
23
+
24
+ .medium {
25
+ composes: tag;
26
+ font-size: 12px;
27
+ padding: 4px 8px;
28
+ }
29
+
30
+ .large {
31
+ composes: tag;
32
+ font-size: 14px;
33
+ padding: 8px 16px;
16
34
  }
17
35
 
18
36
  .default {
19
- composes: tag;
20
- color: black;
37
+ composes: tag;
38
+ background-color: cm_grey_100;
39
+ color: cm_grey_500;
21
40
  }
22
41
 
23
42
  .progress {
24
- composes: tag;
25
- background-color: color(cm_yellow_200 a(15%));
26
- color: cm_yellow_200;
43
+ composes: tag;
44
+ background-color: color(cm_yellow_200 a(15%));
45
+ color: cm_yellow_200;
27
46
  }
28
47
 
29
48
  .success {
30
- composes: tag;
31
- background-color: color(cm_positive_100 a(15%));
32
- color: cm_positive_100;
49
+ composes: tag;
50
+ background-color: color(cm_positive_100 a(15%));
51
+ color: cm_positive_100;
33
52
  }
34
53
 
35
54
  .failure {
36
- composes: tag;
37
- background-color: color(cm_negative_100 a(15%));
38
- color: cm_negative_100;
55
+ composes: tag;
56
+ background-color: color(cm_negative_100 a(15%));
57
+ color: cm_negative_100;
39
58
  }
40
59
 
41
60
  .warning {
42
- composes: tag;
43
- background-color: color(cm_orange_700 a(15%));
44
- color: cm_orange_700;
45
- }
61
+ composes: tag;
62
+ background-color: color(cm_orange_700 a(15%));
63
+ color: cm_orange_700;
64
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEAgHC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEA4GC"}