@coorpacademy/components 11.35.2 → 11.35.3-forcedeploy3.1

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 (217) hide show
  1. package/es/atom/button-link/index.js +1 -1
  2. package/es/atom/button-link/index.js.map +1 -1
  3. package/es/atom/button-link/style.css +2 -2
  4. package/es/atom/icon/index.d.ts +35 -17
  5. package/es/atom/icon/index.d.ts.map +1 -1
  6. package/es/atom/icon/index.js +32 -15
  7. package/es/atom/icon/index.js.map +1 -1
  8. package/es/atom/radio-with-title/index.d.ts +13 -3
  9. package/es/atom/radio-with-title/index.d.ts.map +1 -1
  10. package/es/atom/radio-with-title/types.d.ts +13 -2
  11. package/es/atom/radio-with-title/types.d.ts.map +1 -1
  12. package/es/atom/status-item/index.native.js +1 -1
  13. package/es/atom/status-item/index.native.js.map +1 -1
  14. package/es/atom/tag/index.d.ts +12 -1
  15. package/es/atom/tag/style.css +1 -0
  16. package/es/atom/title/index.d.ts +13 -2
  17. package/es/molecule/banner/style.css +1 -0
  18. package/es/molecule/base-modal/style.css +0 -1
  19. package/es/molecule/bulk-progress-bar/index.js +2 -2
  20. package/es/molecule/bulk-progress-bar/index.js.map +1 -1
  21. package/es/molecule/certification-card/index.js +1 -1
  22. package/es/molecule/certification-card/index.js.map +1 -1
  23. package/es/molecule/cm-popin/types.d.ts +28 -7
  24. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  25. package/es/molecule/cm-popin/types.js +1 -1
  26. package/es/molecule/cm-popin/types.js.map +1 -1
  27. package/es/molecule/dashboard/cards-list/index.d.ts.map +1 -1
  28. package/es/molecule/dashboard/cards-list/index.js +2 -0
  29. package/es/molecule/dashboard/cards-list/index.js.map +1 -1
  30. package/es/molecule/icon-preview/index.d.ts.map +1 -1
  31. package/es/molecule/icon-preview/index.js +2 -1
  32. package/es/molecule/icon-preview/index.js.map +1 -1
  33. package/es/molecule/icon-preview/style.css +4 -0
  34. package/es/molecule/learner-skill-card/index.js +10 -8
  35. package/es/molecule/learner-skill-card/index.js.map +1 -1
  36. package/es/molecule/learner-skill-card/style.css +1 -0
  37. package/es/molecule/learning-priority-modal/style.css +3 -2
  38. package/es/molecule/progress-wrapper/index.js +1 -1
  39. package/es/molecule/progress-wrapper/index.js.map +1 -1
  40. package/es/molecule/skills-chart-side-information-item/index.d.ts +1 -1
  41. package/es/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
  42. package/es/molecule/title-and-checkbox-wrapper/index.d.ts +13 -2
  43. package/es/molecule/title-radio-wrapper/index.d.ts +13 -3
  44. package/es/molecule/title-radio-wrapper/index.d.ts.map +1 -1
  45. package/es/molecule/title-radio-wrapper/types.d.ts +13 -2
  46. package/es/molecule/title-radio-wrapper/types.d.ts.map +1 -1
  47. package/es/organism/cards-grid/index.d.ts +48 -10
  48. package/es/organism/cards-grid/index.d.ts.map +1 -1
  49. package/es/organism/cards-grid/index.js +3 -2
  50. package/es/organism/cards-grid/index.js.map +1 -1
  51. package/es/organism/content-skill-modal/index.d.ts +13 -3
  52. package/es/organism/content-skill-modal/index.d.ts.map +1 -1
  53. package/es/organism/content-skill-modal/types.d.ts +12 -2
  54. package/es/organism/content-skill-modal/types.d.ts.map +1 -1
  55. package/es/organism/list-item/index.js +5 -5
  56. package/es/organism/list-item/index.js.map +1 -1
  57. package/es/organism/list-item/style.css +23 -17
  58. package/es/organism/list-items/index.d.ts +13 -2
  59. package/es/organism/rewards-form/index.d.ts +13 -2
  60. package/es/organism/select-opponents/index.d.ts +13 -3
  61. package/es/organism/select-opponents/index.d.ts.map +1 -1
  62. package/es/organism/select-opponents/types.d.ts +13 -2
  63. package/es/organism/select-opponents/types.d.ts.map +1 -1
  64. package/es/organism/sidebar/index.d.ts +2 -2
  65. package/es/organism/title-and-input/index.d.ts +25 -5
  66. package/es/organism/title-and-input/index.d.ts.map +1 -1
  67. package/es/organism/title-and-input/types.d.ts +24 -4
  68. package/es/organism/title-and-input/types.d.ts.map +1 -1
  69. package/es/organism/wizard-contents/index.d.ts +13 -2
  70. package/es/template/app-player/loading/index.d.ts +27 -6
  71. package/es/template/app-player/player/index.d.ts +53 -12
  72. package/es/template/app-player/player/slides/index.d.ts +27 -6
  73. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  74. package/es/template/app-player/popin-correction/index.d.ts +26 -6
  75. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  76. package/es/template/app-player/popin-end/index.d.ts +27 -6
  77. package/es/template/app-review/index.d.ts +27 -7
  78. package/es/template/app-review/index.d.ts.map +1 -1
  79. package/es/template/app-review/player/prop-types.d.ts +27 -6
  80. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  81. package/es/template/app-review/prop-types.d.ts +27 -6
  82. package/es/template/app-review/prop-types.d.ts.map +1 -1
  83. package/es/template/back-office/brand-update/index.d.ts +63 -12
  84. package/es/template/back-office/brand-update/utils.d.ts +1 -1
  85. package/es/template/common/dashboard/index.d.ts +53 -12
  86. package/es/template/common/search-page/index.d.ts +27 -6
  87. package/es/template/external-course/index.d.ts +27 -6
  88. package/es/template/skill-detail/all-courses.css +3 -2
  89. package/es/template/skill-detail/all-courses.d.ts +52 -17
  90. package/es/template/skill-detail/all-courses.d.ts.map +1 -1
  91. package/es/template/skill-detail/all-courses.js +12 -11
  92. package/es/template/skill-detail/all-courses.js.map +1 -1
  93. package/es/template/skill-detail/continue-learning.css +7 -2
  94. package/es/template/skill-detail/continue-learning.d.ts +25 -12
  95. package/es/template/skill-detail/continue-learning.d.ts.map +1 -1
  96. package/es/template/skill-detail/continue-learning.js.map +1 -1
  97. package/es/template/skill-detail/index.d.ts +89 -71
  98. package/es/template/skill-detail/index.d.ts.map +1 -1
  99. package/es/template/skill-detail/index.js +95 -55
  100. package/es/template/skill-detail/index.js.map +1 -1
  101. package/es/template/skill-detail/style.css +97 -39
  102. package/es/variables/colors.css +2 -0
  103. package/es/variables/colors.d.ts +3 -2
  104. package/es/variables/colors.d.ts.map +1 -1
  105. package/es/variables/colors.js +4 -3
  106. package/es/variables/colors.js.map +1 -1
  107. package/es/variables/theme.native.js +1 -1
  108. package/es/variables/theme.native.js.map +1 -1
  109. package/lib/atom/button-link/index.js +1 -1
  110. package/lib/atom/button-link/index.js.map +1 -1
  111. package/lib/atom/button-link/style.css +2 -2
  112. package/lib/atom/icon/index.d.ts +35 -17
  113. package/lib/atom/icon/index.d.ts.map +1 -1
  114. package/lib/atom/icon/index.js +34 -18
  115. package/lib/atom/icon/index.js.map +1 -1
  116. package/lib/atom/radio-with-title/index.d.ts +13 -3
  117. package/lib/atom/radio-with-title/index.d.ts.map +1 -1
  118. package/lib/atom/radio-with-title/types.d.ts +13 -2
  119. package/lib/atom/radio-with-title/types.d.ts.map +1 -1
  120. package/lib/atom/status-item/index.native.js +1 -1
  121. package/lib/atom/status-item/index.native.js.map +1 -1
  122. package/lib/atom/tag/index.d.ts +12 -1
  123. package/lib/atom/tag/style.css +1 -0
  124. package/lib/atom/title/index.d.ts +13 -2
  125. package/lib/molecule/banner/style.css +1 -0
  126. package/lib/molecule/base-modal/style.css +0 -1
  127. package/lib/molecule/bulk-progress-bar/index.js +2 -2
  128. package/lib/molecule/bulk-progress-bar/index.js.map +1 -1
  129. package/lib/molecule/certification-card/index.js +1 -1
  130. package/lib/molecule/certification-card/index.js.map +1 -1
  131. package/lib/molecule/cm-popin/types.d.ts +28 -7
  132. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  133. package/lib/molecule/cm-popin/types.js +1 -1
  134. package/lib/molecule/cm-popin/types.js.map +1 -1
  135. package/lib/molecule/dashboard/cards-list/index.d.ts.map +1 -1
  136. package/lib/molecule/dashboard/cards-list/index.js +2 -0
  137. package/lib/molecule/dashboard/cards-list/index.js.map +1 -1
  138. package/lib/molecule/icon-preview/index.d.ts.map +1 -1
  139. package/lib/molecule/icon-preview/index.js +2 -1
  140. package/lib/molecule/icon-preview/index.js.map +1 -1
  141. package/lib/molecule/icon-preview/style.css +4 -0
  142. package/lib/molecule/learner-skill-card/index.js +10 -8
  143. package/lib/molecule/learner-skill-card/index.js.map +1 -1
  144. package/lib/molecule/learner-skill-card/style.css +1 -0
  145. package/lib/molecule/learning-priority-modal/style.css +3 -2
  146. package/lib/molecule/progress-wrapper/index.js +1 -1
  147. package/lib/molecule/progress-wrapper/index.js.map +1 -1
  148. package/lib/molecule/skills-chart-side-information-item/index.d.ts +1 -1
  149. package/lib/molecule/skills-chart-side-information-panel/index.d.ts +1 -1
  150. package/lib/molecule/title-and-checkbox-wrapper/index.d.ts +13 -2
  151. package/lib/molecule/title-radio-wrapper/index.d.ts +13 -3
  152. package/lib/molecule/title-radio-wrapper/index.d.ts.map +1 -1
  153. package/lib/molecule/title-radio-wrapper/types.d.ts +13 -2
  154. package/lib/molecule/title-radio-wrapper/types.d.ts.map +1 -1
  155. package/lib/organism/cards-grid/index.d.ts +48 -10
  156. package/lib/organism/cards-grid/index.d.ts.map +1 -1
  157. package/lib/organism/cards-grid/index.js +3 -2
  158. package/lib/organism/cards-grid/index.js.map +1 -1
  159. package/lib/organism/content-skill-modal/index.d.ts +13 -3
  160. package/lib/organism/content-skill-modal/index.d.ts.map +1 -1
  161. package/lib/organism/content-skill-modal/types.d.ts +12 -2
  162. package/lib/organism/content-skill-modal/types.d.ts.map +1 -1
  163. package/lib/organism/list-item/index.js +5 -5
  164. package/lib/organism/list-item/index.js.map +1 -1
  165. package/lib/organism/list-item/style.css +23 -17
  166. package/lib/organism/list-items/index.d.ts +13 -2
  167. package/lib/organism/rewards-form/index.d.ts +13 -2
  168. package/lib/organism/select-opponents/index.d.ts +13 -3
  169. package/lib/organism/select-opponents/index.d.ts.map +1 -1
  170. package/lib/organism/select-opponents/types.d.ts +13 -2
  171. package/lib/organism/select-opponents/types.d.ts.map +1 -1
  172. package/lib/organism/sidebar/index.d.ts +2 -2
  173. package/lib/organism/title-and-input/index.d.ts +25 -5
  174. package/lib/organism/title-and-input/index.d.ts.map +1 -1
  175. package/lib/organism/title-and-input/types.d.ts +24 -4
  176. package/lib/organism/title-and-input/types.d.ts.map +1 -1
  177. package/lib/organism/wizard-contents/index.d.ts +13 -2
  178. package/lib/template/app-player/loading/index.d.ts +27 -6
  179. package/lib/template/app-player/player/index.d.ts +53 -12
  180. package/lib/template/app-player/player/slides/index.d.ts +27 -6
  181. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  182. package/lib/template/app-player/popin-correction/index.d.ts +26 -6
  183. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  184. package/lib/template/app-player/popin-end/index.d.ts +27 -6
  185. package/lib/template/app-review/index.d.ts +27 -7
  186. package/lib/template/app-review/index.d.ts.map +1 -1
  187. package/lib/template/app-review/player/prop-types.d.ts +27 -6
  188. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  189. package/lib/template/app-review/prop-types.d.ts +27 -6
  190. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  191. package/lib/template/back-office/brand-update/index.d.ts +63 -12
  192. package/lib/template/back-office/brand-update/utils.d.ts +1 -1
  193. package/lib/template/common/dashboard/index.d.ts +53 -12
  194. package/lib/template/common/search-page/index.d.ts +27 -6
  195. package/lib/template/external-course/index.d.ts +27 -6
  196. package/lib/template/skill-detail/all-courses.css +3 -2
  197. package/lib/template/skill-detail/all-courses.d.ts +52 -17
  198. package/lib/template/skill-detail/all-courses.d.ts.map +1 -1
  199. package/lib/template/skill-detail/all-courses.js +11 -11
  200. package/lib/template/skill-detail/all-courses.js.map +1 -1
  201. package/lib/template/skill-detail/continue-learning.css +7 -2
  202. package/lib/template/skill-detail/continue-learning.d.ts +25 -12
  203. package/lib/template/skill-detail/continue-learning.d.ts.map +1 -1
  204. package/lib/template/skill-detail/continue-learning.js.map +1 -1
  205. package/lib/template/skill-detail/index.d.ts +89 -71
  206. package/lib/template/skill-detail/index.d.ts.map +1 -1
  207. package/lib/template/skill-detail/index.js +95 -55
  208. package/lib/template/skill-detail/index.js.map +1 -1
  209. package/lib/template/skill-detail/style.css +97 -39
  210. package/lib/variables/colors.css +2 -0
  211. package/lib/variables/colors.d.ts +3 -2
  212. package/lib/variables/colors.d.ts.map +1 -1
  213. package/lib/variables/colors.js +4 -3
  214. package/lib/variables/colors.js.map +1 -1
  215. package/lib/variables/theme.native.js +1 -1
  216. package/lib/variables/theme.native.js.map +1 -1
  217. package/package.json +2 -2
@@ -29,7 +29,7 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
29
29
  iconName: faIcon.name,
30
30
  iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,
31
31
  // eslint-disable-next-line no-nested-ternary
32
- backgroundColor: !faIcon?.backgroundColor ? 'transparent' : hovered && hoverBackgroundColor ? hoverBackgroundColor : faIcon.backgroundColor,
32
+ backgroundColor: !faIcon?.backgroundColor ? null : hovered && hoverBackgroundColor ? hoverBackgroundColor : faIcon.backgroundColor,
33
33
  size: {
34
34
  faSize: faIcon.size,
35
35
  wrapperSize: faIcon.size
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","DEFAULT_ICON_COLOR","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","createElement","className","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"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, {DEFAULT_ICON_COLOR} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\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\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: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: !faIcon?.backgroundColor\n ? 'transparent'\n : hovered && hoverBackgroundColor\n ? hoverBackgroundColor\n : faIcon.backgroundColor,\n size: {\n faSize: faIcon.size,\n wrapperSize: faIcon.size\n },\n customStyle: faIcon.customStyle\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 usage = 'button',\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 tooltipText,\n tooltipPlacement = 'left',\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 !label && style.iconButton,\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(event => onClick(event), [onClick]);\n\n const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n const handleMouseOver = useCallback(() => {\n setHovered(true);\n }, [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n [tooltipText, ariaLabel]\n );\n\n const renderToolTip = () => {\n const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n if (!closeToolTipInformationTextAriaLabel) return null;\n return (\n <ToolTip\n fontSize={12}\n anchorId=\"button-icon\"\n toolTipIsVisible={hovered}\n placement={tooltipPlacement}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n />\n );\n };\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 hoverColor={hoverColor}\n hoverBackgroundColor={hoverBackgroundColor}\n onMouseEnter={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n {renderToolTip()}\n </Link>\n );\n }\n\n return (\n <button\n {...(useTitle && {\n title: ariaLabel || label\n })}\n {...(ariaLabel && !label\n ? {\n 'data-for': 'button-icon',\n 'data-tip': hovered\n }\n : {})}\n // eslint-disable-next-line react/button-has-type\n type={usage}\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 {renderToolTip()}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","DEFAULT_ICON_COLOR","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","type","faIcon","position","Icon","createElement","className","buttonContent","label","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"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, {DEFAULT_ICON_COLOR, IconProps} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\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\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: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n // eslint-disable-next-line no-nested-ternary\n backgroundColor: !faIcon?.backgroundColor\n ? null\n : hovered && hoverBackgroundColor\n ? hoverBackgroundColor\n : faIcon.backgroundColor,\n size: {\n faSize: faIcon.size,\n wrapperSize: faIcon.size\n },\n customStyle: faIcon.customStyle\n } as IconProps)}\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 usage = 'button',\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 tooltipText,\n tooltipPlacement = 'left',\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 !label && style.iconButton,\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(event => onClick(event), [onClick]);\n\n const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n const handleMouseOver = useCallback(() => {\n setHovered(true);\n }, [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const TooltipContent = useCallback(\n () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n [tooltipText, ariaLabel]\n );\n\n const renderToolTip = () => {\n const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n if (!closeToolTipInformationTextAriaLabel) return null;\n return (\n <ToolTip\n fontSize={12}\n anchorId=\"button-icon\"\n toolTipIsVisible={hovered}\n placement={tooltipPlacement}\n TooltipContent={TooltipContent}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n />\n );\n };\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 hoverColor={hoverColor}\n hoverBackgroundColor={hoverBackgroundColor}\n onMouseEnter={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n >\n {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n {renderToolTip()}\n </Link>\n );\n }\n\n return (\n <button\n {...(useTitle && {\n title: ariaLabel || label\n })}\n {...(ariaLabel && !label\n ? {\n 'data-for': 'button-icon',\n 'data-tip': hovered\n }\n : {})}\n // eslint-disable-next-line react/button-has-type\n type={usage}\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 {renderToolTip()}\n </button>\n );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
@@ -22,7 +22,7 @@
22
22
  align-items: center;
23
23
  cursor: pointer;
24
24
  border: none;
25
- padding: 0px 16px;
25
+ padding: 12px 16px;
26
26
  /* prevents text selection when dragging
27
27
  the mouse over the button */
28
28
  user-select: none;
@@ -39,6 +39,7 @@
39
39
  }
40
40
 
41
41
  .buttonContent {
42
+ gap: 8px;
42
43
  display: flex;
43
44
  justify-content: center;
44
45
  align-items: center;
@@ -55,7 +56,6 @@
55
56
  }
56
57
 
57
58
  .label {
58
- margin: 0 8px 0 8px;
59
59
  text-wrap: nowrap;
60
60
  display: block;
61
61
  }
@@ -1,22 +1,40 @@
1
- export const DEFAULT_ICON_COLOR: "hsl(0, 0%, 32%)";
2
- export function getForegroundColor(backgroundColor: any): any;
3
- export namespace iconPropTypes {
4
- const iconName: PropTypes.Validator<string>;
5
- const iconColor: PropTypes.Requireable<string>;
6
- const backgroundColor: PropTypes.Requireable<string>;
7
- const gradientBackground: PropTypes.Requireable<boolean>;
8
- const borderRadius: PropTypes.Requireable<string>;
9
- const preset: PropTypes.Requireable<string>;
10
- const size: PropTypes.Requireable<PropTypes.InferProps<{
11
- faSize: PropTypes.Requireable<number>;
12
- wrapperSize: PropTypes.Requireable<number>;
1
+ import React, { CSSProperties } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ export declare const DEFAULT_PRESET = "m";
4
+ export declare const ICON_LUMINOSITY = 32;
5
+ export declare const DEFAULT_WRAPPER_SIZE = 40;
6
+ export declare const ICON_PADDING = 8;
7
+ export declare const DEFAULT_ICON_COLOR = "hsl(0, 0%, 32%)";
8
+ export interface IconSize {
9
+ faSize: number;
10
+ wrapperSize: number;
11
+ }
12
+ export interface IconProps {
13
+ iconName: string;
14
+ iconColor?: string;
15
+ backgroundColor?: string;
16
+ gradientBackground?: boolean;
17
+ borderRadius?: string;
18
+ preset?: string;
19
+ size?: IconSize;
20
+ customStyle?: CSSProperties;
21
+ }
22
+ export declare function getForegroundColor(backgroundColor: string): string;
23
+ declare const Icon: React.FC<IconProps>;
24
+ export declare const propTypes: {
25
+ iconName: PropTypes.Validator<string>;
26
+ iconColor: PropTypes.Requireable<string>;
27
+ backgroundColor: PropTypes.Requireable<string>;
28
+ gradientBackground: PropTypes.Requireable<boolean>;
29
+ borderRadius: PropTypes.Requireable<string>;
30
+ preset: PropTypes.Requireable<string>;
31
+ size: PropTypes.Requireable<PropTypes.InferProps<{
32
+ faSize: PropTypes.Validator<number>;
33
+ wrapperSize: PropTypes.Validator<number>;
13
34
  }>>;
14
- const customStyle: PropTypes.Requireable<{
35
+ customStyle: PropTypes.Requireable<{
15
36
  [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
16
37
  }>;
17
- }
38
+ };
18
39
  export default Icon;
19
- import PropTypes from "prop-types";
20
- declare const Icon: React.NamedExoticComponent<object>;
21
- import React from "react";
22
40
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.js"],"names":[],"mappings":"AAkBA,mDAAoD;AAiB7C,8DAC8D;;;;;;;;;;;;;;;;;;AAGrE,uDAsCG"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAC3C,OAAO,SAAS,MAAM,YAAY,CAAC;AAanC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,kBAAkB,oBAAoB,CAAC;AAEpD,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,WAAW,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,CAElE;AAiBD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiD7B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAYrB,CAAC;AAUF,eAAe,IAAI,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import PropTypes, { number } from 'prop-types';
2
+ import PropTypes from 'prop-types';
3
3
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4
4
  import { fas } from '@fortawesome/pro-solid-svg-icons';
5
5
  import { library } from '@fortawesome/fontawesome-svg-core';
@@ -10,11 +10,14 @@ import { convert } from 'css-color-function';
10
10
  import { createGradientBackground } from '../../util/get-background-gradient-color';
11
11
  import style from './style.css';
12
12
  library.add(fas);
13
- const DEFAULT_PRESET = 'm';
14
- const ICON_LUMINOSITY = 32;
15
- const DEFAULT_WRAPPER_SIZE = 40;
16
- const ICON_PADDING = 8;
13
+ export const DEFAULT_PRESET = 'm';
14
+ export const ICON_LUMINOSITY = 32;
15
+ export const DEFAULT_WRAPPER_SIZE = 40;
16
+ export const ICON_PADDING = 8;
17
17
  export const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';
18
+ export function getForegroundColor(backgroundColor) {
19
+ return convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);
20
+ }
18
21
  const SIZE_CONFIGS = {
19
22
  s: {
20
23
  faSize: 12,
@@ -29,10 +32,7 @@ const SIZE_CONFIGS = {
29
32
  wrapperSize: 48
30
33
  }
31
34
  };
32
- export const getForegroundColor = backgroundColor => convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);
33
- // set lightness to 32%
34
-
35
- const Icon = /*#__PURE__*/React.memo(function Icon({
35
+ const Icon = ({
36
36
  iconName,
37
37
  iconColor,
38
38
  backgroundColor,
@@ -41,9 +41,18 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
41
41
  preset = DEFAULT_PRESET,
42
42
  size,
43
43
  customStyle
44
- }) {
44
+ }) => {
45
45
  const effectiveIconColor = iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);
46
46
  const effectiveSize = size ? merge(SIZE_CONFIGS[DEFAULT_PRESET], size) : getOr(SIZE_CONFIGS[DEFAULT_PRESET], toLower(preset), SIZE_CONFIGS);
47
+ const hasBackground = backgroundColor || gradientBackground;
48
+ if (!hasBackground) {
49
+ return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
50
+ icon: `fa-${iconName}`,
51
+ color: effectiveIconColor,
52
+ fontSize: effectiveSize.faSize,
53
+ style: customStyle
54
+ });
55
+ }
47
56
  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
48
57
  const iconWrapperStyle = {
49
58
  background: gradientBackground ? createGradientBackground(effectiveIconColor, '81%', '91%') : backgroundColor,
@@ -63,8 +72,8 @@ const Icon = /*#__PURE__*/React.memo(function Icon({
63
72
  color: effectiveIconColor,
64
73
  fontSize: effectiveSize.faSize
65
74
  }));
66
- });
67
- export const iconPropTypes = {
75
+ };
76
+ export const propTypes = {
68
77
  iconName: PropTypes.string.isRequired,
69
78
  iconColor: PropTypes.string,
70
79
  backgroundColor: PropTypes.string,
@@ -72,11 +81,19 @@ export const iconPropTypes = {
72
81
  borderRadius: PropTypes.string,
73
82
  preset: PropTypes.oneOf(['s', 'm', 'xl']),
74
83
  size: PropTypes.shape({
75
- faSize: number,
76
- wrapperSize: PropTypes.number
84
+ faSize: PropTypes.number.isRequired,
85
+ wrapperSize: PropTypes.number.isRequired
77
86
  }),
78
87
  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
79
88
  };
80
- Icon.propTypes = process.env.NODE_ENV !== "production" ? iconPropTypes : {};
89
+
90
+ // const MemoizedIcon = React.memo(Icon) as React.MemoExoticComponent<React.FC<IconProps>> & {
91
+ // propTypes?: React.WeakValidationMap<IconProps>;
92
+ // defaultProps?: Partial<IconProps>;
93
+ // };
94
+
95
+ Icon.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
96
+ // MemoizedIcon.propTypes = Icon.propTypes;
97
+
81
98
  export default Icon;
82
99
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","number","FontAwesomeIcon","fas","library","toLower","merge","getOr","convert","createGradientBackground","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","gradientBackground","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","iconWrapperStyle","background","width","height","padding","createElement","className","iconWrapper","icon","color","fontSize","iconPropTypes","string","isRequired","bool","oneOf","shape","objectOf","oneOfType","propTypes","process","env","NODE_ENV"],"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 {createGradientBackground} from '../../util/get-background-gradient-color';\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 gradientBackground,\n borderRadius,\n preset = DEFAULT_PRESET,\n size,\n customStyle\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 background: gradientBackground\n ? createGradientBackground(effectiveIconColor, '81%', '91%')\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, ...customStyle}}>\n <FontAwesomeIcon\n icon={`fa-${iconName}`}\n color={effectiveIconColor}\n fontSize={effectiveSize.faSize}\n />\n </div>\n );\n});\n\nexport const iconPropTypes = {\n iconName: PropTypes.string.isRequired,\n iconColor: PropTypes.string,\n backgroundColor: PropTypes.string,\n gradientBackground: PropTypes.bool,\n borderRadius: PropTypes.string,\n preset: PropTypes.oneOf(['s', 'm', 'xl']),\n size: PropTypes.shape({\n faSize: number,\n wrapperSize: PropTypes.number\n }),\n customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nIcon.propTypes = iconPropTypes;\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","FontAwesomeIcon","fas","library","toLower","merge","getOr","convert","createGradientBackground","style","add","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","getForegroundColor","backgroundColor","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","Icon","iconName","iconColor","gradientBackground","borderRadius","preset","size","customStyle","effectiveIconColor","effectiveSize","hasBackground","createElement","icon","color","fontSize","iconWrapperStyle","background","width","height","padding","className","iconWrapper","propTypes","string","isRequired","bool","oneOf","shape","number","objectOf","oneOfType","process","env","NODE_ENV"],"sources":["../../../src/atom/icon/index.tsx"],"sourcesContent":["import React, {CSSProperties} from 'react';\nimport PropTypes from 'prop-types';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {IconName, 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 {createGradientBackground} from '../../util/get-background-gradient-color';\nimport style from './style.css';\n\nlibrary.add(fas);\n\nexport const DEFAULT_PRESET = 'm';\nexport const ICON_LUMINOSITY = 32;\nexport const DEFAULT_WRAPPER_SIZE = 40;\nexport const ICON_PADDING = 8;\nexport const DEFAULT_ICON_COLOR = 'hsl(0, 0%, 32%)';\n\nexport interface IconSize {\n faSize: number;\n wrapperSize: number;\n}\n\nexport interface IconProps {\n iconName: string;\n iconColor?: string;\n backgroundColor?: string;\n gradientBackground?: boolean;\n borderRadius?: string;\n preset?: string;\n size?: IconSize;\n customStyle?: CSSProperties;\n}\n\nexport function getForegroundColor(backgroundColor: string): string {\n return convert(`color(${backgroundColor} lightness(${ICON_LUMINOSITY}%))`);\n}\n\nconst SIZE_CONFIGS: Record<'s' | 'm' | 'xl', IconSize> = {\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\nconst Icon: React.FC<IconProps> = ({\n iconName,\n iconColor,\n backgroundColor,\n gradientBackground,\n borderRadius,\n preset = DEFAULT_PRESET,\n size,\n customStyle\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 hasBackground = backgroundColor || gradientBackground;\n if (!hasBackground) {\n return (\n <FontAwesomeIcon\n icon={`fa-${iconName}` as IconName}\n color={effectiveIconColor}\n fontSize={effectiveSize.faSize}\n style={customStyle}\n />\n );\n }\n\n const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;\n const iconWrapperStyle: CSSProperties = {\n background: gradientBackground\n ? createGradientBackground(effectiveIconColor, '81%', '91%')\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, ...customStyle}}>\n <FontAwesomeIcon\n icon={`fa-${iconName}` as IconName}\n color={effectiveIconColor}\n fontSize={effectiveSize.faSize}\n />\n </div>\n );\n};\n\nexport const propTypes = {\n iconName: PropTypes.string.isRequired,\n iconColor: PropTypes.string,\n backgroundColor: PropTypes.string,\n gradientBackground: PropTypes.bool,\n borderRadius: PropTypes.string,\n preset: PropTypes.oneOf(['s', 'm', 'xl']),\n size: PropTypes.shape({\n faSize: PropTypes.number.isRequired,\n wrapperSize: PropTypes.number.isRequired\n }),\n customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\n// const MemoizedIcon = React.memo(Icon) as React.MemoExoticComponent<React.FC<IconProps>> & {\n// propTypes?: React.WeakValidationMap<IconProps>;\n// defaultProps?: Partial<IconProps>;\n// };\n\nIcon.propTypes = propTypes;\n// MemoizedIcon.propTypes = Icon.propTypes;\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { RadioWithTitleProps } from './types';
3
3
  declare const RadioWithTitle: {
4
4
  (props: RadioWithTitleProps): JSX.Element;
@@ -10,7 +10,7 @@ declare const RadioWithTitle: {
10
10
  'data-name': import("prop-types").Requireable<string>;
11
11
  titleSize: import("prop-types").Requireable<string>;
12
12
  subtitleSize: import("prop-types").Requireable<string>;
13
- icon: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
13
+ icon: import("prop-types").Requireable<import("prop-types").InferProps<import("prop-types").ValidationMap<any>>>;
14
14
  tag: import("prop-types").Requireable<import("prop-types").InferProps<{
15
15
  label: import("prop-types").Requireable<string>;
16
16
  type: import("prop-types").Requireable<string>;
@@ -18,7 +18,17 @@ declare const RadioWithTitle: {
18
18
  customStyle: import("prop-types").Requireable<{
19
19
  [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
20
20
  }>;
21
- icon: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
21
+ icon: import("prop-types").Requireable<import("prop-types").InferProps<{
22
+ position: import("prop-types").Requireable<string>;
23
+ iconName?: React.Validator<string> | undefined;
24
+ iconColor?: React.Validator<string | null | undefined> | undefined;
25
+ backgroundColor?: React.Validator<string | null | undefined> | undefined;
26
+ gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
27
+ borderRadius?: React.Validator<string | null | undefined> | undefined;
28
+ preset?: React.Validator<string | null | undefined> | undefined;
29
+ size?: React.Validator<import("../icon").IconSize | null | undefined> | undefined;
30
+ customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
31
+ }>>;
22
32
  }>>;
23
33
  button: import("prop-types").Requireable<import("prop-types").InferProps<{
24
34
  type: import("prop-types").Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAY,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,cAAc;YAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAIF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAY,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAEvD,QAAA,MAAM,cAAc;YAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBjD,CAAC;AAIF,eAAe,cAAc,CAAC"}
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import PropTypes from 'prop-types';
2
3
  export declare const propTypes: {
3
4
  title: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
@@ -7,7 +8,7 @@ export declare const propTypes: {
7
8
  'data-name': PropTypes.Requireable<string>;
8
9
  titleSize: PropTypes.Requireable<string>;
9
10
  subtitleSize: PropTypes.Requireable<string>;
10
- icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
11
+ icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
11
12
  tag: PropTypes.Requireable<PropTypes.InferProps<{
12
13
  label: PropTypes.Requireable<string>;
13
14
  type: PropTypes.Requireable<string>;
@@ -15,7 +16,17 @@ export declare const propTypes: {
15
16
  customStyle: PropTypes.Requireable<{
16
17
  [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
17
18
  }>;
18
- icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
19
+ icon: PropTypes.Requireable<PropTypes.InferProps<{
20
+ position: PropTypes.Requireable<string>;
21
+ iconName?: import("react").Validator<string> | undefined;
22
+ iconColor?: import("react").Validator<string | null | undefined> | undefined;
23
+ backgroundColor?: import("react").Validator<string | null | undefined> | undefined;
24
+ gradientBackground?: import("react").Validator<boolean | null | undefined> | undefined;
25
+ borderRadius?: import("react").Validator<string | null | undefined> | undefined;
26
+ preset?: import("react").Validator<string | null | undefined> | undefined;
27
+ size?: import("react").Validator<import("../icon").IconSize | null | undefined> | undefined;
28
+ customStyle?: import("react").Validator<import("react").CSSProperties | null | undefined> | undefined;
29
+ }>>;
19
30
  }>>;
20
31
  button: PropTypes.Requireable<PropTypes.InferProps<{
21
32
  type: PropTypes.Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOrB,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/radio-with-title/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOrB,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,EAAE,MAAM,CAAC;QACpB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
@@ -6,7 +6,7 @@ const createStyle = (icon, current) => {
6
6
  let backgroundColor;
7
7
  switch (icon) {
8
8
  case 'right':
9
- backgroundColor = COLORS.positive;
9
+ backgroundColor = COLORS.cm_positive_500;
10
10
  break;
11
11
  case 'wrong':
12
12
  backgroundColor = COLORS.negative;
@@ -1 +1 @@
1
- {"version":3,"file":"index.native.js","names":["React","useEffect","useState","StyleSheet","Text","View","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","COLORS","createStyle","icon","current","backgroundColor","positive","negative","gray","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","_style","child","createElement","color"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n step: ViewStyle;\n stepText: TextStyle;\n icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n let backgroundColor;\n\n switch (icon) {\n case 'right':\n backgroundColor = COLORS.positive;\n break;\n case 'wrong':\n backgroundColor = COLORS.negative;\n break;\n case 'no-answer':\n default:\n backgroundColor = COLORS.gray;\n }\n\n return StyleSheet.create({\n step: {\n width: current ? 40 : 32,\n height: current ? 40 : 32,\n opacity: current ? 1 : 0.5,\n marginHorizontal: 8,\n backgroundColor,\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 50\n },\n stepText: {\n fontWeight: '600',\n fontSize: current ? 16 : 12\n },\n icon: {\n width: current ? 14 : 12,\n height: current ? 14 : 12\n }\n });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _style = createStyle(icon, current);\n setStyle(_style);\n }, [current, icon]);\n\n if (!style) {\n return null;\n }\n\n let child;\n\n switch (icon) {\n case 'right':\n child = <RightIcon style={style.icon} color=\"#fff\" />;\n break;\n case 'wrong':\n child = <WrongIcon style={style.icon} color=\"#fff\" />;\n break;\n case 'no-answer':\n default:\n child = <Text style={style.stepText}>{value}</Text>;\n }\n\n return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAGC,SAAS,EAAEC,QAAQ,QAAO,OAAO;AAChD,SAAQC,UAAU,EAAEC,IAAI,EAAaC,IAAI,QAAkB,cAAc;AACzE,SACEC,gCAAgC,IAAIC,SAAS,EAC7CC,oBAAoB,IAAIC,SAAS,QAC5B,0BAA0B;AACjC,SAAQC,MAAM,QAAO,wBAAwB;AAS7C,MAAMC,WAAW,GAAGA,CAACC,IAA6B,EAAEC,OAAiB,KAAqB;EACxF,IAAIC,eAAe;EAEnB,QAAQF,IAAI;IACV,KAAK,OAAO;MACVE,eAAe,GAAGJ,MAAM,CAACK,QAAQ;MACjC;IACF,KAAK,OAAO;MACVD,eAAe,GAAGJ,MAAM,CAACM,QAAQ;MACjC;IACF,KAAK,WAAW;IAChB;MACEF,eAAe,GAAGJ,MAAM,CAACO,IAAI;EACjC;EAEA,OAAOd,UAAU,CAACe,MAAM,CAAC;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAEP,OAAO,GAAG,EAAE,GAAG,EAAE;MACxBQ,MAAM,EAAER,OAAO,GAAG,EAAE,GAAG,EAAE;MACzBS,OAAO,EAAET,OAAO,GAAG,CAAC,GAAG,GAAG;MAC1BU,gBAAgB,EAAE,CAAC;MACnBT,eAAe;MACfU,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,YAAY,EAAE;IAChB,CAAC;IACDC,QAAQ,EAAE;MACRC,UAAU,EAAE,KAAK;MACjBC,QAAQ,EAAEhB,OAAO,GAAG,EAAE,GAAG;IAC3B,CAAC;IACDD,IAAI,EAAE;MACJQ,KAAK,EAAEP,OAAO,GAAG,EAAE,GAAG,EAAE;MACxBQ,MAAM,EAAER,OAAO,GAAG,EAAE,GAAG;IACzB;EACF,CAAC,CAAC;AACJ,CAAC;AAED,MAAMiB,IAAI,GAAGA,CAAC;EAACC,KAAK;EAAEnB,IAAI;EAAEC;AAAwB,CAAC,KAAK;EACxD,MAAM,CAACmB,KAAK,EAAEC,QAAQ,CAAC,GAAG/B,QAAQ,CAAwB,IAAI,CAAC;EAE/DD,SAAS,CAAC,MAAM;IACd,MAAMiC,MAAM,GAAGvB,WAAW,CAACC,IAAI,EAAEC,OAAO,CAAC;IACzCoB,QAAQ,CAACC,MAAM,CAAC;EAClB,CAAC,EAAE,CAACrB,OAAO,EAAED,IAAI,CAAC,CAAC;EAEnB,IAAI,CAACoB,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,IAAIG,KAAK;EAET,QAAQvB,IAAI;IACV,KAAK,OAAO;MACVuB,KAAK,gBAAGnC,KAAA,CAAAoC,aAAA,CAAC7B,SAAS;QAACyB,KAAK,EAAEA,KAAK,CAACpB,IAAK;QAACyB,KAAK,EAAC;MAAM,CAAE,CAAC;MACrD;IACF,KAAK,OAAO;MACVF,KAAK,gBAAGnC,KAAA,CAAAoC,aAAA,CAAC3B,SAAS;QAACuB,KAAK,EAAEA,KAAK,CAACpB,IAAK;QAACyB,KAAK,EAAC;MAAM,CAAE,CAAC;MACrD;IACF,KAAK,WAAW;IAChB;MACEF,KAAK,gBAAGnC,KAAA,CAAAoC,aAAA,CAAChC,IAAI;QAAC4B,KAAK,EAAEA,KAAK,CAACL;MAAS,GAAEI,KAAY,CAAC;EACvD;EAEA,oBAAO/B,KAAA,CAAAoC,aAAA,CAAC/B,IAAI;IAAC2B,KAAK,EAAEA,KAAK,CAACb;EAAK,GAAEgB,KAAY,CAAC;AAChD,CAAC;AAED,eAAeL,IAAI","ignoreList":[]}
1
+ {"version":3,"file":"index.native.js","names":["React","useEffect","useState","StyleSheet","Text","View","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","COLORS","createStyle","icon","current","backgroundColor","cm_positive_500","negative","gray","create","step","width","height","opacity","marginHorizontal","alignItems","justifyContent","borderRadius","stepText","fontWeight","fontSize","Step","value","style","setStyle","_style","child","createElement","color"],"sources":["../../../src/atom/status-item/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon\n} from '@coorpacademy/nova-icons';\nimport {COLORS} from '../../variables/colors';\nimport {StatusItemProps} from './types';\n\ntype StyleSheetType = {\n step: ViewStyle;\n stepText: TextStyle;\n icon: ViewStyle;\n};\n\nconst createStyle = (icon: StatusItemProps['icon'], current?: boolean): StyleSheetType => {\n let backgroundColor;\n\n switch (icon) {\n case 'right':\n backgroundColor = COLORS.cm_positive_500;\n break;\n case 'wrong':\n backgroundColor = COLORS.negative;\n break;\n case 'no-answer':\n default:\n backgroundColor = COLORS.gray;\n }\n\n return StyleSheet.create({\n step: {\n width: current ? 40 : 32,\n height: current ? 40 : 32,\n opacity: current ? 1 : 0.5,\n marginHorizontal: 8,\n backgroundColor,\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: 50\n },\n stepText: {\n fontWeight: '600',\n fontSize: current ? 16 : 12\n },\n icon: {\n width: current ? 14 : 12,\n height: current ? 14 : 12\n }\n });\n};\n\nconst Step = ({value, icon, current}: StatusItemProps) => {\n const [style, setStyle] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _style = createStyle(icon, current);\n setStyle(_style);\n }, [current, icon]);\n\n if (!style) {\n return null;\n }\n\n let child;\n\n switch (icon) {\n case 'right':\n child = <RightIcon style={style.icon} color=\"#fff\" />;\n break;\n case 'wrong':\n child = <WrongIcon style={style.icon} color=\"#fff\" />;\n break;\n case 'no-answer':\n default:\n child = <Text style={style.stepText}>{value}</Text>;\n }\n\n return <View style={style.step}>{child}</View>;\n};\n\nexport default Step;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAGC,SAAS,EAAEC,QAAQ,QAAO,OAAO;AAChD,SAAQC,UAAU,EAAEC,IAAI,EAAaC,IAAI,QAAkB,cAAc;AACzE,SACEC,gCAAgC,IAAIC,SAAS,EAC7CC,oBAAoB,IAAIC,SAAS,QAC5B,0BAA0B;AACjC,SAAQC,MAAM,QAAO,wBAAwB;AAS7C,MAAMC,WAAW,GAAGA,CAACC,IAA6B,EAAEC,OAAiB,KAAqB;EACxF,IAAIC,eAAe;EAEnB,QAAQF,IAAI;IACV,KAAK,OAAO;MACVE,eAAe,GAAGJ,MAAM,CAACK,eAAe;MACxC;IACF,KAAK,OAAO;MACVD,eAAe,GAAGJ,MAAM,CAACM,QAAQ;MACjC;IACF,KAAK,WAAW;IAChB;MACEF,eAAe,GAAGJ,MAAM,CAACO,IAAI;EACjC;EAEA,OAAOd,UAAU,CAACe,MAAM,CAAC;IACvBC,IAAI,EAAE;MACJC,KAAK,EAAEP,OAAO,GAAG,EAAE,GAAG,EAAE;MACxBQ,MAAM,EAAER,OAAO,GAAG,EAAE,GAAG,EAAE;MACzBS,OAAO,EAAET,OAAO,GAAG,CAAC,GAAG,GAAG;MAC1BU,gBAAgB,EAAE,CAAC;MACnBT,eAAe;MACfU,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE,QAAQ;MACxBC,YAAY,EAAE;IAChB,CAAC;IACDC,QAAQ,EAAE;MACRC,UAAU,EAAE,KAAK;MACjBC,QAAQ,EAAEhB,OAAO,GAAG,EAAE,GAAG;IAC3B,CAAC;IACDD,IAAI,EAAE;MACJQ,KAAK,EAAEP,OAAO,GAAG,EAAE,GAAG,EAAE;MACxBQ,MAAM,EAAER,OAAO,GAAG,EAAE,GAAG;IACzB;EACF,CAAC,CAAC;AACJ,CAAC;AAED,MAAMiB,IAAI,GAAGA,CAAC;EAACC,KAAK;EAAEnB,IAAI;EAAEC;AAAwB,CAAC,KAAK;EACxD,MAAM,CAACmB,KAAK,EAAEC,QAAQ,CAAC,GAAG/B,QAAQ,CAAwB,IAAI,CAAC;EAE/DD,SAAS,CAAC,MAAM;IACd,MAAMiC,MAAM,GAAGvB,WAAW,CAACC,IAAI,EAAEC,OAAO,CAAC;IACzCoB,QAAQ,CAACC,MAAM,CAAC;EAClB,CAAC,EAAE,CAACrB,OAAO,EAAED,IAAI,CAAC,CAAC;EAEnB,IAAI,CAACoB,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,IAAIG,KAAK;EAET,QAAQvB,IAAI;IACV,KAAK,OAAO;MACVuB,KAAK,gBAAGnC,KAAA,CAAAoC,aAAA,CAAC7B,SAAS;QAACyB,KAAK,EAAEA,KAAK,CAACpB,IAAK;QAACyB,KAAK,EAAC;MAAM,CAAE,CAAC;MACrD;IACF,KAAK,OAAO;MACVF,KAAK,gBAAGnC,KAAA,CAAAoC,aAAA,CAAC3B,SAAS;QAACuB,KAAK,EAAEA,KAAK,CAACpB,IAAK;QAACyB,KAAK,EAAC;MAAM,CAAE,CAAC;MACrD;IACF,KAAK,WAAW;IAChB;MACEF,KAAK,gBAAGnC,KAAA,CAAAoC,aAAA,CAAChC,IAAI;QAAC4B,KAAK,EAAEA,KAAK,CAACL;MAAS,GAAEI,KAAY,CAAC;EACvD;EAEA,oBAAO/B,KAAA,CAAAoC,aAAA,CAAC/B,IAAI;IAAC2B,KAAK,EAAEA,KAAK,CAACb;EAAK,GAAEgB,KAAY,CAAC;AAChD,CAAC;AAED,eAAeL,IAAI","ignoreList":[]}
@@ -14,8 +14,19 @@ declare namespace Tag {
14
14
  const customStyle: PropTypes.Requireable<{
15
15
  [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
16
16
  }>;
17
- const icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
17
+ const icon: PropTypes.Requireable<PropTypes.InferProps<{
18
+ position: PropTypes.Requireable<string>;
19
+ iconName?: React.Validator<string> | undefined;
20
+ iconColor?: React.Validator<string | null | undefined> | undefined;
21
+ backgroundColor?: React.Validator<string | null | undefined> | undefined;
22
+ gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
23
+ borderRadius?: React.Validator<string | null | undefined> | undefined;
24
+ preset?: React.Validator<string | null | undefined> | undefined;
25
+ size?: React.Validator<import("../icon").IconSize | null | undefined> | undefined;
26
+ customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
27
+ }>>;
18
28
  }
19
29
  }
20
30
  import PropTypes from "prop-types";
31
+ import React from "react";
21
32
  //# sourceMappingURL=index.d.ts.map
@@ -20,6 +20,7 @@
20
20
  text-align: center;
21
21
  line-height: normal;
22
22
  display: inline-block;
23
+ min-width: max-content;
23
24
  }
24
25
 
25
26
  .small {
@@ -8,7 +8,7 @@ declare namespace Title {
8
8
  'data-name': PropTypes.Requireable<string>;
9
9
  titleSize: PropTypes.Requireable<string>;
10
10
  subtitleSize: PropTypes.Requireable<string>;
11
- icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
11
+ icon: PropTypes.Requireable<PropTypes.InferProps<PropTypes.ValidationMap<any>>>;
12
12
  tag: PropTypes.Requireable<PropTypes.InferProps<{
13
13
  label: PropTypes.Requireable<string>;
14
14
  type: PropTypes.Requireable<string>;
@@ -16,7 +16,17 @@ declare namespace Title {
16
16
  customStyle: PropTypes.Requireable<{
17
17
  [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
18
18
  }>;
19
- icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
19
+ icon: PropTypes.Requireable<PropTypes.InferProps<{
20
+ position: PropTypes.Requireable<string>;
21
+ iconName?: React.Validator<string> | undefined;
22
+ iconColor?: React.Validator<string | null | undefined> | undefined;
23
+ backgroundColor?: React.Validator<string | null | undefined> | undefined;
24
+ gradientBackground?: React.Validator<boolean | null | undefined> | undefined;
25
+ borderRadius?: React.Validator<string | null | undefined> | undefined;
26
+ preset?: React.Validator<string | null | undefined> | undefined;
27
+ size?: React.Validator<import("../icon").IconSize | null | undefined> | undefined;
28
+ customStyle?: React.Validator<React.CSSProperties | null | undefined> | undefined;
29
+ }>>;
20
30
  }>>;
21
31
  button: PropTypes.Requireable<PropTypes.InferProps<{
22
32
  type: PropTypes.Requireable<string>;
@@ -59,4 +69,5 @@ declare namespace Title {
59
69
  };
60
70
  }
61
71
  import PropTypes from "prop-types";
72
+ import React from "react";
62
73
  //# sourceMappingURL=index.d.ts.map
@@ -116,6 +116,7 @@
116
116
  }
117
117
 
118
118
  .buttonsBar {
119
+ margin-right: 4px;
119
120
  width: 2px;
120
121
  align-self: stretch;
121
122
  flex-grow: 0;
@@ -105,7 +105,6 @@
105
105
 
106
106
  .button {
107
107
  border-radius: 12px;
108
- padding: 8px;
109
108
  font-weight: 600;
110
109
  }
111
110
 
@@ -7,7 +7,7 @@ import { propTypes } from './types';
7
7
  const {
8
8
  negative: cm_negative_100,
9
9
  cm_primary_blue,
10
- positive: cm_positive_100
10
+ cm_positive_500
11
11
  } = COLORS;
12
12
  const STATUS = {
13
13
  inProgress: 'inProgress',
@@ -31,7 +31,7 @@ const resolveProgressBarColor = status => {
31
31
  case STATUS.inProgress:
32
32
  return cm_primary_blue;
33
33
  default:
34
- return cm_positive_100;
34
+ return cm_positive_500;
35
35
  }
36
36
  };
37
37
  const BulkProgressBar = props => {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","ProgressBar","StatusItem","COLORS","style","propTypes","negative","cm_negative_100","cm_primary_blue","positive","cm_positive_100","STATUS","inProgress","fail","renderStatusIcon","status","progress","createElement","role","className","progressText","statusItemWrapper","icon","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","value","max","steps","backgroundColor","borderRadius","displayInfo","process","env","NODE_ENV"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst {negative: cm_negative_100, cm_primary_blue, positive: cm_positive_100} = COLORS;\n\nconst STATUS = {\n inProgress: 'inProgress',\n fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n if (status === STATUS.inProgress)\n return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n return (\n <div className={style.statusItemWrapper}>\n <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n </div>\n );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n switch (status) {\n case STATUS.fail:\n return cm_negative_100;\n case STATUS.inProgress:\n return cm_primary_blue;\n default:\n return cm_positive_100;\n }\n};\n\nconst BulkProgressBar = (props: Props) => {\n const {'data-name': dataName, status, progress} = props;\n\n return (\n <div className={style.container} data-name={dataName}>\n <ProgressBar\n className={style.progressBar}\n value={progress}\n max={100}\n steps={0}\n style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n displayInfo={false}\n />\n {renderStatusIcon(status, progress)}\n </div>\n );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAM,iBAAiB;AACzC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAAeC,SAAS,QAAe,SAAS;AAEhD,MAAM;EAACC,QAAQ,EAAEC,eAAe;EAAEC,eAAe;EAAEC,QAAQ,EAAEC;AAAe,CAAC,GAAGP,MAAM;AAEtF,MAAMQ,MAAM,GAAG;EACbC,UAAU,EAAE,YAAY;EACxBC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,gBAAgB,GAAGA,CAACC,MAAc,EAAEC,QAAgB,KAAK;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAU,EAC9B,oBAAOZ,KAAA,CAAAiB,aAAA;IAAKC,IAAI,EAAC,QAAQ;IAACC,SAAS,EAAEf,KAAK,CAACgB;EAAa,GAAE,GAAGJ,QAAQ,IAAU,CAAC;EAClF,oBACEhB,KAAA,CAAAiB,aAAA;IAAKE,SAAS,EAAEf,KAAK,CAACiB;EAAkB,gBACtCrB,KAAA,CAAAiB,aAAA,CAACf,UAAU;IAACoB,IAAI,EAAEP,MAAM,KAAKJ,MAAM,CAACE,IAAI,GAAG,SAAS,GAAG;EAAQ,CAAE,CAC9D,CAAC;AAEV,CAAC;AAED,MAAMU,uBAAuB,GAAIR,MAAc,IAAK;EAClD,QAAQA,MAAM;IACZ,KAAKJ,MAAM,CAACE,IAAI;MACd,OAAON,eAAe;IACxB,KAAKI,MAAM,CAACC,UAAU;MACpB,OAAOJ,eAAe;IACxB;MACE,OAAOE,eAAe;EAC1B;AACF,CAAC;AAED,MAAMc,eAAe,GAAIC,KAAY,IAAK;EACxC,MAAM;IAAC,WAAW,EAAEC,QAAQ;IAAEX,MAAM;IAAEC;EAAQ,CAAC,GAAGS,KAAK;EAEvD,oBACEzB,KAAA,CAAAiB,aAAA;IAAKE,SAAS,EAAEf,KAAK,CAACuB,SAAU;IAAC,aAAWD;EAAS,gBACnD1B,KAAA,CAAAiB,aAAA,CAAChB,WAAW;IACVkB,SAAS,EAAEf,KAAK,CAACwB,WAAY;IAC7BC,KAAK,EAAEb,QAAS;IAChBc,GAAG,EAAE,GAAI;IACTC,KAAK,EAAE,CAAE;IACT3B,KAAK,EAAE;MAAC4B,eAAe,EAAET,uBAAuB,CAACR,MAAM,CAAC;MAAEkB,YAAY,EAAE;IAAM,CAAE;IAChFC,WAAW,EAAE;EAAM,CACpB,CAAC,EACDpB,gBAAgB,CAACC,MAAM,EAAEC,QAAQ,CAC/B,CAAC;AAEV,CAAC;AAEDQ,eAAe,CAACnB,SAAS,GAAA8B,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGhC,SAAS;AAErC,eAAemB,eAAe","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","ProgressBar","StatusItem","COLORS","style","propTypes","negative","cm_negative_100","cm_primary_blue","cm_positive_500","STATUS","inProgress","fail","renderStatusIcon","status","progress","createElement","role","className","progressText","statusItemWrapper","icon","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","value","max","steps","backgroundColor","borderRadius","displayInfo","process","env","NODE_ENV"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst {negative: cm_negative_100, cm_primary_blue, cm_positive_500} = COLORS;\n\nconst STATUS = {\n inProgress: 'inProgress',\n fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n if (status === STATUS.inProgress)\n return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n return (\n <div className={style.statusItemWrapper}>\n <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n </div>\n );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n switch (status) {\n case STATUS.fail:\n return cm_negative_100;\n case STATUS.inProgress:\n return cm_primary_blue;\n default:\n return cm_positive_500;\n }\n};\n\nconst BulkProgressBar = (props: Props) => {\n const {'data-name': dataName, status, progress} = props;\n\n return (\n <div className={style.container} data-name={dataName}>\n <ProgressBar\n className={style.progressBar}\n value={progress}\n max={100}\n steps={0}\n style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n displayInfo={false}\n />\n {renderStatusIcon(status, progress)}\n </div>\n );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAM,iBAAiB;AACzC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAAeC,SAAS,QAAe,SAAS;AAEhD,MAAM;EAACC,QAAQ,EAAEC,eAAe;EAAEC,eAAe;EAAEC;AAAe,CAAC,GAAGN,MAAM;AAE5E,MAAMO,MAAM,GAAG;EACbC,UAAU,EAAE,YAAY;EACxBC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,gBAAgB,GAAGA,CAACC,MAAc,EAAEC,QAAgB,KAAK;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAU,EAC9B,oBAAOX,KAAA,CAAAgB,aAAA;IAAKC,IAAI,EAAC,QAAQ;IAACC,SAAS,EAAEd,KAAK,CAACe;EAAa,GAAE,GAAGJ,QAAQ,IAAU,CAAC;EAClF,oBACEf,KAAA,CAAAgB,aAAA;IAAKE,SAAS,EAAEd,KAAK,CAACgB;EAAkB,gBACtCpB,KAAA,CAAAgB,aAAA,CAACd,UAAU;IAACmB,IAAI,EAAEP,MAAM,KAAKJ,MAAM,CAACE,IAAI,GAAG,SAAS,GAAG;EAAQ,CAAE,CAC9D,CAAC;AAEV,CAAC;AAED,MAAMU,uBAAuB,GAAIR,MAAc,IAAK;EAClD,QAAQA,MAAM;IACZ,KAAKJ,MAAM,CAACE,IAAI;MACd,OAAOL,eAAe;IACxB,KAAKG,MAAM,CAACC,UAAU;MACpB,OAAOH,eAAe;IACxB;MACE,OAAOC,eAAe;EAC1B;AACF,CAAC;AAED,MAAMc,eAAe,GAAIC,KAAY,IAAK;EACxC,MAAM;IAAC,WAAW,EAAEC,QAAQ;IAAEX,MAAM;IAAEC;EAAQ,CAAC,GAAGS,KAAK;EAEvD,oBACExB,KAAA,CAAAgB,aAAA;IAAKE,SAAS,EAAEd,KAAK,CAACsB,SAAU;IAAC,aAAWD;EAAS,gBACnDzB,KAAA,CAAAgB,aAAA,CAACf,WAAW;IACViB,SAAS,EAAEd,KAAK,CAACuB,WAAY;IAC7BC,KAAK,EAAEb,QAAS;IAChBc,GAAG,EAAE,GAAI;IACTC,KAAK,EAAE,CAAE;IACT1B,KAAK,EAAE;MAAC2B,eAAe,EAAET,uBAAuB,CAACR,MAAM,CAAC;MAAEkB,YAAY,EAAE;IAAM,CAAE;IAChFC,WAAW,EAAE;EAAM,CACpB,CAAC,EACDpB,gBAAgB,CAACC,MAAM,EAAEC,QAAQ,CAC/B,CAAC;AAEV,CAAC;AAEDQ,eAAe,CAAClB,SAAS,GAAA6B,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG/B,SAAS;AAErC,eAAekB,eAAe","ignoreList":[]}
@@ -72,7 +72,7 @@ const CertificationCard = (props, context) => {
72
72
  }, conditionDescriptionProgress)), /*#__PURE__*/React.createElement(ProgressBar, {
73
73
  className: style.customProgressBar,
74
74
  style: {
75
- backgroundColor: COLORS.positive
75
+ backgroundColor: COLORS.cm_positive_500
76
76
  },
77
77
  displayInfo: false,
78
78
  value: progress,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","createElement","className","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","customProgressBar","positive","displayInfo","value","max","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","condition","nbDone","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n const {\n label,\n locales: {conditionDescriptionProgress, tag},\n goal: {title},\n progress,\n imgUrl,\n onClick\n } = props;\n const {translate} = context;\n const isInprogress = progress < 100;\n const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n const progressTagType = isInprogress ? 'progress' : 'success';\n\n const progressIconProps = {\n position: 'left',\n iconName: isInprogress ? 'clock' : 'circle-check',\n iconColor: isInprogress ? '#B87A00' : '#05944F',\n backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n size: {\n faSize: 10,\n wrapperSize: 10\n },\n customStyle: {padding: 0}\n };\n\n return (\n <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n {progress > 0 ? (\n <Tag\n label={progressLabel}\n type={progressTagType}\n customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n icon={progressIconProps}\n />\n ) : null}\n <div className={style.imageSection}>\n <div className={style.imageContainer}>\n <img src={imgUrl} />\n </div>\n </div>\n <div className={style.detailWrapper}>\n <div className={style.titleWrapper}>\n <Tag label={tag} size=\"S\" />\n <div className={style.title} data-name=\"certification-title\">\n {title}\n </div>\n <div className={style.moduleCount}>{conditionDescriptionProgress}</div>\n </div>\n <ProgressBar\n className={style.customProgressBar}\n style={{backgroundColor: COLORS.positive}}\n displayInfo={false}\n value={progress}\n max={100}\n />\n </div>\n </div>\n );\n};\n\nCertificationCard.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n label: PropTypes.string,\n goal: PropTypes.shape({\n title: PropTypes.string,\n condition: PropTypes.shape({\n nbDone: PropTypes.number\n })\n }),\n progress: PropTypes.number,\n imgUrl: PropTypes.string,\n onClick: PropTypes.func,\n locales: PropTypes.shape({\n conditionDescriptionProgress: PropTypes.string,\n tag: PropTypes.string\n })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["React","PropTypes","COLORS","Provider","Tag","ProgressBar","style","CertificationCard","props","context","label","locales","conditionDescriptionProgress","tag","goal","title","progress","imgUrl","onClick","translate","isInprogress","progressLabel","progressTagType","progressIconProps","position","iconName","iconColor","backgroundColor","size","faSize","wrapperSize","customStyle","padding","createElement","className","container","type","top","right","icon","imageSection","imageContainer","src","detailWrapper","titleWrapper","moduleCount","customProgressBar","cm_positive_500","displayInfo","value","max","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","shape","condition","nbDone","number","func"],"sources":["../../../src/molecule/certification-card/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {COLORS} from '../../variables/colors';\nimport Provider from '../../atom/provider';\nimport Tag from '../../atom/tag';\nimport ProgressBar from '../progress-bar';\nimport style from './style.css';\n\nconst CertificationCard = (props, context) => {\n const {\n label,\n locales: {conditionDescriptionProgress, tag},\n goal: {title},\n progress,\n imgUrl,\n onClick\n } = props;\n const {translate} = context;\n const isInprogress = progress < 100;\n const progressLabel = isInprogress ? translate('in_progress') : translate('completed');\n const progressTagType = isInprogress ? 'progress' : 'success';\n\n const progressIconProps = {\n position: 'left',\n iconName: isInprogress ? 'clock' : 'circle-check',\n iconColor: isInprogress ? '#B87A00' : '#05944F',\n backgroundColor: isInprogress ? '#FFEECC' : '#D6F5E5',\n size: {\n faSize: 10,\n wrapperSize: 10\n },\n customStyle: {padding: 0}\n };\n\n return (\n <div className={style.container} data-name={`certification-card-${label}`} onClick={onClick}>\n {progress > 0 ? (\n <Tag\n label={progressLabel}\n type={progressTagType}\n customStyle={{position: 'absolute', top: '12px', right: '12px'}}\n icon={progressIconProps}\n />\n ) : null}\n <div className={style.imageSection}>\n <div className={style.imageContainer}>\n <img src={imgUrl} />\n </div>\n </div>\n <div className={style.detailWrapper}>\n <div className={style.titleWrapper}>\n <Tag label={tag} size=\"S\" />\n <div className={style.title} data-name=\"certification-title\">\n {title}\n </div>\n <div className={style.moduleCount}>{conditionDescriptionProgress}</div>\n </div>\n <ProgressBar\n className={style.customProgressBar}\n style={{backgroundColor: COLORS.cm_positive_500}}\n displayInfo={false}\n value={progress}\n max={100}\n />\n </div>\n </div>\n );\n};\n\nCertificationCard.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nCertificationCard.propTypes = {\n label: PropTypes.string,\n goal: PropTypes.shape({\n title: PropTypes.string,\n condition: PropTypes.shape({\n nbDone: PropTypes.number\n })\n }),\n progress: PropTypes.number,\n imgUrl: PropTypes.string,\n onClick: PropTypes.func,\n locales: PropTypes.shape({\n conditionDescriptionProgress: PropTypes.string,\n tag: PropTypes.string\n })\n};\n\nexport default CertificationCard;\n"],"mappings":"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","ignoreList":[]}