Merge pull request #26 from vanessatran-ddi/feat/divider-page

feat(#1423): Add divider page

src/App.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-router-dom";
 import ComponentsPage from "./routes/components/Components";
 import DropdownPage from "./routes/components/Dropdown";
-import AccordionPage from "@routes/components/Accordion.tsx";
+import AccordionPage from "./routes/components/Accordion.tsx";
 import ButtonPage from "./routes/components/Button";
 import FormStepperPage from "./routes/components/FormStepper";
 import CheckboxPage from "./routes/components/Checkbox";
@@ -18,6 +18,7 @@ import ListPage from "./routes/components/List";
 import PopoverPage from "./routes/components/Popover";
 import ContainerPage from "./routes/components/Container";
 import SkeletonPage from "./routes/components/Skeleton";
+import DividerPage from "./routes/components/Divider";
 import HeroBannerPage from "./routes/components/HeroBanner";
 import AllComponentsPage from "./routes/components/AllComponents";
 import ComponentNotFoundPage from "./routes/not-found/NotFound";
@@ -49,7 +50,8 @@ 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 {
@@ -84,6 +86,8 @@ const router = createBrowserRouter(
         <Route path="details" element={<DetailsPage />} />
         <Route path="list" element={<ListPage/>} />
         <Route path='container' element={<ContainerPage />} />
+        <Route path="skeleton-loader" element={<SkeletonPage/>} />
+        <Route path="divider" element={<DividerPage/>} />
         <Route path="skeleton-loader" element={<SkeletonPage/>} />ß
         <Route path="hero-banner" element={<HeroBannerPage />} />
         <Route path="*" element={<ComponentNotFoundPage />} />

src/components/component-properties/ComponentProperties.tsx

@@ -1,6 +1,6 @@
-import { GoAAccordion, GoABadge, GoATable } from "@abgov/react-components";
-import { useContext, useEffect, useState } from "react";
-import { LanguageContext } from "@components/sandbox";
+import {GoAAccordion, GoABadge, GoATable} from "@abgov/react-components";
+import {useContext, useEffect, useState} from "react";
+import {LanguageContext} from "@components/sandbox";
 
 export type ComponentProperty = {
   name: string;

src/routes/components/Divider.tsx

@@ -0,0 +1,90 @@
+import {useState} from "react";
+import {ComponentBinding} from "@components/sandbox";
+import {
+  ComponentProperties,
+  ComponentProperty,
+} from "@components/component-properties/ComponentProperties.tsx";
+import {Category, ComponentHeader} from "@components/component-header/ComponentHeader.tsx";
+import {GoABadge, GoADivider, GoATab, GoATabs} from "@abgov/react-components";
+import Sandbox from "@components/sandbox/Sandbox.tsx";
+import "./AllComponents.css";
+
+export default function DividerPage() {
+  const [dividerProps, setDividerProps] = useState({});
+  const [dividerBindings, setDividerBindings] = useState<ComponentBinding[]>([
+    {
+      label: "Top Margin",
+      type: "list",
+      name: "mt",
+      options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"],
+      value: "none",
+    },
+    {
+      label: "Bottom Margin",
+      type: "list",
+      name: "mb",
+      options: ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl"],
+      value: "none",
+    },
+  ]);
+
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "mt",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Top margin",
+      defaultValue: "none",
+    },
+    {
+      name: "mr",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Right margin",
+      defaultValue: "none",
+    },
+    {
+      name: "mb",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Bottom margin",
+      defaultValue: "none",
+    },
+    {
+      name: "ml",
+      type: "none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl",
+      description: "Left margin",
+      defaultValue: "none",
+    },
+  ];
+
+  function onSandboxChange(utilityBindings: ComponentBinding[], props: Record<string, unknown>) {
+    setDividerBindings(utilityBindings);
+    setDividerProps(props);
+  }
+
+  return (
+    <div className="divider-page">
+      <ComponentHeader
+        name="Divider"
+        category={Category.UTILITIES}
+        description="Dividers are used to indicate a sepearation of layout, or to distinguish large chunks of information on a page."
+      />
+
+      <GoATabs>
+        <GoATab heading="Code examples">
+          <Sandbox properties={dividerBindings} onChange={onSandboxChange} fullWidth>
+            <GoADivider {...dividerProps} />
+          </Sandbox>
+
+          <ComponentProperties properties={componentProperties} />
+        </GoATab>
+
+        <GoATab
+          heading={
+            <>
+              Design guidelines
+              <GoABadge type="information" content="In progress" />
+            </>
+          }></GoATab>
+      </GoATabs>
+    </div>
+  );
+}