@ndlib/component-library 1.0.5 → 1.0.7

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/dist/components/elements/text/ReadMore/index.js

@@ -10,12 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTheme } from '../../../../theme';
 import { COLOR, colors } from '../../../../theme/colors';
 import { getTypographyStyles, } from '../../../../theme/typography';
 import { useMediaQuery } from '../../../providers/media';
 import { multiplyRemSize } from '../../../../utils/misc';
+import { useManualRerender } from '../../../../utils/hooks/useManualRerender';
 const ReadMoreLink = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
@@ -44,22 +45,23 @@ export const useLinesHeight = (args) => {
     });
 };
 export const ReadMore = (_a) => {
+    var _b, _c;
     var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
     const ref = React.useRef(null);
     const [showEllipsis, setShowEllipsis] = useState(true);
+    const forceRerender = useManualRerender();
     const wrapperHeight = useLinesHeight({ typography, lines });
     const { screenSize } = useMediaQuery();
     const { color: _color, bg: _bg } = sx || {};
     const color = Array.isArray(_color) ? _color[0] : _color;
     const bg = Array.isArray(_bg) ? _bg[0] : _bg;
-    React.useEffect(() => {
+    useEffect(() => {
+        forceRerender({
+            delay: [100, 500, 2000],
+        });
+    }, []);
+    useEffect(() => {
         if (ref.current) {
-            if (fixedHeight) {
-                ref.current.style.height = wrapperHeight;
-            }
-            else {
-                ref.current.style.maxHeight = wrapperHeight;
-            }
             const isOverflowing = ref.current.scrollHeight > ref.current.clientHeight;
             if (isOverflowing) {
                 setShowEllipsis(true);
@@ -68,9 +70,12 @@ export const ReadMore = (_a) => {
                 setShowEllipsis(false);
             }
         }
-    }, [children, wrapperHeight, fixedHeight, screenSize]);
-    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, style: {
-            overflow: 'hidden',
-            position: 'relative',
-        }, sx: Object.assign(Object.assign({}, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
+    }, [
+        children,
+        wrapperHeight,
+        screenSize,
+        (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
+        (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.clientHeight,
+    ]);
+    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, sx: Object.assign(Object.assign({ maxHeight: wrapperHeight, overflow: 'hidden', position: 'relative', height: fixedHeight ? wrapperHeight : 'auto' }, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
 };

package/dist/utils/hooks/useManualRerender.d.ts

@@ -0,0 +1,3 @@
+export declare const useManualRerender: () => (params?: {
+    delay: number | number[];
+}) => void;

package/dist/utils/hooks/useManualRerender.js

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+export const useManualRerender = () => {
+    const [renderCount, updateRenderCount] = useState(0);
+    return useCallback((params) => {
+        const { delay } = params || {};
+        if (delay) {
+            const delayArray = Array.isArray(delay) ? delay : [delay];
+            for (const timeout of delayArray) {
+                setTimeout(() => {
+                    updateRenderCount((renderCount) => renderCount + 1);
+                }, timeout);
+            }
+        }
+        else {
+            updateRenderCount(renderCount + 1);
+        }
+    }, [renderCount, updateRenderCount]);
+};

package/package.json

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