@indico-data/design-system 2.58.2 → 2.59.0

package/src/components/stepper/components/Legend.tsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import { Icon } from '../../icons/Icon';
+import { Col, Row } from '../../grid/';
+import { Button } from '../../button';
+import { StepperLegendProps } from '../types';
+
+export const Legend = ({ currentStep, steps, onStepClick }: StepperLegendProps) => {
+  const totalSteps = steps?.length || 0;
+  return (
+    <div className="stepper-legend">
+      {steps?.map((step, index) => {
+        const isCompleted = steps[index].isCompleted;
+        const isCurrent = index === currentStep;
+        const isSidebarEnabled = step.isSidebarEnabled;
+
+        return (
+          <div key={index}>
+            <Row nogutter align="center">
+              <Col xs="content">
+                <div
+                  className={classNames('stepper-legend-circle', {
+                    completed: isCompleted,
+                    current: isCurrent,
+                  })}
+                >
+                  {isCompleted ? <Icon name="check" /> : index + 1}
+                </div>
+              </Col>
+              <Col>
+                <div
+                  className={classNames('stepper-legend-step', {
+                    'stepper-legend-step--current-step': isCurrent,
+                    'stepper-legend-step--completed-step': isCompleted,
+                    'stepper-legend-step--disabled-step': !isSidebarEnabled,
+                  })}
+                >
+                  <Button
+                    data-testid={`stepper-legend-step-${index}`}
+                    onClick={() => onStepClick(index)}
+                    isDisabled={!isSidebarEnabled}
+                    ariaLabel={step.label}
+                    size="sm"
+                    variant="link"
+                  >
+                    {step.label}
+                  </Button>
+                </div>
+              </Col>
+            </Row>
+            {index !== totalSteps - 1 && (
+              <Row>
+                <Col>
+                  <div
+                    className={classNames('stepper-legend-line', {
+                      'stepper-legend-line--completed': isCompleted,
+                    })}
+                  ></div>
+                </Col>
+              </Row>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/stepper/components/NextNavigation.tsx

@@ -0,0 +1,38 @@
+import { Button } from '../../button';
+type Props = {
+  isLastStep: boolean;
+  onNextClick: () => void;
+  onFinishClick: () => void;
+  isDisabled: boolean;
+};
+
+export const NextNavigation = ({ isLastStep, onNextClick, onFinishClick, isDisabled }: Props) => {
+  return (
+    <div className="stepper-navigation">
+      {!isLastStep ? (
+        <div className="stepper-navigation-next">
+          <Button
+            data-testid="stepper-next-button"
+            iconRight="fa-arrow-right"
+            ariaLabel="Next Step"
+            onClick={onNextClick}
+            isDisabled={isDisabled}
+          >
+            Next Step
+          </Button>
+        </div>
+      ) : (
+        <div className="stepper-navigation-finish">
+          <Button
+            data-testid="stepper-finish-button"
+            ariaLabel="Finish"
+            onClick={onFinishClick}
+            isDisabled={isDisabled}
+          >
+            Finish
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/stepper/examples/MixedExample.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import { Stepper } from '../Stepper';
+import { Button } from '../../button';
+import { MIXED_EXAMPLE_STEPS, STEP_CONTENT_DATA, INFO_BOX_STYLE } from './constants';
+
+export const MixedExample = () => {
+  // Value of the current step.
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // Array of all steps using the MIXED_EXAMPLE_STEPS constant
+  const [steps, setSteps] = useState(
+    MIXED_EXAMPLE_STEPS.map((step, index) => ({
+      ...step,
+      label: `Step ${index + 1}: ${
+        index === 0
+          ? 'Start'
+          : index === MIXED_EXAMPLE_STEPS.length - 1
+            ? 'Complete'
+            : index === 1
+              ? 'Details'
+              : index === 2
+                ? 'Review'
+                : 'Confirm'
+      }`,
+      // Only override isNextDisabled for non-optional steps that aren't completed yet
+      isNextDisabled: !step.isOptional && !step.isCompleted,
+    })),
+  );
+
+  //=========Navigation Functions=========
+
+  // This function handles what happens when the user clicks the back button.
+  const handleBackClick = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  // This function handles what happens when the user clicks the next button. This is important because it allows you to navigate the side legend.
+  const handleNextClick = () => {
+    const currentStepData = steps[currentStep];
+    // if step is optional, then enable next step
+    if (currentStepData?.isOptional) {
+      setSteps(
+        steps.map((step, index) =>
+          index === currentStep + 1 ? { ...step, isNextDisabled: false } : step,
+        ),
+      );
+      setCurrentStep(currentStep + 1);
+      // If the current step is completed and not optional, then enable the next step
+    } else if (currentStepData && currentStepData.isCompleted) {
+      setSteps(
+        steps.map((step, index) =>
+          index === currentStep + 1 ? { ...step, isNextDisabled: false } : step,
+        ),
+      );
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  // This function allows the legend to navigate to a specific step
+  const handleStepClick = (step: number) => {
+    setCurrentStep(step);
+  };
+
+  //=========Step Completion Functions=========
+
+  // This function handles what happens when the user finishes the last step
+  const handleFinishClick = () => {
+    alert('Finished!');
+  };
+
+  // This function fires when the conditions for the current step are met.
+  const handleCompleteStep = (step: number) => {
+    setSteps(
+      steps.map((currentStep, index) =>
+        index === step ? { ...currentStep, isCompleted: true, isNextDisabled: false } : currentStep,
+      ),
+    );
+  };
+
+  return (
+    <>
+      <div style={INFO_BOX_STYLE}>
+        <h3>Mixed Steps Example (Default)</h3>
+        <p>This is the default stepper configuration with mixed step requirements:</p>
+        <ul>
+          <li>The first step is required and must be completed before proceeding</li>
+          <li>Steps 2-5 are optional and can be skipped</li>
+          <li>All steps are accessible from the sidebar at any time</li>
+          <li>The Next button is enabled for optional steps or completed required steps</li>
+        </ul>
+        <p>This provides a flexible experience while ensuring critical steps are completed.</p>
+      </div>
+
+      <Stepper
+        steps={steps}
+        currentStep={currentStep}
+        onBackClick={handleBackClick}
+        onNextClick={handleNextClick}
+        onFinishClick={handleFinishClick}
+        onStepClick={handleStepClick}
+      >
+        <div className="step" id={steps[0].id}>
+          <h3>{STEP_CONTENT_DATA.step1.title}</h3>
+          <p>{STEP_CONTENT_DATA.step1.content}</p>
+          <Button onClick={() => handleCompleteStep(0)} ariaLabel="Complete Step 1">
+            Press To Complete Step
+          </Button>
+        </div>
+        <div className="step" id={steps[1].id}>
+          <h3>{STEP_CONTENT_DATA.step2.title}</h3>
+          <p>{STEP_CONTENT_DATA.step2.content}</p>
+          <Button onClick={() => handleCompleteStep(1)} ariaLabel="Complete Step 2">
+            Press To Complete Step
+          </Button>
+        </div>
+        <div className="step" id={steps[2].id}>
+          <h3>{STEP_CONTENT_DATA.step3.title}</h3>
+          <p>{STEP_CONTENT_DATA.step3.content}</p>
+          <Button onClick={() => handleCompleteStep(2)} ariaLabel="Complete Step 3">
+            Press To Complete Step
+          </Button>
+        </div>
+        <div className="step" id={steps[3].id}>
+          <h3>{STEP_CONTENT_DATA.step4.title}</h3>
+          <p>{STEP_CONTENT_DATA.step4.content}</p>
+          <Button onClick={() => handleCompleteStep(3)} ariaLabel="Complete Step 4">
+            Press To Complete Step
+          </Button>
+        </div>
+        <div className="step" id={steps[4].id}>
+          <h3>{STEP_CONTENT_DATA.step5.title}</h3>
+          <p>{STEP_CONTENT_DATA.step5.content}</p>
+          <Button onClick={() => handleCompleteStep(4)} ariaLabel="Complete Step 5">
+            Press To Complete Step
+          </Button>
+        </div>
+      </Stepper>
+    </>
+  );
+};

package/src/components/stepper/examples/OptionalStepsExample.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { Stepper } from '../Stepper';
+import { Button } from '../../button';
+import { OPTIONAL_STEPS, INFO_BOX_STYLE, STATUS_INDICATOR_STYLE } from './constants';
+
+export const OptionalStepsExample = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [steps, setSteps] = useState(
+    OPTIONAL_STEPS.map((step, index) => ({
+      ...step,
+      label: `Step ${index + 1}: Optional`,
+      // Optional steps keep the default isNextDisabled: false from constants
+    })),
+  );
+
+  // Count completed steps for summary
+  const completedCount = steps.filter((step) => step.isCompleted).length;
+
+  // Handles back button click
+  const handleBackClick = () => {
+    setCurrentStep(Math.max(0, currentStep - 1));
+  };
+
+  // Handles next button click - always proceeds regardless of completion
+  const handleNextClick = () => {
+    // Move to the next step without checking completion status
+    setCurrentStep(Math.min(steps.length - 1, currentStep + 1));
+  };
+
+  // Handle sidebar navigation - always allows any step
+  const handleStepClick = (step: number) => {
+    setCurrentStep(step);
+  };
+
+  // When the user completes a step
+  const handleCompleteStep = (step: number) => {
+    setSteps(
+      steps.map((currentStep, index) =>
+        index === step ? { ...currentStep, isCompleted: true } : currentStep,
+      ),
+    );
+  };
+
+  // Handle finish button click - no validation needed
+  const handleFinishClick = () => {
+    // Show summary of what was completed
+    alert(`Process finished! You completed ${completedCount} out of ${steps.length} steps.`);
+  };
+
+  // Status indicator to show optional status
+  const StepStatus = ({ isCompleted }: { isCompleted: boolean }) => (
+    <div className="step-status">
+      <div style={STATUS_INDICATOR_STYLE(isCompleted ? 'green' : 'orange')} />
+      {isCompleted ? 'Completed' : 'Optional - Not Completed'}
+    </div>
+  );
+
+  return (
+    <>
+      <div style={INFO_BOX_STYLE}>
+        <h3>Optional Steps Example</h3>
+        <p>In this example, all steps are optional. You can:</p>
+        <ul>
+          <li>Navigate freely between steps using the sidebar</li>
+          <li>Skip any step by clicking Next without completing it</li>
+          <li>Finish the process at any time regardless of completion status</li>
+        </ul>
+        <p>
+          <strong>Completed steps:</strong> {completedCount} of {steps.length}
+        </p>
+      </div>
+
+      <Stepper
+        steps={steps}
+        currentStep={currentStep}
+        onBackClick={handleBackClick}
+        onNextClick={handleNextClick}
+        onFinishClick={handleFinishClick}
+        onStepClick={handleStepClick}
+      >
+        <div className="step" id={steps[0].id}>
+          <h3>Step 1: Profile Preferences (Optional)</h3>
+          <p>Set your profile preferences if you want. You can always skip this step.</p>
+          <StepStatus isCompleted={steps[0].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(0)} ariaLabel="Complete Step 1">
+              Complete Optional Step
+            </Button>
+            <div style={{ marginTop: '10px' }}>
+              <em>Or click Next to skip this step</em>
+            </div>
+          </div>
+        </div>
+
+        <div className="step" id={steps[1].id}>
+          <h3>Step 2: Additional Information (Optional)</h3>
+          <p>Provide additional information if you want. This step is completely optional.</p>
+          <StepStatus isCompleted={steps[1].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(1)} ariaLabel="Complete Step 2">
+              Complete Optional Step
+            </Button>
+            <div style={{ marginTop: '10px' }}>
+              <em>Or click Next to skip this step</em>
+            </div>
+          </div>
+        </div>
+
+        <div className="step" id={steps[2].id}>
+          <h3>Step 3: Notification Preferences (Optional)</h3>
+          <p>Configure your notification preferences. You can always set these later.</p>
+          <StepStatus isCompleted={steps[2].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(2)} ariaLabel="Complete Step 3">
+              Complete Optional Step
+            </Button>
+            <div style={{ marginTop: '10px' }}>
+              <em>Or click Next to skip this step</em>
+            </div>
+          </div>
+        </div>
+
+        <div className="step" id={steps[3].id}>
+          <h3>Step 4: Feedback (Optional)</h3>
+          <p>Share your feedback with us. This information is optional but helps us improve.</p>
+          <StepStatus isCompleted={steps[3].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(3)} ariaLabel="Complete Step 4">
+              Complete Optional Step
+            </Button>
+            <div style={{ marginTop: '10px' }}>
+              <em>Or click Finish to complete without feedback</em>
+            </div>
+          </div>
+        </div>
+      </Stepper>
+    </>
+  );
+};

package/src/components/stepper/examples/RequiredStepsExample.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { Stepper } from '../Stepper';
+import { Button } from '../../button';
+import { REQUIRED_STEPS, INFO_BOX_STYLE, STATUS_INDICATOR_STYLE } from './constants';
+
+export const RequiredStepsExample = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [steps, setSteps] = useState(
+    REQUIRED_STEPS.map((step, index) => ({
+      ...step,
+      label: `Step ${index + 1}: Required`,
+      // For required steps, override to true initially until completed
+      isNextDisabled: true,
+    })),
+  );
+
+  // Handles back button click
+  const handleBackClick = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  // Handles next button click - only proceeds if current step is completed
+  const handleNextClick = () => {
+    const currentStepData = steps[currentStep];
+
+    // Can only proceed if the current step is completed
+    if (currentStepData && currentStepData.isCompleted) {
+      // Enable the next step in the sidebar
+      setSteps(
+        steps.map((step, index) =>
+          index === currentStep + 1
+            ? { ...step, isSidebarEnabled: true, isNextDisabled: false }
+            : step,
+        ),
+      );
+      // Move to the next step
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  // Handle sidebar navigation
+  const handleStepClick = (step: number) => {
+    // Only allow clicking on enabled steps in the sidebar
+    if (steps[step].isSidebarEnabled) {
+      setCurrentStep(step);
+    } else {
+      alert('You must complete the previous steps first.');
+    }
+  };
+
+  // When the user completes a step
+  const handleCompleteStep = (step: number) => {
+    setSteps(
+      steps.map((currentStep, index) =>
+        index === step ? { ...currentStep, isCompleted: true, isNextDisabled: false } : currentStep,
+      ),
+    );
+  };
+
+  // Handle finish button click
+  const handleFinishClick = () => {
+    // Check if all steps are completed
+    const allCompleted = steps.every((step) => step.isCompleted);
+
+    if (allCompleted) {
+      alert('Successfully completed all required steps!');
+    } else {
+      alert('You must complete all steps before finishing.');
+    }
+  };
+
+  // Status indicator to show what's required for each step
+  const StepStatus = ({ isCompleted }: { isCompleted: boolean }) => (
+    <div className="step-status">
+      <div style={STATUS_INDICATOR_STYLE(isCompleted ? 'green' : 'red')} />
+      {isCompleted ? 'Completed' : 'Required - Not Completed'}
+    </div>
+  );
+
+  return (
+    <>
+      <div style={INFO_BOX_STYLE}>
+        <h3>Required Steps Example</h3>
+        <p>In this example, all steps are required with strict validation:</p>
+        <ul>
+          <li>Every step must be completed before proceeding to the next</li>
+          <li>Only completed steps and the current step are accessible in the sidebar</li>
+          <li>The Next button is disabled until the current step is completed</li>
+          <li>All steps must be completed before the process can be finished</li>
+        </ul>
+        <p>This enforces a structured workflow where all information must be provided.</p>
+      </div>
+
+      <Stepper
+        steps={steps}
+        currentStep={currentStep}
+        onBackClick={handleBackClick}
+        onNextClick={handleNextClick}
+        onFinishClick={handleFinishClick}
+        onStepClick={handleStepClick}
+      >
+        <div className="step" id={steps[0].id}>
+          <h3>Step 1: Personal Information</h3>
+          <p>All fields in this form are required before you can proceed.</p>
+          <StepStatus isCompleted={steps[0].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(0)} ariaLabel="Complete Step 1">
+              Complete Required Step
+            </Button>
+          </div>
+        </div>
+
+        <div className="step" id={steps[1].id}>
+          <h3>Step 2: Contact Details</h3>
+          <p>All contact information must be provided to continue.</p>
+          <StepStatus isCompleted={steps[1].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(1)} ariaLabel="Complete Step 2">
+              Complete Required Step
+            </Button>
+          </div>
+        </div>
+
+        <div className="step" id={steps[2].id}>
+          <h3>Step 3: Security Questions</h3>
+          <p>You must set up security questions to protect your account.</p>
+          <StepStatus isCompleted={steps[2].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(2)} ariaLabel="Complete Step 3">
+              Complete Required Step
+            </Button>
+          </div>
+        </div>
+
+        <div className="step" id={steps[3].id}>
+          <h3>Step 4: Terms & Conditions</h3>
+          <p>You must agree to the terms and conditions to complete registration.</p>
+          <StepStatus isCompleted={steps[3].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(3)} ariaLabel="Complete Step 4">
+              Complete Required Step
+            </Button>
+          </div>
+        </div>
+        <div className="step" id={steps[4].id}>
+          <h3>Step 4: Terms & Conditions</h3>
+          <p>You must agree to the terms and conditions to complete registration.</p>
+          <StepStatus isCompleted={steps[4].isCompleted} />
+          <div style={{ marginTop: '20px' }}>
+            <Button onClick={() => handleCompleteStep(4)} ariaLabel="Complete Step 4">
+              Complete Required Step
+            </Button>
+          </div>
+        </div>
+      </Stepper>
+    </>
+  );
+};

package/src/components/stepper/examples/commonExample/CommonExample.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { Stepper } from '../../Stepper';
+import { StepOne } from './steps/StepOne';
+import { StepTwo } from './steps/StepTwo';
+import { StepThree } from './steps/StepThree';
+
+export const CommonExample = () => {
+  const exampleSteps = [
+    {
+      id: 'step1',
+      label: 'Application Information',
+      isCompleted: false,
+      isOptional: false,
+      isSidebarEnabled: true,
+      isNextDisabled: false,
+    },
+    {
+      id: 'step2',
+      label: 'Agent Information',
+      isCompleted: false,
+      isOptional: false,
+      isSidebarEnabled: false,
+      isNextDisabled: true,
+    },
+    {
+      id: 'step3',
+      label: 'User Information',
+      isCompleted: false,
+      isOptional: false,
+      isSidebarEnabled: false,
+      isNextDisabled: true,
+    },
+  ];
+
+  const [currentStep, setCurrentStep] = useState(0);
+  const [steps, setSteps] = useState(exampleSteps);
+
+  const handleBackClick = () => {
+    setCurrentStep(currentStep - 1);
+  };
+
+  // Handles next button click - only proceeds if current step is completed
+  const handleNextClick = () => {
+    const currentStepData = steps[currentStep];
+    if (currentStepData && currentStepData.isCompleted) {
+      setSteps(
+        steps.map((step, index) =>
+          index === currentStep + 1
+            ? { ...step, isSidebarEnabled: true, isNextDisabled: false }
+            : step,
+        ),
+      );
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handleSidebarNavigationItemClick = (step: number) => {
+    // Only allow clicking on enabled steps in the sidebar
+    if (steps[step].isSidebarEnabled) {
+      setCurrentStep(step);
+    }
+  };
+
+  const handleOnStepCompletion = (step: number) => {
+    setSteps(
+      steps.map((currentStep, index) => {
+        if (index === step) {
+          // Mark current step as completed
+          return { ...currentStep, isCompleted: true, isNextDisabled: false };
+        } else if (index === step + 1) {
+          // Enable the next step in the sidebar
+          return { ...currentStep, isSidebarEnabled: true };
+        } else {
+          return currentStep;
+        }
+      }),
+    );
+  };
+
+  const handleCompleteStepperClick = () => {
+    // if all steps are completed, then show a success message
+    if (steps.every((step) => step.isCompleted)) {
+      alert('Successfully completed all required steps!');
+    } else {
+      alert('You must complete all steps before finishing.');
+    }
+  };
+
+  return (
+    <Stepper
+      steps={steps}
+      currentStep={currentStep}
+      legendHeader={
+        <div>
+          <h1>Publish Agent To Gallery</h1>
+          <p className="subtitle-2 color-tertiary-200 mt-2 mb-6">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore.
+          </p>
+        </div>
+      }
+      legendFooter={
+        <p className="subtitle-2 color-tertiary-200 mt-6">Example of a legend footer</p>
+      }
+      onBackClick={handleBackClick}
+      onNextClick={handleNextClick}
+      onFinishClick={handleCompleteStepperClick}
+      onStepClick={handleSidebarNavigationItemClick}
+    >
+      <StepOne onCompletion={() => handleOnStepCompletion(0)} />
+      <StepTwo onCompletion={() => handleOnStepCompletion(1)} />
+      <StepThree onCompletion={() => handleOnStepCompletion(2)} />
+    </Stepper>
+  );
+};