[BOOKINGSG-9308][IT] Migrate uneditable section component

e2e/nextjs-app/src/app/components/uneditable-section/default-full-width.e2e.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import { items } from "./uneditable-section-shared";
+
+export default function Story() {
+    return (
+        <div className="story-column-container story-background">
+            <UneditableSection
+                data-testid="uneditable-section-full-width"
+                title="Personal Information"
+                description="Sample description"
+                items={items}
+                fullWidth
+            />
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/default-layout.e2e.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import { items } from "./uneditable-section-shared";
+
+export default function Story() {
+    return (
+        <div className="story-column-container story-background">
+            <UneditableSection
+                data-testid="uneditable-section"
+                title="Personal Information"
+                description="Sample description"
+                items={items}
+            />
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/default-no-background.e2e.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import { items } from "./uneditable-section-shared";
+
+export default function Story() {
+    return (
+        <div className="story-column-container story-background">
+            <UneditableSection
+                data-testid="uneditable-section"
+                title="Personal Information"
+                description="Sample description"
+                items={items}
+                background={false}
+            />
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/error-alert-variant.e2e.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+export default function Story() {
+    return (
+        <UneditableSection
+            data-testid="uneditable-section"
+            title="Personal Information"
+            items={[
+                {
+                    label: "Error and alert variant",
+                    value: "S1234534J",
+                    maskState: "masked",
+                    maskRange: [1, 4],
+                    maskLoadingState: "fail",
+                    displayWidth: "half",
+                    alert: {
+                        children: "Sample alert message",
+                        type: "warning",
+                    },
+                },
+            ]}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/full-custom-sections.e2e.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Button } from "@lifesg/react-design-system/button";
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import styles from "./full-custom-sections.module.css";
+
+export default function Story() {
+    return (
+        <UneditableSection>
+            <div className={styles["custom-style-1"]}>
+                <div className={styles["custom-style-2"]}>
+                    <h3>My custom content</h3>
+                    <Button styleType="light">Custom button</Button>
+                </div>
+                <div className={styles["custom-style-3"]}>
+                    <Alert type="warning">Custom alert</Alert>
+                </div>
+                <p className={styles["custom-style-3"]}>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Etiam pellentesque enim eu neque gravida, ut pulvinar magna
+                    tristique. Aenean sed malesuada arcu. Integer convallis
+                    dapibus suscipit.
+                </p>
+                <UneditableSection.ItemSection>
+                    <UneditableSection.Item
+                        displayWidth="half"
+                        label="Name (as in NRIC or passport)"
+                        value="Tom Tan Li Ho"
+                    />
+                    <UneditableSection.Item
+                        displayWidth="half"
+                        label="NRIC or FIN"
+                        value="S••••534J"
+                    />
+                    <UneditableSection.Item
+                        label="Residential Address"
+                        value="Block 287, #05-11, Tampines street 22, Singapore 534788"
+                    />
+                </UneditableSection.ItemSection>
+                <h3 className={styles["custom-style-2"]}>Another section</h3>
+                <UneditableSection.ItemSection>
+                    <UneditableSection.Item
+                        label="Custom content list"
+                        value={
+                            <ul>
+                                <li>Option 1</li>
+                                <li>Option 2</li>
+                                <li>Option 3</li>
+                            </ul>
+                        }
+                    />
+                </UneditableSection.ItemSection>
+            </div>
+        </UneditableSection>
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/full-custom-sections.module.css

@@ -0,0 +1,16 @@
+.custom-style-1 {
+    display: flex;
+    flex-direction: column;
+    grid-column: span 8;
+}
+
+.custom-style-2 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+}
+
+.custom-style-3 {
+    margin-bottom: 1rem;
+}

e2e/nextjs-app/src/app/components/uneditable-section/loading-variant.e2e.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+export default function Story() {
+    return (
+        <UneditableSection
+            data-testid="uneditable-section"
+            title="Personal Information"
+            items={[
+                {
+                    label: "Loading variant",
+                    value: "S1234534J",
+                    maskState: "masked",
+                    maskRange: [1, 4],
+                    maskLoadingState: "loading",
+                    displayWidth: "half",
+                },
+            ]}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/masked-variants.e2e.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+
+export default function Story() {
+    return (
+        <div className="story-column-container story-background">
+            <UneditableSection
+                data-testid="uneditable-section-full-width"
+                title="Personal Information"
+                description="Sample description"
+                items={[
+                    {
+                        displayWidth: "half",
+                        label: "Plain text",
+                        value: "S1234567D",
+                    },
+                    {
+                        displayWidth: "half",
+                        label: "With mask range",
+                        maskRange: [1, 4],
+                        maskState: "masked",
+                        value: "S1234567D",
+                    },
+                    {
+                        displayWidth: "half",
+                        label: "With mask range (start only)",
+                        maskRange: [4, 9999],
+                        maskState: "masked",
+                        value: "S1234567D",
+                    },
+                    {
+                        displayWidth: "half",
+                        label: "With mask range (end only)",
+                        maskRange: [0, 4],
+                        maskState: "masked",
+                        value: "S1234567D",
+                    },
+                    {
+                        displayWidth: "half",
+                        label: "With unmask range",
+                        maskState: "masked",
+                        unmaskRange: [1, 4],
+                        value: "S1234567D",
+                    },
+                    {
+                        displayWidth: "half",
+                        label: "With mask regex",
+                        maskRegex: /\D/g,
+                        maskState: "masked",
+                        value: "S1234567D",
+                    },
+                    {
+                        displayWidth: "half",
+                        label: "With mask transformer (X)",
+                        maskState: "masked",
+                        maskTransformer: (value) => value.replace(/\d/g, "X"),
+                        value: "S1234567D",
+                    },
+                    {
+                        disableMaskUnmask: true,
+                        displayWidth: "half",
+                        label: "With mask range but disabled unmasking",
+                        maskRange: [1, 4],
+                        maskState: "masked",
+                        value: "S1234567D",
+                    },
+                ]}
+            />
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/partial-custom-sections.e2e.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { UneditableSection } from "@lifesg/react-design-system/uneditable-section";
+import { Alert } from "@lifesg/react-design-system/alert";
+import { Button } from "@lifesg/react-design-system/button";
+
+export default function Story() {
+    return (
+        <UneditableSection
+            data-testid="uneditable-section"
+            title="Personal Information"
+            description="Your personal details with additional sections"
+            topSection={
+                <Alert type="info" data-testid="top-section-alert">
+                    Custom alert section
+                </Alert>
+            }
+            items={[
+                {
+                    label: "Name (as in NRIC or passport)",
+                    value: "Tom Tan Li Ho",
+                    displayWidth: "half",
+                },
+                {
+                    label: "NRIC or FIN",
+                    value: "S1234534J",
+                    displayWidth: "half",
+                },
+                {
+                    label: "Date of birth",
+                    value: "6 November 1992",
+                    displayWidth: "half",
+                },
+                {
+                    label: "Nationality",
+                    value: "Singaporean",
+                    displayWidth: "half",
+                },
+            ]}
+            bottomSection={
+                <div data-testid="bottom-section-actions">
+                    <Button>Custom button</Button>
+                </div>
+            }
+        />
+    );
+}

e2e/nextjs-app/src/app/components/uneditable-section/uneditable-section-shared.ts

@@ -0,0 +1,30 @@
+import { UneditableSectionItemProps } from "@lifesg/react-design-system/uneditable-section";
+
+export const items: UneditableSectionItemProps[] = [
+    {
+        displayWidth: "half",
+        label: "Name (as in NRIC or passport)",
+        value: "Tom Tan Li Ho",
+    },
+    {
+        displayWidth: "half",
+        label: "NRIC or FIN",
+        maskRange: [1, 4],
+        maskState: "masked",
+        value: "S1234534J",
+    },
+    {
+        displayWidth: "half",
+        label: "Date of birth",
+        value: "6 November 1992",
+    },
+    {
+        displayWidth: "half",
+        label: "Residential Address",
+        value: "Block 287, #05-11, Tampines Street 22, Singapore 534788",
+    },
+    {
+        label: "Ethnicity",
+        value: "Chinese",
+    },
+];