corrections/changes applied

.gitignore

@@ -20,3 +20,7 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+
+# package-lock json
+.package-lock.json

src/components/Accordion/Accordion.tsx

@@ -45,12 +45,16 @@ const Accordion = (props: Props) => {
         </ul>
       </Component>
     </ThemeProvider>
+
+
+
   );
 };
 
 
 
 
+
 export default Accordion;
 
 export { Accordion as CDBAccordion };

src/components/Badge/Badge.tsx

@@ -11,7 +11,7 @@ interface Props {
   flat ?: boolean,
   size ?: string,
   borderType ?: string,
-  color ?: string,
+  colors ?: string,
   tag ?: string,
   icon ?: any;
   intensity ?: any,
@@ -21,7 +21,7 @@ const Badge = (props: Props) => {
   const {
     className,
     tag,
-    color,
+    colors,
     intensity,
     children,
     icon,
@@ -31,7 +31,7 @@ const Badge = (props: Props) => {
     ...attributes
   } = props;
   const badgeClasses = classNames(className);
-  const colors = `${color}${intensity.toString()}`;
+  const color = `${colors}${intensity.toString()}`;
   const badgeComponent = (
     <ThemeProvider theme={theme}>
       <Component
@@ -60,7 +60,7 @@ const Badge = (props: Props) => {
 
 Badge.defaultProps = {
   tag: "span",
-  color: "primary",
+  colors: "primary",
   borderType: "pill",
   size: "medium",
   intensity: "900",
@@ -72,7 +72,7 @@ Badge.propTypes = {
   flat: PropTypes.bool,
   size: PropTypes.string,
   borderType: PropTypes.string,
-  color: PropTypes.string,
+  colors: PropTypes.string,
   tag: PropTypes.string,
   intensity: PropTypes.oneOf([50, 100, 200, 300, 400, 500, 600, 700, 800, 900]),
 };

src/components/Breadcrumb/Breadcrumb.tsx

@@ -23,7 +23,7 @@ const Breadcrumb = (props: Props) => {
   let children;
 
   if (bold) {
-    children = React.Children.map(props.children, (child) => {
+    children = Children.map(props.children, (child) => {
       return React.cloneElement(child, {
         bold: true,
       });

src/components/Carousel/Carousel.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from "react";
+import React, { useState, Fragment, useEffect } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import CarouselControl from "./CarouselControl";
@@ -8,7 +8,7 @@ import { Tag } from "./Carousel.style";
 import { ThemeProvider } from "styled-components";
 import { theme } from "../../theme";
 
-class Carousel extends Component {
+const  Carousel = (props) => {
   state = {
     activeItem: this.props.activeItem,
     initialLength: this.props.length,
@@ -17,10 +17,11 @@ class Carousel extends Component {
     initialX: null,
     initialY: null,
   };
+  const [activeItems, set]
 
   carouselRef = React.createRef();
 
-  componentDidMount() {
+  useEffect(() => {
     const { interval, thumbnails, length } = this.props;
     if (interval === false) {
       return;
@@ -41,30 +42,30 @@ class Carousel extends Component {
     }
 
     this.setState({ initialLength: length });
-  }
+  }, [])
 
-  componentDidUpdate(prevProps, prevState) {
+  useEffect((prevProps, prevState) =>{
     const { length } = this.props;
     const initialLength = length;
 
     if (prevState.initialLength !== length) {
       this.setState({ initialLength });
     }
-  }
+  },[])
 
-  componentWillUnmount() {
+  useEffect(() {
     const { interval } = this.props;
     if (interval === false) {
       return;
     }
     this.clearCycleIntervalHandler();
-  }
+  },[])
 
-  clearCycleIntervalHandler = () => clearInterval(this.cycleInterval);
+ const  clearCycleIntervalHandler = () => clearInterval(this.cycleInterval);
 
-  swipeAvailableHandler = () => this.setState({ swipeAvailable: true });
+ const  swipeAvailableHandler = () => this.setState({ swipeAvailable: true });
 
-  restartInterval = () => {
+ const restartInterval = () => {
     const { interval } = this.props;
 
     if (interval !== false) {
@@ -73,23 +74,23 @@ class Carousel extends Component {
     }
   };
 
-  next = () => {
+  const next = () => {
     const { activeItem, initialLength } = this.state;
     const nextIndex = activeItem + 1;
     const nextItem = nextIndex > initialLength ? 1 : nextIndex;
 
     this.goToIndex(nextItem);
   };
 
-  prev = () => {
+ const  prev = () => {
     const { activeItem, initialLength } = this.state;
     const prevIndex = activeItem - 1;
     const prevItem = prevIndex < 1 ? initialLength : prevIndex;
 
     this.goToIndex(prevItem);
   };
 
-  goToIndex = (item) => {
+  const goToIndex = (item) => {
     this.setState({
       ...this.state,
       activeItem: item,
@@ -98,7 +99,7 @@ class Carousel extends Component {
     this.restartInterval();
   };
 
-  startTouch = (e) => {
+  const startTouch = (e) => {
     const { mobileGesture } = this.props;
     if (mobileGesture !== false) {
       this.setState({
@@ -108,7 +109,7 @@ class Carousel extends Component {
     }
   };
 
-  moveTouch = (e) => {
+ const  moveTouch = (e) => {
     this.setState({
       swipeAvailable: false,
     });
@@ -140,7 +141,7 @@ class Carousel extends Component {
     });
   };
 
-  getChildContext() {
+ const  getChildContext = () => {
     const { activeItem, initialLength } = this.state;
     const { slide } = this.props;
     return {
@@ -150,7 +151,9 @@ class Carousel extends Component {
     };
   }
 
-  render() {
+  return 
+  <>
+
     const {
       activeItem,
       children,
@@ -166,7 +169,7 @@ class Carousel extends Component {
       testimonial,
       thumbnails,
       ...attributes
-    } = this.props;
+    } = props;
 
     const { initialLength, srcArray, swipeAvailable } = this.state;
     const ariaLabel = "carousel";
@@ -257,7 +260,7 @@ class Carousel extends Component {
         </Tag>
       </ThemeProvider>
     );
-  }
+  </>
 }
 
 Carousel.propTypes = {

src/components/Carousel/CarouselCaption/CarouselCaption.tsx

@@ -4,21 +4,23 @@ import classNames from "classnames";
 import { ThemeProvider } from "styled-components";
 import { theme } from "../../../theme";
 
+
 interface Props{
   children: React.ReactNode,
   className: string,
   tag: [Function, string],
+  as:any
 
 }
 
 const CarouselCaption = (props: Props) => {
-  const { children, className, tag, ...attributes } = props;
+  const { children, className, as, ...attributes } = props;
 
   const classes = classNames("carousel-caption", className);
 
   return (
     <ThemeProvider theme={theme}>
-      <div data-test="carousel-caption" {...tag} {...attributes} className={classes}>
+      <div data-test="carousel-caption"  {...attributes} className={classes}>
         {children}
       </div>
     </ThemeProvider>
@@ -27,7 +29,6 @@ const CarouselCaption = (props: Props) => {
 
 CarouselCaption.propTypes = {
   children: PropTypes.node,
-
   className: PropTypes.string,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 };

src/components/Carousel/CarouselItem/CarouselItem.tsx

@@ -1,41 +1,44 @@
-import React, { Component } from "react";
+import React, { useState, } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import { ThemeProvider } from "styled-components";
 import { theme } from "./../../../theme";
 
-class CarouselItem extends Component {
-  moveForward = () => {
-    this.style = {
+const CarouselItem = (props) =>{
+  const [style, setStyle] = useState({})
+  const [context, setContext] = useState({})
+
+ const moveForward = () => {
+    setStyle({
       position: "absolute",
       left: "100%",
-    };
+    })
   };
 
-  moveBackwards = () => {
-    this.style = {
+  const moveBackwards = () => {
+    setStyle({
       position: "absolute",
       left: "-100%",
-    };
+    })
   };
 
-  makeVisible = () => {
-    this.style = {
+ const  makeVisible = () => {
+    setStyle({
       left: "0",
-    };
+    })
   };
 
-  render() {
+
     let {
       active,
       children,
       className,
       itemId,
       tag: Tag,
       ...attributes
-    } = this.props;
+    } = props;
 
-    let { slide, activeItem } = this.context;
+    setContext({ slide, activeItem }) 
 
     itemId = parseInt(itemId, 10);
 
@@ -52,14 +55,14 @@ class CarouselItem extends Component {
 
     if (slide) {
       if (slideIndex < 0) {
-        this.moveForward();
+        setStyle(moveForward);
       } else if (slideIndex > 0) {
-        this.moveBackwards();
+        setStyle(moveBackwards);
       } else {
-        this.makeVisible();
+        setStyle(makeVisible);
       }
     } else {
-      this.makeVisible();
+      setStyle(makeVisible);
     }
 
     return (
@@ -68,13 +71,13 @@ class CarouselItem extends Component {
           data-test="carousel-item"
           {...attributes}
           className={classes}
-          style={this.style}
+          style={style}
         >
           {children}
         </Tag>
       </ThemeProvider>
     );
-  }
+
 }
 
 CarouselItem.propTypes = {

src/components/Modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, useEffect } from "react";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import { Transition } from "react-transition-group";
@@ -8,14 +8,14 @@ import { Component as StyledComponent } from "./Modal.style";
 import { ThemeProvider } from "styled-components";
 import { theme } from "./../../theme";
 
-class Modal extends Component {
+const Modal =() => {
   state = {
     initialIsOpen: this.props.isOpen || false,
   };
 
   modalContent = React.createRef();
 
-  componentDidUpdate = (prevProps, prevState) => {
+  useEffect((prevProps, prevState) => {
     const { isOpen, overflowScroll } = this.props;
     const overflowStatement = overflowScroll
       ? "overflow-hidden"
@@ -30,7 +30,7 @@ class Modal extends Component {
         }
       });
     }
-  };
+  }, []);
 
   handleOnEntered = (type, node) => {
     if (type === "backdrop" && this.props.fade === false) {