Adslot · xiaofan2406 · Jul 11, 2024
diff --git a/src/components/Accordion/index.jsx b/src/components/Accordion/index.jsx
@@ -5,7 +5,7 @@ import Card from '../Card';
 import Panel from '../Panel';
 import invariant from '../../invariant';
 
-const Accordion = ({ dts, children, maxExpand, defaultActivePanelIds, onPanelClick }) => {
+const Accordion = ({ dts, children, maxExpand = 'max', defaultActivePanelIds = [], onPanelClick }) => {
   const [activePanelIds, setActivePanelIds] = React.useState(() => {
     return maxExpand === 'max' ? defaultActivePanelIds : _.slice(defaultActivePanelIds, 0, maxExpand);
   });
@@ -78,10 +78,5 @@ Accordion.propTypes = {
   maxExpand: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['max'])]),
 };
 
-Accordion.defaultProps = {
-  maxExpand: 'max',
-  defaultActivePanelIds: [],
-};
-
 Accordion.Panel = Panel;
 export default Accordion;
diff --git a/src/components/Alert/index.jsx b/src/components/Alert/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const Alert = ({ type, children, dts }) => (
+const Alert = ({ type = 'info', children, dts }) => (
   <div data-testid="alert-wrapper" className={`alert-component alert-component-${type}`} {...expandDts(dts)}>
     {children}
   </div>
@@ -18,8 +18,4 @@ Alert.propTypes = {
   dts: PropTypes.string,
 };
 
-Alert.defaultProps = {
-  type: 'info',
-};
-
 export default Alert;
diff --git a/src/components/Breadcrumb/index.jsx b/src/components/Breadcrumb/index.jsx
@@ -5,7 +5,16 @@ import PropTypes from 'prop-types';
 import BreadcrumbNode from './Node';
 import './styles.css';
 
-const Breadcrumb = ({ rootNode, className, divider, nodes, onClick, disabled }) => {
+const defaultRootNode = { id: 'all', label: 'All' };
+
+const Breadcrumb = ({
+  rootNode = defaultRootNode,
+  className,
+  divider = '>',
+  nodes = [],
+  onClick,
+  disabled = false,
+}) => {
   const baseClass = 'aui--breadcrumb';
   const classNames = classnames(baseClass, { [`${baseClass}--disabled`]: disabled }, className);
   const onClickFunc = (newActiveId) => !disabled && onClick(newActiveId);
@@ -46,11 +55,4 @@ Breadcrumb.propTypes = {
   className: PropTypes.string,
 };
 
-Breadcrumb.defaultProps = {
-  rootNode: { id: 'all', label: 'All' },
-  divider: '>',
-  nodes: [],
-  disabled: false,
-};
-
 export default Breadcrumb;
diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const CardContent = ({ children, className, stretch, fill, append, dts }) => {
+const CardContent = ({ children, className, stretch = false, fill = false, append = false, dts }) => {
   const contentClassNames = classnames('card-component-content', { stretch, fill, append }, className);
   return (
     <div data-testid="card-content-wrapper" className={contentClassNames} {...expandDts(dts)}>
@@ -23,12 +23,6 @@ CardContent.propTypes = {
   dts: PropTypes.string,
 };
 
-CardContent.defaultProps = {
-  fill: false,
-  stretch: false,
-  append: false,
-};
-
 const Card = ({ children, className, accent, dts }) => {
   const baseClass = 'card-component';
   const containerClassNames = classnames(baseClass, { [`accent accent-${accent}`]: accent }, className);

diff --git a/src/components/Carousel/index.jsx b/src/components/Carousel/index.jsx
@@ -8,15 +8,36 @@ import './styles.css';
 
 const baseClass = 'aui--carousel-component';
 
-const Carousel = React.forwardRef((props, ref) => {
-  const { className, children } = props;
-
-  return (
-    <Slider {...props} ref={ref} className={classNames(baseClass, className)}>
-      {children}
-    </Slider>
-  );
-});
+const Carousel = React.forwardRef(
+  (
+    {
+      className,
+      children,
+      autoplay = true,
+      variableWidth = true,
+      autoplaySpeed = 10000,
+      slidesToShow = 2,
+      dots = true,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Slider
+        {...rest}
+        ref={ref}
+        autoplay={autoplay}
+        variableWidth={variableWidth}
+        autoplaySpeed={autoplaySpeed}
+        slidesToShow={slidesToShow}
+        dots={dots}
+        className={classNames(baseClass, className)}
+      >
+        {children}
+      </Slider>
+    );
+  }
+);
 
 Carousel.propTypes = {
   className: PropTypes.string,
@@ -28,14 +49,6 @@ Carousel.propTypes = {
   dots: PropTypes.bool,
 };
 
-Carousel.defaultProps = {
-  autoplay: true,
-  variableWidth: true,
-  autoplaySpeed: 10000,
-  slidesToShow: 2,
-  dots: true,
-};
-
 const SWIPE_DELTA = 3;
 
 const usePreventCarouselSwipeClicks = () => {

diff --git a/src/components/ConfirmModal/index.jsx b/src/components/ConfirmModal/index.jsx
@@ -4,13 +4,13 @@ import ActionPanel from '../ActionPanel';
 import Button from '../Button';
 
 const ConfirmModal = ({
-  buttonCancelLabel,
-  buttonConfirmLabel,
+  buttonCancelLabel = 'Cancel',
+  buttonConfirmLabel = 'Confirm',
+  modalTitle = '',
+  modalDescription = 'Are you sure?',
+  show = false,
   modalApply,
   modalClose,
-  modalDescription,
-  modalTitle,
-  show,
   dts,
 }) => {
   const cancelAction = () => {
@@ -86,12 +86,4 @@ ConfirmModal.propTypes = {
   dts: PropTypes.string,
 };
 
-ConfirmModal.defaultProps = {
-  buttonCancelLabel: 'Cancel',
-  buttonConfirmLabel: 'Confirm',
-  modalTitle: '',
-  modalDescription: 'Are you sure?',
-  show: false,
-};
-
 export default ConfirmModal;
diff --git a/src/components/CountBadge/index.jsx b/src/components/CountBadge/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const CountBadge = ({ value, status, dts }) => {
+const CountBadge = ({ value, status = 'default', dts }) => {
   const fontSize = value > 99 ? 'small' : 'normal';
   const classNames = `count-badge status-${status} count-badge-font-size-${fontSize}`;
   return (
@@ -28,8 +28,4 @@ CountBadge.propTypes = {
   dts: PropTypes.string,
 };
 
-CountBadge.defaultProps = {
-  status: 'default',
-};
-
 export default CountBadge;
diff --git a/src/components/Empty/index.jsx b/src/components/Empty/index.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './styles.css';
 
-const Empty = ({ collection, text, icon }) => {
+const Empty = ({ collection, text = 'Nothing to show.', icon }) => {
   if (_.isEmpty(collection)) {
     return (
       <div data-testid="empty-wrapper" className="empty-component">
@@ -24,8 +24,4 @@ Empty.propTypes = {
   icon: PropTypes.node,
 };
 
-Empty.defaultProps = {
-  text: 'Nothing to show.',
-};
-
 export default Empty;
diff --git a/src/components/FormGroup/index.jsx b/src/components/FormGroup/index.jsx
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const FormGroup = ({ addon, disabled, helpText, label, onChange, placeholder, value }) => {
+const FormGroup = ({ addon, disabled = false, helpText, label, onChange, placeholder, value = '' }) => {
   const addonElement = addon ? <div className="input-group-addon">{addon}</div> : null;
   const inputId = _.kebabCase(label);
   return (
@@ -42,9 +42,4 @@ FormGroup.propTypes = {
   value: PropTypes.string,
 };
 
-FormGroup.defaultProps = {
-  disabled: false,
-  value: '',
-};
-
 export default FormGroup;
diff --git a/src/components/Grid/Cell/index.jsx b/src/components/Grid/Cell/index.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { expandDts, classSuffixHelper } from '../../../utils';
 import './styles.css';
 
-const GridCell = ({ children, classSuffixes, onClick, stretch, dts, addonClassNames }) => {
+const GridCell = ({ children, classSuffixes = [], onClick, stretch = false, dts, addonClassNames = [] }) => {
   const componentClass = 'grid-component-cell';
   const classesList = classSuffixHelper({
     classSuffixes,
@@ -48,10 +48,4 @@ GridCell.propTypes = {
   stretch: PropTypes.bool,
 };
 
-GridCell.defaultProps = {
-  addonClassNames: [],
-  classSuffixes: [],
-  stretch: false,
-};
-
 export default GridCell;
diff --git a/src/components/Grid/Row/index.jsx b/src/components/Grid/Row/index.jsx
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { classSuffixHelper, expandDts } from '../../../utils';
 import './styles.css';
 
-const GridRow = ({ horizontalBorder, short, type, verticalCellBorder, children, dts }) => {
+const GridRow = ({
+  horizontalBorder = true,
+  short = false,
+  type = 'body',
+  verticalCellBorder = false,
+  children,
+  dts,
+}) => {
   const componentClass = 'grid-component-row';
   const classesList = classSuffixHelper({
     classSuffixes: [type],
@@ -45,11 +52,4 @@ GridRow.propTypes = {
   dts: PropTypes.string,
 };
 
-GridRow.defaultProps = {
-  horizontalBorder: true,
-  short: false,
-  type: 'body',
-  verticalCellBorder: false,
-};
-
 export default GridRow;
diff --git a/src/components/HelpIconPopover/index.jsx b/src/components/HelpIconPopover/index.jsx
@@ -4,7 +4,7 @@ import { expandDts } from '../../utils';
 import Popover from '../Popover';
 import './styles.css';
 
-const HelpIconPopover = ({ children, id, placement }) => (
+const HelpIconPopover = ({ children, id, placement = 'right' }) => (
   <div {...expandDts(id)} data-testid="help-icon-popover-wrapper" className="help-icon-popover-component">
     <Popover triggers={['hover']} placement={placement} popoverContent={children}>
       <div data-testid="help-icon-popover-trigger" className="help-icon-popover-component-trigger" />
@@ -18,8 +18,4 @@ HelpIconPopover.propTypes = {
   placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 };
 
-HelpIconPopover.defaultProps = {
-  placement: 'right',
-};
-
 export default HelpIconPopover;
diff --git a/src/components/ImageCropper/index.jsx b/src/components/ImageCropper/index.jsx
@@ -18,7 +18,7 @@ const defaultOptions = {
 };
 
 const ImageCropper = forwardRef(
-  ({ title, src, alt, onCancel, onCrop, width, height, aspectRatio, isSaving, dts }, ref) => {
+  ({ title = 'Image Upload', src, alt, onCancel, onCrop, width, height, aspectRatio, isSaving = false, dts }, ref) => {
     const cropperRef = React.useRef();
     const imageRef = React.useRef();
 
@@ -81,9 +81,4 @@ ImageCropper.propTypes = {
   dts: PropTypes.string,
 };
 
-ImageCropper.defaultProps = {
-  title: 'Image Upload',
-  isSaving: false,
-};
-
 export default ImageCropper;
diff --git a/src/components/InformationBox/index.jsx b/src/components/InformationBox/index.jsx
@@ -5,7 +5,7 @@ import './styles.css';
 
 const styles = ['primary', 'success', 'warning', 'error', 'light'];
 
-const InformationBox = ({ children, icon, title, className, theme, dts }) => (
+const InformationBox = ({ children, icon, title, className, theme = 'light', dts }) => (
   <div
     data-testid="information-box-wrapper"
     className={classnames('aui--information-box', `aui--information-box-${theme}`, className)}
@@ -41,8 +41,4 @@ InformationBox.propTypes = {
   dts: PropTypes.string,
 };
 
-InformationBox.defaultProps = {
-  theme: 'light',
-};
-
 export default InformationBox;
diff --git a/src/components/Navigation/index.jsx b/src/components/Navigation/index.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { expandDts } from '../../utils';
 import './styles.css';
 
-const Nav = ({ stacked, className, onSelect, activeKey, barPosition, children, dts }) => {
+const Nav = ({ stacked = false, className, onSelect, activeKey, barPosition = 'bottom', children, dts }) => {
   let navItems = [];
 
   React.Children.forEach(children, (child) => {
@@ -93,11 +93,6 @@ NavItem.propTypes = {
   href: PropTypes.string,
 };
 
-Nav.defaultProps = {
-  stacked: false,
-  barPosition: 'bottom',
-};
-
 Nav.displayName = 'Navigation';
 
 export default Nav;
diff --git a/src/components/Pill/index.jsx b/src/components/Pill/index.jsx
@@ -6,7 +6,7 @@ import './styles.css';
 
 const sizes = ['large', 'medium', 'small'];
 
-const Pill = ({ className, children, onClick, size, dts }) => (
+const Pill = ({ className, children, onClick, size = sizes[1], dts }) => (
   <div
     className={classnames('aui--pill', `aui--pill-${size}`, { 'aui--pill-clickable': onClick }, className)}
     onClick={onClick}
@@ -16,10 +16,6 @@ const Pill = ({ className, children, onClick, size, dts }) => (
   </div>
 );
 
-Pill.defaultProps = {
-  size: sizes[1],
-};
-
 Pill.propTypes = {
   /**
    * 	Content inside pill