@oslokommune/punkt-react 12.42.11 → 12.42.13
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.
- package/CHANGELOG.md +18 -0
- package/dist/punkt-react.es.js +10382 -10387
- package/dist/punkt-react.umd.js +435 -435
- package/package.json +4 -4
- package/src/components/heading/Heading.test.tsx +7 -15
- package/src/components/heading/Heading.tsx +5 -8
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-react",
|
|
3
|
-
"version": "12.42.
|
|
3
|
+
"version": "12.42.13",
|
|
4
4
|
"description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@lit-labs/ssr-dom-shim": "^1.2.1",
|
|
40
40
|
"@lit/react": "^1.0.7",
|
|
41
|
-
"@oslokommune/punkt-elements": "^12.42.
|
|
41
|
+
"@oslokommune/punkt-elements": "^12.42.13",
|
|
42
42
|
"angular-html-parser": "^6.0.2",
|
|
43
43
|
"html-format": "^1.1.7",
|
|
44
44
|
"prettier": "^3.3.3",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@babel/plugin-proposal-private-property-in-object": "^7.18.6",
|
|
51
51
|
"@oslokommune/punkt-assets": "^12.42.11",
|
|
52
|
-
"@oslokommune/punkt-css": "^12.42.
|
|
52
|
+
"@oslokommune/punkt-css": "^12.42.13",
|
|
53
53
|
"@testing-library/jest-dom": "^6.5.0",
|
|
54
54
|
"@testing-library/react": "^16.0.1",
|
|
55
55
|
"@testing-library/user-event": "^14.5.2",
|
|
@@ -112,5 +112,5 @@
|
|
|
112
112
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
113
113
|
},
|
|
114
114
|
"license": "MIT",
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "81079783b4ede62d8be446f042cbe3d61a3b5061"
|
|
116
116
|
}
|
|
@@ -23,9 +23,9 @@ describe('PktHeading', () => {
|
|
|
23
23
|
await window.customElements.whenDefined('pkt-heading')
|
|
24
24
|
|
|
25
25
|
const headings = container.querySelectorAll('pkt-heading')
|
|
26
|
-
expect(headings[0].
|
|
27
|
-
expect(headings[1].
|
|
28
|
-
expect(headings[2].
|
|
26
|
+
expect(headings[0]).toHaveAttribute('aria-level', '1')
|
|
27
|
+
expect(headings[1]).toHaveAttribute('aria-level', '2')
|
|
28
|
+
expect(headings[2]).toHaveAttribute('aria-level', '3')
|
|
29
29
|
})
|
|
30
30
|
|
|
31
31
|
test('renders with different sizes', async () => {
|
|
@@ -33,9 +33,8 @@ describe('PktHeading', () => {
|
|
|
33
33
|
const { container } = render(<PktHeading size="xlarge">Large Heading</PktHeading>)
|
|
34
34
|
await window.customElements.whenDefined('pkt-heading')
|
|
35
35
|
|
|
36
|
-
const heading = container.querySelector('.pkt-heading')
|
|
37
36
|
const headingElement = container.querySelector('pkt-heading')
|
|
38
|
-
expect(
|
|
37
|
+
expect(headingElement).toHaveClass('pkt-heading--xlarge')
|
|
39
38
|
expect(headingElement).toHaveAttribute('size', 'xlarge')
|
|
40
39
|
})
|
|
41
40
|
|
|
@@ -43,23 +42,16 @@ describe('PktHeading', () => {
|
|
|
43
42
|
const { container } = render(<PktHeading visuallyHidden>Hidden Heading</PktHeading>)
|
|
44
43
|
await window.customElements.whenDefined('pkt-heading')
|
|
45
44
|
|
|
46
|
-
const heading = container.querySelector('.pkt-heading')
|
|
47
45
|
const headingElement = container.querySelector('pkt-heading')
|
|
48
|
-
expect(
|
|
46
|
+
expect(headingElement).toHaveClass('pkt-sr-only')
|
|
49
47
|
expect(headingElement).toHaveAttribute('visuallyHidden')
|
|
50
48
|
})
|
|
51
49
|
|
|
52
|
-
test('renders with
|
|
53
|
-
const { container } = render(
|
|
54
|
-
<PktHeading noSpacing align="center">
|
|
55
|
-
Center Heading
|
|
56
|
-
</PktHeading>,
|
|
57
|
-
)
|
|
50
|
+
test('renders with align props', async () => {
|
|
51
|
+
const { container } = render(<PktHeading align="center">Center Heading</PktHeading>)
|
|
58
52
|
await window.customElements.whenDefined('pkt-heading')
|
|
59
53
|
|
|
60
|
-
const heading = container.querySelector('.pkt-heading')
|
|
61
54
|
const headingElement = container.querySelector('pkt-heading')
|
|
62
|
-
expect(heading).toHaveClass('pkt-heading--noSpacing')
|
|
63
55
|
expect(headingElement).toHaveAttribute('align', 'center')
|
|
64
56
|
})
|
|
65
57
|
|
|
@@ -2,16 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
import { createComponent } from '@lit/react'
|
|
4
4
|
import { FC, forwardRef } from 'react'
|
|
5
|
-
import { PktElConstructor
|
|
6
|
-
import { PktHeading as PktElHeading,
|
|
5
|
+
import { PktElConstructor } from '@/interfaces/IPktElements'
|
|
6
|
+
import { PktHeading as PktElHeading, IPktHeading as IPktElHeading } from '@oslokommune/punkt-elements'
|
|
7
7
|
import React, { ForwardRefExoticComponent } from 'react'
|
|
8
8
|
|
|
9
|
-
export interface IPktHeading extends
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
visuallyHidden?: boolean
|
|
13
|
-
noSpacing?: boolean
|
|
14
|
-
align?: 'start' | 'center' | 'end'
|
|
9
|
+
export interface IPktHeading extends IPktElHeading {
|
|
10
|
+
children?: React.ReactNode | React.ReactNode[]
|
|
11
|
+
ref?: React.LegacyRef<HTMLElement>
|
|
15
12
|
}
|
|
16
13
|
|
|
17
14
|
const LitComponent: FC<IPktHeading> = createComponent({
|