@stokr/components-library 3.0.60 → 3.0.62

package/dist/components/2FA/enable-2fa-flow.js

@@ -83,7 +83,7 @@ const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresR
       subTitleLeft: "Your log in 2FA authentication is now set",
       textRight: "You will now be asked for your 2FA code next time you log in."
     }
-  ) : /* @__PURE__ */ jsx(StepControllerProvider, { children: /* @__PURE__ */ jsx(StepControllerConsumer, { children: (stepController) => {
+  ) : /* @__PURE__ */ jsx(StepControllerProvider, { initialStep: "app", children: /* @__PURE__ */ jsx(StepControllerConsumer, { children: (stepController) => {
     const prevStepIndex = stepController.activeStepIndex - 1;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(

package/dist/components/2FA/main-flow.js

@@ -25,7 +25,10 @@ const Main2FAFlow = ({
   subtitle = "Protect your account with an additional layer of security to log in",
   showSwitch = true,
   customComponent,
-  onFlowClose
+  onFlowClose,
+  recentLoginTitle = "LOG IN AGAIN",
+  recentLoginSubtitle = "To continue please log in again and set up your two factor authentication",
+  recentLoginCTA = "Log in again"
 }) => {
   const { user, checkMfaEnrollment, userMfaEnrollment, generateTotpSecret } = useContext(AuthContext);
   const [isFlowopen, setIsFlowOpen] = useState({
@@ -224,9 +227,9 @@ const Main2FAFlow = ({
         onClick: () => {
           onLoginAgainClick?.();
         },
-        titleText: "LOG IN AGAIN",
-        subTitleLeft: "To enable your log in two factor authentication please log in again",
-        buttonText: "Log in again"
+        titleText: recentLoginTitle,
+        subTitleLeft: recentLoginSubtitle,
+        buttonText: recentLoginCTA
       }
     ) }) }),
     !user && /* @__PURE__ */ jsx(stdin_default$5, {})

package/dist/components/HeroBlock/HeroVideoBlock.js

@@ -2,6 +2,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
 import { useRef, useState, useCallback, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
+const ViewportWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
 const VideoContainer = styled.div`
   position: relative;
   width: 100%;
@@ -21,7 +25,7 @@ const CLOUDINARY_VERSION = "v1745923531";
 const CLOUDINARY_PUBLIC_ID = "Static/Hero_section_video_kuatj1";
 const VIDEO_SRC_DESKTOP = `${CLOUDINARY_BASE}/f_auto,q_auto:good,vc_auto,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.mp4`;
 const VIDEO_SRC_MOBILE = `${CLOUDINARY_BASE}/f_auto,q_auto:good,vc_auto,w_1280,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.mp4`;
-const VIDEO_POSTER = `${CLOUDINARY_BASE}/so_0,f_auto,q_auto:good,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.jpg`;
+const VIDEO_POSTER = `${CLOUDINARY_BASE}/so_auto,f_jpg,q_auto:good,w_1920,c_limit/${CLOUDINARY_VERSION}/${CLOUDINARY_PUBLIC_ID}.jpg`;
 const shouldLoadVideo = () => {
   if (typeof navigator === "undefined") return true;
   const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
@@ -105,7 +109,7 @@ const HeroVideoBlock = () => {
       document.removeEventListener("visibilitychange", handleDocVisibilityChange);
     };
   }, [playVideo]);
-  return /* @__PURE__ */ jsx("div", { ref: windowViewportRef, children: /* @__PURE__ */ jsx(VideoContainer, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ViewportWrapper, { ref: windowViewportRef, children: /* @__PURE__ */ jsx(VideoContainer, { children: /* @__PURE__ */ jsx(
     VideoBackground,
     {
       ref: videoRef,

package/dist/components/StepController/StepController.js

@@ -1,32 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { PureComponent, Fragment } from "react";
 import PropTypes from "prop-types";
-import { Transition } from "../../utils/transition.js";
 import { StepsProgressContainer, StepContainer } from "./StepController.styles.js";
 import stdin_default$1 from "./StepControllerProgress.js";
-const timeout = 300;
-const getTransitionStyles = {
-  entering: {
-    position: "absolute",
-    opacity: 0
-  },
-  entered: {
-    transition: `opacity ${timeout}ms ease-in-out`,
-    opacity: 1
-  },
-  exiting: {
-    transition: `opacity ${timeout}ms ease-in-out`,
-    opacity: 0
-  }
-};
 class StepController extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.stepRef = React__default.createRef();
-  }
   componentDidMount() {
-    const { changeStep, stepsProgressList } = this.props;
-    changeStep(stepsProgressList[0].id);
+    const { changeStep, stepsProgressList, currentStep } = this.props;
+    if (!currentStep && stepsProgressList[0]?.id) {
+      changeStep(stepsProgressList[0].id);
+    }
   }
   render() {
     const { children, stepsProgressList, currentStep, activeStepIndex, doneStepsIndexes, touchedStepsIndexes } = this.props;
@@ -40,33 +22,12 @@ class StepController extends PureComponent {
           stepsProgressList
         }
       ) }),
-      /* @__PURE__ */ jsx(StepContainer, { children: /* @__PURE__ */ jsx(
-        Transition,
-        {
-          timeout: {
-            enter: timeout,
-            exit: timeout
-          },
-          nodeRef: this.stepRef,
-          children: (status) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: this.stepRef,
-              style: {
-                height: "100%",
-                ...getTransitionStyles[status]
-              },
-              children: React__default.Children.map(children, (child) => {
-                if (child.props.id === currentStep && React__default.isValidElement(child)) {
-                  return /* @__PURE__ */ jsx(Fragment, { children: child }, child.props.id);
-                }
-                return null;
-              })
-            }
-          )
-        },
-        currentStep
-      ) })
+      /* @__PURE__ */ jsx(StepContainer, { children: /* @__PURE__ */ jsx("div", { style: { height: "100%" }, children: React__default.Children.map(children, (child) => {
+        if (child.props.id === currentStep && React__default.isValidElement(child)) {
+          return /* @__PURE__ */ jsx(Fragment, { children: child }, child.props.id);
+        }
+        return null;
+      }) }) })
     ] });
   }
 }

package/dist/components/StepController/StepControllerContext.js

@@ -3,14 +3,18 @@ import React__default, { Component } from "react";
 import PropTypes from "prop-types";
 const StepControllerContext = React__default.createContext();
 class StepControllerProvider extends Component {
-  state = {
-    currentStep: "",
-    prevStep: "",
-    prevStepIndex: null,
-    activeStepIndex: 0,
-    doneStepsIndexes: [],
-    touchedStepsIndexes: []
-  };
+  constructor(props) {
+    super(props);
+    const { initialStep = "" } = props;
+    this.state = {
+      currentStep: initialStep,
+      prevStep: "",
+      prevStepIndex: null,
+      activeStepIndex: 0,
+      doneStepsIndexes: [],
+      touchedStepsIndexes: initialStep ? [0] : []
+    };
+  }
   changeStep = (stepName, activeStep = null, doneStep = null) => {
     const { activeStepIndex, doneStepsIndexes, touchedStepsIndexes } = this.state;
     const nextActiveStep = activeStep === null ? activeStepIndex : activeStep;
@@ -55,7 +59,8 @@ class StepControllerProvider extends Component {
   }
 }
 StepControllerProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  initialStep: PropTypes.string
 };
 const StepControllerConsumer = StepControllerContext.Consumer;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.60",
+  "version": "3.0.62",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",