[CCUBE-2379] add itemGap props for review box to legacy/v1

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 {
+	$rowGap?: string | undefined;
+}
+
+export const BoxUneditableSection = styled(UneditableSection)<IBoxUneditableSectionProps>`
+	${({ $rowGap }) =>
+		$rowGap &&
+		`ul {
+			row-gap: ${$rowGap};
+		}`}
+`;

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, rowGap, ...otherSchema } = schema;
 		return (
-			<UneditableSection
+			<BoxUneditableSection
 				{...otherSchema}
+				$rowGap={rowGap}
 				id={id}
 				title={label}
 				description={description}

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 row gap between review items. Accepts any valid CSS length value (e.g. "2rem", "32px"). */
+	rowGap?: string | undefined;
 }
 
 // =========================================================================

src/stories/5-custom/review/review-box.stories.tsx

@@ -103,6 +103,17 @@ const meta: Meta = {
 				type: "boolean",
 			},
 		},
+		rowGap: {
+			description:
+				"Overrides the row 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 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,
+	rowGap: "4rem",
+};