clean up stories and code

pegasystems · Oct 23, 2024 · 220fb15 · 220fb15
1 parent d890df7
commit 220fb15
Show file tree

Hide file tree

Showing 12 changed files with 354 additions and 538 deletions.
diff --git a/...tensions_ImageCarousel/SliderControls.tsx → ...ega_Extensions_ImageCarousel/Controls.tsx b/...tensions_ImageCarousel/SliderControls.tsx → ...ega_Extensions_ImageCarousel/Controls.tsx
diff --git a/src/components/Pega_Extensions_ImageCarousel/Docs.mdx b/src/components/Pega_Extensions_ImageCarousel/Docs.mdx
@@ -1,130 +1,23 @@
-# Image Carousel Component for Pega Constellation
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
 
+<Meta of={DemoStories} />
 
-## Overview
+# Overview
 
-The Image Carousel Component is a dynamic and flexible Carousel designed for Pega Constellation applications. It fetches images from a **(Example:- D_YourDataPage)** data source, allowing developers to display a collection of images in a rotating slideshow format. This component supports configurable height, transition effects, and dynamic image handling. Its responsive design ensures that it adjusts automatically to different screen sizes, making it an ideal solution for creating engaging, dynamic visual content in your Pega applications.
+The Image Carousel Component is a dynamic and flexible Carousel designed for Pega Constellation applications. It fetches images from a Data Page as a source, allowing developers to display a collection of images in a rotating slideshow format. This component supports configurable height, transition effects, and dynamic image handling. Its responsive design ensures that it adjusts automatically to different screen sizes, making it an ideal solution for creating engaging, dynamic visual content in your Pega applications.
 
-## Key Features
+<Primary />
 
-**1.  Height Customization**
+## Props
 
-      The height of the Carousel is fully customizable to fit the design requirements of your Pega application.
-      The height can be set using fixed units (e.g. rem ).
+<Controls />
 
-**2.  Text Positioning Options:**
-      Choose from various text alignment options for your Carousel:
+# Deployment and Integration Instructions:-
 
-      - **Top Left:** Position the Carousel in the top left corner.
+**1. Create a Data Type for the Carousel**
 
-      - **Top Center:** Center the Carousel at the top.
-
-      - **Top Right:** Align the Carousel in the top right corner.
-
-      - **Center Left:** Place the Carousel on the left side, vertically centered.
-
-      - **Center:** Center the Carousel both vertically and horizontally.
-
-      - **Center Right:** Position the Carousel on the right side, vertically centered.
-
-      - **Bottom Left:** Align the Carousel in the bottom left corner.
-
-      - **Bottom Center:** Center the Carousel at the bottom.
-
-      - **Bottom Right:** Position the Carousel in the bottom right corner.
-
-
-**3.  Object Fit Options**
-
-      Control how images are displayed within the Carousel with the following settings:
-
-         - **Fill:** Stretches the image to fill the entire Carousel area.
-
-         - **Contain:** Scales the image to fit within the Carousel while maintaining its aspect ratio.
-
-         - **Cover:** Scales the image to cover the entire Carousel, cropping as needed to maintain the aspect ratio.
-
-         - **None:** Displays the image in its original size, without scaling.
-
-         - **Scale Down:** Scales the image down to fit within the Carousel only if it exceeds its original dimensions.
-
-
-
-**4.  Autoplay**
-
-      Enable or disable autoplay functionality:
-
-         - **Yes:** Automatically cycles through items at a set interval.
-
-         - **No:** Requires manual navigation to view items.
-
-
-
-**5.  Autoplay Duration (ms)**
-
-      Set the duration (in milliseconds) for how long each item is displayed before transitioning to the next one during autoplay.
-
-
-
-**6.  Control Type**
-
-      Select the type of navigation controls for the Carousel:
-
-         - **None:** No navigation controls displayed.
-
-         - **Button:** Includes next/previous buttons for manual navigation.
-
-         - **Dots:** Displays dot indicators representing each item in the Carousel.
-
-         - **Both:** Combines buttons and dot indicators for versatile navigation.
-
-
-
-**7.  Animation Type**
-
-      Select the type of animation for transitions between Carousel items:
-
-         - **Fade In:** Gradually appears with a fade effect.
-
-         - **Fade Out:** Gradually disappears with a fade effect.
-
-         - **Slide In:** Slides in from a specific direction.
-
-         - **Slide Out:** Slides out to a specific direction.
-
-          - **Zoom In:** Gradually enlarges the item as it appears.
-
-         - **Zoom Out:** Gradually reduces the item as it disappears.
-
-         - **Bounce:** Bounces in or out for a playful effect.
-
-         - **Shake:** Shakes the item for a dynamic transition.
-
-
-
-**8. Future Enhancement**
-
-       - **Keyboard navigation:**
-            Implement keyboard navigation and screen reader compatibility to ensure the Carousel is usable by individuals with disabilities.
-
-       - **Video Support:**
-             Extend the Carousel to support video content alongside images, offering a richer multimedia experience.
-
-       - **Customizable Transitions:**
-             Developers can create and apply their transition effects beyond the built-in options.
-
-       - **Thumbnail Navigation:**
-            Provide a thumbnail view of all Carousel items, allowing users to quickly jump to a specific slide.
-
-       - **Interactive Elements:**
-            Incorporate interactive features like hotspots or clickable areas within Carousel images to enhance engagement.
-
-
-##  Deployment and Integration Instructions:-
-
-**1.  Create a Data Type for the Carousel**
-
-      To manage and display the images in the Carousel component, create a Data Type in Pega **(Example: Banner)** with the following columns:
+      To manage and display the images in the Carousel component, create a Data Type in Pega **(Example: Carousel)** with the following columns:
 
          - **Id:** Unique identifier for the image.
 
@@ -136,44 +29,57 @@ The Image Carousel Component is a dynamic and flexible Carousel designed for Peg
 
          - **Visible:** Boolean field to indicate if the image should be shown in the Carousel.
 
-
 Each entry in the Data Type corresponds to an image, allowing for easy updates and management of the content.
 
+Users will create a custom list Data Page **(D_CarouselsList)** that retrieves records filtered by visibility, using a report definition **(RD_VisibleCarousels)**. This ensures that only Carousels with **Visible = true** are displayed, and it can be seamlessly integrated into components like the Image Carousel for a dynamic user experience.
 
-Users will create a custom list Data Page **(D_BannersList)** that retrieves records filtered by visibility, using a report definition **(RD_VisibleBanners)**. This ensures that only banners with **Visible = true** are displayed, and it can be seamlessly integrated into components like the Image Carousel for a dynamic user experience.
-
-
-**2.  Component Configuration**
+**2. Component Configuration**
 
       Add the Carousel component to your **Landing Page** and **Summary panel** using the following configuration:
 
-         - **Data Page:** Specify the Data Page **(Example:- D_BannerList.pxResults)**
+         - **Data Page:** Specify the Data Page **(Example:- D_CarouselList.pxResults)**
 
          - **Image Source:** Specify the image property.
 
          - **Title:** Specify the Title property.
 
          - **Description:** Specify the Description property.
 
+# Limitations and Enhancements
 
+The limitations of the component are:
 
+- **Keyboard navigation:**
+  No support for keyboard navigation and screen reader compatibility to ensure the Carousel is usable by individuals with disabilities.
 
-## Limitations
+- **Font Size:** There is no option to change the font size for the title and description.
 
-The limitations of the components are:
+- **Font Type:** The components do not support changing the font family for the title and description.
 
-   - **Font Size:** There is no option to change the font size for the title and description.
+- **Font Color:** There is no capability to modify the font color for the title and description.
 
-   - **Font Type:** The components do not support changing the font family for the title and description.
+Ideas for enhancements are:
 
-   - **Font Color:** There is no capability to modify the font color for the title and description.
+- **Video Support:**
+  Extend the Carousel to support video content alongside images, offering a richer multimedia experience.
 
+- **Customizable Transitions:**
+  Developers can create and apply their transition effects beyond the built-in options.
 
+- **Thumbnail Navigation:**
+  Provide a thumbnail view of all Carousel items, allowing users to quickly jump to a specific slide.
 
-##  Example Use Cases
+- **Interactive Elements:**
+  Incorporate interactive features like hotspots or clickable areas within Carousel images to enhance engagement.
+
+# Example Use Cases
 
 - **Product Gallery:** Display a Carousel of product images that update based on user selections or current promotions.
 
 - **User Profile Carousel:** Show a collection of user-uploaded photos or media.
 
-- **Dynamic Advertisements:** Rotating Carousel for dynamic ad banners or promotions fetched from a backend system.
+- **Dynamic Advertisements:** Rotating Carousel for dynamic ad Carousels or promotions fetched from a backend system.
+
+# Contributors
+
+This component was contributed by Khozema Nagdi working with [Bits In Glass | www.bitsinglass.com](https://www.bitsinglass.com)
diff --git a/src/components/Pega_Extensions_ImageCarousel/OneColumnPage.svg b/src/components/Pega_Extensions_ImageCarousel/OneColumnPage.svg
diff --git a/src/components/Pega_Extensions_ImageCarousel/PConnProps.d.ts b/src/components/Pega_Extensions_ImageCarousel/PConnProps.d.ts
diff --git a/src/components/Pega_Extensions_ImageCarousel/SlideItem.tsx b/src/components/Pega_Extensions_ImageCarousel/SlideItem.tsx
@@ -3,8 +3,8 @@ import { Slide, SlideImage, SliderTextContainer } from './styles';
 
 type SlideItemProps = {
   slide: {
-    title: React.ReactNode;  // Updated to ReactNode for flexibility
-    description: React.ReactNode;  // Updated to ReactNode for flexibility
+    title: string;
+    description: string;
     imageURL: string | undefined;
   };
   animationClass: string;
@@ -18,15 +18,12 @@ const SlideItem: React.FC<SlideItemProps> = ({
   animationClass,
   isActive,
   objectFit,
-  textPosition = 'Center',
+  textPosition = 'Center'
 }) => {
   return (
-    <Slide
-      animationClass={animationClass}
-      style={{ display: isActive ? 'block' : '' }}
-    >
+    <Slide animationClass={animationClass} style={{ display: isActive ? 'block' : '' }}>
       <SliderTextContainer position={textPosition}>
-        <h2 title="This is image slide title">{slide.title}</h2>
+        <h2 title='This is image slide title'>{slide.title}</h2>
         <p>{slide.description}</p>
       </SliderTextContainer>
       <SlideImage src={slide.imageURL} alt={`Slide ${slide.title}`} objectFit={objectFit} />