Merge pull request #25 from vanessatran-ddi/feature/hero-banner-page

feat(#1423): Add hero-banner page - Code review needed

src/App.tsx

@@ -13,12 +13,12 @@ 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 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 ContainerPage from "./routes/components/Container";
+import SkeletonPage from "./routes/components/Skeleton";
+import HeroBannerPage from "./routes/components/HeroBanner";
 import AllComponentsPage from "./routes/components/AllComponents";
 import ComponentNotFoundPage from "./routes/not-found/NotFound";
 import Root from "./routes/root";
@@ -49,9 +49,7 @@ 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 {
@@ -87,6 +85,7 @@ const router = createBrowserRouter(
         <Route path="list" element={<ListPage/>} />
         <Route path='container' element={<ContainerPage />} />
         <Route path="skeleton-loader" element={<SkeletonPage/>} />ß
+        <Route path="hero-banner" element={<HeroBannerPage />} />
         <Route path="*" element={<ComponentNotFoundPage />} />
       </Route>
 

src/routes/components/HeroBanner.tsx

@@ -0,0 +1,170 @@
+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 {
+  GoAButton,
+  GoAHeroBanner,
+  GoAHeroBannerActions,
+  GoATab,
+  GoATabs,
+} from "@abgov/react-components";
+
+export default function HeroBannerPage() {
+  const [heroBannerProps, setHeroBannerProps] = useState({
+    heading: "Heading",
+  });
+  const [heroBannerBindings, setHeroBannerBindings] = useState<ComponentBinding[]>([
+    {
+      label: "Heading",
+      type: "string",
+      name: "heading",
+      value: "Heading",
+    },
+    {
+      label: "Background URL",
+      type: "string",
+      name: "backgroundUrl",
+      value: "",
+    },
+    {
+      label: "Min height",
+      type: "string",
+      name: "minHeight",
+      value: "",
+    },
+    {
+      label: "Max content width",
+      type: "string",
+      name: "maxContentWidth",
+      value: "",
+    },
+    {
+      label: "Background color",
+      type: "string",
+      name: "backgroundColor",
+      value: "",
+    },
+    {
+      label: "Text color",
+      type: "string",
+      name: "textColor",
+      value: "",
+    },
+  ]);
+  const componentProperties: ComponentProperty[] = [
+    {
+      name: "heading",
+      type: "string",
+      description: "Main heading text",
+      required: true,
+    },
+    {
+      name: "backgroundurl",
+      type: "string",
+      description: "Background image url",
+      lang: "angular",
+    },
+    {
+      name: "backgroundUrl",
+      type: "string",
+      description: "Background image url",
+      lang: "react",
+    },
+    {
+      name: "minheight",
+      type: "string",
+      description: "Set the height of the Hero Banner",
+      lang: "angular",
+      defaultValue: "600px"
+    },
+    {
+      name: "minHeight",
+      type: "string",
+      description: "Sets the height of the Hero Banner",
+      lang: "react",
+      defaultValue: "600px"
+    },
+    {
+      name: "maxcontentwidth",
+      type: "string",
+      description: "Maximum width of the content area",
+      lang: "angular",
+      defaultValue: "100%",
+    },
+    {
+      name: "maxContentWidth",
+      type: "string",
+      description: "Maximum width of the content area",
+      lang: "react",
+      defaultValue: "100%",
+    },
+    {
+      name: "backgroundcolor",
+      type: "string",
+      description: "Hero Banner background color when no background image is provided",
+      lang: "angular",
+      defaultValue: "#f8f8f8",
+    },
+    {
+      name: "backgroundColor",
+      type: "string",
+      description: "Hero Banner background color when no background image is provided",
+      lang: "react",
+      defaultValue: "#f8f8f8",
+    },
+    {
+      name: "textcolor",
+      type: "string",
+      description: "Text color within the hero banner",
+      lang: "angular",
+      defaultValue: "#333",
+    },
+    {
+      name: "textColor",
+      type: "string",
+      description: "Text color within the hero banner",
+      lang: "react",
+      defaultValue: "#333",
+    },
+  ];
+
+  function onSandboxChange(heroBannerBindings: ComponentBinding[], props: Record<string, unknown>) {
+    setHeroBannerBindings(heroBannerBindings);
+    setHeroBannerProps(props as {heading: string; [key: string]: unknown});
+  }
+
+  function noop() {}
+
+  return (
+    <>
+      <ComponentHeader
+        name="Hero banner"
+        category={Category.STRUCTURE_AND_NAVIGATION}
+        description="A visual band of text, including an image and a call to action."
+      />
+
+      <GoATabs>
+        <GoATab heading="Code examples">
+          {/*Hero Banner Sandbox*/}
+          <Sandbox properties={heroBannerBindings} onChange={onSandboxChange}>
+            <GoAHeroBanner {...heroBannerProps}>
+              Resources are available to help Alberta entrepreneurs and small businesses start, grow
+              and succeed.
+              <GoAHeroBannerActions>
+                <GoAButton type="start" onClick={noop}>
+                  Call to action
+                </GoAButton>
+              </GoAHeroBannerActions>
+            </GoAHeroBanner>
+          </Sandbox>
+
+          <ComponentProperties properties={componentProperties} />
+        </GoATab>
+      </GoATabs>
+    </>
+  );
+}