From bc00dfb7bbf03ed0ceb3810572ddc2bdf4da99c0 Mon Sep 17 00:00:00 2001
From: Max Chopart <chopart.max@proton.me>
Date: Wed, 17 Apr 2024 08:38:51 +0200
Subject: [PATCH 1/3] [Upd] Changed default behavior to allow skip of wizard
 step + refactor for readability

---
 .storybook/preview.js                | 1 -
 src/components/wizard/Wizard.jsx     | 2 +-
 src/contexts/ConfigurationContext.js | 2 +-
 src/stories/SForms.stories.tsx       | 1 -
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index f9c5774b..1dcba9dd 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -130,7 +130,6 @@ const options = {
   modalView: false,
   horizontalWizardNav: false,
   wizardStepButtons: true,
-  enableForwardSkip: true,
   startingStep: 1,
   debugMode: false,
   users: [
diff --git a/src/components/wizard/Wizard.jsx b/src/components/wizard/Wizard.jsx
index ac6fa8c1..b5dfa111 100644
--- a/src/components/wizard/Wizard.jsx
+++ b/src/components/wizard/Wizard.jsx
@@ -93,7 +93,7 @@ const Wizard = () => {
     if (
       stepIndex > currentStep &&
       !stepData[stepIndex].visited &&
-      !options.enableForwardSkip
+      !options.enableWizardStepSkip
     ) {
       return;
     }
diff --git a/src/contexts/ConfigurationContext.js b/src/contexts/ConfigurationContext.js
index 4b161dfe..8453cfb9 100644
--- a/src/contexts/ConfigurationContext.js
+++ b/src/contexts/ConfigurationContext.js
@@ -28,7 +28,7 @@ const defaultProps = {
     modalProps: {},
     horizontalWizardNav: true,
     wizardStepButtons: true,
-    enableForwardSkip: false,
+    enableWizardStepSkip: true,
     startingStep: 0,
   },
 };
diff --git a/src/stories/SForms.stories.tsx b/src/stories/SForms.stories.tsx
index 7ab7fde9..796c90bd 100644
--- a/src/stories/SForms.stories.tsx
+++ b/src/stories/SForms.stories.tsx
@@ -65,7 +65,6 @@ const Template: ComponentStory<typeof SForms> = (
     modalProps,
     horizontalWizardNav: horizontalNavBar,
     wizardStepButtons: true,
-    enableForwardSkip: true,
     ...getP("startingQuestionId", "layout-options-65"),
     startingStep: 1,
     debugMode: debugMode,

From 220e9c00957114cb6e856c35843f05db9fd7b4c7 Mon Sep 17 00:00:00 2001
From: Max Chopart <chopart.max@proton.me>
Date: Wed, 17 Apr 2024 09:09:13 +0200
Subject: [PATCH 2/3] [New #323] Added overlay with tooltip to disabled
 navigation steps

---
 src/components/HelpIcon.jsx                   |  1 -
 src/components/IconOverlay.jsx                |  6 ++-
 src/components/wizard/HorizontalWizardNav.jsx | 44 ++++++++++--------
 src/components/wizard/VerticalWizardNav.jsx   | 46 +++++++++++--------
 4 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/src/components/HelpIcon.jsx b/src/components/HelpIcon.jsx
index e46b6968..6b4ae3a4 100644
--- a/src/components/HelpIcon.jsx
+++ b/src/components/HelpIcon.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { Tooltip } from "react-bootstrap";
 import { QuestionCircle } from "../styles/icons";
 import IconOverlay from "./IconOverlay.jsx";
 
diff --git a/src/components/IconOverlay.jsx b/src/components/IconOverlay.jsx
index e5fad892..2d99ca14 100644
--- a/src/components/IconOverlay.jsx
+++ b/src/components/IconOverlay.jsx
@@ -13,10 +13,12 @@ const IconOverlay = (props) => {
     } else setOverlayPlacement("right");
   };
 
-  const tooltip = (
+  const tooltip = props.show ? (
     <Tooltip className="tooltip-content" id={props.id}>
       {props.tooltipContent}
     </Tooltip>
+  ) : (
+    <span />
   );
 
   return (
@@ -39,12 +41,14 @@ IconOverlay.propTypes = {
   id: PropTypes.string.isRequired,
   overlayPlacement: PropTypes.string,
   absolutePosition: PropTypes.bool,
+  show: PropTypes.bool,
 };
 
 IconOverlay.defaultProps = {
   iconClassContainer: "",
   iconClass: "",
   absolutePosition: true,
+  show: true,
 };
 
 export default IconOverlay;
diff --git a/src/components/wizard/HorizontalWizardNav.jsx b/src/components/wizard/HorizontalWizardNav.jsx
index 3ef8c232..3cde5bf1 100644
--- a/src/components/wizard/HorizontalWizardNav.jsx
+++ b/src/components/wizard/HorizontalWizardNav.jsx
@@ -6,6 +6,7 @@ import FormUtils from "../../util/FormUtils";
 import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import Question from "../Question";
 import classNames from "classnames";
+import IconOverlay from "../IconOverlay.jsx";
 
 const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
@@ -18,24 +19,31 @@ const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
         onSelect={(key) => onNavigate(parseInt(key))}
       >
         {steps.map((step, index) => (
-          <NavItem key={"nav" + index} id={"wizard-nav-" + index}>
-            <NavLink
-              eventKey={index}
-              active={index === currentStep ? "active" : ""}
-              hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
-              className={classNames([
-                options.debugMode && !FormUtils.isRelevant(step)
-                  ? "show-irrelevant"
-                  : Question.getEmphasizedClass(step),
-                "wizard-nav",
-              ])}
-            >
-              {JsonLdUtils.getLocalized(
-                step[JsonLdUtils.RDFS_LABEL],
-                options.intl
-              )}
-            </NavLink>
-          </NavItem>
+          <IconOverlay
+            id="step-disabled"
+            tooltipContent="Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+            show={!options.enableWizardStepSkip}
+          >
+            <NavItem key={"nav" + index} id={"wizard-nav-" + index}>
+              <NavLink
+                eventKey={index}
+                active={index === currentStep ? "active" : ""}
+                hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
+                disabled={!options.enableWizardStepSkip}
+                className={classNames([
+                  options.debugMode && !FormUtils.isRelevant(step)
+                    ? "show-irrelevant"
+                    : Question.getEmphasizedClass(step),
+                  "wizard-nav",
+                ])}
+              >
+                {JsonLdUtils.getLocalized(
+                  step[JsonLdUtils.RDFS_LABEL],
+                  options.intl
+                )}
+              </NavLink>
+            </NavItem>
+          </IconOverlay>
         ))}
       </Nav>
     </Card.Header>
diff --git a/src/components/wizard/VerticalWizardNav.jsx b/src/components/wizard/VerticalWizardNav.jsx
index bf4e0a31..1b138d5b 100644
--- a/src/components/wizard/VerticalWizardNav.jsx
+++ b/src/components/wizard/VerticalWizardNav.jsx
@@ -6,6 +6,7 @@ import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import FormUtils from "../../util/FormUtils";
 import Question from "../Question";
 import classNames from "classnames";
+import IconOverlay from "../IconOverlay.jsx";
 
 const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
@@ -14,26 +15,33 @@ const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
     <div className="wizard-nav col-2 p-0">
       <ListGroup>
         {steps.map((step, index) => (
-          <ListGroupItem
-            hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
-            key={"nav" + index}
-            onClick={() => onNavigate(index)}
-            id={"wizard-nav-" + index}
-            action={true}
-            active={index === currentStep ? "active" : ""}
-            variant={"default"}
-            className={classNames([
-              options.debugMode && !FormUtils.isRelevant(step)
-                ? "show-irrelevant"
-                : Question.getEmphasizedClass(step),
-              "wizard-nav",
-            ])}
+          <IconOverlay
+            id="step-disabled"
+            tooltipContent="Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+            show={!options.enableWizardStepSkip}
           >
-            {JsonLdUtils.getLocalized(
-              step[JsonLdUtils.RDFS_LABEL],
-              options.intl
-            )}
-          </ListGroupItem>
+            <ListGroupItem
+              hidden={options.debugMode ? false : !FormUtils.isRelevant(step)}
+              key={"nav" + index}
+              onClick={() => onNavigate(index)}
+              id={"wizard-nav-" + index}
+              action={true}
+              active={index === currentStep ? "active" : ""}
+              disabled={!options.enableWizardStepSkip}
+              variant={"default"}
+              className={classNames([
+                options.debugMode && !FormUtils.isRelevant(step)
+                  ? "show-irrelevant"
+                  : Question.getEmphasizedClass(step),
+                "wizard-nav",
+              ])}
+            >
+              {JsonLdUtils.getLocalized(
+                step[JsonLdUtils.RDFS_LABEL],
+                options.intl
+              )}
+            </ListGroupItem>
+          </IconOverlay>
         ))}
       </ListGroup>
     </div>

From f4fd2760fecb7caa99dbd680f5d57e08ed1bef71 Mon Sep 17 00:00:00 2001
From: Max Chopart <chopart.max@proton.me>
Date: Fri, 19 Apr 2024 10:09:37 +0200
Subject: [PATCH 3/3] [Upd #323] Add intl to wizard tooltip

---
 src/components/wizard/HorizontalWizardNav.jsx | 4 +++-
 src/components/wizard/VerticalWizardNav.jsx   | 4 +++-
 src/i18n/cs.json                              | 3 ++-
 src/i18n/en.json                              | 3 ++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/wizard/HorizontalWizardNav.jsx b/src/components/wizard/HorizontalWizardNav.jsx
index 3cde5bf1..2fcab3f0 100644
--- a/src/components/wizard/HorizontalWizardNav.jsx
+++ b/src/components/wizard/HorizontalWizardNav.jsx
@@ -7,9 +7,11 @@ import { ConfigurationContext } from "../../contexts/ConfigurationContext";
 import Question from "../Question";
 import classNames from "classnames";
 import IconOverlay from "../IconOverlay.jsx";
+import { useIntl } from "react-intl";
 
 const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
+  const intl = useIntl();
 
   return (
     <Card.Header>
@@ -21,7 +23,7 @@ const HorizontalWizardNav = ({ steps, onNavigate, currentStep }) => {
         {steps.map((step, index) => (
           <IconOverlay
             id="step-disabled"
-            tooltipContent="Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+            tooltipContent={intl.formatMessage({ id: "wizard.nav.tooltip" })}
             show={!options.enableWizardStepSkip}
           >
             <NavItem key={"nav" + index} id={"wizard-nav-" + index}>
diff --git a/src/components/wizard/VerticalWizardNav.jsx b/src/components/wizard/VerticalWizardNav.jsx
index 1b138d5b..025cbe0d 100644
--- a/src/components/wizard/VerticalWizardNav.jsx
+++ b/src/components/wizard/VerticalWizardNav.jsx
@@ -7,9 +7,11 @@ import FormUtils from "../../util/FormUtils";
 import Question from "../Question";
 import classNames from "classnames";
 import IconOverlay from "../IconOverlay.jsx";
+import { useIntl } from "react-intl";
 
 const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
   const { options } = useContext(ConfigurationContext);
+  const intl = useIntl();
 
   return (
     <div className="wizard-nav col-2 p-0">
@@ -17,7 +19,7 @@ const VerticalWizardNav = ({ steps, onNavigate, currentStep }) => {
         {steps.map((step, index) => (
           <IconOverlay
             id="step-disabled"
-            tooltipContent="Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
+            tooltipContent={intl.formatMessage({ id: "wizard.nav.tooltip" })}
             show={!options.enableWizardStepSkip}
           >
             <ListGroupItem
diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index 1c75c8fc..5c832b17 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -1,3 +1,4 @@
 {
-  "comment.form.placeholder": "Sem napište své komentáře (Ctrl+Enter pro potvrzení)"
+  "comment.form.placeholder": "Sem napište své komentáře (Ctrl+Enter pro potvrzení)",
+  "wizard.nav.tooltip": "Navigace na této kartě je zakázána, aby nedošlo k přehlédnutí důležitých otázek. K navigaci na tuto kartu použijte tlačítka související s formulářem."
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b401fbd1..fc040a8d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,3 +1,4 @@
 {
-  "comment.form.placeholder": "Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)"
+  "comment.form.placeholder": "Write your comments here  (Ctrl+Enter to confirm, Esc to cancel)",
+  "wizard.nav.tooltip": "Navigation to this tab is disabled to prevent overlooking important questions. Use form-related buttons to navigate to this tab instead."
 }