From 91ee30858298fb170da8a00c8c85a97f609787a5 Mon Sep 17 00:00:00 2001
From: syedszeeshan <47701214+syedszeeshan@users.noreply.github.com>
Date: Mon, 16 Jun 2025 19:59:10 -0400
Subject: [PATCH 1/2] fix(#2714): docs popover examples

---
 src/examples/popover/ButtonClosePopover.tsx   |  94 ++++++++++++++
 .../popover/IconButtonClosePopover.tsx        |  91 ++++++++++++++
 src/examples/popover/LinkClosePopover.tsx     |  87 +++++++++++++
 src/examples/popover/PopoverExamples.tsx      |  24 ++++
 src/routes/components/Popover.tsx             | 119 ++++++++++--------
 5 files changed, 364 insertions(+), 51 deletions(-)
 create mode 100644 src/examples/popover/ButtonClosePopover.tsx
 create mode 100644 src/examples/popover/IconButtonClosePopover.tsx
 create mode 100644 src/examples/popover/LinkClosePopover.tsx
 create mode 100644 src/examples/popover/PopoverExamples.tsx

diff --git a/src/examples/popover/ButtonClosePopover.tsx b/src/examples/popover/ButtonClosePopover.tsx
new file mode 100644
index 000000000..8fa94ebbe
--- /dev/null
+++ b/src/examples/popover/ButtonClosePopover.tsx
@@ -0,0 +1,94 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBlock, GoabButton, GoabPopover } from "@abgov/react-components";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+
+export const ButtonClosePopover = () => {
+  const { version } = useContext(LanguageVersionContext);
+
+  const popoverTargetWithClose = (
+    <GoabButton type="primary" size="normal">
+      Click to open
+    </GoabButton>
+  );
+
+  return (
+    <Sandbox skipRender>
+      {/* React Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              const popoverTargetWithClose = (
+                <GoabButton type="primary" size="normal">
+                  Click to open
+                </GoabButton>
+              );
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+                  <p>This popover has a close button inside</p>
+                  <p>Click the button below to close this popover.</p>
+                  <GoabButton 
+                    type="secondary" 
+                    size="compact" 
+                    action="close"
+                  >
+                    Close Popover
+                  </GoabButton>
+                </GoabPopover>    
+            `}
+        />
+      )}
+
+      {/* Angular Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-popover [target]="closeTarget" minWidth="250px">
+              <p>This popover has a close button inside</p>
+              <p>Click the button below to close this popover.</p>
+              <goab-button 
+                type="secondary" 
+                size="compact" 
+                action="close">
+                Close Popover
+              </goab-button>
+              
+              <ng-template #closeTarget>
+                <goab-button type="primary" size="normal">
+                  Click to open
+                </goab-button>
+              </ng-template>
+            </goab-popover>
+            `}
+        />
+      )}
+
+      {/* Sandbox Example */}
+      <GoabBlock gap="xl" direction="column">
+        <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+          <p>This popover has a close button inside</p>
+          <p>Click the button below to close this popover.</p>
+          <GoabButton type="secondary" size="compact" action="close">
+            Close Popover
+          </GoabButton>
+        </GoabPopover>
+      </GoabBlock>
+    </Sandbox>
+  );
+};
diff --git a/src/examples/popover/IconButtonClosePopover.tsx b/src/examples/popover/IconButtonClosePopover.tsx
new file mode 100644
index 000000000..d5c210ab0
--- /dev/null
+++ b/src/examples/popover/IconButtonClosePopover.tsx
@@ -0,0 +1,91 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBlock, GoabButton, GoabIconButton, GoabPopover } from "@abgov/react-components";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+
+export const IconButtonClosePopover = () => {
+  const { version } = useContext(LanguageVersionContext);
+
+  const popoverTargetWithClose = (
+    <GoabButton type="primary" size="normal">
+      Click to open
+    </GoabButton>
+  );
+
+  return (
+    <Sandbox skipRender>
+      {/* React Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              const popoverTargetWithClose = (
+                <GoabButton type="primary" size="normal">
+                  Click to open
+                </GoabButton>
+              );
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+                  <p>This popover has a close icon button inside</p>
+                  <p>Click the icon button below to close this popover.</p>
+                  <GoabIconButton 
+                    icon="close" 
+                    variant="color" 
+                    action="close"
+                    ariaLabel="Close Popover"
+                  />
+                </GoabPopover>    
+            `}
+        />
+      )}
+
+      {/* Angular Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-popover [target]="closeTarget" minWidth="250px">
+              <p>This popover has a close icon button inside</p>
+              <p>Click the icon button below to close this popover.</p>
+              <goab-icon-button 
+                icon="close" 
+                variant="color" 
+                action="close"
+                ariaLabel="Close Popover">
+              </goab-icon-button>
+              
+              <ng-template #closeTarget>
+                <goab-button type="primary" size="normal">
+                  Click to open (with close icon button)
+                </goab-button>
+              </ng-template>
+            </goab-popover>
+            `}
+        />
+      )}
+
+      {/* Sandbox Example */}
+      <GoabBlock gap="xl" direction="column">
+        <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+          <GoabIconButton icon="close" variant="color" action="close" ariaLabel="Close Popover" />
+          <p>This popover has a close icon button inside</p>
+          <p>Click the icon button above to close this popover.</p>
+        </GoabPopover>
+      </GoabBlock>
+    </Sandbox>
+  );
+};
diff --git a/src/examples/popover/LinkClosePopover.tsx b/src/examples/popover/LinkClosePopover.tsx
new file mode 100644
index 000000000..49d247aab
--- /dev/null
+++ b/src/examples/popover/LinkClosePopover.tsx
@@ -0,0 +1,87 @@
+import { Sandbox } from "@components/sandbox";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { GoabBlock, GoabButton, GoabLink, GoabPopover } from "@abgov/react-components";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+import { useContext } from "react";
+
+export const LinkClosePopover = () => {
+  const { version } = useContext(LanguageVersionContext);
+
+  const popoverTargetWithClose = (
+    <GoabButton type="primary" size="normal">
+      Click to open
+    </GoabButton>
+  );
+
+  return (
+    <Sandbox skipRender>
+      {/* React Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+              const popoverTargetWithClose = (
+                <GoabButton type="primary" size="normal">
+                  Click to open
+                </GoabButton>
+              );
+            `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="react"
+          allowCopy={true}
+          code={`
+                <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+                  <p>This popover has a close link inside</p>
+                  <p>Click the link below to close this popover.</p>
+                  <GoabLink action="close">
+                    <a href="#">Close Popover</a>
+                  </GoabLink>
+                </GoabPopover>    
+            `}
+        />
+      )}
+
+      {/* Angular Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          allowCopy={true}
+          code={`
+            <goab-popover [target]="closeTarget" minWidth="250px">
+              <p>This popover has a close link inside</p>
+              <p>Click the link below to close this popover.</p>
+              <goab-link action="close">
+                <a href="#">Close Popover</a>
+              </goab-link>
+              
+              <ng-template #closeTarget>
+                <goab-button type="primary" size="normal">
+                  Click to open
+                </goab-button>
+              </ng-template>
+            </goab-popover>
+            `}
+        />
+      )}
+
+      {/* Sandbox Example */}
+      <GoabBlock gap="xl" direction="column">
+        <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+          <p>This popover has a close link inside</p>
+          <p>Click the link below to close this popover.</p>
+          <GoabLink action="close">
+            <a href="popover#tab-1">Close Popover</a>
+          </GoabLink>
+        </GoabPopover>
+      </GoabBlock>
+    </Sandbox>
+  );
+};
diff --git a/src/examples/popover/PopoverExamples.tsx b/src/examples/popover/PopoverExamples.tsx
new file mode 100644
index 000000000..4e4882496
--- /dev/null
+++ b/src/examples/popover/PopoverExamples.tsx
@@ -0,0 +1,24 @@
+import { ButtonClosePopover } from "@examples/popover/ButtonClosePopover";
+import { LinkClosePopover } from "@examples/popover/LinkClosePopover";
+import { IconButtonClosePopover } from "@examples/popover/IconButtonClosePopover";
+import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+
+export const PopoverExamples = () => {
+  return (
+    <>
+      {/*Popover Example - close using a button*/}
+      <SandboxHeader exampleTitle="Closing Popovers with Button" figmaExample=""></SandboxHeader>
+      <ButtonClosePopover />
+
+      {/*Popover example - close using a link*/}
+      <SandboxHeader exampleTitle="Closing Popovers with Link" figmaExample=""></SandboxHeader>
+      <LinkClosePopover />
+
+      {/*Popover example - close using an icon-button*/}
+      <SandboxHeader
+        exampleTitle="Closing Popovers with Icon Button"
+        figmaExample=""></SandboxHeader>
+      <IconButtonClosePopover />
+    </>
+  );
+};
diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx
index f2e254328..33c5f6b9f 100644
--- a/src/routes/components/Popover.tsx
+++ b/src/routes/components/Popover.tsx
@@ -12,17 +12,20 @@ import { ComponentContent } from "@components/component-content/ComponentContent
 import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 import {
   LegacyMarginProperty,
-  LegacyTestIdProperties, MarginProperty,
-  TestIdProperty
+  LegacyTestIdProperties,
+  MarginProperty,
+  TestIdProperty,
 } from "@components/component-properties/common-properties.ts";
 import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx";
 import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx";
-import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx";
+//import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx";
+import { PopoverExamples } from "@examples/popover/PopoverExamples";
 
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302109";
+const FIGMA_LINK =
+  "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302109";
 
 export default function PopoverPage() {
-  const {version} = useContext(LanguageVersionContext);
+  const { version } = useContext(LanguageVersionContext);
   const [popoverProps, setPopoverProps] = useState({});
   const [popoverBindings, setPopoverBindings] = useState<ComponentBinding[]>([
     {
@@ -119,7 +122,7 @@ export default function PopoverPage() {
       name: "maxWidth",
       type: "string",
       description: "Sets the maximum width of the popover container.",
-      defaultValue: "320px"
+      defaultValue: "320px",
     },
     {
       name: "minWidth",
@@ -183,18 +186,20 @@ export default function PopoverPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
         <GoabTabs initialTab={1}>
           <GoabTab heading="Code playground">
-            <h2 id="component" style={{ display: "none" }}>Playground</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Playground
+            </h2>
             <Sandbox properties={popoverBindings} skipRender onChange={onSandboxChange}>
               {/*Must be skipRender because Sandbox doesn't support slot target*/}
               {/*Angular*/}
-              {version === "old" && <CodeSnippet
-                lang="html"
-                tags="angular"
-                allowCopy={true}
-                code={`
+              {version === "old" && (
+                <CodeSnippet
+                  lang="html"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
                 <goa-popover ${propsToString(popoverProps, "angular", version)}>
                   <p>This is a popover</p>
                   It can be used for a number of different contexts.
@@ -203,13 +208,15 @@ export default function PopoverPage() {
                   </div>
                 </goa-popover>
               `}
-              />}
+                />
+              )}
 
-              {version === "new" && <CodeSnippet
-                lang="html"
-                tags="angular"
-                allowCopy={true}
-                code={`
+              {version === "new" && (
+                <CodeSnippet
+                  lang="html"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
                 <goab-popover ${propsToString(popoverProps, "angular", version)} [target]="target">
                   <p>This is a popover</p>
                   It can be used for a number of different contexts.
@@ -218,58 +225,67 @@ export default function PopoverPage() {
                   </ng-template>
                 </goab-popover>
               `}
-              />}
+                />
+              )}
 
               {/*React*/}
-              {version === "old" && <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                 const target = (
                   <GoAButton type="secondary" size="compact">
                     Click me
                   </GoAButton>
                 );
               `}
-              />}
+                />
+              )}
 
-              {version === "new" && <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                 const target = (
                   <GoabButton type="secondary" size="compact">
                     Click me
                   </GoabButton>
                 );
               `}
-              />}
+                />
+              )}
 
-              {version === "old" && <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {version === "old" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                 <GoAPopover target={target} ${propsToString(popoverProps, "react", version)}>
                   <p>This is a popover</p>
                   It can be used for a number of different contexts.
                 </GoAPopover>
               `}
-              />}
+                />
+              )}
 
-              {version === "new" && <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {version === "new" && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                 <GoabPopover target={target} ${propsToString(popoverProps, "react", version)}>
                   <p>This is a popover</p>
                   It can be used for a number of different contexts.
                 </GoabPopover>
               `}
-              />}
+                />
+              )}
 
               <GoabPopover
                 {...popoverProps}
@@ -277,24 +293,25 @@ export default function PopoverPage() {
                   <GoabButton type="secondary" size="compact">
                     Click me
                   </GoabButton>
-                }
-              >
+                }>
                 <p>This is a popover</p>
                 It can be used for a number of different contexts.
               </GoabPopover>
             </Sandbox>
-            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+            <ComponentProperties
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
           </GoabTab>
 
           <GoabTab
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="0" />
+                <GoabBadge type="information" content="3" />
               </>
-            }
-          >
-            <ExamplesEmpty />
+            }>
+            <PopoverExamples />
           </GoabTab>
 
           <GoabTab heading="Design">

From 0e2a74814035ce04ad4a50429d2cd8463189ae30 Mon Sep 17 00:00:00 2001
From: syedszeeshan <47701214+syedszeeshan@users.noreply.github.com>
Date: Tue, 24 Jun 2025 12:57:20 -0400
Subject: [PATCH 2/2] fix(#2714): docs popover examples

---
 .../popover/IconButtonClosePopover.tsx        | 36 +++++++++++--------
 src/examples/popover/PopoverExamples.tsx      | 16 +++++++--
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/examples/popover/IconButtonClosePopover.tsx b/src/examples/popover/IconButtonClosePopover.tsx
index d5c210ab0..4d75a6053 100644
--- a/src/examples/popover/IconButtonClosePopover.tsx
+++ b/src/examples/popover/IconButtonClosePopover.tsx
@@ -38,14 +38,16 @@ export const IconButtonClosePopover = () => {
           allowCopy={true}
           code={`
                 <GoabPopover target={popoverTargetWithClose} minWidth="250px">
+                  <GoabBlock direction="column" alignment="end">
+                    <GoabIconButton 
+                      icon="close" 
+                      variant="color" 
+                      action="close"
+                      ariaLabel="Close Popover"
+                    />
+                  </GoabBlock>
                   <p>This popover has a close icon button inside</p>
-                  <p>Click the icon button below to close this popover.</p>
-                  <GoabIconButton 
-                    icon="close" 
-                    variant="color" 
-                    action="close"
-                    ariaLabel="Close Popover"
-                  />
+                  <p>Click the icon button above to close this popover.</p>
                 </GoabPopover>    
             `}
         />
@@ -59,14 +61,16 @@ export const IconButtonClosePopover = () => {
           allowCopy={true}
           code={`
             <goab-popover [target]="closeTarget" minWidth="250px">
+              <goab-block direction="column" alignment="end">
+                <goab-icon-button 
+                  icon="close" 
+                  variant="color" 
+                  action="close"
+                  ariaLabel="Close Popover">
+                </goab-icon-button>
+              </goab-block>
               <p>This popover has a close icon button inside</p>
-              <p>Click the icon button below to close this popover.</p>
-              <goab-icon-button 
-                icon="close" 
-                variant="color" 
-                action="close"
-                ariaLabel="Close Popover">
-              </goab-icon-button>
+              <p>Click the icon button above to close this popover.</p>
               
               <ng-template #closeTarget>
                 <goab-button type="primary" size="normal">
@@ -81,7 +85,9 @@ export const IconButtonClosePopover = () => {
       {/* Sandbox Example */}
       <GoabBlock gap="xl" direction="column">
         <GoabPopover target={popoverTargetWithClose} minWidth="250px">
-          <GoabIconButton icon="close" variant="color" action="close" ariaLabel="Close Popover" />
+          <GoabBlock direction="column" alignment="end">
+            <GoabIconButton icon="close" variant="color" action="close" ariaLabel="Close Popover" />
+          </GoabBlock>
           <p>This popover has a close icon button inside</p>
           <p>Click the icon button above to close this popover.</p>
         </GoabPopover>
diff --git a/src/examples/popover/PopoverExamples.tsx b/src/examples/popover/PopoverExamples.tsx
index 4e4882496..719e77319 100644
--- a/src/examples/popover/PopoverExamples.tsx
+++ b/src/examples/popover/PopoverExamples.tsx
@@ -2,23 +2,33 @@ import { ButtonClosePopover } from "@examples/popover/ButtonClosePopover";
 import { LinkClosePopover } from "@examples/popover/LinkClosePopover";
 import { IconButtonClosePopover } from "@examples/popover/IconButtonClosePopover";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
+import { GoabSpacer } from "@abgov/react-components";
+import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx";
+import { useContext } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
 
 export const PopoverExamples = () => {
+  const { version, language } = useContext(LanguageVersionContext);
   return (
     <>
       {/*Popover Example - close using a button*/}
-      <SandboxHeader exampleTitle="Closing Popovers with Button" figmaExample=""></SandboxHeader>
+      <SandboxHeader exampleTitle="Close a Popover with a Button" figmaExample=""></SandboxHeader>
       <ButtonClosePopover />
 
       {/*Popover example - close using a link*/}
-      <SandboxHeader exampleTitle="Closing Popovers with Link" figmaExample=""></SandboxHeader>
+      <SandboxHeader exampleTitle="Close a Popover with a Link" figmaExample=""></SandboxHeader>
       <LinkClosePopover />
 
       {/*Popover example - close using an icon-button*/}
       <SandboxHeader
-        exampleTitle="Closing Popovers with Icon Button"
+        exampleTitle="Close a Popover with an Icon Button"
         figmaExample=""></SandboxHeader>
       <IconButtonClosePopover />
+
+      <GoabSpacer vSpacing={"2xl"}></GoabSpacer>
+      {version === "old" && (
+        <OldComponentBanner componentName={"Popover"} language={language} type="example" />
+      )}
     </>
   );
 };