From a11d52f8a29da611b91f92aa7bed5c6b2fd6b83f Mon Sep 17 00:00:00 2001
From: Okke Harsta <oharsta@zilverline.com>
Date: Tue, 3 Sep 2024 14:36:51 +0200
Subject: [PATCH] Release 0.0.112 - error modal dialog

---
 package-lock.json                      |  4 ++--
 package.json                           |  2 +-
 src/components/Modal/Modal.scss        | 29 +++++++++++++++-----------
 src/components/Modal/Modal.stories.tsx |  9 ++++++++
 src/components/Modal/Modal.tsx         |  4 +++-
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3fb6ef2..6276131c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@surfnet/sds",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@surfnet/sds",
-      "version": "0.0.111",
+      "version": "0.0.112",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.16.0",
diff --git a/package.json b/package.json
index e86ad8ff..15ef906c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@surfnet/sds",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "description": "SURF Design System for React",
   "main": "cjs/index.js",
   "module": "esm/index.js",
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
index 69d1e788..1a5cef38 100644
--- a/src/components/Modal/Modal.scss
+++ b/src/components/Modal/Modal.scss
@@ -1,19 +1,24 @@
 .sds--modal {
-  &--container {
-    min-width: 22.875rem;
+    &--container {
+        min-width: 22.875rem;
 
-    &.full {
-      max-width: 65.875rem;
-    }
-    span.sds--modal--close {
-      cursor: pointer;
-      padding: 4px;
+        &.full {
+            max-width: 65.875rem;
+        }
+
+        span.sds--modal--close {
+            cursor: pointer;
+            padding: 4px;
+        }
+
+        .sds--modal--title.error {
+            background-color: var(--sds--color--red--400);
+        }
     }
-  }
 }
 
 body.modal-open {
-  height: 100vh;
-  overflow-y: hidden;
-  padding-right: 15px;
+    height: 100vh;
+    overflow-y: hidden;
+    padding-right: 15px;
 }
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index f8c56c09..99e7731b 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -49,6 +49,15 @@ ModalTemplateNoCancel.args = {
     confirmationButtonLabel: "Ok",
 };
 
+export const ModalTemplateError = Template.bind({});
+ModalTemplateError.args = {
+    confirm: () => true,
+    isError: true,
+    title: "Title",
+    question: "Question.",
+    confirmationButtonLabel: "Ok",
+};
+
 export const ModalTemplateNoConfirm = Template.bind({});
 ModalTemplateNoConfirm.args = {
     title: "Title",
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index b0620f65..1406247a 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -13,6 +13,7 @@ export interface ModalProps {
     question?: string;
     cancel?: React.MouseEventHandler<HTMLButtonElement>;
     alertType?: AlertType;
+    isError?: boolean;
     subTitle?: string;
     confirmDisabled?: boolean;
     confirmationButtonLabel?: string;
@@ -25,6 +26,7 @@ const Modal = (props: React.PropsWithChildren<ModalProps>) => {
     const alertType = props.alertType || AlertType.Info;
     const full = props.full ? "full" : "";
     const className = props.className || "";
+    const classNameTitle = `sds--modal--title ${props.isError || false ? "error" : ""}`
 
     useEffect(() => {
         document.body.classList.add("modal-open");
@@ -36,7 +38,7 @@ const Modal = (props: React.PropsWithChildren<ModalProps>) => {
     return (
         <div className="sds--modal sds--backdrop">
             <div className={`sds--modal--container ${full} ${className}`}>
-                <div className="sds--modal--title">
+                <div className={classNameTitle}>
                     <p className="sds--text--h4">{props.title}</p>
                     {props.cancel && <span className="sds--modal--close" onClick={props.cancel}><CloseIcon/></span>}
                 </div>