From e69f190ca4fb5de46111a6cf4d75362e62a67df8 Mon Sep 17 00:00:00 2001
From: Zukron Alviandy <zukron_rahmadhan@thesoftwarepractice.com>
Date: Wed, 20 May 2026 12:53:51 +0700
Subject: [PATCH 1/2] [CCUBE-2379] add itemGap props for review box

---
 src/components/custom/review/review.styles.ts | 14 +++++++++++++
 src/components/custom/review/review.tsx       |  6 ++++--
 src/components/custom/review/types.ts         |  2 ++
 .../5-custom/review/review-box.stories.tsx    | 21 +++++++++++++++++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/components/custom/review/review.styles.ts

diff --git a/src/components/custom/review/review.styles.ts b/src/components/custom/review/review.styles.ts
new file mode 100644
index 000000000..3fed56465
--- /dev/null
+++ b/src/components/custom/review/review.styles.ts
@@ -0,0 +1,14 @@
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import styled from "styled-components";
+
+interface IBoxUneditableSectionProps {
+	$itemGap?: string | undefined;
+}
+
+export const BoxUneditableSection = styled(UneditableSection)<IBoxUneditableSectionProps>`
+	${({ $itemGap }) =>
+		$itemGap &&
+		`ul {
+			row-gap: ${$itemGap};
+		}`}
+`;
diff --git a/src/components/custom/review/review.tsx b/src/components/custom/review/review.tsx
index a03d13384..ab3a8489b 100644
--- a/src/components/custom/review/review.tsx
+++ b/src/components/custom/review/review.tsx
@@ -16,6 +16,7 @@ import {
 	TReviewSchema,
 	TReviewSchemaItem,
 } from "./types";
+import { BoxUneditableSection } from "./review.styles";
 
 export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	// =============================================================================
@@ -202,10 +203,11 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	};
 
 	const renderBox = (schema: IReviewSchemaBox) => {
-		const { label, description, topSection, bottomSection, ...otherSchema } = schema;
+		const { label, description, topSection, bottomSection, itemGap, ...otherSchema } = schema;
 		return (
-			<UneditableSection
+			<BoxUneditableSection
 				{...otherSchema}
+				$itemGap={itemGap}
 				id={id}
 				title={label}
 				description={description}
diff --git a/src/components/custom/review/types.ts b/src/components/custom/review/types.ts
index 33c544c56..46441ea49 100644
--- a/src/components/custom/review/types.ts
+++ b/src/components/custom/review/types.ts
@@ -59,6 +59,8 @@ export interface IReviewSchemaBox extends IReviewBaseSchema, ICustomElementJsonS
 	description?: string | undefined;
 	background?: boolean | undefined;
 	stretch?: boolean | undefined;
+	/** Overrides the gap between review items. Accepts any valid CSS length value (e.g. "2rem", "32px"). */
+	itemGap?: string | undefined;
 }
 
 // =========================================================================
diff --git a/src/stories/5-custom/review/review-box.stories.tsx b/src/stories/5-custom/review/review-box.stories.tsx
index aa5e95307..8cbef5e0b 100644
--- a/src/stories/5-custom/review/review-box.stories.tsx
+++ b/src/stories/5-custom/review/review-box.stories.tsx
@@ -103,6 +103,17 @@ const meta: Meta = {
 				type: "boolean",
 			},
 		},
+		itemGap: {
+			description:
+				"Overrides the gap between review items. Accepts any valid CSS length value (e.g. `2rem`, `32px`).",
+			table: {
+				type: {
+					summary: "string",
+				},
+				defaultValue: { summary: "2rem (design system default)" },
+			},
+			control: { type: "text" },
+		},
 	},
 };
 export default meta;
@@ -257,3 +268,13 @@ NoBackground.args = {
 	items: SAMPLE_ITEMS,
 	background: false,
 };
+
+export const WithCustomItemGap = DefaultStoryTemplate<TReviewSchema>("review-custom-item-gap").bind({});
+WithCustomItemGap.storyName = "Custom Item Gap";
+WithCustomItemGap.args = {
+	referenceKey: "review",
+	label: "Your personal information",
+	description: "Retrieved on 27 Jun 2023",
+	items: SAMPLE_ITEMS,
+	itemGap: "4rem",
+};

From 868a93ec2c069c9ea3594e16236f63bce57e2307 Mon Sep 17 00:00:00 2001
From: Zukron Alviandy <zukron_rahmadhan@thesoftwarepractice.com>
Date: Fri, 22 May 2026 11:12:23 +0700
Subject: [PATCH 2/2] [CCUBE-2379] rename itemGap to rowGap for review box
 variant

---
 src/components/custom/review/review.styles.ts      |  8 ++++----
 src/components/custom/review/review.tsx            |  4 ++--
 src/components/custom/review/types.ts              |  4 ++--
 src/stories/5-custom/review/review-box.stories.tsx | 12 ++++++------
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/custom/review/review.styles.ts b/src/components/custom/review/review.styles.ts
index 3fed56465..aff8a3bd0 100644
--- a/src/components/custom/review/review.styles.ts
+++ b/src/components/custom/review/review.styles.ts
@@ -2,13 +2,13 @@ import { UneditableSection } from "@lifesg/react-design-system/uneditable-sectio
 import styled from "styled-components";
 
 interface IBoxUneditableSectionProps {
-	$itemGap?: string | undefined;
+	$rowGap?: string | undefined;
 }
 
 export const BoxUneditableSection = styled(UneditableSection)<IBoxUneditableSectionProps>`
-	${({ $itemGap }) =>
-		$itemGap &&
+	${({ $rowGap }) =>
+		$rowGap &&
 		`ul {
-			row-gap: ${$itemGap};
+			row-gap: ${$rowGap};
 		}`}
 `;
diff --git a/src/components/custom/review/review.tsx b/src/components/custom/review/review.tsx
index ab3a8489b..7155b1899 100644
--- a/src/components/custom/review/review.tsx
+++ b/src/components/custom/review/review.tsx
@@ -203,11 +203,11 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	};
 
 	const renderBox = (schema: IReviewSchemaBox) => {
-		const { label, description, topSection, bottomSection, itemGap, ...otherSchema } = schema;
+		const { label, description, topSection, bottomSection, rowGap, ...otherSchema } = schema;
 		return (
 			<BoxUneditableSection
 				{...otherSchema}
-				$itemGap={itemGap}
+				$rowGap={rowGap}
 				id={id}
 				title={label}
 				description={description}
diff --git a/src/components/custom/review/types.ts b/src/components/custom/review/types.ts
index 46441ea49..64cd087f5 100644
--- a/src/components/custom/review/types.ts
+++ b/src/components/custom/review/types.ts
@@ -59,8 +59,8 @@ export interface IReviewSchemaBox extends IReviewBaseSchema, ICustomElementJsonS
 	description?: string | undefined;
 	background?: boolean | undefined;
 	stretch?: boolean | undefined;
-	/** Overrides the gap between review items. Accepts any valid CSS length value (e.g. "2rem", "32px"). */
-	itemGap?: string | undefined;
+	/** Overrides the row gap between review items. Accepts any valid CSS length value (e.g. "2rem", "32px"). */
+	rowGap?: string | undefined;
 }
 
 // =========================================================================
diff --git a/src/stories/5-custom/review/review-box.stories.tsx b/src/stories/5-custom/review/review-box.stories.tsx
index 8cbef5e0b..e7dcb7309 100644
--- a/src/stories/5-custom/review/review-box.stories.tsx
+++ b/src/stories/5-custom/review/review-box.stories.tsx
@@ -103,9 +103,9 @@ const meta: Meta = {
 				type: "boolean",
 			},
 		},
-		itemGap: {
+		rowGap: {
 			description:
-				"Overrides the gap between review items. Accepts any valid CSS length value (e.g. `2rem`, `32px`).",
+				"Overrides the row gap between review items. Accepts any valid CSS length value (e.g. `2rem`, `32px`).",
 			table: {
 				type: {
 					summary: "string",
@@ -269,12 +269,12 @@ NoBackground.args = {
 	background: false,
 };
 
-export const WithCustomItemGap = DefaultStoryTemplate<TReviewSchema>("review-custom-item-gap").bind({});
-WithCustomItemGap.storyName = "Custom Item Gap";
-WithCustomItemGap.args = {
+export const WithCustomRowGap = DefaultStoryTemplate<TReviewSchema>("review-custom-row-gap").bind({});
+WithCustomRowGap.storyName = "Custom Row Gap";
+WithCustomRowGap.args = {
 	referenceKey: "review",
 	label: "Your personal information",
 	description: "Retrieved on 27 Jun 2023",
 	items: SAMPLE_ITEMS,
-	itemGap: "4rem",
+	rowGap: "4rem",
 };