@coorpacademy/components 10.1.13 → 10.1.14
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/molecule/banner/index.js +16 -7
- package/es/molecule/banner/index.js.map +1 -1
- package/es/molecule/banner/style.css +47 -0
- package/es/molecule/banner/test/fixtures/default.js +1 -1
- package/es/molecule/banner/test/fixtures/default.js.map +1 -1
- package/es/molecule/banner/test/fixtures/error-temporary-banner.js +8 -0
- package/es/molecule/banner/test/fixtures/error-temporary-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures/success-banner.js +7 -0
- package/es/molecule/banner/test/fixtures/success-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures/success-temporary-banner.js +8 -0
- package/es/molecule/banner/test/fixtures/success-temporary-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures/warning-temporary-banner.js +8 -0
- package/es/molecule/banner/test/fixtures/warning-temporary-banner.js.map +1 -0
- package/es/molecule/banner/test/fixtures.js +8 -0
- package/es/molecule/banner/test/fixtures.js.map +1 -1
- package/es/molecule/select-multiple/test/fixtures.js +4 -0
- package/es/molecule/select-multiple/test/fixtures.js.map +1 -1
- package/es/organism/list-item/index.js +3 -3
- package/es/organism/list-item/index.js.map +1 -1
- package/es/organism/list-item/style.css +14 -10
- package/lib/molecule/banner/index.js +17 -6
- package/lib/molecule/banner/index.js.map +1 -1
- package/lib/molecule/banner/style.css +47 -0
- package/lib/molecule/banner/test/fixtures/default.js +1 -1
- package/lib/molecule/banner/test/fixtures/default.js.map +1 -1
- package/lib/molecule/banner/test/fixtures/error-temporary-banner.js +13 -0
- package/lib/molecule/banner/test/fixtures/error-temporary-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures/success-banner.js +12 -0
- package/lib/molecule/banner/test/fixtures/success-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures/success-temporary-banner.js +13 -0
- package/lib/molecule/banner/test/fixtures/success-temporary-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures/warning-temporary-banner.js +13 -0
- package/lib/molecule/banner/test/fixtures/warning-temporary-banner.js.map +1 -0
- package/lib/molecule/banner/test/fixtures.js +12 -0
- package/lib/molecule/banner/test/fixtures.js.map +1 -1
- package/lib/molecule/select-multiple/test/fixtures.js +6 -0
- package/lib/molecule/select-multiple/test/fixtures.js.map +1 -1
- package/lib/organism/list-item/index.js +3 -3
- package/lib/organism/list-item/index.js.map +1 -1
- package/lib/organism/list-item/style.css +14 -10
- package/package.json +2 -2
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import _keys from "lodash/fp/keys";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
4
|
import classnames from 'classnames';
|
|
4
|
-
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon } from '@coorpacademy/nova-icons';
|
|
5
|
+
import { NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon, NovaCompositionCoorpacademyValidate as ValidateIcon } from '@coorpacademy/nova-icons';
|
|
5
6
|
import Link from '../../atom/button-link';
|
|
6
7
|
import style from './style.css';
|
|
8
|
+
const ICONS = {
|
|
9
|
+
success: ValidateIcon,
|
|
10
|
+
error: QuestionIcon,
|
|
11
|
+
warning: QuestionIcon
|
|
12
|
+
};
|
|
7
13
|
|
|
8
14
|
const Banner = props => {
|
|
9
15
|
const {
|
|
@@ -12,16 +18,18 @@ const Banner = props => {
|
|
|
12
18
|
firstCTA,
|
|
13
19
|
firstCTALabel,
|
|
14
20
|
secondCTALabel,
|
|
15
|
-
secondCTA
|
|
21
|
+
secondCTA,
|
|
22
|
+
temporary
|
|
16
23
|
} = props;
|
|
24
|
+
const Icon = ICONS[type];
|
|
17
25
|
return /*#__PURE__*/React.createElement("div", {
|
|
18
|
-
className: classnames(style.banner, type === 'error' && style.errorBanner),
|
|
26
|
+
className: classnames(style.banner, type === 'error' && style.errorBanner, type === 'success' && style.successBanner, temporary && style.temporaryBanner),
|
|
19
27
|
title: message
|
|
20
28
|
}, /*#__PURE__*/React.createElement("div", {
|
|
21
29
|
"data-name": `${type}-banner-message`,
|
|
22
30
|
className: style.message
|
|
23
|
-
}, /*#__PURE__*/React.createElement(
|
|
24
|
-
className: style.icon
|
|
31
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
32
|
+
className: classnames(style.icon, temporary && style.temporaryIcon)
|
|
25
33
|
}), message), firstCTALabel ? /*#__PURE__*/React.createElement("div", {
|
|
26
34
|
className: style.button
|
|
27
35
|
}, /*#__PURE__*/React.createElement(Link, {
|
|
@@ -44,12 +52,13 @@ const Banner = props => {
|
|
|
44
52
|
};
|
|
45
53
|
|
|
46
54
|
Banner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
47
|
-
type: PropTypes.oneOf(
|
|
55
|
+
type: PropTypes.oneOf(_keys(ICONS)),
|
|
48
56
|
message: PropTypes.string.isRequired,
|
|
49
57
|
firstCTA: PropTypes.func,
|
|
50
58
|
firstCTALabel: PropTypes.string,
|
|
51
59
|
secondCTALabel: PropTypes.string,
|
|
52
|
-
secondCTA: PropTypes.func
|
|
60
|
+
secondCTA: PropTypes.func,
|
|
61
|
+
temporary: PropTypes.bool
|
|
53
62
|
} : {};
|
|
54
63
|
export default Banner;
|
|
55
64
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","Link","style","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","banner","errorBanner","icon","button","buttonsBar","propTypes","oneOf","string","isRequired","func"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["React","PropTypes","classnames","NovaSolidInterfaceFeedbackInterfaceAlertDiamond","QuestionIcon","NovaCompositionCoorpacademyValidate","ValidateIcon","Link","style","ICONS","success","error","warning","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","temporary","Icon","banner","errorBanner","successBanner","temporaryBanner","icon","temporaryIcon","button","buttonsBar","propTypes","oneOf","string","isRequired","func","bool"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,+CAA+C,IAAIC,YADrD,EAEEC,mCAAmC,IAAIC,YAFzC,QAGO,0BAHP;AAIA,OAAOC,IAAP,MAAiB,wBAAjB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,KAAK,GAAG;AACZC,EAAAA,OAAO,EAAEJ,YADG;AAEZK,EAAAA,KAAK,EAAEP,YAFK;AAGZQ,EAAAA,OAAO,EAAER;AAHG,CAAd;;AAMA,MAAMS,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA,SAAzD;AAAoEC,IAAAA;AAApE,MAAiFP,KAAvF;AACA,QAAMQ,IAAI,GAAGb,KAAK,CAACM,IAAD,CAAlB;AACA,sBACE;AACE,IAAA,SAAS,EAAEb,UAAU,CACnBM,KAAK,CAACe,MADa,EAEnBR,IAAI,KAAK,OAAT,IAAoBP,KAAK,CAACgB,WAFP,EAGnBT,IAAI,KAAK,SAAT,IAAsBP,KAAK,CAACiB,aAHT,EAInBJ,SAAS,IAAIb,KAAK,CAACkB,eAJA,CADvB;AAOE,IAAA,KAAK,EAAEV;AAPT,kBASE;AAAK,iBAAY,GAAED,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEP,KAAK,CAACQ;AAA3D,kBACE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAEd,UAAU,CAACM,KAAK,CAACmB,IAAP,EAAaN,SAAS,IAAIb,KAAK,CAACoB,aAAhC;AAA3B,IADF,EAEGZ,OAFH,CATF,EAaGE,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACqB;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,kBADZ;AAEE,kBAAYX,aAFd;AAGE,IAAA,KAAK,EAAEA,aAHT;AAIE,IAAA,OAAO,EAAED,QAJX;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADY,GAUV,IAvBN,EAwBGC,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEX,KAAK,CAACsB;AAAtB,IAAlC,GAAyE,IAxB5E,EAyBGX,cAAc,gBACb;AAAK,IAAA,SAAS,EAAEX,KAAK,CAACqB;AAAtB,kBACE,oBAAC,IAAD;AACE,iBAAU,mBADZ;AAEE,IAAA,OAAO,EAAET,SAFX;AAGE,kBAAYD,cAHd;AAIE,IAAA,KAAK,EAAEA,cAJT;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADa,GAUX,IAnCN,CADF;AAuCD,CA1CD;;AA4CAN,MAAM,CAACkB,SAAP,2CAAmB;AACjBhB,EAAAA,IAAI,EAAEd,SAAS,CAAC+B,KAAV,CAAgB,MAAKvB,KAAL,CAAhB,CADW;AAEjBO,EAAAA,OAAO,EAAEf,SAAS,CAACgC,MAAV,CAAiBC,UAFT;AAGjBjB,EAAAA,QAAQ,EAAEhB,SAAS,CAACkC,IAHH;AAIjBjB,EAAAA,aAAa,EAAEjB,SAAS,CAACgC,MAJR;AAKjBd,EAAAA,cAAc,EAAElB,SAAS,CAACgC,MALT;AAMjBb,EAAAA,SAAS,EAAEnB,SAAS,CAACkC,IANJ;AAOjBd,EAAAA,SAAS,EAAEpB,SAAS,CAACmC;AAPJ,CAAnB;AAUA,eAAevB,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon,\n NovaCompositionCoorpacademyValidate as ValidateIcon\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/button-link';\nimport style from './style.css';\n\nconst ICONS = {\n success: ValidateIcon,\n error: QuestionIcon,\n warning: QuestionIcon\n};\n\nconst Banner = props => {\n const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA, temporary} = props;\n const Icon = ICONS[type];\n return (\n <div\n className={classnames(\n style.banner,\n type === 'error' && style.errorBanner,\n type === 'success' && style.successBanner,\n temporary && style.temporaryBanner\n )}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <Icon className={classnames(style.icon, temporary && style.temporaryIcon)} />\n {message}\n </div>\n {firstCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"first-banner-cta\"\n aria-label={firstCTALabel}\n label={firstCTALabel}\n onClick={firstCTA}\n type=\"text\"\n />\n </div>\n ) : null}\n {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n {secondCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"second-banner-cta\"\n onClick={secondCTA}\n aria-label={secondCTALabel}\n label={secondCTALabel}\n type=\"text\"\n />\n </div>\n ) : null}\n </div>\n );\n};\n\nBanner.propTypes = {\n type: PropTypes.oneOf(keys(ICONS)),\n message: PropTypes.string.isRequired,\n firstCTA: PropTypes.func,\n firstCTALabel: PropTypes.string,\n secondCTALabel: PropTypes.string,\n secondCTA: PropTypes.func,\n temporary: PropTypes.bool\n};\n\nexport default Banner;\n"],"file":"index.js"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@value colors: "../../variables/colors.css";
|
|
4
4
|
@value white from colors;
|
|
5
5
|
@value medium from colors;
|
|
6
|
+
@value cm_positive_100 from colors;
|
|
6
7
|
@value cm_negative_50 from colors;
|
|
7
8
|
@value cm_negative_200 from colors;
|
|
8
9
|
@value cm_warning_50 from colors;
|
|
@@ -10,6 +11,23 @@
|
|
|
10
11
|
@value cm_yellow_200 from colors;
|
|
11
12
|
@value cm_yellow_400 from colors;
|
|
12
13
|
|
|
14
|
+
@keyframes fadeIn {
|
|
15
|
+
0% {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
margin-top: -50px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
16% {
|
|
21
|
+
margin-top: 70px;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
100% {
|
|
26
|
+
margin-top: 70px;
|
|
27
|
+
opacity: 1;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
13
31
|
.banner {
|
|
14
32
|
display: flex;
|
|
15
33
|
flex-direction: row;
|
|
@@ -27,6 +45,29 @@
|
|
|
27
45
|
background-color: cm_negative_50;
|
|
28
46
|
color: cm_negative_200;
|
|
29
47
|
}
|
|
48
|
+
.successBanner {
|
|
49
|
+
background-color: color(cm_positive_100 a(15%));
|
|
50
|
+
color: cm_positive_100;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.temporaryBanner {
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
padding: 16px 24px;
|
|
57
|
+
border-radius: 5px;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
animation: fadeIn 1800ms;
|
|
60
|
+
animation-direction: alternate;
|
|
61
|
+
animation-iteration-count: 2;
|
|
62
|
+
animation-fill-mode: both;
|
|
63
|
+
animation-timing-function: ease-in;
|
|
64
|
+
z-index: 10000;
|
|
65
|
+
position: fixed;
|
|
66
|
+
top: 0;
|
|
67
|
+
left: 50%;
|
|
68
|
+
transform: translateX(-50%);
|
|
69
|
+
|
|
70
|
+
}
|
|
30
71
|
|
|
31
72
|
.button{
|
|
32
73
|
background-color: transparent;
|
|
@@ -50,6 +91,12 @@
|
|
|
50
91
|
margin-right: 16px;
|
|
51
92
|
}
|
|
52
93
|
|
|
94
|
+
.temporaryIcon {
|
|
95
|
+
width: 16px;
|
|
96
|
+
height: 16px;
|
|
97
|
+
margin-right: 8px;
|
|
98
|
+
}
|
|
99
|
+
|
|
53
100
|
.message {
|
|
54
101
|
font-family: 'Gilroy';
|
|
55
102
|
font-size: 14px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,mFAFJ;AAGLC,IAAAA,aAAa,EAAE,MAHV;AAILC,IAAAA,QAAQ,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,WAAZ,CAJX;AAKLC,IAAAA,cAAc,EAAE,QALX;AAMLC,IAAAA,SAAS,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,YAAZ;AANZ;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'warning',\n message: 'Changes saved but not published. Do you want to update this custom playlist now? ',\n firstCTALabel: 'Undo',\n firstCTA: () => console.log('first cta'),\n secondCTALabel: 'Update',\n secondCTA: () => console.log('second cta')\n }\n};\n"],"file":"default.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/error-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,OAAO,EAAE,6EAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'error',\n message: 'There was an error while publishing the custom playlist. Please Try again. ',\n temporary: true\n }\n};\n"],"file":"error-temporary-banner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/success-banner.js"],"names":["props","type","message"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE;AAFJ;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'success',\n message: 'Custom playlist successfully published '\n }\n};\n"],"file":"success-banner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/success-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,yCAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'success',\n message: 'Custom playlist successfully published ',\n temporary: true\n }\n};\n"],"file":"success-temporary-banner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/warning-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,yCAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,CAAf","sourcesContent":["export default {\n props: {\n type: 'warning',\n message: 'Custom playlist successfully published ',\n temporary: true\n }\n};\n"],"file":"warning-temporary-banner.js"}
|
|
@@ -4,6 +4,10 @@ import renderComponentMacro from '../../../test/helpers/render-component';
|
|
|
4
4
|
import MoleculeBanner from '..';
|
|
5
5
|
import fixtureDefault from './fixtures/default';
|
|
6
6
|
import fixtureErrorBanner from './fixtures/error-banner';
|
|
7
|
+
import fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';
|
|
8
|
+
import fixtureSuccessBanner from './fixtures/success-banner';
|
|
9
|
+
import fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';
|
|
10
|
+
import fixtureWarningTemporaryBanner from './fixtures/warning-temporary-banner';
|
|
7
11
|
test('Molecule › MoleculeBanner > should have valid propTypes', t => {
|
|
8
12
|
t.pass();
|
|
9
13
|
forEach(MoleculeBanner.propTypes, (value, key) => {
|
|
@@ -12,4 +16,8 @@ test('Molecule › MoleculeBanner > should have valid propTypes', t => {
|
|
|
12
16
|
});
|
|
13
17
|
test('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);
|
|
14
18
|
test('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);
|
|
19
|
+
test('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);
|
|
20
|
+
test('Molecule › MoleculeBanner › SuccessBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessBanner);
|
|
21
|
+
test('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);
|
|
22
|
+
test('Molecule › MoleculeBanner › WarningTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureWarningTemporaryBanner);
|
|
15
23
|
//# sourceMappingURL=fixtures.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","fixtureErrorTemporaryBanner","fixtureSuccessBanner","fixtureSuccessTemporaryBanner","fixtureWarningTemporaryBanner","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,6BAAP,MAA0C,qCAA1C;AACA,OAAOC,6BAAP,MAA0C,qCAA1C;AAEAT,IAAI,CAAC,yDAAD,EAA4DU,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAV,EAAAA,OAAO,CAACE,cAAc,CAACS,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAd,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,cAAvF,EAAuGE,kBAAvG,CAAJ;AACAL,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,cAAhG,EAAgHG,2BAAhH,CAAJ;AACAN,IAAI,CAAC,gEAAD,EAAmEE,oBAAnE,EAAyFC,cAAzF,EAAyGI,oBAAzG,CAAJ;AACAP,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,cAAlG,EAAkHK,6BAAlH,CAAJ;AACAR,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,cAAlG,EAAkHM,6BAAlH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\nimport fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';\nimport fixtureSuccessBanner from './fixtures/success-banner';\nimport fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';\nimport fixtureWarningTemporaryBanner from './fixtures/warning-temporary-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\ntest('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);\ntest('Molecule › MoleculeBanner › SuccessBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessBanner);\ntest('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);\ntest('Molecule › MoleculeBanner › WarningTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureWarningTemporaryBanner);\n"],"file":"fixtures.js"}
|
|
@@ -2,6 +2,8 @@ import test from 'ava';
|
|
|
2
2
|
import forEach from 'lodash/forEach';
|
|
3
3
|
import renderComponentMacro from '../../../test/helpers/render-component';
|
|
4
4
|
import MoleculeSelectMultiple from '..';
|
|
5
|
+
import fixtureCheckedCmThemeMultiple from './fixtures/checked-cm-theme-multiple';
|
|
6
|
+
import fixtureCheckedCmTheme from './fixtures/checked-cm-theme';
|
|
5
7
|
import fixtureCheckedCockpitTheme from './fixtures/checked-cockpit-theme';
|
|
6
8
|
import fixtureCheckedSetupTheme from './fixtures/checked-setup-theme';
|
|
7
9
|
import fixtureChecked from './fixtures/checked';
|
|
@@ -14,6 +16,8 @@ test('Molecule › MoleculeSelectMultiple > should have valid propTypes', t => {
|
|
|
14
16
|
t.not(value, undefined, `PropType for "Molecule.MoleculeSelectMultiple.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
15
17
|
});
|
|
16
18
|
});
|
|
19
|
+
test('Molecule › MoleculeSelectMultiple › CheckedCmThemeMultiple › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCmThemeMultiple);
|
|
20
|
+
test('Molecule › MoleculeSelectMultiple › CheckedCmTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCmTheme);
|
|
17
21
|
test('Molecule › MoleculeSelectMultiple › CheckedCockpitTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCockpitTheme);
|
|
18
22
|
test('Molecule › MoleculeSelectMultiple › CheckedSetupTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedSetupTheme);
|
|
19
23
|
test('Molecule › MoleculeSelectMultiple › Checked › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureChecked);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/select-multiple/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeSelectMultiple","fixtureCheckedCockpitTheme","fixtureCheckedSetupTheme","fixtureChecked","fixtureDefault","fixtureSetupThemeError","fixtureSetupTheme","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,sBAAP,MAAmC,IAAnC;AACA,OAAOC,0BAAP,MAAuC,kCAAvC;AACA,OAAOC,wBAAP,MAAqC,gCAArC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,sBAAP,MAAmC,8BAAnC;AACA,OAAOC,iBAAP,MAA8B,wBAA9B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/select-multiple/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeSelectMultiple","fixtureCheckedCmThemeMultiple","fixtureCheckedCmTheme","fixtureCheckedCockpitTheme","fixtureCheckedSetupTheme","fixtureChecked","fixtureDefault","fixtureSetupThemeError","fixtureSetupTheme","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,sBAAP,MAAmC,IAAnC;AACA,OAAOC,6BAAP,MAA0C,sCAA1C;AACA,OAAOC,qBAAP,MAAkC,6BAAlC;AACA,OAAOC,0BAAP,MAAuC,kCAAvC;AACA,OAAOC,wBAAP,MAAqC,gCAArC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,sBAAP,MAAmC,8BAAnC;AACA,OAAOC,iBAAP,MAA8B,wBAA9B;AAEAX,IAAI,CAAC,iEAAD,EAAoEY,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACAZ,EAAAA,OAAO,CAACE,sBAAsB,CAACW,SAAxB,EAAmC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAhB,IAAI,CAAC,iFAAD,EAAoFE,oBAApF,EAA0GC,sBAA1G,EAAkIC,6BAAlI,CAAJ;AACAJ,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,sBAAlG,EAA0HE,qBAA1H,CAAJ;AACAL,IAAI,CAAC,8EAAD,EAAiFE,oBAAjF,EAAuGC,sBAAvG,EAA+HG,0BAA/H,CAAJ;AACAN,IAAI,CAAC,4EAAD,EAA+EE,oBAA/E,EAAqGC,sBAArG,EAA6HI,wBAA7H,CAAJ;AACAP,IAAI,CAAC,kEAAD,EAAqEE,oBAArE,EAA2FC,sBAA3F,EAAmHK,cAAnH,CAAJ;AACAR,IAAI,CAAC,kEAAD,EAAqEE,oBAArE,EAA2FC,sBAA3F,EAAmHM,cAAnH,CAAJ;AACAT,IAAI,CAAC,0EAAD,EAA6EE,oBAA7E,EAAmGC,sBAAnG,EAA2HO,sBAA3H,CAAJ;AACAV,IAAI,CAAC,qEAAD,EAAwEE,oBAAxE,EAA8FC,sBAA9F,EAAsHQ,iBAAtH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSelectMultiple from '..';\nimport fixtureCheckedCmThemeMultiple from './fixtures/checked-cm-theme-multiple';\nimport fixtureCheckedCmTheme from './fixtures/checked-cm-theme';\nimport fixtureCheckedCockpitTheme from './fixtures/checked-cockpit-theme';\nimport fixtureCheckedSetupTheme from './fixtures/checked-setup-theme';\nimport fixtureChecked from './fixtures/checked';\nimport fixtureDefault from './fixtures/default';\nimport fixtureSetupThemeError from './fixtures/setup-theme-error';\nimport fixtureSetupTheme from './fixtures/setup-theme';\n\ntest('Molecule › MoleculeSelectMultiple > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeSelectMultiple.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeSelectMultiple.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeSelectMultiple › CheckedCmThemeMultiple › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCmThemeMultiple);\ntest('Molecule › MoleculeSelectMultiple › CheckedCmTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCmTheme);\ntest('Molecule › MoleculeSelectMultiple › CheckedCockpitTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCockpitTheme);\ntest('Molecule › MoleculeSelectMultiple › CheckedSetupTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedSetupTheme);\ntest('Molecule › MoleculeSelectMultiple › Checked › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureChecked);\ntest('Molecule › MoleculeSelectMultiple › Default › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureDefault);\ntest('Molecule › MoleculeSelectMultiple › SetupThemeError › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureSetupThemeError);\ntest('Molecule › MoleculeSelectMultiple › SetupTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureSetupTheme);\n"],"file":"fixtures.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/organism/list-item/index.js"],"names":["React","PropTypes","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","props","
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/list-item/index.js"],"names":["React","PropTypes","Tag","ButtonLink","BulletPointMenuButton","style","ListItem","props","bulletPointMenuButton","buttonLink","tags","title","tagsView","convert","cap","tag","index","wrapper","settings","edit","propTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","type","onClick","func","ariaLabel","dataName","icon","position","oneOf","isRequired"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,GAAP,MAAgB,gBAAhB;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,qBAAP,MAAkC,yCAAlC;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,qBAAD;AAAwBC,IAAAA,UAAxB;AAAoCC,IAAAA,IAApC;AAA0CC,IAAAA;AAA1C,MAAmDJ,KAAzD;;AACA,QAAMK,QAAQ,GAAG,KAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;AACzD,wBACE;AAAK,MAAA,GAAG,EAAEA,KAAV;AAAiB,MAAA,SAAS,EAAEX,KAAK,CAACU;AAAlC,oBACE,oBAAC,GAAD,EAASA,GAAT,CADF,CADF;AAKD,GANgB,EAMdL,IANc,CAAjB;;AAOA,sBACE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACY;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEZ,KAAK,CAACM,KAAtB;AAA6B,IAAA,KAAK,EAAEA;AAApC,KACGA,KADH,CADF,eAIE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACa;AAAtB,KACGN,QADH,eAEE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACc;AAAtB,kBACE,oBAAC,UAAD,EAAgBV,UAAhB,CADF,CAFF,eAKE,oBAAC,qBAAD,EAA2BD,qBAA3B,CALF,CAJF,CADF;AAcD,CAvBD;;AAyBAF,QAAQ,CAACc,SAAT,2CAAqB;AACnBZ,EAAAA,qBAAqB,EAAEP,SAAS,CAACoB,KAAV,CAAgB;AACrCC,IAAAA,eAAe,EAAErB,SAAS,CAACsB,MADU;AAErCC,IAAAA,aAAa,EAAEvB,SAAS,CAACsB,MAFY;AAGrCE,IAAAA,OAAO,EAAExB,SAAS,CAACyB,OAAV,CACPzB,SAAS,CAACoB,KAAV,CAAgB;AACd,mBAAapB,SAAS,CAACsB,MADT;AAEdI,MAAAA,KAAK,EAAE1B,SAAS,CAACsB,MAFH;AAGdK,MAAAA,IAAI,EAAE3B,SAAS,CAACsB,MAHF;AAIdM,MAAAA,OAAO,EAAE5B,SAAS,CAAC6B;AAJL,KAAhB,CADO,CAH4B;AAWrCD,IAAAA,OAAO,EAAE5B,SAAS,CAAC6B;AAXkB,GAAhB,CADJ;AAcnBrB,EAAAA,UAAU,EAAER,SAAS,CAACoB,KAAV,CAAgB;AAC1BO,IAAAA,IAAI,EAAE3B,SAAS,CAACsB,MADU;AAE1BI,IAAAA,KAAK,EAAE1B,SAAS,CAACsB,MAFS;AAG1BQ,IAAAA,SAAS,EAAE9B,SAAS,CAACsB,MAHK;AAI1BS,IAAAA,QAAQ,EAAE/B,SAAS,CAACsB,MAJM;AAK1BU,IAAAA,IAAI,EAAEhC,SAAS,CAACoB,KAAV,CAAgB;AACpBa,MAAAA,QAAQ,EAAEjC,SAAS,CAACsB,MADA;AAEpBK,MAAAA,IAAI,EAAE3B,SAAS,CAACsB;AAFI,KAAhB,CALoB;AAS1BM,IAAAA,OAAO,EAAE5B,SAAS,CAAC6B;AATO,GAAhB,CAdO;AAyBnBpB,EAAAA,IAAI,EAAET,SAAS,CAACyB,OAAV,CACJzB,SAAS,CAACoB,KAAV,CAAgB;AACdM,IAAAA,KAAK,EAAE1B,SAAS,CAACsB,MADH;AAEdK,IAAAA,IAAI,EAAE3B,SAAS,CAACkC,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;AAFQ,GAAhB,CADI,CAzBa;AA+BnBxB,EAAAA,KAAK,EAAEV,SAAS,CAACsB,MAAV,CAAiBa;AA/BL,CAArB;AAkCA,eAAe9B,QAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n const {bulletPointMenuButton, buttonLink, tags, title} = props;\n const tagsView = map.convert({cap: false})((tag, index) => {\n return (\n <div key={index} className={style.tag}>\n <Tag {...tag} />\n </div>\n );\n })(tags);\n return (\n <div className={style.wrapper}>\n <div className={style.title} title={title}>\n {title}\n </div>\n <div className={style.settings}>\n {tagsView}\n <div className={style.edit}>\n <ButtonLink {...buttonLink} />\n </div>\n <BulletPointMenuButton {...bulletPointMenuButton} />\n </div>\n </div>\n );\n};\n\nListItem.propTypes = {\n bulletPointMenuButton: PropTypes.shape({\n buttonAriaLabel: PropTypes.string,\n menuAriaLabel: PropTypes.string,\n buttons: PropTypes.arrayOf(\n PropTypes.shape({\n 'data-name': PropTypes.string,\n label: PropTypes.string,\n type: PropTypes.string,\n onClick: PropTypes.func\n })\n ),\n onClick: PropTypes.func\n }),\n buttonLink: PropTypes.shape({\n type: PropTypes.string,\n label: PropTypes.string,\n ariaLabel: PropTypes.string,\n dataName: PropTypes.string,\n icon: PropTypes.shape({\n position: PropTypes.string,\n type: PropTypes.string\n }),\n onClick: PropTypes.func\n }),\n tags: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n })\n ),\n title: PropTypes.string.isRequired\n};\n\nexport default ListItem;\n"],"file":"index.js"}
|
|
@@ -6,41 +6,45 @@
|
|
|
6
6
|
@value primaryAdd1 from colors;
|
|
7
7
|
|
|
8
8
|
.wrapper {
|
|
9
|
-
|
|
10
|
-
border-radius: 7px;
|
|
9
|
+
align-items: center;
|
|
11
10
|
background-color: color(xtraLightGrey a(90%));
|
|
12
|
-
|
|
11
|
+
border-radius: 7px;
|
|
12
|
+
box-sizing: border-box;
|
|
13
13
|
display: flex;
|
|
14
|
-
|
|
14
|
+
height: 60px;
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
padding: 0 24px;
|
|
17
|
-
|
|
17
|
+
width: 100%;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.title {
|
|
21
|
+
color: cm_grey_900;
|
|
21
22
|
flex-grow: 0;
|
|
22
23
|
font-family: Gilroy;
|
|
23
24
|
font-size: 16px;
|
|
24
|
-
font-weight: bold;
|
|
25
25
|
font-stretch: normal;
|
|
26
26
|
font-style: normal;
|
|
27
|
+
font-weight: bold;
|
|
27
28
|
line-height: 1.38;
|
|
28
29
|
letter-spacing: normal;
|
|
29
|
-
|
|
30
|
-
color: cm_grey_900;
|
|
30
|
+
margin-right: 24px;
|
|
31
31
|
overflow: hidden;
|
|
32
|
+
text-align: left;
|
|
32
33
|
text-overflow: ellipsis;
|
|
33
34
|
white-space: nowrap;
|
|
35
|
+
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
.settings {
|
|
37
|
-
display: flex;
|
|
38
|
-
height: 100%;
|
|
39
39
|
align-items: center;
|
|
40
|
+
display: flex;
|
|
41
|
+
height: 100%;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
.tag {
|
|
43
45
|
margin: 0 16px 0 0;
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
white-space: nowrap;
|
|
44
48
|
}
|
|
45
49
|
|
|
46
50
|
.edit {
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
|
|
6
|
+
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
|
|
7
|
+
|
|
6
8
|
var _react = _interopRequireDefault(require("react"));
|
|
7
9
|
|
|
8
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
@@ -17,6 +19,12 @@ var _style = _interopRequireDefault(require("./style.css"));
|
|
|
17
19
|
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
|
|
22
|
+
const ICONS = {
|
|
23
|
+
success: _novaIcons.NovaCompositionCoorpacademyValidate,
|
|
24
|
+
error: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond,
|
|
25
|
+
warning: _novaIcons.NovaSolidInterfaceFeedbackInterfaceAlertDiamond
|
|
26
|
+
};
|
|
27
|
+
|
|
20
28
|
const Banner = props => {
|
|
21
29
|
const {
|
|
22
30
|
type,
|
|
@@ -24,16 +32,18 @@ const Banner = props => {
|
|
|
24
32
|
firstCTA,
|
|
25
33
|
firstCTALabel,
|
|
26
34
|
secondCTALabel,
|
|
27
|
-
secondCTA
|
|
35
|
+
secondCTA,
|
|
36
|
+
temporary
|
|
28
37
|
} = props;
|
|
38
|
+
const Icon = ICONS[type];
|
|
29
39
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
30
|
-
className: (0, _classnames.default)(_style.default.banner, type === 'error' && _style.default.errorBanner),
|
|
40
|
+
className: (0, _classnames.default)(_style.default.banner, type === 'error' && _style.default.errorBanner, type === 'success' && _style.default.successBanner, temporary && _style.default.temporaryBanner),
|
|
31
41
|
title: message
|
|
32
42
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
33
43
|
"data-name": `${type}-banner-message`,
|
|
34
44
|
className: _style.default.message
|
|
35
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
36
|
-
className: _style.default.icon
|
|
45
|
+
}, /*#__PURE__*/_react.default.createElement(Icon, {
|
|
46
|
+
className: (0, _classnames.default)(_style.default.icon, temporary && _style.default.temporaryIcon)
|
|
37
47
|
}), message), firstCTALabel ? /*#__PURE__*/_react.default.createElement("div", {
|
|
38
48
|
className: _style.default.button
|
|
39
49
|
}, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
|
|
@@ -56,12 +66,13 @@ const Banner = props => {
|
|
|
56
66
|
};
|
|
57
67
|
|
|
58
68
|
Banner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
59
|
-
type: _propTypes.default.oneOf(
|
|
69
|
+
type: _propTypes.default.oneOf((0, _keys2.default)(ICONS)),
|
|
60
70
|
message: _propTypes.default.string.isRequired,
|
|
61
71
|
firstCTA: _propTypes.default.func,
|
|
62
72
|
firstCTALabel: _propTypes.default.string,
|
|
63
73
|
secondCTALabel: _propTypes.default.string,
|
|
64
|
-
secondCTA: _propTypes.default.func
|
|
74
|
+
secondCTA: _propTypes.default.func,
|
|
75
|
+
temporary: _propTypes.default.bool
|
|
65
76
|
} : {};
|
|
66
77
|
var _default = Banner;
|
|
67
78
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","style","banner","errorBanner","icon","button","buttonsBar","propTypes","PropTypes","oneOf","string","isRequired","func"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/banner/index.js"],"names":["ICONS","success","ValidateIcon","error","QuestionIcon","warning","Banner","props","type","message","firstCTA","firstCTALabel","secondCTALabel","secondCTA","temporary","Icon","style","banner","errorBanner","successBanner","temporaryBanner","icon","temporaryIcon","button","buttonsBar","propTypes","PropTypes","oneOf","string","isRequired","func","bool"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAIA;;AACA;;;;AAEA,MAAMA,KAAK,GAAG;AACZC,EAAAA,OAAO,EAAEC,8CADG;AAEZC,EAAAA,KAAK,EAAEC,0DAFK;AAGZC,EAAAA,OAAO,EAAED;AAHG,CAAd;;AAMA,MAAME,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,QAAhB;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA,cAAzC;AAAyDC,IAAAA,SAAzD;AAAoEC,IAAAA;AAApE,MAAiFP,KAAvF;AACA,QAAMQ,IAAI,GAAGf,KAAK,CAACQ,IAAD,CAAlB;AACA,sBACE;AACE,IAAA,SAAS,EAAE,yBACTQ,eAAMC,MADG,EAETT,IAAI,KAAK,OAAT,IAAoBQ,eAAME,WAFjB,EAGTV,IAAI,KAAK,SAAT,IAAsBQ,eAAMG,aAHnB,EAITL,SAAS,IAAIE,eAAMI,eAJV,CADb;AAOE,IAAA,KAAK,EAAEX;AAPT,kBASE;AAAK,iBAAY,GAAED,IAAK,iBAAxB;AAA0C,IAAA,SAAS,EAAEQ,eAAMP;AAA3D,kBACE,6BAAC,IAAD;AAAM,IAAA,SAAS,EAAE,yBAAWO,eAAMK,IAAjB,EAAuBP,SAAS,IAAIE,eAAMM,aAA1C;AAAjB,IADF,EAEGb,OAFH,CATF,EAaGE,aAAa,gBACZ;AAAK,IAAA,SAAS,EAAEK,eAAMO;AAAtB,kBACE,6BAAC,mBAAD;AACE,iBAAU,kBADZ;AAEE,kBAAYZ,aAFd;AAGE,IAAA,KAAK,EAAEA,aAHT;AAIE,IAAA,OAAO,EAAED,QAJX;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADY,GAUV,IAvBN,EAwBGC,aAAa,IAAIC,cAAjB,gBAAkC;AAAK,IAAA,SAAS,EAAEI,eAAMQ;AAAtB,IAAlC,GAAyE,IAxB5E,EAyBGZ,cAAc,gBACb;AAAK,IAAA,SAAS,EAAEI,eAAMO;AAAtB,kBACE,6BAAC,mBAAD;AACE,iBAAU,mBADZ;AAEE,IAAA,OAAO,EAAEV,SAFX;AAGE,kBAAYD,cAHd;AAIE,IAAA,KAAK,EAAEA,cAJT;AAKE,IAAA,IAAI,EAAC;AALP,IADF,CADa,GAUX,IAnCN,CADF;AAuCD,CA1CD;;AA4CAN,MAAM,CAACmB,SAAP,2CAAmB;AACjBjB,EAAAA,IAAI,EAAEkB,mBAAUC,KAAV,CAAgB,oBAAK3B,KAAL,CAAhB,CADW;AAEjBS,EAAAA,OAAO,EAAEiB,mBAAUE,MAAV,CAAiBC,UAFT;AAGjBnB,EAAAA,QAAQ,EAAEgB,mBAAUI,IAHH;AAIjBnB,EAAAA,aAAa,EAAEe,mBAAUE,MAJR;AAKjBhB,EAAAA,cAAc,EAAEc,mBAAUE,MALT;AAMjBf,EAAAA,SAAS,EAAEa,mBAAUI,IANJ;AAOjBhB,EAAAA,SAAS,EAAEY,mBAAUK;AAPJ,CAAnB;eAUezB,M","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys} from 'lodash/fp';\nimport {\n NovaSolidInterfaceFeedbackInterfaceAlertDiamond as QuestionIcon,\n NovaCompositionCoorpacademyValidate as ValidateIcon\n} from '@coorpacademy/nova-icons';\nimport Link from '../../atom/button-link';\nimport style from './style.css';\n\nconst ICONS = {\n success: ValidateIcon,\n error: QuestionIcon,\n warning: QuestionIcon\n};\n\nconst Banner = props => {\n const {type, message, firstCTA, firstCTALabel, secondCTALabel, secondCTA, temporary} = props;\n const Icon = ICONS[type];\n return (\n <div\n className={classnames(\n style.banner,\n type === 'error' && style.errorBanner,\n type === 'success' && style.successBanner,\n temporary && style.temporaryBanner\n )}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <Icon className={classnames(style.icon, temporary && style.temporaryIcon)} />\n {message}\n </div>\n {firstCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"first-banner-cta\"\n aria-label={firstCTALabel}\n label={firstCTALabel}\n onClick={firstCTA}\n type=\"text\"\n />\n </div>\n ) : null}\n {firstCTALabel && secondCTALabel ? <div className={style.buttonsBar} /> : null}\n {secondCTALabel ? (\n <div className={style.button}>\n <Link\n data-name=\"second-banner-cta\"\n onClick={secondCTA}\n aria-label={secondCTALabel}\n label={secondCTALabel}\n type=\"text\"\n />\n </div>\n ) : null}\n </div>\n );\n};\n\nBanner.propTypes = {\n type: PropTypes.oneOf(keys(ICONS)),\n message: PropTypes.string.isRequired,\n firstCTA: PropTypes.func,\n firstCTALabel: PropTypes.string,\n secondCTALabel: PropTypes.string,\n secondCTA: PropTypes.func,\n temporary: PropTypes.bool\n};\n\nexport default Banner;\n"],"file":"index.js"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@value colors: "../../variables/colors.css";
|
|
4
4
|
@value white from colors;
|
|
5
5
|
@value medium from colors;
|
|
6
|
+
@value cm_positive_100 from colors;
|
|
6
7
|
@value cm_negative_50 from colors;
|
|
7
8
|
@value cm_negative_200 from colors;
|
|
8
9
|
@value cm_warning_50 from colors;
|
|
@@ -10,6 +11,23 @@
|
|
|
10
11
|
@value cm_yellow_200 from colors;
|
|
11
12
|
@value cm_yellow_400 from colors;
|
|
12
13
|
|
|
14
|
+
@keyframes fadeIn {
|
|
15
|
+
0% {
|
|
16
|
+
opacity: 0;
|
|
17
|
+
margin-top: -50px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
16% {
|
|
21
|
+
margin-top: 70px;
|
|
22
|
+
opacity: 1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
100% {
|
|
26
|
+
margin-top: 70px;
|
|
27
|
+
opacity: 1;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
13
31
|
.banner {
|
|
14
32
|
display: flex;
|
|
15
33
|
flex-direction: row;
|
|
@@ -27,6 +45,29 @@
|
|
|
27
45
|
background-color: cm_negative_50;
|
|
28
46
|
color: cm_negative_200;
|
|
29
47
|
}
|
|
48
|
+
.successBanner {
|
|
49
|
+
background-color: color(cm_positive_100 a(15%));
|
|
50
|
+
color: cm_positive_100;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.temporaryBanner {
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
padding: 16px 24px;
|
|
57
|
+
border-radius: 5px;
|
|
58
|
+
border-radius: 5px;
|
|
59
|
+
animation: fadeIn 1800ms;
|
|
60
|
+
animation-direction: alternate;
|
|
61
|
+
animation-iteration-count: 2;
|
|
62
|
+
animation-fill-mode: both;
|
|
63
|
+
animation-timing-function: ease-in;
|
|
64
|
+
z-index: 10000;
|
|
65
|
+
position: fixed;
|
|
66
|
+
top: 0;
|
|
67
|
+
left: 50%;
|
|
68
|
+
transform: translateX(-50%);
|
|
69
|
+
|
|
70
|
+
}
|
|
30
71
|
|
|
31
72
|
.button{
|
|
32
73
|
background-color: transparent;
|
|
@@ -50,6 +91,12 @@
|
|
|
50
91
|
margin-right: 16px;
|
|
51
92
|
}
|
|
52
93
|
|
|
94
|
+
.temporaryIcon {
|
|
95
|
+
width: 16px;
|
|
96
|
+
height: 16px;
|
|
97
|
+
margin-right: 8px;
|
|
98
|
+
}
|
|
99
|
+
|
|
53
100
|
.message {
|
|
54
101
|
font-family: 'Gilroy';
|
|
55
102
|
font-size: 14px;
|
|
@@ -4,7 +4,7 @@ exports.__esModule = true;
|
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
var _default = {
|
|
6
6
|
props: {
|
|
7
|
-
type: '
|
|
7
|
+
type: 'warning',
|
|
8
8
|
message: 'Changes saved but not published. Do you want to update this custom playlist now? ',
|
|
9
9
|
firstCTALabel: 'Undo',
|
|
10
10
|
firstCTA: () => console.log('first cta'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/default.js"],"names":["props","type","message","firstCTALabel","firstCTA","console","log","secondCTALabel","secondCTA"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,mFAFJ;AAGLC,IAAAA,aAAa,EAAE,MAHV;AAILC,IAAAA,QAAQ,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,WAAZ,CAJX;AAKLC,IAAAA,cAAc,EAAE,QALX;AAMLC,IAAAA,SAAS,EAAE,MAAMH,OAAO,CAACC,GAAR,CAAY,YAAZ;AANZ;AADM,C","sourcesContent":["export default {\n props: {\n type: 'warning',\n message: 'Changes saved but not published. Do you want to update this custom playlist now? ',\n firstCTALabel: 'Undo',\n firstCTA: () => console.log('first cta'),\n secondCTALabel: 'Update',\n secondCTA: () => console.log('second cta')\n }\n};\n"],"file":"default.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
type: 'error',
|
|
8
|
+
message: 'There was an error while publishing the custom playlist. Please Try again. ',
|
|
9
|
+
temporary: true
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
exports.default = _default;
|
|
13
|
+
//# sourceMappingURL=error-temporary-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/error-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,OAAO,EAAE,6EAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,C","sourcesContent":["export default {\n props: {\n type: 'error',\n message: 'There was an error while publishing the custom playlist. Please Try again. ',\n temporary: true\n }\n};\n"],"file":"error-temporary-banner.js"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
type: 'success',
|
|
8
|
+
message: 'Custom playlist successfully published '
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
exports.default = _default;
|
|
12
|
+
//# sourceMappingURL=success-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/success-banner.js"],"names":["props","type","message"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE;AAFJ;AADM,C","sourcesContent":["export default {\n props: {\n type: 'success',\n message: 'Custom playlist successfully published '\n }\n};\n"],"file":"success-banner.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
type: 'success',
|
|
8
|
+
message: 'Custom playlist successfully published ',
|
|
9
|
+
temporary: true
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
exports.default = _default;
|
|
13
|
+
//# sourceMappingURL=success-temporary-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/success-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,yCAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,C","sourcesContent":["export default {\n props: {\n type: 'success',\n message: 'Custom playlist successfully published ',\n temporary: true\n }\n};\n"],"file":"success-temporary-banner.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
type: 'warning',
|
|
8
|
+
message: 'Custom playlist successfully published ',
|
|
9
|
+
temporary: true
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
exports.default = _default;
|
|
13
|
+
//# sourceMappingURL=warning-temporary-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/banner/test/fixtures/warning-temporary-banner.js"],"names":["props","type","message","temporary"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAELC,IAAAA,OAAO,EAAE,yCAFJ;AAGLC,IAAAA,SAAS,EAAE;AAHN;AADM,C","sourcesContent":["export default {\n props: {\n type: 'warning',\n message: 'Custom playlist successfully published ',\n temporary: true\n }\n};\n"],"file":"warning-temporary-banner.js"}
|
|
@@ -12,6 +12,14 @@ var _default = _interopRequireDefault(require("./fixtures/default"));
|
|
|
12
12
|
|
|
13
13
|
var _errorBanner = _interopRequireDefault(require("./fixtures/error-banner"));
|
|
14
14
|
|
|
15
|
+
var _errorTemporaryBanner = _interopRequireDefault(require("./fixtures/error-temporary-banner"));
|
|
16
|
+
|
|
17
|
+
var _successBanner = _interopRequireDefault(require("./fixtures/success-banner"));
|
|
18
|
+
|
|
19
|
+
var _successTemporaryBanner = _interopRequireDefault(require("./fixtures/success-temporary-banner"));
|
|
20
|
+
|
|
21
|
+
var _warningTemporaryBanner = _interopRequireDefault(require("./fixtures/warning-temporary-banner"));
|
|
22
|
+
|
|
15
23
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
24
|
|
|
17
25
|
(0, _ava.default)('Molecule › MoleculeBanner > should have valid propTypes', t => {
|
|
@@ -22,4 +30,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
22
30
|
});
|
|
23
31
|
(0, _ava.default)('Molecule › MoleculeBanner › Default › should be rendered', _renderComponent.default, _.default, _default.default);
|
|
24
32
|
(0, _ava.default)('Molecule › MoleculeBanner › ErrorBanner › should be rendered', _renderComponent.default, _.default, _errorBanner.default);
|
|
33
|
+
(0, _ava.default)('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', _renderComponent.default, _.default, _errorTemporaryBanner.default);
|
|
34
|
+
(0, _ava.default)('Molecule › MoleculeBanner › SuccessBanner › should be rendered', _renderComponent.default, _.default, _successBanner.default);
|
|
35
|
+
(0, _ava.default)('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', _renderComponent.default, _.default, _successTemporaryBanner.default);
|
|
36
|
+
(0, _ava.default)('Molecule › MoleculeBanner › WarningTemporaryBanner › should be rendered', _renderComponent.default, _.default, _warningTemporaryBanner.default);
|
|
25
37
|
//# sourceMappingURL=fixtures.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["t","pass","MoleculeBanner","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureErrorBanner"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,yDAAL,EAAgEA,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAeC,SAAvB,EAAkC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,0DAAL,EAAiEG,wBAAjE,EAAuFN,SAAvF,EAAuGO,gBAAvG;AACA,kBAAK,8DAAL,EAAqED,wBAArE,EAA2FN,SAA3F,EAA2GQ,oBAA3G","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\n"],"file":"fixtures.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["t","pass","MoleculeBanner","propTypes","value","key","not","undefined","renderComponentMacro","fixtureDefault","fixtureErrorBanner","fixtureErrorTemporaryBanner","fixtureSuccessBanner","fixtureSuccessTemporaryBanner","fixtureWarningTemporaryBanner"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,yDAAL,EAAgEA,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAeC,SAAvB,EAAkC,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,0DAAL,EAAiEG,wBAAjE,EAAuFN,SAAvF,EAAuGO,gBAAvG;AACA,kBAAK,8DAAL,EAAqED,wBAArE,EAA2FN,SAA3F,EAA2GQ,oBAA3G;AACA,kBAAK,uEAAL,EAA8EF,wBAA9E,EAAoGN,SAApG,EAAoHS,6BAApH;AACA,kBAAK,gEAAL,EAAuEH,wBAAvE,EAA6FN,SAA7F,EAA6GU,sBAA7G;AACA,kBAAK,yEAAL,EAAgFJ,wBAAhF,EAAsGN,SAAtG,EAAsHW,+BAAtH;AACA,kBAAK,yEAAL,EAAgFL,wBAAhF,EAAsGN,SAAtG,EAAsHY,+BAAtH","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\nimport fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';\nimport fixtureSuccessBanner from './fixtures/success-banner';\nimport fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';\nimport fixtureWarningTemporaryBanner from './fixtures/warning-temporary-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\ntest('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);\ntest('Molecule › MoleculeBanner › SuccessBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessBanner);\ntest('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);\ntest('Molecule › MoleculeBanner › WarningTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureWarningTemporaryBanner);\n"],"file":"fixtures.js"}
|
|
@@ -8,6 +8,10 @@ var _renderComponent = _interopRequireDefault(require("../../../test/helpers/ren
|
|
|
8
8
|
|
|
9
9
|
var _ = _interopRequireDefault(require(".."));
|
|
10
10
|
|
|
11
|
+
var _checkedCmThemeMultiple = _interopRequireDefault(require("./fixtures/checked-cm-theme-multiple"));
|
|
12
|
+
|
|
13
|
+
var _checkedCmTheme = _interopRequireDefault(require("./fixtures/checked-cm-theme"));
|
|
14
|
+
|
|
11
15
|
var _checkedCockpitTheme = _interopRequireDefault(require("./fixtures/checked-cockpit-theme"));
|
|
12
16
|
|
|
13
17
|
var _checkedSetupTheme = _interopRequireDefault(require("./fixtures/checked-setup-theme"));
|
|
@@ -28,6 +32,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
28
32
|
t.not(value, undefined, `PropType for "Molecule.MoleculeSelectMultiple.propTypes.${key}" may not be undefined. Did you mistype the propTypes definition?`);
|
|
29
33
|
});
|
|
30
34
|
});
|
|
35
|
+
(0, _ava.default)('Molecule › MoleculeSelectMultiple › CheckedCmThemeMultiple › should be rendered', _renderComponent.default, _.default, _checkedCmThemeMultiple.default);
|
|
36
|
+
(0, _ava.default)('Molecule › MoleculeSelectMultiple › CheckedCmTheme › should be rendered', _renderComponent.default, _.default, _checkedCmTheme.default);
|
|
31
37
|
(0, _ava.default)('Molecule › MoleculeSelectMultiple › CheckedCockpitTheme › should be rendered', _renderComponent.default, _.default, _checkedCockpitTheme.default);
|
|
32
38
|
(0, _ava.default)('Molecule › MoleculeSelectMultiple › CheckedSetupTheme › should be rendered', _renderComponent.default, _.default, _checkedSetupTheme.default);
|
|
33
39
|
(0, _ava.default)('Molecule › MoleculeSelectMultiple › Checked › should be rendered', _renderComponent.default, _.default, _checked.default);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/select-multiple/test/fixtures.js"],"names":["t","pass","MoleculeSelectMultiple","propTypes","value","key","not","undefined","renderComponentMacro","fixtureCheckedCockpitTheme","fixtureCheckedSetupTheme","fixtureChecked","fixtureDefault","fixtureSetupThemeError","fixtureSetupTheme"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iEAAL,EAAwEA,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAuBC,SAA/B,EAA0C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,8EAAL,
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/select-multiple/test/fixtures.js"],"names":["t","pass","MoleculeSelectMultiple","propTypes","value","key","not","undefined","renderComponentMacro","fixtureCheckedCmThemeMultiple","fixtureCheckedCmTheme","fixtureCheckedCockpitTheme","fixtureCheckedSetupTheme","fixtureChecked","fixtureDefault","fixtureSetupThemeError","fixtureSetupTheme"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,kBAAK,iEAAL,EAAwEA,CAAC,IAAI;AAC3EA,EAAAA,CAAC,CAACC,IAAF;AACA,wBAAQC,UAAuBC,SAA/B,EAA0C,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACxDL,IAAAA,CAAC,CAACM,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,2DAA0DF,GAAI,mEAAvF;AACD,GAFD;AAGD,CALD;AAOA,kBAAK,iFAAL,EAAwFG,wBAAxF,EAA8GN,SAA9G,EAAsIO,+BAAtI;AACA,kBAAK,yEAAL,EAAgFD,wBAAhF,EAAsGN,SAAtG,EAA8HQ,uBAA9H;AACA,kBAAK,8EAAL,EAAqFF,wBAArF,EAA2GN,SAA3G,EAAmIS,4BAAnI;AACA,kBAAK,4EAAL,EAAmFH,wBAAnF,EAAyGN,SAAzG,EAAiIU,0BAAjI;AACA,kBAAK,kEAAL,EAAyEJ,wBAAzE,EAA+FN,SAA/F,EAAuHW,gBAAvH;AACA,kBAAK,kEAAL,EAAyEL,wBAAzE,EAA+FN,SAA/F,EAAuHY,gBAAvH;AACA,kBAAK,0EAAL,EAAiFN,wBAAjF,EAAuGN,SAAvG,EAA+Ha,wBAA/H;AACA,kBAAK,qEAAL,EAA4EP,wBAA5E,EAAkGN,SAAlG,EAA0Hc,mBAA1H","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeSelectMultiple from '..';\nimport fixtureCheckedCmThemeMultiple from './fixtures/checked-cm-theme-multiple';\nimport fixtureCheckedCmTheme from './fixtures/checked-cm-theme';\nimport fixtureCheckedCockpitTheme from './fixtures/checked-cockpit-theme';\nimport fixtureCheckedSetupTheme from './fixtures/checked-setup-theme';\nimport fixtureChecked from './fixtures/checked';\nimport fixtureDefault from './fixtures/default';\nimport fixtureSetupThemeError from './fixtures/setup-theme-error';\nimport fixtureSetupTheme from './fixtures/setup-theme';\n\ntest('Molecule › MoleculeSelectMultiple > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeSelectMultiple.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeSelectMultiple.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeSelectMultiple › CheckedCmThemeMultiple › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCmThemeMultiple);\ntest('Molecule › MoleculeSelectMultiple › CheckedCmTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCmTheme);\ntest('Molecule › MoleculeSelectMultiple › CheckedCockpitTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedCockpitTheme);\ntest('Molecule › MoleculeSelectMultiple › CheckedSetupTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureCheckedSetupTheme);\ntest('Molecule › MoleculeSelectMultiple › Checked › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureChecked);\ntest('Molecule › MoleculeSelectMultiple › Default › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureDefault);\ntest('Molecule › MoleculeSelectMultiple › SetupThemeError › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureSetupThemeError);\ntest('Molecule › MoleculeSelectMultiple › SetupTheme › should be rendered', renderComponentMacro, MoleculeSelectMultiple, fixtureSetupTheme);\n"],"file":"fixtures.js"}
|
|
@@ -21,10 +21,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
21
21
|
|
|
22
22
|
const ListItem = props => {
|
|
23
23
|
const {
|
|
24
|
-
|
|
25
|
-
tags,
|
|
24
|
+
bulletPointMenuButton,
|
|
26
25
|
buttonLink,
|
|
27
|
-
|
|
26
|
+
tags,
|
|
27
|
+
title
|
|
28
28
|
} = props;
|
|
29
29
|
|
|
30
30
|
const tagsView = _map2.default.convert({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/organism/list-item/index.js"],"names":["ListItem","props","
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/list-item/index.js"],"names":["ListItem","props","bulletPointMenuButton","buttonLink","tags","title","tagsView","convert","cap","tag","index","style","wrapper","settings","edit","propTypes","PropTypes","shape","buttonAriaLabel","string","menuAriaLabel","buttons","arrayOf","label","type","onClick","func","ariaLabel","dataName","icon","position","oneOf","isRequired"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAGC,KAAK,IAAI;AACxB,QAAM;AAACC,IAAAA,qBAAD;AAAwBC,IAAAA,UAAxB;AAAoCC,IAAAA,IAApC;AAA0CC,IAAAA;AAA1C,MAAmDJ,KAAzD;;AACA,QAAMK,QAAQ,GAAG,cAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0B,CAACC,GAAD,EAAMC,KAAN,KAAgB;AACzD,wBACE;AAAK,MAAA,GAAG,EAAEA,KAAV;AAAiB,MAAA,SAAS,EAAEC,eAAMF;AAAlC,oBACE,6BAAC,YAAD,EAASA,GAAT,CADF,CADF;AAKD,GANgB,EAMdL,IANc,CAAjB;;AAOA,sBACE;AAAK,IAAA,SAAS,EAAEO,eAAMC;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAED,eAAMN,KAAtB;AAA6B,IAAA,KAAK,EAAEA;AAApC,KACGA,KADH,CADF,eAIE;AAAK,IAAA,SAAS,EAAEM,eAAME;AAAtB,KACGP,QADH,eAEE;AAAK,IAAA,SAAS,EAAEK,eAAMG;AAAtB,kBACE,6BAAC,mBAAD,EAAgBX,UAAhB,CADF,CAFF,eAKE,6BAAC,8BAAD,EAA2BD,qBAA3B,CALF,CAJF,CADF;AAcD,CAvBD;;AAyBAF,QAAQ,CAACe,SAAT,2CAAqB;AACnBb,EAAAA,qBAAqB,EAAEc,mBAAUC,KAAV,CAAgB;AACrCC,IAAAA,eAAe,EAAEF,mBAAUG,MADU;AAErCC,IAAAA,aAAa,EAAEJ,mBAAUG,MAFY;AAGrCE,IAAAA,OAAO,EAAEL,mBAAUM,OAAV,CACPN,mBAAUC,KAAV,CAAgB;AACd,mBAAaD,mBAAUG,MADT;AAEdI,MAAAA,KAAK,EAAEP,mBAAUG,MAFH;AAGdK,MAAAA,IAAI,EAAER,mBAAUG,MAHF;AAIdM,MAAAA,OAAO,EAAET,mBAAUU;AAJL,KAAhB,CADO,CAH4B;AAWrCD,IAAAA,OAAO,EAAET,mBAAUU;AAXkB,GAAhB,CADJ;AAcnBvB,EAAAA,UAAU,EAAEa,mBAAUC,KAAV,CAAgB;AAC1BO,IAAAA,IAAI,EAAER,mBAAUG,MADU;AAE1BI,IAAAA,KAAK,EAAEP,mBAAUG,MAFS;AAG1BQ,IAAAA,SAAS,EAAEX,mBAAUG,MAHK;AAI1BS,IAAAA,QAAQ,EAAEZ,mBAAUG,MAJM;AAK1BU,IAAAA,IAAI,EAAEb,mBAAUC,KAAV,CAAgB;AACpBa,MAAAA,QAAQ,EAAEd,mBAAUG,MADA;AAEpBK,MAAAA,IAAI,EAAER,mBAAUG;AAFI,KAAhB,CALoB;AAS1BM,IAAAA,OAAO,EAAET,mBAAUU;AATO,GAAhB,CAdO;AAyBnBtB,EAAAA,IAAI,EAAEY,mBAAUM,OAAV,CACJN,mBAAUC,KAAV,CAAgB;AACdM,IAAAA,KAAK,EAAEP,mBAAUG,MADH;AAEdK,IAAAA,IAAI,EAAER,mBAAUe,KAAV,CAAgB,CAAC,WAAD,EAAc,OAAd,EAAuB,UAAvB,EAAmC,SAAnC,EAA8C,SAA9C,CAAhB;AAFQ,GAAhB,CADI,CAzBa;AA+BnB1B,EAAAA,KAAK,EAAEW,mBAAUG,MAAV,CAAiBa;AA/BL,CAArB;eAkCehC,Q","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {map} from 'lodash/fp';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport style from './style.css';\n\nconst ListItem = props => {\n const {bulletPointMenuButton, buttonLink, tags, title} = props;\n const tagsView = map.convert({cap: false})((tag, index) => {\n return (\n <div key={index} className={style.tag}>\n <Tag {...tag} />\n </div>\n );\n })(tags);\n return (\n <div className={style.wrapper}>\n <div className={style.title} title={title}>\n {title}\n </div>\n <div className={style.settings}>\n {tagsView}\n <div className={style.edit}>\n <ButtonLink {...buttonLink} />\n </div>\n <BulletPointMenuButton {...bulletPointMenuButton} />\n </div>\n </div>\n );\n};\n\nListItem.propTypes = {\n bulletPointMenuButton: PropTypes.shape({\n buttonAriaLabel: PropTypes.string,\n menuAriaLabel: PropTypes.string,\n buttons: PropTypes.arrayOf(\n PropTypes.shape({\n 'data-name': PropTypes.string,\n label: PropTypes.string,\n type: PropTypes.string,\n onClick: PropTypes.func\n })\n ),\n onClick: PropTypes.func\n }),\n buttonLink: PropTypes.shape({\n type: PropTypes.string,\n label: PropTypes.string,\n ariaLabel: PropTypes.string,\n dataName: PropTypes.string,\n icon: PropTypes.shape({\n position: PropTypes.string,\n type: PropTypes.string\n }),\n onClick: PropTypes.func\n }),\n tags: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n type: PropTypes.oneOf(['published', 'draft', 'archived', 'revised', 'default'])\n })\n ),\n title: PropTypes.string.isRequired\n};\n\nexport default ListItem;\n"],"file":"index.js"}
|
|
@@ -6,41 +6,45 @@
|
|
|
6
6
|
@value primaryAdd1 from colors;
|
|
7
7
|
|
|
8
8
|
.wrapper {
|
|
9
|
-
|
|
10
|
-
border-radius: 7px;
|
|
9
|
+
align-items: center;
|
|
11
10
|
background-color: color(xtraLightGrey a(90%));
|
|
12
|
-
|
|
11
|
+
border-radius: 7px;
|
|
12
|
+
box-sizing: border-box;
|
|
13
13
|
display: flex;
|
|
14
|
-
|
|
14
|
+
height: 60px;
|
|
15
15
|
justify-content: space-between;
|
|
16
16
|
padding: 0 24px;
|
|
17
|
-
|
|
17
|
+
width: 100%;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.title {
|
|
21
|
+
color: cm_grey_900;
|
|
21
22
|
flex-grow: 0;
|
|
22
23
|
font-family: Gilroy;
|
|
23
24
|
font-size: 16px;
|
|
24
|
-
font-weight: bold;
|
|
25
25
|
font-stretch: normal;
|
|
26
26
|
font-style: normal;
|
|
27
|
+
font-weight: bold;
|
|
27
28
|
line-height: 1.38;
|
|
28
29
|
letter-spacing: normal;
|
|
29
|
-
|
|
30
|
-
color: cm_grey_900;
|
|
30
|
+
margin-right: 24px;
|
|
31
31
|
overflow: hidden;
|
|
32
|
+
text-align: left;
|
|
32
33
|
text-overflow: ellipsis;
|
|
33
34
|
white-space: nowrap;
|
|
35
|
+
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
.settings {
|
|
37
|
-
display: flex;
|
|
38
|
-
height: 100%;
|
|
39
39
|
align-items: center;
|
|
40
|
+
display: flex;
|
|
41
|
+
height: 100%;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
.tag {
|
|
43
45
|
margin: 0 16px 0 0;
|
|
46
|
+
text-overflow: ellipsis;
|
|
47
|
+
white-space: nowrap;
|
|
44
48
|
}
|
|
45
49
|
|
|
46
50
|
.edit {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.14",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"webpack-hot-middleware": "^2.25.0"
|
|
119
119
|
},
|
|
120
120
|
"author": "CoorpAcademy",
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "d2d495b1c5a7220186beea754dc50d4f5e2971ea"
|
|
122
122
|
}
|