@sikt/sds-header 1.0.0 → 1.0.1

package/README.md

@@ -11,6 +11,7 @@ npm i -s @sikt/sds-header
 ```js
 import { Header } from "@sikt/sds-header";
 import "@sikt/sds-header/dist/index.css";
+import "@sikt/sds-logo/dist/index.css";
 
 <Header>{/*content goes here*/}</Header>;
 ```
@@ -21,6 +22,7 @@ Import stylesheet:
 
 ```css
 @import url("@sikt/sds-header");
+@import url("@sikt/sds-logo");
 ```
 
 Create custom markup:

package/dist/cjs/index.css

@@ -0,0 +1,2 @@
+.sds-header{grid-gap:var(--sds-size-padding-small);align-items:center;background-color:var(--sds-color-background-action);border-bottom:var(--sds-border-size-thin) solid var(--sds-color-surface-action);display:grid;grid-template-columns:1fr auto 1fr;min-height:48px;padding:0 var(--sds-size-padding-medium)}.sds-header__skip-link:focus-within{position:absolute}.sds-header .sds-header__logo{font-size:var(--sds-size-text-s2);padding:var(--sds-size-padding-small) 0}.sds-header .sds-header__logo-link.sds-typography-link{color:inherit;display:inline-flex;text-decoration:none}.sds-header .sds-header__logo-text{padding:var(--sds-size-padding-small) 0}@media (width >= 834px){.sds-header{min-height:72px;padding:0 var(--sds-size-base-m1)}.sds-header .sds-header__logo{font-size:1.75rem;padding:var(--sds-size-base-s2) 0}.sds-header .sds-header__logo-text{padding:var(--sds-size-base-m) 0}}@media (width >= 1440px){.sds-header{padding:0 var(--sds-size-padding-large)}}
+/*# sourceMappingURL=index.css.map */

package/dist/cjs/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["header.pcss"],"names":[],"mappings":"AAEA,YAME,sCAAuC,CALvC,kBAAmB,CACnB,mDAAoD,CACpD,+EACiC,CACjC,YAAa,CAEb,kCAAmC,CACnC,eAAgB,CAChB,wCAsCF,CApCE,oCACE,iBACF,CAEA,8BACE,iCAAkC,CAClC,uCAWF,CATE,uDACE,aAAc,CACd,mBAAoB,CACpB,oBACF,CAEA,mCACE,uCACF,CAGF,wBA9BF,YA+BI,eAAgB,CAChB,iCAeJ,CAbI,8BACE,iBAA2B,CAC3B,iCAKF,CAHE,mCACE,gCACF,CAEJ,CAEA,yBA5CF,YA6CI,uCAEJ,CADE","file":"index.css","sourcesContent":["@import url(\"@sikt/sds-core/dist/tokens/css/custom-media.css\");\n\n.sds-header {\n  align-items: center;\n  background-color: var(--sds-color-background-action);\n  border-bottom: var(--sds-border-size-thin) solid\n    var(--sds-color-surface-action);\n  display: grid;\n  grid-gap: var(--sds-size-padding-small);\n  grid-template-columns: 1fr auto 1fr;\n  min-height: 48px;\n  padding: 0 var(--sds-size-padding-medium);\n\n  &__skip-link:focus-within {\n    position: absolute;\n  }\n\n  .sds-header__logo {\n    font-size: var(--sds-size-text-s2);\n    padding: var(--sds-size-padding-small) 0;\n\n    &-link.sds-typography-link {\n      color: inherit;\n      display: inline-flex;\n      text-decoration: none;\n    }\n\n    &-text {\n      padding: var(--sds-size-padding-small) 0;\n    }\n  }\n\n  @media (--sds-breakpoint-tablet) {\n    min-height: 72px;\n    padding: 0 var(--sds-size-base-m1);\n\n    .sds-header__logo {\n      font-size: calc(28rem / 16);\n      padding: var(--sds-size-base-s2) 0;\n\n      &-text {\n        padding: var(--sds-size-base-m) 0;\n      }\n    }\n  }\n\n  @media (--sds-breakpoint-desktop) {\n    padding: 0 var(--sds-size-padding-large);\n  }\n}\n"]}

package/dist/cjs/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { HTMLAttributes, ReactNode } from "react";
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: ReactNode;
+    skipLinkId?: string;
+    skipLinkText?: string;
+    logoHref?: string;
+    logoText?: string;
+}
+declare const Header: ({ children, className, skipLinkId, skipLinkText, logoHref, logoText, ...rest }: HeaderProps) => JSX.Element;
+export type { HeaderProps };
+export { Header };

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),s=require("clsx");function r(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 a=r(require("react"));const n=({children:r,className:a,isExternal:n,...l})=>e.jsx("a",{className:s("sds-typography-link",n&&"sds-typography-link--external",a),...l,children:r}),l=({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 t,c;function i(){return i=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},i.apply(this,arguments)}const o=e=>a.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 75 48"},e),t||(t=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"}))),c||(c=a.createElement("defs",null,a.createElement("clipPath",{id:"Logo_svg__a"},a.createElement("path",{fill:"currentColor",d:"M0 0h75v48H0z"}))))),d={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"},h=r=>(({logoType:r,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(o,{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:d[n]}})]})]})})({...r,logoType:"primary"});exports.Header=({children:r,className:a,skipLinkId:t="main",skipLinkText:c="Gå til innhold",logoHref:i,logoText:o,...d})=>{const u=o?e.jsx("div",{className:"sds-header__logo-text sds-typography-body--large",children:o}):e.jsx(h,{className:"sds-header__logo"});return e.jsxs(e.Fragment,{children:[e.jsx(l,{isFocusable:!0,className:"sds-header__skip-link",children:e.jsx(n,{href:`#${t}`,children:c})}),e.jsxs("header",{className:s("sds-header",a),...d,children:[e.jsx("div",{children:i?e.jsx(n,{href:i,className:"sds-header__logo-link",children:u}):u}),r]})]})};
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +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 i,isValidElement as l,cloneElement as d}from\"react\";const n=({children:s,className:r,title:i,...l})=>e(\"abbr\",{className:a(\"sds-typography-abbr\",r),tabIndex:0,title:i,...l,children:s}),c=({children:a,aspectRatio:n,figCaption:c,...h})=>s(\"figure\",{className:\"sds-figure\",...h,children:[i.map(a,(e=>{if(l(e))return(e=>{const s={className:r(\"sds-figure__figure\",\"16x9\"===n&&\"sds-figure__figure--ratio-16x9\",e.props.className)};return d(e,s)})(e)})),c&&e(\"figcaption\",{className:\"sds-figure__caption\",children:c})]}),h=({children:s,headingLevel:r,headingType:i,className:l,...d})=>e(`h${r}`,{...d,className:a(\"sds-typography-heading\",`sds-typography-heading--${i}`,l),children:s}),t=e=>h({...e,headingLevel:\"1\"}),p=e=>h({...e,headingLevel:\"2\"}),o=e=>h({...e,headingLevel:\"3\"}),g=e=>h({...e,headingLevel:\"4\"}),m=e=>h({...e,headingLevel:\"5\"}),y=e=>h({...e,headingLevel:\"6\"}),f=({children:s,typographyType:r=\"regular\",className:i,as:l=\"p\",...d})=>e(l,{...d,className:a(\"sds-typography-body\",`sds-typography-body--${r}`,i),children:s}),N=({children:s,className:r,isExternal:i,...l})=>e(\"a\",{className:a(\"sds-typography-link\",i&&\"sds-typography-link--external\",r),...l,children:s}),u=({children:s,className:r,isFocusable:i,...l})=>e(\"span\",{className:a(\"sds-screen-reader-only\",i&&\"sds-screen-reader-only--focusable\",r),...l,children:s});export{n as Abbreviation,c as Figure,t as Heading1,p as Heading2,o as Heading3,g as Heading4,m as Heading5,y as Heading6,N as Link,f as Paragraph,u 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=({logoType:a,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]}})]})]})},d=e=>c({...e,logoType:\"primary\"}),g=e=>c({...e,logoType:\"secondary\"});export{d as PrimaryLogo,g as SecondaryLogo};\n//# sourceMappingURL=index.js.map\n","import React, { HTMLAttributes, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Link, ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { PrimaryLogo } 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    <div className=\"sds-header__logo-text sds-typography-body--large\">\n      {logoText}\n    </div>\n  ) : (\n    <PrimaryLogo 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>\n          {logoHref ? (\n            <Link href={logoHref} className=\"sds-header__logo-link\">\n              {logoElement}\n            </Link>\n          ) : (\n            logoElement\n          )}\n        </div>\n        {children}\n      </header>\n    </>\n  );\n};\n"],"names":["N","children","s","className","r","isExternal","i","l","e","jsx","a","u","isFocusable","n","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","logoType","lang","c","jsxs","dangerouslySetInnerHTML","__html","skipLinkId","skipLinkText","logoHref","logoText","rest","logoElement","_jsx","PrimaryLogo","_jsxs","_Fragment","ScreenReaderOnly","Link","href","clsx"],"mappings":"+VAA8J,MAA08BA,EAAE,EAAEC,SAASC,EAAEC,UAAUC,EAAEC,WAAWC,KAAKC,KAAKC,EAACC,IAAC,IAAI,CAACN,UAAUO,EAAE,sBAAsBJ,GAAG,gCAAgCF,MAAMG,EAAEN,SAASC,IAAIS,EAAE,EAAEV,SAASC,EAAEC,UAAUC,EAAEQ,YAAYN,KAAKC,KAAKC,EAACC,IAAC,OAAO,CAACN,UAAUO,EAAE,yBAAyBJ,GAAG,oCAAoCF,MAAMG,EAAEN,SAASC,ICAnzC,IAAIW,EAAEX,EAAE,SAASK,IAAI,OAAOA,EAAEO,OAAOC,OAAOD,OAAOC,OAAOC,OAAO,SAASR,GAAG,IAAI,IAAIJ,EAAE,EAAEA,EAAEa,UAAUC,OAAOd,IAAI,CAAC,IAAIe,EAAEF,UAAUb,GAAG,IAAI,IAAIM,KAAKS,EAAEL,OAAOM,UAAUC,eAAeC,KAAKH,EAAET,KAAKF,EAAEE,GAAGS,EAAET,GAAI,CAAA,OAAOF,GAAGD,EAAEgB,MAAMC,KAAKP,UAAW,CAAA,MAAMQ,EAAEjB,GAAGE,EAAEgB,cAAc,MAAMnB,EAAE,CAACoB,MAAM,6BAA6BC,KAAK,OAAOC,QAAQ,aAAarB,GAAGK,IAAIA,EAAEH,EAAEgB,cAAc,IAAI,CAACE,KAAK,eAAeE,SAAS,qBAAqBpB,EAAEgB,cAAc,OAAO,CAACK,EAAE,2MAA2MrB,EAAEgB,cAAc,OAAO,CAACK,EAAE,0OAA0O7B,IAAIA,EAAEQ,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,+BAAwYR,EAAEvB,GAAzW,GAAEgC,SAAS9B,EAAEP,UAAUU,EAAE4B,KAAKvC,EAAE,QAAQK,MAAM,MAAMmC,EAAE,cAAchC,EAAE,OAAOF,EAACmC,KAAC,MAAM,CAACxC,UAAUgB,EAAE,WAAW,aAAaT,IAAIG,MAAMN,EAAEN,SAAS,CAACG,EAAAA,IAAEqB,EAAE,CAACtB,UAAU,iBAAiB,eAAc,IAAKK,EAAAA,KAAE,MAAM,CAACP,SAAS,CAACG,EAAAA,IAAE,MAAM,CAACD,UAAU,kBAAkBF,SAAS,SAASyC,GAAGtC,MAAE,MAAM,CAACD,UAAU,qBAAqByC,wBAAwB,CAACC,OAAOvC,EAAEJ,WAAW,EAAOwC,CAAE,IAAIlC,EAAEgC,SAAS,2BCet0D,EACpBvC,WACAE,YACA2C,aAAa,OACbC,eAAe,iBACfC,WACAC,cACGC,MAEH,MAAMC,EAAcF,EAClBG,EAAAA,IAAK,MAAA,CAAAjD,UAAU,mDACZF,SAAAgD,IAGHG,EAAAA,IAACC,EAAY,CAAAlD,UAAU,qBAGzB,OACEmD,OAAAC,EAAAA,SAAA,CAAAtD,SAAA,CACEmD,EAAC3C,IAAA+C,GAAiB5C,aAAW,EAACT,UAAU,wBAAuBF,SAC7DmD,EAAAA,IAACK,GAAKC,KAAM,IAAIZ,IAAY7C,SAAG8C,MAEjCO,OAAA,SAAA,CAAQnD,UAAWwD,EAAK,aAAcxD,MAAgB+C,EAAIjD,SAAA,CACxDmD,MACG,MAAA,CAAAnD,SAAA+C,EACCI,EAAAA,IAACK,EAAI,CAACC,KAAMV,EAAU7C,UAAU,wBAC7BF,SAAAkD,IACI,IAKVlD,OAGL"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sikt/sds-header",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "UNLICENSED",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
@@ -13,8 +13,8 @@
     "build": "rollup -c ../../rollup.config.mjs"
   },
   "dependencies": {
-    "@sikt/sds-core": "^1.0.0",
-    "@sikt/sds-logo": "^1.0.0"
+    "@sikt/sds-core": "^1.0.1",
+    "@sikt/sds-logo": "^1.0.1"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",