ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.11

package/core/modules/steps/steps.scss

@@ -0,0 +1,158 @@
+.timeline-card .ant-card-body {
+  padding: 20px;
+  min-height: 400px;
+  position: relative; /* For positioning the arrow */
+}
+
+.timeline-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: all 0.3s ease;
+}
+
+.timeline-step {
+  display: flex;
+  cursor: pointer;
+}
+
+.timeline-step.active .step-number {
+  background: #3b82f6;
+  color: white;
+}
+
+.timeline-step.completed .step-number {
+  background:  #22c55e;
+  color: white;
+}
+
+.step-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 14px;
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #d9d9d9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.vertical-line {
+  width: 2px;
+  height: 40px;
+  background: #d9d9d9;
+}
+
+.step-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.step-title {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.step-main {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.toggle-arrow {
+  position: absolute;
+  top: 50%;
+  right: -12px; /* Position it just outside the card body padding */
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  z-index: 10;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #f5f5f5;
+  }
+}
+
+/* ============================
+   MOBILE & TABLET VIEW FIXES
+   ============================ */
+
+   
+
+@media (max-width: 992px) {   // iPad & tablets
+  .timeline-card .ant-card-body {
+    padding: 12px;
+    min-height: auto;
+  }
+
+  .timeline-sidebar {
+    flex-direction: row !important;
+    overflow-x: auto;
+    gap: 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .timeline-step {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .step-marker {
+    margin-right: 0;
+  }
+
+  .step-info {
+    text-align: center;
+  }
+
+  .toggle-arrow {
+    display: none !important; /* Hide collapse icon */
+  }
+}
+
+@media (max-width: 768px) {   // mobile screens
+  .timeline-sidebar {
+    gap: 8px;
+  }
+
+  .step-number {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .step-title {
+    font-size: 11px;
+  }
+
+  .step-main {
+    font-size: 13px;
+  }
+
+  .vertical-line {
+    display: none;
+  }
+
+  /* Card layout full width */
+  .timeline-card .ant-card-body {
+    padding: 10px;
+  }
+}
+

package/core/modules/steps/timeline.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Skeleton } from "antd";
+import { LeftOutlined, RightOutlined } from "@ant-design/icons";
+import { Card } from "../../lib";
+
+export default function TimelinePanel({
+  loading,
+  steps,
+  activeStep,
+  timelineCollapsed,
+  handleTimelineClick,
+  setTimelineCollapsed
+}) {
+  return (
+    <Card className="timeline-card">
+      {loading ? (
+        <Skeleton active />
+      ) : (
+        <div className={`timeline-sidebar ${timelineCollapsed ? "collapsed" : ""}`}>
+          {steps.map((step, index) => (
+            <div
+              key={step.step_id}
+              className={`timeline-step 
+                ${index === activeStep ? "active" : ""} 
+                ${index < activeStep ? "completed" : ""}`}
+              onClick={() => handleTimelineClick(index)}
+            >
+              <div className="step-marker">
+                <div className="step-number">{index + 1}</div>
+                {index < steps.length - 1 && <div className="vertical-line"></div>}
+              </div>
+
+              {!timelineCollapsed && (
+                <div className="step-info">
+                  <div className="step-title">Step {index + 1}</div>
+                  <div className="step-main">{step.step_name}</div>
+                </div>
+              )}
+            </div>
+          ))}
+
+          <div className="toggle-arrow" onClick={() => setTimelineCollapsed(!timelineCollapsed)}>
+            {timelineCollapsed ? <RightOutlined /> : <LeftOutlined />}
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.24",
+  "version": "2.4.25-dev.11",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"
@@ -19,7 +19,7 @@
     "build": "webpack --mode production",
     "deploy": "gh-pages -d examples/build",
     "quick-deploy": "git status && git add . && git commit -m \"Theme Updates\" && git push",
-    "release": "git tag -a v2023-v2.0.91 -m \"Theme Updates\" && npm run quick-deploy && npm publish",
+    "release": "git tag -a v2023-v2.0.92 -m \"Theme Updates\" && npm run quick-deploy && npm publish",
     "quick-commit": "git status && git add . && git commit -m 'Saving changes after deploying' && git push ",
     "publish-demo": "npm run build && npm run deploy",
     "lint": "eslint core",