discoverfinancial/a11y-theme-builder#356: separated the Hero organism…

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>
+    )
+}

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>
         </>

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>
     )
 }

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">