Release 0.0.112 - error modal dialog

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",

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;
 }

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",

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>