DELETED-TESTING BUILD ERRORS

.github/copilot-instructions.md

@@ -0,0 +1,37 @@
+# Project Overview
+This project contains the public documentation for the Government of Alberta's Design System.
+
+## Libraries and Frameworks
+- The site is built with React components from the Government of Alberta's UI Components library.
+
+## Folder Structure
+- `src/routes/home.tsx`: The home page.
+- `src/routes/get-started`: The pages for starting with the design system.
+- `src/routes/examples/ExamplesOverview.tsx`: The page listing all examples.
+- `src/examples`: Examples of patterns, pages, tasks, component configurations, flows, and more.
+- `src/routes/components/AllComponents.tsx`: The page listing all components.
+- `src/routes/components`: The pages for each UI component.
+- `src/routes/design-tokens`: The pages for design tokens.
+- `src/routes/foundations`: The pages for design foundations.
+
+## Component versions
+- Documentation for the most recent version of components are shown with `version === "new"`.
+- Documentation for old Long-Term Support (LTS) components are shown with `version === "old"`.
+
+## Commits & Pull Requests
+- Use Conventional Commits format for commit messages.
+- Use the present tense.
+- Use the imperative mood.
+- Limit the first line to 72 characters or less.
+- Start the commit message with a reference to the GitHub Issue number, such as `feat(#1234):`
+- If the commit relates to an issue, include "Closes #ISSUE_NUMBER" in the commit message.
+- If the commit relates to a breaking change, include "BREAKING CHANGE:" in the commit message.
+
+## Pull Requests
+- Only add a single commit to a Pull Request.
+- Start the Pull Request title with a reference to the GitHub Issue number, such as `feat(#1234):`
+
+## CSS and Design Tokens
+- Use CSS custom properties that are defined by our design tokens.
+- Name custom properties for global styles in this format: `--goa-[category]-[name]`, such as `--goa-color-primary`.
+- Name custom properties for component-specific styles in this format: `--goa-[component]-[category]-[name]`.

src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx

@@ -13,7 +13,7 @@ export function AccessibilityEmpty(props: Props) {
             component page in Figma.
           </a>{" "}
         </GoabText>
-        <GoabText size="body-m" mb="none" mt="m">
+        <GoabText size="body-m" mb="none" mt="none">
           More accessibility guidance for design and development is coming soon.
         </GoabText>
       </GoabContainer>

src/examples/ask-a-user-for-bank-details.tsx

@@ -0,0 +1,197 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabBlock, GoabFormItem, GoabInput } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+
+export const AskAUserForBankDetails = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const noop = () => {}
+
+  return (
+    <Sandbox fullWidth flags={["reactive"]} skipRenderOnly={"react"}>
+      {/*React code*/}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+            const [name, setName] = useState<string>('');
+            const [account, setAccount] = useState<string>('');
+            const [bank, setBank] = useState<string>('');
+            function onChangeName(event: GoabInputOnChangeDetail) {
+                setName(event.value);
+            }
+            function onChangeAccount(event: GoabInputOnChangeDetail) {
+                setAccount(event.value);
+            }
+            function onChangeBank(event: GoabInputOnChangeDetail) {
+                setBank(event.value);
+            }
+        `}
+      />}
+
+      {version === "old" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+            <GoAFormItem label="Bank account details" labelSize="large">
+                <GoABlock gap="m" direction="column">
+                    <GoAFormItem label="Name on account">
+                        <GoAInput
+                            onChange={onChangeName}
+                            value={name}
+                            name="name"
+                            width="100%"
+                        />
+                    </GoAFormItem>
+                    <GoAFormItem label="Account number">
+                        <GoAInput
+                            onChange={onChangeAccount}
+                            value={account}
+                            name="account"
+                            width="167px"
+                        />
+                    </GoAFormItem>
+                    <GoAFormItem label="Bank number" helpText="Must be between 6 and 8 digits long">
+                        <GoAInput
+                            onChange={onChangeBank}
+                            value={bank}
+                            name="bank"
+                            width="167px"
+                            maxLength={8}
+                        />
+                    </GoAFormItem>
+                </GoABlock>
+            </GoAFormItem>
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+            const [name, setName] = useState<string>('');
+            const [account, setAccount] = useState<string>('');
+            const [bank, setBank] = useState<string>('');
+            function onChangeName(event: GoabInputOnChangeDetail) {
+                setName(event.value);
+            }
+            function onChangeAccount(event: GoabInputOnChangeDetail) {
+                setAccount(event.value);
+            }
+            function onChangeBank(event: GoabInputOnChangeDetail) {
+                setBank(event.value);
+            }
+        `}
+      />}
+      {version === "new" && <CodeSnippet
+        lang="html"
+        tags="react"
+        allowCopy={true}
+        code={`
+        <GoabFormItem label="Bank account details" labelSize="large">
+            <GoabBlock gap="m" direction="column">
+                <GoabFormItem label="Name on account">
+                    <GoabInput
+                        onChange={onChangeName}
+                        value={name}
+                        name="name"
+                        width="100%"
+                    />
+                </GoabFormItem>
+                <GoabFormItem label="Account number">
+                    <GoabInput
+                        onChange={onChangeAccount}
+                        value={account}
+                        name="account"
+                        width="167px"
+                    />
+                </GoabFormItem>
+                <GoabFormItem label="Bank number" helpText="Must be between 6 and 8 digits long">
+                    <GoabInput
+                        onChange={onChangeBank}
+                        value={bank}
+                        name="bank"
+                        width="167px"
+                        maxLength={8}
+                    />
+                </GoabFormItem>
+            </GoabBlock>
+        </GoabFormItem>
+        `}
+      />}
+
+      {/*Angular code*/}
+
+      {version === "old" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+            export class ExampleComponent {
+                bankDetails = new FormGroup({
+                    name: new FormControl(""),
+                    account: new FormControl(""),
+                    bank: new FormControl(""),
+                });
+            }
+        `}
+      />}
+
+      {version === "new" && <CodeSnippet
+        lang="typescript"
+        tags={["angular", "reactive"]}
+        allowCopy={true}
+        code={`
+            export class ExampleComponent {
+                form!: FormGroup;
+                constructor(private fb: FormBuilder) {
+                    this.form = this.fb.group({
+                        name: [''],
+                        account: [''],
+                        bank: [''],
+                    });
+                }
+            }
+        `}
+      />}
+
+
+      <GoabFormItem label="Bank account details" labelSize="large">
+        <GoabBlock gap="m" direction="column">
+          <GoabFormItem label="Name on account">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="name"
+              width="100%"
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Account number">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="account"
+              width="167px"
+            />
+          </GoabFormItem>
+          <GoabFormItem label="Bank number" helpText="Must be between 6 and 8 digits long">
+            <GoabInput
+              onChange={noop}
+              value=""
+              name="bank"
+              width="167px"
+              maxLength={8}
+            />
+          </GoabFormItem>
+        </GoabBlock>
+      </GoabFormItem>
+    </Sandbox>
+  )
+}
+
+export default AskAUserForBankDetails;

src/examples/ask-a-user-for-direct-deposit-information.tsx

@@ -139,7 +139,7 @@ export const AskAUserForDirectDepositInformation = () => {
         </GoabFormItem>
       </form>
 
-      <GoabDetails heading="Where can I find this information on a personal cheque?" mt="l">
+      <GoabDetails heading="Where can I find this information on a personal cheque?" mt="xl">
         <p>
           Below is an example of where you can find the required bank information on a personal
           cheque.