From 7ac7b53da7542fc017f3363178d3c13c31aeb120 Mon Sep 17 00:00:00 2001
From: SilviaAmAm <silvia@maykinmedia.nl>
Date: Mon, 23 Oct 2023 13:02:20 +0200
Subject: [PATCH] :sparkles: [#462] Add wrapper for disabled-clickable button

---
 .../DisabledClickableButtonWrapper.js         | 20 +++++++++++++++++++
 src/components/SummaryConfirmation/index.js   | 19 ++++++++++++------
 .../_disabled-clickable-button.scss           | 15 ++++++++++++++
 src/styles.scss                               |  1 +
 4 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js
 create mode 100644 src/scss/components/_disabled-clickable-button.scss

diff --git a/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js b/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js
new file mode 100644
index 000000000..9a3997c82
--- /dev/null
+++ b/src/components/SummaryConfirmation/DisabledClickableButtonWrapper.js
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DisabledClickableButtonWrapper = ({disabled, onDisabledClick, children}) => {
+  if (!disabled) return <>{children}</>;
+
+  return (
+    <div onClick={onDisabledClick} className="openforms-disabled-clickable-button">
+      <div className="openforms-disabled-clickable-button__clickable-wrap">{children}</div>
+    </div>
+  );
+};
+
+DisabledClickableButtonWrapper.propTypes = {
+  disabled: PropTypes.bool.isRequired,
+  onDisabledClick: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default DisabledClickableButtonWrapper;
diff --git a/src/components/SummaryConfirmation/index.js b/src/components/SummaryConfirmation/index.js
index 00145be60..a3a2ea9ea 100644
--- a/src/components/SummaryConfirmation/index.js
+++ b/src/components/SummaryConfirmation/index.js
@@ -12,6 +12,8 @@ import {Toolbar, ToolbarList} from 'components/Toolbar';
 import {SUBMISSION_ALLOWED} from 'components/constants';
 import useFormContext from 'hooks/useFormContext';
 
+import DisabledClickableButtonWrapper from './DisabledClickableButtonWrapper';
+
 const isSubmitEnabled = (statementsInfo = [], statementsValues) => {
   return statementsInfo.every(info => {
     if (!info.validate.required) return true;
@@ -46,15 +48,20 @@ const SummaryConfirmation = ({submissionAllowed, onPrevPage}) => {
         </ToolbarList>
         <ToolbarList>
           {canSubmit ? (
-            <UtrechtButton
-              type="submit"
-              appearance="primary-action-button"
-              name="confirm"
+            <DisabledClickableButtonWrapper
               disabled={submitDisabled}
               onDisabledClick={() => setShowStatementWarnings(true)}
             >
-              <Literal name="confirmText" />
-            </UtrechtButton>
+              <UtrechtButton
+                type="submit"
+                appearance="primary-action-button"
+                name="confirm"
+                disabled={submitDisabled}
+                aria-disabled={submitDisabled}
+              >
+                <Literal name="confirmText" />
+              </UtrechtButton>
+            </DisabledClickableButtonWrapper>
           ) : null}
         </ToolbarList>
       </Toolbar>
diff --git a/src/scss/components/_disabled-clickable-button.scss b/src/scss/components/_disabled-clickable-button.scss
new file mode 100644
index 000000000..0d2637875
--- /dev/null
+++ b/src/scss/components/_disabled-clickable-button.scss
@@ -0,0 +1,15 @@
+@import '../mixins/prefix';
+
+.#{prefix(disabled-clickable-button)} {
+  position: relative;
+
+  &__clickable-wrap::before {
+    cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 12d60dbf3..357a6e3e7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -63,3 +63,4 @@
 @import './scss/components/floating-widget';
 @import './scss/components/date-picker';
 @import './scss/components/input-container';
+@import './scss/components/disabled-clickable-button';