From 3d5af444eb6beb0d66dc0f04e06c219d8885a0c4 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Tue, 16 Sep 2025 14:14:18 -0600
Subject: [PATCH 1/2] feat(#2145): header - added contextual examples

---
 src/examples/app-header/AppHeaderExamples.tsx |  14 ++
 src/examples/header-logged-in-menu.tsx        | 126 ++++++++++++++++++
 src/examples/header-with-sign-in.tsx          |  94 +++++++++++++
 src/routes/components/AppHeader.tsx           |   2 +-
 4 files changed, 235 insertions(+), 1 deletion(-)
 create mode 100644 src/examples/header-logged-in-menu.tsx
 create mode 100644 src/examples/header-with-sign-in.tsx

diff --git a/src/examples/app-header/AppHeaderExamples.tsx b/src/examples/app-header/AppHeaderExamples.tsx
index 160267ff8..8bafb11e0 100644
--- a/src/examples/app-header/AppHeaderExamples.tsx
+++ b/src/examples/app-header/AppHeaderExamples.tsx
@@ -1,5 +1,7 @@
 import { HeaderWithNavigation } from "@examples/header-with-navigation.tsx";
 import { HeaderWithMenuClickEvent } from "@examples/header-with-menu-click-event.tsx";
+import { HeaderSignIn } from "@examples/header-with-sign-in.tsx";
+import { HeaderLoggedInMenu } from "@examples/header-logged-in-menu.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
 
 export const AppHeaderExamples = () => {
@@ -16,6 +18,18 @@ export const AppHeaderExamples = () => {
         figmaExample="">
       </SandboxHeader>
       <HeaderWithMenuClickEvent />
+
+      <SandboxHeader
+        exampleTitle="Sign in using the site header"
+        figmaExample="">
+      </SandboxHeader>
+      <HeaderSignIn />
+
+      <SandboxHeader
+        exampleTitle="Access user settings in the site header"
+        figmaExample="">
+      </SandboxHeader>
+      <HeaderLoggedInMenu />
     </>
   );
 };
diff --git a/src/examples/header-logged-in-menu.tsx b/src/examples/header-logged-in-menu.tsx
new file mode 100644
index 000000000..99b06f511
--- /dev/null
+++ b/src/examples/header-logged-in-menu.tsx
@@ -0,0 +1,126 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppHeader, GoabAppHeaderMenu, GoabMicrositeHeader } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const HeaderLoggedInMenu = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox fullWidth skipRender>
+      <GoabMicrositeHeader type="live"></GoabMicrositeHeader>
+      <GoabAppHeader
+        url="https://example.com"
+        heading="Design System"
+        fullMenuBreakpoint={1500}>
+        <a href="#">Services</a>
+        <GoabAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
+            <a href="#">Manage account</a>
+            <a href="#">Request new staff account</a>
+            <a href="#">System admin</a>
+            <a href="#" className="interactive">Sign out</a>
+        </GoabAppHeaderMenu>
+      </GoabAppHeader>
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goa-microsite-header type="live"></goa-microsite-header>
+                <goa-app-header
+                  url="https://example.com"
+                  heading="Design System"
+                  [fullmenubreakpoint]="1500"
+                  [hasmenuclickhandler]="true"
+                  (_menuClick)="handleMenuClick()"
+                >
+                  <a href="#">Services</a>
+                  <goa-app-header-menu heading="John Smith" leadingIcon="person-circle">
+                      <a href="#">Manage account</a>
+                      <a href="#">Request new staff account</a>
+                      <a href="#">System admin</a>
+                      <a href="#" className="interactive">Sign out</a>
+                  </goa-app-header-menu>
+                </goa-app-header>
+              `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-microsite-header type="live"></goab-microsite-header>
+                <goab-app-header
+                  url="https://example.com"
+                  heading="Design System"
+                  [fullMenuBreakpoint]="1500"
+                  (onMenuClick)="handleMenuClick()"
+                >
+                  <a href="#">Services</a>
+                  <goab-app-header-menu heading="John Smith" leadingIcon="person-circle">
+                      <a href="#">Manage account</a>
+                      <a href="#">Request new staff account</a>
+                      <a href="#">System admin</a>
+                      <a href="#" className="interactive">Sign out</a>
+                  </goab-app-header-menu>
+                </goab-app-header>
+              `}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAMicrositeHeader type="live"></GoAMicrositeHeader>
+                  <GoAAppHeader
+                    url="https://example.com"
+                    heading="Design System"
+                    onMenuClick={handleMenuClick}
+                    fullMenuBreakpoint={1500}>
+                      <a href="#">Services</a>
+                      <GoAAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
+                          <a href="#">Manage account</a>
+                          <a href="#">Request new staff account</a>
+                          <a href="#">System admin</a>
+                          <a href="#" className="interactive">Sign out</a>
+                      </GoAAppHeaderMenu>
+                  </GoAAppHeader>
+              `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabMicrositeHeader type="live"></GoabMicrositeHeader>
+                  <GoabAppHeader
+                    url="https://example.com"
+                    heading="Design System"
+                    onMenuClick={handleMenuClick}
+                    fullMenuBreakpoint={1500}>
+                      <a href="#">Services</a>
+                      <GoabAppHeaderMenu heading="John Smith" leadingIcon="person-circle">
+                          <a href="#">Manage account</a>
+                          <a href="#">Request new staff account</a>
+                          <a href="#">System admin</a>
+                          <a href="#" className="interactive">Sign out</a>
+                      </GoabAppHeaderMenu>
+                  </GoabAppHeader>
+              `}
+        />
+      )}
+    </Sandbox>
+  )
+}
+
+export default HeaderLoggedInMenu;
diff --git a/src/examples/header-with-sign-in.tsx b/src/examples/header-with-sign-in.tsx
new file mode 100644
index 000000000..373a9cecf
--- /dev/null
+++ b/src/examples/header-with-sign-in.tsx
@@ -0,0 +1,94 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabAppHeader, GoabMicrositeHeader } from "@abgov/react-components";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const HeaderSignIn = () => {
+  const {version} = useContext(LanguageVersionContext);
+  return (
+    <Sandbox fullWidth skipRender>
+      <GoabMicrositeHeader type="live"></GoabMicrositeHeader>
+      <GoabAppHeader
+        url="https://example.com"
+        heading="Service name"
+        fullMenuBreakpoint={1500}>
+        <a href="#" className="interactive">Sign in</a>
+      </GoabAppHeader>
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goa-microsite-header type="live"></goa-microsite-header>
+                <goa-app-header
+                  url="https://example.com"
+                  heading="Design System"
+                  [fullmenubreakpoint]="1500"
+                  [hasmenuclickhandler]="true"
+                  (_menuClick)="handleMenuClick()"
+                >
+                  <a href="#" className="interactive">Sign in</a>
+                </goa-app-header>
+              `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                <goab-microsite-header type="live"></goab-microsite-header>
+                <goab-app-header
+                  url="https://example.com"
+                  heading="Design System"
+                  [fullMenuBreakpoint]="1500"
+                  (onMenuClick)="handleMenuClick()"
+                >
+                  <a href="#" className="interactive">Sign in</a>
+                </goab-app-header>
+              `}
+        />
+      )}
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoAMicrositeHeader type="live"></GoAMicrositeHeader>
+              <GoAAppHeader
+                url="https://example.com"
+                heading="Service name"
+                fullMenuBreakpoint={1500}>
+                <a href="#" className="interactive">Sign in</a>
+              </GoAAppHeader>
+              `}
+        />
+      )}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+              <GoabMicrositeHeader type="live"></GoabMicrositeHeader>
+              <GoabAppHeader
+                url="https://example.com"
+                heading="Service name"
+                fullMenuBreakpoint={1500}>
+                <a href="#" className="interactive">Sign in</a>
+              </GoabAppHeader>
+              `}
+        />
+      )}
+    </Sandbox>
+  )
+}
+
+export default HeaderSignIn;
diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx
index cdbdd36d8..13f3576c1 100644
--- a/src/routes/components/AppHeader.tsx
+++ b/src/routes/components/AppHeader.tsx
@@ -182,7 +182,7 @@ export default function AppHeaderPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="2" />
+                <GoabBadge type="information" content="4" />
               </>
             }
           >

From b3bceabe24c723a64ae5e3f910b3e55c200f7041 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Wed, 24 Sep 2025 14:59:39 -0600
Subject: [PATCH 2/2] feat(#2145): header - turned 'className' to 'class' for
 angular examples

---
 src/examples/header-logged-in-menu.tsx | 4 ++--
 src/examples/header-with-sign-in.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/examples/header-logged-in-menu.tsx b/src/examples/header-logged-in-menu.tsx
index 99b06f511..fa8bea433 100644
--- a/src/examples/header-logged-in-menu.tsx
+++ b/src/examples/header-logged-in-menu.tsx
@@ -41,7 +41,7 @@ export const HeaderLoggedInMenu = () => {
                       <a href="#">Manage account</a>
                       <a href="#">Request new staff account</a>
                       <a href="#">System admin</a>
-                      <a href="#" className="interactive">Sign out</a>
+                      <a href="#" class="interactive">Sign out</a>
                   </goa-app-header-menu>
                 </goa-app-header>
               `}
@@ -66,7 +66,7 @@ export const HeaderLoggedInMenu = () => {
                       <a href="#">Manage account</a>
                       <a href="#">Request new staff account</a>
                       <a href="#">System admin</a>
-                      <a href="#" className="interactive">Sign out</a>
+                      <a href="#" class="interactive">Sign out</a>
                   </goab-app-header-menu>
                 </goab-app-header>
               `}
diff --git a/src/examples/header-with-sign-in.tsx b/src/examples/header-with-sign-in.tsx
index 373a9cecf..db671ea77 100644
--- a/src/examples/header-with-sign-in.tsx
+++ b/src/examples/header-with-sign-in.tsx
@@ -30,7 +30,7 @@ export const HeaderSignIn = () => {
                   [hasmenuclickhandler]="true"
                   (_menuClick)="handleMenuClick()"
                 >
-                  <a href="#" className="interactive">Sign in</a>
+                  <a href="#" class="interactive">Sign in</a>
                 </goa-app-header>
               `}
         />
@@ -49,7 +49,7 @@ export const HeaderSignIn = () => {
                   [fullMenuBreakpoint]="1500"
                   (onMenuClick)="handleMenuClick()"
                 >
-                  <a href="#" className="interactive">Sign in</a>
+                  <a href="#" class="interactive">Sign in</a>
                 </goab-app-header>
               `}
         />