feat: adding the ability to color text in hero banner (#755)

* Adding the ability to color text in hero banner. * Fixing prettier warnings * Update regex and remove optional parameter * Adding changelog * Adding optional prop in interface * Adapt code to use hex values instead of tailwind classes for hero text * Fix prettier --------- Co-authored-by: clincu-plenty <[email protected]> Co-authored-by: Kevin Stederoth <[email protected]>
plentymarkets · Oct 24, 2024 · 1621b03 · 1621b03
1 parent 9a5a763
commit 1621b03
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/apps/web/components/ui/HeroCarousel/types.ts b/apps/web/components/ui/HeroCarousel/types.ts
@@ -8,16 +8,20 @@ export type SizeKey = 'lg' | 'md' | 'sm' | 'xs';
 export type Sizes = Record<SizeKey, { width: string; height: string }>;
 
 export type HeroItem = {
-  image: string;
-  alt: string;
-  tagline: string;
-  heading: string;
-  description: string;
-  callToAction: string;
-  link: string;
-  backgroundSizes?: Sizes;
+  image?: string;
+  alt?: string;
+  tagline?: string;
+  taglineColor?: string;
+  heading?: string;
+  headingColor?: string;
+  description?: string;
+  descriptionColor?: string;
+  callToAction?: string;
+  link?: string;
+  backgroundSizes: Sizes;
   actualBackgroundSize: SizeKey;
 };
+
 export type HeroCarouselProps = {
   background: { image: string; sizes: Sizes };
   hero: HeroItem[];

diff --git a/apps/web/components/ui/HeroContent/HeroContent.vue b/apps/web/components/ui/HeroContent/HeroContent.vue
@@ -11,15 +11,22 @@
     </div>
 
     <div class="p-4 md:p-10 md:max-w-[768px] md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
-      <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
+      <p
+        class="typography-text-xs md:typography-text-sm font-bold tracking-widest uppercase"
+        :style="{ color: heroItemProps.taglineColor }"
+      >
         {{ heroItemProps.tagline }}
       </p>
       <h1
         class="typography-display-3 md:typography-display-1 md:leading-[67.5px] font-bold text-xs text-center md:text-left mt-2 mb-4"
+        :style="{ color: heroItemProps.headingColor }"
       >
         {{ heroItemProps.heading }}
       </h1>
-      <p class="typography-text-sm md:typography-text-lg text-center md:text-left font-normal">
+      <p
+        class="typography-text-sm md:typography-text-lg text-center md:text-left font-normal"
+        :style="{ color: heroItemProps.descriptionColor }"
+      >
         {{ heroItemProps.description }}
       </p>
       <div class="flex flex-col md:flex-row gap-4 mt-6">

diff --git a/apps/web/pages/index.vue b/apps/web/pages/index.vue
@@ -57,10 +57,13 @@ const defaultHomepageTemplate = {
         alt: 'Headphones',
       },
       tagline: 'Feel the music',
+      taglineColor: '#000000',
       heading: 'Your Sound, Elevated',
+      headingColor: '#000000',
       description:
         "Immerse yourself in rich, crystal-clear audio with our cutting-edge headphones. Designed for the ultimate listening experience, whether you're a casual listener or an audiophile. Discover the perfect blend of style, comfort, and sound quality that elevates your music to new heights.\n" +
         '\n',
+      descriptionColor: '#000000',
       callToAction: 'Order Now',
       link: '',
     },
@@ -73,9 +76,12 @@ const defaultHomepageTemplate = {
         alt: 'Headphones',
       },
       tagline: 'Experience Sound Freedom',
+      taglineColor: '#000000',
       heading: 'Wireless. Effortless. Seamless.',
+      headingColor: '#000000',
       description:
         'Unleash your audio with our state-of-the-art wireless earbuds. Designed for all-day comfort and uncompromised sound quality, these earbuds deliver crisp highs and deep bass, letting you enjoy your music without any distractions. Discover freedom with a perfect fit, long battery life, and intuitive controls.',
+      descriptionColor: '#000000',
       callToAction: 'Shop Earbuds',
       link: '',
     },
@@ -88,9 +94,12 @@ const defaultHomepageTemplate = {
         alt: 'Headphones',
       },
       tagline: 'Amplify Your Space',
+      taglineColor: '#000000',
       heading: 'Big Sound, Compact Design',
+      headingColor: '#000000',
       description:
         "Transform your space with our portable speakers that pack a punch. Crafted for superior sound performance, these speakers are perfect for home or on the go. With easy connectivity and a sleek design, elevate your listening experience whether you're indoors or outdoors.",
+      descriptionColor: '#000000',
       callToAction: 'Browse Speakers',
       link: '',
     },
@@ -148,8 +157,11 @@ const formattedHeroItems = ref<HeroItem[]>(
       image: resolveImage(item.image, currentSizeKey),
       alt: item.image.alt ?? extractImageName(resolveImage(item.image, currentSizeKey)),
       tagline: item.tagline,
+      taglineColor: item.taglineColor,
       heading: item.heading,
+      headingColor: item.headingColor,
       description: item.description,
+      descriptionColor: item.descriptionColor,
       callToAction: item.callToAction,
       link: item.link,
       backgroundSizes: {

diff --git a/docs/changelog/changelog_en.md b/docs/changelog/changelog_en.md
@@ -13,6 +13,7 @@
 - Added a new request header for configId and added no cache to environment variables.
 - Implement new notification design
 - Adding the ability to have alt text for images.
+- It's now possible to change the font color of the hero banner via a template property.
 
 ### 🩹 Fixed