Merge pull request #597 from LifeSG/custom-uneditable-section-item

[MOL-16885][RL] Allow custom content in uneditable section item
LifeSG · Oct 17, 2024 · d63a748 · d63a748
2 parents 80517a2 + 0e584d8
commit d63a748
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 7 deletions.
diff --git a/src/uneditable-section/section-item.tsx b/src/uneditable-section/section-item.tsx
@@ -88,6 +88,10 @@ export const UneditableSectionItem = ({
     // HELPER FUNCTIONS
     // =========================================================================
     const getValue = () => {
+        if (typeof value !== "string") {
+            return value;
+        }
+
         return displayMaskState === "masked"
             ? StringHelper.maskValue(value, {
                   maskChar,
@@ -136,6 +140,10 @@ export const UneditableSectionItem = ({
     };
 
     const renderContent = () => {
+        if (typeof value !== "string") {
+            return value;
+        }
+
         if (!displayMaskState) {
             return <Text.Body>{value}</Text.Body>;
         }

diff --git a/src/uneditable-section/types.ts b/src/uneditable-section/types.ts
@@ -9,7 +9,8 @@ export type UneditableSectionItemMaskLoadingState = "loading" | "fail";
 export interface UneditableSectionItemProps extends MaskAttributeProps {
     id?: string | undefined;
     label: string;
-    value: string;
+    /** Note: masking is only available for string values */
+    value: string | React.ReactNode;
     /** The width that the item can span across. Values: "half", "full" */
     displayWidth?: UneditableSectionItemDisplayWidth | undefined;
     /**

diff --git a/stories/uneditable-section/props-table.tsx b/stories/uneditable-section/props-table.tsx
@@ -107,8 +107,13 @@ const MAIN_DATA: ApiTableSectionProps[] = [
             },
             {
                 name: "value",
-                description: "The value of the uneditable item",
-                propTypes: [`string`],
+                description: (
+                    <>
+                        The value of the uneditable item. <strong>Note:</strong>{" "}
+                        masking is only available for string values
+                    </>
+                ),
+                propTypes: [`string`, "React.ReactNode"],
                 mandatory: true,
             },
             {

diff --git a/stories/uneditable-section/uneditable-section.stories.tsx b/stories/uneditable-section/uneditable-section.stories.tsx
@@ -4,6 +4,7 @@ import { Alert } from "src/alert";
 import { BoxContainer } from "src/box-container";
 import { Button } from "src/button";
 import { Text } from "src/text";
+import { TextList } from "src/text-list";
 import {
     UneditableSection,
     UneditableSectionItemProps,
@@ -346,7 +347,13 @@ export const ComposingFromScratch: StoryObj<Component> = {
                     <UneditableSection.ItemSection>
                         <UneditableSection.Item
                             label="Spoken languages"
-                            value="English, Mandarin, French"
+                            value={
+                                <TextList.Ul>
+                                    <li>English</li>
+                                    <li>Mandarin</li>
+                                    <li>French</li>
+                                </TextList.Ul>
+                            }
                         />
                     </UneditableSection.ItemSection>
                 </div>

diff --git a/tests/uneditable-section/uneditable-section.spec.tsx b/tests/uneditable-section/uneditable-section.spec.tsx
@@ -6,15 +6,14 @@ import {
 
 describe("UneditableSection", () => {
     beforeEach(() => {
-
         jest.resetAllMocks();
         global.ResizeObserver = jest.fn().mockImplementation(() => ({
             observe: jest.fn(),
             unobserve: jest.fn(),
             disconnect: jest.fn(),
         }));
     });
-    
+
     it("should render the elements correctly", () => {
         render(
             <UneditableSection
@@ -29,10 +28,26 @@ describe("UneditableSection", () => {
 
         for (const item of MOCK_ITEMS) {
             expect(screen.getByText(item.label)).toBeInTheDocument();
-            expect(screen.getByText(item.value)).toBeInTheDocument();
+            expect(screen.getByText(item.value as string)).toBeInTheDocument();
         }
     });
 
+    it("should render custom items correctly", () => {
+        render(
+            <UneditableSection
+                items={[
+                    {
+                        label: "Custom",
+                        value: <div data-testid="custom-item-value" />,
+                    },
+                ]}
+            />
+        );
+
+        expect(screen.getByText("Custom")).toBeInTheDocument();
+        expect(screen.getByTestId("custom-item-value")).toBeInTheDocument();
+    });
+
     it("should render the custom top section and custom bottom section if specified", () => {
         render(
             <UneditableSection