diff --git a/src/App.tsx b/src/App.tsx
index ed4a327d9..d52786290 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ import {
Route,
RouterProvider,
createBrowserRouter,
- createRoutesFromElements,
+ createRoutesFromElements
} from "react-router-dom";
import ComponentsPage from "./routes/components/Components";
import DropdownPage from "./routes/components/Dropdown";
@@ -13,7 +13,11 @@ import ButtonPage from "./routes/components/Button";
import FormStepperPage from "./routes/components/FormStepper";
import CheckboxPage from "./routes/components/Checkbox";
import BadgePage from "./routes/components/Badge";
+
import DetailsPage from "./routes/components/Details";
+import ListPage from "@routes/components/List";
+import PopoverPage from "./routes/components/Popover";
+import ContainerPage from "@routes/components/Container";
import SkeletonPage from "@routes/components/Skeleton.tsx";
import AllComponentsPage from "./routes/components/AllComponents";
import ComponentNotFoundPage from "./routes/not-found/NotFound";
@@ -45,7 +49,10 @@ import DevelopersSetupPage from "./routes/get-started/developers/DevelopersSetup
import { useMediaQuery } from "./hooks/useMediaQuery.tsx";
import { DeviceWidthContext } from "./contexts/DeviceWidthContext.ts";
-import HomePage from '@routes/home';
+import HomePage from "@routes/home";
+
+
+
interface DeviceWidthProviderProps {
children: ReactNode;
@@ -66,15 +73,19 @@ const router = createBrowserRouter(
createRoutesFromElements(
}>
} />
- } errorElement={} >
+ } errorElement={}>
} />
} />
} />
} />
} />
} />
+ } />
+ } />
} />
} />
+ } />
+ } />
} />ß
} />
diff --git a/src/routes/components/Button.tsx b/src/routes/components/Button.tsx
index a47083ef1..56e5295b0 100644
--- a/src/routes/components/Button.tsx
+++ b/src/routes/components/Button.tsx
@@ -169,11 +169,11 @@ export default function ButtonPage() {
{/*Button Examples*/}
-
+
Ask a user for an address
Confirm a destructive action
Disabled button in a form
-
+
Ask a user for an address
diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx
index c9d06e458..d3103648c 100644
--- a/src/routes/components/Components.tsx
+++ b/src/routes/components/Components.tsx
@@ -28,44 +28,45 @@ export function Components() {
-
- All
- Accordion
- Badge
- Block
- Button
- Callout
- Checkbox
- Chip
- Combobox
- Container
- Details
- Divider
- Dropdown
- File uploader
- Footer
- Form item
- Grid
- Hero banner
- Icons
- List
- Microsite header
- Modal
- Notification banner
- Pagination
- Progress indicator
- Radio
- Skeleton loader
- Snackbar
- Spacer
- Site header
- Stepper
- Table
- Text area
- Text field
- Tooltip
-
-
+
+ All
+ Accordion
+ Badge
+ Block
+ Button
+ Callout
+ Checkbox
+ Chip
+ Combobox
+ Container
+ Details
+ Divider
+ Dropdown
+ File uploader
+ Footer
+ Form item
+ Grid
+ Hero banner
+ Icons
+ List
+ Microsite header
+ Modal
+ Notification banner
+ Pagination
+ Popover
+ Progress indicator
+ Radio
+ Skeleton loader
+ Snackbar
+ Spacer
+ Site header
+ Stepper
+ Table
+ Text area
+ Text field
+ Tooltip
+
+
diff --git a/src/routes/components/Container.tsx b/src/routes/components/Container.tsx
new file mode 100644
index 000000000..d5c3b548d
--- /dev/null
+++ b/src/routes/components/Container.tsx
@@ -0,0 +1,203 @@
+import { useState } from "react";
+import { ComponentBinding, Sandbox } from "@components/sandbox";
+import {
+ ComponentProperties,
+ ComponentProperty,
+} from "@components/component-properties/ComponentProperties";
+import { Category, ComponentHeader } from "@components/component-header/ComponentHeader";
+import {
+ GoABadge,
+ GoABlock,
+ GoAButton,
+ GoACallout,
+ GoAContainer,
+ GoATab,
+ GoATable,
+ GoATabs,
+} from "@abgov/react-components";
+
+export default function ContainerPage() {
+ const [containerProps, setContainerProps] = useState({});
+ const [containerBindings, setContainerBindings] = useState([
+ {
+ label: "Type",
+ type: "list",
+ name: "type",
+ options: ["", "interactive", "info", "error", "success", "important", "non-interactive"],
+ value: "",
+ defaultValue: "interactive",
+ },
+ {
+ label: "Accent",
+ type: "list",
+ name: "accent",
+ options: ["", "thick", "thin", "filled"],
+ value: "",
+ defaultValue: "filled",
+ },
+ {
+ label: "Padding",
+ type: "list",
+ name: "padding",
+ options: ["", "relaxed", "compact"],
+ value: "",
+ defaultValue: "relaxed",
+ },
+ ]);
+
+ const componentProperties: ComponentProperty[] = [
+ {
+ name: "type",
+ type: "interactive | info | error | success | important | non-interactive",
+ description: "Choose the type of container the type of the accent bar",
+ defaultValue: "interactive",
+ },
+ {
+ name: "accent",
+ type: "thick | thin | filled",
+ defaultValue: "filled",
+ description: "Sets the style of accent on the container",
+ },
+ {
+ name: "padding",
+ type: "relaxed | compact",
+ defaultValue: "relaxed",
+ description: "Sets the amount of white space in the container",
+ },
+ {
+ name: "title",
+ type: "slot",
+ description:
+ "Sets the content in the left of the accent bar. To only beused along with accent=thick.",
+ },
+ {
+ name: "actions",
+ type: "slot",
+ description:
+ "Sets the content in the right of the accent bar. To only be used along with accent=thick.",
+ },
+ ];
+
+ function onSandboxChange(bindings: ComponentBinding[], props: Record) {
+ setContainerBindings(bindings);
+ setContainerProps(props);
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ Detach to use
+ Add things inside me
+
+
+
+ {/*Container Table Properties*/}
+
+
+ {/*Container examples*/}
+
+ Accent bar with heading
+ Accent bar with badge
+ Accent bar with button
+ Container with container inside
+ Container with complex content
+
+
+ Accent bar with heading
+
+
+ Content
+
+
+
+ Accent bar with badge
+
+ }
+ >
+ Content
+
+
+
+
+
+
+ Edit
+
+ }
+ >
+ Content
+
+
+
+ Container with container inside
+
+
+ Heading
+ Content
+
+ Heading
+ Content
+
+
+
+
+ Container with complex content
+
+
+ Heading
+
+
+
+ | Content |
+ $2,110.00 |
+
+
+ | Content |
+ $525.00 |
+
+
+ | Content |
+ $275.00 |
+
+
+
+
+ Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint
+ consectetur cupidatat.
+
+
+
+
+
+
+ Design guidelines
+
+
+ }
+ >
+ Coming Soon
+
+
+
+ );
+}
diff --git a/src/routes/components/List.tsx b/src/routes/components/List.tsx
new file mode 100644
index 000000000..5e5fbb69c
--- /dev/null
+++ b/src/routes/components/List.tsx
@@ -0,0 +1,207 @@
+import {Category, ComponentHeader} from "@components/component-header/ComponentHeader.tsx";
+import {GoABadge, GoABlock, GoAContainer, GoATab, GoATabs} from "@abgov/react-components";
+import {CodeSnippet} from "@components/code-snippet/CodeSnippet.tsx";
+import {useContext} from "react";
+import {LanguageContext} from "@components/sandbox";
+
+export default function ListPage() {
+ const language = useContext(LanguageContext);
+
+ return (
+ <>
+
+
+
+ {/*We don't use sandbox because it isn't starting with "GoA" components*/}
+
+
+ -
+ An ordered item
+
+ - An unordered item
+ -
+ A longer item that wraps to a second line
+
+ - An item on a 3rd level
+
+
+
+
+ -
+ An ordered item
+
+ -
+ An unordered item
+
+ - An item on a third level
+ -
+ A second item on a 3rd level
+
+ - An item on a 4th level
+
+
+
+
+
+
+
+
+
+ {language === "react" && (
+
+
+ An ordered item
+
+ - An unordered item
+ -
+ A longer item that wraps to a second line
+
+ - An item on a 3rd level
+
+
+
+
+
+ An ordered item
+
+ -
+ An unordered item
+
+ - An item on a third level
+ -
+ A second item on a 3rd level
+
+ - An item on a 4th level
+
+
+
+
+
+
+
+ `}
+ />
+ )}
+
+ {language === "angular" && (
+
+
+ An ordered item
+
+ - An unordered item
+ -
+ A longer item that wraps to a second line
+
+ - An item on a 3rd level
+
+
+
+
+
+ An ordered item
+
+ -
+ An unordered item
+
+ - An item on a third level
+ -
+ A second item on a 3rd level
+
+ - An item on a 4th level
+
+
+
+
+
+
+
+ `}
+ />
+ )}
+
+
+ Unordered list
+
+
+ Unordered list
+
+
+
+
+ {language === "react" && (
+
+ Milk
+
+ Cheese
+
+
+
+ `}
+ />
+ )}
+
+ {language === "angular" && (
+
+ Milk
+
+ Cheese
+
+
+
+ `}
+ />
+ )}
+
+
+
+ Design guidelines
+
+
+ }>
+ Coming Soon
+
+
+
+ );
+}
diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx
new file mode 100644
index 000000000..640119c71
--- /dev/null
+++ b/src/routes/components/Popover.tsx
@@ -0,0 +1,126 @@
+import {useState} from "react";
+import {ComponentBinding, Sandbox} from "@components/sandbox";
+import {
+ ComponentProperties,
+ ComponentProperty,
+} from "@components/component-properties/ComponentProperties.tsx";
+import {Category, ComponentHeader} from "@components/component-header/ComponentHeader.tsx";
+import {GoABadge, GoAButton, GoAPopover, GoATab, GoATabs} from "@abgov/react-components";
+
+export default function PopoverPage() {
+ const [popoverProps, setPopoverProps] = useState({});
+ const [popoverBindings, setPopoverBindings] = useState([
+ {
+ label: "Max Width",
+ type: "string",
+ name: "maxWidth",
+ value: "",
+ },
+ {
+ label: "Position",
+ type: "list",
+ name: "position",
+ options: ["", "above", "below", "auto"],
+ value: "",
+ defaultValue: "auto",
+ },
+ {
+ label: "Padding",
+ type: "boolean",
+ name: "padded",
+ value: true,
+ },
+ ]);
+ const componentProperties: ComponentProperty[] = [
+ {
+ name: "maxWidth",
+ type: "string",
+ description: "The maxwidth of the popover container",
+ defaultValue: "320px",
+ lang: "react",
+ },
+ {
+ name: "maxwidth",
+ type: "string",
+ description: "The maxwidth of the popover container",
+ defaultValue: "320px",
+ lang: "angular",
+ },
+ {
+ name: "padded",
+ type: "boolean",
+ description: "Whether or not the popover should have padding",
+ defaultValue: "true",
+ },
+ {
+ name: "position",
+ type: "above | below | auto",
+ description: "Provides control to where the popover content is positioned",
+ defaultValue: "auto",
+ },
+ {
+ name: "target",
+ type: "slot",
+ description: "The target UI component to open the popover",
+ required: true,
+ lang: "angular",
+ },
+ {
+ name: "target",
+ type: "ReactNode",
+ description: "The target UI component to open the popover",
+ required: true,
+ lang: "react",
+ },
+ {
+ name: "relative",
+ type: "boolean",
+ description: "Set to true if a parent element has a css position of relative",
+ defaultValue: "false",
+ },
+ ];
+
+ function onSandboxChange(baseBinding: ComponentBinding[], props: Record) {
+ setPopoverBindings(baseBinding);
+ setPopoverProps(props);
+ }
+
+ return (
+ <>
+
+
+
+
+ {/*Popover sandbox*/}
+
+
+ Click me
+
+ }>
+ This is a popover
+ It can be used for a number of different contexts.
+
+
+
+ {/*Popover table properties*/}
+
+
+
+
+ Design guidelines
+
+
+ }>
+
+
+ );
+}