@ndlib/component-library 1.0.19 → 1.0.20

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.
Files changed (6) hide show
  1. package/dist/components/composites/Card/Card.test.js +4 -4
  2. package/dist/components/elements/Markdown/index.js +17 -6
  3. package/dist/components/elements/text/Heading/Heading.test.js +2 -2
  4. package/dist/components/elements/text/Heading/index.d.ts +1 -0
  5. package/dist/components/elements/text/Heading/index.js +3 -3
  6. package/package.json +1 -1
package/dist/components/composites/Card/Card.test.js CHANGED
@@ -28,12 +28,12 @@ describe('Card', () => {
28
28
  expect(mockClickHandler).toBeCalledTimes(2);
29
29
  });
30
30
  it('labels card with headline when passed', () => {
31
- const { getByLabelText } = render(_jsx(Card, { headline: MOCK_HEADLINE }));
32
- expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
31
+ const { getByText } = render(_jsx(Card, { headline: MOCK_HEADLINE }));
32
+ expect(getByText(MOCK_HEADLINE)).toBeDefined();
33
33
  });
34
34
  it('labels card with heading when passed', () => {
35
- const { getByLabelText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
36
- expect(getByLabelText(MOCK_HEADLINE)).toBeDefined();
35
+ const { getByText } = render(_jsx(Card, { heading: MOCK_HEADLINE }));
36
+ expect(getByText(MOCK_HEADLINE)).toBeDefined();
37
37
  });
38
38
  it('renders the image with containImage prop', () => {
39
39
  const imageSrc = 'https://via.placeholder.com/150';
package/dist/components/elements/Markdown/index.js CHANGED
@@ -87,13 +87,24 @@ export const Markdown = (_a) => {
87
87
  sanitizedContent = pullOutVideos(sanitizedContent);
88
88
  sanitizedContent = sanitizeHtml(sanitizedContent);
89
89
  }
90
+ const slugify = (text) => {
91
+ return (text
92
+ .toString()
93
+ .toLowerCase()
94
+ .trim()
95
+ .replace(/\s+/g, '-')
96
+ .replace(/[^\w\-]+/g, '')
97
+ .replace(/--+/g, '-')
98
+ .replace(/^-+/, '')
99
+ .replace(/-+$/, ''));
100
+ };
90
101
  return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw, remarkGfm] : [remarkGfm], components: {
91
- 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) }))),
92
- 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) }))),
93
- 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) }))),
94
- 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) }))),
95
- 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) }))),
96
- 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) }))),
102
+ 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) }))),
103
+ 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) }))),
104
+ 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) }))),
105
+ 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) }))),
106
+ 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) }))),
107
+ 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) }))),
97
108
  code: (props) => _jsx(Caption, Object.assign({}, props)),
98
109
  ol: (props) => (_jsx(List, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
99
110
  ul: (props) => (_jsx(List, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),
package/dist/components/elements/text/Heading/Heading.test.js CHANGED
@@ -40,8 +40,8 @@ describe('Heading', () => {
40
40
  expect(() => render(_jsx(Group, Object.assign({ type: GROUP_TYPE.GROUP }, { children: _jsx(Heading, { children: "Foo" }) })))).toThrow();
41
41
  }));
42
42
  it('labels group target automatically', () => {
43
- const { getByLabelText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));
44
- expect(getByLabelText('Foo')).toBeDefined();
43
+ const { getByText } = render(_jsx(Group, { children: _jsx(Heading, { children: "Foo" }) }));
44
+ expect(getByText('Foo')).toBeDefined();
45
45
  });
46
46
  it('is required to render region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
47
47
  vi.useFakeTimers();
package/dist/components/elements/text/Heading/index.d.ts CHANGED
@@ -5,6 +5,7 @@ import { COLOR } from '../../../../theme/colors';
5
5
  type HeaderProps = StyledElementProps<HTMLSpanElement, {
6
6
  size?: HEADING_SIZE;
7
7
  standalone?: boolean;
8
+ id?: string;
8
9
  underline?: boolean;
9
10
  underlineColor?: COLOR;
10
11
  typography?: TYPOGRAPHY_TYPE;
package/dist/components/elements/text/Heading/index.js CHANGED
@@ -39,8 +39,8 @@ const LEVEL_TYPOGRAPHY_MAP = {
39
39
  6: TYPOGRAPHY_TYPE.HEADING_SMALL,
40
40
  };
41
41
  export const Heading = (_a) => {
42
- var { sx, size, standalone, underline, underlineColor, headlineStyles, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "headlineStyles", "typography", "level"]);
43
- const { level: groupLevel, labelId, type, trackHeadingRendered } = useGroup();
42
+ 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"]);
43
+ const { level: groupLevel, type, trackHeadingRendered } = useGroup();
44
44
  const { flagInDevelopment } = useEnvironment();
45
45
  const theme = useTheme();
46
46
  const level = levelParam || groupLevel;
@@ -78,7 +78,7 @@ export const Heading = (_a) => {
78
78
  if (type !== GROUP_TYPE.REGION && !standalone) {
79
79
  flagInDevelopment('Heading component should be used within a Group component with property type={GROUP_TYPE.REGION} or given the standalone flag');
80
80
  }
81
- 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);
81
+ 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);
82
82
  switch (level) {
83
83
  case 1:
84
84
  return _jsx("h1", Object.assign({}, headerProps));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndlib/component-library",
3
- "version": "1.0.19",
3
+ "version": "1.0.20",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "files": [