fix(core): use altText prop for Slideshow, rename Hero to Slideshow (#…

…1277)
bigcommerce · Aug 19, 2024 · 8e6253d · 8e6253d
1 parent e078977
commit 8e6253d
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/early-humans-leave.md b/.changeset/early-humans-leave.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Update Slideshow prop to use altText for image. Rename Hero wrapper component to Slideshow.
diff --git a/core/app/[locale]/(default)/page.tsx b/core/app/[locale]/(default)/page.tsx
@@ -6,11 +6,11 @@ import { getSessionCustomerId } from '~/auth';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
-import { Hero } from '~/components/hero';
 import {
   ProductCardCarousel,
   ProductCardCarouselFragment,
 } from '~/components/product-card-carousel';
+import { Slideshow } from '~/components/slideshow';
 import { LocaleType } from '~/i18n';
 
 interface Props {
@@ -62,7 +62,7 @@ export default async function Home({ params: { locale } }: Props) {
 
   return (
     <>
-      <Hero />
+      <Slideshow />
 
       <div className="my-10">
         <NextIntlClientProvider locale={locale} messages={{ Product: messages.Product ?? {} }}>

diff --git a/core/components/hero/index.tsx → core/components/slideshow/index.tsx b/core/components/hero/index.tsx → core/components/slideshow/index.tsx
@@ -1,4 +1,4 @@
-import { Slideshow } from '~/components/ui/slideshow';
+import { Slideshow as ComponentsSlideshow } from '~/components/ui/slideshow';
 
 import SlideshowBG from './slideshow-bg-01.jpg';
 
@@ -9,7 +9,7 @@ const slides = [
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
     image: {
       src: SlideshowBG,
-      alt: 'An assortment of brandless products against a blank background',
+      altText: 'An assortment of brandless products against a blank background',
       blurDataUrl:
         'data:image/jpeg;base64,/9j/4QC8RXhpZgAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAABMCAwABAAAAAQAAAGmHBAABAAAAZgAAAAAAAABIAAAAAQAAAEgAAAABAAAABgAAkAcABAAAADAyMTABkQcABAAAAAECAwAAoAcABAAAADAxMDABoAMAAQAAAP//AAACoAQAAQAAAAoAAAADoAQAAQAAAAcAAAAAAAAA/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgABwAKAwERAAIRAQMRAf/EABUAAQEAAAAAAAAAAAAAAAAAAAMJ/8QAIBAAAQQBBAMAAAAAAAAAAAAAAQIDBAURABIhMQYjgf/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/EABkRAAIDAQAAAAAAAAAAAAAAAAARAQIhQf/aAAwDAQACEQMRAD8AoZ5EzayKWW3Syo0GyKPTJlsF9ts9klsKTu46GQOfms2awJfAKywmt1sRNgqK7PS0gSHI4WltTmBuKQckJJzgE9aYa0tP/9k=',
     },
@@ -34,4 +34,4 @@ const slides = [
   },
 ];
 
-export const Hero = () => <Slideshow slides={slides} />;
+export const Slideshow = () => <ComponentsSlideshow slides={slides} />;
diff --git a/core/components/hero/slideshow-bg-01.jpg → .../components/slideshow/slideshow-bg-01.jpg b/core/components/hero/slideshow-bg-01.jpg → .../components/slideshow/slideshow-bg-01.jpg
diff --git a/core/components/ui/slideshow/slideshow.tsx b/core/components/ui/slideshow/slideshow.tsx
@@ -13,7 +13,7 @@ interface Link {
 }
 
 interface Image {
-  alt: string;
+  altText: string;
   blurDataUrl?: string;
   src: string | StaticImageData;
 }
@@ -116,7 +116,7 @@ const Slideshow = ({ className, interval = 15_000, slides }: Props) => {
               <div className="relative">
                 {slide.image && (
                   <NextImage
-                    alt={slide.image.alt}
+                    alt={slide.image.altText}
                     blurDataURL={slide.image.blurDataUrl}
                     className="absolute -z-10 object-cover"
                     fill