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 ( +
+
{children}
+
+ ); +}; + +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}) => { {canSubmit ? ( - setShowStatementWarnings(true)} > - - + + + + ) : null} 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';