diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss new file mode 100644 index 0000000000..081864ab77 --- /dev/null +++ b/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; +} diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx new file mode 100644 index 0000000000..1ee139f4c8 --- /dev/null +++ b/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 + ) => { + const primary = { ...primaryButton, className: cx(primaryButton.className, styles.primary) }; + const secondary = secondaryButton + ? { ...secondaryButton, className: cx(secondaryButton.className, styles.secondary) } + : undefined; + return ( + + ); + } +); + +export default ModalFooter; diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts new file mode 100644 index 0000000000..1ce64b56ca --- /dev/null +++ b/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 { + renderSideAction?: React.ReactNode; +} diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.module.scss b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.module.scss rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.module.scss diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx similarity index 71% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx index 71a541f4e6..eaf4789cbb 100644 --- a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx +++ b/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 ) => { + const { text: primaryButtonText, ...primaryButtonProps } = primaryButton; + const { text: secondaryButtonText, ...secondaryButtonProps } = secondaryButton || {}; return ( - + {secondaryButton && ( - )} {renderAction} diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts similarity index 78% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts index 9627288a69..c3f6469ad1 100644 --- a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts +++ b/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 { +export interface ModalFooterActionProps extends Omit { text: string; } diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/__tests__/ModalFooterBase.test.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/__tests__/ModalFooterBase.test.tsx rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.module.scss b/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.module.scss new file mode 100644 index 0000000000..68858be61d --- /dev/null +++ b/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; +} diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx new file mode 100644 index 0000000000..2c7b0aa1e4 --- /dev/null +++ b/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>, + 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 + ) => { + const primary = { ...primaryButton, className: cx(primaryButton.className, styles.primary) }; + const secondary = secondaryButton + ? { ...secondaryButton, className: cx(secondaryButton.className, styles.secondary) } + : undefined; + const steps = ( + + ); + + return ( + + ); + } +); + +export default ModalFooterWizard; diff --git a/packages/core/src/components/Steps/StepsGalleryHeader.tsx b/packages/core/src/components/Steps/StepsGalleryHeader.tsx index 8df5d5f84b..cd8cc5bde8 100644 --- a/packages/core/src/components/Steps/StepsGalleryHeader.tsx +++ b/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 = ({ 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 = ({ ); return ( -
+
{galleryDots || null}
); diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts index 310c4e759f..fc73b82cbd 100644 --- a/packages/core/src/tests/constants.ts +++ b/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",