feat(#2134): icon button - added "Basic modal with close" example

src/examples/basic-modal-with-close.tsx

@@ -0,0 +1,112 @@
+import { Sandbox } from "@components/sandbox";
+import { GoabButton, GoabModal } from "@abgov/react-components";
+import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
+import { useContext, useState } from "react";
+import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx";
+
+export const BasicModalWithClose = () => {
+  const {version} = useContext(LanguageVersionContext);
+  const [basicModalOpen, setBasicModalOpen] = useState<boolean>();
+  return (
+    <Sandbox skipRender>
+      <GoabButton onClick={() => setBasicModalOpen(true)}>Open Basic Modal</GoabButton>
+      <GoabModal
+        heading="Modal"
+        open={basicModalOpen}
+        onClose={() => setBasicModalOpen(false)}
+        >
+        <p>This modal uses an icon button to close it.</p>
+      </GoabModal>
+      {/*Angular*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="angular"
+        allowCopy={true}
+        code={`
+                  export class SomeOtherComponent {
+                    open = false;
+                    toggleModal() {
+                      this.open = !this.open;
+                    }
+                  }
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goa-button (_click)="toggleModal();">Open Basic Modal</goa-button>
+                  <goa-modal [open]="open" (_close)="toggleModal()" heading="Modal">
+                      <p>This modal uses an icon button to close it.</p>
+                  </goa-modal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="angular"
+          allowCopy={true}
+          code={`
+                  <goab-button (onClick)="toggleModal();">Open Basic Modal</goab-button>
+                  <goab-modal [open]="open" (close)="toggleModal()" heading="Modal" [actions]="actions">
+                    <p>This modal uses an icon button to close it.</p>
+                  </goab-modal>
+                `}
+        />
+      )}
+
+      {/*React code*/}
+      <CodeSnippet
+        lang="typescript"
+        tags="react"
+        allowCopy={true}
+        code={`
+                  const [open, setOpen] = useState(false);
+                `}
+      />
+
+      {version === "old" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoAButton onClick={() => setOpen(true)}>Open Basic Modal</GoAButton>
+                  <GoAModal
+                    heading="Modal"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                  >
+                    <p>This modal uses an icon button to close it.</p>
+                  </GoAModal>
+                `}
+        />
+      )}
+
+      {version === "new" && (
+        <CodeSnippet
+          lang="typescript"
+          tags="react"
+          allowCopy={true}
+          code={`
+                  <GoabButton onClick={() => setOpen(true)}>Open Basic Modal</GoabButton>
+                  <GoabModal
+                    heading="Modal"
+                    open={open}
+                    onClose={() => setOpen(false)}
+                  >
+                    <p>This modal uses an icon button to close it.</p>
+                  </GoabModal>
+                `}
+        />
+      )}
+    </Sandbox>
+  )
+}
+
+export default BasicModalWithClose;

src/examples/icon-button/IconButtonExamples.tsx

@@ -1,9 +1,16 @@
 import { ShowMultipleActionsInACompactTable } from "@examples/show-multiple-actions-in-a-compact-table.tsx";
+import { BasicModalWithClose } from "@examples/basic-modal-with-close.tsx";
 import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx";
 
 export const IconButtonExamples = () => {
   return (
     <>
+      <SandboxHeader
+          exampleTitle="Basic modal with close"
+          figmaExample={"https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=26318-184965&t=Mgdr0KBlqhEz1RXF-4"}>
+        </SandboxHeader>
+      <BasicModalWithClose />
+
       <SandboxHeader
         exampleTitle="Show multiple actions in a compact table"
         figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6309-127620&t=X0IQW5flDDaj8Vyg-4">

src/routes/components/IconButton.tsx

@@ -239,7 +239,7 @@ export default function IconButtonPage() {
             heading={
               <>
                 Examples
-                <GoabBadge type="information" content="1" />
+                <GoabBadge type="information" content="2" />
               </>
             }>
             <IconButtonExamples />