diff --git a/.changeset/early-humans-leave.md b/.changeset/early-humans-leave.md new file mode 100644 index 000000000..8f2a03dec --- /dev/null +++ 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 index 20cc96f86..9f00597b0 100644 --- 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 ( <> - +
diff --git a/core/components/hero/index.tsx b/core/components/slideshow/index.tsx similarity index 88% rename from core/components/hero/index.tsx rename to core/components/slideshow/index.tsx index 4bd1e8656..fbf3dbab0 100644 --- a/core/components/hero/index.tsx +++ b/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 = () => ; +export const Slideshow = () => ; diff --git a/core/components/hero/slideshow-bg-01.jpg b/core/components/slideshow/slideshow-bg-01.jpg similarity index 100% rename from core/components/hero/slideshow-bg-01.jpg rename to core/components/slideshow/slideshow-bg-01.jpg diff --git a/core/components/ui/slideshow/slideshow.tsx b/core/components/ui/slideshow/slideshow.tsx index 79301e885..effca2b94 100644 --- 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) => {
{slide.image && (