From a765a574695be0e5a69df0402fe3ae8500a39911 Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 21 May 2024 08:22:43 +0300 Subject: [PATCH 1/6] Stepper component --- src/layout/Stepper/Step.tsx | 20 +++ src/layout/Stepper/Stepper.story.tsx | 198 +++++++++++++++++++++++++++ src/layout/Stepper/Stepper.tsx | 66 +++++++++ src/layout/Stepper/StepperTheme.tsx | 36 +++++ src/layout/Stepper/index.ts | 2 + src/layout/index.ts | 1 + src/utils/Theme/themes/theme.ts | 12 +- 7 files changed, 332 insertions(+), 3 deletions(-) create mode 100644 src/layout/Stepper/Step.tsx create mode 100644 src/layout/Stepper/Stepper.story.tsx create mode 100644 src/layout/Stepper/Stepper.tsx create mode 100644 src/layout/Stepper/StepperTheme.tsx create mode 100644 src/layout/Stepper/index.ts diff --git a/src/layout/Stepper/Step.tsx b/src/layout/Stepper/Step.tsx new file mode 100644 index 00000000..4f0ed268 --- /dev/null +++ b/src/layout/Stepper/Step.tsx @@ -0,0 +1,20 @@ +import React, { FC, ReactElement } from 'react'; + +export interface StepProps { + /** + * Content of the step + */ + content: string | ReactElement; + + /** + * Optional Text of the marker + */ + markerLabel?: string; + + /** + * CSS Classname to applied to the step + */ + className?: string; +} + +export const Step: FC = ({ content }) =>
{content}
; diff --git a/src/layout/Stepper/Stepper.story.tsx b/src/layout/Stepper/Stepper.story.tsx new file mode 100644 index 00000000..d17ff5b6 --- /dev/null +++ b/src/layout/Stepper/Stepper.story.tsx @@ -0,0 +1,198 @@ +import { Stepper } from './Stepper'; +import { Step } from './Step'; + +export default { + title: 'Components/Layout/Stepper', + component: Stepper +}; + +export const Markers = () => ( + + + + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + + + } + /> + + + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to + the website where we also have the video of how to use the plug in? + Otherwise this is a nice addition. +
+ + } + /> + + + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + + + } + /> + +); + +export const Labels = () => ( + + + + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + + + } + /> + + + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to + the website where we also have the video of how to use the plug in? + Otherwise this is a nice addition. +
+ + } + /> + + + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + + + } + /> + +); + +export const Mixed = () => ( + + + + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + + + } + /> + + + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to + the website where we also have the video of how to use the plug in? + Otherwise this is a nice addition. +
+ + } + /> + + + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + + + } + /> + +); diff --git a/src/layout/Stepper/Stepper.tsx b/src/layout/Stepper/Stepper.tsx new file mode 100644 index 00000000..d2ffee11 --- /dev/null +++ b/src/layout/Stepper/Stepper.tsx @@ -0,0 +1,66 @@ +import { StepperTheme } from '@/layout'; +import { cn, useComponentTheme } from '@/utils'; +import React, { Children, FC, PropsWithChildren } from 'react'; + +import { Step, StepProps } from './Step'; + +export interface StepperProps extends PropsWithChildren { + /** + * Currently active step + */ + activeStep: number; + + /** + * Theme for the Stepper. + */ + theme?: StepperTheme; +} +export const Stepper: FC = ({ children, theme: customTheme }) => { + const theme: StepperTheme = useComponentTheme('stepper', customTheme); + + const childrenStepProps = Children.toArray(children) + .filter((child: any) => child.type?.name === Step.name) + .map((child: any) => child.props); + + const totalSteps = childrenStepProps.length - 1; + + return ( +
+ {childrenStepProps.map((props: StepProps, index) => ( +
+
+
+ {props.markerLabel ? ( +
+
+ {props.markerLabel} +
+ ) : ( +
+ )} +
+
+ +
+ ))} +
+ ); +}; diff --git a/src/layout/Stepper/StepperTheme.tsx b/src/layout/Stepper/StepperTheme.tsx new file mode 100644 index 00000000..e7a3e2c3 --- /dev/null +++ b/src/layout/Stepper/StepperTheme.tsx @@ -0,0 +1,36 @@ +export interface StepperTheme { + base: string; + step: { + base: string; + marker: { + container: string; + base: string; + active: string; + labeled: { + base: string; + active: string; + }; + }; + active: string; + }; +} + +export const stepperTheme: StepperTheme = { + base: '', + step: { + base: 'flex flex-row gap-3 items-start pb-4 border-l border-solid border-panel-accent', + marker: { + container: + 'w-max pt-1.5 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]', + base: 'rounded-full w-[9px] h-[9px] bg-surface', + active: 'bg-info', + labeled: { + base: 'flex flex-row items-center gap-1 border border-solid border-secondary px-3 py-1 rounded-[20px]', + active: 'border-info bg-info-background' + } + }, + active: 'border-primary' + } +}; + +export const legacyStepperTheme: StepperTheme = stepperTheme; diff --git a/src/layout/Stepper/index.ts b/src/layout/Stepper/index.ts new file mode 100644 index 00000000..74f1addd --- /dev/null +++ b/src/layout/Stepper/index.ts @@ -0,0 +1,2 @@ +export * from './Stepper'; +export * from './StepperTheme'; diff --git a/src/layout/index.ts b/src/layout/index.ts index 5f9f2ec7..59f0a852 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -9,3 +9,4 @@ export * from './Tree'; export * from './VerticalSpacer'; export * from './Tabs'; export * from './Breadcrumbs'; +export * from './Stepper'; diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts index 9aed6b56..f840e331 100644 --- a/src/utils/Theme/themes/theme.ts +++ b/src/utils/Theme/themes/theme.ts @@ -115,7 +115,10 @@ import { legacyJsonTreeTheme, breadcrumbsTheme, BreadcrumbsTheme, - legacyBreadcrumbTheme + legacyBreadcrumbTheme, + StepperTheme, + stepperTheme, + legacyStepperTheme } from '@/layout'; import { @@ -186,6 +189,7 @@ export interface ReablocksTheme { pager: PagerTheme; tabs: TabsTheme; breadcrumbs: BreadcrumbsTheme; + stepper: StepperTheme; }; } @@ -232,7 +236,8 @@ export const theme: ReablocksTheme = { pager: pagerTheme, tabs: tabsTheme, jsonTree: jsonTreeTheme, - breadcrumbs: breadcrumbsTheme + breadcrumbs: breadcrumbsTheme, + stepper: stepperTheme } }; @@ -279,6 +284,7 @@ export const legacyThemeVars: ReablocksTheme = { pager: legacyPagerTheme, tabs: legacyTabsTheme, jsonTree: legacyJsonTreeTheme, - breadcrumbs: legacyBreadcrumbTheme + breadcrumbs: legacyBreadcrumbTheme, + stepper: legacyStepperTheme } }; From 0caf7db73d7131c200d389e70003d611a7e687fd Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 21 May 2024 09:33:19 +0300 Subject: [PATCH 2/6] Use grid instead of flex --- src/layout/Stepper/Step.tsx | 4 +++- src/layout/Stepper/Stepper.tsx | 30 +++++++++++++++-------------- src/layout/Stepper/StepperTheme.tsx | 16 ++++++++------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/src/layout/Stepper/Step.tsx b/src/layout/Stepper/Step.tsx index 4f0ed268..0f827e66 100644 --- a/src/layout/Stepper/Step.tsx +++ b/src/layout/Stepper/Step.tsx @@ -17,4 +17,6 @@ export interface StepProps { className?: string; } -export const Step: FC = ({ content }) =>
{content}
; +export const Step: FC = ({ content, className }) => ( +
{content}
+); diff --git a/src/layout/Stepper/Stepper.tsx b/src/layout/Stepper/Stepper.tsx index d2ffee11..34548d9e 100644 --- a/src/layout/Stepper/Stepper.tsx +++ b/src/layout/Stepper/Stepper.tsx @@ -1,6 +1,6 @@ import { StepperTheme } from '@/layout'; import { cn, useComponentTheme } from '@/utils'; -import React, { Children, FC, PropsWithChildren } from 'react'; +import React, { Children, FC, Fragment, PropsWithChildren } from 'react'; import { Step, StepProps } from './Step'; @@ -25,21 +25,20 @@ export const Stepper: FC = ({ children, theme: customTheme }) => { const totalSteps = childrenStepProps.length - 1; return ( -
+
{childrenStepProps.map((props: StepProps, index) => ( -
-
+ +
{props.markerLabel ? (
= ({ children, theme: customTheme }) => { )}
- -
+ + ))}
); diff --git a/src/layout/Stepper/StepperTheme.tsx b/src/layout/Stepper/StepperTheme.tsx index e7a3e2c3..bb2ea6c0 100644 --- a/src/layout/Stepper/StepperTheme.tsx +++ b/src/layout/Stepper/StepperTheme.tsx @@ -6,30 +6,32 @@ export interface StepperTheme { container: string; base: string; active: string; - labeled: { + label: { base: string; active: string; }; }; active: string; + content: string; }; } export const stepperTheme: StepperTheme = { - base: '', + base: 'grid grid-cols-[min-content_1fr] gap-x-3', step: { - base: 'flex flex-row gap-3 items-start pb-4 border-l border-solid border-panel-accent', + base: 'border-l border-solid border-panel-accent translate-x-1/2', marker: { - container: - 'w-max pt-1.5 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]', base: 'rounded-full w-[9px] h-[9px] bg-surface', + container: + 'w-max pt-1 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]', active: 'bg-info', - labeled: { + label: { base: 'flex flex-row items-center gap-1 border border-solid border-secondary px-3 py-1 rounded-[20px]', active: 'border-info bg-info-background' } }, - active: 'border-primary' + active: 'border-primary', + content: 'pb-6' } }; From 26a9e0b774eebdf2883d0bfb4f8b0d34a84f9d1a Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 21 May 2024 10:05:10 +0300 Subject: [PATCH 3/6] Fix current step displaying --- src/layout/Stepper/Stepper.story.tsx | 4 ++-- src/layout/Stepper/Stepper.tsx | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/layout/Stepper/Stepper.story.tsx b/src/layout/Stepper/Stepper.story.tsx index d17ff5b6..de9409f5 100644 --- a/src/layout/Stepper/Stepper.story.tsx +++ b/src/layout/Stepper/Stepper.story.tsx @@ -69,7 +69,7 @@ export const Markers = () => ( ); export const Labels = () => ( - + ( ); export const Mixed = () => ( - + = ({ children, theme: customTheme }) => { +export const Stepper: FC = ({ + activeStep = 0, + children, + theme: customTheme +}) => { const theme: StepperTheme = useComponentTheme('stepper', customTheme); const childrenStepProps = Children.toArray(children) @@ -31,19 +35,19 @@ export const Stepper: FC = ({ children, theme: customTheme }) => {
{props.markerLabel ? (
{props.markerLabel} @@ -51,7 +55,7 @@ export const Stepper: FC = ({ children, theme: customTheme }) => { ) : (
)} From e0ab445a30e6c2b4ce1c645baa44dc33eaf4f48e Mon Sep 17 00:00:00 2001 From: Evgeniy Date: Tue, 21 May 2024 10:25:27 +0300 Subject: [PATCH 4/6] Add numbered variant for stepper --- src/layout/Stepper/Step.tsx | 13 +- src/layout/Stepper/Stepper.story.tsx | 377 +++++++++++++++------------ src/layout/Stepper/Stepper.tsx | 23 +- 3 files changed, 230 insertions(+), 183 deletions(-) diff --git a/src/layout/Stepper/Step.tsx b/src/layout/Stepper/Step.tsx index 0f827e66..5a738d39 100644 --- a/src/layout/Stepper/Step.tsx +++ b/src/layout/Stepper/Step.tsx @@ -1,11 +1,6 @@ -import React, { FC, ReactElement } from 'react'; - -export interface StepProps { - /** - * Content of the step - */ - content: string | ReactElement; +import React, { FC, PropsWithChildren } from 'react'; +export interface StepProps extends PropsWithChildren { /** * Optional Text of the marker */ @@ -17,6 +12,6 @@ export interface StepProps { className?: string; } -export const Step: FC = ({ content, className }) => ( -
{content}
+export const Step: FC = ({ children, className }) => ( +
{children}
); diff --git a/src/layout/Stepper/Stepper.story.tsx b/src/layout/Stepper/Stepper.story.tsx index de9409f5..1fb10e5a 100644 --- a/src/layout/Stepper/Stepper.story.tsx +++ b/src/layout/Stepper/Stepper.story.tsx @@ -8,191 +8,224 @@ export default { export const Markers = () => ( - - - 03/01/2024, 8:00 AM - - - Austin{' '} - - created ticket - - + +
+ + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to the + website where we also have the video of how to use the plug in? + Otherwise this is a nice addition.
- } - /> - - - 03/01/2024, 8:00 AM - - - Austin - - {' '} - changed statues from{' '} - - Backlog - to In - Progress - -
- This looks fine, might've missed it but maybe we can add a link to - the website where we also have the video of how to use the plug in? - Otherwise this is a nice addition. -
-
- } - /> - - - 03/01/2024, 8:00 AM - - - Austin - - {' '} - changed statues from{' '} - - In Progress - to Done - +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + +
+ + +); + +export const Numbered = () => ( + + +
+ + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to the + website where we also have the video of how to use the plug in? + Otherwise this is a nice addition.
- } - /> +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + +
+ ); export const Labels = () => ( - - - 03/01/2024, 8:00 AM - - - Austin{' '} - - created ticket - - -
- } - /> - - - 03/01/2024, 8:00 AM - - - Austin - - {' '} - changed statues from{' '} - - Backlog - to In - Progress - -
- This looks fine, might've missed it but maybe we can add a link to - the website where we also have the video of how to use the plug in? - Otherwise this is a nice addition. -
+ +
+ + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to the + website where we also have the video of how to use the plug in? + Otherwise this is a nice addition.
- } - /> - - - 03/01/2024, 8:00 AM - - - Austin - - {' '} - changed statues from{' '} - - In Progress - to Done - -
- } - /> +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + +
+ ); export const Mixed = () => ( - - - 03/01/2024, 8:00 AM - - - Austin{' '} - - created ticket - - -
- } - /> - - - 03/01/2024, 8:00 AM - - - Austin - - {' '} - changed statues from{' '} - - Backlog - to In - Progress - -
- This looks fine, might've missed it but maybe we can add a link to - the website where we also have the video of how to use the plug in? - Otherwise this is a nice addition. -
-
- } - /> - - - 03/01/2024, 8:00 AM - - - Austin - - {' '} - changed statues from{' '} - - In Progress - to Done - + +
+ + 03/01/2024, 8:00 AM + + + Austin{' '} + + created ticket + + +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + Backlog + to In + Progress + +
+ This looks fine, might've missed it but maybe we can add a link to the + website where we also have the video of how to use the plug in? + Otherwise this is a nice addition.
- } - /> +
+ + +
+ + 03/01/2024, 8:00 AM + + + Austin + + {' '} + changed statues from{' '} + + In Progress + to Done + +
+ ); diff --git a/src/layout/Stepper/Stepper.tsx b/src/layout/Stepper/Stepper.tsx index 5005e91c..8dcdff5e 100644 --- a/src/layout/Stepper/Stepper.tsx +++ b/src/layout/Stepper/Stepper.tsx @@ -14,10 +14,16 @@ export interface StepperProps extends PropsWithChildren { * Theme for the Stepper. */ theme?: StepperTheme; + + /** + * Show number for every step + */ + numbered?: boolean; } export const Stepper: FC = ({ activeStep = 0, children, + numbered = false, theme: customTheme }) => { const theme: StepperTheme = useComponentTheme('stepper', customTheme); @@ -39,7 +45,18 @@ export const Stepper: FC = ({ })} >
- {props.markerLabel ? ( + {/* Numbered marker */} + {numbered && ( +
+ {index + 1} +
+ )} + {/* Labeled marker */} + {!numbered && props.markerLabel && (
= ({ /> {props.markerLabel}
- ) : ( + )} + {/* Dot marker */} + {!numbered && !props.markerLabel && (
Date: Tue, 21 May 2024 10:35:52 +0300 Subject: [PATCH 5/6] Update colors --- src/layout/Stepper/Stepper.story.tsx | 8 ++++---- src/layout/Stepper/StepperTheme.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/layout/Stepper/Stepper.story.tsx b/src/layout/Stepper/Stepper.story.tsx index 1fb10e5a..8cdacee9 100644 --- a/src/layout/Stepper/Stepper.story.tsx +++ b/src/layout/Stepper/Stepper.story.tsx @@ -36,7 +36,7 @@ export const Markers = () => ( to In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -92,7 +92,7 @@ export const Numbered = () => ( to In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -148,7 +148,7 @@ export const Labels = () => ( to In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. @@ -204,7 +204,7 @@ export const Mixed = () => ( to In Progress -
+
This looks fine, might've missed it but maybe we can add a link to the website where we also have the video of how to use the plug in? Otherwise this is a nice addition. diff --git a/src/layout/Stepper/StepperTheme.tsx b/src/layout/Stepper/StepperTheme.tsx index bb2ea6c0..c6602404 100644 --- a/src/layout/Stepper/StepperTheme.tsx +++ b/src/layout/Stepper/StepperTheme.tsx @@ -26,7 +26,7 @@ export const stepperTheme: StepperTheme = { 'w-max pt-1 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]', active: 'bg-info', label: { - base: 'flex flex-row items-center gap-1 border border-solid border-secondary px-3 py-1 rounded-[20px]', + base: 'flex flex-row items-center gap-1 border border-solid border-surface px-3 py-1 rounded-[20px]', active: 'border-info bg-info-background' } }, From 81a9f6da7e3bdd3f4123e19d4be6e925b63feb02 Mon Sep 17 00:00:00 2001 From: Austin Date: Tue, 21 May 2024 04:32:04 -0400 Subject: [PATCH 6/6] Update src/layout/Stepper/Stepper.tsx --- src/layout/Stepper/Stepper.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/layout/Stepper/Stepper.tsx b/src/layout/Stepper/Stepper.tsx index 8dcdff5e..a509a95b 100644 --- a/src/layout/Stepper/Stepper.tsx +++ b/src/layout/Stepper/Stepper.tsx @@ -20,6 +20,7 @@ export interface StepperProps extends PropsWithChildren { */ numbered?: boolean; } + export const Stepper: FC = ({ activeStep = 0, children,