@sikt/sds-header 4.0.0 → 4.0.2
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 +13 -0
- package/README.md +11 -47
- package/dist/index.css +1 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- 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,19 @@
|
|
|
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
|
+
## [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
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **header:** right slot should always be right ([2d4b63f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2d4b63fd74627b48266f52da142ac66ed431b20c))
|
|
10
|
+
|
|
11
|
+
## [4.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@4.0.0...@sikt/sds-header@4.0.1) (2025-10-17)
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
- **deps:** update @sikt/sds-logo@2.2.2 ([c7f2ed3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c7f2ed34ed0515a204f6959ee95d1cd431171841))
|
|
16
|
+
- **logo:** correct color ([52d66f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/52d66f1c6453a6d5e03a7efdef3a50c7a6371a84))
|
|
17
|
+
|
|
5
18
|
## [4.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.1.1...@sikt/sds-header@4.0.0) (2025-10-06)
|
|
6
19
|
|
|
7
20
|
### ⚠ BREAKING CHANGES
|
package/README.md
CHANGED
|
@@ -8,65 +8,29 @@ npm i -s @sikt/sds-header
|
|
|
8
8
|
|
|
9
9
|
### React
|
|
10
10
|
|
|
11
|
-
|
|
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.
|
|
11
|
+
Simple header
|
|
16
12
|
|
|
17
13
|
```jsx
|
|
18
|
-
import { Header
|
|
14
|
+
import { Header } from "@sikt/sds-header";
|
|
19
15
|
import "@sikt/sds-header/dist/index.css";
|
|
20
16
|
import "@sikt/sds-logo/dist/index.css";
|
|
21
17
|
|
|
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>;
|
|
18
|
+
<Header />;
|
|
31
19
|
```
|
|
32
20
|
|
|
33
|
-
|
|
21
|
+
Header with product name
|
|
34
22
|
|
|
35
23
|
```jsx
|
|
36
|
-
|
|
37
|
-
import { HeaderCollapsibleMenu } from "@sikt/sds-header";
|
|
38
|
-
|
|
39
|
-
const { menuOpen, setMenuOpen } = useContext(MenuOpenContext);
|
|
24
|
+
<Header logoText="Min produkt" logoHref="//path/to/my/product" />
|
|
40
25
|
```
|
|
41
26
|
|
|
42
|
-
|
|
27
|
+
Header with hamburger that can be positioned left `leftSlot` or right `rigthSlot`.
|
|
28
|
+
Children are positioned in the middle.
|
|
43
29
|
|
|
44
30
|
```jsx
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<Header>
|
|
50
|
-
<div>This content is positioned in the middle of the header</div>
|
|
51
|
-
<div>This content is positioned on the right side of the header</div>
|
|
52
|
-
</Header>;
|
|
31
|
+
<Header leftSlot={<MyOwnHamburgerComponent />}>
|
|
32
|
+
Content positioned in the middle of the header
|
|
33
|
+
</Header>
|
|
53
34
|
```
|
|
54
35
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
Import stylesheet:
|
|
58
|
-
|
|
59
|
-
```css
|
|
60
|
-
@import url("@sikt/sds-header");
|
|
61
|
-
@import url("@sikt/sds-logo");
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
Create custom markup:
|
|
65
|
-
|
|
66
|
-
```html
|
|
67
|
-
<header class="sds-header">
|
|
68
|
-
<div class="sds-header__content">
|
|
69
|
-
<!-- content goes here -->
|
|
70
|
-
</div>
|
|
71
|
-
</header>
|
|
72
|
-
```
|
|
36
|
+
There is also a `topSlot` for adding an external menu above the header and a `applicationStatus` prop for adding a status below the header.
|
package/dist/index.css
CHANGED
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 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-header__logo-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n width: -webkit-fit-content;\n width: fit-content;\n }\n\n.sds-header__logo-link:active,\n .sds-header__logo-link:focus-visible,\n .sds-header__logo-link: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-header__logo-link: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,YAAU;AAEV,mBAAiB;AACnB;AAEA,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,
|
|
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-header__logo-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n width: -webkit-fit-content;\n width: fit-content;\n }\n\n.sds-header__logo-link:active,\n .sds-header__logo-link:focus-visible,\n .sds-header__logo-link: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-header__logo-link: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,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAXC;AAYG,qBAAiB;AACrB;AACE;AAEF,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAlBC;AAmBG,qBAAiB;AACrB;AACE;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACpD,oBAAkB,IAAI;AACtB,YAAU;AACV,WAAS;AACX;AAEF,CAAC;AACK,oBAAkB;AAClB,SAAO;AACP,mBAAiB;AACjB,SAAO;AACP,SAAO;AACT;AAEJ,CARC,qBAQqB;AAChB,CATL,qBAS2B;AACtB,CAVL,qBAU2B;AACpB,oBAAkB;AACpB;AAEN,CAAC;AACG,eAAa;AACb,WAAS;AACT,OAAK,EAAE,IAAI;AACX,yBAAuB,IAAI;AAC3B,cAAY,IAAI;AAChB,WAAS,EAAE,IAAI;AACjB;AAEF,OAAO,CAAC,MAAM,CAAC,EAAE;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,qBAsC+C,KAAK,EAAE,CAAC;AAC9C,eAAa,IAAI,MAAM;AACvB,gBAAc,IAAI;AACpB;AAER,CAAC;AACK,WAAS;AACX;AAEJ,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GANC;AAOO,aAAS;AACb;AACE;AAEN,CAAC;AACK,gBAAc;AAChB;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -13,6 +13,9 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
|
13
13
|
logoHref?: string;
|
|
14
14
|
logoText?: string;
|
|
15
15
|
}
|
|
16
|
-
declare const Header:
|
|
16
|
+
declare const Header: {
|
|
17
|
+
({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
displayName: string;
|
|
19
|
+
};
|
|
17
20
|
|
|
18
21
|
export { Header, type HeaderProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,9 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
|
13
13
|
logoHref?: string;
|
|
14
14
|
logoText?: string;
|
|
15
15
|
}
|
|
16
|
-
declare const Header:
|
|
16
|
+
declare const Header: {
|
|
17
|
+
({ children, topSlot, leftSlot, rightSlot, applicationStatus, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
18
|
+
displayName: string;
|
|
19
|
+
};
|
|
17
20
|
|
|
18
21
|
export { Header, type HeaderProps };
|
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"),l=Object.defineProperty,
|
|
1
|
+
"use strict";var e=require("@sikt/sds-core"),r=require("@sikt/sds-logo"),s=require("clsx/lite"),t=require("react/jsx-runtime"),l=Object.defineProperty,a=Object.defineProperties,i=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,d=(e,r,s)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[r]=s,h=(e,r)=>{for(var s in r||(r={}))o.call(r,s)&&d(e,s,r[s]);if(n)for(var s of n(r))c.call(r,s)&&d(e,s,r[s]);return e},p=l=>{var d=l,{children:p,topSlot:f,leftSlot:m,rightSlot:x,applicationStatus:j,className:u,skipLinkId:k="main",skipLinkText:_="Gå til innhold",logoHref:g,logoText:v="Sikt"}=d,N=((e,r)=>{var s={};for(var t in e)o.call(e,t)&&r.indexOf(t)<0&&(s[t]=e[t]);if(null!=e&&n)for(var t of n(e))r.indexOf(t)<0&&c.call(e,t)&&(s[t]=e[t]);return s})(d,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoHref","logoText"]);const b=t.jsx(r.Logo,{productName:v,className:"sds-header__logo"});return t.jsxs(t.Fragment,{children:[t.jsx(e.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:t.jsx(e.Link,{href:"#".concat(k),children:_})}),f,t.jsx("header",(O=h({className:s.clsx("sds-header",u)},N),S={children:t.jsxs("div",{className:"sds-header__content",children:[t.jsxs("div",{className:"sds-header__content-left",children:[g?t.jsx(e.Link,{href:g,className:"sds-header__logo-link",children:b}):b,m&&t.jsx("div",{className:"sds-header__content-left-item",children:m})]}),t.jsx("div",{className:"sds-header__content-mid",children:p}),x&&t.jsx("div",{className:"sds-header__content-right",children:x})]})},a(O,i(S)))),j]});var O,S};p.displayName="Header",exports.Header=p;//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,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,GApCb,GA0BuB,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;AAGA,EAAA,MAAM,8BACHA,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,kCACEG,YAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,QAED,QACC,oBAAAL,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/Header.tsx"],"names":["jsx","Logo","jsxs","Fragment","ScreenReaderOnly","Link","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,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,GApCb,GA0BuB,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;AAGA,EAAA,MAAM,8BACHA,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,kCACEG,YAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,QAED,QACC,oBAAAL,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} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n topSlot?: ReactNode;\n leftSlot?: ReactNode;\n rightSlot?: ReactNode;\n applicationStatus?: ReactNode;\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\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 logoHref,\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 {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\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 l}from"clsx/lite";import{jsxs as s,Fragment as
|
|
1
|
+
import{ScreenReaderOnly as e,Link as r}from"@sikt/sds-core";import{Logo as t}from"@sikt/sds-logo";import{clsx as l}from"clsx/lite";import{jsxs as s,Fragment as a,jsx as i}from"react/jsx-runtime";var o=Object.defineProperty,n=Object.defineProperties,c=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable,m=(e,r,t)=>r in e?o(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))p.call(r,t)&&m(e,t,r[t]);if(d)for(var t of d(r))h.call(r,t)&&m(e,t,r[t]);return e},_=o=>{var m=o,{children:_,topSlot:k,leftSlot:v,rightSlot:g,applicationStatus:u,className:N,skipLinkId:b="main",skipLinkText:O="Gå til innhold",logoHref:S,logoText:x="Sikt"}=m,y=((e,r)=>{var t={};for(var l in e)p.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(null!=e&&d)for(var l of d(e))r.indexOf(l)<0&&h.call(e,l)&&(t[l]=e[l]);return t})(m,["children","topSlot","leftSlot","rightSlot","applicationStatus","className","skipLinkId","skipLinkText","logoHref","logoText"]);const j=i(t,{productName:x,className:"sds-header__logo"});return s(a,{children:[i(e,{isFocusable:!0,className:"sds-header__skip-link",children:i(r,{href:"#".concat(b),children:O})}),k,i("header",(P=f({className:l("sds-header",N)},y),w={children:s("div",{className:"sds-header__content",children:[s("div",{className:"sds-header__content-left",children:[S?i(r,{href:S,className:"sds-header__logo-link",children:j}):j,v&&i("div",{className:"sds-header__content-left-item",children:v})]}),i("div",{className:"sds-header__content-mid",children:_}),g&&i("div",{className:"sds-header__content-right",children:g})]})},n(P,c(w)))),u]});var P,w};_.displayName="Header";export{_ as Header};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,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,GApCb,GA0BuB,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;AAGA,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,uBACE,IAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,QAED,QACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAS,EAAA,QAAA,EAAA;AAAA,OAE7D,EAAA,CAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ba,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,GApCb,GA0BuB,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;AAGA,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,uBACE,IAAK,EAAA,EAAA,IAAA,EAAM,UAAU,SAAU,EAAA,uBAAA,EAC7B,uBACH,CAEA,GAAA,WAAA;AAAA,QAED,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} from \"react\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n topSlot?: ReactNode;\n leftSlot?: ReactNode;\n rightSlot?: ReactNode;\n applicationStatus?: ReactNode;\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\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 logoHref,\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 {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\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": "4.0.
|
|
3
|
+
"version": "4.0.2",
|
|
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.2"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@types/react": "^18.0.0 || ^19.0.0",
|