From 1d9efde221bf6f87aa6508da3d4cf623bfbb2a8b Mon Sep 17 00:00:00 2001
From: Aaron Reed <aaronreed708@gmail.com>
Date: Thu, 4 May 2023 13:16:39 -0400
Subject: [PATCH] discoverfinancial/a11y-theme-builder#356: separated the Hero
 organism into a HeroOrganism and HeroComponent

---
 .../ui/src/pages/components/HeroComponent.tsx | 32 ++++++++++++++++
 .../content/components/ComponentsContent.tsx  |  5 +++
 .../ui/src/pages/organisms/HeroExample.tsx    | 37 ++++++++-----------
 .../ui/src/pages/organisms/HeroOrganism.tsx   |  7 ++--
 4 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 code/src/ui/src/pages/components/HeroComponent.tsx

diff --git a/code/src/ui/src/pages/components/HeroComponent.tsx b/code/src/ui/src/pages/components/HeroComponent.tsx
new file mode 100644
index 00000000..cf56651e
--- /dev/null
+++ b/code/src/ui/src/pages/components/HeroComponent.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2023 Discover Financial Services
+ * Licensed under MIT License. See License.txt in the project root for license information
+ */
+import React, { useEffect, useState } from 'react';
+import { InputLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material';
+import { DesignSystem, Hero } from 'a11y-theme-builder-sdk';
+import { HeroExample } from '../../pages/organisms/HeroExample';
+import { GeneratedCodeSection } from '../content/GeneratedCodeSection';
+import { ExampleSection } from '../content/ExampleSection';
+import { SettingsSection } from '../content/SettingsSection';
+import { HeadingSection } from '../content/HeadingSection';
+import { ColorModeSelector } from '../content/ColorModeSelector';
+import { HeroColorModeSelector } from '../content/HeroColorModeSelector';
+interface Props {
+}
+
+export const HeroComponent: React.FC<Props> = ({ }) => {
+
+    const [colorMode, setColorMode] = useState<string>("default");
+
+    return (
+        <div>
+            <HeadingSection title="Desktop" heading="Hero" />
+            <ExampleSection>
+                <HeroColorModeSelector colorMode={colorMode} setColorMode={setColorMode}>
+                    <HeroExample colorMode={colorMode}/>
+                </HeroColorModeSelector>
+            </ExampleSection>
+        </div>
+    )
+}
diff --git a/code/src/ui/src/pages/content/components/ComponentsContent.tsx b/code/src/ui/src/pages/content/components/ComponentsContent.tsx
index 8d21dcd6..db803dbd 100644
--- a/code/src/ui/src/pages/content/components/ComponentsContent.tsx
+++ b/code/src/ui/src/pages/content/components/ComponentsContent.tsx
@@ -54,6 +54,7 @@ import { ChipsComponent } from '../../components/ChipsComponent';
 import { DropdownComponent } from '../../components/DropdownComponent';
 import { SlidersComponent } from '../../components/SlidersComponent';
 import { DividerComponent } from '../../components/DividerComponent';
+import { HeroComponent } from '../../components/HeroComponent';
 
 interface Props {
     user: any;
@@ -185,6 +186,7 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
                     <LeftNavItem text={"Divider"} value="divider" indent={1} selected={showComponent} onClick={()=> {setShowComponent("divider")}} disabled={disabled}/>
 
                     <LeftNavItem text={"Dropdown"} value="dropdown" indent={1} selected={showComponent} onClick={()=> {setShowComponent("dropdown")}} disabled={disabled}/>
+                    <LeftNavItem text={"Hero"} value="hero" indent={1} selected={showComponent} onClick={()=> {setShowComponent("hero")}} disabled={disabled}/>
                     <LeftNavItem text={"Images"} value="imageDecorations" indent={1} selected={showComponent} onClick={()=> {setShowComponent("imageDecorations")}} disabled={disabled}/>
 
                     <LeftNavItem text={"Menus"} value="menus" indent={1} selected={showComponent} onClick={()=> {setShowComponent("menus")}} disabled={disabled}/>
@@ -357,6 +359,9 @@ export const ComponentsContent: React.FC<Props> = ({ user, designSystem }) => {
                     {showComponent === "tooltips" &&
                         <TooltipsComponent />
                     }
+                    {showComponent === "hero" &&
+                        <HeroComponent />
+                    }
             </div>
             </div>
         </>
diff --git a/code/src/ui/src/pages/organisms/HeroExample.tsx b/code/src/ui/src/pages/organisms/HeroExample.tsx
index 1a33eee5..74281f30 100644
--- a/code/src/ui/src/pages/organisms/HeroExample.tsx
+++ b/code/src/ui/src/pages/organisms/HeroExample.tsx
@@ -9,29 +9,24 @@ import { Hero } from "../../mui-a11y-tb/components/Hero";
 import { ExampleSection } from '../content/ExampleSection';
 
 interface Props {
-    style?: any;
+    colorMode?: string;
 }
 
-export const HeroExample: React.FC<Props> = ({style}) => {
-  const [colorMode, setColorMode] = useState<string>("default");
+export const HeroExample: React.FC<Props> = ({colorMode=""}) => {
     return (
-        <ExampleSection>
-          <HeroColorModeSelector colorMode={colorMode} setColorMode={setColorMode}>
-            <Hero className={colorMode} >
-                <Breadcrumbs aria-label="breadcrumb" className="breadcrumbs">
-                    <Link>Home</Link>
-                    <Link>Page</Link>
-                    <Typography>Page</Typography>
-                </Breadcrumbs>
-                <div className="title">Page Title</div>
-                <div className="body">
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
-                    </p>
-                </div>
-                <Button>Get Started</Button>
-            </Hero>
-          </HeroColorModeSelector>
-        </ExampleSection>
+        <Hero className={colorMode} >
+            <Breadcrumbs aria-label="breadcrumb" className="breadcrumbs">
+                <Link>Home</Link>
+                <Link>Page</Link>
+                <Typography>Page</Typography>
+            </Breadcrumbs>
+            <div className="title">Page Title</div>
+            <div className="body">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+                </p>
+            </div>
+            <Button>Get Started</Button>
+        </Hero>
     )
 }
diff --git a/code/src/ui/src/pages/organisms/HeroOrganism.tsx b/code/src/ui/src/pages/organisms/HeroOrganism.tsx
index 4d1647a6..2c6d76b5 100644
--- a/code/src/ui/src/pages/organisms/HeroOrganism.tsx
+++ b/code/src/ui/src/pages/organisms/HeroOrganism.tsx
@@ -28,10 +28,9 @@ export const HeroOrganism: React.FC<Props> = ({ organism, designSystem }) => {
                 <p>Configure settings that affect the appearance of Hero organisms.  Heros are a common content-pattern that is located in a prominant location and may contain introductory text for a website and may contain breadcrumbs, buttons and other components.</p>
             </HeadingSection>
 
-
-            <HeroExample/>
-
-
+            <ExampleSection>
+                <HeroExample/>
+            </ExampleSection>
 
             <SettingsSection>
                 <div className="top40">