@ndlib/component-library 1.0.5 → 1.0.6

package/dist/components/composites/Card/Card.stories.js

@@ -22,6 +22,14 @@ const headlinedCards = [
             width: '500px',
         },
     },
+    {
+        headline: 'Paws, Hooves, Fins & Feathers',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/RBSC_Spring2020_Rep_2_a88660826b.jpg',
+        size: CARD_SIZE.SM,
+        sx: {
+            width: '500px',
+        },
+    },
     {
         headline: 'Tracy C. Bergstrom, director of the Specialized Collection Services Program',
         image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/Tracy_News_218x275_1dd180dc80.jpg',

package/dist/components/composites/Card/index.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import { StyledElementProps, StylesProp } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
-import React from 'react';
 export declare enum CARD_LAYOUT {
     VERTICAL = "vertical",
     HORIZONTAL = "horizontal"

package/dist/components/composites/Card/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
 import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
 import { ReadMore } from '../../elements/text/ReadMore';
 import { useTheme } from '../../../theme';
@@ -7,7 +8,6 @@ import { Box } from '../../elements/layout/Box';
 import { Icon } from '../../elements/Icon';
 import { Column, FONT, FONT_SIZE, Row, TYPOGRAPHY_TYPE } from '../../..';
 import { COLOR } from '../../../theme/colors';
-import React, { useEffect, useState } from 'react';
 import { KEY_CODES } from '../../../utils/misc';
 import { useHover } from '../../../utils/hooks/useHover';
 export var CARD_LAYOUT;
@@ -58,11 +58,26 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
     const { isHovered, anchorElementProps } = useHover();
     const [activeBackground, setActiveBackground] = useState(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
-    const imageHeight = imageHeightProp || (isVertical ? 'auto' : '100%');
-    const imageWidth = imageWidthProp || (isVertical ? '100%' : 'auto');
+    const [objectFit, setObjectFit] = useState('scale-down');
     useEffect(() => {
         setActiveBackground(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
     }, [isHovered]);
+    useEffect(() => {
+        if (image) {
+            const img = new Image();
+            img.onload = () => {
+                if (img.width > img.height) {
+                    setObjectFit('contain');
+                }
+                else {
+                    setObjectFit('scale-down');
+                }
+            };
+            img.src = image;
+        }
+    }, [image]);
+    const imageHeight = imageHeightProp || (isVertical ? 'auto' : '100%');
+    const imageWidth = imageWidthProp || (isVertical ? '100%' : 'auto');
     const contentPaddingY = isVertical ? contentPaddingX : 2;
     const typography = size === CARD_SIZE.SM
         ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
@@ -90,7 +105,7 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
                 } }, { children: _jsx("img", { src: image, alt: alt, style: {
                         width: imageWidth,
                         height: imageHeight,
-                        objectFit: 'scale-down',
+                        objectFit: objectFit,
                     } }) }))), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(Row, Object.assign({ sx: Object.assign({ bg: COLOR.PRIMARY, color: COLOR.WHITE, width: '100%', px: contentPaddingX, py: 3, justifyContent: 'space-between', alignItems: 'center' }, headingStyles) }, { children: [_jsxs(Row, { children: [headingIcon && (_jsx(Icon, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, sx: { mr: 2 } })), _jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, sx: {
                                     color: COLOR.WHITE,
                                     mt: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "sideEffects": false,
   "files": [