Merge pull request #249 from GovAlta/alpha

Production Release - September 30 / 2024
GovAlta · Sep 30, 2024 · fdcdf89 · fdcdf89
2 parents c595b7d + 17e224f
commit fdcdf89
Show file tree

Hide file tree

Showing 33 changed files with 698 additions and 265 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,8 +12,8 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "5.0.0",
-    "@abgov/web-components": "1.25.0",
+    "@abgov/react-components": "5.2.0",
+    "@abgov/web-components": "1.27.0",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "react": "^18.2.0",
@@ -32,6 +32,6 @@
     "eslint-plugin-react-refresh": "^0.3.5",
     "prettier": "2.4.1",
     "typescript": "^5.4.2",
-    "vite": "^5.2.6"
+    "vite": "^5.4.6"
   }
 }
diff --git a/src/components/sandbox/SandboxProperties.tsx b/src/components/sandbox/SandboxProperties.tsx
@@ -59,7 +59,7 @@ export function SandboxProperties({ properties = [], onChange }: Props) {
     onChange([...properties]);
   }
 
-  function onDateChange(name: string, value: Date): void {
+  function onDateChange(name: string, value: Date | undefined): void {
     const prop = properties.find(p => p.type === "date" && p.name === name);
     if (!prop || prop.type !== "date") return;
     prop.value = value;

diff --git a/src/examples/modal/ModalExamples.tsx b/src/examples/modal/ModalExamples.tsx
@@ -22,7 +22,7 @@ export default function ModalExamples() {
   const [destructiveModalOpen, setDestructiveModalOpen] = useState<boolean>();
   const [warnCalloutModalOpen, setWarnCalloutModalOpen] = useState<boolean>();
   const [inputModalOpen, setInputModalOpen] = useState<boolean>();
-  const [effectiveDate, setEffectiveDate] = useState<Date>(new Date());
+  const [effectiveDate, setEffectiveDate] = useState<Date|undefined>(new Date());
   const [onRouteChangeModalOpen, setOnRouteChangeModalOpen] = useState<boolean>();
   const [addItemModalOpen, setAddItemModalOpen] = useState<boolean>();
   const [type, setType] = useState<string>();
@@ -32,7 +32,7 @@ export default function ModalExamples() {
   const navigate = useNavigate();
   const language = useContext(LanguageContext);
   // @ts-ignore
-  const onChangeEffectiveDate = (name: string, value: Date) => {
+  const onChangeEffectiveDate = (name: string, value: Date | undefined) => {
     setEffectiveDate(value);
   };
 

diff --git 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,49 +47,48 @@ 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>
 
       <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
@@ -137,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>
@@ -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>

diff --git a/src/routes/components/Accordion.tsx b/src/routes/components/Accordion.tsx
@@ -151,6 +151,11 @@ export default function AccordionPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {

diff --git a/src/routes/components/Badge.tsx b/src/routes/components/Badge.tsx
@@ -110,6 +110,11 @@ export default function BadgePage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
   ];
 
   function onSandboxChange(badgeBindings: ComponentBinding[], props: Record<string, unknown>) {

diff --git a/src/routes/components/Block.tsx b/src/routes/components/Block.tsx
@@ -56,6 +56,11 @@ export default function BlockPage() {
       description: "Primary axis alignment",
       defaultValue: "normal",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },  
   ];
 
   useEffect(() => {

diff --git a/src/routes/components/Button.tsx b/src/routes/components/Button.tsx
@@ -136,6 +136,11 @@ export default function ButtonPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
   ];
   const noop = () => { };
 

diff --git a/src/routes/components/ButtonGroup.tsx b/src/routes/components/ButtonGroup.tsx
@@ -57,6 +57,11 @@ export default function ButtonGroupPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
   ]; 
 
   const noop = () => { };

diff --git a/src/routes/components/Callout.tsx b/src/routes/components/Callout.tsx
@@ -108,6 +108,11 @@ export default function CalloutPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
     {
       name: "arialive",
       lang: "angular",

diff --git a/src/routes/components/Checkbox.tsx b/src/routes/components/Checkbox.tsx
@@ -143,6 +143,11 @@ export default function CheckboxPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
   ];
   const noop = () => { };
 

diff --git a/src/routes/components/Chip.tsx b/src/routes/components/Chip.tsx
@@ -134,6 +134,11 @@ export default function ChipPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
     // ...
   ];
 

diff --git a/src/routes/components/Container.tsx b/src/routes/components/Container.tsx
@@ -134,6 +134,11 @@ export default function ContainerPage() {
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
     },
+    {
+      name: "mt,mr,mb,ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Apply margin to the top, right, bottom, and/or left of the component.",
+    },
   ];
 
   function onSandboxChange(bindings: ComponentBinding[], props: Record<string, unknown>) {