From ad0abb87da3f6b846af888117c6898da2a6fb5e2 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 8 Jan 2025 15:42:50 -0800 Subject: [PATCH 1/5] feat(@clayui/css): LPD-36816 Multi Step Nav adds multi-step-nav-center - Hides multi-step-divider on last item --- .../cadmin/components/_multi-step-nav.scss | 61 +++++++++++++++++++ .../cadmin/variables/_multi-step-nav.scss | 26 ++++++++ .../src/scss/components/_multi-step-nav.scss | 54 ++++++++++++++++ .../src/scss/variables/_multi-step-nav.scss | 26 ++++++++ 4 files changed, 167 insertions(+) diff --git a/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss index 244610a222..5997abf97c 100644 --- a/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss +++ b/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss @@ -38,6 +38,12 @@ margin-bottom: $cadmin-multi-step-item-margin-bottom; position: relative; + &:last-child { + .multi-step-divider { + display: none; + } + } + &.active { .multi-step-icon { background-color: $cadmin-multi-step-icon-active-bg; @@ -249,6 +255,7 @@ padding-left: $cadmin-multi-step-icon-padding-left; padding-right: $cadmin-multi-step-icon-padding-right; padding-top: $cadmin-multi-step-icon-padding-top; + position: relative; @include transition($cadmin-multi-step-icon-transition); @@ -305,6 +312,37 @@ } } +.multi-step-nav-center { + @include clay-css($cadmin-multi-step-nav-center); + + .multi-step-item { + $_item: setter( + map-get($cadmin-multi-step-nav-center, multi-step-item), + () + ); + + @include clay-css($_item); + } + + .multi-step-divider { + @include clay-css( + map-get($cadmin-multi-step-nav-center, multi-step-divider) + ); + } + + .multi-step-indicator { + @include clay-css( + map-get($cadmin-multi-step-nav-center, multi-step-indicator) + ); + } + + .multi-step-title { + @include clay-css( + map-get($cadmin-multi-step-nav-center, multi-step-title) + ); + } +} + .multi-step-nav-collapse-sm { @include media-breakpoint-down(sm, $cadmin-grid-breakpoints) { flex-wrap: nowrap; @@ -331,6 +369,29 @@ } } + &.multi-step-nav-center { + .multi-step-item { + flex-grow: 0; + width: auto; + } + + .multi-step-item-expand { + flex-grow: 1; + width: 75px; + } + + .multi-step-divider { + left: auto; + margin-left: $cadmin-multi-step-icon-size; + width: auto; + } + + .multi-step-indicator { + left: auto; + transform: none; + } + } + .active { &.multi-step-item { position: static; diff --git a/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss index d4aa647efb..24ebedd98b 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss +++ b/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss @@ -83,6 +83,32 @@ $cadmin-multi-step-item-margin-bottom: 10px !default; $cadmin-multi-step-item-width: 75px !default; $cadmin-multi-step-item-fixed-width: 150px !default; +$cadmin-multi-step-nav-center: () !default; +$cadmin-multi-step-nav-center: map-deep-merge( + ( + padding: 0, + text-align: center, + multi-step-item: ( + flex-grow: 1, + width: $cadmin-multi-step-item-width, + ), + multi-step-divider: ( + left: 50%, + margin-left: 1rem, + width: calc(100% - #{$cadmin-multi-step-icon-size}), + ), + multi-step-indicator: ( + left: 50%, + transform: translateX(-50%), + ), + multi-step-title: ( + margin-left: 12.5%, + max-width: 75%, + ), + ), + $cadmin-multi-step-nav-center +); + // data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457. $cadmin-multi-step-item-error: () !default; diff --git a/packages/clay-css/src/scss/components/_multi-step-nav.scss b/packages/clay-css/src/scss/components/_multi-step-nav.scss index eebf7ca857..f5ef798b18 100644 --- a/packages/clay-css/src/scss/components/_multi-step-nav.scss +++ b/packages/clay-css/src/scss/components/_multi-step-nav.scss @@ -46,6 +46,12 @@ margin-bottom: $multi-step-item-margin-bottom; position: relative; + &:last-child { + .multi-step-divider { + display: none; + } + } + &.active { .multi-step-icon { background-color: $multi-step-icon-active-bg; @@ -259,6 +265,7 @@ padding-left: $multi-step-icon-padding-left; padding-right: $multi-step-icon-padding-right; padding-top: $multi-step-icon-padding-top; + position: relative; @include transition($multi-step-icon-transition); @@ -315,6 +322,30 @@ } } +.multi-step-nav-center { + @include clay-css($multi-step-nav-center); + + .multi-step-item { + $_item: setter(map-get($multi-step-nav-center, multi-step-item), ()); + + @include clay-css($_item); + } + + .multi-step-divider { + @include clay-css(map-get($multi-step-nav-center, multi-step-divider)); + } + + .multi-step-indicator { + @include clay-css( + map-get($multi-step-nav-center, multi-step-indicator) + ); + } + + .multi-step-title { + @include clay-css(map-get($multi-step-nav-center, multi-step-title)); + } +} + .multi-step-nav-collapse-sm { @include media-breakpoint-down(sm) { flex-wrap: nowrap; @@ -341,6 +372,29 @@ } } + &.multi-step-nav-center { + .multi-step-item { + flex-grow: 0; + width: auto; + } + + .multi-step-item-expand { + flex-grow: 1; + width: 75px; + } + + .multi-step-divider { + left: auto; + margin-left: $multi-step-icon-size; + width: auto; + } + + .multi-step-indicator { + left: auto; + transform: none; + } + } + .active { &.multi-step-item { position: static; diff --git a/packages/clay-css/src/scss/variables/_multi-step-nav.scss b/packages/clay-css/src/scss/variables/_multi-step-nav.scss index f5c5d3f9ed..fd140f5c00 100644 --- a/packages/clay-css/src/scss/variables/_multi-step-nav.scss +++ b/packages/clay-css/src/scss/variables/_multi-step-nav.scss @@ -96,6 +96,32 @@ $multi-step-item-margin-bottom: 10px !default; $multi-step-item-width: 75px !default; $multi-step-item-fixed-width: 150px !default; +$multi-step-nav-center: () !default; +$multi-step-nav-center: map-deep-merge( + ( + padding: 0, + text-align: center, + multi-step-item: ( + flex-grow: 1, + width: $multi-step-item-width, + ), + multi-step-divider: ( + left: 50%, + margin-left: 1rem, + width: calc(100% - #{$multi-step-icon-size}), + ), + multi-step-indicator: ( + left: 50%, + transform: translateX(-50%), + ), + multi-step-title: ( + margin-left: 12.5%, + max-width: 75%, + ), + ), + $multi-step-nav-center +); + $multi-step-title-center: () !default; $multi-step-title-center: map-deep-merge( ( From 4a2de61b8d201616bf8fca2b22ba77b93f8b9054 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 9 Jan 2025 11:19:20 -0800 Subject: [PATCH 2/5] feat(@clayui/multi-step-nav): LPD-36816 Adds prop center to center the nav --- packages/clay-multi-step-nav/src/MultiStepNav.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/clay-multi-step-nav/src/MultiStepNav.tsx b/packages/clay-multi-step-nav/src/MultiStepNav.tsx index 2ae268fef9..1664f4f32a 100644 --- a/packages/clay-multi-step-nav/src/MultiStepNav.tsx +++ b/packages/clay-multi-step-nav/src/MultiStepNav.tsx @@ -17,6 +17,11 @@ export interface IProps extends React.HTMLAttributes { */ autoCollapse?: boolean; + /** + * Flag to indicate if nav should add the `multi-step-nav-center` class. + */ + center?: boolean; + /** * Flag to indicate if nav should add `multi-step-item-fixed-width` class. */ @@ -37,6 +42,7 @@ function ClayMultiStepNav(props: IProps): JSX.Element & { function ClayMultiStepNav({ autoCollapse = true, + center, children, className, fixedWidth, @@ -46,6 +52,7 @@ function ClayMultiStepNav({ return (
    Date: Thu, 9 Jan 2025 11:20:29 -0800 Subject: [PATCH 3/5] chore(@clayui/multi-step-nav): Storybook adds example of center --- .../stories/MultiStepNav.stories.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/clay-multi-step-nav/stories/MultiStepNav.stories.tsx b/packages/clay-multi-step-nav/stories/MultiStepNav.stories.tsx index e2b92bc30d..67f9bc2ebe 100644 --- a/packages/clay-multi-step-nav/stories/MultiStepNav.stories.tsx +++ b/packages/clay-multi-step-nav/stories/MultiStepNav.stories.tsx @@ -12,31 +12,31 @@ export default { title: 'Design System/Components/MultiStepNav', }; -export const Default = () => { +export const Default = (args: any) => { const [value, setValue] = useState(1); const steps = [ { - subTitle: 'SubOne', - title: 'One', + subTitle: 'Step 01', + title: 'Ticket Buyer Information', }, { - subTitle: 'SubTwo', - title: 'Two', + subTitle: 'Step 02', + title: 'Attendee Information', }, { - subTitle: 'SubThree', - title: 'Three', + subTitle: 'Step 03', + title: 'Payment Information', }, { - subTitle: 'SubFour', - title: 'Four', + subTitle: 'Step 04', + title: 'Completed', }, ]; return (
    - + {steps.map(({subTitle, title}, i: number) => { const complete = value > i; @@ -65,6 +65,10 @@ export const Default = () => { ); }; +Default.args = { + center: false, +}; + export const MultiStepNavWithBasicItems = (args: any) => { const steps = [ { From 9d1c8cadb075d498a1fadb18e2b6fcb2f808a6f3 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 9 Jan 2025 11:20:59 -0800 Subject: [PATCH 4/5] docs(clayui.com): Multi Step Nav add center example --- packages/clay-multi-step-nav/docs/index.js | 77 ++++++++++++++++++- .../docs/multi-step-nav.mdx | 8 ++ 2 files changed, 84 insertions(+), 1 deletion(-) diff --git a/packages/clay-multi-step-nav/docs/index.js b/packages/clay-multi-step-nav/docs/index.js index 81c9c592bb..f7282a3e3b 100644 --- a/packages/clay-multi-step-nav/docs/index.js +++ b/packages/clay-multi-step-nav/docs/index.js @@ -79,6 +79,76 @@ const MultiStepNav = () => { ); }; +const multiStepNavCenterImportsCode = `import ClayMultiStepNav from '@clayui/multi-step-nav'; +`; + +const multiStepNavCenterCode = `const Component = () => { + const [value, setValue] = useState(1); + + const steps = [ + { + subTitle: 'Step 01', + title: 'Ticket Buyer Information', + }, + { + subTitle: 'Step 02', + title: 'Attendee Information', + }, + { + subTitle: 'Step 03', + title: 'Payment Information', + }, + { + subTitle: 'Step 04', + title: 'Completed', + }, + ]; + + return ( + + {steps.map(({subTitle, title}, i) => { + const complete = value > i; + + return ( + + + {title} + + + setValue(i)} + subTitle={subTitle} + /> + + ); + })} + + ); +} + +render()`; + +const MultiStepNavCenter = () => { + const scope = { + ClayMultiStepNav, + }; + + return ( + + ); +}; + const multiStepNavWithBasicItemsImportsCode = `import {ClayMultiStepNavWithBasicItems} from '@clayui/multi-step-nav'; `; @@ -183,4 +253,9 @@ const MultiStepNavError = () => { ); }; -export {MultiStepNav, MultiStepNavError, MultiStepNavWithBasicItems}; +export { + MultiStepNav, + MultiStepNavCenter, + MultiStepNavError, + MultiStepNavWithBasicItems, +}; diff --git a/packages/clay-multi-step-nav/docs/multi-step-nav.mdx b/packages/clay-multi-step-nav/docs/multi-step-nav.mdx index cdd330228c..c5144e2828 100644 --- a/packages/clay-multi-step-nav/docs/multi-step-nav.mdx +++ b/packages/clay-multi-step-nav/docs/multi-step-nav.mdx @@ -8,6 +8,7 @@ storybookPath: 'design-system-components-multistepnav' import { MultiStepNav, + MultiStepNavCenter, MultiStepNavError, MultiStepNavWithBasicItems, } from '$packages/clay-multi-step-nav/docs/index'; @@ -15,6 +16,7 @@ import {
    +- [Center](#center) - [State](#state) - [Indicator position](#indicator-position) - [Collapsable Steps](#collapsable-steps) @@ -28,6 +30,12 @@ Each step can have two different states: `active` or `complete` defined by props +## Center + +The `center` boolean property centers the `multi-step-nav`. + + + ## State Each step can have two different states: `active` or `complete` defined by props as you can see below. From 5bd96add11108e0677e0e7aa8972601d1b6f31e1 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Thu, 9 Jan 2025 11:31:57 -0800 Subject: [PATCH 5/5] chore(@clayui/multi-step-nav): SF --- packages/clay-multi-step-nav/src/MultiStepNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/clay-multi-step-nav/src/MultiStepNav.tsx b/packages/clay-multi-step-nav/src/MultiStepNav.tsx index 1664f4f32a..10309be803 100644 --- a/packages/clay-multi-step-nav/src/MultiStepNav.tsx +++ b/packages/clay-multi-step-nav/src/MultiStepNav.tsx @@ -52,8 +52,8 @@ function ClayMultiStepNav({ return (