@sikt/sds-header 1.0.0

package/README.md

@@ -0,0 +1,32 @@
+# `@sikt/sds-header`
+
+## Consume
+
+```sh
+npm i -s @sikt/sds-header
+```
+
+### React
+
+```js
+import { Header } from "@sikt/sds-header";
+import "@sikt/sds-header/dist/index.css";
+
+<Header>{/*content goes here*/}</Header>;
+```
+
+### Stylesheets & custom markup
+
+Import stylesheet:
+
+```css
+@import url("@sikt/sds-header");
+```
+
+Create custom markup:
+
+```html
+<header class="sds-header">
+  <!-- content goes here -->
+</header>
+```

package/dist/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/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/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/index.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import a from"clsx";import*as l from"react";const n=({children:s,className:r,isExternal:l,...n})=>e("a",{className:a("sds-typography-link",l&&"sds-typography-link--external",r),...n,children:s}),t=({children:s,className:r,isFocusable:l,...n})=>e("span",{className:a("sds-screen-reader-only",l&&"sds-screen-reader-only--focusable",r),...n,children:s});var o,i;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 c=e=>l.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 75 48"},e),o||(o=l.createElement("g",{fill:"currentColor",clipPath:"url(#Logo_svg__a)"},l.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"}),l.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=l.createElement("defs",null,l.createElement("clipPath",{id:"Logo_svg__a"},l.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"},g=r=>(({logoType:r,className:l,lang:n="nb",...t})=>{const o="secondary"===r;return s("div",{className:a("sds-logo",`sds-logo--${r}`,l),...t,children:[e(c,{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:h[n]}})]})]})})({...r,logoType:"primary"}),m=({children:l,className:o,skipLinkId:i="main",skipLinkText:d="Gå til innhold",logoHref:c,logoText:h,...m})=>{const p=h?e("div",{className:"sds-header__logo-text sds-typography-body--large",children:h}):e(g,{className:"sds-header__logo"});return s(r,{children:[e(t,{isFocusable:!0,className:"sds-header__skip-link",children:e(n,{href:`#${i}`,children:d})}),s("header",{className:a("sds-header",o),...m,children:[e("div",{children:c?e(n,{href:c,className:"sds-header__logo-link",children:p}):p}),l]})]})};export{m as Header};
+//# sourceMappingURL=index.js.map

package/dist/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","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","dangerouslySetInnerHTML","__html","Header","skipLinkId","skipLinkText","logoHref","logoText","rest","logoElement","_jsx","PrimaryLogo","_jsxs","_Fragment","ScreenReaderOnly","Link","href","clsx"],"mappings":"4GAA8J,MAA08BA,EAAE,EAAEC,SAASC,EAAEC,UAAUC,EAAEC,WAAWC,KAAKC,KAAKC,EAAE,IAAI,CAACL,UAAUM,EAAE,sBAAsBH,GAAG,gCAAgCF,MAAMG,EAAEN,SAASC,IAAIQ,EAAE,EAAET,SAASC,EAAEC,UAAUC,EAAEO,YAAYL,KAAKC,KAAKC,EAAE,OAAO,CAACL,UAAUM,EAAE,yBAAyBH,GAAG,oCAAoCF,MAAMG,EAAEN,SAASC,ICAnzC,IAAIU,EAAEV,EAAE,SAASK,IAAI,OAAOA,EAAEM,OAAOC,OAAOD,OAAOC,OAAOC,OAAO,SAASP,GAAG,IAAI,IAAIJ,EAAE,EAAEA,EAAEY,UAAUC,OAAOb,IAAI,CAAC,IAAIc,EAAEF,UAAUZ,GAAG,IAAI,IAAIK,KAAKS,EAAEL,OAAOM,UAAUC,eAAeC,KAAKH,EAAET,KAAKD,EAAEC,GAAGS,EAAET,GAAI,CAAA,OAAOD,GAAGD,EAAEe,MAAMC,KAAKP,UAAW,CAAA,MAAMQ,EAAEhB,GAAGC,EAAEgB,cAAc,MAAMlB,EAAE,CAACmB,MAAM,6BAA6BC,KAAK,OAAOC,QAAQ,aAAapB,GAAGI,IAAIA,EAAEH,EAAEgB,cAAc,IAAI,CAACE,KAAK,eAAeE,SAAS,qBAAqBpB,EAAEgB,cAAc,OAAO,CAACK,EAAE,2MAA2MrB,EAAEgB,cAAc,OAAO,CAACK,EAAE,0OAA0O5B,IAAIA,EAAEO,EAAEgB,cAAc,OAAO,KAAKhB,EAAEgB,cAAc,WAAW,CAACM,GAAG,eAAetB,EAAEgB,cAAc,OAAO,CAACE,KAAK,eAAeG,EAAE,sBAAsBxB,EAAE,CAAC0B,GAAG,8CAA8CC,GAAG,6CAA6CC,GAAG,uEAAuEC,GAAG,0CAA0CC,IAAI,+CAA+CC,IAAI,yCAAyCC,IAAI,+BAAwYR,EAAEtB,GAAzW,GAAE+B,SAAS9B,EAAEN,UAAUS,EAAE4B,KAAKtC,EAAE,QAAQK,MAAM,MAAMkC,EAAE,cAAchC,EAAE,OAAOD,EAAE,MAAM,CAACL,UAAUe,EAAE,WAAW,aAAaT,IAAIG,MAAML,EAAEN,SAAS,CAACG,EAAEoB,EAAE,CAACrB,UAAU,iBAAiB,eAAc,IAAKK,EAAE,MAAM,CAACP,SAAS,CAACG,EAAE,MAAM,CAACD,UAAU,kBAAkBF,SAAS,SAASwC,GAAGrC,EAAE,MAAM,CAACD,UAAU,qBAAqBuC,wBAAwB,CAACC,OAAOrC,EAAEJ,WAAW,EAAOuC,CAAE,IAAIjC,EAAE+B,SAAS,YCe/0DK,EAAS,EACpB3C,WACAE,YACA0C,aAAa,OACbC,eAAe,iBACfC,WACAC,cACGC,MAEH,MAAMC,EAAcF,EAClBG,EAAK,MAAA,CAAAhD,UAAU,mDACZF,SAAA+C,IAGHG,EAACC,EAAY,CAAAjD,UAAU,qBAGzB,OACEkD,EAAAC,EAAA,CAAArD,SAAA,CACEkD,EAACI,GAAiB5C,aAAW,EAACR,UAAU,wBAAuBF,SAC7DkD,EAACK,GAAKC,KAAM,IAAIZ,IAAY5C,SAAG6C,MAEjCO,EAAA,SAAA,CAAQlD,UAAWuD,EAAK,aAAcvD,MAAgB8C,EAAIhD,SAAA,CACxDkD,EACG,MAAA,CAAAlD,SAAA8C,EACCI,EAACK,EAAI,CAACC,KAAMV,EAAU5C,UAAU,wBAC7BF,SAAAiD,IACI,IAKVjD,OAGL"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@sikt/sds-header",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.mjs"
+  },
+  "dependencies": {
+    "@sikt/sds-core": "^1.0.0",
+    "@sikt/sds-logo": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "clsx": "^1.2.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}