[MOL-17154][RL] Update storybook docs

LifeSG · Dec 5, 2024 · 28e77cf · 28e77cf
1 parent d218786
commit 28e77cf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/stories/form/form-textarea/form-textarea.mdx b/stories/form/form-textarea/form-textarea.mdx
@@ -32,6 +32,12 @@ const renderCustomCounter = (maxLength: number, currentValueLength: number) => {
 };
 ```
 
+<Heading3>Transform value</Heading3>
+
+You can specify the `transformValue` prop to format or sanitise input.
+
+<Canvas of={FormTextareaStories.TransformValue} />
+
 <Heading3>Rendering in grid layouts</Heading3>
 
 You can also specify [ColDiv's](/docs/getting-started-layout-column-divs--docs)

diff --git a/stories/form/form-textarea/form-textarea.stories.tsx b/stories/form/form-textarea/form-textarea.stories.tsx
@@ -49,13 +49,22 @@ export const Default: StoryObj<Component> = {
                         label="This is does not have a counter"
                         placeholder="Enter here..."
                     />
+                </Container>
+            </StoryContainer>
+        );
+    },
+};
+
+export const TransformValue: StoryObj<Component> = {
+    render: () => {
+        return (
+            <StoryContainer>
+                <Container>
                     <Form.Textarea
-                        rows={2}
-                        label="This is a textarea with a handle change. "
-                        placeholder="Enter here. Replace \, <, >  and new line with empty string ..."
+                        label="This removes special characters"
                         maxLength={100}
                         transformValue={(value) =>
-                            value.replace(/[<>\\\n]/g, "")
+                            value.replace(/[^A-Za-z0-9 ]/g, "")
                         }
                     />
                 </Container>

diff --git a/stories/form/form-textarea/props-table.tsx b/stories/form/form-textarea/props-table.tsx
@@ -47,8 +47,8 @@ const DATA: ApiTableSectionProps[] = [
             },
             {
                 name: "transformValue",
-                description: "Function to Transform field value */",
-                propTypes: ["(value: string) => JSX.Element"],
+                description: "Function to transform value",
+                propTypes: ["(value: string) => string"],
             },
         ],
     },