Merge pull request #859 from hxtree/feature/improve-hero

Update tests and fix grammar in readme

README.md

@@ -32,7 +32,7 @@ employed in developing a cooperative RPG.
   architecture.
 - Infrastructure as Code (IaC) for streamlined DevOps pipeline.
 - Continuous integration and continuous deployment (CI/CD) leveraging AWS.
-- Happy Engineers.
+- Happy productive engineers.
 
 ## Getting Started
 

clients/admin-client/src/components/Breadcrumbs.tsx

@@ -15,7 +15,7 @@ export const BreadCrumbs: FC<TBreadCrumbs> = ({ title }) => {
   }
 
   return (
-    <nav className="container my-4" aria-label="breadcrumb">
+    <nav className="container" aria-label="breadcrumb">
      <ol className="breadcrumb">
         {crumbs.map((crumb, index) =>
           index !== crumbs.length - 1 ? (

clients/admin-client/src/pages/archetypes.page.tsx

@@ -1,18 +1,25 @@
-import { Paper } from '@cats-cradle/design-system/dist/main';
+import { Hero, Paper } from '@cats-cradle/design-system/dist/main';
 import ArchetypeSelect from '../components/ArchetypeSelect';
 import { BreadCrumbs } from '../components/Breadcrumbs';
 
 export default function ArchetypePage() {
   return (
+    <>
+    <Hero pageTier={2} image='/assets/clouds.jpg'
+    breadcrumb={<BreadCrumbs/>}
+    heading='Archetypes'
+    lead="Archetypes serve as the fundamental blueprint for character sheets.">
+      <p> They outline a character's abilities, potential, and constraints.
+      Each character sheet draws inspiration from a designated archetype,
+      shaping their possibilities and outlining the skills they can or cannot acquire.
+      While an archetype does not detail everything, it plays a vital role in guiding
+      both player and non-player character creation.</p>
+      </Hero>
     <main className="container">
-      <BreadCrumbs/>
       <Paper elevation="1" className='p-5'>
-        <h1>Archetypes</h1>
-        <p>
-          Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.
-        </p>
         <ArchetypeSelect />
       </Paper>
     </main>
+    </>
   );
 }

clients/admin-client/src/pages/character-sheets.page.tsx

@@ -1,13 +1,21 @@
-import { Paper } from '@cats-cradle/design-system/dist/main';
+import { Paper, Hero } from '@cats-cradle/design-system/dist/main';
 import { BreadCrumbs } from '../components/Breadcrumbs';
 
 export default function CharacterSheetsPage() {
   return (
-    <main className="container">
-      <BreadCrumbs/>
-      <Paper elevation="1" className='p-5'>
-        <h1>Character Sheets</h1>
-      </Paper>
-    </main>
+    <>
+      <Hero
+        pageTier={2}
+        image='/assets/clouds.jpg'
+        breadcrumb={<BreadCrumbs/>}
+        heading='Character Sheets'
+        lead='Review characters per instance'>
+      </Hero>
+      <main className="container">
+        <Paper elevation="1" className='p-5'>
+          Coming soon.
+        </Paper>
+      </main>
+    </>
   );
 }

clients/admin-client/src/pages/dice.page.tsx

@@ -5,15 +5,15 @@ import { BreadCrumbs } from '../components/Breadcrumbs';
 export default function DicePage() {
   return (
     <main className="container">
-      {/** TODO move to prop on breadcrumb */}
-      <BreadCrumbs/>
       <Hero pageTier={2} image='/assets/clouds.jpg'
+      breadcrumb={<BreadCrumbs/>}
       heading='Dice Notation Analyzer'
-      lead='Determine the appropriate dice notation for skill set rolls and
-          visualizes the impact of luck. Gain valuable insights into
-          chance&apos;s influence on game play outcomes.'>
+      lead='Determine the appropriate dice notation for skill set rolls.'>
+      <p>Visualizes the impact of luck. Gain valuable insights into
+          chance&apos;s influence on game play outcomes.</p>
       </Hero>
 
+
       <DiceAnalyzer/>
     </main>
   );

clients/design-system/src/components/Hero/Hero.tsx

@@ -3,15 +3,17 @@ import './style.module.scss';
 import xss from 'xss';
 
 export interface HeroProps {
+  breadcrumb?: React.ReactNode;
   heading: string;
   lead: string;
   image: string;
-  children?: React.ReactNode
+  children?: React.ReactNode;
   pageTier?: number;
+  toolbar?: React.ReactNode;
 }
 
 export const Hero = (props: HeroProps) => {
-  const { image, heading, lead, children, pageTier } = props;
+  const { toolbar, breadcrumb, image, heading, lead, children, pageTier } = props;
 
   if(pageTier === 1 || pageTier === undefined){
     return (
@@ -20,8 +22,8 @@ export const Hero = (props: HeroProps) => {
           <div className='container p-sm-1 p-md-3 p-lg-5'>
             <div className="row">
               <div className='col-lg-7 col-sm-12'>
-                <h1 className='display-3 text-primary' dangerouslySetInnerHTML={{ __html: xss(heading) }}></h1>
-                <p className="lead text-white" dangerouslySetInnerHTML={{ __html: xss(lead) }}></p>
+                <h1 className='display-3' dangerouslySetInnerHTML={{ __html: xss(heading) }}></h1>
+                <p className="lead" dangerouslySetInnerHTML={{ __html: xss(lead) }}></p>
                 {children}
               </div>
             </div>
@@ -33,16 +35,25 @@ export const Hero = (props: HeroProps) => {
 
   return (
     <>
-        <div className='hero container-fluid' style={{backgroundImage: `url(${image})`}}>
-          <div className='container p-sm-1 p-md-3 p-lg-5'>
+        <div className='hero position-relative container-fluid g-0 overflow-hidden mb-5' style={{backgroundImage: `url(${image})`}}>
+          <div className='container p-sm-1 p-md-3 p-lg-5 pt-0'>
             <div className="row">
+              {breadcrumb}
               <div className='col-lg-7 col-sm-12'>
-                <h1 className='display-3 text-primary' dangerouslySetInnerHTML={{ __html: xss(heading) }}></h1>
-                <p className="lead text-white" dangerouslySetInnerHTML={{ __html: xss(lead) }}></p>
+                <h1 className='display-3' dangerouslySetInnerHTML={{ __html: xss(heading) }}></h1>
+                <p className="lead" dangerouslySetInnerHTML={{ __html: xss(lead) }}></p>
                 {children}
               </div>
             </div>
           </div>
+
+        {toolbar && (
+          <div className="toolbar position-absolute bottom-0 w-100">
+            <div className='container p-4'>
+              {toolbar}
+            </div>
+          </div>
+        )}
         </div>
      </>
     );

clients/design-system/src/components/Hero/style.module.scss

@@ -8,18 +8,23 @@
   background-position: top center;
   border-bottom-left-radius: 50px;
   border-bottom-right-radius: 50px;
-
   h1 {
     font-weight: bold;
     background: linear-gradient(to right, $color-primary, darken($color-primary, 5%)) !important;
     -webkit-background-clip: text !important;
     background-clip: text !important;
     color: transparent !important ;
   }
-  p {
+  .lead {
     font-weight: bold;
-    color: white;
+    color: $color-blue;
     font-size: 1.2em;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
+  p {
+    color: $color-blue;
+  }
+  .toolbar {
+    background-color: $color-blue;
+    color: $color-white;
   }
 }