@coorpacademy/components 11.32.0 → 11.32.1-alpha.19

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 (165) hide show
  1. package/es/atom/button-link/index.d.ts +1 -0
  2. package/es/atom/button-link/index.d.ts.map +1 -1
  3. package/es/atom/button-link/index.js +6 -5
  4. package/es/atom/button-link/index.js.map +1 -1
  5. package/es/atom/button-link/types.d.ts +3 -0
  6. package/es/atom/button-link/types.d.ts.map +1 -1
  7. package/es/atom/button-link/types.js +1 -0
  8. package/es/atom/button-link/types.js.map +1 -1
  9. package/es/atom/chip/index.d.ts +1 -1
  10. package/es/atom/chip/index.d.ts.map +1 -1
  11. package/es/atom/chip/index.js +2 -6
  12. package/es/atom/chip/index.js.map +1 -1
  13. package/es/atom/chip/style.css +2 -2
  14. package/es/atom/icon/index.d.ts +1 -1
  15. package/es/atom/icon/index.d.ts.map +1 -1
  16. package/es/atom/icon/index.js +6 -4
  17. package/es/atom/icon/index.js.map +1 -1
  18. package/es/molecule/base-modal/index.d.ts +33 -0
  19. package/es/molecule/base-modal/index.d.ts.map +1 -0
  20. package/es/molecule/base-modal/index.js +142 -0
  21. package/es/molecule/base-modal/index.js.map +1 -0
  22. package/es/molecule/base-modal/style.css +125 -0
  23. package/es/molecule/cm-popin/types.d.ts +2 -0
  24. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  25. package/es/molecule/expandible-actionable-table/index.d.ts +1 -0
  26. package/es/molecule/expandible-actionable-table/index.d.ts.map +1 -1
  27. package/es/molecule/expandible-actionable-table/types.d.ts +1 -0
  28. package/es/molecule/expandible-actionable-table/types.d.ts.map +1 -1
  29. package/es/molecule/learner-skill-card/index.d.ts +2 -0
  30. package/es/molecule/learner-skill-card/index.d.ts.map +1 -1
  31. package/es/molecule/learner-skill-card/index.js +9 -4
  32. package/es/molecule/learner-skill-card/index.js.map +1 -1
  33. package/es/molecule/learning-profile-radar-chart/index.d.ts +1 -1
  34. package/es/molecule/learning-profile-radar-chart/index.d.ts.map +1 -1
  35. package/es/molecule/learning-profile-radar-chart/index.js +20 -11
  36. package/es/molecule/learning-profile-radar-chart/index.js.map +1 -1
  37. package/es/molecule/learning-profile-radar-chart/types.d.ts +7 -1
  38. package/es/molecule/learning-profile-radar-chart/types.d.ts.map +1 -1
  39. package/es/molecule/learning-profile-radar-chart/types.js.map +1 -1
  40. package/es/molecule/skill-picker-modal/index.d.ts +23 -0
  41. package/es/molecule/skill-picker-modal/index.d.ts.map +1 -0
  42. package/es/molecule/skill-picker-modal/index.js +138 -0
  43. package/es/molecule/skill-picker-modal/index.js.map +1 -0
  44. package/es/molecule/skill-picker-modal/style.css +28 -0
  45. package/es/molecule/skills-chart-side-information-item/index.d.ts +1 -1
  46. package/es/molecule/skills-chart-side-information-item/index.js +1 -1
  47. package/es/molecule/skills-chart-side-information-item/index.js.map +1 -1
  48. package/es/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
  49. package/es/molecule/skills-chart-side-information-panel/style.css +18 -9
  50. package/es/organism/list-items/index.d.ts +2 -0
  51. package/es/organism/setup-header/index.d.ts +4 -0
  52. package/es/organism/wizard-contents/index.d.ts +3 -0
  53. package/es/template/app-player/loading/index.d.ts +2 -0
  54. package/es/template/app-player/player/index.d.ts +4 -0
  55. package/es/template/app-player/player/slides/index.d.ts +2 -0
  56. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  57. package/es/template/app-player/popin-correction/index.d.ts +2 -0
  58. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  59. package/es/template/app-player/popin-end/index.d.ts +2 -0
  60. package/es/template/app-review/index.d.ts +2 -0
  61. package/es/template/app-review/index.d.ts.map +1 -1
  62. package/es/template/app-review/player/prop-types.d.ts +2 -0
  63. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  64. package/es/template/app-review/prop-types.d.ts +2 -0
  65. package/es/template/app-review/prop-types.d.ts.map +1 -1
  66. package/es/template/back-office/brand-create/index.d.ts +4 -0
  67. package/es/template/back-office/brand-create/index.d.ts.map +1 -1
  68. package/es/template/back-office/brand-list/index.d.ts +4 -0
  69. package/es/template/back-office/brand-list/index.d.ts.map +1 -1
  70. package/es/template/back-office/brand-update/index.d.ts +11 -0
  71. package/es/template/back-office/dashboard-preview/index.d.ts +4 -0
  72. package/es/template/back-office/layout/index.d.ts +4 -0
  73. package/es/template/back-office/layout/index.d.ts.map +1 -1
  74. package/es/template/common/dashboard/index.d.ts +4 -0
  75. package/es/template/common/search-page/index.d.ts +2 -0
  76. package/es/template/external-course/index.d.ts +2 -0
  77. package/es/template/my-learning/index.d.ts +34 -0
  78. package/es/template/my-learning/index.d.ts.map +1 -0
  79. package/es/template/my-learning/index.js +352 -0
  80. package/es/template/my-learning/index.js.map +1 -0
  81. package/es/template/my-learning/style.css +196 -0
  82. package/lib/atom/button-link/index.d.ts +1 -0
  83. package/lib/atom/button-link/index.d.ts.map +1 -1
  84. package/lib/atom/button-link/index.js +6 -5
  85. package/lib/atom/button-link/index.js.map +1 -1
  86. package/lib/atom/button-link/types.d.ts +3 -0
  87. package/lib/atom/button-link/types.d.ts.map +1 -1
  88. package/lib/atom/button-link/types.js +1 -0
  89. package/lib/atom/button-link/types.js.map +1 -1
  90. package/lib/atom/chip/index.d.ts +1 -1
  91. package/lib/atom/chip/index.d.ts.map +1 -1
  92. package/lib/atom/chip/index.js +3 -6
  93. package/lib/atom/chip/index.js.map +1 -1
  94. package/lib/atom/chip/style.css +2 -2
  95. package/lib/atom/icon/index.d.ts +1 -1
  96. package/lib/atom/icon/index.d.ts.map +1 -1
  97. package/lib/atom/icon/index.js +6 -4
  98. package/lib/atom/icon/index.js.map +1 -1
  99. package/lib/molecule/base-modal/index.d.ts +33 -0
  100. package/lib/molecule/base-modal/index.d.ts.map +1 -0
  101. package/lib/molecule/base-modal/index.js +158 -0
  102. package/lib/molecule/base-modal/index.js.map +1 -0
  103. package/lib/molecule/base-modal/style.css +125 -0
  104. package/lib/molecule/cm-popin/types.d.ts +2 -0
  105. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  106. package/lib/molecule/expandible-actionable-table/index.d.ts +1 -0
  107. package/lib/molecule/expandible-actionable-table/index.d.ts.map +1 -1
  108. package/lib/molecule/expandible-actionable-table/types.d.ts +1 -0
  109. package/lib/molecule/expandible-actionable-table/types.d.ts.map +1 -1
  110. package/lib/molecule/learner-skill-card/index.d.ts +2 -0
  111. package/lib/molecule/learner-skill-card/index.d.ts.map +1 -1
  112. package/lib/molecule/learner-skill-card/index.js +9 -4
  113. package/lib/molecule/learner-skill-card/index.js.map +1 -1
  114. package/lib/molecule/learning-profile-radar-chart/index.d.ts +1 -1
  115. package/lib/molecule/learning-profile-radar-chart/index.d.ts.map +1 -1
  116. package/lib/molecule/learning-profile-radar-chart/index.js +20 -11
  117. package/lib/molecule/learning-profile-radar-chart/index.js.map +1 -1
  118. package/lib/molecule/learning-profile-radar-chart/types.d.ts +7 -1
  119. package/lib/molecule/learning-profile-radar-chart/types.d.ts.map +1 -1
  120. package/lib/molecule/learning-profile-radar-chart/types.js.map +1 -1
  121. package/lib/molecule/skill-picker-modal/index.d.ts +23 -0
  122. package/lib/molecule/skill-picker-modal/index.d.ts.map +1 -0
  123. package/lib/molecule/skill-picker-modal/index.js +156 -0
  124. package/lib/molecule/skill-picker-modal/index.js.map +1 -0
  125. package/lib/molecule/skill-picker-modal/style.css +28 -0
  126. package/lib/molecule/skills-chart-side-information-item/index.d.ts +1 -1
  127. package/lib/molecule/skills-chart-side-information-item/index.js +1 -1
  128. package/lib/molecule/skills-chart-side-information-item/index.js.map +1 -1
  129. package/lib/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
  130. package/lib/molecule/skills-chart-side-information-panel/style.css +18 -9
  131. package/lib/organism/list-items/index.d.ts +2 -0
  132. package/lib/organism/setup-header/index.d.ts +4 -0
  133. package/lib/organism/wizard-contents/index.d.ts +3 -0
  134. package/lib/template/app-player/loading/index.d.ts +2 -0
  135. package/lib/template/app-player/player/index.d.ts +4 -0
  136. package/lib/template/app-player/player/slides/index.d.ts +2 -0
  137. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  138. package/lib/template/app-player/popin-correction/index.d.ts +2 -0
  139. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  140. package/lib/template/app-player/popin-end/index.d.ts +2 -0
  141. package/lib/template/app-review/index.d.ts +2 -0
  142. package/lib/template/app-review/index.d.ts.map +1 -1
  143. package/lib/template/app-review/player/prop-types.d.ts +2 -0
  144. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  145. package/lib/template/app-review/prop-types.d.ts +2 -0
  146. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  147. package/lib/template/back-office/brand-create/index.d.ts +4 -0
  148. package/lib/template/back-office/brand-create/index.d.ts.map +1 -1
  149. package/lib/template/back-office/brand-list/index.d.ts +4 -0
  150. package/lib/template/back-office/brand-list/index.d.ts.map +1 -1
  151. package/lib/template/back-office/brand-update/index.d.ts +11 -0
  152. package/lib/template/back-office/dashboard-preview/index.d.ts +4 -0
  153. package/lib/template/back-office/layout/index.d.ts +4 -0
  154. package/lib/template/back-office/layout/index.d.ts.map +1 -1
  155. package/lib/template/common/dashboard/index.d.ts +4 -0
  156. package/lib/template/common/search-page/index.d.ts +2 -0
  157. package/lib/template/external-course/index.d.ts +2 -0
  158. package/lib/template/my-learning/index.d.ts +34 -0
  159. package/lib/template/my-learning/index.d.ts.map +1 -0
  160. package/lib/template/my-learning/index.js +373 -0
  161. package/lib/template/my-learning/index.js.map +1 -0
  162. package/lib/template/my-learning/style.css +196 -0
  163. package/locales/en/global.json +25 -0
  164. package/locales/sl/global.json +1 -1
  165. package/package.json +3 -3
@@ -5,6 +5,7 @@ declare const ButtonLink: {
5
5
  propTypes: {
6
6
  type: import("prop-types").Requireable<string>;
7
7
  label: import("prop-types").Requireable<string>;
8
+ content: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
8
9
  'aria-label': import("prop-types").Requireable<string>;
9
10
  'data-name': import("prop-types").Requireable<string>;
10
11
  'data-testid': import("prop-types").Requireable<string>;
@@ -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;;;;;;;;;;;;;;;;;;;;;CAqEzC,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;AAwC7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;CAsEzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
@@ -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, label) => {
13
+ const getButtonContent = (icon, content) => {
14
14
  const {
15
15
  type,
16
16
  faIcon,
@@ -26,7 +26,7 @@ const getButtonContent = (icon, label) => {
26
26
  className: style.buttonContent
27
27
  }, /*#__PURE__*/React.createElement("span", {
28
28
  className: style.label
29
- }, label));
29
+ }, content));
30
30
  }
31
31
 
32
32
  const iconComponent = faIcon ? /*#__PURE__*/React.createElement(FaIcon, {
@@ -43,15 +43,16 @@ const getButtonContent = (icon, label) => {
43
43
  });
44
44
  return /*#__PURE__*/React.createElement("div", {
45
45
  className: style.buttonContent
46
- }, position === 'left' ? iconComponent : null, label ? /*#__PURE__*/React.createElement("span", {
46
+ }, position === 'left' ? iconComponent : null, content ? /*#__PURE__*/React.createElement("span", {
47
47
  className: style.label
48
- }, label) : null, position === 'right' ? iconComponent : null);
48
+ }, content) : null, position === 'right' ? iconComponent : null);
49
49
  };
50
50
 
51
51
  const ButtonLink = props => {
52
52
  const {
53
53
  type,
54
54
  label,
55
+ content,
55
56
  disabled,
56
57
  icon,
57
58
  'data-name': dataName,
@@ -64,7 +65,7 @@ const ButtonLink = props => {
64
65
  customStyle,
65
66
  useTitle = true
66
67
  } = props;
67
- const contentView = getButtonContent(icon, label);
68
+ const contentView = getButtonContent(icon, content ?? label);
68
69
  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);
69
70
  const handleOnClick = useCallback(() => onClick(), [onClick]);
70
71
  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","classnames","Link","FaIcon","ICONS","propTypes","style","getButtonContent","icon","label","type","faIcon","position","Icon","buttonContent","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, label?: string) => {\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}>{label}</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 {label ? <span className={style.label}>{label}</span> : null}\n {position === 'right' ? iconComponent : null}\n </div>\n );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n const {\n type,\n label,\n disabled,\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, 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 >\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","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,\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 >\n {contentView}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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"}
@@ -1,8 +1,10 @@
1
+ /// <reference types="react" />
1
2
  import PropTypes from 'prop-types';
2
3
  import { ICONS } from '../../util/button-icons';
3
4
  declare const propTypes: {
4
5
  type: PropTypes.Requireable<string>;
5
6
  label: PropTypes.Requireable<string>;
7
+ content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
6
8
  'aria-label': PropTypes.Requireable<string>;
7
9
  'data-name': PropTypes.Requireable<string>;
8
10
  'data-testid': PropTypes.Requireable<string>;
@@ -34,6 +36,7 @@ export declare type IconType = {
34
36
  export declare type ButtonLinkProps = {
35
37
  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';
36
38
  label?: string;
39
+ content?: React.ReactNode;
37
40
  'aria-label'?: string;
38
41
  'data-name'?: string;
39
42
  'data-testid'?: string;
@@ -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;;;;;;;;;;;;;;;;;;;CAmBd,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,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;;;;;;;;;;;;;;;;;;;;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"}
@@ -4,6 +4,7 @@ import { ICONS } from '../../util/button-icons';
4
4
  const propTypes = {
5
5
  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),
6
6
  label: PropTypes.string,
7
+ content: PropTypes.node,
7
8
  'aria-label': PropTypes.string,
8
9
  'data-name': PropTypes.string,
9
10
  'data-testid': PropTypes.string,
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","names":["PropTypes","ICONS","propTypes","type","oneOf","label","string","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 '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 '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;EAGhB,cAAcN,SAAS,CAACM,MAHR;EAIhB,aAAaN,SAAS,CAACM,MAJP;EAKhB,eAAeN,SAAS,CAACM,MALT;EAMhBC,IAAI,EAAEP,SAAS,CAACQ,KAAV,CAAgB;IACpBC,QAAQ,EAAET,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBD,IAAI,EAAEH,SAAS,CAACI,KAAV,CAAgB,MAAKH,KAAL,CAAhB;EAFc,CAAhB,CANU;EAUhBS,OAAO,EAAEV,SAAS,CAACW,IAVH;EAWhBC,IAAI,EAAEZ,SAAS,CAACQ,KAAV,CAAgB;IACpBK,IAAI,EAAEb,SAAS,CAACM,MADI;IAEpBQ,QAAQ,EAAEd,SAAS,CAACe,IAFA;IAGpBC,MAAM,EAAEhB,SAAS,CAACI,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAXU;EAgBhBa,QAAQ,EAAEjB,SAAS,CAACe,IAhBJ;EAiBhBG,SAAS,EAAElB,SAAS,CAACM,MAjBL;EAkBhBa,WAAW,EAAEnB,SAAS,CAACQ,KAAV,CAAgB,EAAhB;AAlBG,CAAlB;AAuDA,eAAeN,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","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,4 +1,4 @@
1
- export function calculateHoveredSelectedBgColor(selectedBgColor: any, luminosityDelta?: number): string;
1
+ export function calculateHoveredSelectedBgColor(selectedBgColor: any, luminosityDelta?: number): any;
2
2
  export default Chip;
3
3
  declare function Chip(props: any, context: any): JSX.Element;
4
4
  declare namespace Chip {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,wGAQN;;AAED,6DAsDC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,qGAG0E;;AAGjF,6DAsDC"}
@@ -4,7 +4,7 @@ import React, { useMemo, useState, useCallback } from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import classnames from 'classnames';
6
6
  import get from 'lodash/fp/get';
7
- import Color from 'colorjs.io';
7
+ import { convert } from 'css-color-function';
8
8
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
9
9
  import Provider from '../provider';
10
10
  import { COLORS } from '../../variables/colors';
@@ -14,11 +14,7 @@ const {
14
14
  cm_primary_blue: DEFAULT_BACKGROUND_COLOR
15
15
  } = COLORS;
16
16
  const ICON_SIZE = '12px';
17
- export const calculateHoveredSelectedBgColor = (selectedBgColor, luminosityDelta = LUMINOSITY_DELTA) => {
18
- return new Color(selectedBgColor).to('hsl').set({
19
- l: l => l * (1 - luminosityDelta)
20
- }).toString();
21
- };
17
+ export const calculateHoveredSelectedBgColor = (selectedBgColor, luminosityDelta = LUMINOSITY_DELTA) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`); // note: luminosity decrease is relative to the selected color
22
18
 
23
19
  const Chip = (props, context) => {
24
20
  const {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","Color","FontAwesomeIcon","Provider","COLORS","style","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","to","set","l","toString","Chip","props","context","text","selected","customIcon","onClick","backgroundColor","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","container","unselected","textZone","color","selectedIconWrapper","unselectedIconWrapper","contextTypes","childContextTypes","propTypes","string","bool","func"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport Color from 'colorjs.io';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n selectedBgColor,\n luminosityDelta = LUMINOSITY_DELTA\n) => {\n return new Color(selectedBgColor)\n .to('hsl')\n .set({l: l => l * (1 - luminosityDelta)})\n .toString();\n};\n\nconst Chip = (props, context) => {\n const {\n text,\n selected = false,\n customIcon,\n onClick,\n backgroundColor = DEFAULT_BACKGROUND_COLOR\n } = props;\n const {skin} = context;\n const skinColor = get('common.primary', skin);\n const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useMemo(() => onClick, [onClick]);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n\n return (\n <div\n className={classnames(style.container, !selected && style.unselected)}\n style={{\n ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n ...(selected && hoverStyle)\n }}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-label={text}\n data-name={text}\n >\n <div className={style.textZone} title={text}>\n <span className={style.text} style={selected ? {color: 'white'} : {}}>\n {text}\n </span>\n </div>\n <FontAwesomeIcon\n className={selected ? style.selectedIconWrapper : style.unselectedIconWrapper}\n icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n fontSize={ICON_SIZE}\n />\n </div>\n );\n};\n\nChip.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n text: PropTypes.string,\n selected: PropTypes.bool,\n customIcon: PropTypes.string,\n backgroundColor: PropTypes.string,\n onClick: PropTypes.func\n};\n\nexport default Chip;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","PropTypes","classnames","get","convert","FontAwesomeIcon","Provider","COLORS","style","LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Chip","props","context","text","selected","customIcon","onClick","backgroundColor","skin","skinColor","hoveredSelectedBgColor","isHovered","setIsHovered","handleClick","handleMouseEnter","handleMouseLeave","hoverStyle","defaultIcon","container","unselected","textZone","color","selectedIconWrapper","unselectedIconWrapper","contextTypes","childContextTypes","propTypes","string","bool","func"],"sources":["../../../src/atom/chip/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\n\nimport get from 'lodash/fp/get';\nimport {convert} from 'css-color-function';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport Provider from '../provider';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\n\nconst LUMINOSITY_DELTA = 0.08;\nconst {cm_primary_blue: DEFAULT_BACKGROUND_COLOR} = COLORS;\nconst ICON_SIZE = '12px';\n\nexport const calculateHoveredSelectedBgColor = (\n selectedBgColor,\n luminosityDelta = LUMINOSITY_DELTA\n) => convert(`hsl(from ${selectedBgColor} h s calc(l*(1 - ${luminosityDelta})))`);\n// note: luminosity decrease is relative to the selected color\n\nconst Chip = (props, context) => {\n const {\n text,\n selected = false,\n customIcon,\n onClick,\n backgroundColor = DEFAULT_BACKGROUND_COLOR\n } = props;\n const {skin} = context;\n const skinColor = get('common.primary', skin);\n const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;\n const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);\n\n const [isHovered, setIsHovered] = useState(false);\n\n const handleClick = useMemo(() => onClick, [onClick]);\n\n const handleMouseEnter = useCallback(() => {\n setIsHovered(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setIsHovered(false);\n }, []);\n\n const hoverStyle = isHovered ? {backgroundColor: hoveredSelectedBgColor} : {};\n\n const defaultIcon = selected ? 'fa-check' : 'fa-plus';\n\n return (\n <div\n className={classnames(style.container, !selected && style.unselected)}\n style={{\n ...(selected && selectedBgColor ? {backgroundColor: selectedBgColor} : {}),\n ...(selected && hoverStyle)\n }}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-label={text}\n data-name={text}\n >\n <div className={style.textZone} title={text}>\n <span className={style.text} style={selected ? {color: 'white'} : {}}>\n {text}\n </span>\n </div>\n <FontAwesomeIcon\n className={selected ? style.selectedIconWrapper : style.unselectedIconWrapper}\n icon={customIcon ? `fa-${customIcon}` : defaultIcon}\n fontSize={ICON_SIZE}\n />\n </div>\n );\n};\n\nChip.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nChip.propTypes = {\n text: PropTypes.string,\n selected: PropTypes.bool,\n customIcon: PropTypes.string,\n backgroundColor: PropTypes.string,\n onClick: PropTypes.func\n};\n\nexport default Chip;\n"],"mappings":"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"}
@@ -7,8 +7,8 @@
7
7
  @value white from colors;
8
8
 
9
9
  .container {
10
- width: 100%;
11
- height: 52px;
10
+ width: fit-content;
11
+ height: 44px;
12
12
  border-radius: 10px;
13
13
  padding: 10px 16px;
14
14
  position: relative;
@@ -1,5 +1,5 @@
1
1
  export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
2
- export function getForegroundColor(backgroundColor: any): string;
2
+ export function getForegroundColor(backgroundColor: any): any;
3
3
  export default Icon;
4
4
  declare const Icon: React.NamedExoticComponent<object>;
5
5
  import React from "react";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,iEACoE;;AAE3E,uDAgCG"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAiBA,mDAAoD;AAiB7C,8DAC8D;;AAGrE,uDAkCG"}
@@ -6,7 +6,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
6
6
  import toLower from 'lodash/fp/toLower';
7
7
  import merge from 'lodash/fp/merge';
8
8
  import getOr from 'lodash/fp/getOr';
9
- import Color from 'colorjs.io';
9
+ import { convert } from 'css-color-function';
10
10
  import style from './style.css';
11
11
  library.add(fas);
12
12
  const DEFAULT_PRESET = 'm';
@@ -28,13 +28,13 @@ const SIZE_CONFIGS = {
28
28
  wrapperSize: 48
29
29
  }
30
30
  };
31
- export const getForegroundColor = backgroundColor => new Color(backgroundColor).to('hsl').set({
32
- l: ICON_LUMINOSITY
33
- }).toString();
31
+ export const getForegroundColor = backgroundColor => convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`); // set lightness to 32%
32
+
34
33
  const Icon = /*#__PURE__*/React.memo(function Icon({
35
34
  iconName,
36
35
  iconColor,
37
36
  backgroundColor,
37
+ borderRadius,
38
38
  preset = DEFAULT_PRESET,
39
39
  size
40
40
  }) {
@@ -43,6 +43,7 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
43
43
  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
44
44
  const iconWrapperStyle = {
45
45
  backgroundColor,
46
+ borderRadius,
46
47
  width: wrapperSize,
47
48
  height: wrapperSize,
48
49
  padding: ICON_PADDING
@@ -60,6 +61,7 @@ Icon.propTypes = process.env.NODE_ENV !== "production" ? {
60
61
  iconName: PropTypes.string.isRequired,
61
62
  iconColor: PropTypes.string,
62
63
  backgroundColor: PropTypes.string,
64
+ borderRadius: PropTypes.string,
63
65
  preset: PropTypes.oneOf(['s', 'm', 'xl']),
64
66
  size: PropTypes.shape({
65
67
  faSize: number,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","Color","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","to","set","l","toString","Icon","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","iconWrapperStyle","width","height","padding","iconWrapper","propTypes","string","isRequired","oneOf","shape"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport Color from 'colorjs.io';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n s: {\n faSize: 12,\n wrapperSize: 32\n },\n m: {\n faSize: 16,\n wrapperSize: DEFAULT_WRAPPER_SIZE\n },\n xl: {\n faSize: 20,\n wrapperSize: 48\n }\n};\n\nexport const getForegroundColor = backgroundColor =>\n new Color(backgroundColor).to('hsl').set({l: ICON_LUMINOSITY}).toString();\n\nconst Icon = React.memo(function Icon({\n iconName,\n iconColor,\n backgroundColor,\n preset = DEFAULT_PRESET,\n size\n}) {\n const effectiveIconColor =\n iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);\n\n const effectiveSize = size\n ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n const iconWrapperStyle = {\n backgroundColor,\n width: wrapperSize,\n height: wrapperSize,\n padding: ICON_PADDING\n };\n\n return (\n <div className={style.iconWrapper} style={iconWrapperStyle}>\n <FontAwesomeIcon\n icon={`fa-${iconName}`}\n color={effectiveIconColor}\n fontSize={effectiveSize.faSize}\n />\n </div>\n );\n});\n\nIcon.propTypes = {\n iconName: PropTypes.string.isRequired,\n iconColor: PropTypes.string,\n backgroundColor: PropTypes.string,\n preset: PropTypes.oneOf(['s', 'm', 'xl']),\n size: PropTypes.shape({\n faSize: number,\n wrapperSize: PropTypes.number\n })\n};\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,IAAmBC,MAAnB,QAAgC,YAAhC;AACA,SAAQC,eAAR,QAA8B,gCAA9B;AACA,SAAQC,GAAR,QAAkB,kCAAlB;AACA,SAAQC,OAAR,QAAsB,mCAAtB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,iBAAlB;AACA,OAAOC,KAAP,MAAkB,YAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEAL,OAAO,CAACM,GAAR,CAAYP,GAAZ;AAEA,MAAMQ,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACA,MAAMC,YAAY,GAAG,CAArB;AACA,OAAO,MAAMC,kBAAkB,GAAG,iBAA3B;AAEP,MAAMC,YAAY,GAAG;EACnBC,CAAC,EAAE;IACDC,MAAM,EAAE,EADP;IAEDC,WAAW,EAAE;EAFZ,CADgB;EAKnBC,CAAC,EAAE;IACDF,MAAM,EAAE,EADP;IAEDC,WAAW,EAAEN;EAFZ,CALgB;EASnBQ,EAAE,EAAE;IACFH,MAAM,EAAE,EADN;IAEFC,WAAW,EAAE;EAFX;AATe,CAArB;AAeA,OAAO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAIf,KAAJ,CAAUe,eAAV,EAA2BC,EAA3B,CAA8B,KAA9B,EAAqCC,GAArC,CAAyC;EAACC,CAAC,EAAEd;AAAJ,CAAzC,EAA+De,QAA/D,EADK;AAGP,MAAMC,IAAI,gBAAG7B,KAAK,CAAC8B,IAAN,CAAW,SAASD,IAAT,CAAc;EACpCE,QADoC;EAEpCC,SAFoC;EAGpCR,eAHoC;EAIpCS,MAAM,GAAGrB,cAJ2B;EAKpCsB;AALoC,CAAd,EAMrB;EACD,MAAMC,kBAAkB,GACtBH,SAAS,KAAKR,eAAe,GAAGD,kBAAkB,CAACC,eAAD,CAArB,GAAyCR,kBAA7D,CADX;EAGA,MAAMoB,aAAa,GAAGF,IAAI,GACtB3B,KAAK,CAACU,YAAY,CAACL,cAAD,CAAb,EAA+BsB,IAA/B,CADiB,GAEtB1B,KAAK,CAACS,YAAY,CAACL,cAAD,CAAb,EAA+BN,OAAO,CAAC2B,MAAD,CAAtC,EAAgDhB,YAAhD,CAFT;EAIA,MAAMG,WAAW,GAAGgB,aAAa,CAAChB,WAAd,GAA4BL,YAAY,GAAG,CAA/D;EAEA,MAAMsB,gBAAgB,GAAG;IACvBb,eADuB;IAEvBc,KAAK,EAAElB,WAFgB;IAGvBmB,MAAM,EAAEnB,WAHe;IAIvBoB,OAAO,EAAEzB;EAJc,CAAzB;EAOA,oBACE;IAAK,SAAS,EAAEL,KAAK,CAAC+B,WAAtB;IAAmC,KAAK,EAAEJ;EAA1C,gBACE,oBAAC,eAAD;IACE,IAAI,EAAG,MAAKN,QAAS,EADvB;IAEE,KAAK,EAAEI,kBAFT;IAGE,QAAQ,EAAEC,aAAa,CAACjB;EAH1B,EADF,CADF;AASD,CAhCY,CAAb;AAkCAU,IAAI,CAACa,SAAL,2CAAiB;EACfX,QAAQ,EAAE9B,SAAS,CAAC0C,MAAV,CAAiBC,UADZ;EAEfZ,SAAS,EAAE/B,SAAS,CAAC0C,MAFN;EAGfnB,eAAe,EAAEvB,SAAS,CAAC0C,MAHZ;EAIfV,MAAM,EAAEhC,SAAS,CAAC4C,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CAJO;EAKfX,IAAI,EAAEjC,SAAS,CAAC6C,KAAV,CAAgB;IACpB3B,MAAM,EAAEjB,MADY;IAEpBkB,WAAW,EAAEnB,SAAS,CAACC;EAFH,CAAhB;AALS,CAAjB;AAWA,eAAe2B,IAAf"}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","convert","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","Icon","memo","iconName","iconColor","borderRadius","preset","size","effectiveIconColor","effectiveSize","iconWrapperStyle","width","height","padding","iconWrapper","propTypes","string","isRequired","oneOf","shape"],"sources":["../../../src/atom/icon/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes, {number} from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {library} from '@fortawesome/fontawesome-svg-core';\nimport toLower from 'lodash/fp/toLower';\nimport merge from 'lodash/fp/merge';\nimport getOr from 'lodash/fp/getOr';\nimport {convert} from 'css-color-function';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nconst DEFAULT_PRESET = 'm';\nconst ICON_LUMINOSITY = 32;\nconst DEFAULT_WRAPPER_SIZE = 40;\nconst ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nconst SIZE_CONFIGS = {\n s: {\n faSize: 12,\n wrapperSize: 32\n },\n m: {\n faSize: 16,\n wrapperSize: DEFAULT_WRAPPER_SIZE\n },\n xl: {\n faSize: 20,\n wrapperSize: 48\n }\n};\n\nexport const getForegroundColor = backgroundColor =>\n convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);\n// set lightness to 32%\n\nconst Icon = React.memo(function Icon({\n iconName,\n iconColor,\n backgroundColor,\n borderRadius,\n preset = DEFAULT_PRESET,\n size\n}) {\n const effectiveIconColor =\n iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);\n\n const effectiveSize = size\n ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size)\n : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);\n\n const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n\n const iconWrapperStyle = {\n backgroundColor,\n borderRadius,\n width: wrapperSize,\n height: wrapperSize,\n padding: ICON_PADDING\n };\n\n return (\n <div className={style.iconWrapper} style={iconWrapperStyle}>\n <FontAwesomeIcon\n icon={`fa-${iconName}`}\n color={effectiveIconColor}\n fontSize={effectiveSize.faSize}\n />\n </div>\n );\n});\n\nIcon.propTypes = {\n iconName: PropTypes.string.isRequired,\n iconColor: PropTypes.string,\n backgroundColor: PropTypes.string,\n borderRadius: PropTypes.string,\n preset: PropTypes.oneOf(['s', 'm', 'xl']),\n size: PropTypes.shape({\n faSize: number,\n wrapperSize: PropTypes.number\n })\n};\n\nexport default Icon;\n"],"mappings":"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"}
@@ -0,0 +1,33 @@
1
+ export default BaseModal;
2
+ declare function BaseModal(props: any): JSX.Element | null;
3
+ declare namespace BaseModal {
4
+ namespace propTypes {
5
+ const title: PropTypes.Requireable<string>;
6
+ const headerIcon: PropTypes.Requireable<PropTypes.InferProps<{
7
+ name: PropTypes.Requireable<string>;
8
+ color: PropTypes.Requireable<string>;
9
+ backgroundColor: PropTypes.Requireable<string>;
10
+ }>>;
11
+ const description: PropTypes.Requireable<string>;
12
+ const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
13
+ const isOpen: PropTypes.Requireable<boolean>;
14
+ const footer: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
15
+ text: PropTypes.Requireable<string>;
16
+ isError: any;
17
+ cancelButton: PropTypes.Requireable<PropTypes.InferProps<{
18
+ label: PropTypes.Requireable<string>;
19
+ onCancel: PropTypes.Requireable<(...args: any[]) => any>;
20
+ disabled: PropTypes.Requireable<boolean>;
21
+ }>>;
22
+ confirmButton: PropTypes.Requireable<PropTypes.InferProps<{
23
+ label: PropTypes.Requireable<string>;
24
+ onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
25
+ iconName: PropTypes.Requireable<string>;
26
+ disabled: PropTypes.Requireable<boolean>;
27
+ }>>;
28
+ }> | null | undefined>>;
29
+ const onClose: PropTypes.Requireable<(...args: any[]) => any>;
30
+ }
31
+ }
32
+ import PropTypes from "prop-types";
33
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/base-modal/index.js"],"names":[],"mappings":";AAOA,2DAmGC"}
@@ -0,0 +1,142 @@
1
+ import _isEmpty from "lodash/fp/isEmpty";
2
+
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+
5
+ import React, { useCallback } from 'react';
6
+ import PropTypes from 'prop-types';
7
+ import Icon from '../../atom/icon';
8
+ import ButtonLink from '../../atom/button-link';
9
+ import style from './style.css';
10
+
11
+ const BaseModal = props => {
12
+ const {
13
+ title,
14
+ description,
15
+ headerIcon,
16
+ children,
17
+ isOpen,
18
+ footer,
19
+ onClose
20
+ } = props;
21
+ const Footer = useCallback(() => {
22
+ if (_isEmpty(footer)) return null;
23
+ if (typeof footer === 'function') return footer();
24
+ const {
25
+ cancelButton,
26
+ confirmButton,
27
+ text,
28
+ isError
29
+ } = footer;
30
+ const {
31
+ label: cancelLabel,
32
+ onCancel,
33
+ disabled: cancelDisabled
34
+ } = cancelButton || {};
35
+ const {
36
+ label: confirmLabel,
37
+ onConfirm,
38
+ disabled: confirmDisabled,
39
+ iconName
40
+ } = confirmButton || {};
41
+ return /*#__PURE__*/React.createElement("div", {
42
+ className: style.footer
43
+ }, /*#__PURE__*/React.createElement("div", {
44
+ className: style.footerCTAWrapper
45
+ }, onCancel && cancelLabel ? /*#__PURE__*/React.createElement(ButtonLink, {
46
+ className: style.footerCancelButton,
47
+ type: 'secondary',
48
+ onClick: onCancel,
49
+ label: cancelLabel,
50
+ disabled: cancelDisabled
51
+ }) : null, onConfirm && confirmLabel ? /*#__PURE__*/React.createElement(ButtonLink, _extends({
52
+ className: style.footerConfirmButton,
53
+ type: 'primary',
54
+ onClick: onConfirm,
55
+ label: confirmLabel,
56
+ disabled: confirmDisabled
57
+ }, iconName ? {
58
+ icon: {
59
+ position: 'left',
60
+ faIcon: {
61
+ name: iconName,
62
+ color: '#FFFFFF',
63
+ size: 16
64
+ }
65
+ }
66
+ } : {})) : null), text ? /*#__PURE__*/React.createElement("div", {
67
+ className: `${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`
68
+ }, text) : null);
69
+ }, [footer]);
70
+ if (!isOpen || !title || !children) return null;
71
+
72
+ function handleOnClose(e) {
73
+ e?.stopPropagation();
74
+ onClose();
75
+ }
76
+
77
+ return /*#__PURE__*/React.createElement("div", {
78
+ className: style.modalWrapper
79
+ }, /*#__PURE__*/React.createElement("div", {
80
+ className: style.modal
81
+ }, /*#__PURE__*/React.createElement("header", {
82
+ className: style.header
83
+ }, headerIcon?.name ? /*#__PURE__*/React.createElement("div", {
84
+ className: style.headerIcon
85
+ }, /*#__PURE__*/React.createElement(Icon, {
86
+ iconName: headerIcon.name,
87
+ iconColor: headerIcon.color,
88
+ backgroundColor: headerIcon.backgroundColor,
89
+ size: {
90
+ faSize: 20,
91
+ wrapperSize: 48
92
+ }
93
+ })) : null, /*#__PURE__*/React.createElement("div", {
94
+ className: style.headerContent
95
+ }, /*#__PURE__*/React.createElement("div", {
96
+ className: style.headerTitle
97
+ }, title), description ? /*#__PURE__*/React.createElement("div", {
98
+ className: style.headerDescription
99
+ }, description) : null), /*#__PURE__*/React.createElement("div", {
100
+ className: style.headerCloseIcon,
101
+ onClick: handleOnClose
102
+ }, /*#__PURE__*/React.createElement(Icon, {
103
+ iconName: "close",
104
+ backgroundColor: "#F4F4F5",
105
+ size: {
106
+ faSize: 14,
107
+ wrapperSize: 28
108
+ }
109
+ }))), /*#__PURE__*/React.createElement("div", {
110
+ className: style.body
111
+ }, children), /*#__PURE__*/React.createElement(Footer, null)));
112
+ };
113
+
114
+ BaseModal.propTypes = process.env.NODE_ENV !== "production" ? {
115
+ title: PropTypes.string,
116
+ headerIcon: PropTypes.shape({
117
+ name: PropTypes.string,
118
+ color: PropTypes.string,
119
+ backgroundColor: PropTypes.string
120
+ }),
121
+ description: PropTypes.string,
122
+ children: PropTypes.node,
123
+ isOpen: PropTypes.bool,
124
+ footer: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
125
+ text: PropTypes.string,
126
+ isError: PropTypes.boolean,
127
+ cancelButton: PropTypes.shape({
128
+ label: PropTypes.string,
129
+ onCancel: PropTypes.func,
130
+ disabled: PropTypes.bool
131
+ }),
132
+ confirmButton: PropTypes.shape({
133
+ label: PropTypes.string,
134
+ onConfirm: PropTypes.func,
135
+ iconName: PropTypes.string,
136
+ disabled: PropTypes.bool
137
+ })
138
+ })]),
139
+ onClose: PropTypes.func
140
+ } : {};
141
+ export default BaseModal;
142
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Icon","ButtonLink","style","BaseModal","props","title","description","headerIcon","children","isOpen","footer","onClose","Footer","cancelButton","confirmButton","text","isError","label","cancelLabel","onCancel","disabled","cancelDisabled","confirmLabel","onConfirm","confirmDisabled","iconName","footerCTAWrapper","className","footerCancelButton","type","onClick","footerConfirmButton","icon","position","faIcon","name","color","size","footerDescription","footerDescriptionError","handleOnClose","e","stopPropagation","modalWrapper","modal","header","backgroundColor","faSize","wrapperSize","headerContent","headerTitle","headerDescription","headerCloseIcon","body","propTypes","string","shape","node","bool","oneOfType","func","boolean"],"sources":["../../../src/molecule/base-modal/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ButtonLink from '../../atom/button-link';\nimport style from './style.css';\n\nconst BaseModal = props => {\n const {title, description, headerIcon, children, isOpen, footer, onClose} = props;\n\n const Footer = useCallback(() => {\n if (isEmpty(footer)) return null;\n if (typeof footer === 'function') return footer();\n\n const {cancelButton, confirmButton, text, isError} = footer;\n const {label: cancelLabel, onCancel, disabled: cancelDisabled} = cancelButton || {};\n const {\n label: confirmLabel,\n onConfirm,\n disabled: confirmDisabled,\n iconName\n } = confirmButton || {};\n\n return (\n <div className={style.footer}>\n <div className={style.footerCTAWrapper}>\n {onCancel && cancelLabel ? (\n <ButtonLink\n {...{\n className: style.footerCancelButton,\n type: 'secondary',\n onClick: onCancel,\n label: cancelLabel,\n disabled: cancelDisabled\n }}\n />\n ) : null}\n {onConfirm && confirmLabel ? (\n <ButtonLink\n {...{\n className: style.footerConfirmButton,\n type: 'primary',\n onClick: onConfirm,\n label: confirmLabel,\n disabled: confirmDisabled,\n ...(iconName\n ? {\n icon: {\n position: 'left',\n faIcon: {\n name: iconName,\n color: '#FFFFFF',\n size: 16\n }\n }\n }\n : {})\n }}\n />\n ) : null}\n </div>\n {text ? (\n <div\n className={`${style.footerDescription} ${isError ? style.footerDescriptionError : ''}`}\n >\n {text}\n </div>\n ) : null}\n </div>\n );\n }, [footer]);\n\n if (!isOpen || !title || !children) return null;\n\n function handleOnClose(e) {\n e?.stopPropagation();\n onClose();\n }\n\n return (\n <div className={style.modalWrapper}>\n <div className={style.modal}>\n <header className={style.header}>\n {headerIcon?.name ? (\n <div className={style.headerIcon}>\n <Icon\n iconName={headerIcon.name}\n iconColor={headerIcon.color}\n backgroundColor={headerIcon.backgroundColor}\n size={{faSize: 20, wrapperSize: 48}}\n />\n </div>\n ) : null}\n <div className={style.headerContent}>\n <div className={style.headerTitle}>{title}</div>\n {description ? <div className={style.headerDescription}>{description}</div> : null}\n </div>\n <div className={style.headerCloseIcon} onClick={handleOnClose}>\n <Icon iconName=\"close\" backgroundColor=\"#F4F4F5\" size={{faSize: 14, wrapperSize: 28}} />\n </div>\n </header>\n <div className={style.body}>{children}</div>\n <Footer />\n </div>\n </div>\n );\n};\n\nBaseModal.propTypes = {\n title: PropTypes.string,\n headerIcon: PropTypes.shape({\n name: PropTypes.string,\n color: PropTypes.string,\n backgroundColor: PropTypes.string\n }),\n description: PropTypes.string,\n children: PropTypes.node,\n isOpen: PropTypes.bool,\n footer: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.shape({\n text: PropTypes.string,\n isError: PropTypes.boolean,\n cancelButton: PropTypes.shape({\n label: PropTypes.string,\n onCancel: PropTypes.func,\n disabled: PropTypes.bool\n }),\n confirmButton: PropTypes.shape({\n label: PropTypes.string,\n onConfirm: PropTypes.func,\n iconName: PropTypes.string,\n disabled: PropTypes.bool\n })\n })\n ]),\n onClose: PropTypes.func\n};\n\nexport default BaseModal;\n"],"mappings":"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"}