@sikt/sds-header 2.0.0 → 2.1.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/README.md +32 -3
- package/dist/index.css +135 -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 +4 -4
- 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/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,136 @@
|
|
|
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__content--desktop-only {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
@media (width >= 720px) {
|
|
30
|
+
.sds-header__content--desktop-only {
|
|
31
|
+
display: flex;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
.sds-header__header-item {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
@media (width >= 720px) {
|
|
38
|
+
.sds-header__header-item {
|
|
39
|
+
display: unset;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
.sds-header__header-item--last-item {
|
|
43
|
+
width: -moz-fit-content;
|
|
44
|
+
width: fit-content;
|
|
45
|
+
justify-self: end;
|
|
46
|
+
}
|
|
47
|
+
.sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {
|
|
48
|
+
position: absolute;
|
|
49
|
+
z-index: 1;
|
|
50
|
+
background-color: var(--sds-color-layout-background-primary);
|
|
51
|
+
}
|
|
52
|
+
.sds-header-hamburger__button {
|
|
53
|
+
grid-column: -2 / -1;
|
|
54
|
+
justify-self: end;
|
|
55
|
+
width: -moz-fit-content;
|
|
56
|
+
width: fit-content;
|
|
57
|
+
}
|
|
58
|
+
@media (width >= 720px) {
|
|
59
|
+
.sds-header-hamburger__button.sds-button {
|
|
60
|
+
display: none;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
.sds-header-hamburger__menu {
|
|
64
|
+
display: flex;
|
|
65
|
+
gap: var(--sds-space-gap-medium);
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
overflow: auto;
|
|
68
|
+
width: 100%;
|
|
69
|
+
border-top: var(--sds-space-border-weight-thin) solid var(--sds-color-interaction-primary-strong-default);
|
|
70
|
+
padding: var(--sds-space-padding-medium);
|
|
71
|
+
}
|
|
72
|
+
.sds-header-hamburger__menu * {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
75
|
+
.sds-header-hamburger__dropdown {
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: var(--header-height);
|
|
78
|
+
left: 0;
|
|
79
|
+
background-color: var(--sds-color-layout-background-primary);
|
|
80
|
+
z-index: calc(var(--sds-base-zindex-drawer) + 1);
|
|
81
|
+
height: 100vh;
|
|
82
|
+
width: 100%;
|
|
83
|
+
max-height: 0;
|
|
84
|
+
transition: max-height 0.25s ease;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
grid-column: 1 / -1;
|
|
87
|
+
}
|
|
88
|
+
.sds-header-hamburger__dropdown--open {
|
|
89
|
+
max-height: calc(100vh - var(--header-height));
|
|
90
|
+
}
|
|
91
|
+
@media (width >= 720px) {
|
|
92
|
+
.sds-header-hamburger__dropdown {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
.sds-header-hamburger__dropdown.sds-header-hamburger__dropdown--open *:not(.sds-header__header-nav-item--desktop) {
|
|
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 {
|
|
101
|
+
display: flex;
|
|
102
|
+
}
|
|
103
|
+
.sds-header .sds-header__logo {
|
|
104
|
+
font-size: var(--sds-base-size-relative-m);
|
|
105
|
+
}
|
|
106
|
+
.sds-header .sds-header__logo-link {
|
|
107
|
+
background-color: unset;
|
|
108
|
+
color: inherit;
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* header-nav.pcss */
|
|
113
|
+
.sds-header__header-nav-list {
|
|
114
|
+
height: 100%;
|
|
115
|
+
list-style-type: none;
|
|
116
|
+
margin: 0;
|
|
117
|
+
gap: var(--sds-space-gap-small);
|
|
118
|
+
}
|
|
119
|
+
@media (width >= 720px) {
|
|
120
|
+
.sds-header__header-nav-item--mobile {
|
|
121
|
+
display: none;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
.sds-header__header-nav-item--desktop {
|
|
125
|
+
display: none;
|
|
126
|
+
}
|
|
127
|
+
@media (width >= 720px) {
|
|
128
|
+
.sds-header__header-nav-item--desktop {
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
.sds-header-hamburger__menu .sds-header__header-nav-list {
|
|
133
|
+
display: flex;
|
|
134
|
+
flex-direction: column;
|
|
135
|
+
}
|
|
2
136
|
/*# 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__content--desktop-only {\n display: none;\n }\n\n @media (width >= 720px) {\n\n .sds-header__content--desktop-only {\n display: flex\n }\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 position: absolute;\n z-index: 1;\n background-color: var(--sds-color-layout-background-primary);\n }\n\n .sds-header-hamburger__button {\n grid-column: -2 / -1;\n justify-self: end;\n width: -moz-fit-content;\n width: fit-content;\n }\n\n /* Chaining with the button class is needed here for specificity */\n\n @media (width >= 720px) {\n\n .sds-header-hamburger__button.sds-button {\n display: none\n }\n }\n\n .sds-header-hamburger__menu {\n display: flex;\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 /* Hides menu content by default, this should be overwritten by other \n styling when the menu is open */\n\n .sds-header-hamburger__menu * {\n display: none;\n }\n\n .sds-header-hamburger__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-hamburger__dropdown--open {\n max-height: calc(100vh - var(--header-height));\n }\n\n @media (width >= 720px) {\n\n .sds-header-hamburger__dropdown {\n display: none\n }\n }\n\n /* Unhides hamburger menu items when dropdown is open */\n\n .sds-header-hamburger__dropdown.sds-header-hamburger__dropdown--open *:not(.sds-header__header-nav-item--desktop) {\n display: unset;\n }\n\n /* These need to be given flex, so we can't just unset\n them like the other items */\n\n .sds-header-hamburger__dropdown.sds-header-hamburger__dropdown--open .sds-header__header-nav-list,\n .sds-header-hamburger__dropdown.sds-header-hamburger__dropdown--open .sds-header-hamburger__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__header-nav-list {\n height: 100%;\n list-style-type: none;\n margin: 0;\n gap: var(--sds-space-gap-small);\n }\n @media (width >= 720px) {\n .sds-header__header-nav-item--mobile {\n display: none\n }\n }\n .sds-header__header-nav-item--desktop {\n display: none;\n }\n @media (width >= 720px) {\n .sds-header__header-nav-item--desktop {\n display: inline-flex\n }\n }\n.sds-header-hamburger__menu .sds-header__header-nav-list {\n display: flex;\n flex-direction: column;\n }\n"],"mappings":";AAAA,CAAC;AACC,eAAa;AACb,YAAU;AACV,oBAAkB,IAAI;AAEtB,mBAAiB;AACnB;AAEE,OAAO,CAAC,MAAM,CAAC,EAAE;AAAQ,GAR1B;AASG,qBAAiB;AACrB;AACE;AAEA,OAAO,CAAC,MAAM,CAAC,EAAE;AAAS,GAb3B;AAcG,qBAAiB;AACrB;AACE;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,WAAS,EAAE,IAAI;AACf,WAAS;AACT,YAAU,EAAE,IAAI;AAChB,yBAAuB,IAAI,KAAK;AAChC,eAAa;AACf;AAEA,CAAC;AACG,WAAS;AACX;AAEF,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GANC;AAOK,aAAS;AACb;AACE;AAEJ,CAAC;AACC,WAAS;AACX;AAEA,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GANC;AAOG,aAAS;AACb;AACE;AAEF,CAAC;AACG,SAAO;AACP,SAAO;AACP,gBAAc;AAChB;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACtD,YAAU;AACV,WAAS;AACT,oBAAkB,IAAI;AACxB;AAEA,CAAC;AACG,eAAa,GAAG,EAAE;AAClB,gBAAc;AACd,SAAO;AACP,SAAO;AACT;AAIF,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAXC,4BAW4B,CAAC;AACtB,aAAS;AACb;AACE;AAEN,CAAC;AACG,WAAS;AACT,OAAK,IAAI;AACT,kBAAgB;AAChB,YAAU;AACV,SAAO;AACP,cAAY,IAAI,gCAAgC,MAC9C,IAAI;AACN,WAAS,IAAI;AACf;AAKF,CAdC,2BAc2B;AACtB,WAAS;AACX;AAEJ,CAAC;AACG,YAAU;AACV,OAAK,IAAI;AACT,QAAM;AACN,oBAAkB,IAAI;AACtB,WAAS,KAAK,IAAI,0BAA0B,EAAE;AAC9C,UAAQ;AACR,SAAO;AACP,cAAY;AACZ,cAAY,WAAW,MAAM;AAC7B,YAAU;AACV,eAAa,EAAE,EAAE;AACnB;AAEF,CAAC;AACK,cAAY,KAAK,MAAM,EAAE,IAAI;AAC/B;AAEJ,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GApBC;AAqBK,aAAS;AACb;AACE;AAIJ,CA3BC,8BA2B8B,CAb9B,qCAaoE,CAAC,KAAK,CAAC;AACpE,WAAS;AACX;AAKN,CAlCC,8BAkC8B,CApB9B,qCAoBoE,CAAC;AAChE,CAnCL,8BAmCoC,CArBpC,qCAqB0E,CArD1E;AAsDO,WAAS;AACX;AAEN,CAtID,WAsIa,CAAC;AACX,aAAW,IAAI;AACjB;AAEA,CA1ID,WA0Ia,CAAC;AACT,oBAAkB;AAClB,SAAO;AACP,mBAAiB;AACnB;;;AC9IJ,CAAC;AACG,UAAQ;AACR,mBAAiB;AACjB,UAAQ;AACR,OAAK,IAAI;AACX;AACA,OAAO,CAAC,MAAM,CAAC,EAAE;AACjB,GAAC;AACK,aAAS;AACb;AACE;AACJ,CAAC;AACG,WAAS;AACX;AACF,OAAO,CAAC,MAAM,CAAC,EAAE;AACjB,GAJC;AAKK,aAAS;AACb;AACE;AACN,CAAC,2BAA2B,CAnB3B;AAoBG,WAAS;AACT,kBAAgB;AAClB;","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
|
+
hamburgerOpen?: boolean;
|
|
23
|
+
ariaLabelOpenMenu?: string;
|
|
24
|
+
ariaLabelCloseMenu?: string;
|
|
25
|
+
ariaLabelClose?: string;
|
|
26
|
+
}
|
|
27
|
+
declare const HeaderCollapsibleMenu: ({ children, hamburgerOpen, 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
|
+
hamburgerOpen?: boolean;
|
|
23
|
+
ariaLabelOpenMenu?: string;
|
|
24
|
+
ariaLabelCloseMenu?: string;
|
|
25
|
+
ariaLabelClose?: string;
|
|
26
|
+
}
|
|
27
|
+
declare const HeaderCollapsibleMenu: ({ children, hamburgerOpen, 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"),r=require("react");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(e),t=({variant:e="subtle",size:s="default",children:a,className:r,onClick:l,icon:t,iconVariant:i="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}`,r),onClick:l,"aria-label":"only"===i?c:void 0,...o,children:[t&&("left"===i||"only"===i)&&n.jsx("span",{className:"sds-button__icon",children:t}),(!t||"only"!==i)&&n.jsx("span",{className:"sds-button__label",children:a}),t&&"right"===i&&n.jsx("span",{className:"sds-button__icon",children:t})]})};r.forwardRef((({variant:e="subtle",size:s="default",children:a,className:r,href:l,icon:t,iconVariant:i="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}`,r),href:l,"aria-label":"only"===i?h:void 0,...o,children:[t&&("left"===i||"only"===i)&&n.jsx("span",{className:"sds-button__icon",children:t}),(!t||"only"!==i)&&n.jsx("span",{className:"sds-button__label",children:a}),t&&"right"===i&&n.jsx("span",{className:"sds-button__icon",children:t})]})})).displayName="ButtonLink";var i=({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:r,skipLinkId:l="main",skipLinkText:t="Gå til innhold",logoHref:i,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:`#${l}`,children:t})}),n.jsx("header",{className:d.default("sds-header",r),...c,children:n.jsxs("div",{className:"sds-header__content",children:[i?n.jsx(s.Link,{href:i,className:"sds-header__logo-link",children:h}):h,e]})})]})},exports.HeaderCollapsibleMenu=({children:e,hamburgerOpen:s=!1,ariaLabelOpenMenu:a="Åpne meny",ariaLabelCloseMenu:l="Lukk meny",ariaLabelClose:c="Lukk",...h})=>{const u=r.useId(),[m,_]=r.useState(s);function x(){_(!m)}return r.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]),r.useEffect((()=>{_(s)}),[s]),n.jsxs(n.Fragment,{children:[r.Children.map(e,((s,a)=>n.jsx(n.Fragment,{children:r.cloneElement(s,{className:d.default("sds-header__header-item",a+1===r.Children.count(e)&&"sds-header__header-item--last-item")})}))),n.jsx(t,{variant:"transparent",icon:m?n.jsx(o,{}):n.jsx(i,{}),iconVariant:m?"right":"only",onClick:x,"aria-label":m?l:a,"aria-controls":u,"aria-expanded":m,className:"sds-header-hamburger__button",children:m&&c}),n.jsx("div",{className:d.default("sds-header-hamburger__dropdown",m&&"sds-header-hamburger__dropdown--open"),"aria-hidden":!m,id:u,...h,children:n.jsx("div",{className:"sds-header-hamburger__menu",children:e})})]})},exports.HeaderNav=({children:e,className:s,...a})=>n.jsx("nav",{className:d.default("sds-header__header-nav",s),...a,children:n.jsxs("ul",{className:"sds-header__header-nav-list",children:[r.Children.map(e,(e=>n.jsx("li",{className:"sds-header__header-nav-item--desktop",children:r.cloneElement(e,{className:"sds-tab-link sds-tabs__tab"})}))),r.Children.map(e,(e=>n.jsx("li",{className:"sds-header__header-nav-item--mobile",children:e})))]})});//# 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","jsxs","Children","cloneElement","Fragment"],"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__header-nav\", className)} {...rest}>\n <ul className=\"sds-header__header-nav-list\">\n {/* Since we need to apply sds-tabs__tab conditionally on a media query,\n we need to duplicate these children and always only show one. Hiding is\n done with the desktop and css classes they have. */}\n {Children.map(children, (child) => {\n return (\n <li className=\"sds-header__header-nav-item--desktop\">\n {cloneElement(child as ReactElement, {\n className: \"sds-tab-link sds-tabs__tab\",\n })}\n </li>\n );\n })}\n {Children.map(children, (child) => {\n return (\n <li className=\"sds-header__header-nav-item--mobile\">{child}</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 hamburgerOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n hamburgerOpen = 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(hamburgerOpen);\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(hamburgerOpen);\n }, [hamburgerOpen]);\n\n return (\n <>\n {/* 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-hamburger__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-hamburger__dropdown\",\n menuOpen && \"sds-header-hamburger__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div className=\"sds-header-hamburger__menu\">\n {/* 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 a,Link as s}from"@sikt/sds-core";import{Logo as n}from"@sikt/sds-logo";import{jsxs as r,jsx as d,Fragment as l}from"react/jsx-runtime";import{forwardRef as i,Children as t,cloneElement as o,useId as c,useState as h,useEffect as m}from"react";var u=({children:i,className:t,skipLinkId:o="main",skipLinkText:c="Gå til innhold",logoHref:h,logoText:m,...u})=>{const _=m?d("span",{className:"sds-header__logo-text sds-typography-body--large",children:m}):d(n,{variant:"primary",className:"sds-header__logo"});return r(l,{children:[d(a,{isFocusable:!0,className:"sds-header__skip-link",children:d(s,{href:`#${o}`,children:c})}),d("header",{className:e("sds-header",t),...u,children:r("div",{className:"sds-header__content",children:[h?d(s,{href:h,className:"sds-header__logo-link",children:_}):_,i]})})]})},_=({children:a,className:s,...n})=>d("nav",{className:e("sds-header__header-nav",s),...n,children:r("ul",{className:"sds-header__header-nav-list",children:[t.map(a,(e=>d("li",{className:"sds-header__header-nav-item--desktop",children:o(e,{className:"sds-tab-link sds-tabs__tab"})}))),t.map(a,(e=>d("li",{className:"sds-header__header-nav-item--mobile",children:e})))]})}),p=({variant:a="subtle",size:s="default",children:n,className:l,onClick:i,icon:t,iconVariant:o="right",...c})=>{const h="string"==typeof n?n:void 0;return r("button",{className:e("sds-button",`sds-button--${a}`,"default"!==s&&`sds-button--${s}`,l),onClick:i,"aria-label":"only"===o?h:void 0,...c,children:[t&&("left"===o||"only"===o)&&d("span",{className:"sds-button__icon",children:t}),(!t||"only"!==o)&&d("span",{className:"sds-button__label",children:n}),t&&"right"===o&&d("span",{className:"sds-button__icon",children:t})]})};i((({variant:a="subtle",size:s="default",children:n,className:l,href:i,icon:t,iconVariant:o="right",...c},h)=>{const m="string"==typeof n?n:void 0;return r("a",{ref:h,className:e("sds-button-link","sds-button",`sds-button--${a}`,"default"!==s&&`sds-button--${s}`,l),href:i,"aria-label":"only"===o?m:void 0,...c,children:[t&&("left"===o||"only"===o)&&d("span",{className:"sds-button__icon",children:t}),(!t||"only"!==o)&&d("span",{className:"sds-button__label",children:n}),t&&"right"===o&&d("span",{className:"sds-button__icon",children:t})]})})).displayName="ButtonLink";var b=({className:a,...s})=>d("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:e("sds-icon",a),"aria-hidden":"true",...s,children:d("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:a,...s})=>d("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 256 256",className:e("sds-icon",a),"aria-hidden":"true",...s,children:d("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:a,hamburgerOpen:s=!1,ariaLabelOpenMenu:n="Åpne meny",ariaLabelCloseMenu:i="Lukk meny",ariaLabelClose:u="Lukk",..._})=>{const v=c(),[g,f]=h(s);function k(){f(!g)}return m((()=>{document.body.style.overflow=g?"hidden":"unset";const e=e=>{"Escape"===e.key&&g&&k()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)}),[g]),m((()=>{f(s)}),[s]),r(l,{children:[t.map(a,((s,n)=>d(l,{children:o(s,{className:e("sds-header__header-item",n+1===t.count(a)&&"sds-header__header-item--last-item")})}))),d(p,{variant:"transparent",icon:d(g?N:b,{}),iconVariant:g?"right":"only",onClick:k,"aria-label":g?i:n,"aria-controls":v,"aria-expanded":g,className:"sds-header-hamburger__button",children:g&&u}),d("div",{className:e("sds-header-hamburger__dropdown",g&&"sds-header-hamburger__dropdown--open"),"aria-hidden":!g,id:v,..._,children:d("div",{className:"sds-header-hamburger__menu",children:a})})]})};export{u as Header,v as HeaderCollapsibleMenu,_ as HeaderNav};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","jsxs","Children","cloneElement","Fragment"],"mappings":";AAKA,OAAO,UAAU;AACjB,SAAS,MAAM,wBAAwB;AACvC,SAAS,YAAY;AAwBjB,SAQA,UARA,KAaI,YAbJ;AAVG,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,cAAc,WAClB,oBAAC,UAAK,WAAU,oDACb,oBACH,IAEA,oBAAC,QAAK,SAAS,WAAW,WAAU,oBAAmB;AAGzD,SACE,iCACE;AAAA,wBAAC,oBAAiB,aAAW,MAAC,WAAU,yBACtC,8BAAC,QAAK,MAAM,IAAI,UAAU,IAAK,wBAAa,GAC9C;AAAA,IACA,oBAAC,YAAO,WAAW,KAAK,cAAc,SAAS,GAAI,GAAG,MACpD,+BAAC,SAAI,WAAU,uBACZ;AAAA,iBACC,oBAAC,QAAK,MAAM,UAAU,WAAU,yBAC7B,uBACH,IAEA;AAAA,MAGD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;;;AC1DA;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AAEP,OAAOA,WAAU;AAUX,SAMM,OAAAC,MANN,QAAAC,aAAA;AAHC,IAAM,YAAY,CAAC,EAAE,UAAU,WAAW,GAAG,KAAK,MAAsB;AAC7E,SACE,gBAAAD,KAAC,SAAI,WAAWD,MAAK,0BAA0B,SAAS,GAAI,GAAG,MAC7D,0BAAAE,MAAC,QAAG,WAAU,+BAIX;AAAA,aAAS,IAAI,UAAU,CAAC,UAAU;AACjC,aACE,gBAAAD,KAAC,QAAG,WAAU,wCACX,uBAAa,OAAuB;AAAA,QACnC,WAAW;AAAA,MACb,CAAC,GACH;AAAA,IAEJ,CAAC;AAAA,IACA,SAAS,IAAI,UAAU,CAAC,UAAU;AACjC,aACE,gBAAAA,KAAC,QAAG,WAAU,uCAAuC,iBAAM;AAAA,IAE/D,CAAC;AAAA,KACH,GACF;AAEJ;;;;;;;;;;;;;;;;;;;;;;;ACrCA,OAAOD,WAAU;AACjB;AAAA,EACE,YAAAG;AAAA,EAEA,gBAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA2CH,SAIM,YAAAC,WAAA,OAAAJ,MAJN,QAAAC,aAAA;AAjCG,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,GAAG;AACL,MAAkC;AAChC,QAAM,SAAS,MAAM;AACrB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,aAAa;AAEtD,WAAS,aAAa;AACpB,gBAAY,CAAC,QAAQ;AAAA,EACvB;AAEA,YAAU,MAAM;AACd,aAAS,KAAK,MAAM,WAAW,WAAW,WAAW;AAErD,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,YAAY,UAAU;AAClC,mBAAW;AAAA,MACb;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,KAAK;AACxC,WAAO,MAAM,OAAO,oBAAoB,WAAW,KAAK;AAAA,EAC1D,GAAG,CAAC,QAAQ,CAAC;AAEb,YAAU,MAAM;AACd,gBAAY,aAAa;AAAA,EAC3B,GAAG,CAAC,aAAa,CAAC;AAElB,SACE,gBAAAA,MAAAG,WAAA,EAEG;AAAA,IAAAF,UAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AACxC,aACE,gBAAAF,KAAAI,WAAA,EACG,UAAAD,cAAa,OAAuB;AAAA,QACnC,WAAWJ;AAAA,UACT;AAAA,UACA,QAAQ,MAAMG,UAAS,MAAM,QAAQ,KACnC;AAAA,QACJ;AAAA,MACF,CAAC,GACH;AAAA,IAEJ,CAAC;AAAA,IACD,gBAAAF;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAM,WAAW,gBAAAA,KAAC,MAAM,IAAK,gBAAAA,KAAC,KAAS;AAAA,QACvC,aAAa,WAAW,UAAU;AAAA,QAClC,SAAS;AAAA,QACT,cAAY,WAAW,qBAAqB;AAAA,QAC5C,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAU;AAAA,QAET,sBAAY;AAAA;AAAA,IACf;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,eAAa,CAAC;AAAA,QACd,IAAI;AAAA,QACH,GAAG;AAAA,QAEJ,0BAAAC,KAAC,SAAI,WAAU,8BAEZ,UACH;AAAA;AAAA,IACF;AAAA,KACF;AAEJ","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__header-nav\", className)} {...rest}>\n <ul className=\"sds-header__header-nav-list\">\n {/* Since we need to apply sds-tabs__tab conditionally on a media query,\n we need to duplicate these children and always only show one. Hiding is\n done with the desktop and css classes they have. */}\n {Children.map(children, (child) => {\n return (\n <li className=\"sds-header__header-nav-item--desktop\">\n {cloneElement(child as ReactElement, {\n className: \"sds-tab-link sds-tabs__tab\",\n })}\n </li>\n );\n })}\n {Children.map(children, (child) => {\n return (\n <li className=\"sds-header__header-nav-item--mobile\">{child}</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 hamburgerOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n hamburgerOpen = 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(hamburgerOpen);\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(hamburgerOpen);\n }, [hamburgerOpen]);\n\n return (\n <>\n {/* 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-hamburger__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-hamburger__dropdown\",\n menuOpen && \"sds-header-hamburger__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div className=\"sds-header-hamburger__menu\">\n {/* The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.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
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
|
-
"build": "
|
|
13
|
+
"build": "tsup"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@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:flex;justify-content:space-between;min-height:48px;padding:0 var(--sds-space-padding-huge)}.sds-header__skip-link: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,6BAA8B,CAC9B,eAAgB,CAChB,uCAuBF,CArBE,oCACE,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: flex;\n justify-content: space-between;\n min-height: 48px;\n padding: 0 var(--sds-space-padding-huge);\n\n &__skip-link: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"}
|