@sikt/sds-header 4.0.2 → 5.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 +16 -0
- package/README.md +11 -1
- package/dist/index.css +9 -9
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +44 -2
- package/dist/index.d.ts +44 -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 +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [5.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@4.0.3...@sikt/sds-header@5.0.0) (2026-01-14)
|
|
6
|
+
|
|
7
|
+
### ⚠ BREAKING CHANGES
|
|
8
|
+
|
|
9
|
+
- **header:** remove prop logoHref & add prop logoLink
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- **header:** remove prop logoHref & add prop logoLink ([4da4302](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/4da4302e14e9af07f9fbeb54dccb814e075a1242))
|
|
14
|
+
|
|
15
|
+
## [4.0.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@4.0.2...@sikt/sds-header@4.0.3) (2025-11-18)
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
- **deps:** update @sikt/sds-logo@2.2.3 ([40db536](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/40db536d4052bd7c0c68a3e25068e9db8f36b8bc))
|
|
20
|
+
|
|
5
21
|
## [4.0.2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@4.0.1...@sikt/sds-header@4.0.2) (2025-10-27)
|
|
6
22
|
|
|
7
23
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -21,7 +21,17 @@ import "@sikt/sds-logo/dist/index.css";
|
|
|
21
21
|
Header with product name
|
|
22
22
|
|
|
23
23
|
```jsx
|
|
24
|
-
<Header logoText="Min produkt"
|
|
24
|
+
<Header logoText="Min produkt" />
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Header with link on logotype. Should have `sds-typography-link` class, but can otherwise be any framework link (like Link from `next/link` or `react-router`).
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
const logoText = "Min produkt";
|
|
31
|
+
<Header
|
|
32
|
+
logoText={logoText}
|
|
33
|
+
logoLink={<Link href="//path/to/my/product">{logoText}</Link>}
|
|
34
|
+
/>;
|
|
25
35
|
```
|
|
26
36
|
|
|
27
37
|
Header with hamburger that can be positioned left `leftSlot` or right `rigthSlot`.
|
package/dist/index.css
CHANGED
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
position: relative;
|
|
7
7
|
--header-height: 48px;
|
|
8
8
|
}
|
|
9
|
-
@media (width
|
|
9
|
+
@media (min-width: 720px) {
|
|
10
10
|
.sds-header {
|
|
11
11
|
--header-height: 56px ;
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
|
-
@media (width
|
|
14
|
+
@media (min-width: 1024px) {
|
|
15
15
|
.sds-header {
|
|
16
16
|
--header-height: 72px ;
|
|
17
17
|
}
|
|
@@ -21,16 +21,16 @@
|
|
|
21
21
|
position: absolute;
|
|
22
22
|
z-index: 1;
|
|
23
23
|
}
|
|
24
|
-
.sds-
|
|
24
|
+
.sds-typography-link:has(.sds-header__logo) {
|
|
25
25
|
background-color: unset;
|
|
26
26
|
color: inherit;
|
|
27
27
|
text-decoration: none;
|
|
28
28
|
width: -webkit-fit-content;
|
|
29
29
|
width: fit-content;
|
|
30
30
|
}
|
|
31
|
-
.sds-
|
|
32
|
-
.sds-
|
|
33
|
-
.sds-
|
|
31
|
+
.sds-typography-link:has(.sds-header__logo):active,
|
|
32
|
+
.sds-typography-link:has(.sds-header__logo):focus-visible,
|
|
33
|
+
.sds-typography-link:has(.sds-header__logo):hover {
|
|
34
34
|
background-color: unset;
|
|
35
35
|
}
|
|
36
36
|
.sds-header__content {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
min-height: var(--header-height);
|
|
42
42
|
padding: 0 var(--sds-space-padding-medium);
|
|
43
43
|
}
|
|
44
|
-
@media (width
|
|
44
|
+
@media (min-width: 1024px) {
|
|
45
45
|
.sds-header__content {
|
|
46
46
|
grid-template-columns: 1fr auto 1fr;
|
|
47
47
|
}
|
|
@@ -53,14 +53,14 @@
|
|
|
53
53
|
gap: var(--sds-space-padding-small);
|
|
54
54
|
justify-self: start;
|
|
55
55
|
}
|
|
56
|
-
.sds-header__content-left .sds-
|
|
56
|
+
.sds-header__content-left .sds-typography-link:has(.sds-header__logo):has(+ .sds-header__content-left-item) {
|
|
57
57
|
border-left: 1px solid #737373;
|
|
58
58
|
padding-left: var(--sds-space-padding-small);
|
|
59
59
|
}
|
|
60
60
|
.sds-header__content-mid {
|
|
61
61
|
display: none;
|
|
62
62
|
}
|
|
63
|
-
@media (width
|
|
63
|
+
@media (min-width: 1024px) {
|
|
64
64
|
.sds-header__content-mid {
|
|
65
65
|
display: unset;
|
|
66
66
|
}
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/header.pcss"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.sds-header {\n align-items: center;\n background-color: var(--sds-color-layout-background-primary);\n color: var(--sds-color-text-primary);\n position: relative;\n\n --header-height: 48px;\n}\n\n@media (width >= 720px) {\n\n.sds-header {\n --header-height: 56px\n}\n }\n\n@media (width >= 1024px) {\n\n.sds-header {\n --header-height: 72px\n}\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-
|
|
1
|
+
{"version":3,"sources":["../src/header.pcss"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\n.sds-header {\n align-items: center;\n background-color: var(--sds-color-layout-background-primary);\n color: var(--sds-color-text-primary);\n position: relative;\n\n --header-height: 48px;\n}\n\n@media (width >= 720px) {\n\n.sds-header {\n --header-height: 56px\n}\n }\n\n@media (width >= 1024px) {\n\n.sds-header {\n --header-height: 72px\n}\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-typography-link:has(.sds-header__logo) {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n width: -webkit-fit-content;\n width: fit-content;\n }\n\n.sds-typography-link:has(.sds-header__logo):active,\n .sds-typography-link:has(.sds-header__logo):focus-visible,\n .sds-typography-link:has(.sds-header__logo):hover {\n background-color: unset;\n }\n\n.sds-header__content {\n align-items: center;\n display: grid;\n gap: 0 var(--sds-space-padding-small);\n grid-template-columns: 1fr auto;\n min-height: var(--header-height);\n padding: 0 var(--sds-space-padding-medium);\n }\n\n@media (width >= 1024px) {\n\n.sds-header__content {\n grid-template-columns: 1fr auto 1fr\n }\n }\n\n.sds-header__content-left {\n align-items: center;\n display: flex;\n flex-direction: row-reverse;\n gap: var(--sds-space-padding-small);\n justify-self: start;\n }\n\n.sds-header__content-left .sds-typography-link:has(.sds-header__logo):has(+ .sds-header__content-left-item) {\n border-left: 1px solid #737373;\n padding-left: var(--sds-space-padding-small);\n }\n\n.sds-header__content-mid {\n display: none;\n }\n\n@media (width >= 1024px) {\n\n.sds-header__content-mid {\n display: unset\n }\n }\n\n.sds-header__content-right {\n justify-self: flex-end;\n }\n"],"mappings":";AAIA,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,YAAU;AAEV,mBAAiB;AACnB;AAEA,QAAQ,WAAS;AAEjB,GAXC;AAYG,qBAAiB;AACrB;AACE;AAEF,QAAQ,WAAS;AAEjB,GAlBC;AAmBG,qBAAiB;AACrB;AACE;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACpD,oBAAkB,IAAI;AACtB,YAAU;AACV,WAAS;AACX;AAEF,CAAC,mBAAmB,KAAK,CAAC;AACtB,oBAAkB;AAClB,SAAO;AACP,mBAAiB;AACjB,SAAO;AACP,SAAO;AACT;AAEF,CARC,mBAQmB,KAAK,CARC,iBAQiB;AACvC,CATH,mBASuB,KAAK,CATH,iBASqB;AAC3C,CAVH,mBAUuB,KAAK,CAVH,iBAUqB;AACzC,oBAAkB;AACpB;AAEJ,CAAC;AACG,eAAa;AACb,WAAS;AACT,OAAK,EAAE,IAAI;AACX,yBAAuB,IAAI;AAC3B,cAAY,IAAI;AAChB,WAAS,EAAE,IAAI;AACjB;AAEF,QAAQ,WAAS;AAEjB,GAXC;AAYK,2BAAuB,IAAI,KAAK;AACpC;AACE;AAEJ,CAAC;AACK,eAAa;AACb,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,gBAAc;AAChB;AAEJ,CARC,yBAQyB,CAtCzB,mBAsC6C,KAAK,CAtCzB,iBAsC2C,KAAK,EAAE,CAAC;AACnE,eAAa,IAAI,MAAM;AACvB,gBAAc,IAAI;AACpB;AAER,CAAC;AACK,WAAS;AACX;AAEJ,QAAQ,WAAS;AAEjB,GANC;AAOO,aAAS;AACb;AACE;AAEN,CAAC;AACK,gBAAc;AAChB;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -3,18 +3,60 @@ import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'r
|
|
|
3
3
|
|
|
4
4
|
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
5
5
|
className?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Slot for adding content to the center of the Header.
|
|
8
|
+
*
|
|
9
|
+
* @default undefined
|
|
10
|
+
*/
|
|
6
11
|
children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
|
|
12
|
+
/**
|
|
13
|
+
* Slot for adding content above the header, like a global menu between services.
|
|
14
|
+
*
|
|
15
|
+
* @default undefined
|
|
16
|
+
*/
|
|
7
17
|
topSlot?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Slot for adding content to the left side of the Header.
|
|
20
|
+
*
|
|
21
|
+
* @default undefined
|
|
22
|
+
*/
|
|
8
23
|
leftSlot?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Slot for adding content to the right side of the Header.
|
|
26
|
+
*
|
|
27
|
+
* @default undefined
|
|
28
|
+
*/
|
|
9
29
|
rightSlot?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Slot for adding an `<ApplicationStatus />`.
|
|
32
|
+
*
|
|
33
|
+
* @default undefined
|
|
34
|
+
*/
|
|
10
35
|
applicationStatus?: ReactNode;
|
|
36
|
+
/**
|
|
37
|
+
* Id for main content element where the skip link will anchor link.
|
|
38
|
+
*
|
|
39
|
+
* @default "main"
|
|
40
|
+
*/
|
|
11
41
|
skipLinkId?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Text for the skip link anchor link.
|
|
44
|
+
*
|
|
45
|
+
* @default "Gå til innhold"
|
|
46
|
+
*/
|
|
12
47
|
skipLinkText?: string;
|
|
13
|
-
|
|
48
|
+
/**
|
|
49
|
+
* Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.
|
|
50
|
+
* Should have className `sds-typography-link`.
|
|
51
|
+
* Children will be overwritten with `logoText` prop.
|
|
52
|
+
*
|
|
53
|
+
* @default undefined
|
|
54
|
+
*/
|
|
55
|
+
logoLink?: ReactNode;
|
|
14
56
|
logoText?: string;
|
|
15
57
|
}
|
|
16
58
|
declare const Header: {
|
|
17
|
-
({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText,
|
|
59
|
+
({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText, logoLink, logoText, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
18
60
|
displayName: string;
|
|
19
61
|
};
|
|
20
62
|
|
package/dist/index.d.ts
CHANGED
|
@@ -3,18 +3,60 @@ import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'r
|
|
|
3
3
|
|
|
4
4
|
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
5
5
|
className?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Slot for adding content to the center of the Header.
|
|
8
|
+
*
|
|
9
|
+
* @default undefined
|
|
10
|
+
*/
|
|
6
11
|
children?: ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>> | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];
|
|
12
|
+
/**
|
|
13
|
+
* Slot for adding content above the header, like a global menu between services.
|
|
14
|
+
*
|
|
15
|
+
* @default undefined
|
|
16
|
+
*/
|
|
7
17
|
topSlot?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Slot for adding content to the left side of the Header.
|
|
20
|
+
*
|
|
21
|
+
* @default undefined
|
|
22
|
+
*/
|
|
8
23
|
leftSlot?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Slot for adding content to the right side of the Header.
|
|
26
|
+
*
|
|
27
|
+
* @default undefined
|
|
28
|
+
*/
|
|
9
29
|
rightSlot?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Slot for adding an `<ApplicationStatus />`.
|
|
32
|
+
*
|
|
33
|
+
* @default undefined
|
|
34
|
+
*/
|
|
10
35
|
applicationStatus?: ReactNode;
|
|
36
|
+
/**
|
|
37
|
+
* Id for main content element where the skip link will anchor link.
|
|
38
|
+
*
|
|
39
|
+
* @default "main"
|
|
40
|
+
*/
|
|
11
41
|
skipLinkId?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Text for the skip link anchor link.
|
|
44
|
+
*
|
|
45
|
+
* @default "Gå til innhold"
|
|
46
|
+
*/
|
|
12
47
|
skipLinkText?: string;
|
|
13
|
-
|
|
48
|
+
/**
|
|
49
|
+
* Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.
|
|
50
|
+
* Should have className `sds-typography-link`.
|
|
51
|
+
* Children will be overwritten with `logoText` prop.
|
|
52
|
+
*
|
|
53
|
+
* @default undefined
|
|
54
|
+
*/
|
|
55
|
+
logoLink?: ReactNode;
|
|
14
56
|
logoText?: string;
|
|
15
57
|
}
|
|
16
58
|
declare const Header: {
|
|
17
|
-
({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText,
|
|
59
|
+
({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText, logoLink, logoText, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
18
60
|
displayName: string;
|
|
19
61
|
};
|
|
20
62
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-logo"),s=require("clsx/lite"),t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-logo"),s=require("clsx/lite"),t=require("react"),l=require("react/jsx-runtime"),i=Object.defineProperty,a=Object.defineProperties,n=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,p=(e,r,s)=>r in e?i(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,h=(e,r)=>{for(var s in r||(r={}))c.call(r,s)&&p(e,s,r[s]);if(o)for(var s of o(r))d.call(r,s)&&p(e,s,r[s]);return e},m=i=>{var p,m=i,{children:u,topSlot:x,leftSlot:f,rightSlot:j,applicationStatus:k,className:g,skipLinkId:v="main",skipLinkText:_="Gå til innhold",logoLink:b,logoText:N="Sikt"}=m,O=((e,r)=>{var s={};for(var t in e)c.call(e,t)&&r.indexOf(t)<0&&(s[t]=e[t]);if(null!=e&&o)for(var t of o(e))r.indexOf(t)<0&&d.call(e,t)&&(s[t]=e[t]);return s})(m,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoLink","logoText"]);const S=l.jsx(r.Logo,{productName:N,className:"sds-header__logo"});return l.jsxs(l.Fragment,{children:[l.jsx(e.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:l.jsx(e.Link,{href:"#".concat(v),children:_})}),x,l.jsx("header",(y=h({className:s.clsx("sds-header",g)},O),L={children:l.jsxs("div",{className:"sds-header__content",children:[l.jsxs("div",{className:"sds-header__content-left",children:[b&&t.isValidElement(b)?t.cloneElement(b,null!=(p=b.props)?p:{},S):S,f&&l.jsx("div",{className:"sds-header__content-left-item",children:f})]}),l.jsx("div",{className:"sds-header__content-mid",children:u}),j&&l.jsx("div",{className:"sds-header__content-right",children:j})]})},a(y,n(L)))),k]});var y,L};m.displayName="Header",exports.Header=m;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Header.tsx"],"names":["jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Header.tsx"],"names":["_a","jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx","isValidElement","cloneElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEa,IAAA,MAAA,GAAS,CAAC,EAYJ,KAAA;AAZI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAW,GAAA;AAAA,GAhFb,GAsEuB,EAWlB,EAAA,IAAA,GAAA,SAAA,CAXkB,EAWlB,EAAA;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAhFF,EAAAA,IAAAA,GAAAA;AAmFE,EAAA,MAAM,8BACHC,cAAA,CAAAC,YAAA,EAAA,EAAK,WAAa,EAAA,QAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAG5D,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAACH,cAAA,CAAAI,wBAAA,EAAA,EAAiB,WAAW,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EACtC,QAAC,kBAAAJ,cAAA,CAAAK,YAAA,EAAA,EAAK,IAAM,EAAA,GAAA,CAAI,MAAe,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,YAAA,EAAa,CAC9C,EAAA,CAAA;AAAA,IACC,OAAA;AAAA,oBACAL,cAAA,CAAA,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAW,EAAAM,SAAA,CAAK,YAAc,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAArD,EACC,QAAA,kBAAAJ,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA,IAAYK,oBAAe,CAAA,QAAQ,CAChC,GAAAC,kBAAA,CAAa,QAAUT,EAAAA,CAAAA,GAAAA,GAAA,QAAS,CAAA,KAAA,KAAT,IAAAA,GAAAA,GAAAA,GAAkB,EAAC,EAAG,WAAW,CACxD,GAAA,WAAA;AAAA,QACH,QACC,oBAAAC,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,sBACCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,yBAAA,EAA2B,QAAS,EAAA,CAAA;AAAA,MAClD,SACC,oBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAU,EAAA,SAAA,EAAA;AAAA,KAAA,EAE1D,CACF,EAAA,CAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;AACA,MAAA,CAAO,WAAc,GAAA,QAAA","file":"index.js","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n AnchorHTMLAttributes,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n /**\n * Slot for adding content to the center of the Header.\n *\n * @default undefined\n */\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n /**\n * Slot for adding content above the header, like a global menu between services.\n *\n * @default undefined\n */\n topSlot?: ReactNode;\n /**\n * Slot for adding content to the left side of the Header.\n *\n * @default undefined\n */\n leftSlot?: ReactNode;\n /**\n * Slot for adding content to the right side of the Header.\n *\n * @default undefined\n */\n rightSlot?: ReactNode;\n /**\n * Slot for adding an `<ApplicationStatus />`.\n *\n * @default undefined\n */\n applicationStatus?: ReactNode;\n /**\n * Id for main content element where the skip link will anchor link.\n *\n * @default \"main\"\n */\n skipLinkId?: string;\n /**\n * Text for the skip link anchor link.\n *\n * @default \"Gå til innhold\"\n */\n skipLinkText?: string;\n /**\n * Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.\n * Should have className `sds-typography-link`.\n * Children will be overwritten with `logoText` prop.\n *\n * @default undefined\n */\n logoLink?: ReactNode;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n topSlot,\n leftSlot,\n rightSlot,\n applicationStatus,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoLink,\n logoText = \"Sikt\",\n ...rest\n}: HeaderProps) => {\n const logoElement = (\n <Logo productName={logoText} 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 {topSlot}\n <header className={clsx(\"sds-header\", className)} {...rest}>\n <div className=\"sds-header__content\">\n <div className=\"sds-header__content-left\">\n {logoLink && isValidElement(logoLink)\n ? cloneElement(logoLink, logoLink.props ?? {}, logoElement)\n : logoElement}\n {leftSlot && (\n <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n )}\n </div>\n <div className=\"sds-header__content-mid\">{children}</div>\n {rightSlot && (\n <div className=\"sds-header__content-right\">{rightSlot}</div>\n )}\n </div>\n </header>\n {applicationStatus}\n </>\n );\n};\nHeader.displayName = \"Header\";\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as t}from"@sikt/sds-logo";import{clsx as
|
|
1
|
+
import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as t}from"@sikt/sds-logo";import{clsx as i}from"clsx/lite";import{cloneElement as l,isValidElement as o}from"react";import{jsxs as a,Fragment as s,jsx as n}from"react/jsx-runtime";var c=Object.defineProperty,d=Object.defineProperties,p=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,k=(e,r,t)=>r in e?c(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))h.call(r,t)&&k(e,t,r[t]);if(m)for(var t of m(r))f.call(r,t)&&k(e,t,r[t]);return e},v=c=>{var k,v=c,{children:_,topSlot:b,leftSlot:g,rightSlot:N,applicationStatus:O,className:S,skipLinkId:x="main",skipLinkText:y="Gå til innhold",logoLink:j,logoText:L="Sikt"}=v,P=((e,r)=>{var t={};for(var i in e)h.call(e,i)&&r.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&m)for(var i of m(e))r.indexOf(i)<0&&f.call(e,i)&&(t[i]=e[i]);return t})(v,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoLink","logoText"]);const w=n(t,{productName:L,className:"sds-header__logo"});return a(s,{children:[n(e,{isFocusable:!0,className:"sds-header__skip-link",children:n(r,{href:"#".concat(x),children:y})}),b,n("header",(T=u({className:i("sds-header",S)},P),I={children:a("div",{className:"sds-header__content",children:[a("div",{className:"sds-header__content-left",children:[j&&o(j)?l(j,null!=(k=j.props)?k:{},w):w,g&&n("div",{className:"sds-header__content-left-item",children:g})]}),n("div",{className:"sds-header__content-mid",children:_}),N&&n("div",{className:"sds-header__content-right",children:N})]})},d(T,p(I)))),O]});var T,I};v.displayName="Header";export{v as Header};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Header.tsx"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEa,IAAA,MAAA,GAAS,CAAC,EAYJ,KAAA;AAZI,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAa,GAAA,MAAA;AAAA,IACb,YAAe,GAAA,mBAAA;AAAA,IACf,QAAA;AAAA,IACA,QAAW,GAAA;AAAA,GAhFb,GAsEuB,EAWlB,EAAA,IAAA,GAAA,SAAA,CAXkB,EAWlB,EAAA;AAAA,IAVH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAhFF,EAAAA,IAAAA,GAAAA;AAmFE,EAAA,MAAM,8BACH,GAAA,CAAA,IAAA,EAAA,EAAK,WAAa,EAAA,QAAA,EAAU,WAAU,kBAAmB,EAAA,CAAA;AAG5D,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,gBAAA,EAAA,EAAiB,WAAW,EAAA,IAAA,EAAC,SAAU,EAAA,uBAAA,EACtC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,GAAA,CAAI,MAAe,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,YAAA,EAAa,CAC9C,EAAA,CAAA;AAAA,IACC,OAAA;AAAA,oBACA,GAAA,CAAA,QAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAO,SAAW,EAAA,IAAA,CAAK,YAAc,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAArD,EACC,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,qBACb,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAA,QAAA,IAAY,cAAe,CAAA,QAAQ,CAChC,GAAA,YAAA,CAAa,QAAUA,EAAAA,CAAAA,GAAAA,GAAA,QAAS,CAAA,KAAA,KAAT,IAAAA,GAAAA,GAAAA,GAAkB,EAAC,EAAG,WAAW,CACxD,GAAA,WAAA;AAAA,QACH,QACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,yBAAA,EAA2B,QAAS,EAAA,CAAA;AAAA,MAClD,SACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,6BAA6B,QAAU,EAAA,SAAA,EAAA;AAAA,KAAA,EAE1D,CACF,EAAA,CAAA,CAAA;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;AACA,MAAA,CAAO,WAAc,GAAA,QAAA","file":"index.mjs","sourcesContent":["import { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport { clsx } from \"clsx/lite\";\nimport {\n AnchorHTMLAttributes,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n /**\n * Slot for adding content to the center of the Header.\n *\n * @default undefined\n */\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n /**\n * Slot for adding content above the header, like a global menu between services.\n *\n * @default undefined\n */\n topSlot?: ReactNode;\n /**\n * Slot for adding content to the left side of the Header.\n *\n * @default undefined\n */\n leftSlot?: ReactNode;\n /**\n * Slot for adding content to the right side of the Header.\n *\n * @default undefined\n */\n rightSlot?: ReactNode;\n /**\n * Slot for adding an `<ApplicationStatus />`.\n *\n * @default undefined\n */\n applicationStatus?: ReactNode;\n /**\n * Id for main content element where the skip link will anchor link.\n *\n * @default \"main\"\n */\n skipLinkId?: string;\n /**\n * Text for the skip link anchor link.\n *\n * @default \"Gå til innhold\"\n */\n skipLinkText?: string;\n /**\n * Element to wrap logotype. Can be any framework routing `<Link />`, like `next/link` or `react-router`.\n * Should have className `sds-typography-link`.\n * Children will be overwritten with `logoText` prop.\n *\n * @default undefined\n */\n logoLink?: ReactNode;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n topSlot,\n leftSlot,\n rightSlot,\n applicationStatus,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoLink,\n logoText = \"Sikt\",\n ...rest\n}: HeaderProps) => {\n const logoElement = (\n <Logo productName={logoText} 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 {topSlot}\n <header className={clsx(\"sds-header\", className)} {...rest}>\n <div className=\"sds-header__content\">\n <div className=\"sds-header__content-left\">\n {logoLink && isValidElement(logoLink)\n ? cloneElement(logoLink, logoLink.props ?? {}, logoElement)\n : logoElement}\n {leftSlot && (\n <div className=\"sds-header__content-left-item\">{leftSlot}</div>\n )}\n </div>\n <div className=\"sds-header__content-mid\">{children}</div>\n {rightSlot && (\n <div className=\"sds-header__content-right\">{rightSlot}</div>\n )}\n </div>\n </header>\n {applicationStatus}\n </>\n );\n};\nHeader.displayName = \"Header\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@sikt/sds-button": "^4.2.0",
|
|
39
39
|
"@sikt/sds-core": "^4.6.0",
|
|
40
40
|
"@sikt/sds-icons": "^3.0.0",
|
|
41
|
-
"@sikt/sds-logo": "^2.2.
|
|
41
|
+
"@sikt/sds-logo": "^2.2.3"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@types/react": "^18.0.0 || ^19.0.0",
|