@oslokommune/punkt-react 11.9.0 → 11.9.2

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [11.9.1](https://github.com/oslokommune/punkt/compare/11.9.0...11.9.1) (2024-03-12)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+Ingen
+
+### Chores
+* Ny modus for Alert (#1581). Kode: PÅSKEFIGUR
+
+
+---
+
+
 ## [11.9.0](https://github.com/oslokommune/punkt/compare/11.8.2...11.9.0) (2024-03-11)
 
 ### ⚠ BREAKING CHANGES

package/dist/components/alert/Alert.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface IPktAlert extends React.HTMLAttributes<HTMLDivElement> {
-    skin?: 'error' | 'success' | 'warning' | 'info';
+    skin?: 'error' | 'success' | 'warning' | 'info' | '🐣';
     closeAlert?: boolean;
     onClose?: () => void;
     title?: string;

package/dist/punkt-react.es.js

@@ -669,22 +669,11 @@ const Ue = {}, bn = async (e, n) => {
     compact: p = !1,
     ...u
   }, d) => {
-    const k = [
-      n,
-      "pkt-alert",
-      a && `pkt-alert--${a}`,
-      p && "pkt-alert--compact"
-    ].filter(Boolean).join(" "), [v, R] = le(!0), x = () => {
+    const k = [n, "pkt-alert", a && `pkt-alert--${a}`, p && "pkt-alert--compact"].filter(Boolean).join(" "), [v, R] = le(!0), x = () => {
       R(!1), r && r();
     };
     return v ? /* @__PURE__ */ h("div", { ...u, className: k, "aria-live": c, ref: d, children: [
-      /* @__PURE__ */ i(
-        E,
-        {
-          className: "pkt-alert__icon",
-          name: a === "info" ? "alert-information" : `alert-${a}`
-        }
-      ),
+      a === "🐣" ? /* @__PURE__ */ i("span", { className: "pkt-icon pkt-alert__icon", children: "🐣" }) : /* @__PURE__ */ i(E, { className: "pkt-alert__icon", name: a === "info" ? "alert-information" : `alert-${a}` }),
       l && /* @__PURE__ */ i("div", { className: "pkt-alert__close", children: /* @__PURE__ */ i(
         "button",
         {

package/dist/punkt-react.umd.js

@@ -24,7 +24,7 @@ Check the render method of \``+t+"`."}return""}}function _r(t){{if(t!==void 0){v
 
 Check your code at `+p+":"+m+"."}return""}}var Ft={};function br(t){{var p=Lt();if(!p){var m=typeof t=="string"?t:t.displayName||t.name;m&&(p=`
 
-Check the top-level render call using <`+m+">.")}return p}}function Ut(t,p){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var m=br(p);if(Ft[m])return;Ft[m]=!0;var g="";t&&t._owner&&t._owner!==qe.current&&(g=" It was passed a child from "+L(t._owner.type)+"."),ie(t),C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',m,g),ie(null)}}function At(t,p){{if(typeof t!="object")return;if(Je(t))for(var m=0;m<t.length;m++){var g=t[m];He(g)&&Ut(g,p)}else if(He(t))t._store&&(t._store.validated=!0);else if(t){var O=I(t);if(typeof O=="function"&&O!==t.entries)for(var D=O.call(t),R;!(R=D.next()).done;)He(R.value)&&Ut(R.value,p)}}}function gr(t){{var p=t.type;if(p==null||typeof p=="string")return;var m;if(typeof p=="function")m=p.propTypes;else if(typeof p=="object"&&(p.$$typeof===f||p.$$typeof===k))m=p.propTypes;else return;if(m){var g=L(p);ir(m,t.props,"prop",g,t)}else if(p.PropTypes!==void 0&&!Ge){Ge=!0;var O=L(p);C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",O||"Unknown")}typeof p.getDefaultProps=="function"&&!p.getDefaultProps.isReactClassApproved&&C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Nr(t){{for(var p=Object.keys(t.props),m=0;m<p.length;m++){var g=p[m];if(g!=="children"&&g!=="key"){ie(t),C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",g),ie(null);break}}t.ref!==null&&(ie(t),C("Invalid attribute `ref` supplied to `React.Fragment`."),ie(null))}}function Vt(t,p,m,g,O,D){{var R=G(t);if(!R){var P="";(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(P+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var Y=_r(O);Y?P+=Y:P+=Lt();var U;t===null?U="null":Je(t)?U="array":t!==void 0&&t.$$typeof===n?(U="<"+(L(t.type)||"Unknown")+" />",P=" Did you accidentally export a JSX literal instead of a component?"):U=typeof t,C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",U,P)}var A=vr(t,p,m,O,D);if(A==null)return A;if(R){var H=p.children;if(H!==void 0)if(g)if(Je(H)){for(var oe=0;oe<H.length;oe++)At(H[oe],t);Object.freeze&&Object.freeze(H)}else C("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else At(H,t)}return t===l?Nr(A):gr(A),A}}function yr(t,p,m){return Vt(t,p,m,!0)}function wr(t,p,m){return Vt(t,p,m,!1)}var Er=wr,Cr=yr;ce.Fragment=l,ce.jsx=Er,ce.jsxs=Cr}()),ce}process.env.NODE_ENV==="production"?Re.exports=Yt():Re.exports=Kt();var Te=Re.exports;const X=Te.Fragment,i=Te.jsx,h=Te.jsxs,Oe='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>',Jt="https://punkt-cdn.oslo.kommune.no/11.9/icons/";function zt(e){return new Promise(n=>setTimeout(n,e))}const $e={},qt=async(e,n)=>{let a=0;for(;$e[n+e+".svg"]==="fetching"&&(a++,!(a>50));)await zt(50);return localStorage.getItem(n+e+".svg")?Promise.resolve(localStorage.getItem(n+e+".svg")):typeof window.fetch=="function"?($e[n+e+".svg"]="fetching",Promise.resolve(fetch(n+e+".svg").then(l=>l.ok?l.text():(console.error("Missing icon: "+n+e+".svg"),Oe)).then(l=>(l!==Oe&&localStorage.setItem(n+e+".svg",l),$e[n+e+".svg"]="fetched",l)))):Promise.resolve(Oe)},Gt={fetchIcon:async(e,n)=>qt(e,n||Jt)},Qe=b.createContext(Gt),w=({name:e,path:n,className:a="",...l})=>{const[r,o]=b.useState(null),s=b.useContext(Qe);return b.useEffect(()=>{e?s.fetchIcon(e,n).then(o):o(null)},[e,n]),r?i("span",{className:`pkt-icon ${a}`,dangerouslySetInnerHTML:{__html:r},...l}):null},et=b.forwardRef(({children:e,className:n,skin:a="info",closeAlert:l=!1,onClose:r,title:o,date:s,ariaLive:c="polite",compact:f=!1,...u},d)=>{const k=[n,"pkt-alert",a&&`pkt-alert--${a}`,f&&"pkt-alert--compact"].filter(Boolean).join(" "),[v,S]=b.useState(!0),x=()=>{S(!1),r&&r()};return v?h("div",{...u,className:k,"aria-live":c,ref:d,children:[i(w,{className:"pkt-alert__icon",name:a==="info"?"alert-information":`alert-${a}`}),l&&i("div",{className:"pkt-alert__close",children:i("button",{type:"button",className:"pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",tabIndex:0,"aria-label":"close",onClick:x,children:i(w,{name:"close",className:"pkt-btn__icon","aria-hidden":"true"})})}),o&&i("div",{className:"pkt-alert__title",children:o}),i("div",{className:"pkt-alert__text",children:e}),s&&h("div",{className:"pkt-alert__date",children:["Sist oppdatert: ",s]})]}):null}),Ht=b.forwardRef(({href:e,text:n,onClick:a,className:l,...r},o)=>{const s=[l,"pkt-back-link"].filter(Boolean).join(" ");return i("nav",{ref:o,className:s,"aria-label":"Gå tilbake et steg",children:h("a",{href:e||"/",className:"pkt-link pkt-link--icon-left",onClick:f=>{a&&a(f)},...r,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left","aria-hidden":"true"}),i("span",{className:"pkt-back-link__text",children:n||"Forsiden"})]})})});/**
+Check the top-level render call using <`+m+">.")}return p}}function Ut(t,p){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var m=br(p);if(Ft[m])return;Ft[m]=!0;var g="";t&&t._owner&&t._owner!==qe.current&&(g=" It was passed a child from "+L(t._owner.type)+"."),ie(t),C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',m,g),ie(null)}}function At(t,p){{if(typeof t!="object")return;if(Je(t))for(var m=0;m<t.length;m++){var g=t[m];He(g)&&Ut(g,p)}else if(He(t))t._store&&(t._store.validated=!0);else if(t){var O=I(t);if(typeof O=="function"&&O!==t.entries)for(var D=O.call(t),R;!(R=D.next()).done;)He(R.value)&&Ut(R.value,p)}}}function gr(t){{var p=t.type;if(p==null||typeof p=="string")return;var m;if(typeof p=="function")m=p.propTypes;else if(typeof p=="object"&&(p.$$typeof===f||p.$$typeof===k))m=p.propTypes;else return;if(m){var g=L(p);ir(m,t.props,"prop",g,t)}else if(p.PropTypes!==void 0&&!Ge){Ge=!0;var O=L(p);C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",O||"Unknown")}typeof p.getDefaultProps=="function"&&!p.getDefaultProps.isReactClassApproved&&C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Nr(t){{for(var p=Object.keys(t.props),m=0;m<p.length;m++){var g=p[m];if(g!=="children"&&g!=="key"){ie(t),C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",g),ie(null);break}}t.ref!==null&&(ie(t),C("Invalid attribute `ref` supplied to `React.Fragment`."),ie(null))}}function Vt(t,p,m,g,O,D){{var R=G(t);if(!R){var P="";(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(P+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var Y=_r(O);Y?P+=Y:P+=Lt();var U;t===null?U="null":Je(t)?U="array":t!==void 0&&t.$$typeof===n?(U="<"+(L(t.type)||"Unknown")+" />",P=" Did you accidentally export a JSX literal instead of a component?"):U=typeof t,C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",U,P)}var A=vr(t,p,m,O,D);if(A==null)return A;if(R){var H=p.children;if(H!==void 0)if(g)if(Je(H)){for(var oe=0;oe<H.length;oe++)At(H[oe],t);Object.freeze&&Object.freeze(H)}else C("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else At(H,t)}return t===l?Nr(A):gr(A),A}}function yr(t,p,m){return Vt(t,p,m,!0)}function wr(t,p,m){return Vt(t,p,m,!1)}var Er=wr,Cr=yr;ce.Fragment=l,ce.jsx=Er,ce.jsxs=Cr}()),ce}process.env.NODE_ENV==="production"?Re.exports=Yt():Re.exports=Kt();var Te=Re.exports;const X=Te.Fragment,i=Te.jsx,h=Te.jsxs,Oe='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>',Jt="https://punkt-cdn.oslo.kommune.no/11.9/icons/";function zt(e){return new Promise(n=>setTimeout(n,e))}const $e={},qt=async(e,n)=>{let a=0;for(;$e[n+e+".svg"]==="fetching"&&(a++,!(a>50));)await zt(50);return localStorage.getItem(n+e+".svg")?Promise.resolve(localStorage.getItem(n+e+".svg")):typeof window.fetch=="function"?($e[n+e+".svg"]="fetching",Promise.resolve(fetch(n+e+".svg").then(l=>l.ok?l.text():(console.error("Missing icon: "+n+e+".svg"),Oe)).then(l=>(l!==Oe&&localStorage.setItem(n+e+".svg",l),$e[n+e+".svg"]="fetched",l)))):Promise.resolve(Oe)},Gt={fetchIcon:async(e,n)=>qt(e,n||Jt)},Qe=b.createContext(Gt),w=({name:e,path:n,className:a="",...l})=>{const[r,o]=b.useState(null),s=b.useContext(Qe);return b.useEffect(()=>{e?s.fetchIcon(e,n).then(o):o(null)},[e,n]),r?i("span",{className:`pkt-icon ${a}`,dangerouslySetInnerHTML:{__html:r},...l}):null},et=b.forwardRef(({children:e,className:n,skin:a="info",closeAlert:l=!1,onClose:r,title:o,date:s,ariaLive:c="polite",compact:f=!1,...u},d)=>{const k=[n,"pkt-alert",a&&`pkt-alert--${a}`,f&&"pkt-alert--compact"].filter(Boolean).join(" "),[v,S]=b.useState(!0),x=()=>{S(!1),r&&r()};return v?h("div",{...u,className:k,"aria-live":c,ref:d,children:[a==="🐣"?i("span",{className:"pkt-icon pkt-alert__icon",children:"🐣"}):i(w,{className:"pkt-alert__icon",name:a==="info"?"alert-information":`alert-${a}`}),l&&i("div",{className:"pkt-alert__close",children:i("button",{type:"button",className:"pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only",tabIndex:0,"aria-label":"close",onClick:x,children:i(w,{name:"close",className:"pkt-btn__icon","aria-hidden":"true"})})}),o&&i("div",{className:"pkt-alert__title",children:o}),i("div",{className:"pkt-alert__text",children:e}),s&&h("div",{className:"pkt-alert__date",children:["Sist oppdatert: ",s]})]}):null}),Ht=b.forwardRef(({href:e,text:n,onClick:a,className:l,...r},o)=>{const s=[l,"pkt-back-link"].filter(Boolean).join(" ");return i("nav",{ref:o,className:s,"aria-label":"Gå tilbake et steg",children:h("a",{href:e||"/",className:"pkt-link pkt-link--icon-left",onClick:f=>{a&&a(f)},...r,children:[i(w,{className:"pkt-back-link__icon pkt-icon pkt-link__icon",name:"chevron-thin-left","aria-hidden":"true"}),i("span",{className:"pkt-back-link__text",children:n||"Forsiden"})]})})});/**
  * @remix-run/router v1.14.0
  *
  * Copyright (c) Remix Software Inc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "11.9.0",
+  "version": "11.9.2",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^11.5.0",
-    "@oslokommune/punkt-css": "^11.9.0",
+    "@oslokommune/punkt-css": "^11.9.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -91,5 +91,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f9c10e09713a41530c52b4a836c9801dd1f527ac"
+  "gitHead": "4f8705ba802178b8f6089e3be360bd04e893de71"
 }

package/src/components/alert/Alert.tsx

@@ -3,7 +3,8 @@ import React, { ForwardedRef, forwardRef, useState } from 'react'
 import { PktIcon } from '../icon/Icon'
 
 export interface IPktAlert extends React.HTMLAttributes<HTMLDivElement> {
-  skin?: 'error' | 'success' | 'warning' | 'info'
+  // 🐣-kode: PÅSKEFIGUR
+  skin?: 'error' | 'success' | 'warning' | 'info' | '🐣'
   closeAlert?: boolean
   onClose?: () => void
   title?: string
@@ -28,12 +29,7 @@ export const PktAlert = forwardRef(
     }: IPktAlert,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const classes = [
-      className,
-      'pkt-alert',
-      skin && `pkt-alert--${skin}`,
-      compact && 'pkt-alert--compact',
-    ]
+    const classes = [className, 'pkt-alert', skin && `pkt-alert--${skin}`, compact && 'pkt-alert--compact']
       .filter(Boolean)
       .join(' ')
 
@@ -48,10 +44,11 @@ export const PktAlert = forwardRef(
 
     return isDisplayed ? (
       <div {...props} className={classes} aria-live={ariaLive} ref={ref}>
-        <PktIcon
-          className="pkt-alert__icon"
-          name={skin === 'info' ? 'alert-information' : `alert-${skin}`}
-        />
+        {skin === '🐣' ? (
+          <span className="pkt-icon pkt-alert__icon">🐣</span>
+        ) : (
+          <PktIcon className="pkt-alert__icon" name={skin === 'info' ? 'alert-information' : `alert-${skin}`} />
+        )}
 
         {closeAlert && (
           <div className="pkt-alert__close">