Merge pull request #85 from pegasystems/bugfix/carousel

Fix some issues with the Image Carousel after integration testing
pegasystems · Oct 24, 2024 · dc7d308 · dc7d308
2 parents 342fa6f + 5d5df84
commit dc7d308
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/src/components/Pega_Extensions_ImageCarousel/Controls.tsx b/src/components/Pega_Extensions_ImageCarousel/Controls.tsx
@@ -8,10 +8,10 @@ type SliderControlsProps = {
 
 const SliderControls: React.FC<SliderControlsProps> = ({ prevSlide, nextSlide }) => (
   <>
-    <ButtonPrev onClick={prevSlide} aria-label="Previous Slide">
+    <ButtonPrev onClick={prevSlide} aria-label='Previous Slide'>
       &#10094;
     </ButtonPrev>
-    <ButtonNext onClick={nextSlide} aria-label="Next Slide">
+    <ButtonNext onClick={nextSlide} aria-label='Next Slide'>
       &#10095;
     </ButtonNext>
   </>

diff --git a/src/components/Pega_Extensions_ImageCarousel/DotsNavigation.tsx b/src/components/Pega_Extensions_ImageCarousel/DotsNavigation.tsx
@@ -10,7 +10,7 @@ type DotsNavigationProps = {
 const DotsNavigation: React.FC<DotsNavigationProps> = ({
   imageSliderData,
   currentSlide,
-  showSlide,
+  showSlide
 }) => (
   <DotsContainer>
     {imageSliderData.map((slide, index) => (

diff --git a/src/components/Pega_Extensions_ImageCarousel/config.json b/src/components/Pega_Extensions_ImageCarousel/config.json
@@ -1,11 +1,12 @@
 {
-  "name": "Pega_Extensions_Image_Carousel",
+  "name": "Pega_Extensions_ImageCarousel",
   "label": "Image carousel",
   "description": "Image carousel",
   "organization": "Pega",
   "version": "1.0.0",
   "library": "Extensions",
   "allowedApplications": [],
+  "componentKey": "Pega_Extensions_ImageCarousel",
   "type": "Widget",
   "subtype": ["PAGE", "CASE"],
   "properties": [
@@ -83,7 +84,7 @@
     {
       "name": "autoplayDuration",
       "label": "Autoplay Duration (ms)",
-      "format": "INTEGER",
+      "format": "NUMBER",
       "defaultValue": 3000
     },
     {

diff --git a/src/components/Pega_Extensions_ImageCarousel/styles.ts b/src/components/Pega_Extensions_ImageCarousel/styles.ts
@@ -10,7 +10,7 @@ export const SliderContainer = styled.div`
 export const SliderWrapper = styled.div<{ totalSlides: number; currentSlide: number }>`
   display: flex;
   transition: transform 0.5s ease-in-out;
-  transform: translateX(-${props => props.currentSlide * 100}%); // Changed to 100% per slide
+  transform: translateX(-${props => props.currentSlide * 100}%);
   width: 100%;
   height: 100%;
 `;
@@ -57,17 +57,17 @@ export const DotsContainer = styled.div`
 `;
 
 export const Dot = styled.a<{ active: boolean }>`
-  background-color: ${props => (props.active ? '#285aa8' : '#b1b1b1')}; // Active dot color
+  background-color: ${props => (props.active ? '#285aa8' : '#b1b1b1')};
   border: none;
   border-radius: 50%;
-  height: 12px; // Size of the dot
-  width: 12px; // Size of the dot
-  margin: 0 5px; // Spacing between dots
+  height: 12px;
+  width: 12px;
+  margin: 0 5px;
   cursor: pointer;
   transition: background-color 0.3s;
 
   &:hover {
-    background-color: #6293df; // Hover color
+    background-color: #6293df;
   }
 `;