@openedx/paragon 23.16.1 → 23.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Card/CardImageCap.js +22 -15
- package/dist/Card/CardImageCap.js.map +1 -1
- package/dist/core.css +8 -0
- package/dist/core.css.map +1 -1
- package/dist/core.min.css +1 -1
- package/package.json +1 -1
- package/src/Card/CardImageCap.jsx +45 -28
- package/styles/scss/core/_utilities.scss +24 -0
|
@@ -19,7 +19,8 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
|
|
|
19
19
|
logoSkeletonHeight,
|
|
20
20
|
logoSkeletonWidth,
|
|
21
21
|
className,
|
|
22
|
-
imageLoadingType
|
|
22
|
+
imageLoadingType,
|
|
23
|
+
skeletonDuringImageLoad
|
|
23
24
|
}, ref) => {
|
|
24
25
|
const {
|
|
25
26
|
orientation,
|
|
@@ -28,19 +29,21 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
|
|
|
28
29
|
const [showImageCap, setShowImageCap] = useState(false);
|
|
29
30
|
const [showLogoCap, setShowLogoCap] = useState(false);
|
|
30
31
|
const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
|
|
32
|
+
const loadingSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
|
|
33
|
+
containerClassName: "pgn__card-image-cap-loader",
|
|
34
|
+
height: orientation === 'horizontal' ? '100%' : skeletonHeight,
|
|
35
|
+
width: skeletonWidth
|
|
36
|
+
});
|
|
37
|
+
const loadingLogoSkeleton = () => /*#__PURE__*/React.createElement(Skeleton, {
|
|
38
|
+
containerClassName: "pgn__card-logo-cap",
|
|
39
|
+
height: logoSkeletonHeight,
|
|
40
|
+
width: logoSkeletonWidth
|
|
41
|
+
});
|
|
31
42
|
if (isLoading) {
|
|
32
43
|
return /*#__PURE__*/React.createElement("div", {
|
|
33
44
|
className: classNames(wrapperClassName, className),
|
|
34
45
|
"data-testid": "image-loader-wrapper"
|
|
35
|
-
},
|
|
36
|
-
containerClassName: "pgn__card-image-cap-loader",
|
|
37
|
-
height: orientation === 'horizontal' ? '100%' : skeletonHeight,
|
|
38
|
-
width: skeletonWidth
|
|
39
|
-
}), logoSkeleton && /*#__PURE__*/React.createElement(Skeleton, {
|
|
40
|
-
containerClassName: "pgn__card-logo-cap",
|
|
41
|
-
height: logoSkeletonHeight,
|
|
42
|
-
width: logoSkeletonWidth
|
|
43
|
-
}));
|
|
46
|
+
}, loadingSkeleton(), logoSkeleton && loadingLogoSkeleton());
|
|
44
47
|
}
|
|
45
48
|
const handleSrcFallback = (event, altSrc, imageKey) => {
|
|
46
49
|
const {
|
|
@@ -59,7 +62,7 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
|
|
|
59
62
|
return /*#__PURE__*/React.createElement("div", {
|
|
60
63
|
className: classNames(className, wrapperClassName),
|
|
61
64
|
ref: ref
|
|
62
|
-
}, !!src && /*#__PURE__*/React.createElement("img", {
|
|
65
|
+
}, !!src && /*#__PURE__*/React.createElement(React.Fragment, null, skeletonDuringImageLoad && !showImageCap && loadingSkeleton(), /*#__PURE__*/React.createElement("img", {
|
|
63
66
|
className: classNames('pgn__card-image-cap', {
|
|
64
67
|
show: showImageCap
|
|
65
68
|
}),
|
|
@@ -68,7 +71,7 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
|
|
|
68
71
|
onLoad: () => setShowImageCap(true),
|
|
69
72
|
alt: srcAlt,
|
|
70
73
|
loading: imageLoadingType
|
|
71
|
-
}), !!logoSrc && /*#__PURE__*/React.createElement("img", {
|
|
74
|
+
})), !!logoSrc && /*#__PURE__*/React.createElement(React.Fragment, null, skeletonDuringImageLoad && !showLogoCap && loadingLogoSkeleton(), /*#__PURE__*/React.createElement("img", {
|
|
72
75
|
className: classNames('pgn__card-logo-cap', {
|
|
73
76
|
show: showLogoCap
|
|
74
77
|
}),
|
|
@@ -77,7 +80,7 @@ const CardImageCap = /*#__PURE__*/React.forwardRef(({
|
|
|
77
80
|
onLoad: () => setShowLogoCap(true),
|
|
78
81
|
alt: logoAlt,
|
|
79
82
|
loading: imageLoadingType
|
|
80
|
-
}));
|
|
83
|
+
})));
|
|
81
84
|
});
|
|
82
85
|
CardImageCap.propTypes = {
|
|
83
86
|
/** Specifies class name to append to the base element. */
|
|
@@ -105,7 +108,10 @@ CardImageCap.propTypes = {
|
|
|
105
108
|
/** Specifies width of Logo skeleton in loading state. */
|
|
106
109
|
logoSkeletonWidth: PropTypes.number,
|
|
107
110
|
/** Specifies loading type for images */
|
|
108
|
-
imageLoadingType: PropTypes.oneOf(['eager', 'lazy'])
|
|
111
|
+
imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),
|
|
112
|
+
/** Render the loading skeleton when the image is loading in
|
|
113
|
+
* addition to when the whole card is in `isLoading` state */
|
|
114
|
+
skeletonDuringImageLoad: PropTypes.bool
|
|
109
115
|
};
|
|
110
116
|
CardImageCap.defaultProps = {
|
|
111
117
|
src: undefined,
|
|
@@ -120,7 +126,8 @@ CardImageCap.defaultProps = {
|
|
|
120
126
|
logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,
|
|
121
127
|
skeletonWidth: undefined,
|
|
122
128
|
logoSkeletonWidth: undefined,
|
|
123
|
-
imageLoadingType: 'eager'
|
|
129
|
+
imageLoadingType: 'eager',
|
|
130
|
+
skeletonDuringImageLoad: false
|
|
124
131
|
};
|
|
125
132
|
export default CardImageCap;
|
|
126
133
|
//# sourceMappingURL=CardImageCap.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","ref","orientation","isLoading","showImageCap","setShowImageCap","showLogoCap","setShowLogoCap","wrapperClassName","createElement","containerClassName","height","width","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport { cardSrcFallbackImg } from './CardFallbackDefaultImage';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n src,\n fallbackSrc,\n srcAlt,\n logoSrc,\n fallbackLogoSrc,\n logoAlt,\n skeletonHeight,\n skeletonWidth,\n logoSkeleton,\n logoSkeletonHeight,\n logoSkeletonWidth,\n className,\n imageLoadingType,\n}, ref) => {\n const { orientation, isLoading } = useContext(CardContext);\n const [showImageCap, setShowImageCap] = useState(false);\n const [showLogoCap, setShowLogoCap] = useState(false);\n\n const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n
|
|
1
|
+
{"version":3,"file":"CardImageCap.js","names":["React","useContext","useState","PropTypes","classNames","Skeleton","CardContext","cardSrcFallbackImg","SKELETON_HEIGHT_VALUE","LOGO_SKELETON_HEIGHT_VALUE","CardImageCap","forwardRef","src","fallbackSrc","srcAlt","logoSrc","fallbackLogoSrc","logoAlt","skeletonHeight","skeletonWidth","logoSkeleton","logoSkeletonHeight","logoSkeletonWidth","className","imageLoadingType","skeletonDuringImageLoad","ref","orientation","isLoading","showImageCap","setShowImageCap","showLogoCap","setShowLogoCap","wrapperClassName","loadingSkeleton","createElement","containerClassName","height","width","loadingLogoSkeleton","handleSrcFallback","event","altSrc","imageKey","currentTarget","endsWith","Fragment","show","onError","onLoad","alt","loading","propTypes","string","number","bool","oneOf","defaultProps","undefined"],"sources":["../../src/Card/CardImageCap.jsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Skeleton from 'react-loading-skeleton';\nimport CardContext from './CardContext';\nimport { cardSrcFallbackImg } from './CardFallbackDefaultImage';\n\nconst SKELETON_HEIGHT_VALUE = 140;\nconst LOGO_SKELETON_HEIGHT_VALUE = 41;\n\nconst CardImageCap = React.forwardRef(({\n src,\n fallbackSrc,\n srcAlt,\n logoSrc,\n fallbackLogoSrc,\n logoAlt,\n skeletonHeight,\n skeletonWidth,\n logoSkeleton,\n logoSkeletonHeight,\n logoSkeletonWidth,\n className,\n imageLoadingType,\n skeletonDuringImageLoad,\n}, ref) => {\n const { orientation, isLoading } = useContext(CardContext);\n const [showImageCap, setShowImageCap] = useState(false);\n const [showLogoCap, setShowLogoCap] = useState(false);\n\n const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;\n\n const loadingSkeleton = () => (\n <Skeleton\n containerClassName=\"pgn__card-image-cap-loader\"\n height={orientation === 'horizontal' ? '100%' : skeletonHeight}\n width={skeletonWidth}\n />\n );\n\n const loadingLogoSkeleton = () => (\n <Skeleton\n containerClassName=\"pgn__card-logo-cap\"\n height={logoSkeletonHeight}\n width={logoSkeletonWidth}\n />\n );\n\n if (isLoading) {\n return (\n <div\n className={classNames(wrapperClassName, className)}\n data-testid=\"image-loader-wrapper\"\n >\n {loadingSkeleton()}\n {logoSkeleton && loadingLogoSkeleton()}\n </div>\n );\n }\n\n const handleSrcFallback = (event, altSrc, imageKey) => {\n const { currentTarget } = event;\n\n if (!altSrc || currentTarget.src.endsWith(altSrc)) {\n if (imageKey === 'imageCap') {\n currentTarget.src = cardSrcFallbackImg;\n } else {\n setShowLogoCap(false);\n }\n\n return;\n }\n\n currentTarget.src = altSrc;\n };\n\n return (\n <div className={classNames(className, wrapperClassName)} ref={ref}>\n {!!src && (\n <>\n {skeletonDuringImageLoad && !showImageCap && loadingSkeleton()}\n <img\n className={classNames('pgn__card-image-cap', { show: showImageCap })}\n src={src}\n onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}\n onLoad={() => setShowImageCap(true)}\n alt={srcAlt}\n loading={imageLoadingType}\n />\n </>\n )}\n {!!logoSrc && (\n <>\n {skeletonDuringImageLoad && !showLogoCap && loadingLogoSkeleton()}\n <img\n className={classNames('pgn__card-logo-cap', { show: showLogoCap })}\n src={logoSrc}\n onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}\n onLoad={() => setShowLogoCap(true)}\n alt={logoAlt}\n loading={imageLoadingType}\n />\n </>\n )}\n </div>\n );\n});\n\nCardImageCap.propTypes = {\n /** Specifies class name to append to the base element. */\n className: PropTypes.string,\n /** Specifies image src. */\n src: PropTypes.string,\n /** Specifies fallback image src. */\n fallbackSrc: PropTypes.string,\n /** Specifies image alt text. */\n srcAlt: PropTypes.string,\n /** Specifies logo src to put on top of the image. */\n logoSrc: PropTypes.string,\n /** Specifies fallback image logo src. */\n fallbackLogoSrc: PropTypes.string,\n /** Specifies logo image alt text. */\n logoAlt: PropTypes.string,\n /** Specifies height of Image skeleton in loading state. */\n skeletonHeight: PropTypes.number,\n /** Specifies width of Image skeleton in loading state. */\n skeletonWidth: PropTypes.number,\n /** Specifies whether the cap should be displayed during loading. */\n logoSkeleton: PropTypes.bool,\n /** Specifies height of Logo skeleton in loading state. */\n logoSkeletonHeight: PropTypes.number,\n /** Specifies width of Logo skeleton in loading state. */\n logoSkeletonWidth: PropTypes.number,\n /** Specifies loading type for images */\n imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),\n /** Render the loading skeleton when the image is loading in\n * addition to when the whole card is in `isLoading` state */\n skeletonDuringImageLoad: PropTypes.bool,\n};\n\nCardImageCap.defaultProps = {\n src: undefined,\n fallbackSrc: cardSrcFallbackImg,\n logoSrc: undefined,\n fallbackLogoSrc: undefined,\n className: undefined,\n srcAlt: undefined,\n logoAlt: undefined,\n skeletonHeight: SKELETON_HEIGHT_VALUE,\n logoSkeleton: false,\n logoSkeletonHeight: LOGO_SKELETON_HEIGHT_VALUE,\n skeletonWidth: undefined,\n logoSkeletonWidth: undefined,\n imageLoadingType: 'eager',\n skeletonDuringImageLoad: false,\n};\n\nexport default CardImageCap;\n"],"mappings":"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","ignoreList":[]}
|
package/dist/core.css
CHANGED
|
@@ -8487,6 +8487,14 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
|
|
|
8487
8487
|
.box-shadow-centered-5 {
|
|
8488
8488
|
box-shadow: var(--pgn-elevation-box-shadow-centered-5);
|
|
8489
8489
|
}
|
|
8490
|
+
.dvh-100 {
|
|
8491
|
+
height: 100vh !important;
|
|
8492
|
+
height: 100dvh !important;
|
|
8493
|
+
}
|
|
8494
|
+
.min-dvh-100 {
|
|
8495
|
+
min-height: 100vh !important;
|
|
8496
|
+
min-height: 100dvh !important;
|
|
8497
|
+
}
|
|
8490
8498
|
.media {
|
|
8491
8499
|
display: flex;
|
|
8492
8500
|
align-items: flex-start;
|