@ndlib/component-library 1.0.17 → 1.0.19

package/dist/components/composites/Card/index.d.ts

@@ -18,6 +18,7 @@ type CardChildren = React.ReactNode | ((state: CardState) => React.ReactNode);
 export type CardProps = StyledElementProps<HTMLDivElement, {
     headline?: string;
     heading?: string;
+    headlineStyles?: StylesProp;
     headingStyles?: StylesProp;
     headingIcon?: React.FC;
     headingAction?: React.ReactNode;

package/dist/components/composites/Card/index.js

@@ -52,7 +52,7 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
+export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
     const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
@@ -110,7 +110,7 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
                                     color: COLOR.WHITE,
                                     mt: 0,
                                     whiteSpace: 'nowrap',
-                                } }, { 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, sx: { mt: 0 } }, { 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'
+                                } }, { 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, sx: Object.assign({ mt: 0 }, headlineStyles) }, { 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'
                                 ? children({ isHovered, activeBackground })
                                 : children })))] })) }))] })));
 };

package/dist/components/elements/Group/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useId, useRef } from 'react';
 import { useEnvironment } from '../../providers/env';
 export var GROUP_TYPE;
 (function (GROUP_TYPE) {
@@ -35,9 +35,9 @@ export const Group = (_a) => {
     const { level: parentLevel } = useGroup();
     const { flagInDevelopment } = useEnvironment();
     const type = typeProp || GROUP_TYPE.REGION;
-    const randomSlug = useMemo(() => Math.random().toString().slice(2), []);
-    const labelId = `group-label-${randomSlug}`;
-    const labelTargetId = `labeled-${randomSlug}`;
+    const uniqueId = useId();
+    const labelId = `group-label-${uniqueId}`;
+    const labelTargetId = `labeled-${uniqueId}`;
     const headingRenderTracker = useRef({
         hasHeadingRendered: false,
     });

package/dist/components/elements/text/Heading/index.d.ts

@@ -8,6 +8,7 @@ type HeaderProps = StyledElementProps<HTMLSpanElement, {
     underline?: boolean;
     underlineColor?: COLOR;
     typography?: TYPOGRAPHY_TYPE;
+    headlineStyles?: any;
     level?: number;
 }>;
 export declare enum HEADING_SIZE {

package/dist/components/elements/text/Heading/index.js

@@ -39,7 +39,7 @@ const LEVEL_TYPOGRAPHY_MAP = {
     6: TYPOGRAPHY_TYPE.HEADING_SMALL,
 };
 export const Heading = (_a) => {
-    var { sx, size, standalone, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "typography", "level"]);
+    var { sx, size, standalone, underline, underlineColor, headlineStyles, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "headlineStyles", "typography", "level"]);
     const { level: groupLevel, labelId, type, trackHeadingRendered } = useGroup();
     const { flagInDevelopment } = useEnvironment();
     const theme = useTheme();

package/package.json

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