From afb9ee97517f81f546e2aa318b33f251c5584b93 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Fri, 1 Aug 2025 16:24:31 -0600
Subject: [PATCH 1/3] feat(#2140): microsite header - added angular and react
 sample code

---
 ...e-user-to-give-feedback-to-the-service.tsx | 124 +++++++++++++++++-
 src/examples/show-version-number.tsx          |  71 ++++++++++
 2 files changed, 194 insertions(+), 1 deletion(-)

diff --git a/src/examples/link-the-user-to-give-feedback-to-the-service.tsx b/src/examples/link-the-user-to-give-feedback-to-the-service.tsx
index 5684c2e74..cf4682fdf 100644
--- a/src/examples/link-the-user-to-give-feedback-to-the-service.tsx
+++ b/src/examples/link-the-user-to-give-feedback-to-the-service.tsx
@@ -1,15 +1,137 @@
 import { GoabMicrositeHeader } from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export default function GiveFeedbackLinkExample() {
+  const {version} = useContext(LanguageVersionContext);
   const onClick = () => {
     console.log("Feedback clicked");
     alert("Thank you for your feedback!");
   };
+
   return (
     <>
 
-      <Sandbox fullWidth>
+      <Sandbox fullWidth skipRender>
+
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            @Component({
+              selector: "abgov-microsite-header",
+              templateUrl: "./microsite-header.component.html",
+            })
+            export class MicrositeHeaderComponent {
+              constructor() {}
+
+              handleFeedbackClick(event: Event) {
+                console.log("Feedback clicked");
+                alert("Thank you for your feedback!");
+              }
+            }
+          `}
+        />}
+
+         {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goa-microsite-header
+              type="alpha"
+              [hasfeedbackhandler]="true"
+              (_feedbackClick)="handleFeedbackClick($event)"
+            ></goa-microsite-header>
+          `}
+        />}
+
+        {/*Angular code*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            @Component({
+              selector: "abgov-microsite-header",
+              templateUrl: "./microsite-header.component.html",
+            })
+            export class MicrositeHeaderComponent {
+              constructor() {}
+
+              handleFeedbackClick(event: Event) {
+                console.log("Feedback clicked");
+                alert("Thank you for your feedback!");
+              }
+            }
+          `}
+        />}
+        
+        {/*Angular code*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-microsite-header
+              type="alpha"
+              [hasfeedbackhandler]="true"
+              (_feedbackClick)="handleFeedbackClick($event)"
+            ></goab-microsite-header>
+          `}
+        />}
+
+        {/*React code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            const onClick = () => {
+              console.log("Feedback clicked");
+              alert("Thank you for your feedback!");
+            };
+          `}
+        />}
+
+        {/*React code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoAMicrositeHeader type="alpha" onFeedbackClick={onClick} />
+          `}
+        />}
+        
+        {/*React code*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            const onClick = () => {
+              console.log("Feedback clicked");
+              alert("Thank you for your feedback!");
+            };
+          `}
+        />}
+
+        {/*React code*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />
+          `}
+        />}
+
         <GoabMicrositeHeader type="alpha" onFeedbackClick={onClick} />
         {/* ...React + Angular code snippets here (same as original)... */}
       </Sandbox>
diff --git a/src/examples/show-version-number.tsx b/src/examples/show-version-number.tsx
index 2c16a9e97..354a01deb 100644
--- a/src/examples/show-version-number.tsx
+++ b/src/examples/show-version-number.tsx
@@ -1,11 +1,82 @@
 import { GoabMicrositeHeader } from "@abgov/react-components";
 import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export default function ShowVersionNumberExample() {
+  const {version} = useContext(LanguageVersionContext);
 
   return (
     <>
       <Sandbox fullWidth skipRender>
+
+        {/*Angular code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goa-microsite-header type="alpha">
+              <div slot="version">
+                <span>Slotted <b>version text</b>.</span>
+                <span>v1.23</span>
+              </div>
+            </goa-microsite-header>
+          `}
+        />}
+        
+        {/*Angular code*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-microsite-header type="alpha">
+              <div slot="version">
+                <span>Slotted <b>version text</b>.</span>
+                <span>v1.23</span>
+              </div>
+            </goab-microsite-header>
+          `}
+        />}
+
+        {/*React code*/}
+        {version === "old" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoAMicrositeHeader
+              type="alpha"
+              version={
+                <>
+                  <span>Slotted <b>version text</b>.</span>
+                  <span>v1.23</span>
+                </>
+              }
+            ></GoAMicrositeHeader>
+          `}
+        />}
+
+        {/*React code*/}
+        {version === "new" && <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+            <GoabMicrositeHeader
+              type="alpha"
+              version={
+                <>
+                  <span>Slotted <b>version text</b>.</span>
+                  <span>v1.23</span>
+                </>
+              }
+            ></GoabMicrositeHeader>
+          `}
+        />}
+
         {/* ...React + Angular code snippets here (same as original)... */}
         <GoabMicrositeHeader
           type="alpha"

From 62b678050b983f2386b0eb714420a74124e507d1 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Fri, 8 Aug 2025 12:44:36 -0600
Subject: [PATCH 2/3] feat(#2140): microsite header - removed the "slot" text
 from Version example

---
 src/examples/show-version-number.tsx | 23 +++--------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/examples/show-version-number.tsx b/src/examples/show-version-number.tsx
index 354a01deb..a494e5c12 100644
--- a/src/examples/show-version-number.tsx
+++ b/src/examples/show-version-number.tsx
@@ -19,7 +19,6 @@ export default function ShowVersionNumberExample() {
           code={`
             <goa-microsite-header type="alpha">
               <div slot="version">
-                <span>Slotted <b>version text</b>.</span>
                 <span>v1.23</span>
               </div>
             </goa-microsite-header>
@@ -34,7 +33,6 @@ export default function ShowVersionNumberExample() {
           code={`
             <goab-microsite-header type="alpha">
               <div slot="version">
-                <span>Slotted <b>version text</b>.</span>
                 <span>v1.23</span>
               </div>
             </goab-microsite-header>
@@ -49,12 +47,7 @@ export default function ShowVersionNumberExample() {
           code={`
             <GoAMicrositeHeader
               type="alpha"
-              version={
-                <>
-                  <span>Slotted <b>version text</b>.</span>
-                  <span>v1.23</span>
-                </>
-              }
+              version={<span>v1.23</span>}
             ></GoAMicrositeHeader>
           `}
         />}
@@ -67,12 +60,7 @@ export default function ShowVersionNumberExample() {
           code={`
             <GoabMicrositeHeader
               type="alpha"
-              version={
-                <>
-                  <span>Slotted <b>version text</b>.</span>
-                  <span>v1.23</span>
-                </>
-              }
+              version={<span>v1.23</span>}
             ></GoabMicrositeHeader>
           `}
         />}
@@ -80,12 +68,7 @@ export default function ShowVersionNumberExample() {
         {/* ...React + Angular code snippets here (same as original)... */}
         <GoabMicrositeHeader
           type="alpha"
-          version={
-            <>
-              <span>Slotted <b>version text</b>.</span>
-              <span>v1.23</span>
-            </>
-          }
+          version={<span>v1.23</span>}
         />
       </Sandbox>
     </>

From 6d66863bd59642af5d0d927c2339289c39ebbb55 Mon Sep 17 00:00:00 2001
From: Miguel <miguel.soco@gov.ab.ca>
Date: Thu, 14 Aug 2025 13:12:54 -0600
Subject: [PATCH 3/3] feat(#2140): microsite header - removed "span" tags to
 center version text.

---
 src/examples/show-version-number.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/examples/show-version-number.tsx b/src/examples/show-version-number.tsx
index a494e5c12..f75609233 100644
--- a/src/examples/show-version-number.tsx
+++ b/src/examples/show-version-number.tsx
@@ -18,9 +18,7 @@ export default function ShowVersionNumberExample() {
           allowCopy={true}
           code={`
             <goa-microsite-header type="alpha">
-              <div slot="version">
-                <span>v1.23</span>
-              </div>
+              <div slot="version">v1.23</div>
             </goa-microsite-header>
           `}
         />}
@@ -32,9 +30,7 @@ export default function ShowVersionNumberExample() {
           allowCopy={true}
           code={`
             <goab-microsite-header type="alpha">
-              <div slot="version">
-                <span>v1.23</span>
-              </div>
+              <div slot="version">v1.23</div>
             </goab-microsite-header>
           `}
         />}
@@ -47,7 +43,7 @@ export default function ShowVersionNumberExample() {
           code={`
             <GoAMicrositeHeader
               type="alpha"
-              version={<span>v1.23</span>}
+              version="v1.23"
             ></GoAMicrositeHeader>
           `}
         />}
@@ -60,7 +56,7 @@ export default function ShowVersionNumberExample() {
           code={`
             <GoabMicrositeHeader
               type="alpha"
-              version={<span>v1.23</span>}
+              version="v1.23"
             ></GoabMicrositeHeader>
           `}
         />}
@@ -68,7 +64,7 @@ export default function ShowVersionNumberExample() {
         {/* ...React + Angular code snippets here (same as original)... */}
         <GoabMicrositeHeader
           type="alpha"
-          version={<span>v1.23</span>}
+          version="v1.23"
         />
       </Sandbox>
     </>