Fix/slider

CHANGELOG.mdx

@@ -17,6 +17,10 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+### Changed
+
+- Image slider subcomponent structure, reworked padding to prevent cut off
+
 ## [0.18.13]
 
 ### Fixed

lib/components/ImageSlider/ImageSlider.stories.tsx

@@ -29,17 +29,15 @@ export const Primary: Story = {
         {sliderData.map((image, index) => {
           const { image: imageUrl, title, link, focalPointX, focalPointY, aspectRatio } = image
           return (
-            <ImageSlider.Slide key={index}>
-              <ImageSlider.Image
-                key={index}
-                imageUrl={imageUrl}
-                title={title}
-                link={link}
-                focalPointX={focalPointX}
-                focalPointY={focalPointY}
-                aspectRatio={aspectRatio}
-              />
-            </ImageSlider.Slide>
+            <ImageSlider.Item
+              key={index}
+              imageUrl={imageUrl}
+              title={title}
+              link={link}
+              focalPointX={focalPointX}
+              focalPointY={focalPointY}
+              aspectRatio={aspectRatio}
+            />
           )
         })}
       </ImageSlider>

lib/components/ImageSlider/ImageSlider.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid'
-import { Slide } from './Slide'
-import { Image } from './Image'
+import { ImageSliderItem } from './ImageSliderItem'
 import SliderScript from './script.ts'
 
 export interface ImageSliderProp {
@@ -26,22 +25,22 @@ export const ImageSliderWrapper = ({
 
   return (
     <div
-      className="slider overflow-hidden"
+      className="cu-slider cu-component overflow-hidden -mr-4"
       data-slides-desktop={slidesPerViewDesktop}
       data-slides-tablet={slidesPerViewTablet}
       data-slides-mobile={slidesPerViewMobile}
     >
       {/* Slider Slides */}
-      <div className="slider__wrap flex align-items-center">{children}</div>
+      <div className="cu-slider--wrap flex align-items-center">{children}</div>
 
       {/* Slider Arrow */}
       <div className="flex align-items-center gap-3 justify-center mt-4">
-        <button className={`slider__arrow slider__arrow--prev ${arrowButtons}`}>
+        <button className={`cu-slider--arrow cu-slider--arrow-prev ${arrowButtons}`}>
           <span className="sr-only">Go to Previous Slide</span>
           <ChevronLeftIcon className={arrowIcons} aria-hidden="true" />
         </button>
 
-        <button className={`slider__arrow slider__arrow--next ${arrowButtons}`}>
+        <button className={`cu-slider--arrow cu-slider--arrow-next ${arrowButtons}`}>
           <span className="sr-only">Go to Next Slide</span>
           <ChevronRightIcon className={arrowIcons} aria-hidden="true" />
         </button>
@@ -51,8 +50,7 @@ export const ImageSliderWrapper = ({
 }
 
 export const ImageSlider = Object.assign(ImageSliderWrapper, {
-  Slide: Slide,
-  Image: Image,
+  Item: ImageSliderItem,
 })
 
 ImageSliderWrapper.displayName = 'ImageSlider'

lib/components/ImageSlider/ImageSliderItem.tsx

@@ -0,0 +1,53 @@
+import { aspectRatioClasses } from '../../utils/propClasses'
+import { useLinkContext } from '../LinkProvider/useLinkContext'
+
+type aspectRatioKeys = keyof typeof aspectRatioClasses
+
+export interface ImageSliderItemProps {
+  imageUrl: string
+  focalPointX?: number
+  focalPointY?: number
+  title?: string
+  link?: string
+  aspectRatio?: aspectRatioKeys
+}
+
+export const ImageSliderItem = ({
+  imageUrl,
+  focalPointX = 50,
+  focalPointY = 50,
+  title,
+  link,
+  aspectRatio = 'landscape',
+}: ImageSliderItemProps) => {
+  const LinkComponent = useLinkContext()
+  const inlineImageStyles = {
+    backgroundImage: `url(${imageUrl})`,
+    backgroundPosition: `${focalPointX}% ${focalPointY}%`,
+  }
+
+  return (
+    <div className="cu-slider--item pr-4">
+      <div
+        className={`relative ${aspectRatioClasses[aspectRatio]} bg-cover bg-center rounded-lg bg-black w-full h-full transition ease-in-out duration-[5000]`}
+        style={inlineImageStyles}
+      >
+        {title && (
+          <div
+            className={`bg-black/75 text-white absolute bottom-2 left-2 right-2 px-4 py-2.5 rounded-md ${link ? 'hover:bg-cu-red/85' : ''}`}
+          >
+            {link ? (
+              <LinkComponent href={link} className="cursor-pointer block hover-bg-cu-red">
+                <p className="text-sm md:text-base font-semibold line-clamp-2">{title}</p>
+              </LinkComponent>
+            ) : (
+              <p className="text-sm md:text-base font-semibold line-clamp-2">{title}</p>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+ImageSliderItem.displayName = 'ImageSlider.Item'

lib/components/ImageSlider/script.ts

@@ -1,16 +1,16 @@
 const SliderScript = () => {
   // Initial setup
-  const slider = document.querySelector('.slider') as HTMLElement
+  const slider = document.querySelector('.cu-slider') as HTMLElement
 
   if (slider === null) return
 
-  const sliderWrap = slider.querySelector('.slider__wrap') as HTMLElement
-  const slides = slider.querySelectorAll('.slider__slide')
+  const sliderWrap = slider.querySelector('.cu-slider--wrap') as HTMLElement
+  const slides = slider.querySelectorAll('.cu-slider--item')
 
   if (slider === null || slides === null) return
 
-  const previousArrow = slider.querySelector('.slider__arrow--prev') as HTMLElement
-  const nextArrow = slider.querySelector('.slider__arrow--next') as HTMLElement
+  const previousArrow = slider.querySelector('.cu-slider--arrow-prev') as HTMLElement
+  const nextArrow = slider.querySelector('.cu-slider--arrow-next') as HTMLElement
 
   if (previousArrow === null || nextArrow === null) return