feat: add blurb icon colors

Signed-off-by: hxtree <[email protected]>

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

@@ -1,4 +1,4 @@
-import { Gradient, GradientVariant, Hero, Paper, BasicCard, BlurbPair, faCheck, faGithub } from '@cats-cradle/design-system/dist/main';
+import { Hero, Paper, BasicCard, BlurbPair, faCheck, faGithub } from '@cats-cradle/design-system/dist/main';
 
 export default function HomePage() {
   return (
@@ -12,9 +12,15 @@ export default function HomePage() {
       <div className='m-5'>
         <BlurbPair
           iconLeft={faCheck}
-          textLeft="<h2>New Features</h2><p>We have a lot of new features that you can improve.</p>."
+          iconColorLeft='green'
+          textLeft="Our team enthusiastically invites contributors to join us in enhancing our project. We value collaboration and welcome pull requests from developers of all backgrounds. Together, we can build something remarkable."
+          linkLeft="https://github.com/hxtree/cats-cradle"
+          ctaLeft="Open A PR"
           iconRight={faGithub}
-          textRight="<h2>PR Welcome</h2><p>The code is open source, please feel free to suggest improvements.</p>."
+          iconColorRight='purple'
+          textRight='We have a lot of new features underway.'
+          linkRight="https://github.com/hxtree/cats-cradle/issues"
+          ctaRight="Learn More"
         />
       </div>
       <main className="container-fluid mt-5">
@@ -34,7 +40,7 @@ export default function HomePage() {
           Dive into the world of character archetypes with ease.
           Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
           No-frills, just a straightforward way to look at the data.
-          </p>
+        </p>
       </BasicCard>
     </div>
       <div className="col mb-3">

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

@@ -2,28 +2,57 @@ import React from "react";
 import './style.module.scss';
 import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import xss from "xss";
+import { Button } from "../Button/Button";
+
+export enum BlurbIconColors {
+  BLUE = 'blue',
+  ORANGE = 'orange',
+  GREEN = 'green',
+  PURPLE = 'purple',
+}
 
 export type BlurbPairProps = {
   iconRight: IconDefinition;
-  textRight: string;
+  iconColorRight?: BlurbIconColors;
+  textRight: React.ReactNode | string;
+  linkRight?: string;
+  ctaRight?: string;
   iconLeft: IconDefinition;
-  textLeft: string;
+  iconColorLeft?: BlurbIconColors;
+  textLeft: React.ReactNode | string;
+  linkLeft?: string;
+  ctaLeft?: string;
 }
 
 export const BlurbPair = (props: BlurbPairProps) => {
-  const { iconRight, textRight, iconLeft,textLeft } = props;
+  const {
+    iconLeft, iconColorLeft, textLeft, linkLeft, ctaLeft,
+    iconRight, iconColorRight, textRight, linkRight, ctaRight
+  } = props;
+
+  function determineIconColor(color?: BlurbIconColors) {
+    return 'icon icon-color-' + (color || BlurbIconColors.BLUE);
+  }
+
+  const iconRightColorClass = determineIconColor(iconColorRight);
+  const iconLeftColorClass = determineIconColor(iconColorLeft);
 
   return (
     <div className={`blurb container`}>
       <div className={`row gx-5`}>
         <div className="blurb-pair-left col-12 col-md-6 border-end border-1 p-5 text-left">
-          <FontAwesomeIcon icon={iconLeft} size={'6x'} className="icon"/>
-          <p className="lead mt-4" dangerouslySetInnerHTML={{ __html: xss(textLeft) }} />
+          <FontAwesomeIcon icon={iconLeft} size={'6x'} className={iconLeftColorClass}/>
+          <p className="lead mt-4">
+            {textLeft}
+          </p>
+          {linkLeft && ctaLeft && <Button color="secondary" href={linkLeft}>{ctaLeft}</Button>}
         </div>
         <div className="blurb-pair-right col-12 col-md-6 border-start border-1 p-5 text-left">
-          <FontAwesomeIcon icon={iconRight} size={'6x'} className="icon"/>
-          <p className="lead mt-4" dangerouslySetInnerHTML={{ __html: xss(textRight) }} />
+          <FontAwesomeIcon icon={iconRight} size={'6x'} className={iconRightColorClass}/>
+          <p className="lead mt-4">
+            {textRight}
+          </p>
+          {linkRight && ctaRight && <Button color="secondary" href={linkRight}>{ctaRight}</Button>}
         </div>
       </div>
     </div>

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

@@ -12,8 +12,18 @@
   .blurb-pair-left,
   .blurb-pair-right {
     .icon {
-      color: $color-light-green !important;
-      opacity: 0.618;
+      &.icon-color-blue {
+        color: $color-blue !important;
+      }
+      &.icon-color-orange {
+        color: $color-orange !important;
+      }
+      &.icon-color-green {
+        color: $color-light-green !important;
+      }
+      &.icon-color-purple {
+        color: $color-dark-purple !important;
+      }
     }
   }
 }

clients/design-system/stories/components/molecules/BlurbPair.stories.tsx

@@ -1,17 +1,33 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
-import { BlurbPair, BlurbPairProps, faGithub,  faAddressCard } from '../../../src/main';
+import { BlurbPair, BlurbPairProps, faGithub,  faAddressCard, BlurbIconColors } from '../../../src/main';
 
 export default {
   title: 'Molecules/BlurbPair',
   component: BlurbPair,
+  argTypes: {
+    variant: {
+      options: Object.values(BlurbIconColors),
+      mapping: Object.values(BlurbIconColors),
+      control: {
+        type: 'select',
+        labels: Object.keys(BlurbIconColors),
+      },
+    },
+  },
 } as Meta<typeof BlurbPair>;
 
 export const Default = args => <BlurbPair {...args}/>;
 
 Default.args = {
-  iconRight: faGithub,
-  textRight: 'This is a blurb about stuff and things.',
   iconLeft: faAddressCard,
-  textLeft: 'This is a blurb about stuff and things.',
+  iconColorLeft: BlurbIconColors.ORANGE,
+  textLeft: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus sit amet est placerat in. At tempor commodo ullamcorper a lacus vestibulum.',
+  linkLeft: 'https://www.google.com',
+  ctaLeft: 'Learn More',
+  iconRight: faGithub,
+  iconColorRight: BlurbIconColors.BLUE,
+  textRight: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris.',
+  linkRight: 'https://www.google.com',
+  ctaRight: 'Get There Sooner',
 } as BlurbPairProps;