@dbcdk/react-components 0.0.70 → 0.0.71
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.
|
@@ -24,7 +24,7 @@ function getVariantClass(variant, s) {
|
|
|
24
24
|
return s.variantDefault;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
|
|
27
|
+
function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, headerAddition, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
|
|
28
28
|
const outerStyle = width ? { ['--width']: `${width}%` } : undefined;
|
|
29
29
|
const mediaStyle = mediaWidth
|
|
30
30
|
? { ['--card-media-width']: `${mediaWidth}px` }
|
|
@@ -35,7 +35,7 @@ function CardImpl({ title, loading = false, variant = 'default', size = 'md', he
|
|
|
35
35
|
const showSection = !loading && (showSectionDivider || !!sectionTitle);
|
|
36
36
|
const showBody = !loading && !!children;
|
|
37
37
|
const showActions = !loading && !!actions;
|
|
38
|
-
const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
|
|
38
|
+
const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, addition: headerAddition, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
|
|
39
39
|
// keep existing behavior
|
|
40
40
|
const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
|
|
41
41
|
return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));
|
|
@@ -125,6 +125,10 @@
|
|
|
125
125
|
margin-inline-start: var(--spacing-xl);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
+
.dbc-ms-auto {
|
|
129
|
+
margin-inline-start: auto;
|
|
130
|
+
}
|
|
131
|
+
|
|
128
132
|
.dbc-me-xxs {
|
|
129
133
|
margin-inline-end: var(--spacing-xxs);
|
|
130
134
|
}
|
|
@@ -144,6 +148,14 @@
|
|
|
144
148
|
margin-inline-end: var(--spacing-xl);
|
|
145
149
|
}
|
|
146
150
|
|
|
151
|
+
.dbc-me-auto {
|
|
152
|
+
margin-inline-end: auto;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.dbc-mx-auto {
|
|
156
|
+
margin-inline: auto;
|
|
157
|
+
}
|
|
158
|
+
|
|
147
159
|
/* Padding - all axes */
|
|
148
160
|
.dbc-p-xxs {
|
|
149
161
|
padding: var(--spacing-xxs);
|