@sikt/sds-header 2.0.1 → 3.0.0
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 +52 -0
- package/README.md +32 -3
- package/dist/index.css +174 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +29 -0
- package/dist/index.d.ts +22 -6
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +7 -5
- package/dist/cjs/index.css +0 -2
- package/dist/cjs/index.css.map +0 -1
- package/dist/cjs/index.d.ts +0 -13
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/index.js.map +0 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
+
|
|
5
|
+
## [3.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@2.1.0...@sikt/sds-header@3.0.0) (2023-11-28)
|
|
6
|
+
|
|
7
|
+
### ⚠ BREAKING CHANGES
|
|
8
|
+
|
|
9
|
+
- **header:** rename prop hamburgerOpen to dropdownOpen
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- **header:** change collapsible menu item styling ([891822d](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/891822d293dec1996b86f1000aa18e2977a62a5a))
|
|
14
|
+
- **header:** rename prop hamburgerOpen to dropdownOpen ([6aedaf3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/6aedaf38d01492fa1caf7c409fbed8cb87a85325))
|
|
15
|
+
|
|
16
|
+
## [2.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@2.0.1...@sikt/sds-header@2.1.0) (2023-11-24)
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
- **header:** add collapsable menu component for mobile view ([7e5e84d](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/7e5e84d63e482a08b114d8837d61d0b56b05f204))
|
|
21
|
+
|
|
22
|
+
### [2.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@2.0.0...@sikt/sds-header@2.0.1) (2023-11-10)
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
- **header:** align main content to center ([df5e1a3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/df5e1a38e84baf85b00be3d93106682956d24605))
|
|
27
|
+
|
|
28
|
+
## [2.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@1.0.1...@sikt/sds-header@2.0.0) (2023-10-28)
|
|
29
|
+
|
|
30
|
+
### ⚠ BREAKING CHANGES
|
|
31
|
+
|
|
32
|
+
- rename componentType & componentSize props to variant & size for consistency
|
|
33
|
+
- **tokens:** add new tokens to header package
|
|
34
|
+
|
|
35
|
+
### Features
|
|
36
|
+
|
|
37
|
+
- rename componentType & componentSize props to variant & size for consistency ([e598ec8](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e598ec84d3351f2ecdaa679bdddbf947a9949f13))
|
|
38
|
+
- **tokens:** add new tokens to header package ([ea1e696](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/ea1e69636ebc60a6b3575a245546175d534a11bd))
|
|
39
|
+
|
|
40
|
+
### [1.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@1.0.0...@sikt/sds-header@1.0.1) (2023-04-29)
|
|
41
|
+
|
|
42
|
+
## 1.0.0 (2023-04-13)
|
|
43
|
+
|
|
44
|
+
### Features
|
|
45
|
+
|
|
46
|
+
- **header:** add component ([fac9e39](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/fac9e39bec2ea6c61dc50734dffb6bed721c5a14))
|
|
47
|
+
|
|
48
|
+
### Bug Fixes
|
|
49
|
+
|
|
50
|
+
- **deps:** update sds-core to version 1 ([0e6e326](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/0e6e3260dd1bd7cbfcfa35b708ffe921ac0bceef))
|
|
51
|
+
- **deps:** update sds-logo to version 1 ([2c71062](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2c71062c880abc1c1bce932f8d2b1633997b8637))
|
|
52
|
+
- **header:** specificity for logo link style ([2c9e5b7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2c9e5b76c7faa4f63fa005e1452ee18357519b83))
|
package/README.md
CHANGED
|
@@ -8,12 +8,39 @@ npm i -s @sikt/sds-header
|
|
|
8
8
|
|
|
9
9
|
### React
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
The Header uses a grid layout to position two children in the middle and on the right side of the header, while the left is used for a logo, link or text as defined in the props of the `Header` element.
|
|
12
|
+
|
|
13
|
+
Links inserted in the `HeaderNav` element will automatically be styled as `TabLink`s in desktop view, with the mobile menu view remaining unstyled. The `HeaderNav` element is optional, but should only be used when also using the `HeaderCollapsibleMenu` element.
|
|
14
|
+
|
|
15
|
+
When using the header with navigation links, the following pattern can be used to insert content into a collapsible menu that supports mobile view.
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import { Header, HeaderCollapsibleMenu, HeaderNav } from "@sikt/sds-header";
|
|
19
|
+
import "@sikt/sds-header/dist/index.css";
|
|
20
|
+
import "@sikt/sds-logo/dist/index.css";
|
|
21
|
+
|
|
22
|
+
<Header>
|
|
23
|
+
<HeaderCollapsibleMenu>
|
|
24
|
+
<HeaderNav>
|
|
25
|
+
<a href="">Link 1</a>
|
|
26
|
+
<a href="">Link 2</a>
|
|
27
|
+
</HeaderNav>
|
|
28
|
+
<Button>Button</Button>
|
|
29
|
+
</HeaderCollapsibleMenu>
|
|
30
|
+
</Header>;
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
To use the header with general content, do the following. This does not include the collapsible mobile menu.
|
|
34
|
+
|
|
35
|
+
```jsx
|
|
12
36
|
import { Header } from "@sikt/sds-header";
|
|
13
37
|
import "@sikt/sds-header/dist/index.css";
|
|
14
38
|
import "@sikt/sds-logo/dist/index.css";
|
|
15
39
|
|
|
16
|
-
<Header>
|
|
40
|
+
<Header>
|
|
41
|
+
<div>This content is positioned in the middle of the header</div>
|
|
42
|
+
<div>This content is positioned on the right side of the header</div>
|
|
43
|
+
</Header>;
|
|
17
44
|
```
|
|
18
45
|
|
|
19
46
|
### Stylesheets & custom markup
|
|
@@ -29,6 +56,8 @@ Create custom markup:
|
|
|
29
56
|
|
|
30
57
|
```html
|
|
31
58
|
<header class="sds-header">
|
|
32
|
-
|
|
59
|
+
<div class="sds-header__content">
|
|
60
|
+
<!-- content goes here -->
|
|
61
|
+
</div>
|
|
33
62
|
</header>
|
|
34
63
|
```
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,175 @@
|
|
|
1
|
-
|
|
1
|
+
/* header.pcss */
|
|
2
|
+
.sds-header {
|
|
3
|
+
align-items: center;
|
|
4
|
+
position: relative;
|
|
5
|
+
background-color: var(--sds-color-layout-background-primary);
|
|
6
|
+
--header-height: 48px;
|
|
7
|
+
}
|
|
8
|
+
@media (width >= 720px) {
|
|
9
|
+
.sds-header {
|
|
10
|
+
--header-height: 56px ;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
@media (width >= 1024px) {
|
|
14
|
+
.sds-header {
|
|
15
|
+
--header-height: 72px ;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
.sds-header__content {
|
|
19
|
+
min-height: var(--header-height);
|
|
20
|
+
padding: 0 var(--sds-space-padding-medium);
|
|
21
|
+
display: grid;
|
|
22
|
+
grid-gap: 0 var(--sds-space-padding-small);
|
|
23
|
+
grid-template-columns: 1fr auto 1fr;
|
|
24
|
+
align-items: center;
|
|
25
|
+
}
|
|
26
|
+
.sds-header__header-item {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
@media (width >= 720px) {
|
|
30
|
+
.sds-header__header-item {
|
|
31
|
+
display: unset;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
.sds-header__header-item--last-item {
|
|
35
|
+
width: -moz-fit-content;
|
|
36
|
+
width: fit-content;
|
|
37
|
+
justify-self: end;
|
|
38
|
+
}
|
|
39
|
+
.sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {
|
|
40
|
+
background-color: var(--sds-color-layout-background-primary);
|
|
41
|
+
position: absolute;
|
|
42
|
+
z-index: 1;
|
|
43
|
+
}
|
|
44
|
+
.sds-header-collapsible__button {
|
|
45
|
+
grid-column: -2 / -1;
|
|
46
|
+
justify-self: end;
|
|
47
|
+
width: -moz-fit-content;
|
|
48
|
+
width: fit-content;
|
|
49
|
+
}
|
|
50
|
+
@media (width >= 720px) {
|
|
51
|
+
.sds-header-collapsible__button.sds-button {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
.sds-header-collapsible__menu {
|
|
56
|
+
display: none;
|
|
57
|
+
gap: var(--sds-space-gap-medium);
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
overflow: auto;
|
|
60
|
+
width: 100%;
|
|
61
|
+
border-top: var(--sds-space-border-weight-thin) solid var(--sds-color-interaction-primary-strong-default);
|
|
62
|
+
padding: var(--sds-space-padding-medium);
|
|
63
|
+
}
|
|
64
|
+
.sds-header-collapsible__menu .sds-header__nav-list {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
}
|
|
68
|
+
.sds-header-collapsible__dropdown {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: var(--header-height);
|
|
71
|
+
left: 0;
|
|
72
|
+
background-color: var(--sds-color-layout-background-primary);
|
|
73
|
+
z-index: calc(var(--sds-base-zindex-drawer) + 1);
|
|
74
|
+
height: 100vh;
|
|
75
|
+
width: 100%;
|
|
76
|
+
max-height: 0;
|
|
77
|
+
transition: max-height 0.25s ease;
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
grid-column: 1 / -1;
|
|
80
|
+
}
|
|
81
|
+
.sds-header-collapsible__dropdown--open {
|
|
82
|
+
max-height: calc(100vh - var(--header-height));
|
|
83
|
+
}
|
|
84
|
+
@media (width >= 720px) {
|
|
85
|
+
.sds-header-collapsible__dropdown {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
.sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {
|
|
90
|
+
display: flex;
|
|
91
|
+
}
|
|
92
|
+
.sds-header .sds-header__logo {
|
|
93
|
+
font-size: var(--sds-base-size-relative-m);
|
|
94
|
+
}
|
|
95
|
+
.sds-header .sds-header__logo-link {
|
|
96
|
+
background-color: unset;
|
|
97
|
+
color: inherit;
|
|
98
|
+
text-decoration: none;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* header-nav.pcss */
|
|
102
|
+
.sds-header__nav-list {
|
|
103
|
+
height: 100%;
|
|
104
|
+
list-style-type: none;
|
|
105
|
+
margin: 0;
|
|
106
|
+
}
|
|
107
|
+
@media (width >= 720px) {
|
|
108
|
+
.sds-header__nav-item {
|
|
109
|
+
display: inline-flex;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
@media (width < 720px) {
|
|
113
|
+
.sds-header__nav-link {
|
|
114
|
+
align-items: center;
|
|
115
|
+
background-color: transparent;
|
|
116
|
+
border: 0 none;
|
|
117
|
+
border-radius: var(--sds-space-border-radius-small);
|
|
118
|
+
color: var(--sds-color-text-primary);
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
display: flex;
|
|
121
|
+
gap: var(--sds-space-gap-small);
|
|
122
|
+
font-size: var(--sds-typography-body-fontsize-large);
|
|
123
|
+
font-weight: var(--sds-typography-weight-regular);
|
|
124
|
+
line-height: var(--sds-typography-body-lineheight-large);
|
|
125
|
+
padding: var(--sds-space-padding-small);
|
|
126
|
+
text-decoration: none;
|
|
127
|
+
width: 100%;
|
|
128
|
+
}
|
|
129
|
+
.sds-header__nav-link:hover,
|
|
130
|
+
.sds-header__nav-link:focus-visible {
|
|
131
|
+
background: var(--sds-color-interaction-primary-transparent-highlight);
|
|
132
|
+
}
|
|
133
|
+
.sds-header__nav-link:active {
|
|
134
|
+
background: var(--sds-color-interaction-primary-transparent-pressed);
|
|
135
|
+
}
|
|
136
|
+
.sds-header__nav-link:focus-visible {
|
|
137
|
+
outline: var(--sds-focus-outline);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
@media (width >= 720px) {
|
|
141
|
+
.sds-header__nav-link {
|
|
142
|
+
align-items: center;
|
|
143
|
+
border: 0 none;
|
|
144
|
+
border-bottom: var(--sds-space-border-weight-bold) solid transparent;
|
|
145
|
+
color: var(--sds-color-text-primary);
|
|
146
|
+
display: inline-flex;
|
|
147
|
+
gap: var(--sds-space-gap-small);
|
|
148
|
+
font-size: var(--sds-typography-body-fontsize-large);
|
|
149
|
+
line-height: var(--sds-typography-body-lineheight-large);
|
|
150
|
+
padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);
|
|
151
|
+
margin-bottom: calc(var(--tab-list-border-bottom) * -1);
|
|
152
|
+
text-decoration: none;
|
|
153
|
+
}
|
|
154
|
+
.sds-header__nav-link-icon {
|
|
155
|
+
font-size: var(--sds-base-size-m);
|
|
156
|
+
}
|
|
157
|
+
.sds-header__nav-link--selected,
|
|
158
|
+
.sds-header__nav-link[aria-selected=true] {
|
|
159
|
+
border-color: var(--sds-color-interaction-primary-strong-default);
|
|
160
|
+
}
|
|
161
|
+
.sds-header__nav-link:hover,
|
|
162
|
+
.sds-header__nav-link:focus-visible {
|
|
163
|
+
background-color: var( --sds-color-interaction-primary-transparent-highlight );
|
|
164
|
+
border-color: var(--sds-color-interaction-primary-strong-highlight);
|
|
165
|
+
}
|
|
166
|
+
.sds-header__nav-link:active {
|
|
167
|
+
background-color: var( --sds-color-interaction-primary-transparent-pressed );
|
|
168
|
+
border-color: var(--sds-color-interaction-primary-strong-pressed);
|
|
169
|
+
}
|
|
170
|
+
.sds-header__nav-link:focus-visible {
|
|
171
|
+
outline: var(--sds-focus-outline);
|
|
172
|
+
outline-offset: 0;
|
|
173
|
+
}
|
|
174
|
+
}
|
|
2
175
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["header.pcss"
|
|
1
|
+
{"version":3,"sources":["../header.pcss","../header-nav.pcss"],"sourcesContent":[".sds-header {\n align-items: center;\n position: relative;\n background-color: var(--sds-color-layout-background-primary);\n\n --header-height: 48px;\n}\n\n @media (width >= 720px) {.sds-header {\n --header-height: 56px\n}\n }\n\n @media (width >= 1024px) {.sds-header {\n --header-height: 72px\n}\n }\n\n .sds-header__content {\n min-height: var(--header-height);\n padding: 0 var(--sds-space-padding-medium);\n display: grid;\n grid-gap: 0 var(--sds-space-padding-small);\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n }\n\n .sds-header__header-item {\n display: none;\n }\n\n @media (width >= 720px) {\n\n .sds-header__header-item {\n display: unset\n }\n }\n\n .sds-header__header-item--last-item {\n width: -moz-fit-content;\n width: fit-content;\n justify-self: end;\n }\n\n .sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n background-color: var(--sds-color-layout-background-primary);\n position: absolute;\n z-index: 1;\n }\n\n .sds-header-collapsible__button {\n grid-column: -2 / -1;\n justify-self: end;\n width: -moz-fit-content;\n width: fit-content;\n }\n\n @media (width >= 720px) {\n\n .sds-header-collapsible__button.sds-button {\n display: none\n }\n }\n\n .sds-header-collapsible__menu {\n display: none;\n gap: var(--sds-space-gap-medium);\n flex-direction: column;\n overflow: auto;\n width: 100%;\n border-top: var(--sds-space-border-weight-thin) solid\n var(--sds-color-interaction-primary-strong-default);\n padding: var(--sds-space-padding-medium);\n }\n\n .sds-header-collapsible__menu .sds-header__nav-list {\n display: flex;\n flex-direction: column;\n }\n\n .sds-header-collapsible__dropdown {\n position: absolute;\n top: var(--header-height);\n left: 0;\n background-color: var(--sds-color-layout-background-primary);\n z-index: calc(var(--sds-base-zindex-drawer) + 1);\n height: 100vh;\n width: 100%;\n max-height: 0;\n transition: max-height 0.25s ease;\n overflow: hidden;\n grid-column: 1 / -1;\n }\n\n .sds-header-collapsible__dropdown--open {\n max-height: calc(100vh - var(--header-height));\n }\n\n @media (width >= 720px) {\n\n .sds-header-collapsible__dropdown {\n display: none\n }\n }\n\n .sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {\n display: flex;\n }\n\n .sds-header .sds-header__logo {\n font-size: var(--sds-base-size-relative-m);\n }\n\n .sds-header .sds-header__logo-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n }\n",".sds-header__nav-list {\n height: 100%;\n list-style-type: none;\n margin: 0;\n }\n @media (width >= 720px) {\n .sds-header__nav-item {\n display: inline-flex\n }\n }\n @media (width < 720px) {\n .sds-header__nav-link {\n /* TODO: import this from Drawer component */\n align-items: center;\n background-color: transparent;\n border: 0 none;\n border-radius: var(--sds-space-border-radius-small);\n color: var(--sds-color-text-primary);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-small);\n text-decoration: none;\n width: 100%\n }\n\n .sds-header__nav-link:hover,\n .sds-header__nav-link:focus-visible {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-header__nav-link:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n .sds-header__nav-link:focus-visible {\n outline: var(--sds-focus-outline);\n }\n }\n @media (width >= 720px) {\n .sds-header__nav-link {\n /* TODO: import this from Tabs component */\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: inline-flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n text-decoration: none\n }\n\n .sds-header__nav-link-icon {\n font-size: var(--sds-base-size-m);\n }\n\n .sds-header__nav-link--selected,\n .sds-header__nav-link[aria-selected=\"true\"] {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-header__nav-link:hover,\n .sds-header__nav-link:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n border-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n\n .sds-header__nav-link:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-header__nav-link:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n }\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React, { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
5
|
+
className?: string;
|
|
6
|
+
children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
|
|
7
|
+
skipLinkId?: string;
|
|
8
|
+
skipLinkText?: string;
|
|
9
|
+
logoHref?: string;
|
|
10
|
+
logoText?: string;
|
|
11
|
+
}
|
|
12
|
+
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
interface HeaderCollapsibleMenuProps {
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
dropdownOpen?: boolean;
|
|
23
|
+
ariaLabelOpenMenu?: string;
|
|
24
|
+
ariaLabelCloseMenu?: string;
|
|
25
|
+
ariaLabelClose?: string;
|
|
26
|
+
}
|
|
27
|
+
declare const HeaderCollapsibleMenu: ({ children, dropdownOpen, ariaLabelOpenMenu, ariaLabelCloseMenu, ariaLabelClose, ...rest }: HeaderCollapsibleMenuProps) => react_jsx_runtime.JSX.Element;
|
|
28
|
+
|
|
29
|
+
export { Header, HeaderCollapsibleMenu, type HeaderCollapsibleMenuProps, HeaderNav, type HeaderNavProps, type HeaderProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
import { HTMLAttributes, ReactNode } from
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React, { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
3
4
|
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
4
5
|
className?: string;
|
|
5
|
-
children?:
|
|
6
|
+
children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
|
|
6
7
|
skipLinkId?: string;
|
|
7
8
|
skipLinkText?: string;
|
|
8
9
|
logoHref?: string;
|
|
9
10
|
logoText?: string;
|
|
10
11
|
}
|
|
11
|
-
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) =>
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
interface HeaderCollapsibleMenuProps {
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
dropdownOpen?: boolean;
|
|
23
|
+
ariaLabelOpenMenu?: string;
|
|
24
|
+
ariaLabelCloseMenu?: string;
|
|
25
|
+
ariaLabelClose?: string;
|
|
26
|
+
}
|
|
27
|
+
declare const HeaderCollapsibleMenu: ({ children, dropdownOpen, ariaLabelOpenMenu, ariaLabelCloseMenu, ariaLabelClose, ...rest }: HeaderCollapsibleMenuProps) => react_jsx_runtime.JSX.Element;
|
|
28
|
+
|
|
29
|
+
export { Header, HeaderCollapsibleMenu, type HeaderCollapsibleMenuProps, HeaderNav, type HeaderNavProps, type HeaderProps };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
"use strict";var e=require("clsx"),s=require("@sikt/sds-core"),a=require("@sikt/sds-logo"),n=require("react/jsx-runtime"),l=require("react");function r(e){return e&&e.__esModule?e:{default:e}}var d=r(e),i=({variant:e="subtle",size:s="default",children:a,className:l,onClick:r,icon:i,iconVariant:t="right",...o})=>{const c="string"==typeof a?a:void 0;return n.jsxs("button",{className:d.default("sds-button",`sds-button--${e}`,"default"!==s&&`sds-button--${s}`,l),onClick:r,"aria-label":"only"===t?c:void 0,...o,children:[i&&("left"===t||"only"===t)&&n.jsx("span",{className:"sds-button__icon",children:i}),(!i||"only"!==t)&&n.jsx("span",{className:"sds-button__label",children:a}),i&&"right"===t&&n.jsx("span",{className:"sds-button__icon",children:i})]})};l.forwardRef((({variant:e="subtle",size:s="default",children:a,className:l,href:r,icon:i,iconVariant:t="right",...o},c)=>{const h="string"==typeof a?a:void 0;return n.jsxs("a",{ref:c,className:d.default("sds-button-link","sds-button",`sds-button--${e}`,"default"!==s&&`sds-button--${s}`,l),href:r,"aria-label":"only"===t?h:void 0,...o,children:[i&&("left"===t||"only"===t)&&n.jsx("span",{className:"sds-button__icon",children:i}),(!i||"only"!==t)&&n.jsx("span",{className:"sds-button__label",children:a}),i&&"right"===t&&n.jsx("span",{className:"sds-button__icon",children:i})]})})).displayName="ButtonLink";var t=({className:e,...s})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:d.default("sds-icon",e),"aria-hidden":"true",...s,children:n.jsx("path",{d:"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z"})}),o=({className:e,...s})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:d.default("sds-icon",e),"aria-hidden":"true",...s,children:n.jsx("path",{d:"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"})});exports.Header=({children:e,className:l,skipLinkId:r="main",skipLinkText:i="Gå til innhold",logoHref:t,logoText:o,...c})=>{const h=o?n.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:o}):n.jsx(a.Logo,{variant:"primary",className:"sds-header__logo"});return n.jsxs(n.Fragment,{children:[n.jsx(s.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:n.jsx(s.Link,{href:`#${r}`,children:i})}),n.jsx("header",{className:d.default("sds-header",l),...c,children:n.jsxs("div",{className:"sds-header__content",children:[t?n.jsx(s.Link,{href:t,className:"sds-header__logo-link",children:h}):h,e]})})]})},exports.HeaderCollapsibleMenu=({children:e,dropdownOpen:s=!1,ariaLabelOpenMenu:a="Åpne meny",ariaLabelCloseMenu:r="Lukk meny",ariaLabelClose:c="Lukk",...h})=>{const u=l.useId(),[m,_]=l.useState(s);function x(){_(!m)}return l.useEffect((()=>{document.body.style.overflow=m?"hidden":"unset";const e=e=>{"Escape"===e.key&&m&&x()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[m]),l.useEffect((()=>{_(s)}),[s]),n.jsxs(n.Fragment,{children:[l.Children.map(e,((s,a)=>n.jsx(n.Fragment,{children:l.cloneElement(s,{className:d.default("sds-header__header-item",a+1===l.Children.count(e)&&"sds-header__header-item--last-item")})}))),n.jsx(i,{variant:"transparent",icon:m?n.jsx(o,{}):n.jsx(t,{}),iconVariant:m?"right":"only",onClick:x,"aria-label":m?r:a,"aria-controls":u,"aria-expanded":m,className:"sds-header-collapsible__button",children:m&&c}),n.jsx("div",{className:d.default("sds-header-collapsible__dropdown",m&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!m,id:u,...h,children:n.jsx("div",{className:"sds-header-collapsible__menu",children:e})})]})},exports.HeaderNav=({children:e,className:s,...a})=>n.jsx("nav",{className:d.default("sds-header__nav",s),...a,children:n.jsx("ul",{className:"sds-header__nav-list",children:l.Children.map(e,(e=>n.jsx("li",{className:"sds-header__nav-item",children:l.cloneElement(e,{className:"sds-header__nav-link"})})))})});//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import React, {\n AnchorHTMLAttributes,\n HTMLAttributes,\n ReactElement,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo variant={\"primary\"} className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n <div className=\"sds-header__content\">\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n\n {children}\n </div>\n </header>\n </>\n );\n};\n","import React, {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n}\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n return (\n <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n <ul className=\"sds-header__nav-list\">\n {Children.map(children, (child) => {\n return (\n <li className=\"sds-header__nav-item\">\n {cloneElement(child as ReactElement, {\n className: \"sds-header__nav-link\",\n })}\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ListIcon, XIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport React, {\n Children,\n ReactElement,\n cloneElement,\n useEffect,\n useId,\n useState,\n} from \"react\";\n\nexport interface HeaderCollapsibleMenuProps {\n children: React.ReactNode;\n dropdownOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n dropdownOpen = false,\n ariaLabelOpenMenu = \"Åpne meny\",\n ariaLabelCloseMenu = \"Lukk meny\",\n ariaLabelClose = \"Lukk\",\n ...rest\n}: HeaderCollapsibleMenuProps) => {\n const menuId = useId();\n const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n function toggleMenu() {\n setMenuOpen(!menuOpen);\n }\n\n useEffect(() => {\n document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n const close = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && menuOpen) {\n toggleMenu();\n }\n };\n\n window.addEventListener(\"keydown\", close);\n return () => window.removeEventListener(\"keydown\", close);\n }, [menuOpen]);\n\n useEffect(() => {\n setMenuOpen(dropdownOpen);\n }, [dropdownOpen]);\n\n return (\n <>\n {/* INFO: The desktop mode content of the header */}\n {Children.map(children, (child, index) => {\n return (\n <>\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__header-item\",\n index + 1 === Children.count(children) &&\n \"sds-header__header-item--last-item\",\n ),\n })}\n </>\n );\n })}\n <Button\n variant=\"transparent\"\n icon={menuOpen ? <XIcon /> : <ListIcon />}\n iconVariant={menuOpen ? \"right\" : \"only\"}\n onClick={toggleMenu}\n aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n aria-controls={menuId}\n aria-expanded={menuOpen}\n className=\"sds-header-collapsible__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-collapsible__dropdown\",\n menuOpen && \"sds-header-collapsible__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div className=\"sds-header-collapsible__menu\">\n {/* INFO: The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </>\n );\n};\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"clsx";import{ScreenReaderOnly as s,Link as a}from"@sikt/sds-core";import{Logo as n}from"@sikt/sds-logo";import{jsxs as l,jsx as r,Fragment as i}from"react/jsx-runtime";import{forwardRef as d,Children as t,cloneElement as o,useId as c,useState as h,useEffect as m}from"react";var u=({children:d,className:t,skipLinkId:o="main",skipLinkText:c="Gå til innhold",logoHref:h,logoText:m,...u})=>{const p=m?r("span",{className:"sds-header__logo-text sds-typography-body--large",children:m}):r(n,{variant:"primary",className:"sds-header__logo"});return l(i,{children:[r(s,{isFocusable:!0,className:"sds-header__skip-link",children:r(a,{href:`#${o}`,children:c})}),r("header",{className:e("sds-header",t),...u,children:l("div",{className:"sds-header__content",children:[h?r(a,{href:h,className:"sds-header__logo-link",children:p}):p,d]})})]})},p=({children:s,className:a,...n})=>r("nav",{className:e("sds-header__nav",a),...n,children:r("ul",{className:"sds-header__nav-list",children:t.map(s,(e=>r("li",{className:"sds-header__nav-item",children:o(e,{className:"sds-header__nav-link"})})))})}),_=({variant:s="subtle",size:a="default",children:n,className:i,onClick:d,icon:t,iconVariant:o="right",...c})=>{const h="string"==typeof n?n:void 0;return l("button",{className:e("sds-button",`sds-button--${s}`,"default"!==a&&`sds-button--${a}`,i),onClick:d,"aria-label":"only"===o?h:void 0,...c,children:[t&&("left"===o||"only"===o)&&r("span",{className:"sds-button__icon",children:t}),(!t||"only"!==o)&&r("span",{className:"sds-button__label",children:n}),t&&"right"===o&&r("span",{className:"sds-button__icon",children:t})]})};d((({variant:s="subtle",size:a="default",children:n,className:i,href:d,icon:t,iconVariant:o="right",...c},h)=>{const m="string"==typeof n?n:void 0;return l("a",{ref:h,className:e("sds-button-link","sds-button",`sds-button--${s}`,"default"!==a&&`sds-button--${a}`,i),href:d,"aria-label":"only"===o?m:void 0,...c,children:[t&&("left"===o||"only"===o)&&r("span",{className:"sds-button__icon",children:t}),(!t||"only"!==o)&&r("span",{className:"sds-button__label",children:n}),t&&"right"===o&&r("span",{className:"sds-button__icon",children:t})]})})).displayName="ButtonLink";var b=({className:s,...a})=>r("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:e("sds-icon",s),"aria-hidden":"true",...a,children:r("path",{d:"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z"})}),N=({className:s,...a})=>r("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:e("sds-icon",s),"aria-hidden":"true",...a,children:r("path",{d:"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"})}),v=({children:s,dropdownOpen:a=!1,ariaLabelOpenMenu:n="Åpne meny",ariaLabelCloseMenu:d="Lukk meny",ariaLabelClose:u="Lukk",...p})=>{const v=c(),[f,k]=h(a);function g(){k(!f)}return m((()=>{document.body.style.overflow=f?"hidden":"unset";const e=e=>{"Escape"===e.key&&f&&g()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[f]),m((()=>{k(a)}),[a]),l(i,{children:[t.map(s,((a,n)=>r(i,{children:o(a,{className:e("sds-header__header-item",n+1===t.count(s)&&"sds-header__header-item--last-item")})}))),r(_,{variant:"transparent",icon:r(f?N:b,{}),iconVariant:f?"right":"only",onClick:g,"aria-label":f?d:n,"aria-controls":v,"aria-expanded":f,className:"sds-header-collapsible__button",children:f&&u}),r("div",{className:e("sds-header-collapsible__dropdown",f&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!f,id:v,...p,children:r("div",{className:"sds-header-collapsible__menu",children:s})})]})};export{u as Header,v as HeaderCollapsibleMenu,p as HeaderNav};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import React, {\n AnchorHTMLAttributes,\n HTMLAttributes,\n ReactElement,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo variant={\"primary\"} className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n <div className=\"sds-header__content\">\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n\n {children}\n </div>\n </header>\n </>\n );\n};\n","import React, {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n}\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n return (\n <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n <ul className=\"sds-header__nav-list\">\n {Children.map(children, (child) => {\n return (\n <li className=\"sds-header__nav-item\">\n {cloneElement(child as ReactElement, {\n className: \"sds-header__nav-link\",\n })}\n </li>\n );\n })}\n </ul>\n </nav>\n );\n};\n","import { Button } from \"@sikt/sds-button\";\nimport { ListIcon, XIcon } from \"@sikt/sds-icons\";\nimport clsx from \"clsx\";\nimport React, {\n Children,\n ReactElement,\n cloneElement,\n useEffect,\n useId,\n useState,\n} from \"react\";\n\nexport interface HeaderCollapsibleMenuProps {\n children: React.ReactNode;\n dropdownOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n dropdownOpen = false,\n ariaLabelOpenMenu = \"Åpne meny\",\n ariaLabelCloseMenu = \"Lukk meny\",\n ariaLabelClose = \"Lukk\",\n ...rest\n}: HeaderCollapsibleMenuProps) => {\n const menuId = useId();\n const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n function toggleMenu() {\n setMenuOpen(!menuOpen);\n }\n\n useEffect(() => {\n document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n const close = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && menuOpen) {\n toggleMenu();\n }\n };\n\n window.addEventListener(\"keydown\", close);\n return () => window.removeEventListener(\"keydown\", close);\n }, [menuOpen]);\n\n useEffect(() => {\n setMenuOpen(dropdownOpen);\n }, [dropdownOpen]);\n\n return (\n <>\n {/* INFO: The desktop mode content of the header */}\n {Children.map(children, (child, index) => {\n return (\n <>\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__header-item\",\n index + 1 === Children.count(children) &&\n \"sds-header__header-item--last-item\",\n ),\n })}\n </>\n );\n })}\n <Button\n variant=\"transparent\"\n icon={menuOpen ? <XIcon /> : <ListIcon />}\n iconVariant={menuOpen ? \"right\" : \"only\"}\n onClick={toggleMenu}\n aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n aria-controls={menuId}\n aria-expanded={menuOpen}\n className=\"sds-header-collapsible__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-collapsible__dropdown\",\n menuOpen && \"sds-header-collapsible__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div className=\"sds-header-collapsible__menu\">\n {/* INFO: The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"main": "dist/
|
|
6
|
-
"module": "dist/index.
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"style": "dist/index.css",
|
|
9
9
|
"files": [
|
|
10
|
-
"
|
|
10
|
+
"CHANGELOG.md",
|
|
11
|
+
"dist",
|
|
12
|
+
"README.md"
|
|
11
13
|
],
|
|
12
14
|
"scripts": {
|
|
13
|
-
"build": "
|
|
15
|
+
"build": "tsup"
|
|
14
16
|
},
|
|
15
17
|
"dependencies": {
|
|
16
18
|
"@sikt/sds-core": "^3.0.0",
|
package/dist/cjs/index.css
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.sds-header{align-items:center;background-color:var(--sds-color-layout-background-primary);display:grid;grid-template-columns:1fr auto 1fr;min-height:48px;padding:0 var(--sds-space-padding-huge)}.sds-header__skip-link.sds-screen-reader-only--focusable:focus-within{position:absolute}.sds-header .sds-header__logo{font-size:var(--sds-base-size-relative-m)}.sds-header .sds-header__logo-link{background-color:unset;color:inherit;text-decoration:none}@media (width >= 720px){.sds-header{min-height:56px}}@media (width >= 1024px){.sds-header{min-height:72px}}
|
|
2
|
-
/*# sourceMappingURL=index.css.map */
|
package/dist/cjs/index.css.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["header.pcss"],"names":[],"mappings":"AAEA,YACE,kBAAmB,CACnB,2DAA4D,CAC5D,YAAa,CACb,kCAAmC,CACnC,eAAgB,CAChB,uCAuBF,CArBE,sEACE,iBACF,CAEA,8BACE,yCAOF,CALE,mCACE,sBAAuB,CACvB,aAAc,CACd,oBACF,CAGF,wBAtBF,YAuBI,eAMJ,CALE,CAEA,yBA1BF,YA2BI,eAEJ,CADE","file":"index.css","sourcesContent":["@import url(\"@sikt/sds-tokens/dist/css/custom-media.css\");\n\n.sds-header {\n align-items: center;\n background-color: var(--sds-color-layout-background-primary);\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n min-height: 48px;\n padding: 0 var(--sds-space-padding-huge);\n\n &__skip-link.sds-screen-reader-only--focusable:focus-within {\n position: absolute;\n }\n\n .sds-header__logo {\n font-size: var(--sds-base-size-relative-m);\n\n &-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n }\n }\n\n @media (--sds-base-breakpoint-tablet) {\n min-height: 56px;\n }\n\n @media (--sds-base-breakpoint-desktop) {\n min-height: 72px;\n }\n}\n"]}
|
package/dist/cjs/index.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { HTMLAttributes, ReactNode } from "react";
|
|
3
|
-
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
4
|
-
className?: string;
|
|
5
|
-
children?: ReactNode;
|
|
6
|
-
skipLinkId?: string;
|
|
7
|
-
skipLinkText?: string;
|
|
8
|
-
logoHref?: string;
|
|
9
|
-
logoText?: string;
|
|
10
|
-
}
|
|
11
|
-
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export type { HeaderProps };
|
|
13
|
-
export { Header };
|
package/dist/cjs/index.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),s=require("clsx"),r=require("react");function a(e){var s=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),s.default=e,Object.freeze(s)}var n=a(r);const l=r.forwardRef((({children:r,className:a,isExternal:n,noIcon:l,...t},c)=>e.jsx("a",{ref:c,className:s("sds-typography-link",n&&"sds-typography-link--external",l&&"sds-typography-link--no-icon",a),...t,children:r})));l.displayName="Link";const t=({children:r,className:a,isFocusable:n,...l})=>e.jsx("span",{className:s("sds-screen-reader-only",n&&"sds-screen-reader-only--focusable",a),...l,children:r});var c,i;function o(){return o=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var r=arguments[s];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},o.apply(this,arguments)}const d=e=>n.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 75 48"},e),c||(c=n.createElement("g",{fill:"currentColor",clipPath:"url(#Logo_svg__a)"},n.createElement("path",{d:"M52.262 1.63c-6.493 0-12.331 2.769-16.409 7.175l9.998 9.998c2.865 2.864 2.865 7.53 0 10.394l-9.998 9.998c4.092 4.406 9.93 7.175 16.409 7.175 12.358 0 22.37-10.012 22.37-22.37S64.62 1.63 52.262 1.63z"}),n.createElement("path",{d:"M29.893 24a22.277 22.277 0 0 1 5.96-15.195l-6.656-6.656c-2.864-2.865-7.53-2.865-10.394 0L2.148 18.804c-2.864 2.864-2.864 7.529 0 10.394l16.655 16.655c2.865 2.864 7.53 2.864 10.394 0l6.657-6.657a22.214 22.214 0 0 1-5.961-15.195z"}))),i||(i=n.createElement("defs",null,n.createElement("clipPath",{id:"Logo_svg__a"},n.createElement("path",{fill:"currentColor",d:"M0 0h75v48H0z"}))))),h={nb:"Kunnskapssektorens<br /> tjenesteleverandør",nn:"Kunnskapssektorens<br /> tenesteleverandør",en:"Norwegian Agency for Shared<br /> Services in Education and Research",se:"Máhttosuorggi<br /> bálvaluslágideaddji",smj:"Máhtudaksuorge<br /> dievnastusbuvtadadiddje",sma:"Maahtoesuerkien<br /> dïenesjedeellije",fkv:"Tietosektorin<br /> palvelu"},u=({variant:r="primary",className:a,lang:n="nb",...l})=>{const t="secondary"===r;return e.jsxs("div",{className:s("sds-logo",`sds-logo--${r}`,a),...l,children:[e.jsx(d,{className:"sds-logo__icon","aria-hidden":!0}),e.jsxs("div",{children:[e.jsx("div",{className:"sds-logo__title",children:"Sikt"}),t&&e.jsx("div",{className:"sds-logo__subtitle",dangerouslySetInnerHTML:{__html:h[n]}})]})]})};exports.Header=({children:r,className:a,skipLinkId:n="main",skipLinkText:c="Gå til innhold",logoHref:i,logoText:o,...d})=>{const h=o?e.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:o}):e.jsx(u,{className:"sds-header__logo"});return e.jsxs(e.Fragment,{children:[e.jsx(t,{isFocusable:!0,className:"sds-header__skip-link",children:e.jsx(l,{href:`#${n}`,children:c})}),e.jsxs("header",{className:s("sds-header",a),...d,children:[i?e.jsx(l,{href:i,className:"sds-header__logo-link",children:h}):h,r]})]})};
|
|
2
|
-
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../core/dist/index.js","../../../logo/dist/index.js","../../Header.tsx"],"sourcesContent":["import{jsx as e,jsxs as s}from\"react/jsx-runtime\";import a,{clsx as r}from\"clsx\";import{Children as l,isValidElement as i,cloneElement as c,forwardRef as n}from\"react\";const d=({children:s,className:r,title:l,...i})=>e(\"abbr\",{className:a(\"sds-typography-abbr\",r),tabIndex:0,\"data-title\":l,\"aria-label\":l,...i,children:s}),o=({children:a,aspectRatio:n,figCaption:d,...o})=>s(\"figure\",{className:\"sds-figure\",...o,children:[l.map(a,(e=>{if(i(e))return(e=>{const s={className:r(\"sds-figure__figure\",\"16x9\"===n&&\"sds-figure__figure--ratio-16x9\",e.props.className)};return c(e,s)})(e)})),d&&e(\"figcaption\",{className:\"sds-figure__caption\",children:d})]}),t=({children:s,level:r,variant:l,className:i,...c})=>e(`h${r}`,{className:a(\"sds-typography-heading\",`sds-typography-heading--${l}`,i),...c,children:s}),p=e=>t({...e,level:\"1\"}),h=e=>t({...e,level:\"2\"}),m=e=>t({...e,level:\"3\"}),y=e=>t({...e,level:\"4\"}),g=e=>t({...e,level:\"5\"}),f=e=>t({...e,level:\"6\"}),N=({children:s,variant:r=\"regular\",modifier:l,className:i,as:c=\"p\",...n})=>e(c,{className:a(\"sds-typography-body\",`sds-typography-body--${r}`,l&&`sds-typography-body--${l}`,i),...n,children:s}),u=n((({children:s,className:r,isExternal:l,noIcon:i,...c},n)=>e(\"a\",{ref:n,className:a(\"sds-typography-link\",l&&\"sds-typography-link--external\",i&&\"sds-typography-link--no-icon\",r),...c,children:s})));u.displayName=\"Link\";const b=({children:s,className:r,isFocusable:l,...i})=>e(\"span\",{className:a(\"sds-screen-reader-only\",l&&\"sds-screen-reader-only--focusable\",r),...i,children:s});export{d as Abbreviation,o as Figure,t as Heading,p as Heading1,h as Heading2,m as Heading3,y as Heading4,g as Heading5,f as Heading6,u as Link,N as Paragraph,b as ScreenReaderOnly};\n//# sourceMappingURL=index.js.map\n","import{jsxs as e,jsx as r}from\"react/jsx-runtime\";import t from\"clsx\";import*as a from\"react\";var n,s;function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(this,arguments)}const o=e=>a.createElement(\"svg\",l({xmlns:\"http://www.w3.org/2000/svg\",fill:\"none\",viewBox:\"0 0 75 48\"},e),n||(n=a.createElement(\"g\",{fill:\"currentColor\",clipPath:\"url(#Logo_svg__a)\"},a.createElement(\"path\",{d:\"M52.262 1.63c-6.493 0-12.331 2.769-16.409 7.175l9.998 9.998c2.865 2.864 2.865 7.53 0 10.394l-9.998 9.998c4.092 4.406 9.93 7.175 16.409 7.175 12.358 0 22.37-10.012 22.37-22.37S64.62 1.63 52.262 1.63z\"}),a.createElement(\"path\",{d:\"M29.893 24a22.277 22.277 0 0 1 5.96-15.195l-6.656-6.656c-2.864-2.865-7.53-2.865-10.394 0L2.148 18.804c-2.864 2.864-2.864 7.529 0 10.394l16.655 16.655c2.865 2.864 7.53 2.864 10.394 0l6.657-6.657a22.214 22.214 0 0 1-5.961-15.195z\"}))),s||(s=a.createElement(\"defs\",null,a.createElement(\"clipPath\",{id:\"Logo_svg__a\"},a.createElement(\"path\",{fill:\"currentColor\",d:\"M0 0h75v48H0z\"}))))),i={nb:\"Kunnskapssektorens<br /> tjenesteleverandør\",nn:\"Kunnskapssektorens<br /> tenesteleverandør\",en:\"Norwegian Agency for Shared<br /> Services in Education and Research\",se:\"Máhttosuorggi<br /> bálvaluslágideaddji\",smj:\"Máhtudaksuorge<br /> dievnastusbuvtadadiddje\",sma:\"Maahtoesuerkien<br /> dïenesjedeellije\",fkv:\"Tietosektorin<br /> palvelu\"},c=({variant:a=\"primary\",className:n,lang:s=\"nb\",...l})=>{const c=\"secondary\"===a;return e(\"div\",{className:t(\"sds-logo\",`sds-logo--${a}`,n),...l,children:[r(o,{className:\"sds-logo__icon\",\"aria-hidden\":!0}),e(\"div\",{children:[r(\"div\",{className:\"sds-logo__title\",children:\"Sikt\"}),c&&r(\"div\",{className:\"sds-logo__subtitle\",dangerouslySetInnerHTML:{__html:i[s]}})]})]})};export{c as Logo};\n//# sourceMappingURL=index.js.map\n","import React, { HTMLAttributes, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?: ReactNode;\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n {children}\n </header>\n </>\n );\n};\n"],"names":["u","n","forwardRef","children","s","className","r","isExternal","l","noIcon","i","c","e","ref","a","displayName","b","isFocusable","jsx","Object","assign","bind","arguments","length","t","prototype","hasOwnProperty","call","apply","this","o","createElement","xmlns","fill","viewBox","clipPath","d","id","nb","nn","en","se","smj","sma","fkv","variant","lang","dangerouslySetInnerHTML","__html","skipLinkId","skipLinkText","logoHref","logoText","rest","logoElement","_jsx","Logo","_jsxs","_Fragment","ScreenReaderOnly","Link","href","jsxs","clsx"],"mappings":"mWAA8K,MAA88BA,EAAEC,EAACC,YAAA,EAAIC,SAASC,EAAEC,UAAUC,EAAEC,WAAWC,EAAEC,OAAOC,KAAKC,GAAGV,IAAIW,MAAE,IAAI,CAACC,IAAIZ,EAAEI,UAAUS,EAAE,sBAAsBN,GAAG,gCAAgCE,GAAG,+BAA+BJ,MAAMK,EAAER,SAASC,MAAMJ,EAAEe,YAAY,OAAO,MAAMC,EAAE,EAAEb,SAASC,EAAEC,UAAUC,EAAEW,YAAYT,KAAKE,KAAKE,EAACM,IAAC,OAAO,CAACb,UAAUS,EAAE,yBAAyBN,GAAG,oCAAoCF,MAAMI,EAAEP,SAASC,ICA15C,IAAIH,EAAEG,EAAE,SAASI,IAAI,OAAOA,EAAEW,OAAOC,OAAOD,OAAOC,OAAOC,OAAO,SAAST,GAAG,IAAI,IAAIN,EAAE,EAAEA,EAAEgB,UAAUC,OAAOjB,IAAI,CAAC,IAAIkB,EAAEF,UAAUhB,GAAG,IAAI,IAAIQ,KAAKU,EAAEL,OAAOM,UAAUC,eAAeC,KAAKH,EAAEV,KAAKF,EAAEE,GAAGU,EAAEV,GAAI,CAAA,OAAOF,GAAGJ,EAAEoB,MAAMC,KAAKP,UAAW,CAAA,MAAMQ,EAAElB,GAAGE,EAAEiB,cAAc,MAAMvB,EAAE,CAACwB,MAAM,6BAA6BC,KAAK,OAAOC,QAAQ,aAAatB,GAAGX,IAAIA,EAAEa,EAAEiB,cAAc,IAAI,CAACE,KAAK,eAAeE,SAAS,qBAAqBrB,EAAEiB,cAAc,OAAO,CAACK,EAAE,2MAA2MtB,EAAEiB,cAAc,OAAO,CAACK,EAAE,0OAA0OhC,IAAIA,EAAEU,EAAEiB,cAAc,OAAO,KAAKjB,EAAEiB,cAAc,WAAW,CAACM,GAAG,eAAevB,EAAEiB,cAAc,OAAO,CAACE,KAAK,eAAeG,EAAE,sBAAsB1B,EAAE,CAAC4B,GAAG,8CAA8CC,GAAG,6CAA6CC,GAAG,uEAAuEC,GAAG,0CAA0CC,IAAI,+CAA+CC,IAAI,yCAAyCC,IAAI,+BAA+BjC,EAAE,EAAEkC,QAAQ/B,EAAE,UAAUT,UAAUJ,EAAE6C,KAAK1C,EAAE,QAAQI,MAAM,MAAMG,EAAE,cAAcG,EAAE,OAAOF,EAAAA,KAAE,MAAM,CAACP,UAAUmB,EAAE,WAAW,aAAaV,IAAIb,MAAMO,EAAEL,SAAS,CAACG,EAAAA,IAAEwB,EAAE,CAACzB,UAAU,iBAAiB,eAAc,IAAKO,EAAAA,KAAE,MAAM,CAACT,SAAS,CAACG,EAACY,IAAC,MAAM,CAACb,UAAU,kBAAkBF,SAAS,SAASQ,GAAGL,MAAE,MAAM,CAACD,UAAU,qBAAqB0C,wBAAwB,CAACC,OAAOtC,EAAEN,WAAW,iBCevzD,EACpBD,WACAE,YACA4C,aAAa,OACbC,eAAe,iBACfC,WACAC,cACGC,MAEH,MAAMC,EAAcF,EAClBG,EAAAA,IAAM,OAAA,CAAAlD,UAAU,mDACbF,SAAAiD,IAGHG,EAAAA,IAACC,EAAK,CAAAnD,UAAU,qBAGlB,OACEoD,OAAAC,EAAAA,SAAA,CAAAvD,SAAA,CACEoD,EAAAA,IAACI,EAAiB,CAAA1C,aAAY,EAAAZ,UAAU,wBACtCF,SAAAoD,EAAArC,IAAC0C,EAAK,CAAAC,KAAM,IAAIZ,IAAe9C,SAAA+C,MAEjCO,EAAQK,KAAA,SAAA,CAAAzD,UAAW0D,EAAK,aAAc1D,MAAgBgD,EACnDlD,SAAA,CAAAgD,EACCI,EAAAA,IAACK,EAAK,CAAAC,KAAMV,EAAU9C,UAAU,wBAAuBF,SACpDmD,MAKJnD,OAGL"}
|