@sikt/sds-header 4.0.1 → 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 +7 -1
- package/README.md +11 -47
- 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 +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
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
|
+
|
|
5
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)
|
|
6
12
|
|
|
7
13
|
### Bug Fixes
|
|
8
14
|
|
|
9
|
-
- **deps:** update @sikt/sds-logo@2.2.2 ([
|
|
15
|
+
- **deps:** update @sikt/sds-logo@2.2.2 ([c7f2ed3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c7f2ed34ed0515a204f6959ee95d1cd431171841))
|
|
10
16
|
- **logo:** correct color ([52d66f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/52d66f1c6453a6d5e03a7efdef3a50c7a6371a84))
|
|
11
17
|
|
|
12
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)
|
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.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"]}
|