@ndlib/component-library 1.0.4 → 1.0.6

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;
 export declare const Default: Story;
+export declare const ContainedImage: Story;
 export declare const TruncateHeadline: Story;
 export declare const Horizontal: Story;
 export declare const CustomBackgroundColor: Story;

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

@@ -16,7 +16,23 @@ export default meta;
 const headlinedCards = [
     {
         headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
-        image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/14_15_I_Ten_American_Diaries_29a3788848.jpg',
+        size: CARD_SIZE.SM,
+        sx: {
+            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',
         size: CARD_SIZE.SM,
         sx: {
             width: '500px',
@@ -24,7 +40,7 @@ const headlinedCards = [
     },
     {
         headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer. Other text to make this longer than the other card.',
-        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png',
         size: CARD_SIZE.SM,
         sx: {
             width: '500px',
@@ -85,6 +101,10 @@ export const Default = {
     render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i })))) })),
     args: {},
 };
+export const ContainedImage = {
+    render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({ containImage: true, containerHeight: '280px' }, props, { key: i })))) })),
+    args: {},
+};
 export const TruncateHeadline = {
     render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2 })))) })),
     args: {},

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import { vi } from 'vitest';
+import { COLOR } from '../../../theme/colors';
 import { render } from '../../../utils/test';
 import { Card } from '.';
 import { KEY_CODES } from '../../../utils/misc';
@@ -34,4 +35,38 @@ describe('Card', () => {
         const { getByLabelText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
         expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
     });
+    it('renders the image with containImage prop', () => {
+        const imageSrc = 'https://via.placeholder.com/150';
+        const altText = 'Test Image';
+        const containerWidth = '500px';
+        const containerHeight = '280px';
+        render(_jsx(Card, { image: imageSrc, alt: altText, containImage: true, containerWidth: containerWidth, containerHeight: containerHeight }));
+        const imageElement = screen.getByAltText(altText);
+        expect(imageElement).toBeInTheDocument();
+        expect(imageElement).toHaveStyle({
+            width: '100%',
+            height: 'auto',
+            objectFit: 'scale-down',
+        });
+        const containerElement = imageElement.closest('div');
+        expect(containerElement).toHaveStyle({
+            width: containerWidth,
+            height: containerHeight,
+            backgroundColor: COLOR.ND_SKY_BLUE,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        });
+    });
+    it('renders the image without containImage prop', () => {
+        const imageSrc = 'https://via.placeholder.com/150';
+        const altText = 'Test Image';
+        render(_jsx(Card, { image: imageSrc, alt: altText }));
+        const imageElement = screen.getByAltText(altText);
+        expect(imageElement).toBeInTheDocument();
+        expect(imageElement).toHaveStyle({
+            width: '100%',
+            height: 'auto',
+        });
+    });
 });

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"
@@ -32,6 +32,9 @@ export type CardProps = StyledElementProps<HTMLDivElement, {
     raised?: boolean;
     imageHeight?: string;
     imageWidth?: string;
+    containerWidth?: string;
+    containerHeight?: string;
+    containImage?: boolean;
     backgroundColor?: COLOR;
 }, CardChildren>;
 export declare const Card: React.FC<CardProps>;

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;
@@ -52,17 +52,32 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
+export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
     const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     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
@@ -77,10 +92,21 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
                     borderColor: COLOR.ND_SKY_BLUE_DARK,
                     backgroundColor: COLOR.ND_SKY_BLUE,
                 }
-                : {} }, sx) }, { children: [image && (_jsx("img", { src: image, alt: alt, style: {
+                : {} }, sx) }, { children: [image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
                     width: imageWidth,
                     height: imageHeight,
-                } })), 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: {
+                } })), image && containImage && (_jsx(Box, Object.assign({ sx: {
+                    width: containerWidth || '500px',
+                    height: containerHeight || '280px',
+                    backgroundColor: COLOR.ND_SKY_BLUE,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } }, { children: _jsx("img", { src: image, alt: alt, style: {
+                        width: imageWidth,
+                        height: imageHeight,
+                        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,
                                     whiteSpace: 'nowrap',

package/dist/theme/colors.d.ts

@@ -27,7 +27,7 @@ export declare enum COLOR {
     ND_GOLD_LIGHT = "ndGoldLight",
     ND_GOLD_DARK = "ndGoldDark",
     ND_GREEN = "ndGreem",
-    ND_GREEN_LIGHT = "ndGreemLight",
+    ND_GREEN_LIGHT = "ndGreenLight",
     ND_SKY_BLUE = "ndSkyBlue",
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",
     ND_SKY_BLUE_LIGHT = "ndSkyBlueLight",

package/dist/theme/colors.js

@@ -28,7 +28,7 @@ export var COLOR;
     COLOR["ND_GOLD_LIGHT"] = "ndGoldLight";
     COLOR["ND_GOLD_DARK"] = "ndGoldDark";
     COLOR["ND_GREEN"] = "ndGreem";
-    COLOR["ND_GREEN_LIGHT"] = "ndGreemLight";
+    COLOR["ND_GREEN_LIGHT"] = "ndGreenLight";
     COLOR["ND_SKY_BLUE"] = "ndSkyBlue";
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
     COLOR["ND_SKY_BLUE_LIGHT"] = "ndSkyBlueLight";

package/dist/theme/index.d.ts

@@ -45,7 +45,7 @@ export declare const theme: {
         ndGoldLight: string;
         ndGoldDark: string;
         ndGreem: string;
-        ndGreemLight: string;
+        ndGreenLight: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndSkyBlueLight: string;
@@ -149,7 +149,7 @@ export declare const useTheme: () => {
         ndGoldLight: string;
         ndGoldDark: string;
         ndGreem: string;
-        ndGreemLight: string;
+        ndGreenLight: string;
         ndSkyBlue: string;
         ndSkyBlueDark: string;
         ndSkyBlueLight: string;

package/package.json

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