linear-react-components-ui 1.1.20-beta.34 → 1.1.20-beta.36

package/lib/assets/styles/wizard.scss

@@ -4,8 +4,13 @@
   .wizard-wrapper {
     .wizard-content {
       display: flex !important;
-      flex-direction: column;
-      .wizard-progresbar {
+      &:has(.wizard-progressbar[data-position="top"]) {
+        flex-direction: column;
+      }
+      &:has(.wizard-progressbar[data-position="left"]) {
+        flex-direction: row;
+      }
+      .wizard-progressbar[data-position="top"] {
         width: 100%;
         display: grid;
         grid-auto-columns: 1fr;
@@ -120,6 +125,87 @@
           }
         }
       }
+      .wizard-progressbar[data-position="left"] {
+        width: 166px;
+        display: flex;
+        flex-direction: column;
+        gap: 30px;
+        border-right: 1px solid #ccc;
+        padding-right: 16px;
+        margin-right: 10px;
+        > .title {
+          font-size: 16px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          position: relative;
+          text-align: center;
+
+          & + .title {
+            &:before {
+              content: "";
+              position: absolute;
+              top: -34px;
+              left: 17px;
+              width: 3px;
+              height: 100%;
+              background-color: #dadada;
+            }
+          }
+
+          &[data-completed="true"] {
+            & + .title:before {
+              background-color: $success-color !important;
+            }
+            > .step {
+              > .number {
+                background-color: $success-color;
+                border-color: $success-color;
+              }
+            }
+          }
+          &[data-disabled="true"] {
+            .step {
+              .number {
+                background-color: #dadada;
+                border-color: #dadada;
+              }
+            }
+            .step-title {
+              color: #dadada;
+            }
+          }
+          > .step {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            > .number {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 20px;
+              font-weight: 600;
+              width: 36px;
+              height: 36px;
+              border-radius: 100%;
+              color: #fff;
+              background-color: $color-light-dark;
+              z-index: 1;
+              transition: all 0.2s ease-in-out;
+              border: 2px solid $color-light-dark;
+            }
+          }
+          > .step-title {
+            max-width: 150px;
+            overflow: hidden;
+            font-weight: 500;
+            color: $font-color-soft;
+          }
+        }
+      }
     }
   }
 }

package/lib/dialog/types.d.ts

@@ -81,6 +81,7 @@ interface WizardComponentProps extends Omit<IFormProps, 'content'> {
     title?: string;
     handlerClose?: () => void;
     controls: WizardControls;
+    position?: 'top' | 'left';
 }
 interface WizardStepComponentProps {
     children: React.ReactNode;

package/lib/dialog/wizard/index.d.ts

@@ -8,6 +8,6 @@ import '../../icons/helper.js';
 
 declare const WizardContext: React__default.Context<WizardControls | null>;
 declare const useWizardContext: () => WizardControls | null;
-declare function Wizard({ children, controls, showProgressbar, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
+declare function Wizard({ children, controls, showProgressbar, position, ...dialogProps }: Readonly<WizardComponentProps>): JSX.Element;
 
 export { Wizard as Container, WizardContext, Wizard as default, useWizardContext };

package/lib/dialog/wizard/index.js

@@ -25,7 +25,7 @@ var _progressbar = require("./progressbar");
 require("../../assets/styles/wizard.scss");
 var _step = require("./step");
 var _useWizard = require("./useWizard");
-const _excluded = ["children", "controls", "showProgressbar"];
+const _excluded = ["children", "controls", "showProgressbar", "position"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -39,7 +39,8 @@ function Wizard(_ref) {
   let {
       children,
       controls,
-      showProgressbar = true
+      showProgressbar = true,
+      position = 'top'
     } = _ref,
     dialogProps = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -66,7 +67,8 @@ function Wizard(_ref) {
     wrapperClassName: "wizard-wrapper",
     contentClassName: "wizard-content"
   }, dialogProps), showProgressbar && /*#__PURE__*/_react.default.createElement(_progressbar.Progressbar, {
-    stepsTitle: stepsTitle
+    stepsTitle: stepsTitle,
+    position: position
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "wizard-body"
   }, currentStepElement)));

package/lib/dialog/wizard/progressbar.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<{
+declare function Progressbar({ customClass, customStyle, stepsTitle, position, }: Readonly<{
     customClass?: string;
     stepsTitle: {
         title: string;
@@ -8,6 +8,7 @@ declare function Progressbar({ customClass, customStyle, stepsTitle }: Readonly<
         completed: boolean;
     }[];
     customStyle?: CSSProperties;
+    position?: 'top' | 'left';
 }>): JSX.Element;
 
 export { Progressbar };

package/lib/dialog/wizard/progressbar.js

@@ -11,7 +11,8 @@ function Progressbar(_ref) {
   let {
     customClass,
     customStyle,
-    stepsTitle
+    stepsTitle,
+    position = 'top'
   } = _ref;
   const context = (0, _.useWizardContext)();
   if (!context) throw new Error('WizardProgressbar must be used within a Wizard component');
@@ -19,8 +20,9 @@ function Progressbar(_ref) {
     currentStep
   } = context;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `wizard-progresbar ${customClass}`,
-    style: customStyle
+    className: `wizard-progressbar ${customClass}`,
+    style: customStyle,
+    "data-position": position
   }, stepsTitle.map(step => /*#__PURE__*/_react.default.createElement("div", {
     key: step.number,
     className: "title",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linear-react-components-ui",
-  "version": "1.1.20-beta.34",
+  "version": "1.1.20-beta.36",
   "description": "Linear Sistemas ReactJs Components",
   "main": "lib/index.js",
   "module": "lib/index.cjs",