@coorpacademy/components 10.10.0 → 10.11.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/molecule/dashboard/review-banner/index.js +2 -15
- package/es/molecule/dashboard/review-banner/index.js.map +1 -1
- package/es/molecule/dashboard/review-banner/style.css +9 -0
- package/es/variables/colors.css +2 -1
- package/lib/molecule/dashboard/review-banner/index.js +2 -17
- package/lib/molecule/dashboard/review-banner/index.js.map +1 -1
- package/lib/molecule/dashboard/review-banner/style.css +9 -0
- package/lib/variables/colors.css +2 -1
- package/package.json +2 -2
|
@@ -2,29 +2,20 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import getOr from 'lodash/fp/getOr';
|
|
6
|
-
import Provider from '../../../atom/provider';
|
|
7
5
|
import ButtonLink from '../../../atom/button-link';
|
|
8
6
|
import style from './style.css';
|
|
9
7
|
|
|
10
|
-
const ReviewBanner =
|
|
8
|
+
const ReviewBanner = props => {
|
|
11
9
|
const {
|
|
12
10
|
title,
|
|
13
11
|
subtitle,
|
|
14
12
|
cta
|
|
15
13
|
} = props;
|
|
16
|
-
const {
|
|
17
|
-
skin
|
|
18
|
-
} = context;
|
|
19
|
-
const primary = getOr('#00B0FF', 'common.primary', skin);
|
|
20
14
|
|
|
21
15
|
const buttonProps = _extends(_extends({}, cta), {}, {
|
|
22
16
|
type: 'primary'
|
|
23
17
|
});
|
|
24
18
|
|
|
25
|
-
const ctaStyle = {
|
|
26
|
-
background: primary
|
|
27
|
-
};
|
|
28
19
|
return /*#__PURE__*/React.createElement("div", {
|
|
29
20
|
className: style.root,
|
|
30
21
|
"data-name": "start-review-banner"
|
|
@@ -51,8 +42,7 @@ const ReviewBanner = (props, context) => {
|
|
|
51
42
|
"data-name": "review-banner-subtitle",
|
|
52
43
|
"aria-label": "{subtitle}"
|
|
53
44
|
}, subtitle), /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonProps, {
|
|
54
|
-
className: style.cta
|
|
55
|
-
customStyle: ctaStyle
|
|
45
|
+
className: style.cta
|
|
56
46
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
57
47
|
className: style.right,
|
|
58
48
|
role: "img",
|
|
@@ -72,8 +62,5 @@ ReviewBanner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
72
62
|
label: PropTypes.string
|
|
73
63
|
})
|
|
74
64
|
} : {};
|
|
75
|
-
ReviewBanner.contextTypes = {
|
|
76
|
-
skin: Provider.childContextTypes.skin
|
|
77
|
-
};
|
|
78
65
|
export default React.memo(ReviewBanner);
|
|
79
66
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/dashboard/review-banner/index.js"],"names":["React","PropTypes","
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/dashboard/review-banner/index.js"],"names":["React","PropTypes","ButtonLink","style","ReviewBanner","props","title","subtitle","cta","buttonProps","type","root","container","banner","left","image","middle","right","propTypes","string","shape","onClick","func","label","memo"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,YAAY,GAAGC,KAAK,IAAI;AAC5B,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAAyBH,KAA/B;;AAEA,QAAMI,WAAW,yBACZD,GADY;AAEfE,IAAAA,IAAI,EAAE;AAFS,IAAjB;;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEP,KAAK,CAACQ,IAAtB;AAA4B,iBAAU;AAAtC,kBACE;AAAK,IAAA,SAAS,EAAER,KAAK,CAACS;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAET,KAAK,CAACU;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW,IAAtB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,kBAAW;AAAlD,kBACE;AACE,IAAA,SAAS,EAAEX,KAAK,CAACY,KADnB;AAEE,IAAA,GAAG,EAAC,+CAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CADF,eAQE;AAAK,IAAA,SAAS,EAAEZ,KAAK,CAACa;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEb,KAAK,CAACG,KAAvB;AAA8B,iBAAU,qBAAxC;AAA8D,kBAAW;AAAzE,KACGA,KADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEH,KAAK,CAACI,QADnB;AAEE,iBAAU,wBAFZ;AAGE,kBAAW;AAHb,KAKGA,QALH,CAJF,eAWE,oBAAC,UAAD,eAAgBE,WAAhB;AAA6B,IAAA,SAAS,EAAEN,KAAK,CAACK;AAA9C,KAXF,CARF,eAqBE;AAAK,IAAA,SAAS,EAAEL,KAAK,CAACc,KAAtB;AAA6B,IAAA,IAAI,EAAC,KAAlC;AAAwC,kBAAW;AAAnD,kBACE;AACE,IAAA,SAAS,EAAEd,KAAK,CAACY,KADnB;AAEE,IAAA,GAAG,EAAC,kDAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CArBF,CADF,CADF,CADF;AAmCD,CA3CD;;AA6CAX,YAAY,CAACc,SAAb,2CAAyB;AACvBZ,EAAAA,KAAK,EAAEL,SAAS,CAACkB,MADM;AAEvBZ,EAAAA,QAAQ,EAAEN,SAAS,CAACkB,MAFG;AAGvBX,EAAAA,GAAG,EAAEP,SAAS,CAACmB,KAAV,CAAgB;AACnBC,IAAAA,OAAO,EAAEpB,SAAS,CAACqB,IADA;AAEnBC,IAAAA,KAAK,EAAEtB,SAAS,CAACkB;AAFE,GAAhB;AAHkB,CAAzB;AASA,eAAenB,KAAK,CAACwB,IAAN,CAAWpB,YAAX,CAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst ReviewBanner = props => {\n const {title, subtitle, cta} = props;\n\n const buttonProps = {\n ...cta,\n type: 'primary'\n };\n\n return (\n <div className={style.root} data-name=\"start-review-banner\">\n <div className={style.container}>\n <div className={style.banner}>\n <div className={style.left} role=\"img\" aria-label=\"Left image container\">\n <img\n className={style.image}\n src=\"https://static.coorpacademy.com/site/book.png\"\n alt=\"Book image\"\n />\n </div>\n <div className={style.middle}>\n <span className={style.title} data-name=\"review-banner-title\" aria-label=\"{title}\">\n {title}\n </span>\n <span\n className={style.subtitle}\n data-name=\"review-banner-subtitle\"\n aria-label=\"{subtitle}\"\n >\n {subtitle}\n </span>\n <ButtonLink {...buttonProps} className={style.cta} />\n </div>\n <div className={style.right} role=\"img\" aria-label=\"Rigth image container\">\n <img\n className={style.image}\n src=\"https://static.coorpacademy.com/site/dumbell.png\"\n alt=\"Dumbbell image\"\n />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nReviewBanner.propTypes = {\n title: PropTypes.string,\n subtitle: PropTypes.string,\n cta: PropTypes.shape({\n onClick: PropTypes.func,\n label: PropTypes.string\n })\n};\n\nexport default React.memo(ReviewBanner);\n"],"file":"index.js"}
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
@value mobile from breakpoints;
|
|
5
5
|
@value white from colors;
|
|
6
6
|
@value battle_bg from colors;
|
|
7
|
+
@value cm_orange_200 from colors;
|
|
8
|
+
@value cm_orange_700 from colors;
|
|
9
|
+
@value box_shadow_orange_700 from colors;
|
|
7
10
|
|
|
8
11
|
.root {
|
|
9
12
|
display: flex;
|
|
@@ -108,6 +111,12 @@
|
|
|
108
111
|
font-style: normal;
|
|
109
112
|
font-weight: bold;
|
|
110
113
|
font-size: 16px;
|
|
114
|
+
background-color: cm_orange_200;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.cta:hover {
|
|
118
|
+
background-color: cm_orange_700;
|
|
119
|
+
box-shadow: 0px 0px 30px 11px box_shadow_orange_700;
|
|
111
120
|
}
|
|
112
121
|
|
|
113
122
|
@media tablet {
|
package/es/variables/colors.css
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
@value cm_green_50: #e8fcf8;
|
|
52
52
|
@value cm_green_200: #16ac8c;
|
|
53
53
|
@value cm_orange_200: #FF7043;
|
|
54
|
-
@value cm_orange_700: #
|
|
54
|
+
@value cm_orange_700: #FF4105;
|
|
55
55
|
@value cm_pink_50: #ffefeb;
|
|
56
56
|
@value cm_purple_200: #7340FF;
|
|
57
57
|
@value cm_yellow_scorm: #FFB800;
|
|
@@ -64,3 +64,4 @@
|
|
|
64
64
|
@value cm_warning_50: rgba(255, 192, 67, 0.13);
|
|
65
65
|
@value box_shadow_light_dark: rgba(0, 0, 0, 0.12);
|
|
66
66
|
@value box_shadow_medium_dark: rgba(0, 0, 0, 0.2);
|
|
67
|
+
@value box_shadow_orange_700: rgba(255, 84, 31, 0.15);
|
|
@@ -7,10 +7,6 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
7
7
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
|
|
10
|
-
var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
|
|
11
|
-
|
|
12
|
-
var _provider = _interopRequireDefault(require("../../../atom/provider"));
|
|
13
|
-
|
|
14
10
|
var _buttonLink = _interopRequireDefault(require("../../../atom/button-link"));
|
|
15
11
|
|
|
16
12
|
var _style = _interopRequireDefault(require("./style.css"));
|
|
@@ -19,24 +15,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
19
15
|
|
|
20
16
|
function _extends() { _extends = Object.assign || 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); }
|
|
21
17
|
|
|
22
|
-
const ReviewBanner =
|
|
18
|
+
const ReviewBanner = props => {
|
|
23
19
|
const {
|
|
24
20
|
title,
|
|
25
21
|
subtitle,
|
|
26
22
|
cta
|
|
27
23
|
} = props;
|
|
28
|
-
const {
|
|
29
|
-
skin
|
|
30
|
-
} = context;
|
|
31
|
-
const primary = (0, _getOr.default)('#00B0FF', 'common.primary', skin);
|
|
32
24
|
|
|
33
25
|
const buttonProps = _extends(_extends({}, cta), {}, {
|
|
34
26
|
type: 'primary'
|
|
35
27
|
});
|
|
36
28
|
|
|
37
|
-
const ctaStyle = {
|
|
38
|
-
background: primary
|
|
39
|
-
};
|
|
40
29
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
41
30
|
className: _style.default.root,
|
|
42
31
|
"data-name": "start-review-banner"
|
|
@@ -63,8 +52,7 @@ const ReviewBanner = (props, context) => {
|
|
|
63
52
|
"data-name": "review-banner-subtitle",
|
|
64
53
|
"aria-label": "{subtitle}"
|
|
65
54
|
}, subtitle), /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, buttonProps, {
|
|
66
|
-
className: _style.default.cta
|
|
67
|
-
customStyle: ctaStyle
|
|
55
|
+
className: _style.default.cta
|
|
68
56
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
69
57
|
className: _style.default.right,
|
|
70
58
|
role: "img",
|
|
@@ -84,9 +72,6 @@ ReviewBanner.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
84
72
|
label: _propTypes.default.string
|
|
85
73
|
})
|
|
86
74
|
} : {};
|
|
87
|
-
ReviewBanner.contextTypes = {
|
|
88
|
-
skin: _provider.default.childContextTypes.skin
|
|
89
|
-
};
|
|
90
75
|
|
|
91
76
|
var _default = _react.default.memo(ReviewBanner);
|
|
92
77
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/dashboard/review-banner/index.js"],"names":["ReviewBanner","props","
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/dashboard/review-banner/index.js"],"names":["ReviewBanner","props","title","subtitle","cta","buttonProps","type","style","root","container","banner","left","image","middle","right","propTypes","PropTypes","string","shape","onClick","func","label","React","memo"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,YAAY,GAAGC,KAAK,IAAI;AAC5B,QAAM;AAACC,IAAAA,KAAD;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA;AAAlB,MAAyBH,KAA/B;;AAEA,QAAMI,WAAW,yBACZD,GADY;AAEfE,IAAAA,IAAI,EAAE;AAFS,IAAjB;;AAKA,sBACE;AAAK,IAAA,SAAS,EAAEC,eAAMC,IAAtB;AAA4B,iBAAU;AAAtC,kBACE;AAAK,IAAA,SAAS,EAAED,eAAME;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEF,eAAMG;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI,IAAtB;AAA4B,IAAA,IAAI,EAAC,KAAjC;AAAuC,kBAAW;AAAlD,kBACE;AACE,IAAA,SAAS,EAAEJ,eAAMK,KADnB;AAEE,IAAA,GAAG,EAAC,+CAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CADF,eAQE;AAAK,IAAA,SAAS,EAAEL,eAAMM;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEN,eAAML,KAAvB;AAA8B,iBAAU,qBAAxC;AAA8D,kBAAW;AAAzE,KACGA,KADH,CADF,eAIE;AACE,IAAA,SAAS,EAAEK,eAAMJ,QADnB;AAEE,iBAAU,wBAFZ;AAGE,kBAAW;AAHb,KAKGA,QALH,CAJF,eAWE,6BAAC,mBAAD,eAAgBE,WAAhB;AAA6B,IAAA,SAAS,EAAEE,eAAMH;AAA9C,KAXF,CARF,eAqBE;AAAK,IAAA,SAAS,EAAEG,eAAMO,KAAtB;AAA6B,IAAA,IAAI,EAAC,KAAlC;AAAwC,kBAAW;AAAnD,kBACE;AACE,IAAA,SAAS,EAAEP,eAAMK,KADnB;AAEE,IAAA,GAAG,EAAC,kDAFN;AAGE,IAAA,GAAG,EAAC;AAHN,IADF,CArBF,CADF,CADF,CADF;AAmCD,CA3CD;;AA6CAZ,YAAY,CAACe,SAAb,2CAAyB;AACvBb,EAAAA,KAAK,EAAEc,mBAAUC,MADM;AAEvBd,EAAAA,QAAQ,EAAEa,mBAAUC,MAFG;AAGvBb,EAAAA,GAAG,EAAEY,mBAAUE,KAAV,CAAgB;AACnBC,IAAAA,OAAO,EAAEH,mBAAUI,IADA;AAEnBC,IAAAA,KAAK,EAAEL,mBAAUC;AAFE,GAAhB;AAHkB,CAAzB;;eASeK,eAAMC,IAAN,CAAWvB,YAAX,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst ReviewBanner = props => {\n const {title, subtitle, cta} = props;\n\n const buttonProps = {\n ...cta,\n type: 'primary'\n };\n\n return (\n <div className={style.root} data-name=\"start-review-banner\">\n <div className={style.container}>\n <div className={style.banner}>\n <div className={style.left} role=\"img\" aria-label=\"Left image container\">\n <img\n className={style.image}\n src=\"https://static.coorpacademy.com/site/book.png\"\n alt=\"Book image\"\n />\n </div>\n <div className={style.middle}>\n <span className={style.title} data-name=\"review-banner-title\" aria-label=\"{title}\">\n {title}\n </span>\n <span\n className={style.subtitle}\n data-name=\"review-banner-subtitle\"\n aria-label=\"{subtitle}\"\n >\n {subtitle}\n </span>\n <ButtonLink {...buttonProps} className={style.cta} />\n </div>\n <div className={style.right} role=\"img\" aria-label=\"Rigth image container\">\n <img\n className={style.image}\n src=\"https://static.coorpacademy.com/site/dumbell.png\"\n alt=\"Dumbbell image\"\n />\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nReviewBanner.propTypes = {\n title: PropTypes.string,\n subtitle: PropTypes.string,\n cta: PropTypes.shape({\n onClick: PropTypes.func,\n label: PropTypes.string\n })\n};\n\nexport default React.memo(ReviewBanner);\n"],"file":"index.js"}
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
@value mobile from breakpoints;
|
|
5
5
|
@value white from colors;
|
|
6
6
|
@value battle_bg from colors;
|
|
7
|
+
@value cm_orange_200 from colors;
|
|
8
|
+
@value cm_orange_700 from colors;
|
|
9
|
+
@value box_shadow_orange_700 from colors;
|
|
7
10
|
|
|
8
11
|
.root {
|
|
9
12
|
display: flex;
|
|
@@ -108,6 +111,12 @@
|
|
|
108
111
|
font-style: normal;
|
|
109
112
|
font-weight: bold;
|
|
110
113
|
font-size: 16px;
|
|
114
|
+
background-color: cm_orange_200;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.cta:hover {
|
|
118
|
+
background-color: cm_orange_700;
|
|
119
|
+
box-shadow: 0px 0px 30px 11px box_shadow_orange_700;
|
|
111
120
|
}
|
|
112
121
|
|
|
113
122
|
@media tablet {
|
package/lib/variables/colors.css
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
@value cm_green_50: #e8fcf8;
|
|
52
52
|
@value cm_green_200: #16ac8c;
|
|
53
53
|
@value cm_orange_200: #FF7043;
|
|
54
|
-
@value cm_orange_700: #
|
|
54
|
+
@value cm_orange_700: #FF4105;
|
|
55
55
|
@value cm_pink_50: #ffefeb;
|
|
56
56
|
@value cm_purple_200: #7340FF;
|
|
57
57
|
@value cm_yellow_scorm: #FFB800;
|
|
@@ -64,3 +64,4 @@
|
|
|
64
64
|
@value cm_warning_50: rgba(255, 192, 67, 0.13);
|
|
65
65
|
@value box_shadow_light_dark: rgba(0, 0, 0, 0.12);
|
|
66
66
|
@value box_shadow_medium_dark: rgba(0, 0, 0, 0.2);
|
|
67
|
+
@value box_shadow_orange_700: rgba(255, 84, 31, 0.15);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "10.
|
|
3
|
+
"version": "10.11.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -119,5 +119,5 @@
|
|
|
119
119
|
"webpack-hot-middleware": "^2.25.0"
|
|
120
120
|
},
|
|
121
121
|
"author": "CoorpAcademy",
|
|
122
|
-
"gitHead": "
|
|
122
|
+
"gitHead": "500454871a2b27245897f20bb30f521b3af6c363"
|
|
123
123
|
}
|