Skip to content

Commit

Permalink
feat(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
@sidlynx
sidlynx committed Oct 18, 2024
1 parent 978e590 commit b89cad9
Showing 1 changed file with 117 additions and 85 deletions.
202 changes: 117 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 @@ -14,6 +14,7 @@ import {
import { v4 as uuidV4 } from 'uuid';
import {
ODS_BUTTON_SIZE,
ODS_BUTTON_VARIANT,
ODS_ICON_NAME,
ODS_ICON_SIZE,
ODS_SPINNER_SIZE,
Expand All @@ -38,6 +39,12 @@ export type TStepProps = {
label: string | JSX.Element;
isDisabled?: boolean;
};
skip?: {
action: (id: string) => void;
label: string | JSX.Element;
isDisabled?: boolean;
hint?: string;
};
children?: JSX.Element | JSX.Element[];
};

Expand All @@ -52,105 +59,130 @@ export const StepComponent = ({
children,
next,
edit,
}: 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}
<Suspense
fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
>
{children}
</Suspense>
</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',
{!isLocked && (
<div className="flex mt-6">
{next?.action && (
<div data-testid="next">
<OsdsButton
data-testid="next-cta"
size={ODS_BUTTON_SIZE.md}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={() => {
next.action(id);
}}
className="w-fit"
{...(next.isDisabled ? { disabled: true } : {})}
>
{next.label}
</OsdsButton>
</div>
)}
{skip?.action && (
<div>
<OsdsButton
size={ODS_BUTTON_SIZE.md}
color={ODS_THEME_COLOR_INTENT.primary}
variant={ODS_BUTTON_VARIANT.ghost}
onClick={() => {
skip.action(id);
}}
className="w-fit"
{...(skip.isDisabled ? { disabled: true } : {})}
>
{skip.label}
</OsdsButton>
</div>
)}
>
<Suspense
fallback={<OsdsSpinner inline size={ODS_SPINNER_SIZE.md} />}
>
{children}
</Suspense>
</div>
{next?.action && !isLocked && (
<div className="mt-6" data-testid="next">
<OsdsButton
data-testid="next-cta"
size={ODS_BUTTON_SIZE.md}
color={ODS_THEME_COLOR_INTENT.primary}
onClick={() => {
next.action(id);
}}
className="w-fit"
{...(next.isDisabled ? { disabled: true } : {})}
>
{next.label}
</OsdsButton>
</div>
)}
</>
)}
</div>
</section>
);
};
)}
</>
)}
</div>
</section>
);

export default StepComponent;

0 comments on commit b89cad9

Please sign in to comment.