feat(Modal): footers for new Modal component (#2553)

packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss

@@ -0,0 +1,12 @@
+.primary {
+  order: 2;
+
+  &:only-child {
+    margin-left: auto;
+  }
+}
+
+.secondary {
+  order: 1;
+  margin-left: auto;
+}

packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import ModalFooterBase from "../ModalFooterBase/ModalFooterBase";
+import { getTestId } from "../../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../../tests/constants";
+import { ModalFooterProps } from "./ModalFooter.types";
+import styles from "./ModalFooter.module.scss";
+
+const ModalFooter = forwardRef(
+  (
+    { primaryButton, secondaryButton, renderSideAction, "data-testid": dataTestId, className, id }: ModalFooterProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const primary = { ...primaryButton, className: cx(primaryButton.className, styles.primary) };
+    const secondary = secondaryButton
+      ? { ...secondaryButton, className: cx(secondaryButton.className, styles.secondary) }
+      : undefined;
+    return (
+      <ModalFooterBase
+        ref={ref}
+        className={className}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_FOOTER, id)}
+        primaryButton={primary}
+        secondaryButton={secondary}
+        renderAction={renderSideAction}
+      />
+    );
+  }
+);
+
+export default ModalFooter;

packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
+
+export interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAction"> {
+  renderSideAction?: React.ReactNode;
+}

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx → packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx

@@ -10,6 +10,8 @@ const ModalFooterBase = forwardRef(
     { primaryButton, secondaryButton, renderAction, id, className, "data-testid": dataTestId }: ModalFooterBaseProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
+    const { text: primaryButtonText, ...primaryButtonProps } = primaryButton;
+    const { text: secondaryButtonText, ...secondaryButtonProps } = secondaryButton || {};
     return (
       <Flex
         ref={ref}
@@ -19,12 +21,10 @@ const ModalFooterBase = forwardRef(
         className={cx(styles.footer, className)}
         data-testid={dataTestId}
       >
-        <Button onClick={primaryButton.onClick} className={primaryButton.className}>
-          {primaryButton.text}
-        </Button>
+        <Button {...primaryButtonProps}>{primaryButtonText}</Button>
         {secondaryButton && (
-          <Button kind={Button.kinds.TERTIARY} className={secondaryButton.className} onClick={secondaryButton.onClick}>
-            {secondaryButton.text}
+          <Button {...secondaryButtonProps} kind={Button.kinds.TERTIARY}>
+            {secondaryButtonText}
           </Button>
         )}
         {renderAction}

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts → packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts

@@ -2,7 +2,7 @@ import { ButtonProps } from "../../../Button";
 import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
-export interface ModalFooterActionProps extends Pick<ButtonProps, "onClick" | "className"> {
+export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind"> {
   text: string;
 }
 

packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.module.scss

@@ -0,0 +1,14 @@
+.primary {
+  order: 2;
+}
+
+.secondary {
+  order: 1;
+}
+
+.stepDots {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+}

packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef } from "react";
+import { VibeComponentProps } from "../../../../types";
+import cx from "classnames";
+import ModalFooterBase from "../ModalFooterBase/ModalFooterBase";
+import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
+import { getTestId } from "../../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../../tests/constants";
+import styles from "./ModalFooterWizard.module.scss";
+import { StepsGalleryHeader } from "../../../Steps/StepsGalleryHeader";
+
+export interface ModalFooterWizardProps
+  extends Required<Pick<ModalFooterBaseProps, "primaryButton" | "secondaryButton">>,
+    VibeComponentProps {
+  stepCount: number;
+  activeStep: number;
+  onDotClick: (e: React.MouseEvent, stepIndex: number) => void;
+}
+
+const ModalFooterWizard = forwardRef(
+  (
+    {
+      primaryButton,
+      secondaryButton,
+      stepCount,
+      activeStep,
+      onDotClick,
+      "data-testid": dataTestId,
+      className,
+      id
+    }: ModalFooterWizardProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const primary = { ...primaryButton, className: cx(primaryButton.className, styles.primary) };
+    const secondary = secondaryButton
+      ? { ...secondaryButton, className: cx(secondaryButton.className, styles.secondary) }
+      : undefined;
+    const steps = (
+      <StepsGalleryHeader
+        stepsCount={stepCount}
+        activeStepIndex={activeStep}
+        onChangeActiveStep={onDotClick}
+        className={styles.stepDots}
+      />
+    );
+
+    return (
+      <ModalFooterBase
+        ref={ref}
+        className={className}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_FOOTER, id)}
+        primaryButton={primary}
+        secondaryButton={secondary}
+        renderAction={steps}
+      />
+    );
+  }
+);
+
+export default ModalFooterWizard;

packages/core/src/components/Steps/StepsGalleryHeader.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useCallback, useMemo } from "react";
 import { range } from "lodash-es";
+import cx from "classnames";
 import { StepsDot } from "./StepsDot";
 import VibeComponentProps from "../../types/VibeComponentProps";
 import styles from "./StepsGalleryHeader.module.scss";
@@ -9,7 +10,7 @@ export interface StepsGalleryHeaderProps extends VibeComponentProps {
   activeStepIndex: number;
   stepsCount: number;
   onChangeActiveStep: (e: React.MouseEvent, stepIndex: number) => void;
-  stepDescriptionFunc: (stepIndex: number) => string;
+  stepDescriptionFunc?: (stepIndex: number) => string;
   color?: StepsColor;
 }
 
@@ -18,7 +19,8 @@ export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
   stepsCount,
   onChangeActiveStep,
   stepDescriptionFunc,
-  color
+  color,
+  className
 }) => {
   const stepsPlaceholders = useMemo(() => range(stepsCount), [stepsCount]);
   const defaultStepDescriptionFunc = useCallback((stepIndex: number) => `Step number ${stepIndex}`, []);
@@ -47,7 +49,7 @@ export const StepsGalleryHeader: FC<StepsGalleryHeaderProps> = ({
   );
 
   return (
-    <div role="group" className={styles.galleryHeader}>
+    <div role="group" className={cx(styles.galleryHeader, className)}>
       {galleryDots || null}
     </div>
   );

packages/core/src/tests/constants.ts

@@ -108,6 +108,7 @@ export enum ComponentDefaultTestId {
   MODAL_NEXT_OVERLAY = "modal-overlay",
   MODAL_NEXT_HEADER = "modal-header",
   MODAL_NEXT_CONTENT = "modal-content",
+  MODAL_NEXT_FOOTER = "modal-footer",
   MODAL_NEXT_MEDIA = "modal-media",
   MODAL_NEXT_BASIC_LAYOUT = "modal-basic-layout",
   MODAL_NEXT_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",