@sikt/sds-header 1.0.0 → 2.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/README.md +2 -0
- package/dist/cjs/index.css +2 -0
- package/dist/cjs/index.css.map +1 -0
- package/dist/cjs/index.d.ts +13 -0
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -11,6 +11,7 @@ npm i -s @sikt/sds-header
|
|
|
11
11
|
```js
|
|
12
12
|
import { Header } from "@sikt/sds-header";
|
|
13
13
|
import "@sikt/sds-header/dist/index.css";
|
|
14
|
+
import "@sikt/sds-logo/dist/index.css";
|
|
14
15
|
|
|
15
16
|
<Header>{/*content goes here*/}</Header>;
|
|
16
17
|
```
|
|
@@ -21,6 +22,7 @@ Import stylesheet:
|
|
|
21
22
|
|
|
22
23
|
```css
|
|
23
24
|
@import url("@sikt/sds-header");
|
|
25
|
+
@import url("@sikt/sds-logo");
|
|
24
26
|
```
|
|
25
27
|
|
|
26
28
|
Create custom markup:
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.sds-header{align-items:center;background-color:var(--sds-color-layout-background-primary);display:flex;justify-content:space-between;min-height:48px;padding:0 var(--sds-space-padding-huge)}.sds-header__skip-link:focus-within{position:absolute}.sds-header .sds-header__logo{font-size:var(--sds-base-size-relative-m)}.sds-header .sds-header__logo-link{background-color:unset;color:inherit;text-decoration:none}@media (width >= 720px){.sds-header{min-height:56px}}@media (width >= 1024px){.sds-header{min-height:72px}}
|
|
2
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["header.pcss"],"names":[],"mappings":"AAEA,YACE,kBAAmB,CACnB,2DAA4D,CAC5D,YAAa,CACb,6BAA8B,CAC9B,eAAgB,CAChB,uCAuBF,CArBE,oCACE,iBACF,CAEA,8BACE,yCAOF,CALE,mCACE,sBAAuB,CACvB,aAAc,CACd,oBACF,CAGF,wBAtBF,YAuBI,eAMJ,CALE,CAEA,yBA1BF,YA2BI,eAEJ,CADE","file":"index.css","sourcesContent":["@import url(\"@sikt/sds-tokens/dist/css/custom-media.css\");\n\n.sds-header {\n align-items: center;\n background-color: var(--sds-color-layout-background-primary);\n display: flex;\n justify-content: space-between;\n min-height: 48px;\n padding: 0 var(--sds-space-padding-huge);\n\n &__skip-link:focus-within {\n position: absolute;\n }\n\n .sds-header__logo {\n font-size: var(--sds-base-size-relative-m);\n\n &-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n }\n }\n\n @media (--sds-base-breakpoint-tablet) {\n min-height: 56px;\n }\n\n @media (--sds-base-breakpoint-desktop) {\n min-height: 72px;\n }\n}\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { HTMLAttributes, ReactNode } from "react";
|
|
3
|
+
interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
4
|
+
className?: string;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
skipLinkId?: string;
|
|
7
|
+
skipLinkText?: string;
|
|
8
|
+
logoHref?: string;
|
|
9
|
+
logoText?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export type { HeaderProps };
|
|
13
|
+
export { Header };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),s=require("clsx"),r=require("react");function a(e){var s=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),s.default=e,Object.freeze(s)}var n=a(r);const l=r.forwardRef((({children:r,className:a,isExternal:n,noIcon:l,...t},c)=>e.jsx("a",{ref:c,className:s("sds-typography-link",n&&"sds-typography-link--external",l&&"sds-typography-link--no-icon",a),...t,children:r})));l.displayName="Link";const t=({children:r,className:a,isFocusable:n,...l})=>e.jsx("span",{className:s("sds-screen-reader-only",n&&"sds-screen-reader-only--focusable",a),...l,children:r});var c,i;function o(){return o=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var r=arguments[s];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},o.apply(this,arguments)}const d=e=>n.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 75 48"},e),c||(c=n.createElement("g",{fill:"currentColor",clipPath:"url(#Logo_svg__a)"},n.createElement("path",{d:"M52.262 1.63c-6.493 0-12.331 2.769-16.409 7.175l9.998 9.998c2.865 2.864 2.865 7.53 0 10.394l-9.998 9.998c4.092 4.406 9.93 7.175 16.409 7.175 12.358 0 22.37-10.012 22.37-22.37S64.62 1.63 52.262 1.63z"}),n.createElement("path",{d:"M29.893 24a22.277 22.277 0 0 1 5.96-15.195l-6.656-6.656c-2.864-2.865-7.53-2.865-10.394 0L2.148 18.804c-2.864 2.864-2.864 7.529 0 10.394l16.655 16.655c2.865 2.864 7.53 2.864 10.394 0l6.657-6.657a22.214 22.214 0 0 1-5.961-15.195z"}))),i||(i=n.createElement("defs",null,n.createElement("clipPath",{id:"Logo_svg__a"},n.createElement("path",{fill:"currentColor",d:"M0 0h75v48H0z"}))))),h={nb:"Kunnskapssektorens<br /> tjenesteleverandør",nn:"Kunnskapssektorens<br /> tenesteleverandør",en:"Norwegian Agency for Shared<br /> Services in Education and Research",se:"Máhttosuorggi<br /> bálvaluslágideaddji",smj:"Máhtudaksuorge<br /> dievnastusbuvtadadiddje",sma:"Maahtoesuerkien<br /> dïenesjedeellije",fkv:"Tietosektorin<br /> palvelu"},u=({variant:r="primary",className:a,lang:n="nb",...l})=>{const t="secondary"===r;return e.jsxs("div",{className:s("sds-logo",`sds-logo--${r}`,a),...l,children:[e.jsx(d,{className:"sds-logo__icon","aria-hidden":!0}),e.jsxs("div",{children:[e.jsx("div",{className:"sds-logo__title",children:"Sikt"}),t&&e.jsx("div",{className:"sds-logo__subtitle",dangerouslySetInnerHTML:{__html:h[n]}})]})]})};exports.Header=({children:r,className:a,skipLinkId:n="main",skipLinkText:c="Gå til innhold",logoHref:i,logoText:o,...d})=>{const h=o?e.jsx("span",{className:"sds-header__logo-text sds-typography-body--large",children:o}):e.jsx(u,{className:"sds-header__logo"});return e.jsxs(e.Fragment,{children:[e.jsx(t,{isFocusable:!0,className:"sds-header__skip-link",children:e.jsx(l,{href:`#${n}`,children:c})}),e.jsxs("header",{className:s("sds-header",a),...d,children:[i?e.jsx(l,{href:i,className:"sds-header__logo-link",children:h}):h,r]})]})};
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../core/dist/index.js","../../../logo/dist/index.js","../../Header.tsx"],"sourcesContent":["import{jsx as e,jsxs as s}from\"react/jsx-runtime\";import a,{clsx as r}from\"clsx\";import{Children as l,isValidElement as i,cloneElement as c,forwardRef as n}from\"react\";const d=({children:s,className:r,title:l,...i})=>e(\"abbr\",{className:a(\"sds-typography-abbr\",r),tabIndex:0,\"data-title\":l,\"aria-label\":l,...i,children:s}),o=({children:a,aspectRatio:n,figCaption:d,...o})=>s(\"figure\",{className:\"sds-figure\",...o,children:[l.map(a,(e=>{if(i(e))return(e=>{const s={className:r(\"sds-figure__figure\",\"16x9\"===n&&\"sds-figure__figure--ratio-16x9\",e.props.className)};return c(e,s)})(e)})),d&&e(\"figcaption\",{className:\"sds-figure__caption\",children:d})]}),t=({children:s,level:r,variant:l,className:i,...c})=>e(`h${r}`,{className:a(\"sds-typography-heading\",`sds-typography-heading--${l}`,i),...c,children:s}),p=e=>t({...e,level:\"1\"}),h=e=>t({...e,level:\"2\"}),m=e=>t({...e,level:\"3\"}),y=e=>t({...e,level:\"4\"}),g=e=>t({...e,level:\"5\"}),f=e=>t({...e,level:\"6\"}),N=({children:s,variant:r=\"regular\",modifier:l,className:i,as:c=\"p\",...n})=>e(c,{className:a(\"sds-typography-body\",`sds-typography-body--${r}`,l&&`sds-typography-body--${l}`,i),...n,children:s}),u=n((({children:s,className:r,isExternal:l,noIcon:i,...c},n)=>e(\"a\",{ref:n,className:a(\"sds-typography-link\",l&&\"sds-typography-link--external\",i&&\"sds-typography-link--no-icon\",r),...c,children:s})));u.displayName=\"Link\";const b=({children:s,className:r,isFocusable:l,...i})=>e(\"span\",{className:a(\"sds-screen-reader-only\",l&&\"sds-screen-reader-only--focusable\",r),...i,children:s});export{d as Abbreviation,o as Figure,t as Heading,p as Heading1,h as Heading2,m as Heading3,y as Heading4,g as Heading5,f as Heading6,u as Link,N as Paragraph,b as ScreenReaderOnly};\n//# sourceMappingURL=index.js.map\n","import{jsxs as e,jsx as r}from\"react/jsx-runtime\";import t from\"clsx\";import*as a from\"react\";var n,s;function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(this,arguments)}const o=e=>a.createElement(\"svg\",l({xmlns:\"http://www.w3.org/2000/svg\",fill:\"none\",viewBox:\"0 0 75 48\"},e),n||(n=a.createElement(\"g\",{fill:\"currentColor\",clipPath:\"url(#Logo_svg__a)\"},a.createElement(\"path\",{d:\"M52.262 1.63c-6.493 0-12.331 2.769-16.409 7.175l9.998 9.998c2.865 2.864 2.865 7.53 0 10.394l-9.998 9.998c4.092 4.406 9.93 7.175 16.409 7.175 12.358 0 22.37-10.012 22.37-22.37S64.62 1.63 52.262 1.63z\"}),a.createElement(\"path\",{d:\"M29.893 24a22.277 22.277 0 0 1 5.96-15.195l-6.656-6.656c-2.864-2.865-7.53-2.865-10.394 0L2.148 18.804c-2.864 2.864-2.864 7.529 0 10.394l16.655 16.655c2.865 2.864 7.53 2.864 10.394 0l6.657-6.657a22.214 22.214 0 0 1-5.961-15.195z\"}))),s||(s=a.createElement(\"defs\",null,a.createElement(\"clipPath\",{id:\"Logo_svg__a\"},a.createElement(\"path\",{fill:\"currentColor\",d:\"M0 0h75v48H0z\"}))))),i={nb:\"Kunnskapssektorens<br /> tjenesteleverandør\",nn:\"Kunnskapssektorens<br /> tenesteleverandør\",en:\"Norwegian Agency for Shared<br /> Services in Education and Research\",se:\"Máhttosuorggi<br /> bálvaluslágideaddji\",smj:\"Máhtudaksuorge<br /> dievnastusbuvtadadiddje\",sma:\"Maahtoesuerkien<br /> dïenesjedeellije\",fkv:\"Tietosektorin<br /> palvelu\"},c=({variant:a=\"primary\",className:n,lang:s=\"nb\",...l})=>{const c=\"secondary\"===a;return e(\"div\",{className:t(\"sds-logo\",`sds-logo--${a}`,n),...l,children:[r(o,{className:\"sds-logo__icon\",\"aria-hidden\":!0}),e(\"div\",{children:[r(\"div\",{className:\"sds-logo__title\",children:\"Sikt\"}),c&&r(\"div\",{className:\"sds-logo__subtitle\",dangerouslySetInnerHTML:{__html:i[s]}})]})]})};export{c as Logo};\n//# sourceMappingURL=index.js.map\n","import React, { HTMLAttributes, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?: ReactNode;\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n {children}\n </header>\n </>\n );\n};\n"],"names":["u","n","forwardRef","children","s","className","r","isExternal","l","noIcon","i","c","e","ref","a","displayName","b","isFocusable","jsx","Object","assign","bind","arguments","length","t","prototype","hasOwnProperty","call","apply","this","o","createElement","xmlns","fill","viewBox","clipPath","d","id","nb","nn","en","se","smj","sma","fkv","variant","lang","dangerouslySetInnerHTML","__html","skipLinkId","skipLinkText","logoHref","logoText","rest","logoElement","_jsx","Logo","_jsxs","_Fragment","ScreenReaderOnly","Link","href","jsxs","clsx"],"mappings":"mWAA8K,MAA88BA,EAAEC,EAACC,YAAA,EAAIC,SAASC,EAAEC,UAAUC,EAAEC,WAAWC,EAAEC,OAAOC,KAAKC,GAAGV,IAAIW,MAAE,IAAI,CAACC,IAAIZ,EAAEI,UAAUS,EAAE,sBAAsBN,GAAG,gCAAgCE,GAAG,+BAA+BJ,MAAMK,EAAER,SAASC,MAAMJ,EAAEe,YAAY,OAAO,MAAMC,EAAE,EAAEb,SAASC,EAAEC,UAAUC,EAAEW,YAAYT,KAAKE,KAAKE,EAACM,IAAC,OAAO,CAACb,UAAUS,EAAE,yBAAyBN,GAAG,oCAAoCF,MAAMI,EAAEP,SAASC,ICA15C,IAAIH,EAAEG,EAAE,SAASI,IAAI,OAAOA,EAAEW,OAAOC,OAAOD,OAAOC,OAAOC,OAAO,SAAST,GAAG,IAAI,IAAIN,EAAE,EAAEA,EAAEgB,UAAUC,OAAOjB,IAAI,CAAC,IAAIkB,EAAEF,UAAUhB,GAAG,IAAI,IAAIQ,KAAKU,EAAEL,OAAOM,UAAUC,eAAeC,KAAKH,EAAEV,KAAKF,EAAEE,GAAGU,EAAEV,GAAI,CAAA,OAAOF,GAAGJ,EAAEoB,MAAMC,KAAKP,UAAW,CAAA,MAAMQ,EAAElB,GAAGE,EAAEiB,cAAc,MAAMvB,EAAE,CAACwB,MAAM,6BAA6BC,KAAK,OAAOC,QAAQ,aAAatB,GAAGX,IAAIA,EAAEa,EAAEiB,cAAc,IAAI,CAACE,KAAK,eAAeE,SAAS,qBAAqBrB,EAAEiB,cAAc,OAAO,CAACK,EAAE,2MAA2MtB,EAAEiB,cAAc,OAAO,CAACK,EAAE,0OAA0OhC,IAAIA,EAAEU,EAAEiB,cAAc,OAAO,KAAKjB,EAAEiB,cAAc,WAAW,CAACM,GAAG,eAAevB,EAAEiB,cAAc,OAAO,CAACE,KAAK,eAAeG,EAAE,sBAAsB1B,EAAE,CAAC4B,GAAG,8CAA8CC,GAAG,6CAA6CC,GAAG,uEAAuEC,GAAG,0CAA0CC,IAAI,+CAA+CC,IAAI,yCAAyCC,IAAI,+BAA+BjC,EAAE,EAAEkC,QAAQ/B,EAAE,UAAUT,UAAUJ,EAAE6C,KAAK1C,EAAE,QAAQI,MAAM,MAAMG,EAAE,cAAcG,EAAE,OAAOF,EAAAA,KAAE,MAAM,CAACP,UAAUmB,EAAE,WAAW,aAAaV,IAAIb,MAAMO,EAAEL,SAAS,CAACG,EAAAA,IAAEwB,EAAE,CAACzB,UAAU,iBAAiB,eAAc,IAAKO,EAAAA,KAAE,MAAM,CAACT,SAAS,CAACG,EAACY,IAAC,MAAM,CAACb,UAAU,kBAAkBF,SAAS,SAASQ,GAAGL,MAAE,MAAM,CAACD,UAAU,qBAAqB0C,wBAAwB,CAACC,OAAOtC,EAAEN,WAAW,iBCevzD,EACpBD,WACAE,YACA4C,aAAa,OACbC,eAAe,iBACfC,WACAC,cACGC,MAEH,MAAMC,EAAcF,EAClBG,EAAAA,IAAM,OAAA,CAAAlD,UAAU,mDACbF,SAAAiD,IAGHG,EAAAA,IAACC,EAAK,CAAAnD,UAAU,qBAGlB,OACEoD,OAAAC,EAAAA,SAAA,CAAAvD,SAAA,CACEoD,EAAAA,IAACI,EAAiB,CAAA1C,aAAY,EAAAZ,UAAU,wBACtCF,SAAAoD,EAAArC,IAAC0C,EAAK,CAAAC,KAAM,IAAIZ,IAAe9C,SAAA+C,MAEjCO,EAAQK,KAAA,SAAA,CAAAzD,UAAW0D,EAAK,aAAc1D,MAAgBgD,EACnDlD,SAAA,CAAAgD,EACCI,EAAAA,IAACK,EAAK,CAAAC,KAAMV,EAAU9C,UAAU,wBAAuBF,SACpDmD,MAKJnD,OAGL"}
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.sds-header{
|
|
1
|
+
.sds-header{align-items:center;background-color:var(--sds-color-layout-background-primary);display:flex;justify-content:space-between;min-height:48px;padding:0 var(--sds-space-padding-huge)}.sds-header__skip-link:focus-within{position:absolute}.sds-header .sds-header__logo{font-size:var(--sds-base-size-relative-m)}.sds-header .sds-header__logo-link{background-color:unset;color:inherit;text-decoration:none}@media (width >= 720px){.sds-header{min-height:56px}}@media (width >= 1024px){.sds-header{min-height:72px}}
|
|
2
2
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["header.pcss"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"sources":["header.pcss"],"names":[],"mappings":"AAEA,YACE,kBAAmB,CACnB,2DAA4D,CAC5D,YAAa,CACb,6BAA8B,CAC9B,eAAgB,CAChB,uCAuBF,CArBE,oCACE,iBACF,CAEA,8BACE,yCAOF,CALE,mCACE,sBAAuB,CACvB,aAAc,CACd,oBACF,CAGF,wBAtBF,YAuBI,eAMJ,CALE,CAEA,yBA1BF,YA2BI,eAEJ,CADE","file":"index.css","sourcesContent":["@import url(\"@sikt/sds-tokens/dist/css/custom-media.css\");\n\n.sds-header {\n align-items: center;\n background-color: var(--sds-color-layout-background-primary);\n display: flex;\n justify-content: space-between;\n min-height: 48px;\n padding: 0 var(--sds-space-padding-huge);\n\n &__skip-link:focus-within {\n position: absolute;\n }\n\n .sds-header__logo {\n font-size: var(--sds-base-size-relative-m);\n\n &-link {\n background-color: unset;\n color: inherit;\n text-decoration: none;\n }\n }\n\n @media (--sds-base-breakpoint-tablet) {\n min-height: 56px;\n }\n\n @media (--sds-base-breakpoint-desktop) {\n min-height: 72px;\n }\n}\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,6 @@ interface HeaderProps extends HTMLAttributes<HTMLElement> {
|
|
|
8
8
|
logoHref?: string;
|
|
9
9
|
logoText?: string;
|
|
10
10
|
}
|
|
11
|
-
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => JSX.Element;
|
|
11
|
+
declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export type { HeaderProps };
|
|
13
13
|
export { Header };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import a from"clsx";import*as
|
|
1
|
+
import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import a from"clsx";import*as n from"react";import{forwardRef as l}from"react";const t=l((({children:s,className:r,isExternal:n,noIcon:l,...t},o)=>e("a",{ref:o,className:a("sds-typography-link",n&&"sds-typography-link--external",l&&"sds-typography-link--no-icon",r),...t,children:s})));t.displayName="Link";const o=({children:s,className:r,isFocusable:n,...l})=>e("span",{className:a("sds-screen-reader-only",n&&"sds-screen-reader-only--focusable",r),...l,children:s});var i,c;function d(){return d=Object.assign?Object.assign.bind():function(e){for(var s=1;s<arguments.length;s++){var r=arguments[s];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},d.apply(this,arguments)}const h=e=>n.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 75 48"},e),i||(i=n.createElement("g",{fill:"currentColor",clipPath:"url(#Logo_svg__a)"},n.createElement("path",{d:"M52.262 1.63c-6.493 0-12.331 2.769-16.409 7.175l9.998 9.998c2.865 2.864 2.865 7.53 0 10.394l-9.998 9.998c4.092 4.406 9.93 7.175 16.409 7.175 12.358 0 22.37-10.012 22.37-22.37S64.62 1.63 52.262 1.63z"}),n.createElement("path",{d:"M29.893 24a22.277 22.277 0 0 1 5.96-15.195l-6.656-6.656c-2.864-2.865-7.53-2.865-10.394 0L2.148 18.804c-2.864 2.864-2.864 7.529 0 10.394l16.655 16.655c2.865 2.864 7.53 2.864 10.394 0l6.657-6.657a22.214 22.214 0 0 1-5.961-15.195z"}))),c||(c=n.createElement("defs",null,n.createElement("clipPath",{id:"Logo_svg__a"},n.createElement("path",{fill:"currentColor",d:"M0 0h75v48H0z"}))))),m={nb:"Kunnskapssektorens<br /> tjenesteleverandør",nn:"Kunnskapssektorens<br /> tenesteleverandør",en:"Norwegian Agency for Shared<br /> Services in Education and Research",se:"Máhttosuorggi<br /> bálvaluslágideaddji",smj:"Máhtudaksuorge<br /> dievnastusbuvtadadiddje",sma:"Maahtoesuerkien<br /> dïenesjedeellije",fkv:"Tietosektorin<br /> palvelu"},g=({variant:r="primary",className:n,lang:l="nb",...t})=>{const o="secondary"===r;return s("div",{className:a("sds-logo",`sds-logo--${r}`,n),...t,children:[e(h,{className:"sds-logo__icon","aria-hidden":!0}),s("div",{children:[e("div",{className:"sds-logo__title",children:"Sikt"}),o&&e("div",{className:"sds-logo__subtitle",dangerouslySetInnerHTML:{__html:m[l]}})]})]})},p=({children:n,className:l,skipLinkId:i="main",skipLinkText:c="Gå til innhold",logoHref:d,logoText:h,...m})=>{const p=h?e("span",{className:"sds-header__logo-text sds-typography-body--large",children:h}):e(g,{className:"sds-header__logo"});return s(r,{children:[e(o,{isFocusable:!0,className:"sds-header__skip-link",children:e(t,{href:`#${i}`,children:c})}),s("header",{className:a("sds-header",l),...m,children:[d?e(t,{href:d,className:"sds-header__logo-link",children:p}):p,n]})]})};export{p as Header};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../core/dist/index.js","../../logo/dist/index.js","../Header.tsx"],"sourcesContent":["import{jsx as e,jsxs as s}from\"react/jsx-runtime\";import a,{clsx as r}from\"clsx\";import{Children as
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../core/dist/index.js","../../logo/dist/index.js","../Header.tsx"],"sourcesContent":["import{jsx as e,jsxs as s}from\"react/jsx-runtime\";import a,{clsx as r}from\"clsx\";import{Children as l,isValidElement as i,cloneElement as c,forwardRef as n}from\"react\";const d=({children:s,className:r,title:l,...i})=>e(\"abbr\",{className:a(\"sds-typography-abbr\",r),tabIndex:0,\"data-title\":l,\"aria-label\":l,...i,children:s}),o=({children:a,aspectRatio:n,figCaption:d,...o})=>s(\"figure\",{className:\"sds-figure\",...o,children:[l.map(a,(e=>{if(i(e))return(e=>{const s={className:r(\"sds-figure__figure\",\"16x9\"===n&&\"sds-figure__figure--ratio-16x9\",e.props.className)};return c(e,s)})(e)})),d&&e(\"figcaption\",{className:\"sds-figure__caption\",children:d})]}),t=({children:s,level:r,variant:l,className:i,...c})=>e(`h${r}`,{className:a(\"sds-typography-heading\",`sds-typography-heading--${l}`,i),...c,children:s}),p=e=>t({...e,level:\"1\"}),h=e=>t({...e,level:\"2\"}),m=e=>t({...e,level:\"3\"}),y=e=>t({...e,level:\"4\"}),g=e=>t({...e,level:\"5\"}),f=e=>t({...e,level:\"6\"}),N=({children:s,variant:r=\"regular\",modifier:l,className:i,as:c=\"p\",...n})=>e(c,{className:a(\"sds-typography-body\",`sds-typography-body--${r}`,l&&`sds-typography-body--${l}`,i),...n,children:s}),u=n((({children:s,className:r,isExternal:l,noIcon:i,...c},n)=>e(\"a\",{ref:n,className:a(\"sds-typography-link\",l&&\"sds-typography-link--external\",i&&\"sds-typography-link--no-icon\",r),...c,children:s})));u.displayName=\"Link\";const b=({children:s,className:r,isFocusable:l,...i})=>e(\"span\",{className:a(\"sds-screen-reader-only\",l&&\"sds-screen-reader-only--focusable\",r),...i,children:s});export{d as Abbreviation,o as Figure,t as Heading,p as Heading1,h as Heading2,m as Heading3,y as Heading4,g as Heading5,f as Heading6,u as Link,N as Paragraph,b as ScreenReaderOnly};\n//# sourceMappingURL=index.js.map\n","import{jsxs as e,jsx as r}from\"react/jsx-runtime\";import t from\"clsx\";import*as a from\"react\";var n,s;function l(){return l=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(this,arguments)}const o=e=>a.createElement(\"svg\",l({xmlns:\"http://www.w3.org/2000/svg\",fill:\"none\",viewBox:\"0 0 75 48\"},e),n||(n=a.createElement(\"g\",{fill:\"currentColor\",clipPath:\"url(#Logo_svg__a)\"},a.createElement(\"path\",{d:\"M52.262 1.63c-6.493 0-12.331 2.769-16.409 7.175l9.998 9.998c2.865 2.864 2.865 7.53 0 10.394l-9.998 9.998c4.092 4.406 9.93 7.175 16.409 7.175 12.358 0 22.37-10.012 22.37-22.37S64.62 1.63 52.262 1.63z\"}),a.createElement(\"path\",{d:\"M29.893 24a22.277 22.277 0 0 1 5.96-15.195l-6.656-6.656c-2.864-2.865-7.53-2.865-10.394 0L2.148 18.804c-2.864 2.864-2.864 7.529 0 10.394l16.655 16.655c2.865 2.864 7.53 2.864 10.394 0l6.657-6.657a22.214 22.214 0 0 1-5.961-15.195z\"}))),s||(s=a.createElement(\"defs\",null,a.createElement(\"clipPath\",{id:\"Logo_svg__a\"},a.createElement(\"path\",{fill:\"currentColor\",d:\"M0 0h75v48H0z\"}))))),i={nb:\"Kunnskapssektorens<br /> tjenesteleverandør\",nn:\"Kunnskapssektorens<br /> tenesteleverandør\",en:\"Norwegian Agency for Shared<br /> Services in Education and Research\",se:\"Máhttosuorggi<br /> bálvaluslágideaddji\",smj:\"Máhtudaksuorge<br /> dievnastusbuvtadadiddje\",sma:\"Maahtoesuerkien<br /> dïenesjedeellije\",fkv:\"Tietosektorin<br /> palvelu\"},c=({variant:a=\"primary\",className:n,lang:s=\"nb\",...l})=>{const c=\"secondary\"===a;return e(\"div\",{className:t(\"sds-logo\",`sds-logo--${a}`,n),...l,children:[r(o,{className:\"sds-logo__icon\",\"aria-hidden\":!0}),e(\"div\",{children:[r(\"div\",{className:\"sds-logo__title\",children:\"Sikt\"}),c&&r(\"div\",{className:\"sds-logo__subtitle\",dangerouslySetInnerHTML:{__html:i[s]}})]})]})};export{c as Logo};\n//# sourceMappingURL=index.js.map\n","import React, { HTMLAttributes, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Logo } from \"@sikt/sds-logo\";\nimport \"./header.pcss\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLElement> {\n className?: string;\n children?: ReactNode;\n skipLinkId?: string;\n skipLinkText?: string;\n logoHref?: string;\n logoText?: string;\n}\n\nexport const Header = ({\n children,\n className,\n skipLinkId = \"main\",\n skipLinkText = \"Gå til innhold\",\n logoHref,\n logoText,\n ...rest\n}: HeaderProps) => {\n const logoElement = logoText ? (\n <span className=\"sds-header__logo-text sds-typography-body--large\">\n {logoText}\n </span>\n ) : (\n <Logo className=\"sds-header__logo\" />\n );\n\n return (\n <>\n <ScreenReaderOnly isFocusable className=\"sds-header__skip-link\">\n <Link href={`#${skipLinkId}`}>{skipLinkText}</Link>\n </ScreenReaderOnly>\n <header className={clsx(\"sds-header\", className)} {...rest}>\n {logoHref ? (\n <Link href={logoHref} className=\"sds-header__logo-link\">\n {logoElement}\n </Link>\n ) : (\n logoElement\n )}\n {children}\n </header>\n </>\n );\n};\n"],"names":["u","n","children","s","className","r","isExternal","l","noIcon","i","c","e","ref","a","displayName","b","isFocusable","Object","assign","bind","arguments","length","t","prototype","hasOwnProperty","call","apply","this","o","createElement","xmlns","fill","viewBox","clipPath","d","id","nb","nn","en","se","smj","sma","fkv","variant","lang","dangerouslySetInnerHTML","__html","Header","skipLinkId","skipLinkText","logoHref","logoText","rest","logoElement","_jsx","Logo","_jsxs","_Fragment","ScreenReaderOnly","Link","href","clsx"],"mappings":"+IAA8K,MAA88BA,EAAEC,GAAC,EAAIC,SAASC,EAAEC,UAAUC,EAAEC,WAAWC,EAAEC,OAAOC,KAAKC,GAAGT,IAAIU,EAAE,IAAI,CAACC,IAAIX,EAAEG,UAAUS,EAAE,sBAAsBN,GAAG,gCAAgCE,GAAG,+BAA+BJ,MAAMK,EAAER,SAASC,MAAMH,EAAEc,YAAY,OAAO,MAAMC,EAAE,EAAEb,SAASC,EAAEC,UAAUC,EAAEW,YAAYT,KAAKE,KAAKE,EAAE,OAAO,CAACP,UAAUS,EAAE,yBAAyBN,GAAG,oCAAoCF,MAAMI,EAAEP,SAASC,ICA15C,IAAIF,EAAEE,EAAE,SAASI,IAAI,OAAOA,EAAEU,OAAOC,OAAOD,OAAOC,OAAOC,OAAO,SAASR,GAAG,IAAI,IAAIN,EAAE,EAAEA,EAAEe,UAAUC,OAAOhB,IAAI,CAAC,IAAIiB,EAAEF,UAAUf,GAAG,IAAI,IAAIQ,KAAKS,EAAEL,OAAOM,UAAUC,eAAeC,KAAKH,EAAET,KAAKF,EAAEE,GAAGS,EAAET,GAAI,CAAA,OAAOF,GAAGJ,EAAEmB,MAAMC,KAAKP,UAAW,CAAA,MAAMQ,EAAEjB,GAAGE,EAAEgB,cAAc,MAAMtB,EAAE,CAACuB,MAAM,6BAA6BC,KAAK,OAAOC,QAAQ,aAAarB,GAAGV,IAAIA,EAAEY,EAAEgB,cAAc,IAAI,CAACE,KAAK,eAAeE,SAAS,qBAAqBpB,EAAEgB,cAAc,OAAO,CAACK,EAAE,2MAA2MrB,EAAEgB,cAAc,OAAO,CAACK,EAAE,0OAA0O/B,IAAIA,EAAEU,EAAEgB,cAAc,OAAO,KAAKhB,EAAEgB,cAAc,WAAW,CAACM,GAAG,eAAetB,EAAEgB,cAAc,OAAO,CAACE,KAAK,eAAeG,EAAE,sBAAsBzB,EAAE,CAAC2B,GAAG,8CAA8CC,GAAG,6CAA6CC,GAAG,uEAAuEC,GAAG,0CAA0CC,IAAI,+CAA+CC,IAAI,yCAAyCC,IAAI,+BAA+BhC,EAAE,EAAEiC,QAAQ9B,EAAE,UAAUT,UAAUH,EAAE2C,KAAKzC,EAAE,QAAQI,MAAM,MAAMG,EAAE,cAAcG,EAAE,OAAOF,EAAE,MAAM,CAACP,UAAUkB,EAAE,WAAW,aAAaT,IAAIZ,MAAMM,EAAEL,SAAS,CAACG,EAAEuB,EAAE,CAACxB,UAAU,iBAAiB,eAAc,IAAKO,EAAE,MAAM,CAACT,SAAS,CAACG,EAAE,MAAM,CAACD,UAAU,kBAAkBF,SAAS,SAASQ,GAAGL,EAAE,MAAM,CAACD,UAAU,qBAAqByC,wBAAwB,CAACC,OAAOrC,EAAEN,WAAW,ECeh0D4C,EAAS,EACpB7C,WACAE,YACA4C,aAAa,OACbC,eAAe,iBACfC,WACAC,cACGC,MAEH,MAAMC,EAAcF,EAClBG,EAAM,OAAA,CAAAlD,UAAU,mDACbF,SAAAiD,IAGHG,EAACC,EAAK,CAAAnD,UAAU,qBAGlB,OACEoD,EAAAC,EAAA,CAAAvD,SAAA,CACEoD,EAACI,EAAiB,CAAA1C,aAAY,EAAAZ,UAAU,wBACtCF,SAAAoD,EAACK,EAAK,CAAAC,KAAM,IAAIZ,IAAe9C,SAAA+C,MAEjCO,EAAQ,SAAA,CAAApD,UAAWyD,EAAK,aAAczD,MAAgBgD,EACnDlD,SAAA,CAAAgD,EACCI,EAACK,EAAK,CAAAC,KAAMV,EAAU9C,UAAU,wBAAuBF,SACpDmD,MAKJnD,OAGL"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-header",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"main": "dist/index.js",
|
|
5
|
+
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"style": "dist/index.css",
|
|
@@ -13,13 +13,14 @@
|
|
|
13
13
|
"build": "rollup -c ../../rollup.config.mjs"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@sikt/sds-core": "^
|
|
17
|
-
"@sikt/sds-logo": "^
|
|
16
|
+
"@sikt/sds-core": "^3.0.0",
|
|
17
|
+
"@sikt/sds-logo": "^2.0.0",
|
|
18
|
+
"@sikt/sds-tokens": "^1.0.0"
|
|
18
19
|
},
|
|
19
20
|
"peerDependencies": {
|
|
20
21
|
"@types/react": "^18.0.0",
|
|
21
22
|
"@types/react-dom": "^18.0.0",
|
|
22
|
-
"clsx": "^1.2.
|
|
23
|
+
"clsx": "^1.0.0 || ^2.0.0",
|
|
23
24
|
"react": "^18.0.0",
|
|
24
25
|
"react-dom": "^18.0.0"
|
|
25
26
|
}
|