@coorpacademy/components 11.38.0 → 11.38.1-alpha.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/card/favorite.d.ts.map +1 -1
- package/es/molecule/card/favorite.js +5 -0
- package/es/molecule/card/favorite.js.map +1 -1
- package/es/molecule/card/index.d.ts.map +1 -1
- package/es/molecule/card/index.js +29 -11
- package/es/molecule/card/index.js.map +1 -1
- package/es/molecule/card/style.css +15 -13
- package/es/molecule/card-content/index.d.ts.map +1 -1
- package/es/molecule/card-content/index.js +77 -36
- package/es/molecule/card-content/index.js.map +1 -1
- package/es/molecule/card-content/style.css +33 -24
- package/es/molecule/external-content-button/style.css +1 -0
- package/es/util/external-content.d.ts +38 -4
- package/es/util/external-content.d.ts.map +1 -1
- package/es/util/external-content.js +33 -4
- package/es/util/external-content.js.map +1 -1
- package/es/variables/colors.d.ts +5 -0
- package/es/variables/colors.d.ts.map +1 -1
- package/es/variables/colors.js +6 -1
- package/es/variables/colors.js.map +1 -1
- package/lib/molecule/card/favorite.d.ts.map +1 -1
- package/lib/molecule/card/favorite.js +5 -0
- package/lib/molecule/card/favorite.js.map +1 -1
- package/lib/molecule/card/index.d.ts.map +1 -1
- package/lib/molecule/card/index.js +28 -10
- package/lib/molecule/card/index.js.map +1 -1
- package/lib/molecule/card/style.css +15 -13
- package/lib/molecule/card-content/index.d.ts.map +1 -1
- package/lib/molecule/card-content/index.js +75 -34
- package/lib/molecule/card-content/index.js.map +1 -1
- package/lib/molecule/card-content/style.css +33 -24
- package/lib/molecule/external-content-button/style.css +1 -0
- package/lib/util/external-content.d.ts +38 -4
- package/lib/util/external-content.d.ts.map +1 -1
- package/lib/util/external-content.js +34 -5
- package/lib/util/external-content.js.map +1 -1
- package/lib/variables/colors.d.ts +5 -0
- package/lib/variables/colors.d.ts.map +1 -1
- package/lib/variables/colors.js +6 -1
- package/lib/variables/colors.js.map +1 -1
- package/locales/en/global.json +4 -4
- package/package.json +2 -2
- package/locales/.mtslconfig.json +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAcA;;;;;;;;
|
|
1
|
+
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/favorite.js"],"names":[],"mappings":";AAcA;;;;;;;;oCA6IC"}
|
|
@@ -33,11 +33,16 @@ const Favorite = ({
|
|
|
33
33
|
const buttonRef = useRef(null);
|
|
34
34
|
const allowToolTip = useMemo(() => !_isEmpty(removeFavoriteToolTip) && !_isEmpty(addFavoriteToolTip), [addFavoriteToolTip, removeFavoriteToolTip]);
|
|
35
35
|
|
|
36
|
+
// eslint-disable-next-line no-console
|
|
37
|
+
console.log('🚀 ~ favorite.js:49 ~ allowToolTip:', allowToolTip);
|
|
38
|
+
|
|
36
39
|
// to be replaced by useId when React17 is bumped to React18
|
|
37
40
|
const [favoriteButtonAnchorId] = useState(allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined);
|
|
38
41
|
const toolTipContent = useMemo(
|
|
39
42
|
// eslint-disable-next-line no-nested-ternary
|
|
40
43
|
() => allowToolTip ? favorite ? removeFavoriteToolTip : addFavoriteToolTip : null, [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]);
|
|
44
|
+
// eslint-disable-next-line no-console
|
|
45
|
+
console.log('🚀 ~ favorite.js:63 ~ toolTipContent:', toolTipContent);
|
|
41
46
|
const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);
|
|
42
47
|
const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
|
|
43
48
|
const handleMouseOver = useCallback(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"favorite.js","names":["React","useCallback","useMemo","useRef","useState","PropTypes","classnames","v5","uuidV5","NovaCompositionNavigationMore","MoreIcon","NovaCompositionCoorpacademyCheck","CheckIcon","Provider","GetSkinFromContext","GetTranslateFromContext","ToolTip","toggleStateOnKeyPress","Button","style","Favorite","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","onFavoriteClick","_noop","disabled","legacyContext","skin","translate","handleFavoriteClick","e","stopPropagation","preventDefault","primaryColor","_get","darkColor","brandColor","buttonRef","allowToolTip","_isEmpty","favoriteButtonAnchorId","URL","undefined","toolTipContent","mouseLeaveTimer","setMouseLeaveTimer","toolTipIsVisible","setToolTipIsVisible","handleMouseOver","clearTimeout","_has","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","iconWrapperClassName","selected","icon","createElement","checkIcon","color","width","height","removeFromFavorite","moreIcon","addToFavorite","favoriteWrapper","type","buttonContentClassName","onClick","onKeyDown","onMouseLeave","onMouseOver","tabIndex","useButtonTag","useWrapper","fontSize","anchorId","TooltipContent","closeToolTipInformationTextAriaLabel","stickyOnKeyboardNavigation","propTypes","process","env","NODE_ENV","string","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/molecule/card/favorite.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport {get, has, isEmpty, noop} from 'lodash/fp';\nimport {\n NovaCompositionNavigationMore as MoreIcon,\n NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip, {toggleStateOnKeyPress} from '../../atom/tooltip';\nimport Button from '../../atom/button';\nimport style from './favorite.css';\n\nconst Favorite = (\n {\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n className,\n 'aria-label': ariaLabel = {},\n onFavoriteClick = noop,\n disabled\n },\n legacyContext\n) => {\n const skin = GetSkinFromContext(legacyContext);\n const translate = GetTranslateFromContext(legacyContext);\n const handleFavoriteClick = useCallback(\n e => {\n e.stopPropagation();\n e.preventDefault();\n if (!disabled) onFavoriteClick(e);\n },\n [disabled, onFavoriteClick]\n );\n\n const primaryColor = get('common.primary', skin);\n const darkColor = get('common.dark', skin);\n const brandColor = get('common.brand', skin);\n\n const buttonRef = useRef(null);\n\n const allowToolTip = useMemo(\n () => !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip),\n [addFavoriteToolTip, removeFavoriteToolTip]\n );\n\n // to be replaced by useId when React17 is bumped to React18\n const [favoriteButtonAnchorId] = useState(\n allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n );\n\n const toolTipContent = useMemo(\n // eslint-disable-next-line no-nested-ternary\n () => (allowToolTip ? (favorite ? removeFavoriteToolTip : addFavoriteToolTip) : null),\n [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]\n );\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(\n setTimeout(() => {\n setToolTipIsVisible(false);\n // @ts-expect-error (error: blur does not exists on type never)\n /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n }, 500)\n );\n }, []);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n },\n [toolTipIsVisible]\n );\n\n const iconWrapperClassName = useMemo(\n () => classnames(style.favorite, className, favorite && style.selected),\n [className, favorite]\n );\n const icon = useMemo(\n () =>\n favorite ? (\n <CheckIcon\n // eslint-disable-next-line css-modules/no-undef-class\n className={style.checkIcon}\n style={{color: brandColor}}\n width={13}\n height={13}\n data-testid=\"favorite-check-icon\"\n aria-label={ariaLabel.removeFromFavorite}\n />\n ) : (\n <MoreIcon\n className={style.moreIcon}\n style={{color: darkColor}}\n width={13}\n height={13}\n data-testid=\"favorite-add-icon\"\n aria-label={ariaLabel.addToFavorite}\n />\n ),\n [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]\n );\n\n return (\n <div className={style.favoriteWrapper} data-testid=\"favorite-wrapper\">\n <Button\n buttonRef={buttonRef}\n type=\"button\"\n data-for={favoriteButtonAnchorId}\n data-tooltip-place=\"left\"\n data-tip={allowToolTip}\n data-name=\"favorite\"\n data-testid=\"favorite-button\"\n aria-label={ariaLabel.favorite}\n buttonContentClassName={iconWrapperClassName}\n onClick={handleFavoriteClick}\n style={{\n color: primaryColor\n }}\n onKeyDown={handleKeyPress}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n tabIndex={0}\n useButtonTag\n useWrapper={false}\n >\n {icon}\n </Button>\n <ToolTip\n fontSize={12}\n anchorId={favoriteButtonAnchorId}\n toolTipIsVisible={toolTipIsVisible}\n TooltipContent={toolTipContent}\n closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n stickyOnKeyboardNavigation\n />\n </div>\n );\n};\n\nFavorite.propTypes = {\n className: PropTypes.string,\n favorite: PropTypes.bool,\n disabled: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onFavoriteClick: PropTypes.func,\n 'aria-label': PropTypes.shape({\n favorite: PropTypes.string,\n addToFavorite: PropTypes.string,\n removeFromFavorite: PropTypes.string\n })\n};\n\nFavorite.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default Favorite;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"favorite.js","names":["React","useCallback","useMemo","useRef","useState","PropTypes","classnames","v5","uuidV5","NovaCompositionNavigationMore","MoreIcon","NovaCompositionCoorpacademyCheck","CheckIcon","Provider","GetSkinFromContext","GetTranslateFromContext","ToolTip","toggleStateOnKeyPress","Button","style","Favorite","favorite","addFavoriteToolTip","removeFavoriteToolTip","className","ariaLabel","onFavoriteClick","_noop","disabled","legacyContext","skin","translate","handleFavoriteClick","e","stopPropagation","preventDefault","primaryColor","_get","darkColor","brandColor","buttonRef","allowToolTip","_isEmpty","console","log","favoriteButtonAnchorId","URL","undefined","toolTipContent","mouseLeaveTimer","setMouseLeaveTimer","toolTipIsVisible","setToolTipIsVisible","handleMouseOver","clearTimeout","_has","current","focus","handleMouseLeave","setTimeout","blur","handleKeyPress","event","iconWrapperClassName","selected","icon","createElement","checkIcon","color","width","height","removeFromFavorite","moreIcon","addToFavorite","favoriteWrapper","type","buttonContentClassName","onClick","onKeyDown","onMouseLeave","onMouseOver","tabIndex","useButtonTag","useWrapper","fontSize","anchorId","TooltipContent","closeToolTipInformationTextAriaLabel","stickyOnKeyboardNavigation","propTypes","process","env","NODE_ENV","string","bool","func","shape","contextTypes","childContextTypes"],"sources":["../../../src/molecule/card/favorite.js"],"sourcesContent":["import React, {useCallback, useMemo, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {v5 as uuidV5} from 'uuid';\nimport {get, has, isEmpty, noop} from 'lodash/fp';\nimport {\n NovaCompositionNavigationMore as MoreIcon,\n NovaCompositionCoorpacademyCheck as CheckIcon\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext, GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip, {toggleStateOnKeyPress} from '../../atom/tooltip';\nimport Button from '../../atom/button';\nimport style from './favorite.css';\n\nconst Favorite = (\n {\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n className,\n 'aria-label': ariaLabel = {},\n onFavoriteClick = noop,\n disabled\n },\n legacyContext\n) => {\n const skin = GetSkinFromContext(legacyContext);\n const translate = GetTranslateFromContext(legacyContext);\n const handleFavoriteClick = useCallback(\n e => {\n e.stopPropagation();\n e.preventDefault();\n if (!disabled) onFavoriteClick(e);\n },\n [disabled, onFavoriteClick]\n );\n\n const primaryColor = get('common.primary', skin);\n const darkColor = get('common.dark', skin);\n const brandColor = get('common.brand', skin);\n\n const buttonRef = useRef(null);\n\n const allowToolTip = useMemo(\n () => !isEmpty(removeFavoriteToolTip) && !isEmpty(addFavoriteToolTip),\n [addFavoriteToolTip, removeFavoriteToolTip]\n );\n\n // eslint-disable-next-line no-console\n console.log('🚀 ~ favorite.js:49 ~ allowToolTip:', allowToolTip);\n\n // to be replaced by useId when React17 is bumped to React18\n const [favoriteButtonAnchorId] = useState(\n allowToolTip ? uuidV5('engaged-battle-', uuidV5.URL) : undefined\n );\n\n const toolTipContent = useMemo(\n // eslint-disable-next-line no-nested-ternary\n () => (allowToolTip ? (favorite ? removeFavoriteToolTip : addFavoriteToolTip) : null),\n [addFavoriteToolTip, favorite, removeFavoriteToolTip, allowToolTip]\n );\n // eslint-disable-next-line no-console\n console.log('🚀 ~ favorite.js:63 ~ toolTipContent:', toolTipContent);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n /* istanbul ignore next */ has(['current', 'focus'], buttonRef) && buttonRef.current.focus();\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(\n setTimeout(() => {\n setToolTipIsVisible(false);\n // @ts-expect-error (error: blur does not exists on type never)\n /* istanbul ignore next */ has(['current', 'blur'], buttonRef) && buttonRef.current.blur();\n }, 500)\n );\n }, []);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible, buttonRef)(event);\n },\n [toolTipIsVisible]\n );\n\n const iconWrapperClassName = useMemo(\n () => classnames(style.favorite, className, favorite && style.selected),\n [className, favorite]\n );\n const icon = useMemo(\n () =>\n favorite ? (\n <CheckIcon\n // eslint-disable-next-line css-modules/no-undef-class\n className={style.checkIcon}\n style={{color: brandColor}}\n width={13}\n height={13}\n data-testid=\"favorite-check-icon\"\n aria-label={ariaLabel.removeFromFavorite}\n />\n ) : (\n <MoreIcon\n className={style.moreIcon}\n style={{color: darkColor}}\n width={13}\n height={13}\n data-testid=\"favorite-add-icon\"\n aria-label={ariaLabel.addToFavorite}\n />\n ),\n [ariaLabel.addToFavorite, ariaLabel.removeFromFavorite, brandColor, darkColor, favorite]\n );\n\n return (\n <div className={style.favoriteWrapper} data-testid=\"favorite-wrapper\">\n <Button\n buttonRef={buttonRef}\n type=\"button\"\n data-for={favoriteButtonAnchorId}\n data-tooltip-place=\"left\"\n data-tip={allowToolTip}\n data-name=\"favorite\"\n data-testid=\"favorite-button\"\n aria-label={ariaLabel.favorite}\n buttonContentClassName={iconWrapperClassName}\n onClick={handleFavoriteClick}\n style={{\n color: primaryColor\n }}\n onKeyDown={handleKeyPress}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n tabIndex={0}\n useButtonTag\n useWrapper={false}\n >\n {icon}\n </Button>\n <ToolTip\n fontSize={12}\n anchorId={favoriteButtonAnchorId}\n toolTipIsVisible={toolTipIsVisible}\n TooltipContent={toolTipContent}\n closeToolTipInformationTextAriaLabel={translate('close_tooltip_information')}\n stickyOnKeyboardNavigation\n />\n </div>\n );\n};\n\nFavorite.propTypes = {\n className: PropTypes.string,\n favorite: PropTypes.bool,\n disabled: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onFavoriteClick: PropTypes.func,\n 'aria-label': PropTypes.shape({\n favorite: PropTypes.string,\n addToFavorite: PropTypes.string,\n removeFromFavorite: PropTypes.string\n })\n};\n\nFavorite.contextTypes = {\n skin: Provider.childContextTypes.skin,\n translate: Provider.childContextTypes.translate\n};\n\nexport default Favorite;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/index.js"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/card/index.js"],"names":[],"mappings":";;;;;AA8QA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BE;;;AAnKF,uDA+HG"}
|
|
@@ -8,9 +8,11 @@ import React, { useMemo, memo } from 'react';
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import classnames from 'classnames';
|
|
10
10
|
import { NovaCompositionCoorpacademyPadlock as LockIcon, NovaCompositionCoorpacademyPictures as PicturesIcon } from '@coorpacademy/nova-icons';
|
|
11
|
-
import { isExternalContent, EXTERNAL_CONTENT_ICONS } from '../../util/external-content';
|
|
11
|
+
import { isExternalContent, ICONS_TYPES, EXTERNAL_CONTENT_ICONS } from '../../util/external-content';
|
|
12
12
|
import Provider from '../../atom/provider';
|
|
13
13
|
import CardContentInfo, { MODES } from '../card-content';
|
|
14
|
+
import FaIcon from '../../atom/icon';
|
|
15
|
+
import { COLORS } from '../../variables/colors';
|
|
14
16
|
import Customer from './customer';
|
|
15
17
|
import Favorite from './favorite';
|
|
16
18
|
import Selectable from './selectable';
|
|
@@ -20,6 +22,7 @@ export const THEMES = {
|
|
|
20
22
|
default: null,
|
|
21
23
|
coorpmanager: style.coorpmanager
|
|
22
24
|
};
|
|
25
|
+
const ICON_SIZE = '28px';
|
|
23
26
|
const CardBackground = ({
|
|
24
27
|
type,
|
|
25
28
|
image,
|
|
@@ -31,22 +34,35 @@ const CardBackground = ({
|
|
|
31
34
|
const externalContent = isExternalContent(type);
|
|
32
35
|
const primaryColor = _get('common.primary', skin);
|
|
33
36
|
const whiteColor = _get('common.white', skin);
|
|
34
|
-
if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
+
if (externalContent && EXTERNAL_CONTENT_ICONS[type] || type === 'chapter') {
|
|
38
|
+
const {
|
|
39
|
+
iconName,
|
|
40
|
+
iconColor
|
|
41
|
+
} = ICONS_TYPES[type];
|
|
37
42
|
const backgroundIcon = /*#__PURE__*/React.createElement("div", {
|
|
38
|
-
className: style.externalIconCircleWrapper
|
|
39
|
-
}, /*#__PURE__*/React.createElement(
|
|
40
|
-
|
|
43
|
+
className: classnames(style.externalIconCircleWrapper, style.externalIconCircleWithImageWrapper)
|
|
44
|
+
}, /*#__PURE__*/React.createElement(FaIcon, {
|
|
45
|
+
iconName: iconName,
|
|
46
|
+
customStyle: {
|
|
47
|
+
color: COLORS.white,
|
|
48
|
+
height: ICON_SIZE,
|
|
49
|
+
width: ICON_SIZE
|
|
50
|
+
}
|
|
41
51
|
}));
|
|
42
52
|
if (image) {
|
|
43
53
|
const _backgroundIcon = /*#__PURE__*/React.createElement("div", {
|
|
44
54
|
className: classnames(style.externalIconCircleWrapper, style.externalIconCircleWithImageWrapper),
|
|
45
55
|
style: {
|
|
46
56
|
backgroundColor: iconColor
|
|
57
|
+
},
|
|
58
|
+
"data-testid": "card-background-image"
|
|
59
|
+
}, /*#__PURE__*/React.createElement(FaIcon, {
|
|
60
|
+
iconName: iconName,
|
|
61
|
+
customStyle: {
|
|
62
|
+
color: COLORS.white,
|
|
63
|
+
height: ICON_SIZE,
|
|
64
|
+
width: ICON_SIZE
|
|
47
65
|
}
|
|
48
|
-
}, /*#__PURE__*/React.createElement(IconType, {
|
|
49
|
-
className: style.externalIconWithImage
|
|
50
66
|
}));
|
|
51
67
|
return /*#__PURE__*/React.createElement("div", {
|
|
52
68
|
className: style.imageWrapper
|
|
@@ -78,7 +94,7 @@ const CardBackground = ({
|
|
|
78
94
|
}
|
|
79
95
|
}) : null;
|
|
80
96
|
return /*#__PURE__*/React.createElement("div", {
|
|
81
|
-
className:
|
|
97
|
+
className: style.imageWrapper
|
|
82
98
|
}, /*#__PURE__*/React.createElement("div", {
|
|
83
99
|
"data-name": "cover",
|
|
84
100
|
"aria-label": ariaLabel,
|
|
@@ -135,7 +151,7 @@ const Card = /*#__PURE__*/memo(function Card(props, context) {
|
|
|
135
151
|
} = props;
|
|
136
152
|
const empty = _isEmpty(_pick(['title', 'type', 'author', 'image'], props));
|
|
137
153
|
const primaryColor = _get('common.primary', skin);
|
|
138
|
-
const cardStyle = classnames(THEMES[theme],
|
|
154
|
+
const cardStyle = classnames(THEMES[theme], style.course, title ? null : style.lazy, style.grid, empty ? style.empty : null);
|
|
139
155
|
const disabled = hidden && (!isSelected || _isUndefined(isSelected));
|
|
140
156
|
const handleClick = useMemo(() => e => onClick(e), [onClick]);
|
|
141
157
|
const lock = disabled ? /*#__PURE__*/React.createElement("div", {
|
|
@@ -164,6 +180,8 @@ const Card = /*#__PURE__*/memo(function Card(props, context) {
|
|
|
164
180
|
return contentType;
|
|
165
181
|
}
|
|
166
182
|
};
|
|
183
|
+
// eslint-disable-next-line no-console
|
|
184
|
+
console.log('type of card', type, 'favorite', favorite);
|
|
167
185
|
return /*#__PURE__*/React.createElement("div", {
|
|
168
186
|
className: cardStyle,
|
|
169
187
|
"data-name": "card",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","memo","PropTypes","classnames","NovaCompositionCoorpacademyPadlock","LockIcon","NovaCompositionCoorpacademyPictures","PicturesIcon","isExternalContent","EXTERNAL_CONTENT_ICONS","Provider","CardContentInfo","MODES","Customer","Favorite","Selectable","Notification","style","THEMES","default","coorpmanager","CardBackground","type","image","empty","ariaLabel","skin","externalContent","primaryColor","_get","whiteColor","IconType","icon","iconColor","color","backgroundIcon","createElement","className","externalIconCircleWrapper","externalIcon","_backgroundIcon","externalIconCircleWithImageWrapper","backgroundColor","externalIconWithImage","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","chapterImageWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","Card","props","context","badge","adaptiv","disabled","hidden","title","author","customer","certifiedAuthor","progress","favorite","addFavoriteToolTip","removeFavoriteToolTip","onClick","onFavoriteClick","isSelected","notification","badgeCategory","badgeLabel","theme","disabledContent","cardArialabel","backgroundAriaLabel","favoriteAriaLabel","selectableAriaLabel","customerAriaLabel","badgeAriaLabel","disabledArialabel","cardContentLabelAriaLabel","_isEmpty","_pick","cardStyle","chapter","course","lazy","grid","_isUndefined","handleClick","e","lock","lockContent","lockIcon","height","dangerouslySetInnerHTML","__html","inlineBadgeStyle","getType","contentType","_extends","mode","CARD","lockWrapper","cardPropTypes","shape","number","func","oneOf","_keys"],"sources":["../../../src/molecule/card/index.js"],"sourcesContent":["import React, {useMemo, memo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, isUndefined, pick, keys} from 'lodash/fp';\nimport {\n NovaCompositionCoorpacademyPadlock as LockIcon,\n NovaCompositionCoorpacademyPictures as PicturesIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport CardContentInfo, {MODES} from '../card-content';\nimport Customer from './customer';\nimport Favorite from './favorite';\nimport Selectable from './selectable';\nimport Notification from './notification';\nimport style from './style.css';\n\nexport const THEMES = {\n default: null,\n coorpmanager: style.coorpmanager\n};\n\nconst CardBackground = ({type, image, empty, 'aria-label': ariaLabel}, {skin}) => {\n const externalContent = isExternalContent(type);\n const primaryColor = get('common.primary', skin);\n const whiteColor = get('common.white', skin);\n\n if (externalContent && EXTERNAL_CONTENT_ICONS[type]) {\n const IconType = EXTERNAL_CONTENT_ICONS[type].icon;\n const iconColor = EXTERNAL_CONTENT_ICONS[type].color;\n const backgroundIcon = (\n <div className={style.externalIconCircleWrapper}>\n <IconType className={style.externalIcon} />\n </div>\n );\n\n if (image) {\n const _backgroundIcon = (\n <div\n className={classnames(\n style.externalIconCircleWrapper,\n style.externalIconCircleWithImageWrapper\n )}\n style={{\n backgroundColor: iconColor\n }}\n >\n <IconType className={style.externalIconWithImage} />\n </div>\n );\n\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor,\n backgroundImage: `url('${image}')`\n }}\n className={classnames(style.externalContentHeader, style.externalBackground)}\n >\n {_backgroundIcon}\n </div>\n </div>\n );\n }\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor\n }}\n className={style.externalContentHeader}\n >\n {backgroundIcon}\n </div>\n </div>\n );\n }\n\n const emptyIcon = empty ? (\n <PicturesIcon className={style.emptyIcon} style={{color: whiteColor}} />\n ) : null;\n return (\n <div\n className={classnames(\n style.imageWrapper,\n type === 'chapter' ? style.chapterImageWrapper : null\n )}\n >\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n className={style.image}\n style={{\n backgroundColor: primaryColor,\n backgroundImage: image ? `url('${image}')` : 'none'\n }}\n >\n {emptyIcon}\n </div>\n </div>\n );\n};\n\nCardBackground.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCardBackground.propTypes = {\n type: PropTypes.string,\n image: PropTypes.string,\n empty: PropTypes.bool,\n 'aria-label': PropTypes.string\n};\n\nconst Card = memo(function Card(props, context) {\n const {skin} = context;\n const {\n image,\n badge,\n adaptiv,\n disabled: hidden = false,\n type = 'course',\n title,\n author,\n customer,\n certifiedAuthor,\n progress,\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n onClick,\n onFavoriteClick,\n isSelected,\n notification,\n badgeCategory,\n badgeLabel,\n theme = 'default',\n disabledContent,\n 'aria-label': cardArialabel,\n 'background-aria-label': backgroundAriaLabel,\n 'favorite-aria-label': favoriteAriaLabel,\n 'selectable-aria-label': selectableAriaLabel,\n 'customer-aria-label': customerAriaLabel,\n 'badge-aria-label': badgeAriaLabel,\n 'disabled-aria-label': disabledArialabel,\n 'card-content-aria-label': cardContentLabelAriaLabel\n } = props;\n const empty = isEmpty(pick(['title', 'type', 'author', 'image'], props));\n const primaryColor = get('common.primary', skin);\n const cardStyle = classnames(\n THEMES[theme],\n type === 'chapter' ? style.chapter : style.course,\n title ? null : style.lazy,\n style.grid,\n empty ? style.empty : null\n );\n const disabled = hidden && (!isSelected || isUndefined(isSelected));\n const handleClick = useMemo(() => e => onClick(e), [onClick]);\n const lock = disabled ? (\n <div className={style.lockContent}>\n <LockIcon className={style.lockIcon} height={48} />\n <span\n aria-label={disabledArialabel}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: disabledContent}}\n />\n </div>\n ) : null;\n const inlineBadgeStyle = {color: primaryColor};\n const getType = contentType => {\n switch (contentType) {\n case 'chapter':\n return 'microlearning';\n case 'course':\n return 'learner';\n default:\n return contentType;\n }\n };\n\n return (\n <div\n className={cardStyle}\n data-name=\"card\"\n data-lock={disabled}\n data-type={getType(type)}\n disabled={disabled}\n onClick={handleClick}\n aria-label={cardArialabel}\n >\n <CardBackground type={type} image={image} empty={empty} aria-label={backgroundAriaLabel} />\n {isUndefined(isSelected) && !isUndefined(favorite) ? (\n <Favorite\n className={style.favorite}\n favorite={favorite}\n disabled={disabled}\n onFavoriteClick={onFavoriteClick}\n addFavoriteToolTip={addFavoriteToolTip}\n removeFavoriteToolTip={removeFavoriteToolTip}\n aria-label={favoriteAriaLabel}\n />\n ) : null}\n <Selectable isSelected={isSelected} hidden={hidden} aria-label={selectableAriaLabel} />\n {notification ? <Notification {...notification} /> : null}\n {customer ? (\n <Customer\n {...customer}\n theme={theme}\n type={type}\n disabled={disabled}\n aria-label={customerAriaLabel}\n />\n ) : null}\n <CardContentInfo\n mode={MODES.CARD}\n adaptiv={adaptiv}\n author={author}\n certifiedAuthor={certifiedAuthor}\n disabled={disabled}\n empty={empty}\n progress={progress}\n title={title}\n type={type}\n badgeCategory={badgeCategory}\n badgeLabel={badgeLabel}\n theme={theme}\n aria-label={cardContentLabelAriaLabel}\n />\n {badge ? (\n <div className={style.badge} style={inlineBadgeStyle} aria-label={badgeAriaLabel}>\n {badge}\n </div>\n ) : null}\n {disabled ? (\n <div className={style.lockWrapper} aria-label={disabledArialabel}>\n {lock}\n </div>\n ) : null}\n </div>\n );\n});\n\nCard.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport const cardPropTypes = {\n badge: PropTypes.string,\n image: PropTypes.string,\n disabled: PropTypes.bool,\n adaptiv: PropTypes.bool,\n type: PropTypes.string,\n title: PropTypes.string,\n author: PropTypes.string,\n certifiedAuthor: PropTypes.bool,\n customer: PropTypes.shape(Customer.propTypes),\n progress: PropTypes.number,\n favorite: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onClick: PropTypes.func,\n onFavoriteClick: PropTypes.func,\n isSelected: PropTypes.bool,\n notification: PropTypes.shape(Notification.propTypes),\n badgeCategory: CardContentInfo.propTypes.badgeCategory,\n badgeLabel: CardContentInfo.propTypes.badgeLabel,\n theme: PropTypes.oneOf(keys(THEMES)),\n disabledContent: PropTypes.string,\n 'aria-label': PropTypes.string,\n 'background-aria-label': PropTypes.string,\n 'favorite-aria-label': Favorite.propTypes['aria-label'],\n 'selectable-aria-label': Selectable.propTypes['aria-label'],\n 'customer-aria-label': Customer.propTypes['aria-label'],\n 'badge-aria-label': PropTypes.string,\n 'disabled-aria-label': PropTypes.string,\n 'card-content-aria-label': CardContentInfo.propTypes['aria-label']\n};\n\nCard.propTypes = cardPropTypes;\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useMemo","memo","PropTypes","classnames","NovaCompositionCoorpacademyPadlock","LockIcon","NovaCompositionCoorpacademyPictures","PicturesIcon","isExternalContent","ICONS_TYPES","EXTERNAL_CONTENT_ICONS","Provider","CardContentInfo","MODES","FaIcon","COLORS","Customer","Favorite","Selectable","Notification","style","THEMES","default","coorpmanager","ICON_SIZE","CardBackground","type","image","empty","ariaLabel","skin","externalContent","primaryColor","_get","whiteColor","iconName","iconColor","backgroundIcon","createElement","className","externalIconCircleWrapper","externalIconCircleWithImageWrapper","customStyle","color","white","height","width","_backgroundIcon","backgroundColor","imageWrapper","backgroundImage","externalContentHeader","externalBackground","emptyIcon","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","string","bool","Card","props","context","badge","adaptiv","disabled","hidden","title","author","customer","certifiedAuthor","progress","favorite","addFavoriteToolTip","removeFavoriteToolTip","onClick","onFavoriteClick","isSelected","notification","badgeCategory","badgeLabel","theme","disabledContent","cardArialabel","backgroundAriaLabel","favoriteAriaLabel","selectableAriaLabel","customerAriaLabel","badgeAriaLabel","disabledArialabel","cardContentLabelAriaLabel","_isEmpty","_pick","cardStyle","course","lazy","grid","_isUndefined","handleClick","e","lock","lockContent","lockIcon","dangerouslySetInnerHTML","__html","inlineBadgeStyle","getType","contentType","console","log","_extends","mode","CARD","lockWrapper","cardPropTypes","shape","number","func","oneOf","_keys"],"sources":["../../../src/molecule/card/index.js"],"sourcesContent":["import React, {useMemo, memo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {get, isEmpty, isUndefined, pick, keys} from 'lodash/fp';\nimport {\n NovaCompositionCoorpacademyPadlock as LockIcon,\n NovaCompositionCoorpacademyPictures as PicturesIcon\n} from '@coorpacademy/nova-icons';\nimport {isExternalContent, ICONS_TYPES, EXTERNAL_CONTENT_ICONS} from '../../util/external-content';\nimport Provider from '../../atom/provider';\nimport CardContentInfo, {MODES} from '../card-content';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport Customer from './customer';\nimport Favorite from './favorite';\nimport Selectable from './selectable';\nimport Notification from './notification';\nimport style from './style.css';\n\nexport const THEMES = {\n default: null,\n coorpmanager: style.coorpmanager\n};\n\nconst ICON_SIZE = '28px';\n\nconst CardBackground = ({type, image, empty, 'aria-label': ariaLabel}, {skin}) => {\n const externalContent = isExternalContent(type);\n const primaryColor = get('common.primary', skin);\n const whiteColor = get('common.white', skin);\n\n if ((externalContent && EXTERNAL_CONTENT_ICONS[type]) || type === 'chapter') {\n const {iconName, iconColor} = ICONS_TYPES[type];\n const backgroundIcon = (\n <div\n className={classnames(\n style.externalIconCircleWrapper,\n style.externalIconCircleWithImageWrapper\n )}\n >\n <FaIcon\n iconName={iconName}\n customStyle={{\n color: COLORS.white,\n height: ICON_SIZE,\n width: ICON_SIZE\n }}\n />\n </div>\n );\n\n if (image) {\n const _backgroundIcon = (\n <div\n className={classnames(\n style.externalIconCircleWrapper,\n style.externalIconCircleWithImageWrapper\n )}\n style={{\n backgroundColor: iconColor\n }}\n data-testid=\"card-background-image\"\n >\n <FaIcon\n iconName={iconName}\n customStyle={{\n color: COLORS.white,\n height: ICON_SIZE,\n width: ICON_SIZE\n }}\n />\n </div>\n );\n\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor,\n backgroundImage: `url('${image}')`\n }}\n className={classnames(style.externalContentHeader, style.externalBackground)}\n >\n {_backgroundIcon}\n </div>\n </div>\n );\n }\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n style={{\n backgroundColor: iconColor\n }}\n className={style.externalContentHeader}\n >\n {backgroundIcon}\n </div>\n </div>\n );\n }\n\n const emptyIcon = empty ? (\n <PicturesIcon className={style.emptyIcon} style={{color: whiteColor}} />\n ) : null;\n return (\n <div className={style.imageWrapper}>\n <div\n data-name=\"cover\"\n aria-label={ariaLabel}\n className={style.image}\n style={{\n backgroundColor: primaryColor,\n backgroundImage: image ? `url('${image}')` : 'none'\n }}\n >\n {emptyIcon}\n </div>\n </div>\n );\n};\n\nCardBackground.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCardBackground.propTypes = {\n type: PropTypes.string,\n image: PropTypes.string,\n empty: PropTypes.bool,\n 'aria-label': PropTypes.string\n};\n\nconst Card = memo(function Card(props, context) {\n const {skin} = context;\n const {\n image,\n badge,\n adaptiv,\n disabled: hidden = false,\n type = 'course',\n title,\n author,\n customer,\n certifiedAuthor,\n progress,\n favorite,\n addFavoriteToolTip,\n removeFavoriteToolTip,\n onClick,\n onFavoriteClick,\n isSelected,\n notification,\n badgeCategory,\n badgeLabel,\n theme = 'default',\n disabledContent,\n 'aria-label': cardArialabel,\n 'background-aria-label': backgroundAriaLabel,\n 'favorite-aria-label': favoriteAriaLabel,\n 'selectable-aria-label': selectableAriaLabel,\n 'customer-aria-label': customerAriaLabel,\n 'badge-aria-label': badgeAriaLabel,\n 'disabled-aria-label': disabledArialabel,\n 'card-content-aria-label': cardContentLabelAriaLabel\n } = props;\n const empty = isEmpty(pick(['title', 'type', 'author', 'image'], props));\n const primaryColor = get('common.primary', skin);\n const cardStyle = classnames(\n THEMES[theme],\n style.course,\n title ? null : style.lazy,\n style.grid,\n empty ? style.empty : null\n );\n const disabled = hidden && (!isSelected || isUndefined(isSelected));\n const handleClick = useMemo(() => e => onClick(e), [onClick]);\n const lock = disabled ? (\n <div className={style.lockContent}>\n <LockIcon className={style.lockIcon} height={48} />\n <span\n aria-label={disabledArialabel}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: disabledContent}}\n />\n </div>\n ) : null;\n const inlineBadgeStyle = {color: primaryColor};\n const getType = contentType => {\n switch (contentType) {\n case 'chapter':\n return 'microlearning';\n case 'course':\n return 'learner';\n default:\n return contentType;\n }\n };\n // eslint-disable-next-line no-console\n console.log('type of card', type, 'favorite', favorite);\n return (\n <div\n className={cardStyle}\n data-name=\"card\"\n data-lock={disabled}\n data-type={getType(type)}\n disabled={disabled}\n onClick={handleClick}\n aria-label={cardArialabel}\n >\n <CardBackground type={type} image={image} empty={empty} aria-label={backgroundAriaLabel} />\n {isUndefined(isSelected) && !isUndefined(favorite) ? (\n <Favorite\n className={style.favorite}\n favorite={favorite}\n disabled={disabled}\n onFavoriteClick={onFavoriteClick}\n addFavoriteToolTip={addFavoriteToolTip}\n removeFavoriteToolTip={removeFavoriteToolTip}\n aria-label={favoriteAriaLabel}\n />\n ) : null}\n <Selectable isSelected={isSelected} hidden={hidden} aria-label={selectableAriaLabel} />\n {notification ? <Notification {...notification} /> : null}\n {customer ? (\n <Customer\n {...customer}\n theme={theme}\n type={type}\n disabled={disabled}\n aria-label={customerAriaLabel}\n />\n ) : null}\n <CardContentInfo\n mode={MODES.CARD}\n adaptiv={adaptiv}\n author={author}\n certifiedAuthor={certifiedAuthor}\n disabled={disabled}\n empty={empty}\n progress={progress}\n title={title}\n type={type}\n badgeCategory={badgeCategory}\n badgeLabel={badgeLabel}\n theme={theme}\n aria-label={cardContentLabelAriaLabel}\n />\n {badge ? (\n <div className={style.badge} style={inlineBadgeStyle} aria-label={badgeAriaLabel}>\n {badge}\n </div>\n ) : null}\n {disabled ? (\n <div className={style.lockWrapper} aria-label={disabledArialabel}>\n {lock}\n </div>\n ) : null}\n </div>\n );\n});\n\nCard.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nexport const cardPropTypes = {\n badge: PropTypes.string,\n image: PropTypes.string,\n disabled: PropTypes.bool,\n adaptiv: PropTypes.bool,\n type: PropTypes.string,\n title: PropTypes.string,\n author: PropTypes.string,\n certifiedAuthor: PropTypes.bool,\n customer: PropTypes.shape(Customer.propTypes),\n progress: PropTypes.number,\n favorite: PropTypes.bool,\n addFavoriteToolTip: PropTypes.string,\n removeFavoriteToolTip: PropTypes.string,\n onClick: PropTypes.func,\n onFavoriteClick: PropTypes.func,\n isSelected: PropTypes.bool,\n notification: PropTypes.shape(Notification.propTypes),\n badgeCategory: CardContentInfo.propTypes.badgeCategory,\n badgeLabel: CardContentInfo.propTypes.badgeLabel,\n theme: PropTypes.oneOf(keys(THEMES)),\n disabledContent: PropTypes.string,\n 'aria-label': PropTypes.string,\n 'background-aria-label': PropTypes.string,\n 'favorite-aria-label': Favorite.propTypes['aria-label'],\n 'selectable-aria-label': Selectable.propTypes['aria-label'],\n 'customer-aria-label': Customer.propTypes['aria-label'],\n 'badge-aria-label': PropTypes.string,\n 'disabled-aria-label': PropTypes.string,\n 'card-content-aria-label': CardContentInfo.propTypes['aria-label']\n};\n\nCard.propTypes = cardPropTypes;\n\nexport default Card;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -31,12 +31,14 @@
|
|
|
31
31
|
animation: fadeIn 1s ease-out forwards;
|
|
32
32
|
cursor: pointer;
|
|
33
33
|
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.11);
|
|
34
|
+
border: 2px solid white;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
.defaultStyle[disabled] .favorite {
|
|
37
38
|
z-index: 0;
|
|
38
39
|
}
|
|
39
40
|
|
|
41
|
+
|
|
40
42
|
.grid.empty {
|
|
41
43
|
padding-bottom: 25px;
|
|
42
44
|
opacity: 0.6;
|
|
@@ -49,12 +51,12 @@
|
|
|
49
51
|
height: 297px;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
|
-
.chapter {
|
|
54
|
+
/* .chapter {
|
|
53
55
|
composes: defaultStyle;
|
|
54
56
|
border-radius: 8px;
|
|
55
57
|
width: 203px;
|
|
56
58
|
height: 297px;
|
|
57
|
-
}
|
|
59
|
+
} */
|
|
58
60
|
|
|
59
61
|
.coorpmanager.course {
|
|
60
62
|
border-radius: 5px;
|
|
@@ -62,11 +64,11 @@
|
|
|
62
64
|
height: 201px;
|
|
63
65
|
}
|
|
64
66
|
|
|
65
|
-
.coorpmanager.chapter {
|
|
67
|
+
/* .coorpmanager.chapter {
|
|
66
68
|
border-radius: 5px;
|
|
67
69
|
width: 138px;
|
|
68
70
|
height: 201px;
|
|
69
|
-
}
|
|
71
|
+
} */
|
|
70
72
|
|
|
71
73
|
.course .imageWrapper {
|
|
72
74
|
width: 100%;
|
|
@@ -76,7 +78,7 @@
|
|
|
76
78
|
left: 0;
|
|
77
79
|
}
|
|
78
80
|
|
|
79
|
-
.chapter .chapterImageWrapper {
|
|
81
|
+
/* .chapter .chapterImageWrapper {
|
|
80
82
|
max-height: 77px;
|
|
81
83
|
width: 100%;
|
|
82
84
|
position: absolute;
|
|
@@ -86,7 +88,7 @@
|
|
|
86
88
|
|
|
87
89
|
.coorpmanager.chapter .chapterImageWrapper {
|
|
88
90
|
max-height: 52px;
|
|
89
|
-
}
|
|
91
|
+
} */
|
|
90
92
|
|
|
91
93
|
.defaultStyle .image {
|
|
92
94
|
overflow: hidden;
|
|
@@ -157,8 +159,7 @@
|
|
|
157
159
|
}
|
|
158
160
|
|
|
159
161
|
.course .defaultStyle:hover,
|
|
160
|
-
.
|
|
161
|
-
background: light;
|
|
162
|
+
.defaultStyle:hover {
|
|
162
163
|
cursor: pointer;
|
|
163
164
|
transition: background 0.25s ease-in-out;
|
|
164
165
|
}
|
|
@@ -273,6 +274,8 @@
|
|
|
273
274
|
border-bottom-right-radius: 7px;
|
|
274
275
|
z-index: 1;
|
|
275
276
|
user-select: none;
|
|
277
|
+
/* border-color: transparent;
|
|
278
|
+
border-top-left-radius: 2px; */
|
|
276
279
|
}
|
|
277
280
|
|
|
278
281
|
.coorpmanager .badge {
|
|
@@ -361,7 +364,7 @@
|
|
|
361
364
|
transition: transform 0.25s ease-in-out;
|
|
362
365
|
}
|
|
363
366
|
|
|
364
|
-
.externalIcon {
|
|
367
|
+
/* .externalIcon {
|
|
365
368
|
color: white;
|
|
366
369
|
width: 45px;
|
|
367
370
|
height: 45px;
|
|
@@ -371,7 +374,7 @@
|
|
|
371
374
|
color: white;
|
|
372
375
|
width: 23px;
|
|
373
376
|
height: 23px;
|
|
374
|
-
}
|
|
377
|
+
} */
|
|
375
378
|
|
|
376
379
|
.externalIconCircleWrapper::after {
|
|
377
380
|
animation: pulse 3s linear 0s infinite;
|
|
@@ -431,7 +434,7 @@
|
|
|
431
434
|
margin-top: 20px;
|
|
432
435
|
}
|
|
433
436
|
|
|
434
|
-
.coorpmanager .externalIconWithImage {
|
|
437
|
+
/* .coorpmanager .externalIconWithImage {
|
|
435
438
|
color: white;
|
|
436
439
|
width: 25px;
|
|
437
440
|
height: 25px;
|
|
@@ -442,7 +445,7 @@
|
|
|
442
445
|
color: white;
|
|
443
446
|
width: 28px;
|
|
444
447
|
height: 28px;
|
|
445
|
-
}
|
|
448
|
+
} */
|
|
446
449
|
|
|
447
450
|
.externalIconCircleWithImageWrapper::after,
|
|
448
451
|
.externalIconCircleWithImageWrapper::before {
|
|
@@ -452,7 +455,6 @@
|
|
|
452
455
|
top: 0;
|
|
453
456
|
left: 0;
|
|
454
457
|
position: absolute;
|
|
455
|
-
|
|
456
458
|
border-radius: 50%;
|
|
457
459
|
transform: scale(1);
|
|
458
460
|
opacity: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/card-content/index.js"],"names":[],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/card-content/index.js"],"names":[],"mappings":";;;;;;;;;;AAgIA;;;;;;;;;;;;;;gBA4EC"}
|
|
@@ -4,10 +4,12 @@ import _get from "lodash/fp/get";
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import classnames from 'classnames';
|
|
7
|
-
import { NovaCompositionCoorpacademyAdaptive as AdaptivIcon, NovaSolidStatusCheckCircle2 as CheckIcon
|
|
8
|
-
import { isExternalContent
|
|
7
|
+
import { NovaCompositionCoorpacademyAdaptive as AdaptivIcon, NovaSolidStatusCheckCircle2 as CheckIcon } from '@coorpacademy/nova-icons';
|
|
8
|
+
import { isExternalContent } from '../../util/external-content';
|
|
9
9
|
import Provider from '../../atom/provider';
|
|
10
10
|
import ContentBadge from '../../atom/content-badge';
|
|
11
|
+
import Tag from '../../atom/tag';
|
|
12
|
+
import { COLORS } from '../../variables/colors';
|
|
11
13
|
import style from './style.css';
|
|
12
14
|
export const MODES = {
|
|
13
15
|
HERO: 'hero',
|
|
@@ -17,45 +19,86 @@ export const THEMES = {
|
|
|
17
19
|
default: null,
|
|
18
20
|
coorpmanager: style.coorpmanager
|
|
19
21
|
};
|
|
22
|
+
const getCardInfo = (contentType, translate) => {
|
|
23
|
+
switch (contentType) {
|
|
24
|
+
case 'chapter':
|
|
25
|
+
return {
|
|
26
|
+
label: "5'learning",
|
|
27
|
+
iconName: 'stopwatch'
|
|
28
|
+
};
|
|
29
|
+
case 'scorm':
|
|
30
|
+
return {
|
|
31
|
+
label: translate('external_content_scorm'),
|
|
32
|
+
iconName: 'rectangle-history'
|
|
33
|
+
};
|
|
34
|
+
case 'video':
|
|
35
|
+
return {
|
|
36
|
+
label: translate('external_content_video'),
|
|
37
|
+
iconName: 'circle-play'
|
|
38
|
+
};
|
|
39
|
+
case 'article':
|
|
40
|
+
return {
|
|
41
|
+
label: translate('external_content_article'),
|
|
42
|
+
iconName: 'file-lines'
|
|
43
|
+
};
|
|
44
|
+
case 'podcast':
|
|
45
|
+
return {
|
|
46
|
+
label: translate('external_content_podcast'),
|
|
47
|
+
iconName: 'microphone-lines'
|
|
48
|
+
};
|
|
49
|
+
default:
|
|
50
|
+
return {
|
|
51
|
+
label: 'Course',
|
|
52
|
+
iconName: 'book-open'
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
};
|
|
20
56
|
const ContentTypeInfo = ({
|
|
21
57
|
mode,
|
|
22
58
|
type,
|
|
23
|
-
|
|
59
|
+
adaptiv,
|
|
60
|
+
ariaLabel,
|
|
61
|
+
isCourse,
|
|
62
|
+
empty,
|
|
63
|
+
theme
|
|
24
64
|
}, context) => {
|
|
25
65
|
const {
|
|
26
66
|
translate
|
|
27
67
|
} = context;
|
|
28
|
-
if (mode !== MODES.CARD) {
|
|
68
|
+
if (mode !== MODES.CARD || empty || theme === 'coorpmanager') {
|
|
29
69
|
return null;
|
|
30
70
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
return null;
|
|
71
|
+
const {
|
|
72
|
+
label,
|
|
73
|
+
iconName
|
|
74
|
+
} = getCardInfo(type, translate);
|
|
75
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: style.contentTypeInfos
|
|
77
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
78
|
+
size: "S",
|
|
79
|
+
label: label,
|
|
80
|
+
icon: {
|
|
81
|
+
iconName
|
|
82
|
+
}
|
|
83
|
+
}), adaptiv ? /*#__PURE__*/React.createElement("div", {
|
|
84
|
+
className: classnames(style.adaptiveIcon, isCourse ? style.iconShadow : null)
|
|
85
|
+
}, /*#__PURE__*/React.createElement(AdaptivIcon, {
|
|
86
|
+
height: 20,
|
|
87
|
+
"aria-label": _get('adaptive', ariaLabel)
|
|
88
|
+
})) : null);
|
|
50
89
|
};
|
|
51
90
|
ContentTypeInfo.contextTypes = {
|
|
52
91
|
skin: Provider.childContextTypes.skin,
|
|
53
92
|
translate: Provider.childContextTypes.translate
|
|
54
93
|
};
|
|
55
94
|
ContentTypeInfo.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
56
|
-
externalContent: PropTypes.bool,
|
|
57
95
|
type: PropTypes.string,
|
|
58
|
-
mode: PropTypes.string
|
|
96
|
+
mode: PropTypes.string,
|
|
97
|
+
adaptiv: PropTypes.bool,
|
|
98
|
+
ariaLabel: PropTypes.string,
|
|
99
|
+
isCourse: PropTypes.bool,
|
|
100
|
+
empty: PropTypes.bool,
|
|
101
|
+
theme: PropTypes.oneOf(_keys(THEMES))
|
|
59
102
|
} : {};
|
|
60
103
|
const CardTitle = ({
|
|
61
104
|
title,
|
|
@@ -117,7 +160,7 @@ const ContentInfo = ({
|
|
|
117
160
|
theme = 'default',
|
|
118
161
|
'aria-label': ariaLabel
|
|
119
162
|
}) => {
|
|
120
|
-
const progressBarColor =
|
|
163
|
+
const progressBarColor = COLORS.cm_positive_500;
|
|
121
164
|
const inlineProgressValueStyle = {
|
|
122
165
|
backgroundColor: progressBarColor,
|
|
123
166
|
width: `${progress * 100}%`
|
|
@@ -134,24 +177,22 @@ const ContentInfo = ({
|
|
|
134
177
|
role: "progressbar",
|
|
135
178
|
"aria-label": _get('progression', ariaLabel)
|
|
136
179
|
}) : null) : null;
|
|
137
|
-
const adaptiveIcon = adaptiv ? /*#__PURE__*/React.createElement("div", {
|
|
138
|
-
className: classnames(style.adaptiveIcon, courseContent ? style.iconShadow : null)
|
|
139
|
-
}, /*#__PURE__*/React.createElement(AdaptivIcon, {
|
|
140
|
-
height: 25,
|
|
141
|
-
"aria-label": _get('adaptive', ariaLabel)
|
|
142
|
-
})) : null;
|
|
143
180
|
return /*#__PURE__*/React.createElement("div", {
|
|
144
181
|
"data-name": "info",
|
|
145
|
-
className: classnames(THEMES[theme], style.infoWrapper, mode === MODES.HERO ? style.hero : style.card, disabled ? style.progressBarDisabled : null, externalContent ? style.externalContent : null
|
|
182
|
+
className: classnames(THEMES[theme], style.infoWrapper, mode === MODES.HERO ? style.hero : style.card, disabled ? style.progressBarDisabled : null, externalContent || chapterContent || courseContent ? style.externalContent : null // generalize css class name
|
|
183
|
+
)
|
|
146
184
|
}, /*#__PURE__*/React.createElement(ContentTypeInfo, {
|
|
147
185
|
mode: mode,
|
|
148
186
|
type: type,
|
|
149
|
-
|
|
187
|
+
adaptiv: adaptiv,
|
|
188
|
+
isCourse: courseContent,
|
|
189
|
+
empty: empty,
|
|
190
|
+
theme: theme
|
|
150
191
|
}), /*#__PURE__*/React.createElement("div", {
|
|
151
|
-
className: classnames(style.cardInfo,
|
|
192
|
+
className: classnames(style.cardInfo, courseContent ? style.cardCourseTitle : null)
|
|
152
193
|
}, /*#__PURE__*/React.createElement("div", {
|
|
153
194
|
className: style.iconWrapper
|
|
154
|
-
},
|
|
195
|
+
}, !empty && badgeLabel && badgeCategory && courseContent ? /*#__PURE__*/React.createElement(ContentBadge, {
|
|
155
196
|
category: badgeCategory,
|
|
156
197
|
label: badgeLabel
|
|
157
198
|
}) : null), /*#__PURE__*/React.createElement(CardTitle, {
|