@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.
- package/es/atom/button-link/index.d.ts.map +1 -1
- package/es/atom/button-link/index.js +17 -9
- package/es/atom/button-link/index.js.map +1 -1
- package/es/atom/button-link/types.d.ts +8 -1
- package/es/atom/button-link/types.d.ts.map +1 -1
- package/es/atom/button-link/types.js.map +1 -1
- package/es/atom/chip/index.d.ts +37 -0
- package/es/atom/chip/index.d.ts.map +1 -0
- package/es/atom/chip/index.js +85 -0
- package/es/atom/chip/index.js.map +1 -0
- package/es/atom/chip/style.css +65 -0
- package/es/atom/chips/index.d.ts.map +1 -1
- package/es/atom/chips/index.js +1 -0
- package/es/atom/chips/index.js.map +1 -1
- package/es/atom/icon/index.js +2 -2
- package/es/atom/icon/index.js.map +1 -1
- package/es/molecule/bulk-progress-bar/index.d.ts.map +1 -1
- package/es/molecule/bulk-progress-bar/index.js +6 -3
- package/es/molecule/bulk-progress-bar/index.js.map +1 -1
- package/es/molecule/learner-skill-card/index.d.ts +21 -0
- package/es/molecule/learner-skill-card/index.d.ts.map +1 -0
- package/es/molecule/learner-skill-card/index.js +159 -0
- package/es/molecule/learner-skill-card/index.js.map +1 -0
- package/es/molecule/learner-skill-card/style.css +119 -0
- package/es/molecule/questions/template/index.d.ts +1 -1
- package/es/molecule/quick-access-card/index.d.ts.map +1 -1
- package/es/molecule/quick-access-card/index.js +5 -1
- package/es/molecule/quick-access-card/index.js.map +1 -1
- package/es/template/mobile-login/welcome/index.native.d.ts.map +1 -1
- package/es/template/mobile-login/welcome/index.native.js +5 -1
- package/es/template/mobile-login/welcome/index.native.js.map +1 -1
- package/es/variables/colors.d.ts +7 -7
- package/es/variables/colors.d.ts.map +1 -1
- package/es/variables/colors.js +2 -1
- package/es/variables/colors.js.map +1 -1
- package/es/variables/theme.native.d.ts.map +1 -1
- package/es/variables/theme.native.js +4 -1
- package/es/variables/theme.native.js.map +1 -1
- package/lib/atom/button-link/index.d.ts.map +1 -1
- package/lib/atom/button-link/index.js +18 -9
- package/lib/atom/button-link/index.js.map +1 -1
- package/lib/atom/button-link/types.d.ts +8 -1
- package/lib/atom/button-link/types.d.ts.map +1 -1
- package/lib/atom/button-link/types.js.map +1 -1
- package/lib/atom/chip/index.d.ts +37 -0
- package/lib/atom/chip/index.d.ts.map +1 -0
- package/lib/atom/chip/index.js +109 -0
- package/lib/atom/chip/index.js.map +1 -0
- package/lib/atom/chip/style.css +65 -0
- package/lib/atom/chips/index.d.ts.map +1 -1
- package/lib/atom/chips/index.js +1 -0
- package/lib/atom/chips/index.js.map +1 -1
- package/lib/atom/icon/index.js +2 -2
- package/lib/atom/icon/index.js.map +1 -1
- package/lib/molecule/bulk-progress-bar/index.d.ts.map +1 -1
- package/lib/molecule/bulk-progress-bar/index.js +7 -3
- package/lib/molecule/bulk-progress-bar/index.js.map +1 -1
- package/lib/molecule/learner-skill-card/index.d.ts +21 -0
- package/lib/molecule/learner-skill-card/index.d.ts.map +1 -0
- package/lib/molecule/learner-skill-card/index.js +177 -0
- package/lib/molecule/learner-skill-card/index.js.map +1 -0
- package/lib/molecule/learner-skill-card/style.css +119 -0
- package/lib/molecule/questions/template/index.d.ts +1 -1
- package/lib/molecule/quick-access-card/index.d.ts.map +1 -1
- package/lib/molecule/quick-access-card/index.js +7 -1
- package/lib/molecule/quick-access-card/index.js.map +1 -1
- package/lib/template/mobile-login/welcome/index.native.d.ts.map +1 -1
- package/lib/template/mobile-login/welcome/index.native.js +7 -1
- package/lib/template/mobile-login/welcome/index.native.js.map +1 -1
- package/lib/variables/colors.d.ts +7 -7
- package/lib/variables/colors.d.ts.map +1 -1
- package/lib/variables/colors.js +2 -1
- package/lib/variables/colors.js.map +1 -1
- package/lib/variables/theme.native.d.ts.map +1 -1
- package/lib/variables/theme.native.js +4 -1
- package/lib/variables/theme.native.js.map +1 -1
- package/locales/bs/global.json +7 -1
- package/locales/cs/global.json +7 -1
- package/locales/de/global.json +7 -1
- package/locales/en/global.json +6 -0
- package/locales/es/global.json +6 -0
- package/locales/et/global.json +7 -1
- package/locales/fi/global.json +7 -1
- package/locales/fr/global.json +6 -0
- package/locales/hr/global.json +7 -1
- package/locales/hu/global.json +7 -1
- package/locales/hy/global.json +7 -1
- package/locales/it/global.json +6 -0
- package/locales/ja/global.json +7 -1
- package/locales/ko/global.json +7 -1
- package/locales/nl/global.json +6 -0
- package/locales/pl/global.json +7 -1
- package/locales/pt/global.json +7 -1
- package/locales/ro/global.json +7 -1
- package/locales/ru/global.json +7 -1
- package/locales/sk/global.json +7 -1
- package/locales/sl/global.json +7 -1
- package/locales/sv/global.json +7 -1
- package/locales/tl/global.json +7 -1
- package/locales/tr/global.json +7 -1
- package/locales/uk/global.json +7 -1
- package/locales/vi/global.json +7 -1
- package/locales/zh/global.json +7 -1
- package/locales/zh_TW/global.json +7 -1
- 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:
|
|
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":";
|
|
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
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
})
|
|
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' ?
|
|
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
|
|
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
|
|
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;
|
|
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
|
|
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":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/chips/index.js"],"names":[],"mappings":";AAWA,gDAuBC"}
|
package/lib/atom/chips/index.js
CHANGED
|
@@ -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":["
|
|
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"}
|
package/lib/atom/icon/index.js
CHANGED
|
@@ -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
|
-
|
|
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
|
|
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":";
|
|
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
|
|
19
|
-
|
|
20
|
-
|
|
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
|
|
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"}
|