@ndlib/component-library 1.0.18 → 1.0.20

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

@@ -28,12 +28,12 @@ describe('Card', () => {
         expect(mockClickHandler).toBeCalledTimes(2);
     });
     it('labels card with headline when passed', () => {
-        const { getByLabelText } = render(_jsx(Card, { headline: MOCK_HEADLINE }));
-        expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
+        const { getByText } = render(_jsx(Card, { headline: MOCK_HEADLINE }));
+        expect(getByText(MOCK_HEADLINE)).toBeDefined();
     });
     it('labels card with heading when passed', () => {
-        const { getByLabelText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
-        expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
+        const { getByText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
+        expect(getByText(MOCK_HEADLINE)).toBeDefined();
     });
     it('renders the image with containImage prop', () => {
         const imageSrc = 'https://via.placeholder.com/150';

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/Markdown/index.js

@@ -87,13 +87,24 @@ export const Markdown = (_a) => {
         sanitizedContent = pullOutVideos(sanitizedContent);
         sanitizedContent = sanitizeHtml(sanitizedContent);
     }
+    const slugify = (text) => {
+        return (text
+            .toString()
+            .toLowerCase()
+            .trim()
+            .replace(/\s+/g, '-')
+            .replace(/[^\w\-]+/g, '')
+            .replace(/--+/g, '-')
+            .replace(/^-+/, '')
+            .replace(/-+$/, ''));
+    };
     return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
-                h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h1) }))),
-                h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h2) }))),
-                h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h3) }))),
-                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h4) }))),
-                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h5) }))),
-                h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h6) }))),
+                h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h1) }))),
+                h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h2) }))),
+                h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h3) }))),
+                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, id: slugify(props.children.toString()), sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h4) }))),
+                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, id: slugify(props.children.toString()), level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h5) }))),
+                h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, id: slugify(props.children.toString()), level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h6) }))),
                 code: (props) => _jsx(Caption, Object.assign({}, props)),
                 ol: (props) => (_jsx(List, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
                 ul: (props) => (_jsx(List, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),

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

@@ -40,8 +40,8 @@ describe('Heading', () => {
         expect(() => render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Heading, { children: "Foo" }) })))).toThrow();
     }));
     it('labels group target automatically', () => {
-        const { getByLabelText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));
-        expect(getByLabelText('Foo')).toBeDefined();
+        const { getByText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));
+        expect(getByText('Foo')).toBeDefined();
     });
     it('is required to render region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
         vi.useFakeTimers();

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

@@ -5,6 +5,7 @@ import { COLOR } from '../../../../theme/colors';
 type HeaderProps = StyledElementProps<HTMLSpanElement, {
     size?: HEADING_SIZE;
     standalone?: boolean;
+    id?: string;
     underline?: boolean;
     underlineColor?: COLOR;
     typography?: TYPOGRAPHY_TYPE;

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

@@ -39,8 +39,8 @@ const LEVEL_TYPOGRAPHY_MAP = {
     6: TYPOGRAPHY_TYPE.HEADING_SMALL,
 };
 export const Heading = (_a) => {
-    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();
+    var { sx, size, standalone, id, underline, underlineColor, headlineStyles, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "id", "underline", "underlineColor", "headlineStyles", "typography", "level"]);
+    const { level: groupLevel, type, trackHeadingRendered } = useGroup();
     const { flagInDevelopment } = useEnvironment();
     const theme = useTheme();
     const level = levelParam || groupLevel;
@@ -78,7 +78,7 @@ export const Heading = (_a) => {
     if (type !== GROUP_TYPE.REGION && !standalone) {
         flagInDevelopment('Heading component should be used within a Group component with property type={GROUP_TYPE.REGION} or given the standalone flag');
     }
-    const headerProps = Object.assign({ id: labelId, role: 'heading', 'aria-level': level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: COLOR.PRIMARY, mt: topMargin }, getTypographyStyles(typography)), sx) }, rest);
+    const headerProps = Object.assign({ id: id, role: 'heading', 'aria-level': level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: COLOR.PRIMARY, mt: topMargin }, getTypographyStyles(typography)), sx) }, rest);
     switch (level) {
         case 1:
             return _jsx("h1", Object.assign({}, headerProps));

package/package.json

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