@ndlib/component-library 0.0.99 → 0.0.100
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.
|
@@ -6,6 +6,7 @@ type Story = StoryObj<typeof Card>;
|
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const TruncateHeadline: Story;
|
|
8
8
|
export declare const Horizontal: Story;
|
|
9
|
+
export declare const CustomBackgroundColor: Story;
|
|
9
10
|
export declare const DateCards: Story;
|
|
10
11
|
export declare const Clickable: Story;
|
|
11
12
|
export declare const Raised: Story;
|
|
@@ -93,8 +93,12 @@ export const Horizontal = {
|
|
|
93
93
|
render: () => (_jsx(Column, { children: horizontalCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL })))) })),
|
|
94
94
|
args: {},
|
|
95
95
|
};
|
|
96
|
+
export const CustomBackgroundColor = {
|
|
97
|
+
render: () => (_jsx(Column, { children: headlinedCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, backgroundColor: COLOR.ND_SKY_BLUE })))) })),
|
|
98
|
+
args: {},
|
|
99
|
+
};
|
|
96
100
|
export const DateCards = {
|
|
97
|
-
render: () => (_jsx(Column, { children: dateCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL, sx: { height: '120px' } })))) })),
|
|
101
|
+
render: () => (_jsx(Column, { children: dateCards.map((props, i) => (_createElement(Card, Object.assign({}, props, { key: i, layout: CARD_LAYOUT.HORIZONTAL, sx: { height: '120px' }, backgroundColor: COLOR.TRANSPARENT })))) })),
|
|
98
102
|
args: {},
|
|
99
103
|
};
|
|
100
104
|
export const Clickable = {
|
|
@@ -52,7 +52,7 @@ 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, imageHeight: imageHeightProp, imageWidth: imageWidthProp, children, }) => {
|
|
55
|
+
export const Card = ({ size, displayDate, headline, image, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, 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;
|
|
@@ -71,7 +71,7 @@ export const Card = ({ size, displayDate, headline, image, layout, onClick, rais
|
|
|
71
71
|
if (onClick && e.key === KEY_CODES.ENTER) {
|
|
72
72
|
onClick();
|
|
73
73
|
}
|
|
74
|
-
}, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
|
|
74
|
+
}, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : COLOR.WHITE, borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
|
|
75
75
|
? {
|
|
76
76
|
transform: 'scale(1.01)',
|
|
77
77
|
borderColor: COLOR.ND_SKY_BLUE_DARK,
|