@ndlib/component-library 0.0.68 → 0.0.70
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.
|
@@ -29,6 +29,8 @@ export type CardProps = StyledElementProps<HTMLDivElement, {
|
|
|
29
29
|
displayDate?: string;
|
|
30
30
|
onClick?: () => void;
|
|
31
31
|
raised?: boolean;
|
|
32
|
+
imageHeight?: string;
|
|
33
|
+
imageWidth?: string;
|
|
32
34
|
}, CardChildren>;
|
|
33
35
|
export declare const Card: React.FC<CardProps>;
|
|
34
36
|
export {};
|
|
@@ -52,12 +52,14 @@ const DateDisplay = ({ date: dateString }) => {
|
|
|
52
52
|
mt: 1,
|
|
53
53
|
} }, { children: MONTH_LABELS[date.getMonth()] }))] })));
|
|
54
54
|
};
|
|
55
|
-
export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, sx, children, }) => {
|
|
55
|
+
export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
|
|
56
56
|
const theme = useTheme();
|
|
57
57
|
const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
|
|
58
58
|
const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
|
|
59
59
|
const { isHovered, anchorElementProps } = useHover();
|
|
60
60
|
const [activeBackground, setActiveBackground] = useState(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
|
|
61
|
+
const imageHeight = imageHeightProp || isVertical ? 'auto' : '100%';
|
|
62
|
+
const imageWidth = imageWidthProp || isVertical ? '100%' : 'auto';
|
|
61
63
|
useEffect(() => {
|
|
62
64
|
setActiveBackground(isHovered ? COLOR.ND_SKY_BLUE : COLOR.BACKGROUND);
|
|
63
65
|
}, [isHovered]);
|
|
@@ -76,12 +78,12 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
|
|
|
76
78
|
backgroundColor: COLOR.ND_SKY_BLUE,
|
|
77
79
|
}
|
|
78
80
|
: {} }, sx) }, { children: [image && (_jsx("img", { src: image, style: {
|
|
79
|
-
width:
|
|
80
|
-
height:
|
|
81
|
+
width: imageWidth,
|
|
82
|
+
height: imageHeight,
|
|
81
83
|
} })), 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: {
|
|
82
84
|
color: COLOR.WHITE,
|
|
83
85
|
whiteSpace: 'nowrap',
|
|
84
|
-
} }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography
|
|
86
|
+
} }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
|
|
85
87
|
? children({ isHovered, activeBackground })
|
|
86
88
|
: children })))] })) }))] })));
|
|
87
89
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -27,6 +27,7 @@ export { RadioGroup } from './components/elements/Fields/RadioGroup';
|
|
|
27
27
|
export { List, ListItem, LIST_SIZE } from './components/elements/List';
|
|
28
28
|
export { ReadMore } from './components/elements/text/ReadMore';
|
|
29
29
|
export { Icon } from './components/elements/Icon';
|
|
30
|
+
export { Dropdown } from './components/elements/Dropdown';
|
|
30
31
|
export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
|
|
31
32
|
export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
|
|
32
33
|
export { Table, TableColumn } from './components/elements/Table';
|
package/dist/index.js
CHANGED
|
@@ -26,6 +26,7 @@ export { RadioGroup } from './components/elements/Fields/RadioGroup';
|
|
|
26
26
|
export { List, ListItem, LIST_SIZE } from './components/elements/List';
|
|
27
27
|
export { ReadMore } from './components/elements/text/ReadMore';
|
|
28
28
|
export { Icon } from './components/elements/Icon';
|
|
29
|
+
export { Dropdown } from './components/elements/Dropdown';
|
|
29
30
|
export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
|
|
30
31
|
export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
|
|
31
32
|
export { Table, TableColumn } from './components/elements/Table';
|
package/dist/theme/typography.js
CHANGED