Stepper component

example/src/components/index.ts

@@ -29,3 +29,4 @@ export { ButtonGroupDemo } from './ButtonGroupDemo';
 export { CardDemo } from './CardDemo';
 export { SkeletonDemo } from './SkeletonDemo';
 export { LoadingSpinnerDemo } from './LoadingSpinnerDemo';
+export { default as StepperDemo } from './StepperDemo';

example/src/components/stepper.scss

@@ -0,0 +1,121 @@
+.dcx-stepper {
+  width: 100%;
+  margin-bottom: 40px;
+}
+
+.dcx-horizontal-stepper .dcx-header-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+}
+
+.dcx-vertical-stepper .dcx-header-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.dcx-header-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.dcx-step-header {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+}
+
+.dcx-step-header .step-number {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #d1d0ce;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.dcx-step-header .step-number.active {
+  background-color: #1976d2;
+}
+
+.dcx-step-content {
+  display: none;
+}
+
+.dcx-step-content.dcx-visible-content {
+  display: block;
+}
+
+.dcx-content-container {
+  margin-top: 20px;
+}
+
+.step-button {
+  padding: 10px 20px;
+  font-size: 14px;
+  background-color: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 0 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
+}
+
+.step-button:hover {
+  background-color: #0056b3;
+}
+
+.step-button.submit {
+  background-color: #28a745;
+}
+
+.step-button.submit:hover {
+  background-color: #218838;
+}
+
+.custom-separator {
+  margin: 0 10px;
+  border: 0;
+  height: 1px;
+  background: #ccc;
+}
+
+.form-label {
+  display: flex;
+  flex-direction: column;
+  font-weight: bold;
+}
+
+.form-input,
+.form-select,
+.form-textarea {
+  padding: 8px;
+  margin-top: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.form-checkbox {
+  margin-top: 10px;
+}
+
+.custom-separator {
+  width: 100%;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 10px 0;
+}

example/src/index.tsx

@@ -27,7 +27,8 @@ import {
   TableDemo,
   ToggleDemo,
   TooltipDemo,
-  LoadingSpinnerDemo
+  LoadingSpinnerDemo,
+  StepperDemo,
 } from './components';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
@@ -83,6 +84,7 @@ const App = () => (
         <Route path="/paginator" element={<PaginatorDemo />} />
         <Route path="/skeleton" element={<SkeletonDemo />} />
         <Route path="/loadingSpinner" element={<LoadingSpinnerDemo />} />
+        <Route path="/stepper" element={<StepperDemo />} />
       </Routes>
     </BrowserRouter>
   </div>

src/index.ts

@@ -40,3 +40,4 @@ export * from './card';
 export * from './paginator';
 export * from './skeleton';
 export * from './spinner';
+export * from './stepper';

src/stepper/Step.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type StepProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * The children prop is an array of JSX elements that represent the content of the step.
+   */
+  children: JSX.Element[];
+};
+
+export const Step = ({ children, ...rest }: StepProps) => (
+  <div {...rest}>
+    {children}
+  </div>
+);

src/stepper/StepContent.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { classNames } from '../common';
+
+export type StepContentProps = {
+  /**
+   * it will allow to specify the content you prefer
+   */
+  children?: any;
+  /**
+   * will allow to style the content of each step
+   */
+  className?: string;
+  /**
+   * allow to show hide the content
+   */
+  visible?: boolean;
+};
+
+export const StepContent = ({
+  children,
+  className,
+  visible,
+}: StepContentProps) => (
+  <div
+    role="tabpanel"
+    className={classNames(['dcx-stepper-content', className])}
+    style={{
+      display: visible ? 'inherit' : 'none',
+    }}
+  >
+    {children}
+  </div>
+);

src/stepper/StepHeader.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useStepper } from './UseStepper';
+import { classNames } from '../common';
+export type StepHeaderProps = {
+  /**
+   * this will allow to pass a custom content to the header like a span or other.
+   * The container will be a button
+   */
+  children?: JSX.Element;
+  /**
+   *
+   */
+  headerClassName?: string;
+  /**
+   * you can define a custom separator between each steps
+   */
+  separator?: JSX.Element;
+  /**
+   * internal usage to determine the content that need to be displayed
+   **/
+  _index?: number;
+};
+
+
+export const StepHeader = ({
+  _index,
+  separator,
+  children,
+  headerClassName,
+  ...props
+}: any) => {
+  const { changeActiveStep } = useStepper();
+  const headerClassNames = classNames([
+    'dcx-stepper-header-content',
+    headerClassName,
+  ]);
+  return (
+    <>
+      <button
+        role="tab"
+        className={headerClassNames}
+        onClick={() => changeActiveStep(_index)}
+        {...props}
+      >
+        {children}
+      </button>
+      <>{separator}</>
+    </>
+  );
+};