[ Feature ]:: steps widget (#3200)

* tabs event

* completed event firing on selection tab

* steps widget basic structure & code

* active item logic

* logic for currentstep

* logic for steps theme

* event onSelect handled and exposed currentStepId

* fixing tooltip

* logic for colour updated

* updates

* bugfixes and color theme fix

* darkmode fixes

* some bugfixes

* cleanup

* reverting

* reverting unwanted change

* updating green theme

* pr changes : style changes

* pr change :: color style made dynamic :rocket

* style fix 🚀

* docs updated

* bugfix

docs/docs/widgets/steps.md

@@ -0,0 +1,70 @@
+---
+id: steps
+title: Steps
+---
+# Steps
+
+Steps are used to guide users through complex processes, making them easier and more intuitive.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Star rating Widget](/img/widgets/steps/steps.png)
+
+</div>
+
+
+### Steps
+
+This property lets you add and the steps.
+
+
+```{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1},{ name: 'step 2', tooltip: 'some tooltip', id: 2},{ name: 'step 3', tooltip: 'some tooltip', id: 3},{ name: 'step 4', tooltip: 'some tooltip', id: 4},{ name: 'step 5', tooltip: 'some tooltip', id: 5}]}}```
+
+add another object to add one more step.
+
+### Current step
+
+This property lets you select the current step you want to be highlighted.
+
+### Steps selectable
+
+This property when disabled will disable selection of steps.
+
+
+## Events
+
+### On select
+This event is fired whenever the user selects any step.
+
+## Layout
+
+### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+### Theme
+
+You can change the theme of widget by selecting available themes from dropdown.
+
+
+### Colour
+
+You can change the  color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
+
+
+### Text Colour
+
+You can change the  text color of the widget by entering the Hex color code or choosing a color of your choice from the color picker.
+
+### Visibility
+
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/sidebars.js

@@ -129,6 +129,7 @@ const sidebars = {
         'widgets/spinner',
         'widgets/star',
         'widgets/statistics',
+        'widgets/steps',
         'widgets/table',
         'widgets/tabs',
         'widgets/tags',

frontend/assets/images/icons/widgets/steps.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dots" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="5" cy="12" r="1" />
+  <circle cx="12" cy="12" r="1" />
+  <circle cx="19" cy="12" r="1" />
+</svg>

frontend/src/Editor/Box.jsx

@@ -42,6 +42,7 @@ import { ButtonGroup } from './Components/ButtonGroup';
 import { CustomComponent } from './Components/CustomComponent/CustomComponent';
 import { VerticalDivider } from './Components/verticalDivider';
 import { PDF } from './Components/PDF';
+import { Steps } from './Components/Steps';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import '@/_styles/custom.scss';
 import { resolveProperties, resolveStyles, resolveGeneralProperties } from './component-properties-resolution';
@@ -90,6 +91,7 @@ const AllComponents = {
   CustomComponent,
   VerticalDivider,
   PDF,
+  Steps,
 };
 
 export const Box = function Box({

frontend/src/Editor/Components/Steps.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+
+export const Steps = function Button({ properties, styles, fireEvent, setExposedVariable, height }) {
+  const { currentStep, stepsSelectable, steps } = properties;
+  const { color, theme, visibility } = styles;
+
+  const [activeStep, setActiveStep] = useState(null);
+
+  const dynamicStyle = {
+    '--bgColor': styles.color,
+    '--textColor': styles.textColor,
+  };
+  const activeStepHandler = (id) => {
+    const active = steps.filter((item) => item.id == id);
+    setExposedVariable('currentStepId', active[0].id).then(() => fireEvent('onSelect'));
+    setActiveStep(active[0].id);
+  };
+
+  useEffect(() => {
+    setActiveStep(currentStep);
+    setExposedVariable('currentStepId', currentStep).then(() => fireEvent('onSelect'));
+  }, [currentStep]);
+
+  return (
+    visibility && (
+      <div
+        className={`steps ${theme == 'numbers' && 'steps-counter '}`}
+        style={{ color: `${styles.textColor}`, height }}
+      >
+        {steps?.map((item) => (
+          <a
+            key={item.id}
+            href="#"
+            className={`step-item ${item.id == activeStep && 'active'} ${!stepsSelectable && 'step-item-disabled'}  ${
+              color && `step-${color}`
+            }`}
+            data-bs-toggle="tooltip"
+            title={item?.tooltip}
+            onClick={() => stepsSelectable && activeStepHandler(item.id)}
+            style={dynamicStyle}
+          >
+            {theme == 'titles' && item.name}
+          </a>
+        ))}
+      </div>
+    )
+  );
+};

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -2318,4 +2318,70 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
       },
     },
   },
+
+  {
+    name: 'Steps',
+    displayName: 'Steps',
+    description: 'Steps',
+    component: 'Steps',
+    properties: {
+      steps: { type: 'code', displayName: 'Steps' },
+      currentStep: { type: 'code', displayName: 'Current step' },
+      stepsSelectable: { type: 'toggle', displayName: 'Steps selectable' },
+    },
+    defaultSize: {
+      width: 22,
+      height: 38,
+    },
+    others: {
+      showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
+      showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
+    },
+    events: {
+      onSelect: { displayName: 'On onSelect' },
+    },
+    styles: {
+      color: {
+        type: 'color',
+        displayName: 'Color',
+      },
+      textColor: {
+        type: 'color',
+        displayName: 'Text color',
+      },
+      theme: {
+        type: 'select',
+        displayName: 'Theme',
+        options: [
+          { name: 'titles', value: 'titles' },
+          { name: 'numbers', value: 'numbers' },
+          { name: 'plain', value: 'plain' },
+        ],
+      },
+      visibility: { type: 'toggle', displayName: 'Visibility' },
+    },
+    exposedVariables: {
+      currentStepId: '3',
+    },
+    definition: {
+      others: {
+        showOnDesktop: { value: '{{true}}' },
+        showOnMobile: { value: '{{false}}' },
+      },
+      properties: {
+        steps: {
+          value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1},{ name: 'step 2', tooltip: 'some tooltip', id: 2},{ name: 'step 3', tooltip: 'some tooltip', id: 3},{ name: 'step 4', tooltip: 'some tooltip', id: 4},{ name: 'step 5', tooltip: 'some tooltip', id: 5}]}}`,
+        },
+        currentStep: { value: '{{3}}' },
+        stepsSelectable: { value: true },
+      },
+      events: [],
+      styles: {
+        visibility: { value: '{{true}}' },
+        theme: { value: 'titles' },
+        color: { value: '#4d72fa' },
+        textColor: { value: '#3e525b' },
+      },
+    },
+  },
 ];

frontend/src/_styles/theme.scss

@@ -5420,3 +5420,35 @@ word-break: break-all;
  }
 
 // sso end
+
+// steps-widget
+a.step-item-disabled {
+  text-decoration: none;
+}
+.steps{
+  overflow: hidden;
+  margin: 0rem !important;
+}
+.step-item.active ~ .step-item:after, .step-item.active ~ .step-item:before {
+  background: #f3f5f5 !important;
+}
+.step-item.active:before {
+  background: #fff !important;
+}
+.steps .step-item.active:before {
+    border-color: #b4b2b2 !important;
+}
+.steps-item{
+  color: var(--textColor) !important;
+}
+.step-item:before{
+  background: var(--bgColor) !important;
+  // remaining code
+}
+.step-item:after{
+  background: var(--bgColor) !important;
+}
+.step-item.active ~ .step-item {
+  color: var(--textColor) !important;;
+}
+// steps-widget end