New component stepper

site/content/docs/react/components/stepper/a-ss.html

@@ -0,0 +1,12 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-properties">Properties</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-events">Events</a>
+</li>

site/content/docs/react/components/stepper/index-ss.html

@@ -0,0 +1,21 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#basic">Basic example </a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#controlled-step">Controlled step</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#vertical">Vertical</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#no-editable">No editable</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#linear">Linear</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#linear-custom-validation">Linear with custom validation</a>
+</li>

site/static/search-react.json

@@ -137,6 +137,12 @@
     "keywords": ["loading"],
     "category": "Components"
   },
+  {
+    "href": "/docs/react/components/stepper/",
+    "name": "Stepper",
+    "keywords": ["stepper", "progress", "steps", "wizard"],
+    "category": "Components"
+  },
   {
     "href": "/docs/react/forms/checkbox/",
     "name": "Checkbox",

src/demo/pages.tsx

@@ -58,6 +58,7 @@ import ToastsPage from "./pages/components/toasts/ToastsPage";
 import SelectPage from "./pages/forms/select/SelectPage";
 import CarouselPage from "./pages/components/carousel/CarouselPage";
 import VideoCarouselPage from "./pages/components/video-carousel/VideoCarouselPage";
+import StepperPage from "./pages/components/stepper/StepperPage";
 
 //examples pages
 import ButtonExamples from "./pages/components/buttons/exampleList";
@@ -94,6 +95,7 @@ import ToastsExamples from "./pages/components/toasts/exampleList";
 import SelectExamples from "./pages/forms/select/exampleList";
 import CarouselExamples from "./pages/components/carousel/exampleList";
 import VideoCarouselExamples from "./pages/components/video-carousel/exampleList";
+import StepperExamples from "./pages/components/stepper/exampleList";
 
 interface Pages {
   name: string;
@@ -197,6 +199,11 @@ const componentsPages: Pages[] = [
     path: "/components/video-carousel",
     element: <VideoCarouselPage />,
   },
+  {
+    name: "stepper",
+    path: "/components/stepper",
+    element: <StepperPage />,
+  },
 ];
 
 const contentStylesPages: Pages[] = [
@@ -408,6 +415,7 @@ export const examplesPages: Pages[] = [
   ...SelectExamples,
   ...CarouselExamples,
   ...VideoCarouselExamples,
+  ...StepperExamples,
 ];
 
 export default demoPages;

src/demo/pages/components/stepper/StepperPage.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import StepperControlledStep from "./examples/StepperControlledStep";
+import StepperVerticalExample from "./examples/StepperVerticalExample";
+import StepperBasicExample from "./examples/StepperBasicExample";
+import StepperNoEditable from "./examples/StepperNoEditable";
+import StepperLinearExample from "./examples/StepperLinear";
+import StepperLinearCustomValidationExample from "./examples/StepperLinearCustomValidation";
+
+const StepperPage = () => {
+  return (
+    <div
+      className="
+          max-w-[540px] sm:max-w-[604px] md:max-w-[720px] lg:max-w-[972px]
+          xl:max-w-full xl:px-12 2xl:max-w-[1400px] mx-auto
+         flex"
+    >
+      <div className="flex w-full flex-col">
+        <h2 className="text-2xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6 h-">
+          Basic example
+        </h2>
+        <div className="rounded-lg border dark:border-neutral-600 p-4">
+          <StepperBasicExample />
+        </div>
+
+        <hr className="my-10" />
+
+        <h2 className="text-2xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
+          Controlled active step
+        </h2>
+
+        <div className="rounded-lg border dark:border-neutral-600 p-4">
+          <StepperControlledStep />
+        </div>
+
+        <hr className="my-10" />
+
+        <h2 className="text-2xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
+          Vertical stepper
+        </h2>
+
+        <div className="rounded-lg border dark:border-neutral-600 p-4 w-1/2">
+          <StepperVerticalExample />
+        </div>
+
+        <hr className="my-10" />
+
+        <h2 className="text-2xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
+          Stepper with no editable steps
+        </h2>
+
+        <div className="rounded-lg border dark:border-neutral-600 p-4">
+          <StepperNoEditable />
+        </div>
+
+        <hr className="my-10" />
+
+        <h2 className="text-2xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
+          Linear stepper
+        </h2>
+
+        <div className="rounded-lg border dark:border-neutral-600 p-4">
+          <StepperLinearExample />
+        </div>
+
+        <hr className="my-10" />
+
+        <h2 className="text-2xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
+          Linear stepper with custom validation
+        </h2>
+
+        <div className="rounded-lg border dark:border-neutral-600 p-4">
+          <StepperLinearCustomValidationExample />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StepperPage;

src/demo/pages/components/stepper/exampleList.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import StepperBasicExample from "./examples/StepperBasicExample";
+import StepperControlledStep from "./examples/StepperControlledStep";
+import StepperVerticalExample from "./examples/StepperVerticalExample";
+import StepperLinearExample from "./examples/StepperLinear";
+import StepperLinearCustomValidationExample from "./examples/StepperLinearCustomValidation";
+import StepperNoEditable from "./examples/StepperNoEditable";
+
+export default [
+  {
+    name: "StepperBasicExample",
+    path: "/components/stepper/examples/stepper-basic-example",
+    element: <StepperBasicExample />,
+  },
+  {
+    name: "StepperControlledStep",
+    path: "/components/stepper/examples/stepper-controlled-step",
+    element: <StepperControlledStep />,
+  },
+  {
+    name: "StepperVerticalExample",
+    path: "/components/stepper/examples/stepper-vertical-example",
+    element: <StepperVerticalExample />,
+  },
+  {
+    name: "StepperNoEditable",
+    path: "/components/stepper/examples/stepper-no-editable-example",
+    element: <StepperNoEditable />,
+  },
+  {
+    name: "StepperLinearExample",
+    path: "/components/stepper/examples/stepper-linear-example",
+    element: <StepperLinearExample />,
+  },
+  {
+    name: "StepperLinearCustomValidationExample",
+    path: "/components/stepper/examples/stepper-linear-custom-validation-example",
+    element: <StepperLinearCustomValidationExample />,
+  },
+];

src/demo/pages/components/stepper/examples/StepperBasicExample.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { TEStepper, TEStepperStep } from "tw-elements-react";
+
+export default function StepperBasicExample(): JSX.Element {
+  return (
+    <TEStepper>
+      <TEStepperStep headText="Step 1" headIcon="1">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </TEStepperStep>
+      <TEStepperStep headText="Step 2" headIcon={"2"}>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat.
+      </TEStepperStep>
+      <TEStepperStep headText="Step 3" headIcon={"3"}>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+        dolore eu fugiat nulla pariatur.
+      </TEStepperStep>
+    </TEStepper>
+  );
+}

src/demo/pages/components/stepper/examples/StepperControlledStep.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { TEStepper, TEStepperStep } from "tw-elements-react";
+
+export default function StepperControlledStep(): JSX.Element {
+  const [activeStep, setActiveStep] = useState<number>(1);
+
+  return (
+    <TEStepper
+      activeStep={activeStep}
+      onChange={(_, next) => {
+        setActiveStep(next);
+      }}
+    >
+      <TEStepperStep headText="Step 1" headIcon={"1"}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </TEStepperStep>
+      <TEStepperStep headText="Step 2" headIcon={"2"}>
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+        ut aliquip ex ea commodo consequat.
+      </TEStepperStep>
+      <TEStepperStep headText="Step 3" headIcon={"3"}>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+        dolore eu fugiat nulla pariatur.
+      </TEStepperStep>
+    </TEStepper>
+  );
+}

src/demo/pages/components/stepper/examples/StepperLinear.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { TEStepper, TEStepperStep, TEInput } from "tw-elements-react";
+
+export default function StepperLinearExample() {
+  return (
+    <form>
+      <TEStepper linear>
+        <TEStepperStep headText="Step 1" headIcon={"1"}>
+          <h3 className="text-lg font-semibold mb-4">
+            Enter your email and start the adventure of your life!
+          </h3>
+
+          <div className="w-1/2 mx-auto">
+            <TEInput type="email" label="Email (required)" required />
+          </div>
+        </TEStepperStep>
+        <TEStepperStep headText="Step 2" headIcon={"2"}>
+          <h3 className="text-lg font-semibold mb-4">
+            You're almost there! Just a few more details!
+          </h3>
+          <div className="w-1/2 mx-auto mb-4">
+            <TEInput label="First Name" autoComplete="given-name" required />
+          </div>
+          <div className="w-1/2 mx-auto mb-4">
+            <TEInput label="Last Name" autoComplete="family-name" required />
+          </div>
+
+          <div className="w-1/2 mx-auto mb-4">
+            <TEInput label="Phone" autoComplete="tel" required />
+          </div>
+        </TEStepperStep>
+        <TEStepperStep headText="Step 3" headIcon={"3"}>
+          <div className="text-center mt-10 mb-10">
+            <h3 className="text-lg font-semibold mb-4">
+              You're all set! We will contact you soon!
+            </h3>
+          </div>
+        </TEStepperStep>
+      </TEStepper>
+    </form>
+  );
+}