Merge pull request #105 from fourkitchens/develop

Release - 06/18/2024
youonlylivetwice · Jun 18, 2024 · 4ba337b · 4ba337b
2 parents 518c619 + 19ae608
commit 4ba337b
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 42 deletions.
diff --git a/src/lib/components/02-components/cta/cta.tsx b/src/lib/components/02-components/cta/cta.tsx
@@ -74,6 +74,7 @@ export default function CTA({
   link,
   linkComponent: LinkElement = 'a',
   theme = 'azure',
+  ...props
 }: CtaProps) {
   const cardStyles: CSSProperties = {};
 
@@ -87,21 +88,19 @@ export default function CTA({
 
   return (
     <div
-      className={cn('py-lg md:py-xl', colorSchema[theme].wrapper)}
-      style={cardStyles}
-    >
-      <div
-        className={cn(
-          'mx-lg flex max-w-screen-xl flex-col items-center gap-y-lg text-center md:mx-auto',
-          className,
-        )}
-      >
+      {...props}
+      className={cn(
+        'px-md py-lg md:py-xl',
+        colorSchema[theme].wrapper,
+        className,
+      )}
+      style={cardStyles}>
+      <div className="flex flex-col items-center gap-y-lg text-center">
         {header && (
           <Typography
             variant="h1"
             component="h1"
-            className={cn('font-semibold', colorSchema[theme].header)}
-          >
+            className={cn('font-semibold', colorSchema[theme].header)}>
             {header}
           </Typography>
         )}
@@ -113,8 +112,7 @@ export default function CTA({
             component={LinkElement}
             endIcon={<ArrowRightIcon />}
             color={colorSchema[theme].button}
-            className="mt-md w-full justify-center md:w-fit"
-          >
+            className="mt-md w-full justify-center md:w-fit">
             {link.title}
           </Button>
         )}

diff --git a/src/lib/components/02-components/featured-resource/ featured-resource.stories.tsx b/src/lib/components/02-components/featured-resource/ featured-resource.stories.tsx
@@ -31,8 +31,7 @@ export const List = () => {
     <div style={listStyles}>
       <div
         className="px-md py-lg md:mx-auto md:max-w-screen-xl"
-        style={listStyles}
-      >
+        style={listStyles}>
         <FeaturedResourceListItem
           url="/"
           eyebrow="eyebrow"

diff --git a/src/lib/components/02-components/featured-resource/featured-resource--card.tsx b/src/lib/components/02-components/featured-resource/featured-resource--card.tsx
@@ -1,6 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import ArrowRight from '../../../assets/img/icons/arrow-right.svg?react';
 import { cn } from '../../../utils/tailwind-merge';
+import {
+  calculateBrightness,
+  hexToRgb,
+} from '../../00-tokens/color/color-shared';
 import Button from '../../01-elements/button/button';
 
 export type ResourceImageDetails = {
@@ -17,6 +21,7 @@ export interface FeaturedResourceCardProps
   renderedImageComponent?: ReactNode;
   title?: string;
   url?: string;
+  sectionBgColor?: string;
 }
 
 export default function FeaturedResourceCard({
@@ -25,9 +30,18 @@ export default function FeaturedResourceCard({
   renderedImageComponent,
   title,
   url,
+  sectionBgColor,
   className,
   ...props
 }: FeaturedResourceCardProps) {
+  let isDarkMode = false;
+
+  if (sectionBgColor) {
+    const color = hexToRgb(sectionBgColor);
+    const brightness = calculateBrightness(color);
+    isDarkMode = brightness < 125;
+  }
+
   const renderedImage = renderedImageComponent ? (
     renderedImageComponent
   ) : image ? (
@@ -44,7 +58,11 @@ export default function FeaturedResourceCard({
     <div
       {...props}
       className={cn(
-        'md:white rounded-m max-md:border-2 max-md:border-azure md:max-w-[480px] md:bg-azure',
+        'rounded-m md:max-w-[480px]',
+        {
+          'border-2 border-azure': isDarkMode,
+          'max-md:border-2 max-md:border-azure md:bg-azure': !isDarkMode,
+        },
         className,
       )}>
       {renderedImage && (
@@ -54,7 +72,11 @@ export default function FeaturedResourceCard({
       )}
       <div className="flex flex-col gap-md p-md md:gap-lg md:p-lg">
         {title && (
-          <span className="text-h3 font-[600] text-black md:text-h4">
+          <span
+            className={cn('text-h3 font-[600] md:text-h4', {
+              'text-white': isDarkMode,
+              'text-black': !isDarkMode,
+            })}>
             {title}
           </span>
         )}

diff --git a/src/lib/components/02-components/featured-resource/featured-resource--list-item.tsx b/src/lib/components/02-components/featured-resource/featured-resource--list-item.tsx
@@ -39,14 +39,13 @@ export default function FeaturedResourceListItem({
       href={url}
       component={LinkComponent}
       className="group/resource-link w-full border-b border-brumosa last:border-transparent"
-    >
+      color={isDarkMode ? 'white' : 'blue'}>
       <div className="flex flex-col gap-md py-md uppercase">
         <Typography
           variant="h5"
           className={cn('font-[600] leading-none text-viola', {
             'text-sandwisp': isDarkMode,
-          })}
-        >
+          })}>
           {eyebrow}
         </Typography>
         <div className="flex gap-md">
@@ -56,13 +55,12 @@ export default function FeaturedResourceListItem({
             endIcon={endIcon}
             color={isDarkMode ? 'white' : 'blue'}
             className={cn(
-              'font-[600] text-h4 normal-case leading-none group-hover/resource-link:text-navy',
+              'text-h4 font-[600] normal-case leading-none group-hover/resource-link:text-navy',
               {
                 'group-hover/resource-link:text-sandwisp': isDarkMode,
               },
             )}
-            animated
-          >
+            animated>
             {title}
           </Link>
         </div>

diff --git a/src/lib/components/02-components/marketo-reference/marketo-reference.tsx b/src/lib/components/02-components/marketo-reference/marketo-reference.tsx
@@ -55,6 +55,7 @@ export default function MarketoReference({
   bgColor,
   formStyle: style = 'none',
   className,
+  ...props
 }: MarketoReferenceProps) {
   const formStyle = style ? style : 'none';
   const renderedImage =
@@ -85,20 +86,19 @@ export default function MarketoReference({
 
   return (
     <div
+      {...props}
       style={bgImageStyles}
       className={cn(
         'flex w-full',
         marketoReferenceColorStyles[bgColor],
         marketoReferenceFormWrapperStyles[formStyle],
         className,
-      )}
-    >
+      )}>
       {renderedImage && (
         <div
           className={cn('hidden md:block md:w-full', {
             'md:-mt-5': formStyle === 'aside_contained_image_overflow_top',
-          })}
-        >
+          })}>
           {renderedImage}
         </div>
       )}
@@ -109,8 +109,7 @@ export default function MarketoReference({
           {
             'lg:max-w-1/2': formStyle !== 'aside_contained_image_overflow_top',
           },
-        )}
-      >
+        )}>
         {renderedMarketoForm}
       </div>
     </div>

diff --git a/src/lib/components/02-components/slider/content-slider.tsx b/src/lib/components/02-components/slider/content-slider.tsx
@@ -45,18 +45,16 @@ export default function ContentSlider({
   }, [active, isFocused, sliderItems.length]);
   return (
     <div
-      className={cn('p-lg', {
+      className={cn({
         'bg-black': theme === 'dark',
-      })}
-    >
+      })}>
       {sliderTitle && (
         <Typography
           variant="display"
           component="h2"
           className={cn('mb-4 w-full font-bold', {
             'text-azure': theme === 'dark',
-          })}
-        >
+          })}>
           {sliderTitle}
         </Typography>
       )}
@@ -66,8 +64,7 @@ export default function ContentSlider({
           variant="h3"
           className={cn('mb-4 w-full font-bold', {
             'text-azure': theme === 'dark',
-          })}
-        >
+          })}>
           {sliderSubTitle}
         </Typography>
       )}
@@ -79,8 +76,7 @@ export default function ContentSlider({
               onMouseOver={() => setIsFocused(true)}
               onMouseLeave={() => setIsFocused(false)}
               onFocus={() => setIsFocused(true)}
-              onBlur={() => setIsFocused(false)}
-            >
+              onBlur={() => setIsFocused(false)}>
               <SlideItemComponent
                 {...item}
                 theme={theme}
@@ -94,16 +90,14 @@ export default function ContentSlider({
         <div
           className={cn('hidden overflow-hidden sm:inline', {
             'col-start-1 row-start-1': alignment === 'right',
-          })}
-        >
+          })}>
           {sliderItems.map((item, index) => (
             <div
               key={index}
               className={cn(
                 'relative top-0 h-full w-full transition-[opacity] duration-500 ease-in-out',
                 active !== index ? 'h-0 opacity-0' : 'h-[100%] opacity-100',
-              )}
-            >
+              )}>
               {item.img}
             </div>
           ))}