@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.
- package/es/atom/button-link/index.d.ts +2 -0
- package/es/atom/button-link/index.d.ts.map +1 -1
- package/es/atom/button-link/index.js +22 -8
- package/es/atom/button-link/index.js.map +1 -1
- package/es/atom/button-link/types.d.ts +4 -0
- package/es/atom/button-link/types.d.ts.map +1 -1
- package/es/atom/button-link/types.js +2 -0
- package/es/atom/button-link/types.js.map +1 -1
- package/es/atom/circular-progress-bar/index.d.ts +15 -0
- package/es/atom/circular-progress-bar/index.d.ts.map +1 -0
- package/es/atom/circular-progress-bar/index.js +86 -0
- package/es/atom/circular-progress-bar/index.js.map +1 -0
- package/es/atom/circular-progress-bar/style.css +51 -0
- package/es/atom/circular-progress-bar/types.d.ts +18 -0
- package/es/atom/circular-progress-bar/types.d.ts.map +1 -0
- package/es/atom/circular-progress-bar/types.js +10 -0
- package/es/atom/circular-progress-bar/types.js.map +1 -0
- package/es/atom/tag/index.d.ts +10 -1
- package/es/atom/tag/index.d.ts.map +1 -1
- package/es/atom/tag/index.js +19 -11
- package/es/atom/tag/index.js.map +1 -1
- package/es/atom/tag/style.css +38 -19
- package/es/molecule/base-modal/index.d.ts.map +1 -1
- package/es/molecule/base-modal/index.js +6 -10
- package/es/molecule/base-modal/index.js.map +1 -1
- package/es/molecule/cm-popin/types.d.ts +8 -0
- package/es/molecule/cm-popin/types.d.ts.map +1 -1
- package/es/molecule/draggable-list/index.d.ts +12 -0
- package/es/molecule/draggable-list/index.d.ts.map +1 -1
- package/es/molecule/draggable-list/index.js +4 -2
- package/es/molecule/draggable-list/index.js.map +1 -1
- package/es/molecule/expandible-actionable-table/index.d.ts +2 -0
- package/es/molecule/expandible-actionable-table/index.d.ts.map +1 -1
- package/es/molecule/expandible-actionable-table/types.d.ts +2 -0
- package/es/molecule/expandible-actionable-table/types.d.ts.map +1 -1
- package/es/molecule/learner-skill-card/index.d.ts.map +1 -1
- package/es/molecule/learner-skill-card/index.js +7 -10
- package/es/molecule/learner-skill-card/index.js.map +1 -1
- package/es/molecule/learning-priority-card/index.d.ts +40 -0
- package/es/molecule/learning-priority-card/index.d.ts.map +1 -0
- package/es/molecule/learning-priority-card/index.js +77 -0
- package/es/molecule/learning-priority-card/index.js.map +1 -0
- package/es/molecule/learning-priority-card/style.css +34 -0
- package/es/molecule/learning-priority-card/types.d.ts +18 -0
- package/es/molecule/learning-priority-card/types.d.ts.map +1 -0
- package/es/molecule/learning-priority-card/types.js +10 -0
- package/es/molecule/learning-priority-card/types.js.map +1 -0
- package/es/molecule/learning-priority-modal/index.d.ts +33 -0
- package/es/molecule/learning-priority-modal/index.d.ts.map +1 -0
- package/es/molecule/learning-priority-modal/index.js +231 -0
- package/es/molecule/learning-priority-modal/index.js.map +1 -0
- package/es/molecule/learning-priority-modal/style.css +68 -0
- package/es/molecule/learning-priority-setup-item/index.d.ts +18 -0
- package/es/molecule/learning-priority-setup-item/index.d.ts.map +1 -0
- package/es/molecule/learning-priority-setup-item/index.js +69 -0
- package/es/molecule/learning-priority-setup-item/index.js.map +1 -0
- package/es/molecule/learning-priority-setup-item/style.css +47 -0
- package/es/molecule/skill-card/index.d.ts.map +1 -1
- package/es/molecule/skill-card/index.js +5 -8
- package/es/molecule/skill-card/index.js.map +1 -1
- package/es/organism/brand-learning-priorities/index.d.ts +170 -0
- package/es/organism/brand-learning-priorities/index.d.ts.map +1 -0
- package/es/organism/brand-learning-priorities/index.js +99 -0
- package/es/organism/brand-learning-priorities/index.js.map +1 -0
- package/es/organism/brand-learning-priorities/style.css +35 -0
- package/es/organism/list-item/index.d.ts +34 -2
- package/es/organism/list-item/index.d.ts.map +1 -1
- package/es/organism/list-item/index.js +58 -14
- package/es/organism/list-item/index.js.map +1 -1
- package/es/organism/list-item/style.css +21 -1
- package/es/organism/list-items/index.d.ts +8 -0
- package/es/organism/setup-header/index.d.ts +8 -0
- package/es/organism/wizard-contents/index.d.ts +6 -0
- package/es/template/app-player/loading/index.d.ts +8 -0
- package/es/template/app-player/player/index.d.ts +16 -0
- package/es/template/app-player/player/slides/index.d.ts +8 -0
- package/es/template/app-player/player/slides/index.d.ts.map +1 -1
- package/es/template/app-player/popin-correction/index.d.ts +8 -0
- package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/es/template/app-player/popin-end/index.d.ts +8 -0
- package/es/template/app-review/index.d.ts +8 -0
- package/es/template/app-review/index.d.ts.map +1 -1
- package/es/template/app-review/player/prop-types.d.ts +8 -0
- package/es/template/app-review/player/prop-types.d.ts.map +1 -1
- package/es/template/app-review/prop-types.d.ts +8 -0
- package/es/template/app-review/prop-types.d.ts.map +1 -1
- package/es/template/back-office/brand-create/index.d.ts +8 -0
- package/es/template/back-office/brand-create/index.d.ts.map +1 -1
- package/es/template/back-office/brand-list/index.d.ts +8 -0
- package/es/template/back-office/brand-list/index.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.d.ts +171 -0
- package/es/template/back-office/brand-update/index.d.ts.map +1 -1
- package/es/template/back-office/brand-update/index.js +7 -0
- package/es/template/back-office/brand-update/index.js.map +1 -1
- package/es/template/back-office/dashboard-preview/index.d.ts +8 -0
- package/es/template/back-office/layout/index.d.ts +8 -0
- package/es/template/back-office/layout/index.d.ts.map +1 -1
- package/es/template/common/dashboard/index.d.ts +16 -0
- package/es/template/common/search-page/index.d.ts +8 -0
- package/es/template/external-course/index.d.ts +8 -0
- package/es/template/my-learning/index.d.ts.map +1 -1
- package/es/template/my-learning/index.js +10 -18
- package/es/template/my-learning/index.js.map +1 -1
- package/es/template/skill-detail/index.d.ts.map +1 -1
- package/es/template/skill-detail/index.js +4 -8
- package/es/template/skill-detail/index.js.map +1 -1
- package/lib/atom/button-link/index.d.ts +2 -0
- package/lib/atom/button-link/index.d.ts.map +1 -1
- package/lib/atom/button-link/index.js +21 -7
- package/lib/atom/button-link/index.js.map +1 -1
- package/lib/atom/button-link/types.d.ts +4 -0
- package/lib/atom/button-link/types.d.ts.map +1 -1
- package/lib/atom/button-link/types.js +2 -0
- package/lib/atom/button-link/types.js.map +1 -1
- package/lib/atom/circular-progress-bar/index.d.ts +15 -0
- package/lib/atom/circular-progress-bar/index.d.ts.map +1 -0
- package/lib/atom/circular-progress-bar/index.js +101 -0
- package/lib/atom/circular-progress-bar/index.js.map +1 -0
- package/lib/atom/circular-progress-bar/style.css +51 -0
- package/lib/atom/circular-progress-bar/types.d.ts +18 -0
- package/lib/atom/circular-progress-bar/types.d.ts.map +1 -0
- package/lib/atom/circular-progress-bar/types.js +19 -0
- package/lib/atom/circular-progress-bar/types.js.map +1 -0
- package/lib/atom/tag/index.d.ts +10 -1
- package/lib/atom/tag/index.d.ts.map +1 -1
- package/lib/atom/tag/index.js +20 -11
- package/lib/atom/tag/index.js.map +1 -1
- package/lib/atom/tag/style.css +38 -19
- package/lib/molecule/base-modal/index.d.ts.map +1 -1
- package/lib/molecule/base-modal/index.js +5 -9
- package/lib/molecule/base-modal/index.js.map +1 -1
- package/lib/molecule/cm-popin/types.d.ts +8 -0
- package/lib/molecule/cm-popin/types.d.ts.map +1 -1
- package/lib/molecule/draggable-list/index.d.ts +12 -0
- package/lib/molecule/draggable-list/index.d.ts.map +1 -1
- package/lib/molecule/draggable-list/index.js +5 -2
- package/lib/molecule/draggable-list/index.js.map +1 -1
- package/lib/molecule/expandible-actionable-table/index.d.ts +2 -0
- package/lib/molecule/expandible-actionable-table/index.d.ts.map +1 -1
- package/lib/molecule/expandible-actionable-table/types.d.ts +2 -0
- package/lib/molecule/expandible-actionable-table/types.d.ts.map +1 -1
- package/lib/molecule/learner-skill-card/index.d.ts.map +1 -1
- package/lib/molecule/learner-skill-card/index.js +6 -9
- package/lib/molecule/learner-skill-card/index.js.map +1 -1
- package/lib/molecule/learning-priority-card/index.d.ts +40 -0
- package/lib/molecule/learning-priority-card/index.d.ts.map +1 -0
- package/lib/molecule/learning-priority-card/index.js +95 -0
- package/lib/molecule/learning-priority-card/index.js.map +1 -0
- package/lib/molecule/learning-priority-card/style.css +34 -0
- package/lib/molecule/learning-priority-card/types.d.ts +18 -0
- package/lib/molecule/learning-priority-card/types.d.ts.map +1 -0
- package/lib/molecule/learning-priority-card/types.js +19 -0
- package/lib/molecule/learning-priority-card/types.js.map +1 -0
- package/lib/molecule/learning-priority-modal/index.d.ts +33 -0
- package/lib/molecule/learning-priority-modal/index.d.ts.map +1 -0
- package/lib/molecule/learning-priority-modal/index.js +254 -0
- package/lib/molecule/learning-priority-modal/index.js.map +1 -0
- package/lib/molecule/learning-priority-modal/style.css +68 -0
- package/lib/molecule/learning-priority-setup-item/index.d.ts +18 -0
- package/lib/molecule/learning-priority-setup-item/index.d.ts.map +1 -0
- package/lib/molecule/learning-priority-setup-item/index.js +86 -0
- package/lib/molecule/learning-priority-setup-item/index.js.map +1 -0
- package/lib/molecule/learning-priority-setup-item/style.css +47 -0
- package/lib/molecule/skill-card/index.d.ts.map +1 -1
- package/lib/molecule/skill-card/index.js +4 -7
- package/lib/molecule/skill-card/index.js.map +1 -1
- package/lib/organism/brand-learning-priorities/index.d.ts +170 -0
- package/lib/organism/brand-learning-priorities/index.d.ts.map +1 -0
- package/lib/organism/brand-learning-priorities/index.js +117 -0
- package/lib/organism/brand-learning-priorities/index.js.map +1 -0
- package/lib/organism/brand-learning-priorities/style.css +35 -0
- package/lib/organism/list-item/index.d.ts +34 -2
- package/lib/organism/list-item/index.d.ts.map +1 -1
- package/lib/organism/list-item/index.js +62 -16
- package/lib/organism/list-item/index.js.map +1 -1
- package/lib/organism/list-item/style.css +21 -1
- package/lib/organism/list-items/index.d.ts +8 -0
- package/lib/organism/setup-header/index.d.ts +8 -0
- package/lib/organism/wizard-contents/index.d.ts +6 -0
- package/lib/template/app-player/loading/index.d.ts +8 -0
- package/lib/template/app-player/player/index.d.ts +16 -0
- package/lib/template/app-player/player/slides/index.d.ts +8 -0
- package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-correction/index.d.ts +8 -0
- package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
- package/lib/template/app-player/popin-end/index.d.ts +8 -0
- package/lib/template/app-review/index.d.ts +8 -0
- package/lib/template/app-review/index.d.ts.map +1 -1
- package/lib/template/app-review/player/prop-types.d.ts +8 -0
- package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
- package/lib/template/app-review/prop-types.d.ts +8 -0
- package/lib/template/app-review/prop-types.d.ts.map +1 -1
- package/lib/template/back-office/brand-create/index.d.ts +8 -0
- package/lib/template/back-office/brand-create/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-list/index.d.ts +8 -0
- package/lib/template/back-office/brand-list/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.d.ts +171 -0
- package/lib/template/back-office/brand-update/index.d.ts.map +1 -1
- package/lib/template/back-office/brand-update/index.js +8 -0
- package/lib/template/back-office/brand-update/index.js.map +1 -1
- package/lib/template/back-office/dashboard-preview/index.d.ts +8 -0
- package/lib/template/back-office/layout/index.d.ts +8 -0
- package/lib/template/back-office/layout/index.d.ts.map +1 -1
- package/lib/template/common/dashboard/index.d.ts +16 -0
- package/lib/template/common/search-page/index.d.ts +8 -0
- package/lib/template/external-course/index.d.ts +8 -0
- package/lib/template/my-learning/index.d.ts.map +1 -1
- package/lib/template/my-learning/index.js +10 -18
- package/lib/template/my-learning/index.js.map +1 -1
- package/lib/template/skill-detail/index.d.ts.map +1 -1
- package/lib/template/skill-detail/index.js +4 -8
- package/lib/template/skill-detail/index.js.map +1 -1
- package/locales/bs/global.json +1 -0
- package/locales/cs/global.json +1 -0
- package/locales/de/global.json +1 -0
- package/locales/en/global.json +12 -0
- package/locales/es/global.json +1 -0
- package/locales/et/global.json +1 -0
- package/locales/fi/global.json +1 -0
- package/locales/fr/global.json +2 -1
- package/locales/hr/global.json +1 -0
- package/locales/hu/global.json +1 -0
- package/locales/hy/global.json +1 -0
- package/locales/it/global.json +1 -0
- package/locales/ja/global.json +1 -0
- package/locales/ko/global.json +1 -0
- package/locales/nl/global.json +1 -0
- package/locales/pl/global.json +1 -0
- package/locales/pt/global.json +1 -0
- package/locales/ro/global.json +1 -0
- package/locales/ru/global.json +1 -0
- package/locales/sk/global.json +1 -0
- package/locales/sl/global.json +1 -0
- package/locales/sv/global.json +1 -0
- package/locales/tl/global.json +1 -0
- package/locales/tr/global.json +1 -0
- package/locales/uk/global.json +1 -0
- package/locales/vi/global.json +1 -0
- package/locales/zh/global.json +1 -0
- package/locales/zh_TW/global.json +1 -0
- 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;
|
|
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
|
-
}),
|
|
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:
|
|
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
|
-
}),
|
|
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","
|
|
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
|
|
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,
|
|
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":";AAAA,OAAOA,KAAP,IAAeC,OAAf,EAAwBC,QAAxB,EAAkCC,SAAlC,QAAkD,OAAlD;AAEA,SAAuCC,4BAAvC,QAA0E,SAA1E;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,mBAAmB,GAAG,mBAC1B,+CACE;EACE,EAAE,EAAC,6BADL;EAEE,EAAE,EAAC,IAFL;EAGE,EAAE,EAAC,GAHL;EAIE,EAAE,EAAC,IAJL;EAKE,EAAE,EAAC,KALL;EAME,aAAa,EAAC;AANhB,gBAQE;EAAM,SAAS,EAAC;AAAhB,EARF,eASE;EAAM,MAAM,EAAC,GAAb;EAAiB,SAAS,EAAC;AAA3B,EATF,CADF,CADF;;AAgBA,MAAMC,mBAAmB,GAAG,CAAC;EAC3BC,KAD2B;EAE3BC,WAF2B;EAG3BC,IAH2B;EAI3BC,WAJ2B;EAK3B,cAAcC,SALa;EAM3B,aAAaC;AANc,CAAD,KAOS;EACnC,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsBb,QAAQ,CAAgB,IAAhB,CAApC;EAEA,MAAM;IAACc,MAAD;IAASC,MAAT;IAAiBC;EAAjB,IAA2BjB,OAAO,CAAC,MAAM;IAC7C,MAAMkB,OAAO,GAAGT,IAAI,GAAG,CAAvB;IACA,MAAMU,OAAO,GAAGD,OAAO,GAAGR,WAA1B;IACA,MAAMU,OAAO,GAAGC,IAAI,CAACC,IAAL,CAAU,IAAID,IAAI,CAACE,EAAT,GAAcJ,OAAxB,CAAhB;IAEA,OAAO;MAACJ,MAAM,EAAEG,OAAT;MAAkBF,MAAM,EAAEG,OAA1B;MAAmCF,MAAM,EAAEG;IAA3C,CAAP;EACD,CANuC,EAMrC,CAACX,IAAD,EAAOC,WAAP,CANqC,CAAxC;EAQAR,SAAS,CACP,MAAMY,SAAS,CAACO,IAAI,CAACC,IAAL,CAAUL,MAAM,IAAI,CAAC,MAAMT,WAAP,IAAsB,GAA1B,CAAhB,CAAD,CADR,EAEP,CAACS,MAAD,EAAST,WAAT,CAFO,CAAT;EAKA,oBACE;IAAK,SAAS,EAAEJ,KAAK,CAACoB,SAAtB;IAAiC,cAAYb,SAA7C;IAAwD,aAAWC;EAAnE,gBACE;IAAK,SAAS,EAAER,KAAK,CAACqB,GAAtB;IAA2B,KAAK,EAAEhB,IAAlC;IAAwC,MAAM,EAAEA;EAAhD,gBACE,oBAAC,mBAAD,OADF,eAEE;IACE,SAAS,EAAEL,KAAK,CAACsB,UADnB;IAEE,EAAE,EAAEX,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,WAAW,EAAE,CALf;IAME,IAAI,EAAC;EANP,EAFF,eAUE;IAAQ,EAAE,EAAED,MAAZ;IAAoB,EAAE,EAAEA,MAAxB;IAAgC,CAAC,EAAEC,MAAM,GAAI,KAAKA,MAAN,GAAgB,GAA5D;IAAiE,IAAI,EAAC;EAAtE,EAVF,eAWE;IACE,SAAS,EAAEZ,KAAK,CAACuB,iBADnB;IAEE,EAAE,EAAEZ,MAFN;IAGE,EAAE,EAAEA,MAHN;IAIE,CAAC,EAAEC,MAJL;IAKE,MAAM,EAAG,mCALX;IAME,WAAW,EAAEN,WANf;IAOE,eAAe,EAAEO,MAPnB;IAQE,gBAAgB,EAAE,QAAOJ,MAAP,IAAiBI,MAAjB,GAA0BJ,MAR9C;IASE,IAAI,EAAC,aATP;IAUE,aAAa,EAAC;EAVhB,EAXF,CADF,eAyBE;IAAK,SAAS,EAAET,KAAK,CAACwB;EAAtB,gBACE;IAAM,SAAS,EAAExB,KAAK,CAACI;EAAvB,GAAqCA,WAArC,MADF,eAEE;IAAM,SAAS,EAAEJ,KAAK,CAACG;EAAvB,GAA+BA,KAA/B,CAFF,CAzBF,CADF;AAgCD,CAvDD;;AAyDAD,mBAAmB,CAACuB,SAApB,2CAAgC1B,4BAAhC;AAEA,eAAeG,mBAAf"}
|
|
@@ -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"}
|
package/es/atom/tag/index.d.ts
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
export default Tag;
|
|
2
|
-
declare function Tag(
|
|
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":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tag/index.js"],"names":[],"mappings":";AAoBA;;;;;gBAQC"}
|
package/es/atom/tag/index.js
CHANGED
|
@@ -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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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
|
package/es/atom/tag/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","style","TAG_STYLES","default","success","failure","warning","progress","
|
|
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"}
|
package/es/atom/tag/style.css
CHANGED
|
@@ -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:
|
|
12
|
-
font-
|
|
13
|
-
font-weight: bold;
|
|
13
|
+
font-family: "Gilroy";
|
|
14
|
+
font-weight: 600;
|
|
14
15
|
text-align: center;
|
|
15
|
-
|
|
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
|
-
|
|
20
|
-
|
|
37
|
+
composes: tag;
|
|
38
|
+
background-color: cm_grey_100;
|
|
39
|
+
color: cm_grey_500;
|
|
21
40
|
}
|
|
22
41
|
|
|
23
42
|
.progress {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AASA,yEA4GC"}
|