fix(#2714) - docs popover examples (button, link, iconbutton)

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>
+  );
+};

src/examples/popover/IconButtonClosePopover.tsx

@@ -0,0 +1,97 @@
+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">
+                  <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>    
+            `}
+        />
+      )}
+
+      {/* Angular Code Snippets */}
+      {version === "new" && (
+        <CodeSnippet
+          lang="html"
+          tags="angular"
+          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 above to close this popover.</p>
+
+              <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">
+          <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>
+      </GoabBlock>
+    </Sandbox>
+  );
+};

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>
+  );
+};

src/examples/popover/PopoverExamples.tsx

@@ -0,0 +1,34 @@
+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="Close a Popover with a Button" figmaExample=""></SandboxHeader>
+      <ButtonClosePopover />
+
+      {/*Popover example - close using a link*/}
+      <SandboxHeader exampleTitle="Close a Popover with a Link" figmaExample=""></SandboxHeader>
+      <LinkClosePopover />
+
+      {/*Popover example - close using an icon-button*/}
+      <SandboxHeader
+        exampleTitle="Close a Popover with an Icon Button"
+        figmaExample=""></SandboxHeader>
+      <IconButtonClosePopover />
+
+      <GoabSpacer vSpacing={"2xl"}></GoabSpacer>
+      {version === "old" && (
+        <OldComponentBanner componentName={"Popover"} language={language} type="example" />
+      )}
+    </>
+  );
+};