From abe149b63930d9306b240f0e0b0d8d346ac81785 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Mon, 23 Dec 2024 08:29:28 -0500
Subject: [PATCH 1/2] change: cleanup and changelog

---
 CHANGELOG.mdx                                 |  4 ++
 lib/components/ImageSlider/Image.tsx          | 49 -----------------
 .../ImageSlider/ImageSlider.stories.tsx       | 20 ++++---
 lib/components/ImageSlider/ImageSlider.tsx    | 14 +++--
 .../ImageSlider/ImageSliderItem.tsx           | 53 +++++++++++++++++++
 lib/components/ImageSlider/Slide.tsx          |  8 ---
 lib/components/ImageSlider/script.ts          | 10 ++--
 7 files changed, 77 insertions(+), 81 deletions(-)
 delete mode 100644 lib/components/ImageSlider/Image.tsx
 create mode 100644 lib/components/ImageSlider/ImageSliderItem.tsx
 delete mode 100644 lib/components/ImageSlider/Slide.tsx

diff --git a/CHANGELOG.mdx b/CHANGELOG.mdx
index d6aebe27d..3fb6f3104 100644
--- a/CHANGELOG.mdx
+++ b/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
diff --git a/lib/components/ImageSlider/Image.tsx b/lib/components/ImageSlider/Image.tsx
deleted file mode 100644
index d7106851a..000000000
--- a/lib/components/ImageSlider/Image.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { aspectRatioClasses } from '../../utils/propClasses'
-import { useLinkContext } from '../LinkProvider/useLinkContext'
-
-type aspectRatioKeys = keyof typeof aspectRatioClasses
-
-export interface ImageProps {
-  imageUrl: string
-  focalPointX?: number
-  focalPointY?: number
-  title?: string
-  link?: string
-  aspectRatio?: aspectRatioKeys
-}
-
-export const Image = ({
-  imageUrl,
-  focalPointX = 50,
-  focalPointY = 50,
-  title,
-  link,
-  aspectRatio = 'landscape',
-}: ImageProps) => {
-  const LinkComponent = useLinkContext()
-  const inlineImageStyles = {
-    backgroundImage: `url(${imageUrl})`,
-    backgroundPosition: `${focalPointX}% ${focalPointY}%`,
-  }
-
-  return (
-    <div
-      className={`relative ${aspectRatioClasses[aspectRatio]} bg-cover bg-center rounded-lg bg-black w-full h-full transition-[width] duration-[5000] ease-in-out`}
-      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>
-  )
-}
diff --git a/lib/components/ImageSlider/ImageSlider.stories.tsx b/lib/components/ImageSlider/ImageSlider.stories.tsx
index ab1e63553..7ac9ec5fa 100644
--- a/lib/components/ImageSlider/ImageSlider.stories.tsx
+++ b/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>
diff --git a/lib/components/ImageSlider/ImageSlider.tsx b/lib/components/ImageSlider/ImageSlider.tsx
index f3d7abfbe..bdf23fc67 100644
--- a/lib/components/ImageSlider/ImageSlider.tsx
+++ b/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"
       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'
diff --git a/lib/components/ImageSlider/ImageSliderItem.tsx b/lib/components/ImageSlider/ImageSliderItem.tsx
new file mode 100644
index 000000000..05e4182ac
--- /dev/null
+++ b/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 pl-4 first:pl-0">
+      <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'
diff --git a/lib/components/ImageSlider/Slide.tsx b/lib/components/ImageSlider/Slide.tsx
deleted file mode 100644
index db11cb706..000000000
--- a/lib/components/ImageSlider/Slide.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface SlideProps {
-  children: React.ReactNode
-  noSpace?: boolean
-}
-
-export const Slide = ({ children, noSpace }: SlideProps) => {
-  return <div className="slider__slide">{noSpace ? children : <div className="px-3">{children}</div>}</div>
-}
diff --git a/lib/components/ImageSlider/script.ts b/lib/components/ImageSlider/script.ts
index ab3a76bf8..fc4df1e03 100644
--- a/lib/components/ImageSlider/script.ts
+++ b/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
 

From 8e6dc6a34c69d4c190e6bb2ffc3c720dca24d383 Mon Sep 17 00:00:00 2001
From: Troy Chaplin <troy.chaplin@gmail.com>
Date: Mon, 23 Dec 2024 08:32:56 -0500
Subject: [PATCH 2/2] change: spacing

---
 lib/components/ImageSlider/ImageSlider.tsx     | 2 +-
 lib/components/ImageSlider/ImageSliderItem.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/ImageSlider/ImageSlider.tsx b/lib/components/ImageSlider/ImageSlider.tsx
index bdf23fc67..9c6c0a6bd 100644
--- a/lib/components/ImageSlider/ImageSlider.tsx
+++ b/lib/components/ImageSlider/ImageSlider.tsx
@@ -25,7 +25,7 @@ export const ImageSliderWrapper = ({
 
   return (
     <div
-      className="cu-slider cu-component overflow-hidden"
+      className="cu-slider cu-component overflow-hidden -mr-4"
       data-slides-desktop={slidesPerViewDesktop}
       data-slides-tablet={slidesPerViewTablet}
       data-slides-mobile={slidesPerViewMobile}
diff --git a/lib/components/ImageSlider/ImageSliderItem.tsx b/lib/components/ImageSlider/ImageSliderItem.tsx
index 05e4182ac..e1b55811d 100644
--- a/lib/components/ImageSlider/ImageSliderItem.tsx
+++ b/lib/components/ImageSlider/ImageSliderItem.tsx
@@ -27,7 +27,7 @@ export const ImageSliderItem = ({
   }
 
   return (
-    <div className="cu-slider--item pl-4 first:pl-0">
+    <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}