@coorpacademy/components 11.32.11 → 11.32.13
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/discipline-associated-skills/index.js +9 -9
- package/es/molecule/discipline-associated-skills/index.js.map +1 -1
- package/es/molecule/discipline-associated-skills/style.css +7 -2
- package/es/molecule/discipline-header/index.d.ts +1 -1
- package/es/molecule/discipline-header/index.d.ts.map +1 -1
- package/es/molecule/discipline-header/index.js +5 -2
- package/es/molecule/discipline-header/index.js.map +1 -1
- package/lib/molecule/discipline-associated-skills/index.js +9 -9
- package/lib/molecule/discipline-associated-skills/index.js.map +1 -1
- package/lib/molecule/discipline-associated-skills/style.css +7 -2
- package/lib/molecule/discipline-header/index.d.ts +1 -1
- package/lib/molecule/discipline-header/index.d.ts.map +1 -1
- package/lib/molecule/discipline-header/index.js +5 -2
- package/lib/molecule/discipline-header/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -19,19 +19,19 @@ const DisciplineAssociatedSkills = (props, context) => {
|
|
|
19
19
|
} = props;
|
|
20
20
|
const AnchorElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
|
|
21
21
|
className: style.chipFocusedContent
|
|
22
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
22
|
+
}, skill.focused ? /*#__PURE__*/React.createElement(Icon, {
|
|
23
23
|
iconName: "bullseye-arrow",
|
|
24
24
|
backgroundColor: "#DDD1FF",
|
|
25
25
|
size: {
|
|
26
26
|
faSize: 12,
|
|
27
27
|
wrapperSize: 12
|
|
28
28
|
}
|
|
29
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
}) : null, /*#__PURE__*/React.createElement("div", {
|
|
30
30
|
className: style.chipFocusedContentText
|
|
31
|
-
}, skill)), []);
|
|
31
|
+
}, skill.locale)), []);
|
|
32
32
|
const TooltipContentElement = useCallback(skill => /*#__PURE__*/React.createElement("div", {
|
|
33
33
|
className: style.tooltipContentWrapper
|
|
34
|
-
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))), /*#__PURE__*/React.createElement("div", null, skill)), []);
|
|
34
|
+
}, skill.focused ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, translate('skill_focused_chip_tooltip'))) : null, /*#__PURE__*/React.createElement("div", null, skill.locale)), []);
|
|
35
35
|
return !_isEmpty(skills) ? /*#__PURE__*/React.createElement("div", {
|
|
36
36
|
"data-name": "discipline-associated-skills",
|
|
37
37
|
className: style.associatedSkillsWrapper
|
|
@@ -45,26 +45,26 @@ const DisciplineAssociatedSkills = (props, context) => {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
function handleAnchorElement() {
|
|
48
|
-
return AnchorElement(skill
|
|
48
|
+
return AnchorElement(skill);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
function handleTooltipContentElement() {
|
|
52
|
-
return TooltipContentElement(skill
|
|
52
|
+
return TooltipContentElement(skill);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
return /*#__PURE__*/React.createElement("div", {
|
|
56
56
|
key: _uniqueId(),
|
|
57
57
|
className: classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused),
|
|
58
58
|
onClick: handleSkillClick
|
|
59
|
-
},
|
|
59
|
+
}, /*#__PURE__*/React.createElement(ToolTip, {
|
|
60
60
|
AnchorElement: handleAnchorElement,
|
|
61
61
|
fontSize: 12,
|
|
62
62
|
delayHide: 0,
|
|
63
63
|
iconContainerClassName: style.infoIconTooltip,
|
|
64
|
-
tooltipClassName: style.tooltip,
|
|
64
|
+
tooltipClassName: skill.focused ? style.tooltipSkillFocused : style.tooltip,
|
|
65
65
|
TooltipContent: handleTooltipContentElement,
|
|
66
66
|
closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
|
|
67
|
-
})
|
|
67
|
+
}));
|
|
68
68
|
})))) : null;
|
|
69
69
|
};
|
|
70
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","faSize","wrapperSize","chipFocusedContentText","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","classnames","Icon","ToolTip","Provider","CatalogSection","style","DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","skill","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","handleTooltipContentElement","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n const {translate} = context;\n\n const {skills = [], onSkillClick} = props;\n\n const AnchorElement = useCallback(\n skill => (\n <div className={style.chipFocusedContent}>\n {skill.focused ? (\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 12,\n wrapperSize: 12\n }}\n />\n ) : null}\n <div className={style.chipFocusedContentText}>{skill.locale}</div>\n </div>\n ),\n []\n );\n\n const TooltipContentElement = useCallback(\n skill => (\n <div className={style.tooltipContentWrapper}>\n {skill.focused ? (\n <div>\n <b>{translate('skill_focused_chip_tooltip')}</b>\n </div>\n ) : null}\n <div>{skill.locale}</div>\n </div>\n ),\n []\n );\n\n return !isEmpty(skills) ? (\n <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n <CatalogSection title={translate('associated_skills')}>\n <div className={style.chipsWrapper}>\n {skills.map(skill => {\n function handleSkillClick() {\n return onSkillClick(skill.ref);\n }\n function handleAnchorElement() {\n return AnchorElement(skill);\n }\n function handleTooltipContentElement() {\n return TooltipContentElement(skill);\n }\n return (\n <div\n key={uniqueId()}\n className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n onClick={handleSkillClick}\n >\n <ToolTip\n AnchorElement={handleAnchorElement}\n fontSize={12}\n delayHide={0}\n iconContainerClassName={style.infoIconTooltip}\n tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n TooltipContent={handleTooltipContentElement}\n closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n />\n </div>\n );\n })}\n </div>\n </CatalogSection>\n </div>\n ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n skills: PropTypes.arrayOf(\n PropTypes.shape({\n ref: PropTypes.string,\n locale: PropTypes.string,\n focused: PropTypes.bool\n })\n ),\n onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}
|
|
@@ -55,13 +55,14 @@
|
|
|
55
55
|
background-color: transparent;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.tooltip
|
|
58
|
+
.tooltip,
|
|
59
|
+
.tooltipSkillFocused {
|
|
59
60
|
width: fit-content;
|
|
60
61
|
color: #FFF;
|
|
61
62
|
font-size: 12px;
|
|
62
63
|
font-style: normal;
|
|
63
64
|
line-height: 16px;
|
|
64
|
-
top: -
|
|
65
|
+
top: -48px;
|
|
65
66
|
|
|
66
67
|
p {
|
|
67
68
|
padding: 8px 8px;
|
|
@@ -69,6 +70,10 @@
|
|
|
69
70
|
}
|
|
70
71
|
}
|
|
71
72
|
|
|
73
|
+
.tooltipSkillFocused {
|
|
74
|
+
top: -64px;
|
|
75
|
+
}
|
|
76
|
+
|
|
72
77
|
.tooltipContentWrapper {
|
|
73
78
|
padding: 8px 12px;
|
|
74
79
|
text-align: left;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,kBAGC;IAED,sBAwDC;CACF"}
|
|
@@ -55,7 +55,8 @@ class DisciplineHeader extends React.Component {
|
|
|
55
55
|
}));
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
setHandle(
|
|
58
|
+
setHandle() {
|
|
59
|
+
const el = document.getElementById('discipline-summary');
|
|
59
60
|
this.setState({
|
|
60
61
|
scrollHeightShowMore: getOr(0, 'scrollHeight', el)
|
|
61
62
|
});
|
|
@@ -85,13 +86,15 @@ class DisciplineHeader extends React.Component {
|
|
|
85
86
|
"data-name": "disciplineHeader",
|
|
86
87
|
className: style.wrapper
|
|
87
88
|
}, hasMediaContent ? /*#__PURE__*/React.createElement("div", {
|
|
88
|
-
className: style.imgWrapper
|
|
89
|
+
className: style.imgWrapper,
|
|
90
|
+
ref: this.setHandle
|
|
89
91
|
}, /*#__PURE__*/React.createElement(Preview, {
|
|
90
92
|
image: image,
|
|
91
93
|
video: video
|
|
92
94
|
})) : null, /*#__PURE__*/React.createElement("div", {
|
|
93
95
|
className: style.courseWrapper
|
|
94
96
|
}, /*#__PURE__*/React.createElement("div", {
|
|
97
|
+
id: "discipline-summary",
|
|
95
98
|
className: fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort,
|
|
96
99
|
ref: this.setHandle
|
|
97
100
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","get","getOr","classnames","NovaSolidSynchronizeSynchronize3","SyncIcon","VideoPlayer","Picture","style","Preview","image","video","mimeType","id","jwpOptions","propTypes","src","shape","DisciplineHeader","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n const mimeType = get('mimeType', video);\n const id = get('id', video);\n const jwpOptions = get('jwpOptions', video);\n if (id) {\n return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n } else if (jwpOptions) {\n return <VideoPlayer {...video} />;\n } else {\n return <Picture className={style.image} src={image} />;\n }\n};\n\nPreview.propTypes = {\n image: Picture.propTypes.src,\n video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n image: Preview.propTypes.image,\n video: Preview.propTypes.video,\n lastUpdated: PropTypes.string\n };\n\n static contextTypes = {\n translate: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.state = {\n fullDisplay: false,\n scrollHeightShowMore: 0\n };\n this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n this.setHandle = this.setHandle.bind(this);\n }\n\n handleToggleDisplay() {\n this.setState(prevState => ({\n fullDisplay: !prevState.fullDisplay\n }));\n }\n\n setHandle(
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","get","getOr","classnames","NovaSolidSynchronizeSynchronize3","SyncIcon","VideoPlayer","Picture","style","Preview","image","video","mimeType","id","jwpOptions","propTypes","src","shape","DisciplineHeader","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","document","getElementById","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n const mimeType = get('mimeType', video);\n const id = get('id', video);\n const jwpOptions = get('jwpOptions', video);\n if (id) {\n return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n } else if (jwpOptions) {\n return <VideoPlayer {...video} />;\n } else {\n return <Picture className={style.image} src={image} />;\n }\n};\n\nPreview.propTypes = {\n image: Picture.propTypes.src,\n video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n image: Preview.propTypes.image,\n video: Preview.propTypes.video,\n lastUpdated: PropTypes.string\n };\n\n static contextTypes = {\n translate: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.state = {\n fullDisplay: false,\n scrollHeightShowMore: 0\n };\n this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n this.setHandle = this.setHandle.bind(this);\n }\n\n handleToggleDisplay() {\n this.setState(prevState => ({\n fullDisplay: !prevState.fullDisplay\n }));\n }\n\n setHandle() {\n const el = document.getElementById('discipline-summary');\n this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n }\n\n render() {\n const {image, title, description, video, lastUpdated} = this.props;\n const {fullDisplay, scrollHeightShowMore} = this.state;\n const {translate} = this.context;\n const maxHeightCourseInfos = 210;\n const hasMediaContent = image || video;\n const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n return (\n <div data-name=\"disciplineHeader\" className={style.wrapper}>\n {hasMediaContent ? (\n <div className={style.imgWrapper} ref={this.setHandle}>\n <Preview image={image} video={video} />\n </div>\n ) : null}\n <div className={style.courseWrapper}>\n <div\n id=\"discipline-summary\"\n className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n ref={this.setHandle}\n >\n <div\n data-name=\"title\"\n className={classnames(style.title, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n <div\n className={style.innerHTML}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: description}}\n />\n </div>\n <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n {toggleLabel}\n </div>\n {lastUpdated ? (\n <div\n className={classnames(\n style.lastUpdatedWrapper,\n shortCourseText ? style.lastUpdatedWrapperShort : null\n )}\n >\n <SyncIcon className={style.syncIcon} />\n <div\n className={classnames(style.lastUpdatedText, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: lastUpdated}}\n />\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}
|
|
@@ -39,19 +39,19 @@ const DisciplineAssociatedSkills = (props, context) => {
|
|
|
39
39
|
} = props;
|
|
40
40
|
const AnchorElement = (0, _react.useCallback)(skill => /*#__PURE__*/_react.default.createElement("div", {
|
|
41
41
|
className: _style.default.chipFocusedContent
|
|
42
|
-
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
42
|
+
}, skill.focused ? /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
43
43
|
iconName: "bullseye-arrow",
|
|
44
44
|
backgroundColor: "#DDD1FF",
|
|
45
45
|
size: {
|
|
46
46
|
faSize: 12,
|
|
47
47
|
wrapperSize: 12
|
|
48
48
|
}
|
|
49
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
49
|
+
}) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
50
50
|
className: _style.default.chipFocusedContentText
|
|
51
|
-
}, skill)), []);
|
|
51
|
+
}, skill.locale)), []);
|
|
52
52
|
const TooltipContentElement = (0, _react.useCallback)(skill => /*#__PURE__*/_react.default.createElement("div", {
|
|
53
53
|
className: _style.default.tooltipContentWrapper
|
|
54
|
-
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('skill_focused_chip_tooltip'))), /*#__PURE__*/_react.default.createElement("div", null, skill)), []);
|
|
54
|
+
}, skill.focused ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("b", null, translate('skill_focused_chip_tooltip'))) : null, /*#__PURE__*/_react.default.createElement("div", null, skill.locale)), []);
|
|
55
55
|
return !(0, _isEmpty2.default)(skills) ? /*#__PURE__*/_react.default.createElement("div", {
|
|
56
56
|
"data-name": "discipline-associated-skills",
|
|
57
57
|
className: _style.default.associatedSkillsWrapper
|
|
@@ -65,26 +65,26 @@ const DisciplineAssociatedSkills = (props, context) => {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
function handleAnchorElement() {
|
|
68
|
-
return AnchorElement(skill
|
|
68
|
+
return AnchorElement(skill);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
function handleTooltipContentElement() {
|
|
72
|
-
return TooltipContentElement(skill
|
|
72
|
+
return TooltipContentElement(skill);
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
76
76
|
key: (0, _uniqueId2.default)(),
|
|
77
77
|
className: (0, _classnames.default)(_style.default.chipWrapper, skill.focused && _style.default.chipWrapperFocused),
|
|
78
78
|
onClick: handleSkillClick
|
|
79
|
-
},
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
80
80
|
AnchorElement: handleAnchorElement,
|
|
81
81
|
fontSize: 12,
|
|
82
82
|
delayHide: 0,
|
|
83
83
|
iconContainerClassName: _style.default.infoIconTooltip,
|
|
84
|
-
tooltipClassName: _style.default.tooltip,
|
|
84
|
+
tooltipClassName: skill.focused ? _style.default.tooltipSkillFocused : _style.default.tooltip,
|
|
85
85
|
TooltipContent: handleTooltipContentElement,
|
|
86
86
|
closeToolTipInformationTextAriaLabel: translate('close_tooltip_information')
|
|
87
|
-
})
|
|
87
|
+
}));
|
|
88
88
|
})))) : null;
|
|
89
89
|
};
|
|
90
90
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","useCallback","skill","style","chipFocusedContent","faSize","wrapperSize","chipFocusedContentText","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","
|
|
1
|
+
{"version":3,"file":"index.js","names":["DisciplineAssociatedSkills","props","context","translate","skills","onSkillClick","AnchorElement","useCallback","skill","style","chipFocusedContent","focused","faSize","wrapperSize","chipFocusedContentText","locale","TooltipContentElement","tooltipContentWrapper","associatedSkillsWrapper","chipsWrapper","map","handleSkillClick","ref","handleAnchorElement","handleTooltipContentElement","classnames","chipWrapper","chipWrapperFocused","infoIconTooltip","tooltipSkillFocused","tooltip","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","string","bool","func"],"sources":["../../../src/molecule/discipline-associated-skills/index.js"],"sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {isEmpty, uniqueId} from 'lodash/fp';\nimport Icon from '../../atom/icon';\nimport ToolTip from '../../atom/tooltip';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport style from './style.css';\n\nconst DisciplineAssociatedSkills = (props, context) => {\n const {translate} = context;\n\n const {skills = [], onSkillClick} = props;\n\n const AnchorElement = useCallback(\n skill => (\n <div className={style.chipFocusedContent}>\n {skill.focused ? (\n <Icon\n iconName=\"bullseye-arrow\"\n backgroundColor=\"#DDD1FF\"\n size={{\n faSize: 12,\n wrapperSize: 12\n }}\n />\n ) : null}\n <div className={style.chipFocusedContentText}>{skill.locale}</div>\n </div>\n ),\n []\n );\n\n const TooltipContentElement = useCallback(\n skill => (\n <div className={style.tooltipContentWrapper}>\n {skill.focused ? (\n <div>\n <b>{translate('skill_focused_chip_tooltip')}</b>\n </div>\n ) : null}\n <div>{skill.locale}</div>\n </div>\n ),\n []\n );\n\n return !isEmpty(skills) ? (\n <div data-name=\"discipline-associated-skills\" className={style.associatedSkillsWrapper}>\n <CatalogSection title={translate('associated_skills')}>\n <div className={style.chipsWrapper}>\n {skills.map(skill => {\n function handleSkillClick() {\n return onSkillClick(skill.ref);\n }\n function handleAnchorElement() {\n return AnchorElement(skill);\n }\n function handleTooltipContentElement() {\n return TooltipContentElement(skill);\n }\n return (\n <div\n key={uniqueId()}\n className={classnames(style.chipWrapper, skill.focused && style.chipWrapperFocused)}\n onClick={handleSkillClick}\n >\n <ToolTip\n AnchorElement={handleAnchorElement}\n fontSize={12}\n delayHide={0}\n iconContainerClassName={style.infoIconTooltip}\n tooltipClassName={skill.focused ? style.tooltipSkillFocused : style.tooltip}\n TooltipContent={handleTooltipContentElement}\n closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n />\n </div>\n );\n })}\n </div>\n </CatalogSection>\n </div>\n ) : null;\n};\n\nDisciplineAssociatedSkills.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nDisciplineAssociatedSkills.propTypes = {\n skills: PropTypes.arrayOf(\n PropTypes.shape({\n ref: PropTypes.string,\n locale: PropTypes.string,\n focused: PropTypes.bool\n })\n ),\n onSkillClick: PropTypes.func\n};\n\nexport default DisciplineAssociatedSkills;\n"],"mappings":"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"}
|
|
@@ -55,13 +55,14 @@
|
|
|
55
55
|
background-color: transparent;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
.tooltip
|
|
58
|
+
.tooltip,
|
|
59
|
+
.tooltipSkillFocused {
|
|
59
60
|
width: fit-content;
|
|
60
61
|
color: #FFF;
|
|
61
62
|
font-size: 12px;
|
|
62
63
|
font-style: normal;
|
|
63
64
|
line-height: 16px;
|
|
64
|
-
top: -
|
|
65
|
+
top: -48px;
|
|
65
66
|
|
|
66
67
|
p {
|
|
67
68
|
padding: 8px 8px;
|
|
@@ -69,6 +70,10 @@
|
|
|
69
70
|
}
|
|
70
71
|
}
|
|
71
72
|
|
|
73
|
+
.tooltipSkillFocused {
|
|
74
|
+
top: -64px;
|
|
75
|
+
}
|
|
76
|
+
|
|
72
77
|
.tooltipContentWrapper {
|
|
73
78
|
padding: 8px 12px;
|
|
74
79
|
text-align: left;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/discipline-header/index.js"],"names":[],"mappings":";AA4BA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAME;IAEF;;MAEE;IAEF,wBAQC;IANC;;;MAGC;IAKH,4BAIC;IAED,kBAGC;IAED,sBAwDC;CACF"}
|
|
@@ -70,7 +70,8 @@ class DisciplineHeader extends _react.default.Component {
|
|
|
70
70
|
}));
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
setHandle(
|
|
73
|
+
setHandle() {
|
|
74
|
+
const el = document.getElementById('discipline-summary');
|
|
74
75
|
this.setState({
|
|
75
76
|
scrollHeightShowMore: (0, _getOr.default)(0, 'scrollHeight', el)
|
|
76
77
|
});
|
|
@@ -100,13 +101,15 @@ class DisciplineHeader extends _react.default.Component {
|
|
|
100
101
|
"data-name": "disciplineHeader",
|
|
101
102
|
className: _style.default.wrapper
|
|
102
103
|
}, hasMediaContent ? /*#__PURE__*/_react.default.createElement("div", {
|
|
103
|
-
className: _style.default.imgWrapper
|
|
104
|
+
className: _style.default.imgWrapper,
|
|
105
|
+
ref: this.setHandle
|
|
104
106
|
}, /*#__PURE__*/_react.default.createElement(Preview, {
|
|
105
107
|
image: image,
|
|
106
108
|
video: video
|
|
107
109
|
})) : null, /*#__PURE__*/_react.default.createElement("div", {
|
|
108
110
|
className: _style.default.courseWrapper
|
|
109
111
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
112
|
+
id: "discipline-summary",
|
|
110
113
|
className: fullDisplay ? _style.default.courseTextWrapperFull : _style.default.courseTextWrapperShort,
|
|
111
114
|
ref: this.setHandle
|
|
112
115
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Preview","image","video","mimeType","get","id","jwpOptions","style","propTypes","Picture","src","PropTypes","shape","VideoPlayer","DisciplineHeader","React","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","getOr","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","classnames","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n const mimeType = get('mimeType', video);\n const id = get('id', video);\n const jwpOptions = get('jwpOptions', video);\n if (id) {\n return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n } else if (jwpOptions) {\n return <VideoPlayer {...video} />;\n } else {\n return <Picture className={style.image} src={image} />;\n }\n};\n\nPreview.propTypes = {\n image: Picture.propTypes.src,\n video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n image: Preview.propTypes.image,\n video: Preview.propTypes.video,\n lastUpdated: PropTypes.string\n };\n\n static contextTypes = {\n translate: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.state = {\n fullDisplay: false,\n scrollHeightShowMore: 0\n };\n this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n this.setHandle = this.setHandle.bind(this);\n }\n\n handleToggleDisplay() {\n this.setState(prevState => ({\n fullDisplay: !prevState.fullDisplay\n }));\n }\n\n setHandle(
|
|
1
|
+
{"version":3,"file":"index.js","names":["Preview","image","video","mimeType","get","id","jwpOptions","style","propTypes","Picture","src","PropTypes","shape","VideoPlayer","DisciplineHeader","React","Component","constructor","props","state","fullDisplay","scrollHeightShowMore","handleToggleDisplay","bind","setHandle","setState","prevState","el","document","getElementById","getOr","render","title","description","lastUpdated","translate","context","maxHeightCourseInfos","hasMediaContent","toggleLabel","shortCourseText","courseSeeMoreButtonStyle","showMoreHidden","showMore","wrapper","imgWrapper","courseWrapper","courseTextWrapperFull","courseTextWrapperShort","classnames","innerHTML","__html","lastUpdatedWrapper","lastUpdatedWrapperShort","syncIcon","lastUpdatedText","contextTypes","func","string"],"sources":["../../../src/molecule/discipline-header/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport classnames from 'classnames';\nimport {NovaSolidSynchronizeSynchronize3 as SyncIcon} from '@coorpacademy/nova-icons';\nimport VideoPlayer from '../video-player';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst Preview = ({image, video}) => {\n const mimeType = get('mimeType', video);\n const id = get('id', video);\n const jwpOptions = get('jwpOptions', video);\n if (id) {\n return <VideoPlayer mimeType={mimeType} id={id} width=\"380px\" height=\"250px\" />;\n } else if (jwpOptions) {\n return <VideoPlayer {...video} />;\n } else {\n return <Picture className={style.image} src={image} />;\n }\n};\n\nPreview.propTypes = {\n image: Picture.propTypes.src,\n video: PropTypes.shape(VideoPlayer.propTypes)\n};\n\nclass DisciplineHeader extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n image: Preview.propTypes.image,\n video: Preview.propTypes.video,\n lastUpdated: PropTypes.string\n };\n\n static contextTypes = {\n translate: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.state = {\n fullDisplay: false,\n scrollHeightShowMore: 0\n };\n this.handleToggleDisplay = this.handleToggleDisplay.bind(this);\n this.setHandle = this.setHandle.bind(this);\n }\n\n handleToggleDisplay() {\n this.setState(prevState => ({\n fullDisplay: !prevState.fullDisplay\n }));\n }\n\n setHandle() {\n const el = document.getElementById('discipline-summary');\n this.setState({scrollHeightShowMore: getOr(0, 'scrollHeight', el)});\n }\n\n render() {\n const {image, title, description, video, lastUpdated} = this.props;\n const {fullDisplay, scrollHeightShowMore} = this.state;\n const {translate} = this.context;\n const maxHeightCourseInfos = 210;\n const hasMediaContent = image || video;\n const toggleLabel = fullDisplay ? translate('See less') : translate('Show more');\n const shortCourseText = scrollHeightShowMore <= maxHeightCourseInfos;\n const courseSeeMoreButtonStyle = shortCourseText ? style.showMoreHidden : style.showMore;\n\n return (\n <div data-name=\"disciplineHeader\" className={style.wrapper}>\n {hasMediaContent ? (\n <div className={style.imgWrapper} ref={this.setHandle}>\n <Preview image={image} video={video} />\n </div>\n ) : null}\n <div className={style.courseWrapper}>\n <div\n id=\"discipline-summary\"\n className={fullDisplay ? style.courseTextWrapperFull : style.courseTextWrapperShort}\n ref={this.setHandle}\n >\n <div\n data-name=\"title\"\n className={classnames(style.title, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n <div\n className={style.innerHTML}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: description}}\n />\n </div>\n <div className={courseSeeMoreButtonStyle} onClick={this.handleToggleDisplay}>\n {toggleLabel}\n </div>\n {lastUpdated ? (\n <div\n className={classnames(\n style.lastUpdatedWrapper,\n shortCourseText ? style.lastUpdatedWrapperShort : null\n )}\n >\n <SyncIcon className={style.syncIcon} />\n <div\n className={classnames(style.lastUpdatedText, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: lastUpdated}}\n />\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n}\n\nexport default DisciplineHeader;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.32.
|
|
3
|
+
"version": "11.32.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -177,5 +177,5 @@
|
|
|
177
177
|
"last 2 versions",
|
|
178
178
|
"IE 11"
|
|
179
179
|
],
|
|
180
|
-
"gitHead": "
|
|
180
|
+
"gitHead": "6ab0254581f7381d7f561fefc8bb233bf223369c"
|
|
181
181
|
}
|