@fremtind/jkl-alert-message-react - npm Package Compare versions

Comparing version 1.5.5 to 1.6.0

build/AlertMessage.d.ts

@@ -9,7 +9,12 @@ import { ReactNode } from "react";
     role?: string;
+    dismissed?: boolean;
+    dismissAction?: {
+        handleDismiss: () => void;
+        buttonTitle?: string;
+    };
 }
-export declare const InfoAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, children, }: Props) => JSX.Element;
-export declare const ErrorAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, children, }: Props) => JSX.Element;
-export declare const WarningAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, children, }: Props) => JSX.Element;
-export declare const SuccessAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, children, }: Props) => JSX.Element;
+export declare const InfoAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, dismissed, dismissAction, children, }: Props) => JSX.Element;
+export declare const ErrorAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, dismissed, dismissAction, children, }: Props) => JSX.Element;
+export declare const WarningAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, dismissed, dismissAction, children, }: Props) => JSX.Element;
+export declare const SuccessAlertMessage: ({ className, inverted, maxContentWidth, paddingLeft, role, dismissed, dismissAction, children, }: Props) => JSX.Element;
 export {};

build/browser/index.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
 import classNames from 'classnames';
+import { IconButton } from '@fremtind/jkl-icon-button-react';
 
@@ -100,5 +101,8 @@ function MessageIcon(_ref) {
         role = _ref$role === void 0 ? "status" : _ref$role,
+        dismissed = _ref.dismissed,
+        dismissAction = _ref.dismissAction,
         children = _ref.children;
     var componentClassName = classNames("jkl-alert-message", "jkl-alert-message--" + messageType, className, {
-      "jkl-alert-message--dark": inverted
+      "jkl-alert-message--dark": inverted,
+      "jkl-alert-message--dismissed": dismissed
     });
@@ -117,2 +121,3 @@ var styles = {
     }, /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
       className: "jkl-alert-message__icon"
@@ -123,3 +128,8 @@ }, /*#__PURE__*/React.createElement(MessageIcon, {
       className: "jkl-alert-message__message jkl-body"
-    }, children)));
+    }, children), (dismissAction === null || dismissAction === void 0 ? void 0 : dismissAction.handleDismiss) && /*#__PURE__*/React.createElement(IconButton, {
+      className: "jkl-alert-message__dismiss-button",
+      iconType: "clear",
+      buttonTitle: dismissAction.buttonTitle || "Lukk",
+      onClick: dismissAction.handleDismiss
+    })));
   };
@@ -126,0 +136,0 @@ }

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import e from"@babel/runtime/helpers/defineProperty";import t from"react";import r from"classnames";function n(e){switch(e.messageType){case"error":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("rect",{x:"4",y:"4.22168",width:"1",height:"22",transform:"rotate(-45 4 4.22168)",fill:"currentColor"}));case"info":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M11.952 7.328C12.384 7.328 12.688 7.072 12.688 6.624C12.688 6.192 12.384 5.92 11.952 5.92C11.536 5.92 11.248 6.192 11.248 6.624C11.248 7.072 11.536 7.328 11.952 7.328ZM11.504 18H12.512V9.408H11.504V18Z",fill:"currentColor"}));case"success":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M7 13.5L10 16.5L19.5 7",stroke:"currentColor"}));case"warning":return t.createElement("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{className:"jkl-icon-exclamation",d:"M11.112 14.624H11.688L11.896 11.36V6H10.904V11.36L11.112 14.624ZM11.4 18.24C11.784 18.24 12.136 17.952 12.136 17.504C12.136 17.072 11.784 16.784 11.4 16.784C11.016 16.784 10.664 17.072 10.664 17.504C10.664 17.952 11.016 18.24 11.4 18.24Z",fill:"currentColor"}));default:return null}}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?c(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(e){return function(c){var o=c.className,a=void 0===o?"":o,s=c.inverted,i=c.maxContentWidth,m=c.paddingLeft,g=c.role,u=void 0===g?"status":g,w=c.children,p=r("jkl-alert-message","jkl-alert-message--"+e,a,{"jkl-alert-message--dark":s}),f={maxWidth:i,paddingLeft:m};return t.createElement("div",{className:p,role:u},t.createElement("div",{className:"jkl-alert-message__content","data-testid":"alert-message-content",style:l({},f)},t.createElement("div",{className:"jkl-alert-message__icon"},t.createElement(n,{messageType:e})),t.createElement("p",{className:"jkl-alert-message__message jkl-body"},w)))}}var a=o("info"),s=o("error"),i=o("warning"),m=o("success");export{s as ErrorAlertMessage,a as InfoAlertMessage,m as SuccessAlertMessage,i as WarningAlertMessage};
+import e from"@babel/runtime/helpers/defineProperty";import t from"react";import r from"classnames";import{IconButton as n}from"@fremtind/jkl-icon-button-react";function s(e){switch(e.messageType){case"error":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("rect",{x:"4",y:"4.22168",width:"1",height:"22",transform:"rotate(-45 4 4.22168)",fill:"currentColor"}));case"info":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M11.952 7.328C12.384 7.328 12.688 7.072 12.688 6.624C12.688 6.192 12.384 5.92 11.952 5.92C11.536 5.92 11.248 6.192 11.248 6.624C11.248 7.072 11.536 7.328 11.952 7.328ZM11.504 18H12.512V9.408H11.504V18Z",fill:"currentColor"}));case"success":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M7 13.5L10 16.5L19.5 7",stroke:"currentColor"}));case"warning":return t.createElement("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{className:"jkl-icon-exclamation",d:"M11.112 14.624H11.688L11.896 11.36V6H10.904V11.36L11.112 14.624ZM11.4 18.24C11.784 18.24 12.136 17.952 12.136 17.504C12.136 17.072 11.784 16.784 11.4 16.784C11.016 16.784 10.664 17.072 10.664 17.504C10.664 17.952 11.016 18.24 11.4 18.24Z",fill:"currentColor"}));default:return null}}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?l(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function a(e){return function(l){var a=l.className,o=void 0===a?"":a,i=l.inverted,m=l.maxContentWidth,d=l.paddingLeft,u=l.role,g=void 0===u?"status":u,p=l.dismissed,f=l.dismissAction,h=l.children,w=r("jkl-alert-message","jkl-alert-message--"+e,o,{"jkl-alert-message--dark":i,"jkl-alert-message--dismissed":p}),v={maxWidth:m,paddingLeft:d};return t.createElement("div",{className:w,role:g},t.createElement("div",{className:"jkl-alert-message__content","data-testid":"alert-message-content",style:c({},v)},t.createElement("div",{"aria-hidden":!0,className:"jkl-alert-message__icon"},t.createElement(s,{messageType:e})),t.createElement("p",{className:"jkl-alert-message__message jkl-body"},h),(null==f?void 0:f.handleDismiss)&&t.createElement(n,{className:"jkl-alert-message__dismiss-button",iconType:"clear",buttonTitle:f.buttonTitle||"Lukk",onClick:f.handleDismiss})))}}var o=a("info"),i=a("error"),m=a("warning"),d=a("success");export{i as ErrorAlertMessage,o as InfoAlertMessage,d as SuccessAlertMessage,m as WarningAlertMessage};

build/cjs/index.js

@@ -8,2 +8,3 @@ 'use strict';
 var classNames = require('classnames');
+var jklIconButtonReact = require('@fremtind/jkl-icon-button-react');
 
@@ -111,5 +112,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
         role = _ref$role === void 0 ? "status" : _ref$role,
+        dismissed = _ref.dismissed,
+        dismissAction = _ref.dismissAction,
         children = _ref.children;
     var componentClassName = classNames__default['default']("jkl-alert-message", "jkl-alert-message--" + messageType, className, {
-      "jkl-alert-message--dark": inverted
+      "jkl-alert-message--dark": inverted,
+      "jkl-alert-message--dismissed": dismissed
     });
@@ -128,2 +132,3 @@ var styles = {
     }, /*#__PURE__*/React__default['default'].createElement("div", {
+      "aria-hidden": true,
       className: "jkl-alert-message__icon"
@@ -134,3 +139,8 @@ }, /*#__PURE__*/React__default['default'].createElement(MessageIcon, {
       className: "jkl-alert-message__message jkl-body"
-    }, children)));
+    }, children), (dismissAction === null || dismissAction === void 0 ? void 0 : dismissAction.handleDismiss) && /*#__PURE__*/React__default['default'].createElement(jklIconButtonReact.IconButton, {
+      className: "jkl-alert-message__dismiss-button",
+      iconType: "clear",
+      buttonTitle: dismissAction.buttonTitle || "Lukk",
+      onClick: dismissAction.handleDismiss
+    })));
   };
@@ -137,0 +147,0 @@ }

build/esm/index.js

 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
 import classNames from 'classnames';
+import { IconButton } from '@fremtind/jkl-icon-button-react';
 
@@ -100,5 +101,8 @@ function MessageIcon(_ref) {
         role = _ref$role === void 0 ? "status" : _ref$role,
+        dismissed = _ref.dismissed,
+        dismissAction = _ref.dismissAction,
         children = _ref.children;
     var componentClassName = classNames("jkl-alert-message", "jkl-alert-message--" + messageType, className, {
-      "jkl-alert-message--dark": inverted
+      "jkl-alert-message--dark": inverted,
+      "jkl-alert-message--dismissed": dismissed
     });
@@ -117,2 +121,3 @@ var styles = {
     }, /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
       className: "jkl-alert-message__icon"
@@ -123,3 +128,8 @@ }, /*#__PURE__*/React.createElement(MessageIcon, {
       className: "jkl-alert-message__message jkl-body"
-    }, children)));
+    }, children), (dismissAction === null || dismissAction === void 0 ? void 0 : dismissAction.handleDismiss) && /*#__PURE__*/React.createElement(IconButton, {
+      className: "jkl-alert-message__dismiss-button",
+      iconType: "clear",
+      buttonTitle: dismissAction.buttonTitle || "Lukk",
+      onClick: dismissAction.handleDismiss
+    })));
   };
@@ -126,0 +136,0 @@ }

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import e from"@babel/runtime/helpers/defineProperty";import t from"react";import r from"classnames";function n(e){switch(e.messageType){case"error":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("rect",{x:"4",y:"4.22168",width:"1",height:"22",transform:"rotate(-45 4 4.22168)",fill:"currentColor"}));case"info":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M11.952 7.328C12.384 7.328 12.688 7.072 12.688 6.624C12.688 6.192 12.384 5.92 11.952 5.92C11.536 5.92 11.248 6.192 11.248 6.624C11.248 7.072 11.536 7.328 11.952 7.328ZM11.504 18H12.512V9.408H11.504V18Z",fill:"currentColor"}));case"success":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M7 13.5L10 16.5L19.5 7",stroke:"currentColor"}));case"warning":return t.createElement("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{className:"jkl-icon-exclamation",d:"M11.112 14.624H11.688L11.896 11.36V6H10.904V11.36L11.112 14.624ZM11.4 18.24C11.784 18.24 12.136 17.952 12.136 17.504C12.136 17.072 11.784 16.784 11.4 16.784C11.016 16.784 10.664 17.072 10.664 17.504C10.664 17.952 11.016 18.24 11.4 18.24Z",fill:"currentColor"}));default:return null}}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?c(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function o(e){return function(c){var o=c.className,a=void 0===o?"":o,s=c.inverted,i=c.maxContentWidth,m=c.paddingLeft,g=c.role,u=void 0===g?"status":g,w=c.children,p=r("jkl-alert-message","jkl-alert-message--"+e,a,{"jkl-alert-message--dark":s}),f={maxWidth:i,paddingLeft:m};return t.createElement("div",{className:p,role:u},t.createElement("div",{className:"jkl-alert-message__content","data-testid":"alert-message-content",style:l({},f)},t.createElement("div",{className:"jkl-alert-message__icon"},t.createElement(n,{messageType:e})),t.createElement("p",{className:"jkl-alert-message__message jkl-body"},w)))}}var a=o("info"),s=o("error"),i=o("warning"),m=o("success");export{s as ErrorAlertMessage,a as InfoAlertMessage,m as SuccessAlertMessage,i as WarningAlertMessage};
+import e from"@babel/runtime/helpers/defineProperty";import t from"react";import r from"classnames";import{IconButton as n}from"@fremtind/jkl-icon-button-react";function s(e){switch(e.messageType){case"error":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("rect",{x:"4",y:"4.22168",width:"1",height:"22",transform:"rotate(-45 4 4.22168)",fill:"currentColor"}));case"info":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M11.952 7.328C12.384 7.328 12.688 7.072 12.688 6.624C12.688 6.192 12.384 5.92 11.952 5.92C11.536 5.92 11.248 6.192 11.248 6.624C11.248 7.072 11.536 7.328 11.952 7.328ZM11.504 18H12.512V9.408H11.504V18Z",fill:"currentColor"}));case"success":return t.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{d:"M7 13.5L10 16.5L19.5 7",stroke:"currentColor"}));case"warning":return t.createElement("svg",{width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t.createElement("circle",{cx:"12",cy:"12",r:"11.5",stroke:"currentColor"}),t.createElement("path",{className:"jkl-icon-exclamation",d:"M11.112 14.624H11.688L11.896 11.36V6H10.904V11.36L11.112 14.624ZM11.4 18.24C11.784 18.24 12.136 17.952 12.136 17.504C12.136 17.072 11.784 16.784 11.4 16.784C11.016 16.784 10.664 17.072 10.664 17.504C10.664 17.952 11.016 18.24 11.4 18.24Z",fill:"currentColor"}));default:return null}}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?l(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function a(e){return function(l){var a=l.className,o=void 0===a?"":a,i=l.inverted,m=l.maxContentWidth,d=l.paddingLeft,u=l.role,g=void 0===u?"status":u,p=l.dismissed,f=l.dismissAction,h=l.children,w=r("jkl-alert-message","jkl-alert-message--"+e,o,{"jkl-alert-message--dark":i,"jkl-alert-message--dismissed":p}),v={maxWidth:m,paddingLeft:d};return t.createElement("div",{className:w,role:g},t.createElement("div",{className:"jkl-alert-message__content","data-testid":"alert-message-content",style:c({},v)},t.createElement("div",{"aria-hidden":!0,className:"jkl-alert-message__icon"},t.createElement(s,{messageType:e})),t.createElement("p",{className:"jkl-alert-message__message jkl-body"},h),(null==f?void 0:f.handleDismiss)&&t.createElement(n,{className:"jkl-alert-message__dismiss-button",iconType:"clear",buttonTitle:f.buttonTitle||"Lukk",onClick:f.handleDismiss})))}}var o=a("info"),i=a("error"),m=a("warning"),d=a("success");export{i as ErrorAlertMessage,o as InfoAlertMessage,d as SuccessAlertMessage,m as WarningAlertMessage};

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## 1.6.0 (2021-03-05)
+
+### Features
+
+- add close button to alert messages ([71e6438](https://github.com/fremtind/jokul/commit/71e6438b3a4532eac238fc6f207bbf75f26cd467))
+
 ## 1.5.5 (2021-02-12)
@@ -8,0 +14,0 @@

package.json

 {
     "name": "@fremtind/jkl-alert-message-react",
-    "version": "1.5.5",
+    "version": "1.6.0",
     "publishConfig": {
@@ -38,3 +38,4 @@ "access": "public"
         "@babel/runtime": "^7.9.0",
-        "@fremtind/jkl-alert-message": "^1.2.14",
+        "@fremtind/jkl-alert-message": "^1.3.0",
+        "@fremtind/jkl-icon-button-react": "^0.4.8",
         "classnames": "^2.2.6"
@@ -59,3 +60,3 @@ },
     },
-    "gitHead": "910fcdbf5b66cb0647744b726143083bc9537e7d"
+    "gitHead": "49714fb5cad8d8bc34d4b8153440049c6d7fe7f5"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32731

increased by9.23%

Lines of code

454

increased by8.87%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@fremtind/jkl-icon-button-react@^0.4.8

• + Added@fremtind/jkl-core@5.0.2(transitive)

• + Added@fremtind/jkl-icon-button@0.2.43(transitive)

• + Added@fremtind/jkl-icon-button-react@0.4.14(transitive)

• Updated@fremtind/jkl-alert-message@^1.3.0