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

Comparing version 9.0.17 to 10.0.0

build/cjs/common/DismissButton.js

@@ -30,15 +30,8 @@ "use strict";
 module.exports = __toCommonJS(DismissButton_exports);
+var import_jkl_icons_react = require("@fremtind/jkl-icons-react");
 var import_react = __toESM(require("react"));
 const DismissButton = (0, import_react.forwardRef)(({ label = "Lukk", ...rest }, ref) => {
-  return /* @__PURE__ */ import_react.default.createElement("button", { ref, type: "button", title: label, ...rest }, /* @__PURE__ */ import_react.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react.default.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M5.99969 4.9394L9.96936 0.969727L11.03 2.03039L7.06035 6.00006L11.0303 9.97L9.96963 11.0307L5.99969 7.06072L2.03029 11.0301L0.969632 9.96945L4.93903 6.00006L0.96936 2.03039L2.03002 0.969727L5.99969 4.9394Z",
-      fill: "currentColor"
-    }
-  )), /* @__PURE__ */ import_react.default.createElement("span", { className: "jkl-sr-only" }, label));
+  return /* @__PURE__ */ import_react.default.createElement("button", { ref, type: "button", title: label, ...rest }, /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.CloseIcon, { variant: "small", bold: true }), /* @__PURE__ */ import_react.default.createElement("span", { className: "jkl-sr-only" }, label));
 });
 DismissButton.displayName = "DismissButton";
 //# sourceMappingURL=DismissButton.js.map

build/cjs/common/MessageIcon.js

@@ -30,2 +30,3 @@ "use strict";
 module.exports = __toCommonJS(MessageIcon_exports);
+var import_jkl_icons_react = require("@fremtind/jkl-icons-react");
 var import_react = __toESM(require("react"));
@@ -35,81 +36,9 @@ const MessageIcon = ({ messageType }) => {
     case "error":
-      return /* @__PURE__ */ import_react.default.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M12 24C18.8503 24 24 18.6274 24 12C24 5.37258 18.8503 0 12 0C5.59548 0 0 5.37258 0 12C0 18.6274 5.59548 24 12 24ZM17.43 8.41421L13.6371 12.2071L17.43 16L16.0158 17.4142L12 13.6213L8.43001 17.4142L7.01579 16L10.8087 12.2071L7.01579 8.41421L8.43001 7L12 10.7929L16.0158 7L17.43 8.41421Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.ErrorIcon, { className: "jkl-alert-message__icon" });
     case "info":
-      return /* @__PURE__ */ import_react.default.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M24 12C24 18.6274 18.8503 24 12 24C5.59548 24 0 18.6274 0 12C0 5.37258 5.59548 0 12 0C18.8503 0 24 5.37258 24 12ZM11 17.4142V10H13.2229V17.4142H11.2229ZM12 8.5C12.9133 8.5 13.4729 7.94036 13.4729 7.25C13.4729 6.55964 12.9133 6 12 6C11.5325 6 10.9729 6.55964 10.9729 7.25C10.9729 7.94036 11.5325 8.5 12 8.5Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.InfoIcon, { className: "jkl-alert-message__icon" });
     case "success":
-      return /* @__PURE__ */ import_react.default.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M12 24C18.8503 24 24 18.6274 24 12C24 5.37258 18.8503 0 12 0C5.59548 0 0 5.37258 0 12C0 18.6274 5.59548 24 12 24ZM11.5503 16.7071L19.0503 9.20711L17.6361 7.79289L10.8432 14.5858L7.26909 11.0116L5.85486 12.4258L10.1361 16.7071L10.8432 17.4142L11.5503 16.7071Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.SuccessIcon, { className: "jkl-alert-message__icon" });
     case "warning":
-      return /* @__PURE__ */ import_react.default.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "2 3 20 18",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M18.3588 20.5107L5.64157 20.5107C3.33259 20.5107 1.88917 18.0116 3.04301 16.0116L9.40163 4.98996C10.5561 2.98885 13.4443 2.98885 14.5987 4.98996L20.9574 16.0116C22.1112 18.0116 20.6678 20.5107 18.3588 20.5107ZM12.7515 13.6525L12.7515 7.63131L11.9988 7.63131L11.2462 7.63131L11.2462 13.6525L12.7515 13.6525ZM12.0012 15.0458C11.441 15.0458 10.9868 15.5 10.9868 16.0602C10.9868 16.6205 11.441 17.0747 12.0012 17.0747C12.5615 17.0747 13.0157 16.6205 13.0157 16.0602C13.0157 15.5 12.5615 15.0458 12.0012 15.0458Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ import_react.default.createElement(import_jkl_icons_react.WarningIcon, { className: "jkl-alert-message__icon" });
     default:
@@ -116,0 +45,0 @@ return null;

build/esm/common/DismissButton.js

@@ -0,12 +1,5 @@
+import { CloseIcon } from "@fremtind/jkl-icons-react";
 import React, { forwardRef } from "react";
 const DismissButton = forwardRef(({ label = "Lukk", ...rest }, ref) => {
-  return /* @__PURE__ */ React.createElement("button", { ref, type: "button", title: label, ...rest }, /* @__PURE__ */ React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M5.99969 4.9394L9.96936 0.969727L11.03 2.03039L7.06035 6.00006L11.0303 9.97L9.96963 11.0307L5.99969 7.06072L2.03029 11.0301L0.969632 9.96945L4.93903 6.00006L0.96936 2.03039L2.03002 0.969727L5.99969 4.9394Z",
-      fill: "currentColor"
-    }
-  )), /* @__PURE__ */ React.createElement("span", { className: "jkl-sr-only" }, label));
+  return /* @__PURE__ */ React.createElement("button", { ref, type: "button", title: label, ...rest }, /* @__PURE__ */ React.createElement(CloseIcon, { variant: "small", bold: true }), /* @__PURE__ */ React.createElement("span", { className: "jkl-sr-only" }, label));
 });
@@ -13,0 +6,0 @@ DismissButton.displayName = "DismissButton";

build/esm/common/MessageIcon.js

@@ -0,1 +1,2 @@
+import { ErrorIcon, InfoIcon, WarningIcon, SuccessIcon } from "@fremtind/jkl-icons-react";
 import React from "react";
@@ -5,81 +6,9 @@ const MessageIcon = ({ messageType }) => {
     case "error":
-      return /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M12 24C18.8503 24 24 18.6274 24 12C24 5.37258 18.8503 0 12 0C5.59548 0 0 5.37258 0 12C0 18.6274 5.59548 24 12 24ZM17.43 8.41421L13.6371 12.2071L17.43 16L16.0158 17.4142L12 13.6213L8.43001 17.4142L7.01579 16L10.8087 12.2071L7.01579 8.41421L8.43001 7L12 10.7929L16.0158 7L17.43 8.41421Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ React.createElement(ErrorIcon, { className: "jkl-alert-message__icon" });
     case "info":
-      return /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M24 12C24 18.6274 18.8503 24 12 24C5.59548 24 0 18.6274 0 12C0 5.37258 5.59548 0 12 0C18.8503 0 24 5.37258 24 12ZM11 17.4142V10H13.2229V17.4142H11.2229ZM12 8.5C12.9133 8.5 13.4729 7.94036 13.4729 7.25C13.4729 6.55964 12.9133 6 12 6C11.5325 6 10.9729 6.55964 10.9729 7.25C10.9729 7.94036 11.5325 8.5 12 8.5Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ React.createElement(InfoIcon, { className: "jkl-alert-message__icon" });
     case "success":
-      return /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "0 0 24 24",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M12 24C18.8503 24 24 18.6274 24 12C24 5.37258 18.8503 0 12 0C5.59548 0 0 5.37258 0 12C0 18.6274 5.59548 24 12 24ZM11.5503 16.7071L19.0503 9.20711L17.6361 7.79289L10.8432 14.5858L7.26909 11.0116L5.85486 12.4258L10.1361 16.7071L10.8432 17.4142L11.5503 16.7071Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ React.createElement(SuccessIcon, { className: "jkl-alert-message__icon" });
     case "warning":
-      return /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          className: "jkl-alert-message__icon",
-          "aria-hidden": true,
-          viewBox: "2 3 20 18",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg"
-        },
-        /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M18.3588 20.5107L5.64157 20.5107C3.33259 20.5107 1.88917 18.0116 3.04301 16.0116L9.40163 4.98996C10.5561 2.98885 13.4443 2.98885 14.5987 4.98996L20.9574 16.0116C22.1112 18.0116 20.6678 20.5107 18.3588 20.5107ZM12.7515 13.6525L12.7515 7.63131L11.9988 7.63131L11.2462 7.63131L11.2462 13.6525L12.7515 13.6525ZM12.0012 15.0458C11.441 15.0458 10.9868 15.5 10.9868 16.0602C10.9868 16.6205 11.441 17.0747 12.0012 17.0747C12.5615 17.0747 13.0157 16.6205 13.0157 16.0602C13.0157 15.5 12.5615 15.0458 12.0012 15.0458Z",
-            fill: "currentColor"
-          }
-        )
-      );
+      return /* @__PURE__ */ React.createElement(WarningIcon, { className: "jkl-alert-message__icon" });
     default:
@@ -86,0 +15,0 @@ return null;

package.json

 {
     "name": "@fremtind/jkl-alert-message-react",
-    "version": "9.0.17",
+    "version": "10.0.0",
     "publishConfig": {
@@ -41,5 +41,6 @@ "access": "public"
     "dependencies": {
-        "@fremtind/jkl-alert-message": "^7.0.11",
-        "@fremtind/jkl-core": "^11.4.0",
-        "@fremtind/jkl-react-hooks": "^10.2.9",
+        "@fremtind/jkl-alert-message": "^8.0.0",
+        "@fremtind/jkl-core": "^12.0.0",
+        "@fremtind/jkl-icons-react": "^7.0.0",
+        "@fremtind/jkl-react-hooks": "^11.0.0",
         "classnames": "^2.3.2"
@@ -60,3 +61,3 @@ },
     },
-    "gitHead": "ec5d85c9e404fbced0be21140faf4d7d295dbdea"
+    "gitHead": "f325f04cebd537eaa97ae7b27535c946b6f85ff6"
 }

README.md

@@ -17,2 +17,4 @@ # [`@fremtind/jkl-alert-message-react`](https://jokul.fremtind.no/komponenter/alertmessage)
 import "@fremtind/jkl-alert-message/alert-message.min.css";
+// AlertMessage bruker ikonpakken og må ha stilene dens
+import "@fremtind/jkl-icons/icons.min.css";
 ```
@@ -23,2 +25,4 @@
 @use "@fremtind/jkl-alert-message/alert-message";
+// AlertMessage bruker ikonpakken og må ha stilene dens
+@use "@fremtind/jkl-icons/icons";
 ```

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

Number of lines in readme file

27

increased by17.39%

Worsened metrics

Total package byte prevSize

32348

decreased by-31.7%

Dependency count

9

increased by12.5%

Lines of code

353

decreased by-31.19%

Dependency changes

• + Added@fremtind/jkl-icons-react@^7.0.0

• + Added@fremtind/jkl-alert-message@8.0.6(transitive)

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

• + Added@fremtind/jkl-icons@8.0.3(transitive)

• + Added@fremtind/jkl-icons-react@7.2.9(transitive)

• + Added@fremtind/jkl-react-hooks@11.5.1(transitive)

• - Removed@fremtind/jkl-alert-message@7.0.11(transitive)

• - Removed@fremtind/jkl-core@11.4.0(transitive)

• - Removed@fremtind/jkl-react-hooks@10.2.9(transitive)

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

• Updated@fremtind/jkl-core@^12.0.0

• Updated@fremtind/jkl-react-hooks@^11.0.0