@openedx/paragon 23.16.1 → 23.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.16.1",
+  "version": "23.18.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Card/CardImageCap.jsx

@@ -22,6 +22,7 @@ const CardImageCap = React.forwardRef(({
   logoSkeletonWidth,
   className,
   imageLoadingType,
+  skeletonDuringImageLoad,
 }, ref) => {
   const { orientation, isLoading } = useContext(CardContext);
   const [showImageCap, setShowImageCap] = useState(false);
@@ -29,24 +30,30 @@ const CardImageCap = React.forwardRef(({
 
   const wrapperClassName = `pgn__card-wrapper-image-cap ${orientation}`;
 
+  const loadingSkeleton = () => (
+    <Skeleton
+      containerClassName="pgn__card-image-cap-loader"
+      height={orientation === 'horizontal' ? '100%' : skeletonHeight}
+      width={skeletonWidth}
+    />
+  );
+
+  const loadingLogoSkeleton = () => (
+    <Skeleton
+      containerClassName="pgn__card-logo-cap"
+      height={logoSkeletonHeight}
+      width={logoSkeletonWidth}
+    />
+  );
+
   if (isLoading) {
     return (
       <div
         className={classNames(wrapperClassName, className)}
         data-testid="image-loader-wrapper"
       >
-        <Skeleton
-          containerClassName="pgn__card-image-cap-loader"
-          height={orientation === 'horizontal' ? '100%' : skeletonHeight}
-          width={skeletonWidth}
-        />
-        {logoSkeleton && (
-          <Skeleton
-            containerClassName="pgn__card-logo-cap"
-            height={logoSkeletonHeight}
-            width={logoSkeletonWidth}
-          />
-        )}
+        {loadingSkeleton()}
+        {logoSkeleton && loadingLogoSkeleton()}
       </div>
     );
   }
@@ -70,24 +77,30 @@ const CardImageCap = React.forwardRef(({
   return (
     <div className={classNames(className, wrapperClassName)} ref={ref}>
       {!!src && (
-        <img
-          className={classNames('pgn__card-image-cap', { show: showImageCap })}
-          src={src}
-          onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}
-          onLoad={() => setShowImageCap(true)}
-          alt={srcAlt}
-          loading={imageLoadingType}
-        />
+        <>
+          {skeletonDuringImageLoad && !showImageCap && loadingSkeleton()}
+          <img
+            className={classNames('pgn__card-image-cap', { show: showImageCap })}
+            src={src}
+            onError={(event) => handleSrcFallback(event, fallbackSrc, 'imageCap')}
+            onLoad={() => setShowImageCap(true)}
+            alt={srcAlt}
+            loading={imageLoadingType}
+          />
+        </>
       )}
       {!!logoSrc && (
-        <img
-          className={classNames('pgn__card-logo-cap', { show: showLogoCap })}
-          src={logoSrc}
-          onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
-          onLoad={() => setShowLogoCap(true)}
-          alt={logoAlt}
-          loading={imageLoadingType}
-        />
+        <>
+          {skeletonDuringImageLoad && !showLogoCap && loadingLogoSkeleton()}
+          <img
+            className={classNames('pgn__card-logo-cap', { show: showLogoCap })}
+            src={logoSrc}
+            onError={(event) => handleSrcFallback(event, fallbackLogoSrc, 'logoCap')}
+            onLoad={() => setShowLogoCap(true)}
+            alt={logoAlt}
+            loading={imageLoadingType}
+          />
+        </>
       )}
     </div>
   );
@@ -120,6 +133,9 @@ CardImageCap.propTypes = {
   logoSkeletonWidth: PropTypes.number,
   /** Specifies loading type for images */
   imageLoadingType: PropTypes.oneOf(['eager', 'lazy']),
+  /** Render the loading skeleton when the image is loading in
+   *  addition to when the whole card is in `isLoading` state */
+  skeletonDuringImageLoad: PropTypes.bool,
 };
 
 CardImageCap.defaultProps = {
@@ -136,6 +152,7 @@ CardImageCap.defaultProps = {
   skeletonWidth: undefined,
   logoSkeletonWidth: undefined,
   imageLoadingType: 'eager',
+  skeletonDuringImageLoad: false,
 };
 
 export default CardImageCap;

package/styles/scss/core/_utilities.scss

@@ -122,3 +122,27 @@ $indexes: map.merge(
     }
   }
 }
+
+// Dynamic viewport
+// 
+// Following the pattern of `vh-100` and `min-vh-100` from
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_sizing.scss
+// 
+// More info on MDN
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#dynamic_viewport_units
+
+.dvh-100 {
+   // fallback for browsers that don't support dynamic viewport units
+   height: 100vh !important;
+
+   // dynamic units for modern browsers
+   height: 100dvh !important;
+}
+
+.min-dvh-100 {
+   // fallback for browsers that don't support dynamic viewport units
+   min-height: 100vh !important;
+
+   // dynamic units for modern browsers
+   min-height: 100dvh !important;
+}