@coorpacademy/components 11.30.1 → 11.32.0

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 (105) hide show
  1. package/es/atom/button-link/index.d.ts.map +1 -1
  2. package/es/atom/button-link/index.js +17 -9
  3. package/es/atom/button-link/index.js.map +1 -1
  4. package/es/atom/button-link/types.d.ts +8 -1
  5. package/es/atom/button-link/types.d.ts.map +1 -1
  6. package/es/atom/button-link/types.js.map +1 -1
  7. package/es/atom/chip/index.d.ts +37 -0
  8. package/es/atom/chip/index.d.ts.map +1 -0
  9. package/es/atom/chip/index.js +85 -0
  10. package/es/atom/chip/index.js.map +1 -0
  11. package/es/atom/chip/style.css +65 -0
  12. package/es/atom/chips/index.d.ts.map +1 -1
  13. package/es/atom/chips/index.js +1 -0
  14. package/es/atom/chips/index.js.map +1 -1
  15. package/es/atom/icon/index.js +2 -2
  16. package/es/atom/icon/index.js.map +1 -1
  17. package/es/molecule/bulk-progress-bar/index.d.ts.map +1 -1
  18. package/es/molecule/bulk-progress-bar/index.js +6 -3
  19. package/es/molecule/bulk-progress-bar/index.js.map +1 -1
  20. package/es/molecule/learner-skill-card/index.d.ts +21 -0
  21. package/es/molecule/learner-skill-card/index.d.ts.map +1 -0
  22. package/es/molecule/learner-skill-card/index.js +159 -0
  23. package/es/molecule/learner-skill-card/index.js.map +1 -0
  24. package/es/molecule/learner-skill-card/style.css +119 -0
  25. package/es/molecule/questions/template/index.d.ts +1 -1
  26. package/es/molecule/quick-access-card/index.d.ts.map +1 -1
  27. package/es/molecule/quick-access-card/index.js +5 -1
  28. package/es/molecule/quick-access-card/index.js.map +1 -1
  29. package/es/template/mobile-login/welcome/index.native.d.ts.map +1 -1
  30. package/es/template/mobile-login/welcome/index.native.js +5 -1
  31. package/es/template/mobile-login/welcome/index.native.js.map +1 -1
  32. package/es/variables/colors.d.ts +7 -7
  33. package/es/variables/colors.d.ts.map +1 -1
  34. package/es/variables/colors.js +2 -1
  35. package/es/variables/colors.js.map +1 -1
  36. package/es/variables/theme.native.d.ts.map +1 -1
  37. package/es/variables/theme.native.js +4 -1
  38. package/es/variables/theme.native.js.map +1 -1
  39. package/lib/atom/button-link/index.d.ts.map +1 -1
  40. package/lib/atom/button-link/index.js +18 -9
  41. package/lib/atom/button-link/index.js.map +1 -1
  42. package/lib/atom/button-link/types.d.ts +8 -1
  43. package/lib/atom/button-link/types.d.ts.map +1 -1
  44. package/lib/atom/button-link/types.js.map +1 -1
  45. package/lib/atom/chip/index.d.ts +37 -0
  46. package/lib/atom/chip/index.d.ts.map +1 -0
  47. package/lib/atom/chip/index.js +109 -0
  48. package/lib/atom/chip/index.js.map +1 -0
  49. package/lib/atom/chip/style.css +65 -0
  50. package/lib/atom/chips/index.d.ts.map +1 -1
  51. package/lib/atom/chips/index.js +1 -0
  52. package/lib/atom/chips/index.js.map +1 -1
  53. package/lib/atom/icon/index.js +2 -2
  54. package/lib/atom/icon/index.js.map +1 -1
  55. package/lib/molecule/bulk-progress-bar/index.d.ts.map +1 -1
  56. package/lib/molecule/bulk-progress-bar/index.js +7 -3
  57. package/lib/molecule/bulk-progress-bar/index.js.map +1 -1
  58. package/lib/molecule/learner-skill-card/index.d.ts +21 -0
  59. package/lib/molecule/learner-skill-card/index.d.ts.map +1 -0
  60. package/lib/molecule/learner-skill-card/index.js +177 -0
  61. package/lib/molecule/learner-skill-card/index.js.map +1 -0
  62. package/lib/molecule/learner-skill-card/style.css +119 -0
  63. package/lib/molecule/questions/template/index.d.ts +1 -1
  64. package/lib/molecule/quick-access-card/index.d.ts.map +1 -1
  65. package/lib/molecule/quick-access-card/index.js +7 -1
  66. package/lib/molecule/quick-access-card/index.js.map +1 -1
  67. package/lib/template/mobile-login/welcome/index.native.d.ts.map +1 -1
  68. package/lib/template/mobile-login/welcome/index.native.js +7 -1
  69. package/lib/template/mobile-login/welcome/index.native.js.map +1 -1
  70. package/lib/variables/colors.d.ts +7 -7
  71. package/lib/variables/colors.d.ts.map +1 -1
  72. package/lib/variables/colors.js +2 -1
  73. package/lib/variables/colors.js.map +1 -1
  74. package/lib/variables/theme.native.d.ts.map +1 -1
  75. package/lib/variables/theme.native.js +4 -1
  76. package/lib/variables/theme.native.js.map +1 -1
  77. package/locales/bs/global.json +7 -1
  78. package/locales/cs/global.json +7 -1
  79. package/locales/de/global.json +7 -1
  80. package/locales/en/global.json +6 -0
  81. package/locales/es/global.json +6 -0
  82. package/locales/et/global.json +7 -1
  83. package/locales/fi/global.json +7 -1
  84. package/locales/fr/global.json +6 -0
  85. package/locales/hr/global.json +7 -1
  86. package/locales/hu/global.json +7 -1
  87. package/locales/hy/global.json +7 -1
  88. package/locales/it/global.json +6 -0
  89. package/locales/ja/global.json +7 -1
  90. package/locales/ko/global.json +7 -1
  91. package/locales/nl/global.json +6 -0
  92. package/locales/pl/global.json +7 -1
  93. package/locales/pt/global.json +7 -1
  94. package/locales/ro/global.json +7 -1
  95. package/locales/ru/global.json +7 -1
  96. package/locales/sk/global.json +7 -1
  97. package/locales/sl/global.json +7 -1
  98. package/locales/sv/global.json +7 -1
  99. package/locales/tl/global.json +7 -1
  100. package/locales/tr/global.json +7 -1
  101. package/locales/uk/global.json +7 -1
  102. package/locales/vi/global.json +7 -1
  103. package/locales/zh/global.json +7 -1
  104. package/locales/zh_TW/global.json +7 -1
  105. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"theme.native.js","names":["COLORS","HTML_ANCHOR_TEXT_COLOR","defaultTheme","colors","border","gray","extra","lighter","light","lightMedium","medium","dark","extraDark","text","primary","secondary","cta","negative","positive","white","black","battle","notification","salmon","podcast","background","cm_grey_800","spacing","micro","tiny","small","base","large","xlarge","radius","common","card","regular","search","button","thumbnail","fontWeight","semiBold","bold","extraBold","fontSize","extraSmall","xxlarge","xxxlarge","letterSpacing","header"],"sources":["../../src/variables/theme.native.ts"],"sourcesContent":["import {TextStyle} from 'react-native';\nimport {COLORS} from './colors';\n\nexport type SpaceType = 'micro' | 'tiny' | 'small' | 'base' | 'medium' | 'large' | 'xlarge';\n\nexport const HTML_ANCHOR_TEXT_COLOR = '#002BDB';\n\nexport type Colors = {\n border: string;\n gray: {\n extra: string;\n light: string;\n lighter: string;\n lightMedium: string;\n medium: string;\n dark: string;\n extraDark: string;\n };\n podcast: {\n background: string;\n primary: string;\n };\n text: {\n primary: string;\n secondary: string;\n };\n cta: string;\n negative: string;\n positive: string;\n white: string;\n black: string;\n battle: string;\n notification: string;\n salmon: string;\n};\n\nexport type Theme = {\n colors: Colors;\n spacing: {\n micro: number;\n tiny: number;\n small: number;\n base: number;\n medium: number;\n large: number;\n xlarge: number;\n };\n radius: {\n button: number;\n common: number;\n card: number;\n medium: number;\n regular: number;\n search: number;\n thumbnail: number;\n };\n fontWeight: {\n regular: TextStyle['fontWeight'];\n semiBold: TextStyle['fontWeight'];\n bold: TextStyle['fontWeight'];\n extraBold: TextStyle['fontWeight'];\n };\n fontSize: {\n extraSmall: TextStyle['fontSize'];\n small: TextStyle['fontSize'];\n medium: TextStyle['fontSize'];\n regular: TextStyle['fontSize'];\n large: TextStyle['fontSize'];\n xlarge: TextStyle['fontSize'];\n xxlarge: TextStyle['fontSize'];\n xxxlarge: TextStyle['fontSize'];\n };\n letterSpacing: {\n header: number;\n };\n};\n\nconst defaultTheme: Theme = {\n colors: {\n border: 'rgba(0, 0, 0, 0.1)',\n gray: {\n extra: '#FAFAFA',\n lighter: '#F4F4F5',\n light: '#ededed',\n lightMedium: '#CFD8DC',\n medium: '#90A4AE',\n dark: '#546E7A',\n extraDark: '#323232'\n },\n text: {\n primary: '#06265B',\n secondary: '#FFFFFF'\n },\n cta: '#0061FF',\n negative: COLORS.negative,\n positive: COLORS.positive,\n white: '#FFFFFF',\n black: '#14171A',\n battle: '#FFDE03',\n notification: '#FF7043',\n salmon: '#FDE2E5',\n podcast: {\n background: COLORS.cm_grey_800,\n primary: '#FF541F'\n }\n },\n spacing: {\n micro: 4,\n tiny: 8,\n small: 16,\n base: 24,\n medium: 32,\n large: 48,\n xlarge: 64\n },\n radius: {\n common: 3,\n card: 5,\n regular: 8,\n medium: 12,\n search: 24,\n button: 32,\n thumbnail: 1000\n },\n fontWeight: {\n regular: '400',\n semiBold: '500',\n bold: '700',\n extraBold: '900'\n },\n fontSize: {\n extraSmall: 10,\n small: 12,\n medium: 13,\n regular: 15,\n large: 17,\n xlarge: 22,\n xxlarge: 28,\n xxxlarge: 40\n },\n letterSpacing: {\n header: 5\n }\n};\n\nexport default defaultTheme;\n"],"mappings":"AACA,SAAQA,MAAR,QAAqB,UAArB;AAIA,OAAO,MAAMC,sBAAsB,GAAG,SAA/B;AAwEP,MAAMC,YAAmB,GAAG;EAC1BC,MAAM,EAAE;IACNC,MAAM,EAAE,oBADF;IAENC,IAAI,EAAE;MACJC,KAAK,EAAE,SADH;MAEJC,OAAO,EAAE,SAFL;MAGJC,KAAK,EAAE,SAHH;MAIJC,WAAW,EAAE,SAJT;MAKJC,MAAM,EAAE,SALJ;MAMJC,IAAI,EAAE,SANF;MAOJC,SAAS,EAAE;IAPP,CAFA;IAWNC,IAAI,EAAE;MACJC,OAAO,EAAE,SADL;MAEJC,SAAS,EAAE;IAFP,CAXA;IAeNC,GAAG,EAAE,SAfC;IAgBNC,QAAQ,EAAEjB,MAAM,CAACiB,QAhBX;IAiBNC,QAAQ,EAAElB,MAAM,CAACkB,QAjBX;IAkBNC,KAAK,EAAE,SAlBD;IAmBNC,KAAK,EAAE,SAnBD;IAoBNC,MAAM,EAAE,SApBF;IAqBNC,YAAY,EAAE,SArBR;IAsBNC,MAAM,EAAE,SAtBF;IAuBNC,OAAO,EAAE;MACPC,UAAU,EAAEzB,MAAM,CAAC0B,WADZ;MAEPZ,OAAO,EAAE;IAFF;EAvBH,CADkB;EA6B1Ba,OAAO,EAAE;IACPC,KAAK,EAAE,CADA;IAEPC,IAAI,EAAE,CAFC;IAGPC,KAAK,EAAE,EAHA;IAIPC,IAAI,EAAE,EAJC;IAKPrB,MAAM,EAAE,EALD;IAMPsB,KAAK,EAAE,EANA;IAOPC,MAAM,EAAE;EAPD,CA7BiB;EAsC1BC,MAAM,EAAE;IACNC,MAAM,EAAE,CADF;IAENC,IAAI,EAAE,CAFA;IAGNC,OAAO,EAAE,CAHH;IAIN3B,MAAM,EAAE,EAJF;IAKN4B,MAAM,EAAE,EALF;IAMNC,MAAM,EAAE,EANF;IAONC,SAAS,EAAE;EAPL,CAtCkB;EA+C1BC,UAAU,EAAE;IACVJ,OAAO,EAAE,KADC;IAEVK,QAAQ,EAAE,KAFA;IAGVC,IAAI,EAAE,KAHI;IAIVC,SAAS,EAAE;EAJD,CA/Cc;EAqD1BC,QAAQ,EAAE;IACRC,UAAU,EAAE,EADJ;IAERhB,KAAK,EAAE,EAFC;IAGRpB,MAAM,EAAE,EAHA;IAIR2B,OAAO,EAAE,EAJD;IAKRL,KAAK,EAAE,EALC;IAMRC,MAAM,EAAE,EANA;IAORc,OAAO,EAAE,EAPD;IAQRC,QAAQ,EAAE;EARF,CArDgB;EA+D1BC,aAAa,EAAE;IACbC,MAAM,EAAE;EADK;AA/DW,CAA5B;AAoEA,eAAehD,YAAf"}
1
+ {"version":3,"file":"theme.native.js","names":["COLORS","HTML_ANCHOR_TEXT_COLOR","cm_primary_blue","defaultTheme","colors","border","gray","extra","lighter","light","lightMedium","medium","dark","extraDark","text","primary","secondary","cta","negative","positive","white","black","battle","notification","salmon","podcast","background","cm_grey_800","spacing","micro","tiny","small","base","large","xlarge","radius","common","card","regular","search","button","thumbnail","fontWeight","semiBold","bold","extraBold","fontSize","extraSmall","xxlarge","xxxlarge","letterSpacing","header"],"sources":["../../src/variables/theme.native.ts"],"sourcesContent":["import {TextStyle} from 'react-native';\nimport {COLORS} from './colors';\n\nexport type SpaceType = 'micro' | 'tiny' | 'small' | 'base' | 'medium' | 'large' | 'xlarge';\n\nexport const HTML_ANCHOR_TEXT_COLOR = '#002BDB';\n\nconst {cm_primary_blue} = COLORS;\n\nexport type Colors = {\n border: string;\n gray: {\n extra: string;\n light: string;\n lighter: string;\n lightMedium: string;\n medium: string;\n dark: string;\n extraDark: string;\n };\n podcast: {\n background: string;\n primary: string;\n };\n text: {\n primary: string;\n secondary: string;\n };\n cta: string;\n negative: string;\n positive: string;\n white: string;\n black: string;\n battle: string;\n notification: string;\n salmon: string;\n};\n\nexport type Theme = {\n colors: Colors;\n spacing: {\n micro: number;\n tiny: number;\n small: number;\n base: number;\n medium: number;\n large: number;\n xlarge: number;\n };\n radius: {\n button: number;\n common: number;\n card: number;\n medium: number;\n regular: number;\n search: number;\n thumbnail: number;\n };\n fontWeight: {\n regular: TextStyle['fontWeight'];\n semiBold: TextStyle['fontWeight'];\n bold: TextStyle['fontWeight'];\n extraBold: TextStyle['fontWeight'];\n };\n fontSize: {\n extraSmall: TextStyle['fontSize'];\n small: TextStyle['fontSize'];\n medium: TextStyle['fontSize'];\n regular: TextStyle['fontSize'];\n large: TextStyle['fontSize'];\n xlarge: TextStyle['fontSize'];\n xxlarge: TextStyle['fontSize'];\n xxxlarge: TextStyle['fontSize'];\n };\n letterSpacing: {\n header: number;\n };\n};\n\nconst defaultTheme: Theme = {\n colors: {\n border: 'rgba(0, 0, 0, 0.1)',\n gray: {\n extra: '#FAFAFA',\n lighter: '#F4F4F5',\n light: '#ededed',\n lightMedium: '#CFD8DC',\n medium: '#90A4AE',\n dark: '#546E7A',\n extraDark: '#323232'\n },\n text: {\n primary: '#06265B',\n secondary: '#FFFFFF'\n },\n cta: cm_primary_blue,\n negative: COLORS.negative,\n positive: COLORS.positive,\n white: '#FFFFFF',\n black: '#14171A',\n battle: '#FFDE03',\n notification: '#FF7043',\n salmon: '#FDE2E5',\n podcast: {\n background: COLORS.cm_grey_800,\n primary: '#FF541F'\n }\n },\n spacing: {\n micro: 4,\n tiny: 8,\n small: 16,\n base: 24,\n medium: 32,\n large: 48,\n xlarge: 64\n },\n radius: {\n common: 3,\n card: 5,\n regular: 8,\n medium: 12,\n search: 24,\n button: 32,\n thumbnail: 1000\n },\n fontWeight: {\n regular: '400',\n semiBold: '500',\n bold: '700',\n extraBold: '900'\n },\n fontSize: {\n extraSmall: 10,\n small: 12,\n medium: 13,\n regular: 15,\n large: 17,\n xlarge: 22,\n xxlarge: 28,\n xxxlarge: 40\n },\n letterSpacing: {\n header: 5\n }\n};\n\nexport default defaultTheme;\n"],"mappings":"AACA,SAAQA,MAAR,QAAqB,UAArB;AAIA,OAAO,MAAMC,sBAAsB,GAAG,SAA/B;AAEP,MAAM;EAACC;AAAD,IAAoBF,MAA1B;AAwEA,MAAMG,YAAmB,GAAG;EAC1BC,MAAM,EAAE;IACNC,MAAM,EAAE,oBADF;IAENC,IAAI,EAAE;MACJC,KAAK,EAAE,SADH;MAEJC,OAAO,EAAE,SAFL;MAGJC,KAAK,EAAE,SAHH;MAIJC,WAAW,EAAE,SAJT;MAKJC,MAAM,EAAE,SALJ;MAMJC,IAAI,EAAE,SANF;MAOJC,SAAS,EAAE;IAPP,CAFA;IAWNC,IAAI,EAAE;MACJC,OAAO,EAAE,SADL;MAEJC,SAAS,EAAE;IAFP,CAXA;IAeNC,GAAG,EAAEf,eAfC;IAgBNgB,QAAQ,EAAElB,MAAM,CAACkB,QAhBX;IAiBNC,QAAQ,EAAEnB,MAAM,CAACmB,QAjBX;IAkBNC,KAAK,EAAE,SAlBD;IAmBNC,KAAK,EAAE,SAnBD;IAoBNC,MAAM,EAAE,SApBF;IAqBNC,YAAY,EAAE,SArBR;IAsBNC,MAAM,EAAE,SAtBF;IAuBNC,OAAO,EAAE;MACPC,UAAU,EAAE1B,MAAM,CAAC2B,WADZ;MAEPZ,OAAO,EAAE;IAFF;EAvBH,CADkB;EA6B1Ba,OAAO,EAAE;IACPC,KAAK,EAAE,CADA;IAEPC,IAAI,EAAE,CAFC;IAGPC,KAAK,EAAE,EAHA;IAIPC,IAAI,EAAE,EAJC;IAKPrB,MAAM,EAAE,EALD;IAMPsB,KAAK,EAAE,EANA;IAOPC,MAAM,EAAE;EAPD,CA7BiB;EAsC1BC,MAAM,EAAE;IACNC,MAAM,EAAE,CADF;IAENC,IAAI,EAAE,CAFA;IAGNC,OAAO,EAAE,CAHH;IAIN3B,MAAM,EAAE,EAJF;IAKN4B,MAAM,EAAE,EALF;IAMNC,MAAM,EAAE,EANF;IAONC,SAAS,EAAE;EAPL,CAtCkB;EA+C1BC,UAAU,EAAE;IACVJ,OAAO,EAAE,KADC;IAEVK,QAAQ,EAAE,KAFA;IAGVC,IAAI,EAAE,KAHI;IAIVC,SAAS,EAAE;EAJD,CA/Cc;EAqD1BC,QAAQ,EAAE;IACRC,UAAU,EAAE,EADJ;IAERhB,KAAK,EAAE,EAFC;IAGRpB,MAAM,EAAE,EAHA;IAIR2B,OAAO,EAAE,EAJD;IAKRL,KAAK,EAAE,EALC;IAMRC,MAAM,EAAE,EANA;IAORc,OAAO,EAAE,EAPD;IAQRC,QAAQ,EAAE;EARF,CArDgB;EA+D1BC,aAAa,EAAE;IACbC,MAAM,EAAE;EADK;AA/DW,CAA5B;AAoEA,eAAehD,YAAf"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AAwB7D,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;;;;;;;;;;;;;;;;;;;;;CAqEzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
11
11
 
12
12
  var _link = _interopRequireDefault(require("../link"));
13
13
 
14
+ var _icon = _interopRequireDefault(require("../icon"));
15
+
14
16
  var _buttonIcons = require("../../util/button-icons");
15
17
 
16
18
  var _types = _interopRequireDefault(require("./types"));
@@ -28,6 +30,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
28
30
  const getButtonContent = (icon, label) => {
29
31
  const {
30
32
  type,
33
+ faIcon,
31
34
  position
32
35
  } = icon || {
33
36
  type: '',
@@ -35,7 +38,7 @@ const getButtonContent = (icon, label) => {
35
38
  };
36
39
  const Icon = type && _buttonIcons.ICONS[type];
37
40
 
38
- if (!Icon) {
41
+ if (!Icon && !faIcon) {
39
42
  return /*#__PURE__*/_react.default.createElement("div", {
40
43
  className: _style.default.buttonContent
41
44
  }, /*#__PURE__*/_react.default.createElement("span", {
@@ -43,17 +46,23 @@ const getButtonContent = (icon, label) => {
43
46
  }, label));
44
47
  }
45
48
 
46
- return /*#__PURE__*/_react.default.createElement("div", {
47
- className: _style.default.buttonContent
48
- }, position === 'left' ? /*#__PURE__*/_react.default.createElement(Icon, {
49
+ const iconComponent = faIcon ? /*#__PURE__*/_react.default.createElement(_icon.default, {
50
+ iconName: faIcon.name,
51
+ iconColor: faIcon.color,
52
+ backgroundColor: faIcon.backgroundColor,
53
+ size: {
54
+ faSize: faIcon.size,
55
+ wrapperSize: faIcon.size
56
+ }
57
+ }) : /*#__PURE__*/_react.default.createElement(Icon, {
49
58
  className: _style.default.icon,
50
59
  theme: "coorpmanager"
51
- }) : null, label ? /*#__PURE__*/_react.default.createElement("span", {
60
+ });
61
+ return /*#__PURE__*/_react.default.createElement("div", {
62
+ className: _style.default.buttonContent
63
+ }, position === 'left' ? iconComponent : null, label ? /*#__PURE__*/_react.default.createElement("span", {
52
64
  className: _style.default.label
53
- }, label) : null, position === 'right' ? /*#__PURE__*/_react.default.createElement(Icon, {
54
- className: _style.default.icon,
55
- theme: "coorpmanager"
56
- }) : null);
65
+ }, label) : null, position === 'right' ? iconComponent : null);
57
66
  };
58
67
 
59
68
  const ButtonLink = props => {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["getButtonContent","icon","label","type","position","Icon","ICONS","style","buttonContent","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","handleOnClick","useCallback","handleOnKeyDown","event","title","propTypes"],"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 {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, position} = icon || {type: '', position: ''};\n const Icon = type && ICONS[type];\n\n if (!Icon) {\n return (\n <div className={style.buttonContent}>\n <span className={style.label}>{label}</span>\n </div>\n );\n }\n\n return (\n <div className={style.buttonContent}>\n {position === 'left' ? <Icon className={style.icon} theme=\"coorpmanager\" /> : null}\n {label ? <span className={style.label}>{label}</span> : null}\n {position === 'right' ? <Icon className={style.icon} theme=\"coorpmanager\" /> : 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":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,IAAD,EAAkBC,KAAlB,KAAqC;EAC5D,MAAM;IAACC,IAAD;IAAOC;EAAP,IAAmBH,IAAI,IAAI;IAACE,IAAI,EAAE,EAAP;IAAWC,QAAQ,EAAE;EAArB,CAAjC;EACA,MAAMC,IAAI,GAAGF,IAAI,IAAIG,kBAAA,CAAMH,IAAN,CAArB;;EAEA,IAAI,CAACE,IAAL,EAAW;IACT,oBACE;MAAK,SAAS,EAAEE,cAAA,CAAMC;IAAtB,gBACE;MAAM,SAAS,EAAED,cAAA,CAAML;IAAvB,GAA+BA,KAA/B,CADF,CADF;EAKD;;EAED,oBACE;IAAK,SAAS,EAAEK,cAAA,CAAMC;EAAtB,GACGJ,QAAQ,KAAK,MAAb,gBAAsB,6BAAC,IAAD;IAAM,SAAS,EAAEG,cAAA,CAAMN,IAAvB;IAA6B,KAAK,EAAC;EAAnC,EAAtB,GAA6E,IADhF,EAEGC,KAAK,gBAAG;IAAM,SAAS,EAAEK,cAAA,CAAML;EAAvB,GAA+BA,KAA/B,CAAH,GAAkD,IAF1D,EAGGE,QAAQ,KAAK,OAAb,gBAAuB,6BAAC,IAAD;IAAM,SAAS,EAAEG,cAAA,CAAMN,IAAvB;IAA6B,KAAK,EAAC;EAAnC,EAAvB,GAA8E,IAHjF,CADF;AAOD,CAnBD;;AAqBA,MAAMQ,UAAU,GAAIC,KAAD,IAA4B;EAC7C,MAAM;IACJP,IADI;IAEJD,KAFI;IAGJS,QAHI;IAIJV,IAJI;IAKJ,aAAaW,QALT;IAMJ,eAAeC,UAAU,GAAG,aANxB;IAOJ,cAAcC,SAPV;IAQJC,IARI;IASJC,OAAO,iBATH;IAUJC,SAAS,iBAVL;IAWJC,SAXI;IAYJC,WAZI;IAaJC,QAAQ,GAAG;EAbP,IAcFV,KAdJ;EAeA,MAAMW,WAAW,GAAGrB,gBAAgB,CAACC,IAAD,EAAOC,KAAP,CAApC;EACA,MAAMoB,WAAW,GAAG,IAAAC,mBAAA,EAClBL,SADkB,EAElBX,cAAA,CAAMiB,MAFY,EAGlBrB,IAAI,KAAK,SAAT,IAAsBI,cAAA,CAAMkB,OAHV,EAIlBtB,IAAI,KAAK,WAAT,IAAwBI,cAAA,CAAMmB,SAJZ,EAKlBvB,IAAI,KAAK,UAAT,IAAuBI,cAAA,CAAMoB,QALX,EAMlBxB,IAAI,KAAK,MAAT,IAAmBI,cAAA,CAAMqB,IANP,EAOlBzB,IAAI,KAAK,WAAT,IAAwBI,cAAA,CAAMsB,SAPZ,EAQlBd,IAAI,IAAIR,cAAA,CAAMQ,IARI,EASlBJ,QAAQ,IAAIJ,cAAA,CAAMI,QATA,CAApB;EAYA,MAAMmB,aAAa,GAAG,IAAAC,kBAAA,EAAY,MAAMf,OAAO,EAAzB,EAA6B,CAACA,OAAD,CAA7B,CAAtB;EAEA,MAAMgB,eAAe,GAAG,IAAAD,kBAAA,EAAYE,KAAK,IAAIhB,SAAS,CAACgB,KAAD,CAA9B,EAAuC,CAAChB,SAAD,CAAvC,CAAxB;;EAEA,IAAIF,IAAJ,EAAU;IACR,oBACE,6BAAC,aAAD,eACMA,IADN,EAEOK,QAAQ,IAAI;MACfc,KAAK,EAAEpB,SAAS,IAAIZ;IADL,CAFnB;MAKE,KAAK,EAAEiB,WALT;MAME,SAAS,EAAEG,WANb;MAOE,aAAWV,QAPb;MAQE,eAAaC,UARf;MASE,cAAYC,SAAS,IAAIZ;IAT3B,IAWGmB,WAXH,CADF;EAeD;;EAED,oBACE,oDACOD,QAAQ,IAAI;IACfc,KAAK,EAAEpB,SAAS,IAAIZ;EADL,CADnB;IAIE,IAAI,EAAC,QAJP;IAKE,cAAYY,SAAS,IAAIZ,KAL3B;IAME,aAAWU,QANb;IAOE,eAAaC,UAPf;IAQE,KAAK,EAAEM,WART;IASE,SAAS,EAAEG,WATb;IAUE,OAAO,EAAEQ,aAVX;IAWE,SAAS,EAAEE,eAXb;IAYE,QAAQ,EAAE;EAZZ,IAcGX,WAdH,CADF;AAkBD,CArED;;AAuEAZ,UAAU,CAAC0B,SAAX,2CAAuBA,cAAvB;eAEe1B,U"}
1
+ {"version":3,"file":"index.js","names":["getButtonContent","icon","label","type","faIcon","position","Icon","ICONS","style","buttonContent","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","ButtonLink","props","disabled","dataName","dataTestId","ariaLabel","link","onClick","onKeyDown","className","customStyle","useTitle","contentView","styleButton","classnames","button","primary","secondary","tertiary","text","dangerous","handleOnClick","useCallback","handleOnKeyDown","event","title","propTypes"],"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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"}
@@ -20,9 +20,16 @@ declare const propTypes: {
20
20
  className: PropTypes.Requireable<string>;
21
21
  customStyle: PropTypes.Requireable<PropTypes.InferProps<{}>>;
22
22
  };
23
+ export declare type FaIcontype = {
24
+ name: string;
25
+ color?: string;
26
+ backgroundColor?: string;
27
+ size?: number;
28
+ };
23
29
  export declare type IconType = {
24
30
  position: 'right' | 'left';
25
- type: keyof typeof ICONS;
31
+ type?: keyof typeof ICONS;
32
+ faIcon?: FaIcontype;
26
33
  };
27
34
  export declare type ButtonLinkProps = {
28
35
  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';
@@ -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,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,EAAE,MAAM,OAAO,KAAK,CAAC;CAC1B,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;;;;;;;;;;;;;;;;;;;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 +1 @@
1
- {"version":3,"file":"types.js","names":["propTypes","type","PropTypes","oneOf","label","string","icon","shape","position","ICONS","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 IconType = {\n position: 'right' | 'left';\n type: keyof typeof ICONS;\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;;AAEA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,IAAI,EAAEC,kBAAA,CAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,EAAyB,UAAzB,EAAqC,MAArC,EAA6C,WAA7C,CAAhB,CADU;EAEhBC,KAAK,EAAEF,kBAAA,CAAUG,MAFD;EAGhB,cAAcH,kBAAA,CAAUG,MAHR;EAIhB,aAAaH,kBAAA,CAAUG,MAJP;EAKhB,eAAeH,kBAAA,CAAUG,MALT;EAMhBC,IAAI,EAAEJ,kBAAA,CAAUK,KAAV,CAAgB;IACpBC,QAAQ,EAAEN,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBF,IAAI,EAAEC,kBAAA,CAAUC,KAAV,CAAgB,oBAAKM,kBAAL,CAAhB;EAFc,CAAhB,CANU;EAUhBC,OAAO,EAAER,kBAAA,CAAUS,IAVH;EAWhBC,IAAI,EAAEV,kBAAA,CAAUK,KAAV,CAAgB;IACpBM,IAAI,EAAEX,kBAAA,CAAUG,MADI;IAEpBS,QAAQ,EAAEZ,kBAAA,CAAUa,IAFA;IAGpBC,MAAM,EAAEd,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAXU;EAgBhBc,QAAQ,EAAEf,kBAAA,CAAUa,IAhBJ;EAiBhBG,SAAS,EAAEhB,kBAAA,CAAUG,MAjBL;EAkBhBc,WAAW,EAAEjB,kBAAA,CAAUK,KAAV,CAAgB,EAAhB;AAlBG,CAAlB;eA+CeP,S"}
1
+ {"version":3,"file":"types.js","names":["propTypes","type","PropTypes","oneOf","label","string","icon","shape","position","ICONS","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;;AAEA;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,IAAI,EAAEC,kBAAA,CAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,EAAyB,UAAzB,EAAqC,MAArC,EAA6C,WAA7C,CAAhB,CADU;EAEhBC,KAAK,EAAEF,kBAAA,CAAUG,MAFD;EAGhB,cAAcH,kBAAA,CAAUG,MAHR;EAIhB,aAAaH,kBAAA,CAAUG,MAJP;EAKhB,eAAeH,kBAAA,CAAUG,MALT;EAMhBC,IAAI,EAAEJ,kBAAA,CAAUK,KAAV,CAAgB;IACpBC,QAAQ,EAAEN,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CADU;IAEpBF,IAAI,EAAEC,kBAAA,CAAUC,KAAV,CAAgB,oBAAKM,kBAAL,CAAhB;EAFc,CAAhB,CANU;EAUhBC,OAAO,EAAER,kBAAA,CAAUS,IAVH;EAWhBC,IAAI,EAAEV,kBAAA,CAAUK,KAAV,CAAgB;IACpBM,IAAI,EAAEX,kBAAA,CAAUG,MADI;IAEpBS,QAAQ,EAAEZ,kBAAA,CAAUa,IAFA;IAGpBC,MAAM,EAAEd,kBAAA,CAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;EAHY,CAAhB,CAXU;EAgBhBc,QAAQ,EAAEf,kBAAA,CAAUa,IAhBJ;EAiBhBG,SAAS,EAAEhB,kBAAA,CAAUG,MAjBL;EAkBhBc,WAAW,EAAEjB,kBAAA,CAAUK,KAAV,CAAgB,EAAhB;AAlBG,CAAlB;eAuDeP,S"}
@@ -0,0 +1,37 @@
1
+ export function calculateHoveredSelectedBgColor(selectedBgColor: any, luminosityDelta?: number): string;
2
+ export default Chip;
3
+ declare function Chip(props: any, context: any): JSX.Element;
4
+ declare namespace Chip {
5
+ namespace contextTypes {
6
+ const skin: PropTypes.Requireable<PropTypes.InferProps<{
7
+ common: PropTypes.Requireable<{
8
+ [x: string]: any;
9
+ }>;
10
+ images: PropTypes.Requireable<PropTypes.InferProps<{
11
+ 'logo-mobile': PropTypes.Requireable<any>;
12
+ logo: PropTypes.Requireable<any>;
13
+ 'logo-email': PropTypes.Requireable<any>;
14
+ login: PropTypes.Requireable<any>;
15
+ }>>;
16
+ icons: PropTypes.Requireable<{
17
+ [x: string]: any;
18
+ }>;
19
+ mod: PropTypes.Requireable<{
20
+ [x: string]: any;
21
+ }>;
22
+ courses: PropTypes.Requireable<any[]>;
23
+ texts: PropTypes.Requireable<{
24
+ [x: string]: any;
25
+ }>;
26
+ }>>;
27
+ }
28
+ namespace propTypes {
29
+ const text: PropTypes.Requireable<string>;
30
+ const selected: PropTypes.Requireable<boolean>;
31
+ const customIcon: PropTypes.Requireable<string>;
32
+ const backgroundColor: PropTypes.Requireable<string>;
33
+ const onClick: PropTypes.Requireable<(...args: any[]) => any>;
34
+ }
35
+ }
36
+ import PropTypes from "prop-types";
37
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chip/index.js"],"names":[],"mappings":"AAeO,wGAQN;;AAED,6DAsDC"}
@@ -0,0 +1,109 @@
1
+ "use strict";
2
+
3
+ exports.__esModule = true;
4
+ exports.default = exports.calculateHoveredSelectedBgColor = void 0;
5
+
6
+ var _react = _interopRequireWildcard(require("react"));
7
+
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+
10
+ var _classnames = _interopRequireDefault(require("classnames"));
11
+
12
+ var _get = _interopRequireDefault(require("lodash/fp/get"));
13
+
14
+ var _colorjs = _interopRequireDefault(require("colorjs.io"));
15
+
16
+ var _reactFontawesome = require("@fortawesome/react-fontawesome");
17
+
18
+ var _provider = _interopRequireDefault(require("../provider"));
19
+
20
+ var _colors = require("../../variables/colors");
21
+
22
+ var _style = _interopRequireDefault(require("./style.css"));
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
+
26
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
27
+
28
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
+
30
+ 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); }
31
+
32
+ const LUMINOSITY_DELTA = 0.08;
33
+ const {
34
+ cm_primary_blue: DEFAULT_BACKGROUND_COLOR
35
+ } = _colors.COLORS;
36
+ const ICON_SIZE = '12px';
37
+
38
+ const calculateHoveredSelectedBgColor = (selectedBgColor, luminosityDelta = LUMINOSITY_DELTA) => {
39
+ return new _colorjs.default(selectedBgColor).to('hsl').set({
40
+ l: l => l * (1 - luminosityDelta)
41
+ }).toString();
42
+ };
43
+
44
+ exports.calculateHoveredSelectedBgColor = calculateHoveredSelectedBgColor;
45
+
46
+ const Chip = (props, context) => {
47
+ const {
48
+ text,
49
+ selected = false,
50
+ customIcon,
51
+ onClick,
52
+ backgroundColor = DEFAULT_BACKGROUND_COLOR
53
+ } = props;
54
+ const {
55
+ skin
56
+ } = context;
57
+ const skinColor = (0, _get.default)('common.primary', skin);
58
+ const selectedBgColor = backgroundColor === 'skin' && skinColor ? skinColor : backgroundColor;
59
+ const hoveredSelectedBgColor = calculateHoveredSelectedBgColor(selectedBgColor);
60
+ const [isHovered, setIsHovered] = (0, _react.useState)(false);
61
+ const handleClick = (0, _react.useMemo)(() => onClick, [onClick]);
62
+ const handleMouseEnter = (0, _react.useCallback)(() => {
63
+ setIsHovered(true);
64
+ }, []);
65
+ const handleMouseLeave = (0, _react.useCallback)(() => {
66
+ setIsHovered(false);
67
+ }, []);
68
+ const hoverStyle = isHovered ? {
69
+ backgroundColor: hoveredSelectedBgColor
70
+ } : {};
71
+ const defaultIcon = selected ? 'fa-check' : 'fa-plus';
72
+ return /*#__PURE__*/_react.default.createElement("div", {
73
+ className: (0, _classnames.default)(_style.default.container, !selected && _style.default.unselected),
74
+ style: _extends({}, selected && selectedBgColor ? {
75
+ backgroundColor: selectedBgColor
76
+ } : {}, selected && hoverStyle),
77
+ onClick: handleClick,
78
+ onMouseEnter: handleMouseEnter,
79
+ onMouseLeave: handleMouseLeave,
80
+ "aria-label": text,
81
+ "data-name": text
82
+ }, /*#__PURE__*/_react.default.createElement("div", {
83
+ className: _style.default.textZone,
84
+ title: text
85
+ }, /*#__PURE__*/_react.default.createElement("span", {
86
+ className: _style.default.text,
87
+ style: selected ? {
88
+ color: 'white'
89
+ } : {}
90
+ }, text)), /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
91
+ className: selected ? _style.default.selectedIconWrapper : _style.default.unselectedIconWrapper,
92
+ icon: customIcon ? `fa-${customIcon}` : defaultIcon,
93
+ fontSize: ICON_SIZE
94
+ }));
95
+ };
96
+
97
+ Chip.contextTypes = {
98
+ skin: _provider.default.childContextTypes.skin
99
+ };
100
+ Chip.propTypes = process.env.NODE_ENV !== "production" ? {
101
+ text: _propTypes.default.string,
102
+ selected: _propTypes.default.bool,
103
+ customIcon: _propTypes.default.string,
104
+ backgroundColor: _propTypes.default.string,
105
+ onClick: _propTypes.default.func
106
+ } : {};
107
+ var _default = Chip;
108
+ exports.default = _default;
109
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["LUMINOSITY_DELTA","cm_primary_blue","DEFAULT_BACKGROUND_COLOR","COLORS","ICON_SIZE","calculateHoveredSelectedBgColor","selectedBgColor","luminosityDelta","Color","to","set","l","toString","Chip","props","context","text","selected","customIcon","onClick","backgroundColor","skin","skinColor","get","hoveredSelectedBgColor","isHovered","setIsHovered","useState","handleClick","useMemo","handleMouseEnter","useCallback","handleMouseLeave","hoverStyle","defaultIcon","classnames","style","container","unselected","textZone","color","selectedIconWrapper","unselectedIconWrapper","contextTypes","Provider","childContextTypes","propTypes","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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"}
@@ -0,0 +1,65 @@
1
+ @value colors: "../../variables/colors.css";
2
+ @value cm_grey_100 from colors;
3
+ @value cm_grey_200 from colors;
4
+ @value cm_grey_400 from colors;
5
+ @value cm_grey_700 from colors;
6
+ @value cm_positive_100 from colors;
7
+ @value white from colors;
8
+
9
+ .container {
10
+ width: 100%;
11
+ height: 52px;
12
+ border-radius: 10px;
13
+ padding: 10px 16px;
14
+ position: relative;
15
+ display: flex;
16
+ align-items: center;
17
+ box-sizing: border-box;
18
+ cursor: pointer;
19
+ }
20
+
21
+ .unselected {
22
+ background-color: cm_grey_100;
23
+ color: cm_grey_400;
24
+ }
25
+
26
+ .unselected:hover {
27
+ background-color: cm_grey_200;
28
+ color: cm_grey_700;
29
+ }
30
+
31
+ .unselected:hover .unselectedIconWrapper {
32
+ color: cm_grey_700;
33
+ }
34
+
35
+ .textZone {
36
+ flex: 1 1 100%;
37
+ padding-right: 32px;
38
+ width: calc(100% - 32px);
39
+ }
40
+
41
+ .text {
42
+ font-family: 'Gilroy';
43
+ font-style: normal;
44
+ font-weight: 600;
45
+ font-size: 14px;
46
+ text-overflow: ellipsis;
47
+ white-space: nowrap;
48
+ overflow: hidden;
49
+ display: block;
50
+ }
51
+
52
+ .icon{
53
+ position: absolute;
54
+ right: 18px;
55
+ }
56
+
57
+ .selectedIconWrapper {
58
+ composes: icon;
59
+ color: white;
60
+ }
61
+
62
+ .unselectedIconWrapper {
63
+ composes: icon;
64
+ color: cm_grey_400;
65
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chips/index.js"],"names":[],"mappings":";AASA,gDAuBC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chips/index.js"],"names":[],"mappings":";AAWA,gDAuBC"}
@@ -19,6 +19,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
19
19
 
20
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
21
 
22
+ // This component is a simpler version of the generic Chip component, in use in CoorpManager.
22
23
  const Chips = props => {
23
24
  const {
24
25
  text,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Chips","props","text","information","selected","onClick","handleClick","useMemo","classnames","style","container","unselected","textZone","selectedIconWrapper","unselectedIconWrapper","propTypes","PropTypes","string","bool","func"],"sources":["../../../src/atom/chips/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n NovaSolidRemoveAddAddCircle1 as AddIcon,\n NovaSolidStatusCheckCircle2 as SelectedIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst Chips = props => {\n const {text, information, selected = false, onClick} = props;\n\n const handleClick = useMemo(() => () => onClick(), [onClick]);\n\n return (\n <div\n className={classnames(style.container, selected ? style.selected : style.unselected)}\n onClick={handleClick}\n aria-label={`${text} ${information}`}\n data-name={text}\n >\n <div className={style.textZone} title={text}>\n <span className={style.text}>{text}</span>\n <span className={style.information}>{information}</span>\n </div>\n {selected ? (\n <SelectedIcon className={style.selectedIconWrapper} />\n ) : (\n <AddIcon className={style.unselectedIconWrapper} />\n )}\n </div>\n );\n};\n\nChips.propTypes = {\n text: PropTypes.string,\n information: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nexport default Chips;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;;;;;;;AAEA,MAAMA,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IAACC,IAAD;IAAOC,WAAP;IAAoBC,QAAQ,GAAG,KAA/B;IAAsCC;EAAtC,IAAiDJ,KAAvD;EAEA,MAAMK,WAAW,GAAG,IAAAC,cAAA,EAAQ,MAAM,MAAMF,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAApB;EAEA,oBACE;IACE,SAAS,EAAE,IAAAG,mBAAA,EAAWC,cAAA,CAAMC,SAAjB,EAA4BN,QAAQ,GAAGK,cAAA,CAAML,QAAT,GAAoBK,cAAA,CAAME,UAA9D,CADb;IAEE,OAAO,EAAEL,WAFX;IAGE,cAAa,GAAEJ,IAAK,IAAGC,WAAY,EAHrC;IAIE,aAAWD;EAJb,gBAME;IAAK,SAAS,EAAEO,cAAA,CAAMG,QAAtB;IAAgC,KAAK,EAAEV;EAAvC,gBACE;IAAM,SAAS,EAAEO,cAAA,CAAMP;EAAvB,GAA8BA,IAA9B,CADF,eAEE;IAAM,SAAS,EAAEO,cAAA,CAAMN;EAAvB,GAAqCA,WAArC,CAFF,CANF,EAUGC,QAAQ,gBACP,6BAAC,sCAAD;IAAc,SAAS,EAAEK,cAAA,CAAMI;EAA/B,EADO,gBAGP,6BAAC,uCAAD;IAAS,SAAS,EAAEJ,cAAA,CAAMK;EAA1B,EAbJ,CADF;AAkBD,CAvBD;;AAyBAd,KAAK,CAACe,SAAN,2CAAkB;EAChBb,IAAI,EAAEc,kBAAA,CAAUC,MADA;EAEhBd,WAAW,EAAEa,kBAAA,CAAUC,MAFP;EAGhBb,QAAQ,EAAEY,kBAAA,CAAUE,IAHJ;EAIhBb,OAAO,EAAEW,kBAAA,CAAUG;AAJH,CAAlB;eAOenB,K"}
1
+ {"version":3,"file":"index.js","names":["Chips","props","text","information","selected","onClick","handleClick","useMemo","classnames","style","container","unselected","textZone","selectedIconWrapper","unselectedIconWrapper","propTypes","PropTypes","string","bool","func"],"sources":["../../../src/atom/chips/index.js"],"sourcesContent":["// This component is a simpler version of the generic Chip component, in use in CoorpManager.\n\nimport React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n NovaSolidRemoveAddAddCircle1 as AddIcon,\n NovaSolidStatusCheckCircle2 as SelectedIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst Chips = props => {\n const {text, information, selected = false, onClick} = props;\n\n const handleClick = useMemo(() => () => onClick(), [onClick]);\n\n return (\n <div\n className={classnames(style.container, selected ? style.selected : style.unselected)}\n onClick={handleClick}\n aria-label={`${text} ${information}`}\n data-name={text}\n >\n <div className={style.textZone} title={text}>\n <span className={style.text}>{text}</span>\n <span className={style.information}>{information}</span>\n </div>\n {selected ? (\n <SelectedIcon className={style.selectedIconWrapper} />\n ) : (\n <AddIcon className={style.unselectedIconWrapper} />\n )}\n </div>\n );\n};\n\nChips.propTypes = {\n text: PropTypes.string,\n information: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func\n};\n\nexport default Chips;\n"],"mappings":";;;;;AAEA;;AACA;;AACA;;AACA;;AAIA;;;;;;;;AATA;AAWA,MAAMA,KAAK,GAAGC,KAAK,IAAI;EACrB,MAAM;IAACC,IAAD;IAAOC,WAAP;IAAoBC,QAAQ,GAAG,KAA/B;IAAsCC;EAAtC,IAAiDJ,KAAvD;EAEA,MAAMK,WAAW,GAAG,IAAAC,cAAA,EAAQ,MAAM,MAAMF,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAApB;EAEA,oBACE;IACE,SAAS,EAAE,IAAAG,mBAAA,EAAWC,cAAA,CAAMC,SAAjB,EAA4BN,QAAQ,GAAGK,cAAA,CAAML,QAAT,GAAoBK,cAAA,CAAME,UAA9D,CADb;IAEE,OAAO,EAAEL,WAFX;IAGE,cAAa,GAAEJ,IAAK,IAAGC,WAAY,EAHrC;IAIE,aAAWD;EAJb,gBAME;IAAK,SAAS,EAAEO,cAAA,CAAMG,QAAtB;IAAgC,KAAK,EAAEV;EAAvC,gBACE;IAAM,SAAS,EAAEO,cAAA,CAAMP;EAAvB,GAA8BA,IAA9B,CADF,eAEE;IAAM,SAAS,EAAEO,cAAA,CAAMN;EAAvB,GAAqCA,WAArC,CAFF,CANF,EAUGC,QAAQ,gBACP,6BAAC,sCAAD;IAAc,SAAS,EAAEK,cAAA,CAAMI;EAA/B,EADO,gBAGP,6BAAC,uCAAD;IAAS,SAAS,EAAEJ,cAAA,CAAMK;EAA1B,EAbJ,CADF;AAkBD,CAvBD;;AAyBAd,KAAK,CAACe,SAAN,2CAAkB;EAChBb,IAAI,EAAEc,kBAAA,CAAUC,MADA;EAEhBd,WAAW,EAAEa,kBAAA,CAAUC,MAFP;EAGhBb,QAAQ,EAAEY,kBAAA,CAAUE,IAHJ;EAIhBb,OAAO,EAAEW,kBAAA,CAAUG;AAJH,CAAlB;eAOenB,K"}
@@ -65,7 +65,7 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
65
65
  preset = DEFAULT_PRESET,
66
66
  size
67
67
  }) {
68
- const effectiveIconColor = iconColor || backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR;
68
+ const effectiveIconColor = iconColor || (backgroundColor ? getForegroundColor(backgroundColor) : DEFAULT_ICON_COLOR);
69
69
  const effectiveSize = size ? (0, _merge.default)(SIZE_CONFIGS[DEFAULT_PRESET], size) : (0, _getOr.default)(SIZE_CONFIGS[DEFAULT_PRESET], (0, _toLower.default)(preset), SIZE_CONFIGS);
70
70
  const wrapperSize = effectiveSize.wrapperSize - ICON_PADDING * 2;
71
71
  const iconWrapperStyle = {
@@ -80,7 +80,7 @@ const Icon = /*#__PURE__*/_react.default.memo(function Icon({
80
80
  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
81
81
  icon: `fa-${iconName}`,
82
82
  color: effectiveIconColor,
83
- "font-size": effectiveSize.faSize
83
+ fontSize: effectiveSize.faSize
84
84
  }));
85
85
  });
86
86
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["library","add","fas","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","Color","to","set","l","toString","Icon","React","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","merge","getOr","toLower","iconWrapperStyle","width","height","padding","style","iconWrapper","propTypes","PropTypes","string","isRequired","oneOf","shape","number"],"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 font-size={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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,2BAAA,CAAQC,GAAR,CAAYC,qBAAZ;;AAEA,MAAMC,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACA,MAAMC,YAAY,GAAG,CAArB;AACO,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;;AAeO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAIC,gBAAJ,CAAUD,eAAV,EAA2BE,EAA3B,CAA8B,KAA9B,EAAqCC,GAArC,CAAyC;EAACC,CAAC,EAAEf;AAAJ,CAAzC,EAA+DgB,QAA/D,EADK;;;;AAGP,MAAMC,IAAI,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,IAAT,CAAc;EACpCG,QADoC;EAEpCC,SAFoC;EAGpCV,eAHoC;EAIpCW,MAAM,GAAGvB,cAJ2B;EAKpCwB;AALoC,CAAd,EAMrB;EACD,MAAMC,kBAAkB,GACtBH,SAAS,IAAIV,eAAb,GAA+BD,kBAAkB,CAACC,eAAD,CAAjD,GAAqER,kBADvE;EAGA,MAAMsB,aAAa,GAAGF,IAAI,GACtB,IAAAG,cAAA,EAAMtB,YAAY,CAACL,cAAD,CAAlB,EAAoCwB,IAApC,CADsB,GAEtB,IAAAI,cAAA,EAAMvB,YAAY,CAACL,cAAD,CAAlB,EAAoC,IAAA6B,gBAAA,EAAQN,MAAR,CAApC,EAAqDlB,YAArD,CAFJ;EAIA,MAAMG,WAAW,GAAGkB,aAAa,CAAClB,WAAd,GAA4BL,YAAY,GAAG,CAA/D;EAEA,MAAM2B,gBAAgB,GAAG;IACvBlB,eADuB;IAEvBmB,KAAK,EAAEvB,WAFgB;IAGvBwB,MAAM,EAAExB,WAHe;IAIvByB,OAAO,EAAE9B;EAJc,CAAzB;EAOA,oBACE;IAAK,SAAS,EAAE+B,cAAA,CAAMC,WAAtB;IAAmC,KAAK,EAAEL;EAA1C,gBACE,6BAAC,iCAAD;IACE,IAAI,EAAG,MAAKT,QAAS,EADvB;IAEE,KAAK,EAAEI,kBAFT;IAGE,aAAWC,aAAa,CAACnB;EAH3B,EADF,CADF;AASD,CAhCY,CAAb;;AAkCAW,IAAI,CAACkB,SAAL,2CAAiB;EACff,QAAQ,EAAEgB,kBAAA,CAAUC,MAAV,CAAiBC,UADZ;EAEfjB,SAAS,EAAEe,kBAAA,CAAUC,MAFN;EAGf1B,eAAe,EAAEyB,kBAAA,CAAUC,MAHZ;EAIff,MAAM,EAAEc,kBAAA,CAAUG,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CAJO;EAKfhB,IAAI,EAAEa,kBAAA,CAAUI,KAAV,CAAgB;IACpBlC,MAAM,EAAEmC,iBADY;IAEpBlC,WAAW,EAAE6B,kBAAA,CAAUK;EAFH,CAAhB;AALS,CAAjB;eAWexB,I"}
1
+ {"version":3,"file":"index.js","names":["library","add","fas","DEFAULT_PRESET","ICON_LUMINOSITY","DEFAULT_WRAPPER_SIZE","ICON_PADDING","DEFAULT_ICON_COLOR","SIZE_CONFIGS","s","faSize","wrapperSize","m","xl","getForegroundColor","backgroundColor","Color","to","set","l","toString","Icon","React","memo","iconName","iconColor","preset","size","effectiveIconColor","effectiveSize","merge","getOr","toLower","iconWrapperStyle","width","height","padding","style","iconWrapper","propTypes","PropTypes","string","isRequired","oneOf","shape","number"],"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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEAA,2BAAA,CAAQC,GAAR,CAAYC,qBAAZ;;AAEA,MAAMC,cAAc,GAAG,GAAvB;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,oBAAoB,GAAG,EAA7B;AACA,MAAMC,YAAY,GAAG,CAArB;AACO,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;;AAeO,MAAMG,kBAAkB,GAAGC,eAAe,IAC/C,IAAIC,gBAAJ,CAAUD,eAAV,EAA2BE,EAA3B,CAA8B,KAA9B,EAAqCC,GAArC,CAAyC;EAACC,CAAC,EAAEf;AAAJ,CAAzC,EAA+DgB,QAA/D,EADK;;;;AAGP,MAAMC,IAAI,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,IAAT,CAAc;EACpCG,QADoC;EAEpCC,SAFoC;EAGpCV,eAHoC;EAIpCW,MAAM,GAAGvB,cAJ2B;EAKpCwB;AALoC,CAAd,EAMrB;EACD,MAAMC,kBAAkB,GACtBH,SAAS,KAAKV,eAAe,GAAGD,kBAAkB,CAACC,eAAD,CAArB,GAAyCR,kBAA7D,CADX;EAGA,MAAMsB,aAAa,GAAGF,IAAI,GACtB,IAAAG,cAAA,EAAMtB,YAAY,CAACL,cAAD,CAAlB,EAAoCwB,IAApC,CADsB,GAEtB,IAAAI,cAAA,EAAMvB,YAAY,CAACL,cAAD,CAAlB,EAAoC,IAAA6B,gBAAA,EAAQN,MAAR,CAApC,EAAqDlB,YAArD,CAFJ;EAIA,MAAMG,WAAW,GAAGkB,aAAa,CAAClB,WAAd,GAA4BL,YAAY,GAAG,CAA/D;EAEA,MAAM2B,gBAAgB,GAAG;IACvBlB,eADuB;IAEvBmB,KAAK,EAAEvB,WAFgB;IAGvBwB,MAAM,EAAExB,WAHe;IAIvByB,OAAO,EAAE9B;EAJc,CAAzB;EAOA,oBACE;IAAK,SAAS,EAAE+B,cAAA,CAAMC,WAAtB;IAAmC,KAAK,EAAEL;EAA1C,gBACE,6BAAC,iCAAD;IACE,IAAI,EAAG,MAAKT,QAAS,EADvB;IAEE,KAAK,EAAEI,kBAFT;IAGE,QAAQ,EAAEC,aAAa,CAACnB;EAH1B,EADF,CADF;AASD,CAhCY,CAAb;;AAkCAW,IAAI,CAACkB,SAAL,2CAAiB;EACff,QAAQ,EAAEgB,kBAAA,CAAUC,MAAV,CAAiBC,UADZ;EAEfjB,SAAS,EAAEe,kBAAA,CAAUC,MAFN;EAGf1B,eAAe,EAAEyB,kBAAA,CAAUC,MAHZ;EAIff,MAAM,EAAEc,kBAAA,CAAUG,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,EAAW,IAAX,CAAhB,CAJO;EAKfhB,IAAI,EAAEa,kBAAA,CAAUI,KAAV,CAAgB;IACpBlC,MAAM,EAAEmC,iBADY;IAEpBlC,WAAW,EAAE6B,kBAAA,CAAUK;EAFH,CAAhB;AALS,CAAjB;eAWexB,I"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,KAAK,EAAoB,MAAM,SAAS,CAAC;AAgCjD,QAAA,MAAM,eAAe;YAAW,KAAK;;;;;;CAepC,CAAC;AAIF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,KAAK,EAAoB,MAAM,SAAS,CAAC;AA8BjD,QAAA,MAAM,eAAe;YAAW,KAAK;;;;;;CAepC,CAAC;AAIF,eAAe,eAAe,CAAC"}
@@ -9,15 +9,19 @@ var _progressBar = _interopRequireDefault(require("../progress-bar"));
9
9
 
10
10
  var _statusItem = _interopRequireDefault(require("../../atom/status-item"));
11
11
 
12
+ var _colors = require("../../variables/colors");
13
+
12
14
  var _style = _interopRequireDefault(require("./style.css"));
13
15
 
14
16
  var _types = require("./types");
15
17
 
16
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
19
 
18
- const cm_negative_100 = '#ed3436';
19
- const cm_primary_blue = '#0061FF';
20
- const cm_positive_100 = '#35CC7F';
20
+ const {
21
+ negative: cm_negative_100,
22
+ cm_primary_blue,
23
+ positive: cm_positive_100
24
+ } = _colors.COLORS;
21
25
  const STATUS = {
22
26
  inProgress: 'inProgress',
23
27
  fail: 'fail'
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["cm_negative_100","cm_primary_blue","cm_positive_100","STATUS","inProgress","fail","renderStatusIcon","status","progress","style","progressText","statusItemWrapper","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","backgroundColor","borderRadius","propTypes"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst cm_negative_100 = '#ed3436';\nconst cm_primary_blue = '#0061FF';\nconst cm_positive_100 = '#35CC7F';\n\nconst STATUS = {\n inProgress: 'inProgress',\n fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n if (status === STATUS.inProgress)\n return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n return (\n <div className={style.statusItemWrapper}>\n <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n </div>\n );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n switch (status) {\n case STATUS.fail:\n return cm_negative_100;\n case STATUS.inProgress:\n return cm_primary_blue;\n default:\n return cm_positive_100;\n }\n};\n\nconst BulkProgressBar = (props: Props) => {\n const {'data-name': dataName, status, progress} = props;\n\n return (\n <div className={style.container} data-name={dataName}>\n <ProgressBar\n className={style.progressBar}\n value={progress}\n max={100}\n steps={0}\n style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n />\n {renderStatusIcon(status, progress)}\n </div>\n );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,eAAe,GAAG,SAAxB;AACA,MAAMC,eAAe,GAAG,SAAxB;AACA,MAAMC,eAAe,GAAG,SAAxB;AAEA,MAAMC,MAAM,GAAG;EACbC,UAAU,EAAE,YADC;EAEbC,IAAI,EAAE;AAFO,CAAf;;AAKA,MAAMC,gBAAgB,GAAG,CAACC,MAAD,EAAiBC,QAAjB,KAAsC;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAtB,EACE,oBAAO;IAAK,IAAI,EAAC,QAAV;IAAmB,SAAS,EAAEK,cAAA,CAAMC;EAApC,GAAoD,GAAEF,QAAS,IAA/D,CAAP;EACF,oBACE;IAAK,SAAS,EAAEC,cAAA,CAAME;EAAtB,gBACE,6BAAC,mBAAD;IAAY,IAAI,EAAEJ,MAAM,KAAKJ,MAAM,CAACE,IAAlB,GAAyB,SAAzB,GAAqC;EAAvD,EADF,CADF;AAKD,CARD;;AAUA,MAAMO,uBAAuB,GAAIL,MAAD,IAAoB;EAClD,QAAQA,MAAR;IACE,KAAKJ,MAAM,CAACE,IAAZ;MACE,OAAOL,eAAP;;IACF,KAAKG,MAAM,CAACC,UAAZ;MACE,OAAOH,eAAP;;IACF;MACE,OAAOC,eAAP;EANJ;AAQD,CATD;;AAWA,MAAMW,eAAe,GAAIC,KAAD,IAAkB;EACxC,MAAM;IAAC,aAAaC,QAAd;IAAwBR,MAAxB;IAAgCC;EAAhC,IAA4CM,KAAlD;EAEA,oBACE;IAAK,SAAS,EAAEL,cAAA,CAAMO,SAAtB;IAAiC,aAAWD;EAA5C,gBACE,6BAAC,oBAAD;IACE,SAAS,EAAEN,cAAA,CAAMQ,WADnB;IAEE,KAAK,EAAET,QAFT;IAGE,GAAG,EAAE,GAHP;IAIE,KAAK,EAAE,CAJT;IAKE,KAAK,EAAE;MAACU,eAAe,EAAEN,uBAAuB,CAACL,MAAD,CAAzC;MAAmDY,YAAY,EAAE;IAAjE;EALT,EADF,EAQGb,gBAAgB,CAACC,MAAD,EAASC,QAAT,CARnB,CADF;AAYD,CAfD;;AAiBAK,eAAe,CAACO,SAAhB,2CAA4BA,gBAA5B;eAEeP,e"}
1
+ {"version":3,"file":"index.js","names":["negative","cm_negative_100","cm_primary_blue","positive","cm_positive_100","COLORS","STATUS","inProgress","fail","renderStatusIcon","status","progress","style","progressText","statusItemWrapper","resolveProgressBarColor","BulkProgressBar","props","dataName","container","progressBar","backgroundColor","borderRadius","propTypes"],"sources":["../../../src/molecule/bulk-progress-bar/index.tsx"],"sourcesContent":["import React from 'react';\nimport ProgressBar from '../progress-bar';\nimport StatusItem from '../../atom/status-item';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport {Props, propTypes, Status} from './types';\n\nconst {negative: cm_negative_100, cm_primary_blue, positive: cm_positive_100} = COLORS;\n\nconst STATUS = {\n inProgress: 'inProgress',\n fail: 'fail'\n};\n\nconst renderStatusIcon = (status: Status, progress: number) => {\n if (status === STATUS.inProgress)\n return <div role=\"status\" className={style.progressText}>{`${progress} %`}</div>;\n return (\n <div className={style.statusItemWrapper}>\n <StatusItem icon={status === STATUS.fail ? 'invalid' : 'valid'} />\n </div>\n );\n};\n\nconst resolveProgressBarColor = (status: Status) => {\n switch (status) {\n case STATUS.fail:\n return cm_negative_100;\n case STATUS.inProgress:\n return cm_primary_blue;\n default:\n return cm_positive_100;\n }\n};\n\nconst BulkProgressBar = (props: Props) => {\n const {'data-name': dataName, status, progress} = props;\n\n return (\n <div className={style.container} data-name={dataName}>\n <ProgressBar\n className={style.progressBar}\n value={progress}\n max={100}\n steps={0}\n style={{backgroundColor: resolveProgressBarColor(status), borderRadius: '10px'}}\n />\n {renderStatusIcon(status, progress)}\n </div>\n );\n};\n\nBulkProgressBar.propTypes = propTypes;\n\nexport default BulkProgressBar;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAM;EAACA,QAAQ,EAAEC,eAAX;EAA4BC,eAA5B;EAA6CC,QAAQ,EAAEC;AAAvD,IAA0EC,cAAhF;AAEA,MAAMC,MAAM,GAAG;EACbC,UAAU,EAAE,YADC;EAEbC,IAAI,EAAE;AAFO,CAAf;;AAKA,MAAMC,gBAAgB,GAAG,CAACC,MAAD,EAAiBC,QAAjB,KAAsC;EAC7D,IAAID,MAAM,KAAKJ,MAAM,CAACC,UAAtB,EACE,oBAAO;IAAK,IAAI,EAAC,QAAV;IAAmB,SAAS,EAAEK,cAAA,CAAMC;EAApC,GAAoD,GAAEF,QAAS,IAA/D,CAAP;EACF,oBACE;IAAK,SAAS,EAAEC,cAAA,CAAME;EAAtB,gBACE,6BAAC,mBAAD;IAAY,IAAI,EAAEJ,MAAM,KAAKJ,MAAM,CAACE,IAAlB,GAAyB,SAAzB,GAAqC;EAAvD,EADF,CADF;AAKD,CARD;;AAUA,MAAMO,uBAAuB,GAAIL,MAAD,IAAoB;EAClD,QAAQA,MAAR;IACE,KAAKJ,MAAM,CAACE,IAAZ;MACE,OAAOP,eAAP;;IACF,KAAKK,MAAM,CAACC,UAAZ;MACE,OAAOL,eAAP;;IACF;MACE,OAAOE,eAAP;EANJ;AAQD,CATD;;AAWA,MAAMY,eAAe,GAAIC,KAAD,IAAkB;EACxC,MAAM;IAAC,aAAaC,QAAd;IAAwBR,MAAxB;IAAgCC;EAAhC,IAA4CM,KAAlD;EAEA,oBACE;IAAK,SAAS,EAAEL,cAAA,CAAMO,SAAtB;IAAiC,aAAWD;EAA5C,gBACE,6BAAC,oBAAD;IACE,SAAS,EAAEN,cAAA,CAAMQ,WADnB;IAEE,KAAK,EAAET,QAFT;IAGE,GAAG,EAAE,GAHP;IAIE,KAAK,EAAE,CAJT;IAKE,KAAK,EAAE;MAACU,eAAe,EAAEN,uBAAuB,CAACL,MAAD,CAAzC;MAAmDY,YAAY,EAAE;IAAjE;EALT,EADF,EAQGb,gBAAgB,CAACC,MAAD,EAASC,QAAT,CARnB,CADF;AAYD,CAfD;;AAiBAK,eAAe,CAACO,SAAhB,2CAA4BA,gBAA5B;eAEeP,e"}
@@ -0,0 +1,21 @@
1
+ export default LearnerSkillCard;
2
+ declare function LearnerSkillCard(props: any, context: any): JSX.Element;
3
+ declare namespace LearnerSkillCard {
4
+ namespace contextTypes {
5
+ const translate: PropTypes.Requireable<(...args: any[]) => any>;
6
+ }
7
+ const propTypes: {
8
+ 'aria-label': PropTypes.Requireable<string>;
9
+ skillTitle: PropTypes.Requireable<string>;
10
+ skillAriaLabel: PropTypes.Requireable<string>;
11
+ metrics: PropTypes.Requireable<PropTypes.InferProps<{
12
+ skillCourses: PropTypes.Requireable<number>;
13
+ skillQuestions: PropTypes.Requireable<number>;
14
+ completedCourses: PropTypes.Requireable<number>;
15
+ }>>;
16
+ onReviewClick: PropTypes.Requireable<(...args: any[]) => any>;
17
+ onExploreClick: PropTypes.Requireable<(...args: any[]) => any>;
18
+ };
19
+ }
20
+ import PropTypes from "prop-types";
21
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/learner-skill-card/index.js"],"names":[],"mappings":";AASA,yEAsJC"}