@dbcdk/react-components 0.0.70 → 0.0.72

package/dist/components/card/Card.d.ts

@@ -11,6 +11,7 @@ export interface CardProps {
     size?: CardSize;
     headerMarker?: boolean;
     headerIcon?: ReactNode;
+    headerAddition?: ReactNode;
     severity?: Severity;
     image?: ReactNode;
     imgPlacement?: CardImagePlacement;

package/dist/components/card/Card.js

@@ -24,7 +24,7 @@ function getVariantClass(variant, s) {
             return s.variantDefault;
     }
 }
-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, }) {
+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, }) {
     const outerStyle = width ? { ['--width']: `${width}%` } : undefined;
     const mediaStyle = mediaWidth
         ? { ['--card-media-width']: `${mediaWidth}px` }
@@ -35,7 +35,7 @@ function CardImpl({ title, loading = false, variant = 'default', size = 'md', he
     const showSection = !loading && (showSectionDivider || !!sectionTitle);
     const showBody = !loading && !!children;
     const showActions = !loading && !!actions;
-    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] })] }));
+    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] })] }));
     // keep existing behavior
     const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
     return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));

package/dist/components/card/Card.module.css

@@ -112,6 +112,11 @@
   gap: var(--spacing-sm);
 }
 
+.header > :first-child {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
 .headerMeta {
   display: flex;
   align-items: center;

package/dist/components/headline/Headline.module.css

@@ -4,6 +4,8 @@
   gap: var(--spacing-lg);
   flex-wrap: wrap;
   max-width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 /* Base headline */

package/dist/styles/css-helper-classes/spacing.css

@@ -125,6 +125,10 @@
   margin-inline-start: var(--spacing-xl);
 }
 
+.dbc-ms-auto {
+  margin-inline-start: auto;
+}
+
 .dbc-me-xxs {
   margin-inline-end: var(--spacing-xxs);
 }
@@ -144,6 +148,14 @@
   margin-inline-end: var(--spacing-xl);
 }
 
+.dbc-me-auto {
+  margin-inline-end: auto;
+}
+
+.dbc-mx-auto {
+  margin-inline: auto;
+}
+
 /* Padding - all axes */
 .dbc-p-xxs {
   padding: var(--spacing-xxs);

package/dist/styles/styles.css

@@ -133,6 +133,10 @@ body.dbc-app {
   font-size: var(--font-size-xs);
 }
 
+.dbc-lg-text {
+  font-size: var(--font-size-lg);
+}
+
 .dbc-medium-text {
   font-weight: var(--font-weight-medium);
 }

package/dist/styles.css

@@ -133,6 +133,10 @@ body.dbc-app {
   font-size: var(--font-size-xs);
 }
 
+.dbc-lg-text {
+  font-size: var(--font-size-lg);
+}
+
 .dbc-medium-text {
   font-weight: var(--font-weight-medium);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",