@sikt/sds-header 3.0.3 → 3.0.4
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 +8 -1
- package/dist/index.css +3 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
All notable changes to this project will be documented in this file. See [
|
|
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
|
+
|
|
5
|
+
### [3.0.4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.3...@sikt/sds-header@3.0.4) (2024-04-09)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **header:** add missing deps sds-icons & button ([1e7d6d4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1e7d6d4a78ed5356173d28089f706ee85c847d05))
|
|
10
|
+
- **header:** remove obsolete clickable area of logo link ([558221c](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/558221cbcfaf06edbeb3a92478a5540d4fcafd10))
|
|
4
11
|
|
|
5
12
|
### [3.0.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-header@3.0.2...@sikt/sds-header@3.0.3) (2024-01-03)
|
|
6
13
|
|
package/dist/index.css
CHANGED
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../header.pcss","../header-nav.pcss"],"sourcesContent":[".sds-header {\n align-items: center;\n position: relative;\n background-color: var(--sds-color-layout-background-primary);\n\n --header-height: 48px;\n}\n\n @media (width >= 720px) {.sds-header {\n --header-height: 56px\n}\n }\n\n @media (width >= 1024px) {.sds-header {\n --header-height: 72px\n}\n }\n\n .sds-header__content {\n min-height: var(--header-height);\n padding: 0 var(--sds-space-padding-medium);\n display: grid;\n grid-gap: 0 var(--sds-space-padding-small);\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n }\n\n .sds-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: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n justify-self: end;\n }\n\n .sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n background-color: var(--sds-color-layout-background-primary);\n position: absolute;\n z-index: 1;\n }\n\n .sds-header-collapsible__button {\n grid-column: -2 / -1;\n justify-self: end;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n margin: var(--sds-focus-outline-width) 0;\n }\n\n @media (width >= 720px) {\n\n .sds-header-collapsible__button.sds-button {\n display: none\n }\n }\n\n .sds-header-collapsible__menu {\n display: none;\n gap: var(--sds-space-gap-medium);\n flex-direction: column;\n overflow: auto;\n width: 100%;\n border-top: var(--sds-space-border-weight-thin) solid\n var(--sds-color-interaction-primary-strong-default);\n padding: var(--sds-space-padding-medium);\n }\n\n .sds-header-collapsible__menu .sds-header__nav-list {\n display: flex;\n flex-direction: column;\n }\n\n .sds-header-collapsible__dropdown {\n position: absolute;\n top: calc(var(--header-height) + 2 * var(--sds-focus-outline-width));\n left: 0;\n background-color: var(--sds-color-layout-background-primary);\n z-index: calc(var(--sds-base-zindex-drawer) + 1);\n height: 100vh;\n width: 100%;\n max-height: 0;\n transition: max-height 0.25s ease;\n overflow: hidden;\n grid-column: 1 / -1;\n }\n\n .sds-header-collapsible__dropdown--open {\n max-height: calc(100vh - var(--header-height));\n }\n\n @media (width >= 720px) {\n\n .sds-header-collapsible__dropdown {\n display: none\n }\n }\n\n .sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {\n display: flex;\n }\n\n .sds-header .sds-header__logo {\n font-size: var(--sds-base-size-relative-m);\n }\n\n .sds-header .sds-header__logo-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n }\n",".sds-header__nav-list {\n height: 100%;\n list-style-type: none;\n margin: 0;\n }\n @media (width >= 720px) {\n .sds-header__nav-item {\n display: inline-flex\n }\n }\n @media (width < 720px) {\n .sds-header__nav-link {\n /* TODO: import this from Drawer component */\n align-items: center;\n background-color: transparent;\n border: 0 none;\n border-radius: var(--sds-space-border-radius-small);\n color: var(--sds-color-text-primary);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-small);\n text-decoration: none;\n width: 100%\n }\n\n .sds-header__nav-link:hover,\n .sds-header__nav-link:focus-visible {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-header__nav-link:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n .sds-header__nav-link:focus-visible {\n outline: var(--sds-focus-outline);\n }\n }\n @media (width >= 720px) {\n .sds-header__nav-link {\n /* TODO: import this from Tabs component */\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: inline-flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n text-decoration: none\n }\n\n .sds-header__nav-link-icon {\n font-size: var(--sds-base-size-m);\n }\n\n .sds-header__nav-link--selected,\n .sds-header__nav-link[aria-current=\"page\"] {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-header__nav-link:hover,\n .sds-header__nav-link:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-header__nav-link:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-header__nav-link:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n }\n"],"mappings":";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;AACC,WAAS;AACX;AAEA,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GANC;AAOG,aAAS;AACb;AACE;AAEF,CAAC;AACG,SAAO;AACP,SAAO;AACP,SAAO;AACP,gBAAc;AAChB;AAEF,CAAC,qBAAqB,CAAC,iCAAiC;AACtD,oBAAkB,IAAI;AACtB,YAAU;AACV,WAAS;AACX;AAEA,CAAC;AACG,eAAa,GAAG,EAAE;AAClB,gBAAc;AACd,SAAO;AACP,SAAO;AACP,SAAO;AACP,UAAQ,IAAI,2BAA2B;AACzC;AAEF,OAAO,CAAC,MAAM,CAAC,EAAE;AAEjB,GAXC,8BAW8B,CAAC;AACxB,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;AAEF,CAXC,6BAW6B,CAAC;AACzB,WAAS;AACT,kBAAgB;AAClB;AAEJ,CAAC;AACG,YAAU;AACV,OAAK,KAAK,IAAI,iBAAiB,EAAE,EAAE,EAAE,IAAI;AACzC,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;AAEJ,CAzBC,gCAyBgC,CAXhC,uCAWwE,CAzCxE;AA0CO,WAAS;AACX;AAEN,CAhHD,WAgHa,CAAC;AACX,aAAW,IAAI;AACjB;AAEA,CApHD,WAoHa,CAAC;AACT,oBAAkB;AAClB,SAAO;AACP,mBAAiB;
|
|
1
|
+
{"version":3,"sources":["../header.pcss","../header-nav.pcss"],"sourcesContent":[".sds-header {\n align-items: center;\n position: relative;\n background-color: var(--sds-color-layout-background-primary);\n\n --header-height: 48px;\n}\n\n @media (width >= 720px) {.sds-header {\n --header-height: 56px\n}\n }\n\n @media (width >= 1024px) {.sds-header {\n --header-height: 72px\n}\n }\n\n .sds-header__content {\n min-height: var(--header-height);\n padding: 0 var(--sds-space-padding-medium);\n display: grid;\n grid-gap: 0 var(--sds-space-padding-small);\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n }\n\n .sds-header__header-item {\n display: none;\n }\n\n @media (width >= 720px) {\n\n .sds-header__header-item {\n display: unset\n }\n }\n\n .sds-header__header-item--last-item {\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n justify-self: end;\n }\n\n .sds-header__skip-link.sds-screen-reader-only--focusable:focus-within {\n background-color: var(--sds-color-layout-background-primary);\n position: absolute;\n z-index: 1;\n }\n\n .sds-header-collapsible__button {\n grid-column: -2 / -1;\n justify-self: end;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n margin: var(--sds-focus-outline-width) 0;\n }\n\n @media (width >= 720px) {\n\n .sds-header-collapsible__button.sds-button {\n display: none\n }\n }\n\n .sds-header-collapsible__menu {\n display: none;\n gap: var(--sds-space-gap-medium);\n flex-direction: column;\n overflow: auto;\n width: 100%;\n border-top: var(--sds-space-border-weight-thin) solid\n var(--sds-color-interaction-primary-strong-default);\n padding: var(--sds-space-padding-medium);\n }\n\n .sds-header-collapsible__menu .sds-header__nav-list {\n display: flex;\n flex-direction: column;\n }\n\n .sds-header-collapsible__dropdown {\n position: absolute;\n top: calc(var(--header-height) + 2 * var(--sds-focus-outline-width));\n left: 0;\n background-color: var(--sds-color-layout-background-primary);\n z-index: calc(var(--sds-base-zindex-drawer) + 1);\n height: 100vh;\n width: 100%;\n max-height: 0;\n transition: max-height 0.25s ease;\n overflow: hidden;\n grid-column: 1 / -1;\n }\n\n .sds-header-collapsible__dropdown--open {\n max-height: calc(100vh - var(--header-height));\n }\n\n @media (width >= 720px) {\n\n .sds-header-collapsible__dropdown {\n display: none\n }\n }\n\n .sds-header-collapsible__dropdown.sds-header-collapsible__dropdown--open .sds-header-collapsible__menu {\n display: flex;\n }\n\n .sds-header .sds-header__logo {\n font-size: var(--sds-base-size-relative-m);\n }\n\n .sds-header .sds-header__logo-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n }\n",".sds-header__nav-list {\n height: 100%;\n list-style-type: none;\n margin: 0;\n }\n @media (width >= 720px) {\n .sds-header__nav-item {\n display: inline-flex\n }\n }\n @media (width < 720px) {\n .sds-header__nav-link {\n /* TODO: import this from Drawer component */\n align-items: center;\n background-color: transparent;\n border: 0 none;\n border-radius: var(--sds-space-border-radius-small);\n color: var(--sds-color-text-primary);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-small);\n text-decoration: none;\n width: 100%\n }\n\n .sds-header__nav-link:hover,\n .sds-header__nav-link:focus-visible {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-header__nav-link:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n .sds-header__nav-link:focus-visible {\n outline: var(--sds-focus-outline);\n }\n }\n @media (width >= 720px) {\n .sds-header__nav-link {\n /* TODO: import this from Tabs component */\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: inline-flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n text-decoration: none\n }\n\n .sds-header__nav-link-icon {\n font-size: var(--sds-base-size-m);\n }\n\n .sds-header__nav-link--selected,\n .sds-header__nav-link[aria-current=\"page\"] {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-header__nav-link:hover,\n .sds-header__nav-link:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-header__nav-link:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-header__nav-link:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n }\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
5
5
|
className?: string;
|
|
@@ -18,7 +18,7 @@ interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
|
|
|
18
18
|
declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
|
|
19
19
|
|
|
20
20
|
interface HeaderCollapsibleMenuProps {
|
|
21
|
-
children:
|
|
21
|
+
children: ReactNode;
|
|
22
22
|
dropdownOpen?: boolean;
|
|
23
23
|
ariaLabelOpenMenu?: string;
|
|
24
24
|
ariaLabelCloseMenu?: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
2
|
+
import { HTMLAttributes, ReactElement, AnchorHTMLAttributes, ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
5
5
|
className?: string;
|
|
@@ -18,7 +18,7 @@ interface HeaderNavProps extends HTMLAttributes<HTMLElement> {
|
|
|
18
18
|
declare const HeaderNav: ({ children, className, ...rest }: HeaderNavProps) => react_jsx_runtime.JSX.Element;
|
|
19
19
|
|
|
20
20
|
interface HeaderCollapsibleMenuProps {
|
|
21
|
-
children:
|
|
21
|
+
children: ReactNode;
|
|
22
22
|
dropdownOpen?: boolean;
|
|
23
23
|
ariaLabelOpenMenu?: string;
|
|
24
24
|
ariaLabelCloseMenu?: string;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("clsx"),s=require("@sikt/sds-core"),
|
|
1
|
+
"use strict";var e=require("clsx"),s=require("@sikt/sds-core"),n=require("@sikt/sds-logo"),a=require("react/jsx-runtime"),r=require("react"),d=require("@sikt/sds-button"),l=require("@sikt/sds-icons");function t(e){return e&&e.__esModule?e:{default:e}}var i=t(e),o=e=>r.cloneElement(e,{className:i.default("sds-header__nav-link",e.props.className)}),c=r.createContext({menuOpen:!1,setMenuOpen:()=>{}});exports.Header=({children:e,className:r,skipLinkId:d="main",skipLinkText:l="Gå til innhold",logoHref:t,logoText:o,...c})=>{const u=o?a.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:o}):a.jsx(n.Logo,{variant:"primary",className:"sds-header__logo"});return a.jsxs(a.Fragment,{children:[a.jsx(s.ScreenReaderOnly,{isFocusable:!0,className:"sds-header__skip-link",children:a.jsx(s.Link,{href:"#".concat(d),children:l})}),a.jsx("header",{className:i.default("sds-header",r),...c,children:a.jsxs("div",{className:"sds-header__content",children:[t?a.jsx(s.Link,{href:t,className:"sds-header__logo-link",children:u}):u,e]})})]})},exports.HeaderCollapsibleMenu=({children:e,dropdownOpen:s=!1,ariaLabelOpenMenu:n="Åpne meny",ariaLabelCloseMenu:t="Lukk meny",ariaLabelClose:o="Lukk",...u})=>{const h=r.useId(),[m,_]=r.useState(s);function p(){_(!1)}return r.useEffect((()=>{document.body.style.overflow=m?"hidden":"unset";const e=e=>{"Escape"===e.key&&p()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&p()},n=()=>{p()};if(m){const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.addEventListener("click",s),a.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.removeEventListener("click",s),a.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[m]),r.useEffect((()=>{_(s)}),[s]),a.jsxs(c.Provider,{value:{menuOpen:m,setMenuOpen:_},children:[r.Children.map(e,((s,n)=>a.jsx(a.Fragment,{children:r.cloneElement(s,{className:i.default("sds-header__header-item",n+1===r.Children.count(e)&&"sds-header__header-item--last-item")})}))),a.jsx(d.Button,{variant:"transparent",icon:m?a.jsx(l.XIcon,{}):a.jsx(l.ListIcon,{}),iconVariant:m?"right":"only",onClick:function(){_(!m)},"aria-label":m?t:n,"aria-controls":h,"aria-expanded":m,className:"sds-header-collapsible__button",children:m&&o}),a.jsx("div",{className:i.default("sds-header-collapsible__dropdown",m&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!m,id:h,...u,children:a.jsx("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:e})})]})},exports.HeaderNav=({children:e,className:s,...n})=>a.jsx("nav",{className:i.default("sds-header__nav",s),...n,children:a.jsx("ul",{className:"sds-header__nav-list",children:r.Children.map(e,(e=>{if(r.isValidElement(e))return a.jsx("li",{className:"sds-header__nav-item",children:o(e)})}))})});//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import React, {\n AnchorHTMLAttributes,\n HTMLAttributes,\n ReactElement,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo variant={\"primary\"} className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n <div className=\"sds-header__content\">\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n\n {children}\n </div>\n </header>\n </>\n );\n};\n","import React, {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n}\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n return (\n <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n <ul className=\"sds-header__nav-list\">\n {Children.map(children, (child) => {\n if (isValidElement(child)) {\n return (\n <li className=\"sds-header__nav-item\">\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__nav-link\",\n child.props.className,\n ),\n })}\n </li>\n );\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 createContext,\n useEffect,\n useId,\n useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n menuOpen: boolean;\n setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}>({\n menuOpen: false,\n setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n children: React.ReactNode;\n dropdownOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n dropdownOpen = false,\n ariaLabelOpenMenu = \"Åpne meny\",\n ariaLabelCloseMenu = \"Lukk meny\",\n ariaLabelClose = \"Lukk\",\n ...rest\n}: HeaderCollapsibleMenuProps) => {\n const menuId = useId();\n const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n function toggleMenu() {\n setMenuOpen(!menuOpen);\n }\n\n function closeMenu() {\n setMenuOpen(false);\n }\n\n useEffect(() => {\n document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n const closeWithKeyboard = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n closeMenu();\n }\n };\n\n const closeWithClick = (e: MouseEvent) => {\n if (\n e.target instanceof HTMLAnchorElement ||\n e.target instanceof HTMLButtonElement\n ) {\n closeMenu();\n }\n };\n\n const closeWithSubmit = () => {\n closeMenu();\n };\n\n if (menuOpen) {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.addEventListener(\"click\", closeWithClick);\n mobileContent.addEventListener(\"submit\", closeWithSubmit);\n }\n window.addEventListener(\"keydown\", closeWithKeyboard);\n }\n return () => {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.removeEventListener(\"click\", closeWithClick);\n mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n }\n window.removeEventListener(\"keydown\", closeWithKeyboard);\n };\n }, [menuOpen]);\n\n useEffect(() => {\n setMenuOpen(dropdownOpen);\n }, [dropdownOpen]);\n\n return (\n <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n {/* INFO: The desktop mode content of the header */}\n {Children.map(children, (child, index) => {\n return (\n <>\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__header-item\",\n index + 1 === Children.count(children) &&\n \"sds-header__header-item--last-item\",\n ),\n })}\n </>\n );\n })}\n <Button\n variant=\"transparent\"\n icon={menuOpen ? <XIcon /> : <ListIcon />}\n iconVariant={menuOpen ? \"right\" : \"only\"}\n onClick={toggleMenu}\n aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n aria-controls={menuId}\n aria-expanded={menuOpen}\n className=\"sds-header-collapsible__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-collapsible__dropdown\",\n menuOpen && \"sds-header-collapsible__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div\n id=\"sds-header-collapsible__mobile-content\"\n className=\"sds-header-collapsible__menu\"\n >\n {/* INFO: The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </MenuOpenContext.Provider>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import { AnchorHTMLAttributes, HTMLAttributes, ReactElement } 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 {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\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\ninterface ChildProps {\n className?: string;\n}\n\nconst addClassToChildren = (child: ReactElement<ChildProps>) => {\n return cloneElement(child, {\n className: clsx(\"sds-header__nav-link\", child.props.className),\n });\n};\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n return (\n <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n <ul className=\"sds-header__nav-list\">\n {Children.map(children, (child) => {\n if (isValidElement(child)) {\n return (\n <li className=\"sds-header__nav-item\">\n {addClassToChildren(child as ReactElement<ChildProps>)}\n </li>\n );\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 {\n Children,\n Dispatch,\n ReactElement,\n ReactNode,\n SetStateAction,\n cloneElement,\n createContext,\n useEffect,\n useId,\n useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n menuOpen: boolean;\n setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}>({\n menuOpen: false,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n children: ReactNode;\n dropdownOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n dropdownOpen = false,\n ariaLabelOpenMenu = \"Åpne meny\",\n ariaLabelCloseMenu = \"Lukk meny\",\n ariaLabelClose = \"Lukk\",\n ...rest\n}: HeaderCollapsibleMenuProps) => {\n const menuId = useId();\n const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n function toggleMenu() {\n setMenuOpen(!menuOpen);\n }\n\n function closeMenu() {\n setMenuOpen(false);\n }\n\n useEffect(() => {\n document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n const closeWithKeyboard = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n closeMenu();\n }\n };\n\n const closeWithClick = (e: MouseEvent) => {\n if (\n e.target instanceof HTMLAnchorElement ||\n e.target instanceof HTMLButtonElement\n ) {\n closeMenu();\n }\n };\n\n const closeWithSubmit = () => {\n closeMenu();\n };\n\n if (menuOpen) {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.addEventListener(\"click\", closeWithClick);\n mobileContent.addEventListener(\"submit\", closeWithSubmit);\n }\n window.addEventListener(\"keydown\", closeWithKeyboard);\n }\n return () => {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.removeEventListener(\"click\", closeWithClick);\n mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n }\n window.removeEventListener(\"keydown\", closeWithKeyboard);\n };\n }, [menuOpen]);\n\n useEffect(() => {\n setMenuOpen(dropdownOpen);\n }, [dropdownOpen]);\n\n return (\n <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n {/* INFO: The desktop mode content of the header */}\n {Children.map(children, (child, index) => {\n return (\n <>\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__header-item\",\n index + 1 === Children.count(children) &&\n \"sds-header__header-item--last-item\",\n ),\n })}\n </>\n );\n })}\n <Button\n variant=\"transparent\"\n icon={menuOpen ? <XIcon /> : <ListIcon />}\n iconVariant={menuOpen ? \"right\" : \"only\"}\n onClick={toggleMenu}\n aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n aria-controls={menuId}\n aria-expanded={menuOpen}\n className=\"sds-header-collapsible__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-collapsible__dropdown\",\n menuOpen && \"sds-header-collapsible__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div\n id=\"sds-header-collapsible__mobile-content\"\n className=\"sds-header-collapsible__menu\"\n >\n {/* INFO: The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </MenuOpenContext.Provider>\n );\n};\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"clsx";import{ScreenReaderOnly as s,Link as
|
|
1
|
+
import e from"clsx";import{ScreenReaderOnly as s,Link as n}from"@sikt/sds-core";import{Logo as a}from"@sikt/sds-logo";import{jsxs as r,Fragment as d,jsx as i}from"react/jsx-runtime";import{createContext as l,Children as t,isValidElement as o,useId as c,useState as m,useEffect as h,cloneElement as p}from"react";import{Button as _}from"@sikt/sds-button";import{XIcon as u,ListIcon as v}from"@sikt/sds-icons";var k=({children:l,className:t,skipLinkId:o="main",skipLinkText:c="Gå til innhold",logoHref:m,logoText:h,...p})=>{const _=h?i("span",{className:"sds-header__logo-text sds-typography-body--large",children:h}):i(a,{variant:"primary",className:"sds-header__logo"});return r(d,{children:[i(s,{isFocusable:!0,className:"sds-header__skip-link",children:i(n,{href:"#".concat(o),children:c})}),i("header",{className:e("sds-header",t),...p,children:r("div",{className:"sds-header__content",children:[m?i(n,{href:m,className:"sds-header__logo-link",children:_}):_,l]})})]})},b=s=>p(s,{className:e("sds-header__nav-link",s.props.className)}),f=({children:s,className:n,...a})=>i("nav",{className:e("sds-header__nav",n),...a,children:i("ul",{className:"sds-header__nav-list",children:t.map(s,(e=>{if(o(e))return i("li",{className:"sds-header__nav-item",children:b(e)})}))})}),N=l({menuOpen:!1,setMenuOpen:()=>{}}),L=({children:s,dropdownOpen:n=!1,ariaLabelOpenMenu:a="Åpne meny",ariaLabelCloseMenu:l="Lukk meny",ariaLabelClose:o="Lukk",...k})=>{const b=c(),[f,L]=m(n);function y(){L(!1)}return h((()=>{document.body.style.overflow=f?"hidden":"unset";const e=e=>{"Escape"===e.key&&y()},s=e=>{(e.target instanceof HTMLAnchorElement||e.target instanceof HTMLButtonElement)&&y()},n=()=>{y()};if(f){const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.addEventListener("click",s),a.addEventListener("submit",n)),window.addEventListener("keydown",e)}return()=>{const a=document.getElementById("sds-header-collapsible__mobile-content");a&&(a.removeEventListener("click",s),a.removeEventListener("submit",n)),window.removeEventListener("keydown",e)}}),[f]),h((()=>{L(n)}),[n]),r(N.Provider,{value:{menuOpen:f,setMenuOpen:L},children:[t.map(s,((n,a)=>i(d,{children:p(n,{className:e("sds-header__header-item",a+1===t.count(s)&&"sds-header__header-item--last-item")})}))),i(_,{variant:"transparent",icon:i(f?u:v,{}),iconVariant:f?"right":"only",onClick:function(){L(!f)},"aria-label":f?l:a,"aria-controls":b,"aria-expanded":f,className:"sds-header-collapsible__button",children:f&&o}),i("div",{className:e("sds-header-collapsible__dropdown",f&&"sds-header-collapsible__dropdown--open"),"aria-hidden":!f,id:b,...k,children:i("div",{id:"sds-header-collapsible__mobile-content",className:"sds-header-collapsible__menu",children:s})})]})};export{k as Header,L as HeaderCollapsibleMenu,f as HeaderNav};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import React, {\n AnchorHTMLAttributes,\n HTMLAttributes,\n ReactElement,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?:\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>\n | ReactElement<AnchorHTMLAttributes<HTMLAnchorElement>>[];\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo variant={\"primary\"} className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n <div className=\"sds-header__content\">\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n\n {children}\n </div>\n </header>\n </>\n );\n};\n","import React, {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport \"./header-nav.pcss\";\nimport clsx from \"clsx\";\n\nexport interface HeaderNavProps extends HTMLAttributes<HTMLElement> {\n children: ReactNode;\n className?: string;\n}\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n return (\n <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n <ul className=\"sds-header__nav-list\">\n {Children.map(children, (child) => {\n if (isValidElement(child)) {\n return (\n <li className=\"sds-header__nav-item\">\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__nav-link\",\n child.props.className,\n ),\n })}\n </li>\n );\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 createContext,\n useEffect,\n useId,\n useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n menuOpen: boolean;\n setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}>({\n menuOpen: false,\n setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n children: React.ReactNode;\n dropdownOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n dropdownOpen = false,\n ariaLabelOpenMenu = \"Åpne meny\",\n ariaLabelCloseMenu = \"Lukk meny\",\n ariaLabelClose = \"Lukk\",\n ...rest\n}: HeaderCollapsibleMenuProps) => {\n const menuId = useId();\n const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n function toggleMenu() {\n setMenuOpen(!menuOpen);\n }\n\n function closeMenu() {\n setMenuOpen(false);\n }\n\n useEffect(() => {\n document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n const closeWithKeyboard = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n closeMenu();\n }\n };\n\n const closeWithClick = (e: MouseEvent) => {\n if (\n e.target instanceof HTMLAnchorElement ||\n e.target instanceof HTMLButtonElement\n ) {\n closeMenu();\n }\n };\n\n const closeWithSubmit = () => {\n closeMenu();\n };\n\n if (menuOpen) {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.addEventListener(\"click\", closeWithClick);\n mobileContent.addEventListener(\"submit\", closeWithSubmit);\n }\n window.addEventListener(\"keydown\", closeWithKeyboard);\n }\n return () => {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.removeEventListener(\"click\", closeWithClick);\n mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n }\n window.removeEventListener(\"keydown\", closeWithKeyboard);\n };\n }, [menuOpen]);\n\n useEffect(() => {\n setMenuOpen(dropdownOpen);\n }, [dropdownOpen]);\n\n return (\n <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n {/* INFO: The desktop mode content of the header */}\n {Children.map(children, (child, index) => {\n return (\n <>\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__header-item\",\n index + 1 === Children.count(children) &&\n \"sds-header__header-item--last-item\",\n ),\n })}\n </>\n );\n })}\n <Button\n variant=\"transparent\"\n icon={menuOpen ? <XIcon /> : <ListIcon />}\n iconVariant={menuOpen ? \"right\" : \"only\"}\n onClick={toggleMenu}\n aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n aria-controls={menuId}\n aria-expanded={menuOpen}\n className=\"sds-header-collapsible__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-collapsible__dropdown\",\n menuOpen && \"sds-header-collapsible__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div\n id=\"sds-header-collapsible__mobile-content\"\n className=\"sds-header-collapsible__menu\"\n >\n {/* INFO: The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </MenuOpenContext.Provider>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../Header.tsx","../HeaderNav.tsx","../HeaderCollapsibleMenu.tsx"],"names":["clsx","jsx","Children","cloneElement","Fragment","jsxs"],"mappings":"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","sourcesContent":["import { AnchorHTMLAttributes, HTMLAttributes, ReactElement } 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 {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\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\ninterface ChildProps {\n className?: string;\n}\n\nconst addClassToChildren = (child: ReactElement<ChildProps>) => {\n return cloneElement(child, {\n className: clsx(\"sds-header__nav-link\", child.props.className),\n });\n};\n\nexport const HeaderNav = ({ children, className, ...rest }: HeaderNavProps) => {\n return (\n <nav className={clsx(\"sds-header__nav\", className)} {...rest}>\n <ul className=\"sds-header__nav-list\">\n {Children.map(children, (child) => {\n if (isValidElement(child)) {\n return (\n <li className=\"sds-header__nav-item\">\n {addClassToChildren(child as ReactElement<ChildProps>)}\n </li>\n );\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 {\n Children,\n Dispatch,\n ReactElement,\n ReactNode,\n SetStateAction,\n cloneElement,\n createContext,\n useEffect,\n useId,\n useState,\n} from \"react\";\n\nconst MenuOpenContext = createContext<{\n menuOpen: boolean;\n setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}>({\n menuOpen: false,\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n setMenuOpen: () => {},\n});\nexport interface HeaderCollapsibleMenuProps {\n children: ReactNode;\n dropdownOpen?: boolean;\n ariaLabelOpenMenu?: string;\n ariaLabelCloseMenu?: string;\n ariaLabelClose?: string;\n}\n\nexport const HeaderCollapsibleMenu = ({\n children,\n dropdownOpen = false,\n ariaLabelOpenMenu = \"Åpne meny\",\n ariaLabelCloseMenu = \"Lukk meny\",\n ariaLabelClose = \"Lukk\",\n ...rest\n}: HeaderCollapsibleMenuProps) => {\n const menuId = useId();\n const [menuOpen, setMenuOpen] = useState(dropdownOpen);\n\n function toggleMenu() {\n setMenuOpen(!menuOpen);\n }\n\n function closeMenu() {\n setMenuOpen(false);\n }\n\n useEffect(() => {\n document.body.style.overflow = menuOpen ? \"hidden\" : \"unset\";\n\n const closeWithKeyboard = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n closeMenu();\n }\n };\n\n const closeWithClick = (e: MouseEvent) => {\n if (\n e.target instanceof HTMLAnchorElement ||\n e.target instanceof HTMLButtonElement\n ) {\n closeMenu();\n }\n };\n\n const closeWithSubmit = () => {\n closeMenu();\n };\n\n if (menuOpen) {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.addEventListener(\"click\", closeWithClick);\n mobileContent.addEventListener(\"submit\", closeWithSubmit);\n }\n window.addEventListener(\"keydown\", closeWithKeyboard);\n }\n return () => {\n const mobileContent = document.getElementById(\n \"sds-header-collapsible__mobile-content\",\n );\n if (mobileContent) {\n mobileContent.removeEventListener(\"click\", closeWithClick);\n mobileContent.removeEventListener(\"submit\", closeWithSubmit);\n }\n window.removeEventListener(\"keydown\", closeWithKeyboard);\n };\n }, [menuOpen]);\n\n useEffect(() => {\n setMenuOpen(dropdownOpen);\n }, [dropdownOpen]);\n\n return (\n <MenuOpenContext.Provider value={{ menuOpen, setMenuOpen }}>\n {/* INFO: The desktop mode content of the header */}\n {Children.map(children, (child, index) => {\n return (\n <>\n {cloneElement(child as ReactElement, {\n className: clsx(\n \"sds-header__header-item\",\n index + 1 === Children.count(children) &&\n \"sds-header__header-item--last-item\",\n ),\n })}\n </>\n );\n })}\n <Button\n variant=\"transparent\"\n icon={menuOpen ? <XIcon /> : <ListIcon />}\n iconVariant={menuOpen ? \"right\" : \"only\"}\n onClick={toggleMenu}\n aria-label={menuOpen ? ariaLabelCloseMenu : ariaLabelOpenMenu}\n aria-controls={menuId}\n aria-expanded={menuOpen}\n className=\"sds-header-collapsible__button\"\n >\n {menuOpen && ariaLabelClose}\n </Button>\n <div\n className={clsx(\n \"sds-header-collapsible__dropdown\",\n menuOpen && \"sds-header-collapsible__dropdown--open\",\n )}\n aria-hidden={!menuOpen}\n id={menuId}\n {...rest}\n >\n <div\n id=\"sds-header-collapsible__mobile-content\"\n className=\"sds-header-collapsible__menu\"\n >\n {/* INFO: The mobile mode content of the header */}\n {children}\n </div>\n </div>\n </MenuOpenContext.Provider>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.4",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -15,7 +15,9 @@
|
|
|
15
15
|
"build": "tsup"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
+
"@sikt/sds-button": "^3.1.1",
|
|
18
19
|
"@sikt/sds-core": "^3.0.0",
|
|
20
|
+
"@sikt/sds-icons": "^2.0.0",
|
|
19
21
|
"@sikt/sds-logo": "^2.0.0",
|
|
20
22
|
"@sikt/sds-tokens": "^1.0.0"
|
|
21
23
|
},
|