From b9965e8bf99de0b3621dae9fc52628279f667826 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenjishiromajp@gmail.com>
Date: Thu, 23 Nov 2023 16:58:49 +1000
Subject: [PATCH] closes #357 compacta examples

---
 .../components/compacta/code.mdoc             | 75 +++++++++++--------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/apps/site/src/content/design-system/components/compacta/code.mdoc b/apps/site/src/content/design-system/components/compacta/code.mdoc
index cf23cc89c..b19e6fa9a 100644
--- a/apps/site/src/content/design-system/components/compacta/code.mdoc
+++ b/apps/site/src/content/design-system/components/compacta/code.mdoc
@@ -1,52 +1,67 @@
-## Collapsible sizes
+### Default compacta example
 
 ```tsx
 () => {
   const [inputs, setInputs] = useState({});
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setInputs((prev: object) => ({ ...prev, [e.target.name]: e.target.value }));
+  const handleChange = e => {
+    setInputs(prev => ({ ...prev, [e.target.name]: e.target.value }));
   };
 
   return (
     <Compacta>
       {({ id, setPrimaryTitle, setSecondaryTitle, setTertiaryTitle }) => (
-        <Form>
+        <Form spacing="large">
           <Form.Group>
-            <Form.Label htmlFor={`primary-${id}`}>Primary</Form.Label>
-            <Form.Hint>Primary title text</Form.Hint>
-            <Input
-              name={`primary-${id}`}
-              value={inputs[`primary-${id}` as keyof typeof inputs] || ''}
-              onChange={e => {
-                handleChange(e);
-                setPrimaryTitle(e.target.value);
-              }}
-            />
+            <Field label="Primary" hintMessage="Select your card insitution">
+              <Select
+                name={`input-primary-${id}`}
+                value={inputs[`input-primary-${id}`] || ''}
+                onChange={e => {
+                  handleChange(e);
+                  setPrimaryTitle(e.target.value);
+                }}
+                width={30}
+              >
+                <option>Select</option>
+                <option>AMP Bank</option>
+                <option>ANZ - Australia and New Zealand Banking Group</option>
+                <option>Bank of Queensland</option>
+                <option>Bendigo Bank</option>
+                <option>CBA - Commonwealth Bank</option>
+                <option>Macquarie Bank</option>
+                <option>NAB - National Australian Bank</option>
+                <option>Westpac Bank</option>
+              </Select>
+            </Field>
           </Form.Group>
           <Form.Group>
-            <Form.Label htmlFor={`secondary-${id}`}>Secondary</Form.Label>
-            <Form.Hint>Secondary title text</Form.Hint>
-            <Input
-              name={`secondary-${id}`}
-              value={inputs[`secondary-${id}` as keyof typeof inputs] || ''}
-              onChange={e => {
-                handleChange(e);
-                setSecondaryTitle(e.target.value);
-              }}
-            />
+            <Field label="Account number" hintMessage="Refer to a statement from the card’s financial institution">
+              <Input
+                name={`input-secondary-${id}`}
+                value={inputs[`input-secondary-${id}`] || ''}
+                onChange={e => {
+                  handleChange(e);
+                  setSecondaryTitle(e.target.value);
+                }}
+                width={30}
+              />
+            </Field>
           </Form.Group>
           <Form.Group>
-            <Form.Label htmlFor={`tertiary-${id}`}>Tertiary</Form.Label>
-            <Form.Hint>Tertiary title text</Form.Hint>
-            <Input
-              name={`tertiary-${id}`}
-              value={inputs[`tertiary-${id}` as keyof typeof inputs] || ''}
+            <InputField
+              name={`input-tertiary-${id}`}
+              value={inputs[`input-tertiary-${id}`] || ''}
               onChange={e => {
                 handleChange(e);
                 setTertiaryTitle(e.target.value);
               }}
-            />
+              width={20}
+              before="$"
+              label="Amount to transfer"
+            >
+              <Input />
+            </InputField>
           </Form.Group>
         </Form>
       )}