@sikt/sds-header 2.1.0 → 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/dist/index.css +73 -34
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -2
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/dist/index.css
CHANGED
|
@@ -23,14 +23,6 @@
|
|
|
23
23
|
grid-template-columns: 1fr auto 1fr;
|
|
24
24
|
align-items: center;
|
|
25
25
|
}
|
|
26
|
-
.sds-header__content--desktop-only {
|
|
27
|
-
display: none;
|
|
28
|
-
}
|
|
29
|
-
@media (width >= 720px) {
|
|
30
|
-
.sds-header__content--desktop-only {
|
|
31
|
-
display: flex;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
26
|
.sds-header__header-item {
|
|
35
27
|
display: none;
|
|
36
28
|
}
|
|
@@ -45,23 +37,23 @@
|
|
|
45
37
|
justify-self: end;
|
|
46
38
|
}
|
|
47
39
|
.sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {
|
|
40
|
+
background-color: var(--sds-color-layout-background-primary);
|
|
48
41
|
position: absolute;
|
|
49
42
|
z-index: 1;
|
|
50
|
-
background-color: var(--sds-color-layout-background-primary);
|
|
51
43
|
}
|
|
52
|
-
.sds-header-
|
|
44
|
+
.sds-header-collapsible__button {
|
|
53
45
|
grid-column: -2 / -1;
|
|
54
46
|
justify-self: end;
|
|
55
47
|
width: -moz-fit-content;
|
|
56
48
|
width: fit-content;
|
|
57
49
|
}
|
|
58
50
|
@media (width >= 720px) {
|
|
59
|
-
.sds-header-
|
|
51
|
+
.sds-header-collapsible__button.sds-button {
|
|
60
52
|
display: none;
|
|
61
53
|
}
|
|
62
54
|
}
|
|
63
|
-
.sds-header-
|
|
64
|
-
display:
|
|
55
|
+
.sds-header-collapsible__menu {
|
|
56
|
+
display: none;
|
|
65
57
|
gap: var(--sds-space-gap-medium);
|
|
66
58
|
flex-direction: column;
|
|
67
59
|
overflow: auto;
|
|
@@ -69,10 +61,11 @@
|
|
|
69
61
|
border-top: var(--sds-space-border-weight-thin) solid var(--sds-color-interaction-primary-strong-default);
|
|
70
62
|
padding: var(--sds-space-padding-medium);
|
|
71
63
|
}
|
|
72
|
-
.sds-header-
|
|
73
|
-
display:
|
|
64
|
+
.sds-header-collapsible__menu .sds-header__nav-list {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
74
67
|
}
|
|
75
|
-
.sds-header-
|
|
68
|
+
.sds-header-collapsible__dropdown {
|
|
76
69
|
position: absolute;
|
|
77
70
|
top: var(--header-height);
|
|
78
71
|
left: 0;
|
|
@@ -85,19 +78,15 @@
|
|
|
85
78
|
overflow: hidden;
|
|
86
79
|
grid-column: 1 / -1;
|
|
87
80
|
}
|
|
88
|
-
.sds-header-
|
|
81
|
+
.sds-header-collapsible__dropdown--open {
|
|
89
82
|
max-height: calc(100vh - var(--header-height));
|
|
90
83
|
}
|
|
91
84
|
@media (width >= 720px) {
|
|
92
|
-
.sds-header-
|
|
85
|
+
.sds-header-collapsible__dropdown {
|
|
93
86
|
display: none;
|
|
94
87
|
}
|
|
95
88
|
}
|
|
96
|
-
.sds-header-
|
|
97
|
-
display: unset;
|
|
98
|
-
}
|
|
99
|
-
.sds-header-hamburger__dropdown.sds-header-hamburger__dropdown--open .sds-header__header-nav-list,
|
|
100
|
-
.sds-header-hamburger__dropdown.sds-header-hamburger__dropdown--open .sds-header-hamburger__menu {
|
|
89
|
+
.sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {
|
|
101
90
|
display: flex;
|
|
102
91
|
}
|
|
103
92
|
.sds-header .sds-header__logo {
|
|
@@ -110,27 +99,77 @@
|
|
|
110
99
|
}
|
|
111
100
|
|
|
112
101
|
/* header-nav.pcss */
|
|
113
|
-
.sds-
|
|
102
|
+
.sds-header__nav-list {
|
|
114
103
|
height: 100%;
|
|
115
104
|
list-style-type: none;
|
|
116
105
|
margin: 0;
|
|
117
|
-
gap: var(--sds-space-gap-small);
|
|
118
106
|
}
|
|
119
107
|
@media (width >= 720px) {
|
|
120
|
-
.sds-
|
|
121
|
-
display:
|
|
108
|
+
.sds-header__nav-item {
|
|
109
|
+
display: inline-flex;
|
|
122
110
|
}
|
|
123
111
|
}
|
|
124
|
-
|
|
125
|
-
|
|
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
|
+
}
|
|
126
139
|
}
|
|
127
140
|
@media (width >= 720px) {
|
|
128
|
-
.sds-
|
|
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);
|
|
129
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;
|
|
130
173
|
}
|
|
131
|
-
}
|
|
132
|
-
.sds-header-hamburger__menu .sds-header__header-nav-list {
|
|
133
|
-
display: flex;
|
|
134
|
-
flex-direction: column;
|
|
135
174
|
}
|
|
136
175
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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
CHANGED
|
@@ -19,11 +19,11 @@ declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => r
|
|
|
19
19
|
|
|
20
20
|
interface HeaderCollapsibleMenuProps {
|
|
21
21
|
children: React.ReactNode;
|
|
22
|
-
|
|
22
|
+
dropdownOpen?: boolean;
|
|
23
23
|
ariaLabelOpenMenu?: string;
|
|
24
24
|
ariaLabelCloseMenu?: string;
|
|
25
25
|
ariaLabelClose?: string;
|
|
26
26
|
}
|
|
27
|
-
declare const HeaderCollapsibleMenu: ({ children,
|
|
27
|
+
declare const HeaderCollapsibleMenu: ({ children, dropdownOpen, ariaLabelOpenMenu, ariaLabelCloseMenu, ariaLabelClose, ...rest }: HeaderCollapsibleMenuProps) => react_jsx_runtime.JSX.Element;
|
|
28
28
|
|
|
29
29
|
export { Header, HeaderCollapsibleMenu, type HeaderCollapsibleMenuProps, HeaderNav, type HeaderNavProps, type HeaderProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -19,11 +19,11 @@ declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => r
|
|
|
19
19
|
|
|
20
20
|
interface HeaderCollapsibleMenuProps {
|
|
21
21
|
children: React.ReactNode;
|
|
22
|
-
|
|
22
|
+
dropdownOpen?: boolean;
|
|
23
23
|
ariaLabelOpenMenu?: string;
|
|
24
24
|
ariaLabelCloseMenu?: string;
|
|
25
25
|
ariaLabelClose?: string;
|
|
26
26
|
}
|
|
27
|
-
declare const HeaderCollapsibleMenu: ({ children,
|
|
27
|
+
declare const HeaderCollapsibleMenu: ({ children, dropdownOpen, ariaLabelOpenMenu, ariaLabelCloseMenu, ariaLabelClose, ...rest }: HeaderCollapsibleMenuProps) => react_jsx_runtime.JSX.Element;
|
|
28
28
|
|
|
29
29
|
export { Header, HeaderCollapsibleMenu, type HeaderCollapsibleMenuProps, HeaderNav, type HeaderNavProps, type HeaderProps };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("clsx"),s=require("@sikt/sds-core"),a=require("@sikt/sds-logo"),n=require("react/jsx-runtime"),
|
|
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,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","
|
|
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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"clsx";import{ScreenReaderOnly as
|
|
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
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","
|
|
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,13 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
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
15
|
"build": "tsup"
|