@coorpacademy/components 10.4.5 → 10.4.7
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/course-section/index.js +60 -0
- package/es/molecule/course-section/index.js.map +1 -0
- package/es/molecule/course-section/style.css +65 -0
- package/es/molecule/course-section/test/fixtures/chapter.js +17 -0
- package/es/molecule/course-section/test/fixtures/chapter.js.map +1 -0
- package/es/molecule/course-section/test/fixtures/course.js +17 -0
- package/es/molecule/course-section/test/fixtures/course.js.map +1 -0
- package/es/molecule/feedback/style.css +0 -1
- package/lib/molecule/course-section/index.js +72 -0
- package/lib/molecule/course-section/index.js.map +1 -0
- package/lib/molecule/course-section/style.css +65 -0
- package/lib/molecule/course-section/test/fixtures/chapter.js +22 -0
- package/lib/molecule/course-section/test/fixtures/chapter.js.map +1 -0
- package/lib/molecule/course-section/test/fixtures/course.js +22 -0
- package/lib/molecule/course-section/test/fixtures/course.js.map +1 -0
- package/lib/molecule/feedback/style.css +0 -1
- package/package.json +2 -2
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import CardImagePreview from '../../atom/card-image-preview';
|
|
4
|
+
import ContentBadge from '../../atom/content-badge';
|
|
5
|
+
import style from './style.css';
|
|
6
|
+
|
|
7
|
+
const CourseSection = props => {
|
|
8
|
+
const {
|
|
9
|
+
image,
|
|
10
|
+
contentBadge: {
|
|
11
|
+
category,
|
|
12
|
+
label
|
|
13
|
+
},
|
|
14
|
+
title,
|
|
15
|
+
author,
|
|
16
|
+
position,
|
|
17
|
+
'aria-label': {
|
|
18
|
+
title: ariaLabelTitle,
|
|
19
|
+
author: ariaLabelAuthor
|
|
20
|
+
}
|
|
21
|
+
} = props;
|
|
22
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: style.container,
|
|
24
|
+
"aria-label": ariaLabelTitle,
|
|
25
|
+
"data-name": `course-section-${position}`
|
|
26
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
27
|
+
className: style.position
|
|
28
|
+
}, position), /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: style.containerImage
|
|
30
|
+
}, /*#__PURE__*/React.createElement(CardImagePreview, {
|
|
31
|
+
image: image
|
|
32
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: style.containerInfos
|
|
34
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
className: style.containerMainInfos
|
|
36
|
+
}, /*#__PURE__*/React.createElement(ContentBadge, {
|
|
37
|
+
className: style.contentBadge,
|
|
38
|
+
category: category,
|
|
39
|
+
label: label
|
|
40
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
41
|
+
className: style.title
|
|
42
|
+
}, title)), /*#__PURE__*/React.createElement("span", {
|
|
43
|
+
className: style.author,
|
|
44
|
+
"aria-label": ariaLabelAuthor
|
|
45
|
+
}, author)));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
CourseSection.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
49
|
+
'aria-label': PropTypes.shape({
|
|
50
|
+
title: PropTypes.string,
|
|
51
|
+
author: PropTypes.string
|
|
52
|
+
}),
|
|
53
|
+
image: PropTypes.string,
|
|
54
|
+
contentBadge: PropTypes.shape(ContentBadge.propTypes),
|
|
55
|
+
title: PropTypes.string,
|
|
56
|
+
author: PropTypes.string,
|
|
57
|
+
position: PropTypes.number
|
|
58
|
+
} : {};
|
|
59
|
+
export default CourseSection;
|
|
60
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/course-section/index.js"],"names":["React","PropTypes","CardImagePreview","ContentBadge","style","CourseSection","props","image","contentBadge","category","label","title","author","position","ariaLabelTitle","ariaLabelAuthor","container","containerImage","containerInfos","containerMainInfos","propTypes","shape","string","number"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,YAAP,MAAyB,0BAAzB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,aAAa,GAAGC,KAAK,IAAI;AAC7B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,YAAY,EAAE;AAACC,MAAAA,QAAD;AAAWC,MAAAA;AAAX,KAFV;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAJI;AAKJC,IAAAA,QALI;AAMJ,kBAAc;AAACF,MAAAA,KAAK,EAAEG,cAAR;AAAwBF,MAAAA,MAAM,EAAEG;AAAhC;AANV,MAOFT,KAPJ;AAQA,sBACE;AACE,IAAA,SAAS,EAAEF,KAAK,CAACY,SADnB;AAEE,kBAAYF,cAFd;AAGE,iBAAY,kBAAiBD,QAAS;AAHxC,kBAKE;AAAM,IAAA,SAAS,EAAET,KAAK,CAACS;AAAvB,KAAkCA,QAAlC,CALF,eAME;AAAK,IAAA,SAAS,EAAET,KAAK,CAACa;AAAtB,kBACE,oBAAC,gBAAD;AAAkB,IAAA,KAAK,EAAEV;AAAzB,IADF,CANF,eASE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACc;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEd,KAAK,CAACe;AAAtB,kBACE,oBAAC,YAAD;AAAc,IAAA,SAAS,EAAEf,KAAK,CAACI,YAA/B;AAA6C,IAAA,QAAQ,EAAEC,QAAvD;AAAiE,IAAA,KAAK,EAAEC;AAAxE,IADF,eAEE;AAAK,IAAA,SAAS,EAAEN,KAAK,CAACO;AAAtB,KAA8BA,KAA9B,CAFF,CADF,eAKE;AAAM,IAAA,SAAS,EAAEP,KAAK,CAACQ,MAAvB;AAA+B,kBAAYG;AAA3C,KACGH,MADH,CALF,CATF,CADF;AAqBD,CA9BD;;AAgCAP,aAAa,CAACe,SAAd,2CAA0B;AACxB,gBAAcnB,SAAS,CAACoB,KAAV,CAAgB;AAC5BV,IAAAA,KAAK,EAAEV,SAAS,CAACqB,MADW;AAE5BV,IAAAA,MAAM,EAAEX,SAAS,CAACqB;AAFU,GAAhB,CADU;AAKxBf,EAAAA,KAAK,EAAEN,SAAS,CAACqB,MALO;AAMxBd,EAAAA,YAAY,EAAEP,SAAS,CAACoB,KAAV,CAAgBlB,YAAY,CAACiB,SAA7B,CANU;AAOxBT,EAAAA,KAAK,EAAEV,SAAS,CAACqB,MAPO;AAQxBV,EAAAA,MAAM,EAAEX,SAAS,CAACqB,MARM;AASxBT,EAAAA,QAAQ,EAAEZ,SAAS,CAACsB;AATI,CAA1B;AAYA,eAAelB,aAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CardImagePreview from '../../atom/card-image-preview';\nimport ContentBadge from '../../atom/content-badge';\nimport style from './style.css';\n\nconst CourseSection = props => {\n const {\n image,\n contentBadge: {category, label},\n title,\n author,\n position,\n 'aria-label': {title: ariaLabelTitle, author: ariaLabelAuthor}\n } = props;\n return (\n <div\n className={style.container}\n aria-label={ariaLabelTitle}\n data-name={`course-section-${position}`}\n >\n <span className={style.position}>{position}</span>\n <div className={style.containerImage}>\n <CardImagePreview image={image} />\n </div>\n <div className={style.containerInfos}>\n <div className={style.containerMainInfos}>\n <ContentBadge className={style.contentBadge} category={category} label={label} />\n <div className={style.title}>{title}</div>\n </div>\n <span className={style.author} aria-label={ariaLabelAuthor}>\n {author}\n </span>\n </div>\n </div>\n );\n};\n\nCourseSection.propTypes = {\n 'aria-label': PropTypes.shape({\n title: PropTypes.string,\n author: PropTypes.string\n }),\n image: PropTypes.string,\n contentBadge: PropTypes.shape(ContentBadge.propTypes),\n title: PropTypes.string,\n author: PropTypes.string,\n position: PropTypes.number\n};\n\nexport default CourseSection;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value cm_grey_50 from colors;
|
|
3
|
+
@value cm_grey_900 from colors;
|
|
4
|
+
@value cm_grey_500 from colors;
|
|
5
|
+
@value cm_grey_400 from colors;
|
|
6
|
+
|
|
7
|
+
.container {
|
|
8
|
+
align-items: center;
|
|
9
|
+
background-color: cm_grey_50;
|
|
10
|
+
border-radius: 7px;
|
|
11
|
+
display: flex;
|
|
12
|
+
font-size: 14px;
|
|
13
|
+
justify-content: start;
|
|
14
|
+
margin-top: 8px;
|
|
15
|
+
padding: 8px 16px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.containerInfos {
|
|
19
|
+
margin-left: 16px;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.containerMainInfos {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.title {
|
|
29
|
+
color: cm_grey_900;
|
|
30
|
+
line-height: 22px;
|
|
31
|
+
font-family: Gilroy;
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
margin-left: 4px;
|
|
35
|
+
overflow:hidden;
|
|
36
|
+
white-space:nowrap;
|
|
37
|
+
display:inline-block;
|
|
38
|
+
text-overflow:ellipsis;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.author {
|
|
42
|
+
color: cm_grey_500;
|
|
43
|
+
display: block;
|
|
44
|
+
font-family: Gilroy;
|
|
45
|
+
line-height: 20px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.position {
|
|
49
|
+
color: cm_grey_400;
|
|
50
|
+
font-family: Gilroy;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
line-height: 20px;
|
|
53
|
+
margin: 0 12px 0 14px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.contentBadge {
|
|
57
|
+
font-size: 8px;
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
line-height: 10px;;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.containerImage {
|
|
63
|
+
min-height: 56px;
|
|
64
|
+
min-width: 56px;
|
|
65
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
'aria-label': {
|
|
4
|
+
title: 'aria label title',
|
|
5
|
+
author: 'aria label author'
|
|
6
|
+
},
|
|
7
|
+
title: 'Social networks',
|
|
8
|
+
author: 'Author',
|
|
9
|
+
image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
|
|
10
|
+
contentBadge: {
|
|
11
|
+
label: 'chapter',
|
|
12
|
+
category: 'chapter'
|
|
13
|
+
},
|
|
14
|
+
position: 2
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=chapter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/chapter.js"],"names":["props","title","author","image","contentBadge","label","category","position"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EAAE,iBALF;AAMLC,IAAAA,MAAM,EAAE,QANH;AAOLC,IAAAA,KAAK,EACH,4LARG;AASLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,SADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KATT;AAaLC,IAAAA,QAAQ,EAAE;AAbL;AADM,CAAf","sourcesContent":["export default {\n props: {\n 'aria-label': {\n title: 'aria label title',\n author: 'aria label author'\n },\n title: 'Social networks',\n author: 'Author',\n image:\n 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n contentBadge: {\n label: 'chapter',\n category: 'chapter'\n },\n position: 2\n }\n};\n"],"file":"chapter.js"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
'aria-label': {
|
|
4
|
+
title: 'aria label title',
|
|
5
|
+
author: 'aria label author'
|
|
6
|
+
},
|
|
7
|
+
title: 'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',
|
|
8
|
+
author: 'Author',
|
|
9
|
+
image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
|
|
10
|
+
contentBadge: {
|
|
11
|
+
label: 'course',
|
|
12
|
+
category: 'course'
|
|
13
|
+
},
|
|
14
|
+
position: 1
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=course.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/course.js"],"names":["props","title","author","image","contentBadge","label","category","position"],"mappings":"AAAA,eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EACH,qIANG;AAOLC,IAAAA,MAAM,EAAE,QAPH;AAQLC,IAAAA,KAAK,EACH,4LATG;AAULC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,QADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KAVT;AAcLC,IAAAA,QAAQ,EAAE;AAdL;AADM,CAAf","sourcesContent":["export default {\n props: {\n 'aria-label': {\n title: 'aria label title',\n author: 'aria label author'\n },\n title:\n 'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',\n author: 'Author',\n image:\n 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n contentBadge: {\n label: 'course',\n category: 'course'\n },\n position: 1\n }\n};\n"],"file":"course.js"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
var _cardImagePreview = _interopRequireDefault(require("../../atom/card-image-preview"));
|
|
11
|
+
|
|
12
|
+
var _contentBadge = _interopRequireDefault(require("../../atom/content-badge"));
|
|
13
|
+
|
|
14
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
const CourseSection = props => {
|
|
19
|
+
const {
|
|
20
|
+
image,
|
|
21
|
+
contentBadge: {
|
|
22
|
+
category,
|
|
23
|
+
label
|
|
24
|
+
},
|
|
25
|
+
title,
|
|
26
|
+
author,
|
|
27
|
+
position,
|
|
28
|
+
'aria-label': {
|
|
29
|
+
title: ariaLabelTitle,
|
|
30
|
+
author: ariaLabelAuthor
|
|
31
|
+
}
|
|
32
|
+
} = props;
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
+
className: _style.default.container,
|
|
35
|
+
"aria-label": ariaLabelTitle,
|
|
36
|
+
"data-name": `course-section-${position}`
|
|
37
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
38
|
+
className: _style.default.position
|
|
39
|
+
}, position), /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
+
className: _style.default.containerImage
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement(_cardImagePreview.default, {
|
|
42
|
+
image: image
|
|
43
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
+
className: _style.default.containerInfos
|
|
45
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
46
|
+
className: _style.default.containerMainInfos
|
|
47
|
+
}, /*#__PURE__*/_react.default.createElement(_contentBadge.default, {
|
|
48
|
+
className: _style.default.contentBadge,
|
|
49
|
+
category: category,
|
|
50
|
+
label: label
|
|
51
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
52
|
+
className: _style.default.title
|
|
53
|
+
}, title)), /*#__PURE__*/_react.default.createElement("span", {
|
|
54
|
+
className: _style.default.author,
|
|
55
|
+
"aria-label": ariaLabelAuthor
|
|
56
|
+
}, author)));
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
CourseSection.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
60
|
+
'aria-label': _propTypes.default.shape({
|
|
61
|
+
title: _propTypes.default.string,
|
|
62
|
+
author: _propTypes.default.string
|
|
63
|
+
}),
|
|
64
|
+
image: _propTypes.default.string,
|
|
65
|
+
contentBadge: _propTypes.default.shape(_contentBadge.default.propTypes),
|
|
66
|
+
title: _propTypes.default.string,
|
|
67
|
+
author: _propTypes.default.string,
|
|
68
|
+
position: _propTypes.default.number
|
|
69
|
+
} : {};
|
|
70
|
+
var _default = CourseSection;
|
|
71
|
+
exports.default = _default;
|
|
72
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/course-section/index.js"],"names":["CourseSection","props","image","contentBadge","category","label","title","author","position","ariaLabelTitle","ariaLabelAuthor","style","container","containerImage","containerInfos","containerMainInfos","propTypes","PropTypes","shape","string","ContentBadge","number"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,aAAa,GAAGC,KAAK,IAAI;AAC7B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,YAAY,EAAE;AAACC,MAAAA,QAAD;AAAWC,MAAAA;AAAX,KAFV;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAJI;AAKJC,IAAAA,QALI;AAMJ,kBAAc;AAACF,MAAAA,KAAK,EAAEG,cAAR;AAAwBF,MAAAA,MAAM,EAAEG;AAAhC;AANV,MAOFT,KAPJ;AAQA,sBACE;AACE,IAAA,SAAS,EAAEU,eAAMC,SADnB;AAEE,kBAAYH,cAFd;AAGE,iBAAY,kBAAiBD,QAAS;AAHxC,kBAKE;AAAM,IAAA,SAAS,EAAEG,eAAMH;AAAvB,KAAkCA,QAAlC,CALF,eAME;AAAK,IAAA,SAAS,EAAEG,eAAME;AAAtB,kBACE,6BAAC,yBAAD;AAAkB,IAAA,KAAK,EAAEX;AAAzB,IADF,CANF,eASE;AAAK,IAAA,SAAS,EAAES,eAAMG;AAAtB,kBACE;AAAK,IAAA,SAAS,EAAEH,eAAMI;AAAtB,kBACE,6BAAC,qBAAD;AAAc,IAAA,SAAS,EAAEJ,eAAMR,YAA/B;AAA6C,IAAA,QAAQ,EAAEC,QAAvD;AAAiE,IAAA,KAAK,EAAEC;AAAxE,IADF,eAEE;AAAK,IAAA,SAAS,EAAEM,eAAML;AAAtB,KAA8BA,KAA9B,CAFF,CADF,eAKE;AAAM,IAAA,SAAS,EAAEK,eAAMJ,MAAvB;AAA+B,kBAAYG;AAA3C,KACGH,MADH,CALF,CATF,CADF;AAqBD,CA9BD;;AAgCAP,aAAa,CAACgB,SAAd,2CAA0B;AACxB,gBAAcC,mBAAUC,KAAV,CAAgB;AAC5BZ,IAAAA,KAAK,EAAEW,mBAAUE,MADW;AAE5BZ,IAAAA,MAAM,EAAEU,mBAAUE;AAFU,GAAhB,CADU;AAKxBjB,EAAAA,KAAK,EAAEe,mBAAUE,MALO;AAMxBhB,EAAAA,YAAY,EAAEc,mBAAUC,KAAV,CAAgBE,sBAAaJ,SAA7B,CANU;AAOxBV,EAAAA,KAAK,EAAEW,mBAAUE,MAPO;AAQxBZ,EAAAA,MAAM,EAAEU,mBAAUE,MARM;AASxBX,EAAAA,QAAQ,EAAES,mBAAUI;AATI,CAA1B;eAYerB,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CardImagePreview from '../../atom/card-image-preview';\nimport ContentBadge from '../../atom/content-badge';\nimport style from './style.css';\n\nconst CourseSection = props => {\n const {\n image,\n contentBadge: {category, label},\n title,\n author,\n position,\n 'aria-label': {title: ariaLabelTitle, author: ariaLabelAuthor}\n } = props;\n return (\n <div\n className={style.container}\n aria-label={ariaLabelTitle}\n data-name={`course-section-${position}`}\n >\n <span className={style.position}>{position}</span>\n <div className={style.containerImage}>\n <CardImagePreview image={image} />\n </div>\n <div className={style.containerInfos}>\n <div className={style.containerMainInfos}>\n <ContentBadge className={style.contentBadge} category={category} label={label} />\n <div className={style.title}>{title}</div>\n </div>\n <span className={style.author} aria-label={ariaLabelAuthor}>\n {author}\n </span>\n </div>\n </div>\n );\n};\n\nCourseSection.propTypes = {\n 'aria-label': PropTypes.shape({\n title: PropTypes.string,\n author: PropTypes.string\n }),\n image: PropTypes.string,\n contentBadge: PropTypes.shape(ContentBadge.propTypes),\n title: PropTypes.string,\n author: PropTypes.string,\n position: PropTypes.number\n};\n\nexport default CourseSection;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@value colors: "../../variables/colors.css";
|
|
2
|
+
@value cm_grey_50 from colors;
|
|
3
|
+
@value cm_grey_900 from colors;
|
|
4
|
+
@value cm_grey_500 from colors;
|
|
5
|
+
@value cm_grey_400 from colors;
|
|
6
|
+
|
|
7
|
+
.container {
|
|
8
|
+
align-items: center;
|
|
9
|
+
background-color: cm_grey_50;
|
|
10
|
+
border-radius: 7px;
|
|
11
|
+
display: flex;
|
|
12
|
+
font-size: 14px;
|
|
13
|
+
justify-content: start;
|
|
14
|
+
margin-top: 8px;
|
|
15
|
+
padding: 8px 16px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.containerInfos {
|
|
19
|
+
margin-left: 16px;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.containerMainInfos {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.title {
|
|
29
|
+
color: cm_grey_900;
|
|
30
|
+
line-height: 22px;
|
|
31
|
+
font-family: Gilroy;
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
font-weight: bold;
|
|
34
|
+
margin-left: 4px;
|
|
35
|
+
overflow:hidden;
|
|
36
|
+
white-space:nowrap;
|
|
37
|
+
display:inline-block;
|
|
38
|
+
text-overflow:ellipsis;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.author {
|
|
42
|
+
color: cm_grey_500;
|
|
43
|
+
display: block;
|
|
44
|
+
font-family: Gilroy;
|
|
45
|
+
line-height: 20px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.position {
|
|
49
|
+
color: cm_grey_400;
|
|
50
|
+
font-family: Gilroy;
|
|
51
|
+
font-weight: 600;
|
|
52
|
+
line-height: 20px;
|
|
53
|
+
margin: 0 12px 0 14px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.contentBadge {
|
|
57
|
+
font-size: 8px;
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
line-height: 10px;;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.containerImage {
|
|
63
|
+
min-height: 56px;
|
|
64
|
+
min-width: 56px;
|
|
65
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
'aria-label': {
|
|
8
|
+
title: 'aria label title',
|
|
9
|
+
author: 'aria label author'
|
|
10
|
+
},
|
|
11
|
+
title: 'Social networks',
|
|
12
|
+
author: 'Author',
|
|
13
|
+
image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
|
|
14
|
+
contentBadge: {
|
|
15
|
+
label: 'chapter',
|
|
16
|
+
category: 'chapter'
|
|
17
|
+
},
|
|
18
|
+
position: 2
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
exports.default = _default;
|
|
22
|
+
//# sourceMappingURL=chapter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/chapter.js"],"names":["props","title","author","image","contentBadge","label","category","position"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EAAE,iBALF;AAMLC,IAAAA,MAAM,EAAE,QANH;AAOLC,IAAAA,KAAK,EACH,4LARG;AASLC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,SADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KATT;AAaLC,IAAAA,QAAQ,EAAE;AAbL;AADM,C","sourcesContent":["export default {\n props: {\n 'aria-label': {\n title: 'aria label title',\n author: 'aria label author'\n },\n title: 'Social networks',\n author: 'Author',\n image:\n 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n contentBadge: {\n label: 'chapter',\n category: 'chapter'\n },\n position: 2\n }\n};\n"],"file":"chapter.js"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
var _default = {
|
|
6
|
+
props: {
|
|
7
|
+
'aria-label': {
|
|
8
|
+
title: 'aria label title',
|
|
9
|
+
author: 'aria label author'
|
|
10
|
+
},
|
|
11
|
+
title: 'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',
|
|
12
|
+
author: 'Author',
|
|
13
|
+
image: 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',
|
|
14
|
+
contentBadge: {
|
|
15
|
+
label: 'course',
|
|
16
|
+
category: 'course'
|
|
17
|
+
},
|
|
18
|
+
position: 1
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
exports.default = _default;
|
|
22
|
+
//# sourceMappingURL=course.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/course-section/test/fixtures/course.js"],"names":["props","title","author","image","contentBadge","label","category","position"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,kBAAc;AACZC,MAAAA,KAAK,EAAE,kBADK;AAEZC,MAAAA,MAAM,EAAE;AAFI,KADT;AAKLD,IAAAA,KAAK,EACH,qIANG;AAOLC,IAAAA,MAAM,EAAE,QAPH;AAQLC,IAAAA,KAAK,EACH,4LATG;AAULC,IAAAA,YAAY,EAAE;AACZC,MAAAA,KAAK,EAAE,QADK;AAEZC,MAAAA,QAAQ,EAAE;AAFE,KAVT;AAcLC,IAAAA,QAAQ,EAAE;AAdL;AADM,C","sourcesContent":["export default {\n props: {\n 'aria-label': {\n title: 'aria label title',\n author: 'aria label author'\n },\n title:\n 'Marketing and online advertising Marketing and online advertising Marketing and online advertising Marketing and online advertising',\n author: 'Author',\n image:\n 'https://api.coorpacademy.com/api-service/medias?url=https://static.coorpacademy.com/content/partner-wedemain/fr/medias/img/cover/shutterstock_248741149-1470302136299.jpg&h=500&w=500&q=90',\n contentBadge: {\n label: 'course',\n category: 'course'\n },\n position: 1\n }\n};\n"],"file":"course.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "10.4.
|
|
3
|
+
"version": "10.4.7",
|
|
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": "7ad72d7b0ccf38ea7df33aef35f3bea737a5d9ba"
|
|
123
123
|
}
|