@sikt/sds-footer 1.0.0 → 1.0.1

package/README.md

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

package/dist/cjs/index.css

@@ -0,0 +1,2 @@
+.sds-logo{align-items:center;display:flex;flex-direction:row;gap:var(--sds-size-base-s)}.sds-logo__icon{width:1.8em}.sds-logo--primary{font-size:var(--sds-size-text-m2);font-weight:400;line-height:1em}.sds-logo--secondary{font-size:var(--sds-size-text-s1);font-weight:600;line-height:1em}.sds-logo--secondary .sds-logo__subtitle{font-weight:400}.sds-logo--secondary .sds-logo__icon{width:4.7em}.sds-footer{background-color:var(--sds-color-background-neutral);color:var(--sds-color-text-default);min-height:100px}.sds-footer__content{grid-gap:var(--sds-size-padding-large);display:flex;flex-flow:column-reverse;grid-template-columns:auto;justify-content:space-between;margin:0 auto;max-width:var(--sds-grid-content-medium);padding:var(--sds-size-base-l)}@media (width >= 834px){.sds-footer__content{flex-flow:row}}.sds-footer__logo-link.sds-typography-link{color:inherit;display:inline-flex;text-decoration:none}
+/*# sourceMappingURL=index.css.map */

package/dist/cjs/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["logo.pcss","footer.pcss"],"names":[],"mappings":"AAAA,UACE,kBAAmB,CACnB,YAAa,CACb,kBAAmB,CACnB,0BAyBF,CAvBE,gBACE,WACF,CAEA,mBACE,iCAAkC,CAClC,eAAgB,CAChB,eACF,CAEA,qBACE,iCAAkC,CAClC,eAAgB,CAChB,eASF,CAPE,yCACE,eACF,CAEA,qCACE,WACF,CCzBJ,YACE,oDAAqD,CACrD,mCAAoC,CACpC,gBAsBF,CApBE,qBAGE,sCAAuC,CAFvC,YAAa,CACb,wBAAyB,CAEzB,0BAA2B,CAC3B,6BAA8B,CAC9B,aAAc,CACd,wCAAyC,CACzC,8BAKF,CAHE,wBAVF,qBAWI,aAEJ,CADE,CAGF,2CACE,aAAc,CACd,mBAAoB,CACpB,oBACF","file":"index.css","sourcesContent":[".sds-logo {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sds-size-base-s);\n\n  &__icon {\n    width: 1.8em;\n  }\n\n  &--primary {\n    font-size: var(--sds-size-text-m2);\n    font-weight: 400;\n    line-height: 1em;\n  }\n\n  &--secondary {\n    font-size: var(--sds-size-text-s1);\n    font-weight: 600;\n    line-height: 1em;\n\n    .sds-logo__subtitle {\n      font-weight: 400;\n    }\n\n    .sds-logo__icon {\n      width: 4.7em;\n    }\n  }\n}\n","@import url(\"@sikt/sds-core/dist/tokens/css/custom-media.css\");\n\n.sds-footer {\n  background-color: var(--sds-color-background-neutral);\n  color: var(--sds-color-text-default);\n  min-height: 100px;\n\n  &__content {\n    display: flex;\n    flex-flow: column-reverse;\n    grid-gap: var(--sds-size-padding-large);\n    grid-template-columns: auto;\n    justify-content: space-between;\n    margin: 0 auto;\n    max-width: var(--sds-grid-content-medium);\n    padding: var(--sds-size-base-l);\n\n    @media (--sds-breakpoint-tablet) {\n      flex-flow: row;\n    }\n  }\n\n  &__logo-link.sds-typography-link {\n    color: inherit;\n    display: inline-flex;\n    text-decoration: none;\n  }\n}\n"]}

package/dist/cjs/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { HTMLAttributes, ReactNode } from "react";
+interface LogoProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    lang?: "nb" | "nn" | "en" | "se" | "smj" | "sma" | "fkv";
+}
+interface FooterProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    children?: ReactNode;
+    lang?: LogoProps["lang"];
+    logoHref?: string;
+}
+declare const Footer: ({ children, className, lang, logoHref, ...rest }: FooterProps) => JSX.Element;
+export type { FooterProps };
+export { Footer };

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx");function s(e){var r=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var t=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,t.get?t:{enumerable:!0,get:function(){return e[s]}})}})),r.default=e,Object.freeze(r)}var t=s(require("react"));const n=({children:s,className:t,isExternal:n,...a})=>e.jsx("a",{className:r("sds-typography-link",n&&"sds-typography-link--external",t),...a,children:s});var a,l;function o(){return o=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var s=arguments[r];for(var t in s)Object.prototype.hasOwnProperty.call(s,t)&&(e[t]=s[t])}return e},o.apply(this,arguments)}const c=e=>t.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 75 48"},e),a||(a=t.createElement("g",{fill:"currentColor",clipPath:"url(#Logo_svg__a)"},t.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"}),t.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"}))),l||(l=t.createElement("defs",null,t.createElement("clipPath",{id:"Logo_svg__a"},t.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"},d=s=>(({logoType:s,className:t,lang:n="nb",...a})=>{const l="secondary"===s;return e.jsxs("div",{className:r("sds-logo",`sds-logo--${s}`,t),...a,children:[e.jsx(c,{className:"sds-logo__icon","aria-hidden":!0}),e.jsxs("div",{children:[e.jsx("div",{className:"sds-logo__title",children:"Sikt"}),l&&e.jsx("div",{className:"sds-logo__subtitle",dangerouslySetInnerHTML:{__html:i[n]}})]})]})})({...s,logoType:"secondary"});exports.Footer=({children:s,className:t,lang:a="nb",logoHref:l="//sikt.no",...o})=>{const c=e.jsx(d,{lang:a});return e.jsx("footer",{className:r("sds-footer",t),"data-color-scheme":"dark",...o,children:e.jsxs("div",{className:"sds-footer__content",children:[e.jsx("div",{children:l?e.jsx(n,{href:l,className:"sds-footer__logo-link",children:c}):c}),s]})})};
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../core/components/Link.tsx","../../../logo/Logo.tsx","../../Footer.tsx"],"sourcesContent":["import React, { AnchorHTMLAttributes, ReactNode } from \"react\";\nimport clsx from \"clsx\";\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  className?: string;\n  children: ReactNode;\n  isExternal?: boolean;\n}\n\nexport const Link = ({\n  children,\n  className,\n  isExternal,\n  ...rest\n}: LinkProps) => {\n  return (\n    <a\n      className={clsx(\n        \"sds-typography-link\",\n        isExternal && \"sds-typography-link--external\",\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </a>\n  );\n};\n","import clsx from \"clsx\";\nimport React, { HTMLAttributes } from \"react\";\nimport \"./logo.pcss\";\nimport { ReactComponent as LogoSvg } from \"./Logo.svg\";\n\nexport interface LogoProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  lang?: \"nb\" | \"nn\" | \"en\" | \"se\" | \"smj\" | \"sma\" | \"fkv\";\n}\n\ninterface LogoTypes {\n  logoType: \"primary\" | \"secondary\";\n}\n\nconst i18n = {\n  nb: \"Kunnskapssektorens<br /> tjenesteleverandør\",\n  nn: \"Kunnskapssektorens<br /> tenesteleverandør\",\n  en: \"Norwegian Agency for Shared<br /> Services in Education and Research\",\n  se: \"Máhttosuorggi<br /> bálvaluslágideaddji\",\n  smj: \"Máhtudaksuorge<br /> dievnastusbuvtadadiddje\",\n  sma: \"Maahtoesuerkien<br /> dïenesjedeellije\",\n  fkv: \"Tietosektorin<br /> palvelu\",\n};\n\nconst Logo = ({\n  logoType,\n  className,\n  lang = \"nb\",\n  ...rest\n}: LogoProps & LogoTypes) => {\n  const isSecondary = logoType === \"secondary\";\n  return (\n    <div\n      className={clsx(\"sds-logo\", `sds-logo--${logoType}`, className)}\n      {...rest}\n    >\n      <LogoSvg className=\"sds-logo__icon\" aria-hidden />\n      <div>\n        <div className=\"sds-logo__title\">Sikt</div>\n        {isSecondary && (\n          <div\n            className=\"sds-logo__subtitle\"\n            dangerouslySetInnerHTML={{ __html: i18n[lang] }}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const PrimaryLogo = (props: Omit<LogoProps, \"lang\">) =>\n  Logo({ ...props, logoType: \"primary\" });\nexport const SecondaryLogo = (props: LogoProps) =>\n  Logo({ ...props, logoType: \"secondary\" });\n","import React, { HTMLAttributes, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Link } from \"@sikt/sds-core/components/Link\";\nimport { SecondaryLogo, LogoProps } from \"@sikt/sds-logo/Logo\";\nimport \"./footer.pcss\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  children?: ReactNode;\n  lang?: LogoProps[\"lang\"];\n  logoHref?: string;\n}\n\nexport const Footer = ({\n  children,\n  className,\n  lang = \"nb\",\n  logoHref = \"//sikt.no\",\n  ...rest\n}: FooterProps) => {\n  const logoElement = <SecondaryLogo lang={lang} />;\n\n  return (\n    <footer\n      className={clsx(\"sds-footer\", className)}\n      data-color-scheme=\"dark\"\n      {...rest}\n    >\n      <div className=\"sds-footer__content\">\n        <div>\n          {logoHref ? (\n            <Link href={logoHref} className=\"sds-footer__logo-link\">\n              {logoElement}\n            </Link>\n          ) : (\n            logoElement\n          )}\n        </div>\n        {children}\n      </div>\n    </footer>\n  );\n};\n"],"names":["Link","children","className","isExternal","rest","_jsx","clsx","i18n","nb","nn","en","se","smj","sma","fkv","SecondaryLogo","props","logoType","lang","isSecondary","_jsxs","LogoSvg","dangerouslySetInnerHTML","__html","Logo","logoHref","logoElement","href"],"mappings":"+VASO,MAAMA,EAAO,EAClBC,WACAC,YACAC,gBACGC,KAGDC,WACEH,UAAWI,EACT,sBACAH,GAAc,gCACdD,MAEEE,WAEHH,qiCCVDM,EAAO,CACXC,GAAI,8CACJC,GAAI,6CACJC,GAAI,uEACJC,GAAI,0CACJC,IAAK,+CACLC,IAAK,yCACLC,IAAK,+BA+BMC,EAAiBC,GA5BjB,GACXC,WACAf,YACAgB,OAAO,QACJd,MAEH,MAAMe,EAA2B,cAAbF,EACpB,OACEG,OACE,MAAA,CAAAlB,UAAWI,EAAK,WAAY,aAAaW,IAAYf,MACjDE,EAAIH,SAAA,CAERI,EAAAA,IAACgB,EAAQ,CAAAnB,UAAU,iBAA+B,eAAA,IAClDkB,EAAAA,KACE,MAAA,CAAAnB,SAAA,CAAAI,MAAA,MAAA,CAAKH,UAAU,kBAA4BD,SAAA,SAC1CkB,GACCd,EAAAA,IAAA,MAAA,CACEH,UAAU,qBACVoB,wBAAyB,CAAEC,OAAQhB,EAAKW,WAKhD,EAMFM,CAAK,IAAKR,EAAOC,SAAU,6BCxCP,EACpBhB,WACAC,YACAgB,OAAO,KACPO,WAAW,eACRrB,MAEH,MAAMsB,EAAcrB,EAAAA,IAACU,GAAcG,KAAMA,IAEzC,OACEb,EAAAA,IACE,SAAA,CAAAH,UAAWI,EAAK,aAAcJ,GACZ,oBAAA,UACdE,EAAIH,SAERmB,OAAK,MAAA,CAAAlB,UAAU,gCACbG,EAAAA,IACG,MAAA,CAAAJ,SAAAwB,EACCpB,MAACL,EAAI,CAAC2B,KAAMF,EAAUvB,UAAU,wBAC7BD,SAAAyB,IACI,IAKVzB,MAGL"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sikt/sds-footer",
-  "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,7 +13,7 @@
     "build": "rollup -c ../../rollup.config.mjs"
   },
   "dependencies": {
-    "@sikt/sds-core": "^1.0.0"
+    "@sikt/sds-core": "^1.0.1"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0",