Skip to content

Commit

Permalink
fix(manager-react-components): add skip to StepComponent
Browse files Browse the repository at this point in the history 
ref: DTCORE-2668
Signed-off-by: Mohammed Hamdoune <[email protected]>
  • Loading branch information
@frenautvh @anooparveti
frenautvh authored and anooparveti committed Nov 14, 2024
1 parent 8816453 commit 52a71a4
Showing 1 changed file with 93 additions and 85 deletions.
178 changes: 93 additions & 85 deletions packages/manager-react-components/src/components/container/step/Step.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@ export type TStepProps = {
label: string | JSX.Element;
isDisabled?: boolean;
};
cancel?: {
skip?: {
action: (id: string) => void;
label: string | JSX.Element;
isDisabled?: boolean;
hint?: string;
};
children?: JSX.Element | JSX.Element[];
};
Expand All @@ -58,88 +59,94 @@ export const StepComponent = ({
children,
next,
edit,
cancel,
}: TStepProps): JSX.Element => {
return (
<section className="flex flex-row border-0 border-t-[1px] border-solid border-t-[#b3b3b3] pt-5 mb-5">
<div className="basis-[40px]">
{isChecked ? (
<OsdsIcon
size={ODS_ICON_SIZE.sm}
name={ODS_ICON_NAME.CHECK}
className={'mr-2'}
color={ODS_THEME_COLOR_INTENT.primary}
/>
) : (
skip,
}: TStepProps): JSX.Element => (
<section className="flex flex-row border-0 border-t-[1px] border-solid border-t-[#b3b3b3] pt-5 mb-5">
<div className="basis-[40px]">
{isChecked ? (
<OsdsIcon
size={ODS_ICON_SIZE.sm}
name={ODS_ICON_NAME.CHECK}
className="mr-2"
color={ODS_THEME_COLOR_INTENT.primary}
/>
) : (
<div
className={clsx(
'flex justify-center items-center font-bold border-2 border-solid rounded-full h-10 w-10',
isOpen ? 'border-[#0050d7]' : 'border-[grey]',
)}
>
<OsdsText
level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
color={
isOpen
? ODS_THEME_COLOR_INTENT.text
: ODS_THEME_COLOR_INTENT.default
}
>
{order}
</OsdsText>
</div>
)}
</div>
<div className="basis-full px-5">
<div className="flex flex-col md:flex-row">
<div
className={clsx(
'font-sans font-normal p-0 m-0 w-full md:w-5/6 flex',
isOpen ? 'text-[#00185e]' : 'text-[grey]',
)}
>
<div
className={clsx(
'flex justify-center items-center font-bold border-2 border-solid rounded-full h-10 w-10',
isOpen ? 'border-[#0050d7]' : 'border-[grey]',
'leading-10',
isOpen ? 'text-[1.625rem]' : 'text-[1.25rem]',
)}
>
<OsdsText
level={ODS_THEME_TYPOGRAPHY_LEVEL.body}
size={ODS_THEME_TYPOGRAPHY_SIZE._500}
color={
isOpen
? ODS_THEME_COLOR_INTENT.text
: ODS_THEME_COLOR_INTENT.default
}
{title}
</div>
{skip?.hint && <div className="leading-10 ml-2">{skip.hint}</div>}
</div>
{edit?.action && isLocked && (
<div className="text-2xl w-full md:w-1/6" data-testid="edit">
<OsdsLink
data-testid="edit-cta"
className="float-left md:float-right"
color={ODS_THEME_COLOR_INTENT.primary}
{...(edit.isDisabled ? { disabled: true } : {})}
onClick={() => {
if (!edit.isDisabled) {
edit.action(id);
}
}}
>
{order}
</OsdsText>
{edit.label}
</OsdsLink>
</div>
)}
</div>
<div className="basis-full px-5">
<div className="flex flex-col md:flex-row">
{isOpen && (
<>
{subtitle && <div>{subtitle}</div>}
<div
data-testid="content"
className={clsx(
'font-sans font-normal p-0 m-0 w-full md:w-5/6 leading-10',
isOpen
? 'text-[1.625rem] text-[#00185e]'
: 'text-[1.25rem] text-[grey]',
'mt-5',
isLocked && 'cursor-not-allowed pointer-events-none opacity-50',
)}
>
{title}
</div>
{edit?.action && isLocked && (
<div className="text-2xl w-full md:w-1/6" data-testid="edit">
<OsdsLink
data-testid="edit-cta"
className="float-left md:float-right"
color={ODS_THEME_COLOR_INTENT.primary}
{...(edit.isDisabled ? { disabled: true } : {})}
onClick={() => {
if (!edit.isDisabled) {
edit.action(id);
}
}}
>
{edit.label}
</OsdsLink>
</div>
)}
</div>
{isOpen && (
<>
{subtitle && <div>{subtitle}</div>}
<div
data-testid="content"
className={clsx(
'mt-5',
isLocked && 'cursor-not-allowed pointer-events-none opacity-50',
)}
<Suspense
fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
>
<Suspense
fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
>
{children}
</Suspense>
</div>
{!isLocked && (next || cancel) && (
<div className="flex mt-6">
{next && (
{children}
</Suspense>
</div>
{!isLocked && (
<div className="flex mt-6">
{next?.action && (
<div data-testid="next">
<OsdsButton
data-testid="next-cta"
size={ODS_BUTTON_SIZE.md}
Expand All @@ -152,29 +159,30 @@ export const StepComponent = ({
>
{next.label}
</OsdsButton>
)}
{cancel && (
</div>
)}
{skip?.action && (
<div>
<OsdsButton
data-testid="cancel-cta"
size={ODS_BUTTON_SIZE.md}
color={ODS_THEME_COLOR_INTENT.primary}
variant={ODS_BUTTON_VARIANT.ghost}
onClick={() => {
cancel.action(id);
skip.action(id);
}}
className="w-fit"
{...(cancel.isDisabled ? { disabled: true } : {})}
{...(skip.isDisabled ? { disabled: true } : {})}
>
{cancel.label}
{skip.label}
</OsdsButton>
)}
</div>
)}
</>
)}
</div>
</section>
);
};
</div>
)}
</div>
)}
</>
)}
</div>
</section>
);

export default StepComponent;

0 comments on commit 52a71a4

Please sign in to comment.