From e1ead752bf27348b67ad58cd616b300b3ab463e7 Mon Sep 17 00:00:00 2001
From: Thomas Jeffery <thomas.jeffery@gov.ab.ca>
Date: Wed, 28 Aug 2024 13:32:33 -0600
Subject: [PATCH 1/3] Code example fixes

---
 src/examples/text-field/TextFieldExamples.tsx | 68 ++++++++-----------
 1 file changed, 29 insertions(+), 39 deletions(-)

diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx
index f01aab7bb..0a86506a7 100644
--- a/src/examples/text-field/TextFieldExamples.tsx
+++ b/src/examples/text-field/TextFieldExamples.tsx
@@ -21,16 +21,16 @@ export default function TextFieldExamples() {
       <h3 id="component-example-ask-user-for-an-address">Ask a user for an address </h3>
       <Sandbox flags={["reactive"]}>
         <GoAFormItem label="Street Address">
-          <GoAInput name="address" type="text" value="" onChange={noop} width="100%" />
+          <GoAInput name="address" type="text" value="" onChange={noop} width="100%" mb="xl" />
         </GoAFormItem>
         <GoAFormItem label="Suite or unit #">
-          <GoAInput name="suite" type="text" value="" onChange={noop} width="100%" />
+          <GoAInput name="suite" type="text" value="" onChange={noop} width="100%" mb="xl" />
         </GoAFormItem>
         <GoAFormItem label="City/town">
-          <GoAInput name="city" type="text" value="" onChange={noop} width="100%" />
+          <GoAInput name="city" type="text" value="" onChange={noop} width="100%" mb="xl"  />
         </GoAFormItem>
 
-        <GoABlock direction={"row"}>
+        <GoABlock direction="row" gap="l">
           <GoAFormItem label="Provice/territory">
             <GoADropdown onChange={noop} name="province" value="alberta">
               <GoADropdownItem label="Alberta" value="alberta" />
@@ -47,7 +47,7 @@ export default function TextFieldExamples() {
           </GoAFormItem>
 
           <GoAFormItem label="Postal Code">
-            <GoAInput name="postalCode" type="text" value="" onChange={noop} width="100%" />
+            <GoAInput name="postalCode" type="text" value="" onChange={noop} width="14ch" />
           </GoAFormItem>
         </GoABlock>
       </Sandbox>
@@ -55,41 +55,40 @@ export default function TextFieldExamples() {
       <h3 id="component-example-ask-user-for-birthday">Ask a user for their birthday</h3>
       <Sandbox flags={["reactive"]}>
         <GoAFormItem
-          label="When is your birthday?"
+          label="What is your date of birth?"
           labelSize="large"
-          helpText={"For example, 27 11 2007"}>
+          helpText={"For example, 27 November 2004"}>
           <GoABlock gap="m" direction="row">
             <GoAFormItem label="Day">
               <GoAInput
                 onChange={noop}
                 value=""
-                name="bandNo"
-                type="number"
-                width="60px"
-                min={1}
-                max={31}
+                name="day"
+                width="6ch"
               />
             </GoAFormItem>
             <GoAFormItem label="Month">
-              <GoAInput
-                onChange={noop}
-                value=""
-                name="family"
-                type="number"
-                width="60px"
-                min={1}
-                max={12}
-              />
+            <GoADropdown onChange={noop} name="month" value="">
+              <GoADropdownItem label="January" value="January" />
+              <GoADropdownItem label="February" value="February" />
+              <GoADropdownItem label="March" value="March" />
+              <GoADropdownItem label="April" value="April" />
+              <GoADropdownItem label="May" value="May" />
+              <GoADropdownItem label="June" value="June" />
+              <GoADropdownItem label="July" value="July" />
+              <GoADropdownItem label="August" value="August" />
+              <GoADropdownItem label="September" value="September" />
+              <GoADropdownItem label="October" value="October" />
+              <GoADropdownItem label="November" value="November" />
+              <GoADropdownItem label="December" value="December" />
+            </GoADropdown>
             </GoAFormItem>
             <GoAFormItem label="Year">
               <GoAInput
                 onChange={noop}
                 value=""
-                name="position"
-                type="number"
-                width="88px"
-                min={1900}
-                max={2023}
+                name="year"
+                width="10ch"
               />
             </GoAFormItem>
           </GoABlock>
@@ -98,7 +97,7 @@ export default function TextFieldExamples() {
 
       <h3 id="component-example-search">Search</h3>
       <Sandbox flags={["reactive"]}>
-        <GoABlock gap="m" direction="row">
+        <GoABlock gap="xs" direction="row">
           <GoAInput type="search" name="search" value="" onChange={noop} leadingIcon="search" />
           <GoAButton type="primary" onClick={noop}>
             Search
@@ -232,10 +231,10 @@ export default function TextFieldExamples() {
         />
 
         <GoAFormItem label="Tuition">
-          <GoAInput onChange={noop} value="" name="tuitionAmount" leadingContent="$" />
+          <GoAInput onChange={noop} value="" name="tuitionAmount" leadingContent="$" mb="xl" />
         </GoAFormItem>
-        <GoAFormItem label="Books/Supplies/Instruments">
-          <GoAInput onChange={noop} value="" name="suppliesAmount" leadingContent="$" />
+        <GoAFormItem label="Supplies">
+          <GoAInput onChange={noop} value="" name="suppliesAmount" leadingContent="$" mb="xl" />
         </GoAFormItem>
         <GoAFormItem label="Other costs">
           <GoAInput onChange={noop} value="" name="othersAmount" leadingContent="$" />
@@ -253,9 +252,6 @@ export default function TextFieldExamples() {
                 onChange={noop}
                 value=""
                 name="bandNo"
-                min={1}
-                max={999}
-                type="number"
                 width="88px"
               />
             </GoAFormItem>
@@ -264,9 +260,6 @@ export default function TextFieldExamples() {
                 onChange={noop}
                 value=""
                 name="family"
-                min={1}
-                max={99999}
-                type="number"
                 width="105px"
               />
             </GoAFormItem>
@@ -275,9 +268,6 @@ export default function TextFieldExamples() {
                 onChange={noop}
                 value=""
                 name="position"
-                min={1}
-                max={99}
-                type="number"
                 width="71px"
               />
             </GoAFormItem>

From a9532c01e689992dd13a42e68f55522fb1070708 Mon Sep 17 00:00:00 2001
From: "Syed.Zeeshan" <shariqzeeshan@gmail.com>
Date: Mon, 9 Sep 2024 16:04:35 -0400
Subject: [PATCH 2/3] fix(#2097): docs skeleton props update for Angular and
 React

---
 src/routes/components/Skeleton.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/routes/components/Skeleton.tsx b/src/routes/components/Skeleton.tsx
index 506e5f750..ef8983e17 100644
--- a/src/routes/components/Skeleton.tsx
+++ b/src/routes/components/Skeleton.tsx
@@ -79,18 +79,35 @@ export default function SkeletonPage() {
       defaultValue: "1",
     },
     {
-      name: "Line Count",
+      name: "linecount",
       type: "number",
       description:
         "Used within components that contain multiple lines. Currently only used in card skeleton type",
       defaultValue: "3",
+      lang: "angular",
     },
     {
-      name: "Max Width",
+      name: "maxwidth",
       type: "string",
       description: "Set component maximum width. Currently only used in card skeleton type",
       defaultValue: "320px",
+      lang: "angular",
     },
+    {
+      name: "lineCount",
+      type: "number",
+      description:
+        "Used within components that contain multiple lines. Currently only used in card skeleton type",
+      defaultValue: "3",
+      lang: "react",
+    },
+    {
+      name: "maxWidth",
+      type: "string",
+      description: "Set component maximum width. Currently only used in card skeleton type",
+      defaultValue: "320px",
+      lang: "react",
+    },    
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>): void {

From 14b893b9ea163930e12f8dfc815e1ff6fe5ff0f0 Mon Sep 17 00:00:00 2001
From: Thomas Jeffery <82968683+twjeffery@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:41:19 -0400
Subject: [PATCH 3/3] chore: code fix

---
 src/examples/text-field/TextFieldExamples.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx
index 0a86506a7..8ad9e5b6b 100644
--- a/src/examples/text-field/TextFieldExamples.tsx
+++ b/src/examples/text-field/TextFieldExamples.tsx
@@ -136,17 +136,17 @@ export default function TextFieldExamples() {
           allowCopy={true}
           code={`
                   <goa-form-item label="Tuition">
-                    <goa-input (_change)="onChangeTuitionAmount($event)" value="" name="tuition" leadingcontent="$">
+                    <goa-input (_change)="onChangeTuitionAmount($event)" value="" name="tuition" mb="xl">
                       <div slot="leadingContent">$</div>
                     </goa-input>
                   </goa-form-item>
                   <goa-form-item label="Books/Supplies/Instruments">
-                    <goa-input (_change)="onChangeSuppliesAmount($event)" value="" name="book" leadingcontent="$">
+                    <goa-input (_change)="onChangeSuppliesAmount($event)" value="" name="book" mb="xl">
                       <div slot="leadingContent">$</div>
                     </goa-input>
                   </goa-form-item>
                   <goa-form-item label="Other costs">
-                    <goa-input (_change)="onChangeOthersAmount($event)" value="" name="others" leadingcontent="$">
+                    <goa-input (_change)="onChangeOthersAmount($event)" value="" name="others">
                       <div slot="leadingContent">$</div>
                     </goa-input>
                   </goa-form-item>