Merge pull request #5912 from pat270/LPD-36816

feat(@clayui/css): LPD-36816 Multi Step Nav adds multi-step-nav-center
liferay · Jan 13, 2025 · dad5a03 · dad5a03
2 parents 3bf43b7 + 5bd96ad
commit dad5a03
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 11 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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(
 	(

diff --git 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 (
+		<ClayMultiStepNav center>
+			{steps.map(({subTitle, title}, i) => {
+				const complete = value > i;
+
+				return (
+					<ClayMultiStepNav.Item
+						active={value === i}
+						expand={i + 1 !== steps.length}
+						key={i}
+						state={complete ? 'complete' : undefined}
+					>
+						<ClayMultiStepNav.Title>
+							{title}
+						</ClayMultiStepNav.Title>
+						<ClayMultiStepNav.Divider />
+						<ClayMultiStepNav.Indicator
+							complete={complete}
+							label={1 + i}
+							onClick={() => setValue(i)}
+							subTitle={subTitle}
+						/>
+					</ClayMultiStepNav.Item>
+				);
+			})}
+		</ClayMultiStepNav>
+	);
+}
+
+render(<Component />)`;
+
+const MultiStepNavCenter = () => {
+	const scope = {
+		ClayMultiStepNav,
+	};
+
+	return (
+		<Editor
+			code={multiStepNavCenterCode}
+			imports={multiStepNavCenterImportsCode}
+			scope={scope}
+		/>
+	);
+};
+
 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
@@ -8,13 +8,15 @@ storybookPath: 'design-system-components-multistepnav'
 
 import {
 	MultiStepNav,
+	MultiStepNavCenter,
 	MultiStepNavError,
 	MultiStepNavWithBasicItems,
 } from '$packages/clay-multi-step-nav/docs/index';
 
 <div class="nav-toc-absolute">
 <div class="nav-toc">
 
+-   [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
 
 <MultiStepNav />
 
+## Center
+
+The `center` boolean property centers the `multi-step-nav`.
+
+<MultiStepNavCenter />
+
 ## State
 
 Each step can have two different states: `active` or `complete` defined by props as you can see below.

diff --git 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<HTMLOListElement> {
 	 */
 	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,
@@ -47,6 +53,7 @@ function ClayMultiStepNav({
 		<ol
 			className={classNames('multi-step-nav', className, {
 				'multi-step-item-fixed-width': fixedWidth,
+				'multi-step-nav-center': center,
 				'multi-step-nav-collapse-sm': autoCollapse,
 				[`multi-step-indicator-label-${indicatorLabel}`]:
 					indicatorLabel,