Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/dtcore 2668 #13660

Merged
merged 10 commits into from
Oct 21, 2024
Merged

Feat/dtcore 2668 #13660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
70e2cd6
feat(pci-load-balancer): sizeinput for create page
sidlynx Oct 8, 2024
87181e0
feat(pci-load-balancer): create page first step
sidlynx Oct 8, 2024
4809584
feat(pci-load-balancer): create page second step
sidlynx Oct 9, 2024
8523470
feat(pci-load-balancer): create page third step
sidlynx Oct 9, 2024
243dcc4
feat(pci-load-balancer): create page fourth step
sidlynx Oct 10, 2024
3f34f02
feat(pci-load-balancer): create page fifth step
sidlynx Oct 11, 2024
4730556
feat(pci-load-balancer): create page last step
sidlynx Oct 15, 2024
4194ab0
feat(pci-load-balancer): refacto
sidlynx Oct 16, 2024
1316cf3
feat(pci-load-balancer): tracking
sidlynx Oct 17, 2024
1c2ef45
feat(manager-react-components): add skip to stepcomponent
sidlynx Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 117 additions & 85 deletions packages/manager-react-components/src/components/container/step/Step.component.tsx
View file
Open in desktop
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;
12 changes: 0 additions & 12 deletions packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/new/New.page.spec.tsx
View file
Open in desktop

This file was deleted.

Loading
Loading