@telus-uds/components-base 3.26.0 → 3.28.0

package/src/Carousel/Carousel.jsx

@@ -45,12 +45,13 @@ import {
   LARGE_VIEWPORT_MARGIN,
   DEFAULT_VIEWPORT_MARGIN,
   PEEKING_MULTIPLIER,
-  ACTIVE_INDEX_OFFSET_MULTIPLIER,
   NEGATIVE_MULTIPLIER,
   TRANSITION_MODES,
   SWIPE_RELEASE_STYLES,
   INSTANT_ANIMATION_DURATION,
-  DEFAULT_SWIPE_RELEASE_DURATION
+  DEFAULT_SWIPE_RELEASE_DURATION,
+  POSITION_VARIANTS,
+  POSITION_PROPERTIES
 } from './Constants'
 
 const staticStyles = StyleSheet.create({
@@ -112,7 +113,7 @@ const selectHeroContainerStyles = (width, hidden) => ({
 })
 
 const getDynamicPositionProperty = (areStylesAppliedOnPreviousButton) =>
-  areStylesAppliedOnPreviousButton ? 'left' : 'right'
+  areStylesAppliedOnPreviousButton ? POSITION_PROPERTIES.LEFT : POSITION_PROPERTIES.RIGHT
 
 const selectControlButtonPositionStyles = ({
   positionVariant,
@@ -122,24 +123,41 @@ const selectControlButtonPositionStyles = ({
   enablePeeking,
   enableDisplayMultipleItemsPerSlide,
   isAutoPlayEnabled,
-  viewport
+  viewport,
+  maxWidth,
+  viewportWidth
 }) => {
   const styles = {}
-  if (positionVariant === 'edge') {
-    styles[positionProperty] = -1 * (buttonWidth / 2)
-  } else if (positionVariant === 'inside') {
-    styles[positionProperty] = DEFAULT_POSITION_OFFSET
-  } else if (positionVariant === 'outside') {
+
+  let positionOffset = 0
+
+  if (positionVariant === POSITION_VARIANTS.EDGE) {
+    positionOffset = -1 * (buttonWidth / 2)
+  } else if (positionVariant === POSITION_VARIANTS.INSIDE) {
+    positionOffset = DEFAULT_POSITION_OFFSET
+  } else if (positionVariant === POSITION_VARIANTS.OUTSIDE) {
     if (
       enablePeeking ||
       enableDisplayMultipleItemsPerSlide ||
       (isAutoPlayEnabled && viewport === 'xs')
     ) {
-      styles[positionProperty] = 0
+      positionOffset = 0
     } else {
-      styles[positionProperty] = -1 * (spaceBetweenSlideAndButton + buttonWidth)
+      positionOffset = -1 * (spaceBetweenSlideAndButton + buttonWidth)
     }
   }
+
+  if (enablePeeking) {
+    if (positionProperty === POSITION_PROPERTIES.RIGHT) {
+      const rightMargin = (viewportWidth - maxWidth) / 2
+      positionOffset += rightMargin
+    } else if (positionProperty === POSITION_PROPERTIES.LEFT) {
+      const leftMargin = (viewportWidth - maxWidth) / 2
+      positionOffset += leftMargin
+    }
+  }
+
+  styles[positionProperty] = positionOffset
   return styles
 }
 
@@ -153,7 +171,9 @@ const selectPreviousNextNavigationButtonStyles = (
   enablePeeking,
   enableDisplayMultipleItemsPerSlide,
   isAutoPlayEnabled,
-  viewport
+  viewport,
+  maxWidth,
+  viewportWidth
 ) => {
   const styles = {
     zIndex: 1,
@@ -177,7 +197,9 @@ const selectPreviousNextNavigationButtonStyles = (
       enablePeeking,
       enableDisplayMultipleItemsPerSlide,
       isAutoPlayEnabled,
-      viewport
+      viewport,
+      maxWidth,
+      viewportWidth
     })
   }
 }
@@ -246,7 +268,7 @@ const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) =
   return ITEMS_PER_VIEWPORT_XS_SM
 }
 
-const selectRootContainerStyles = (enableHero, viewport) => {
+const selectRootContainerStyles = (enableHero, viewport, enablePeeking) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
       alignItems: 'center'
@@ -257,16 +279,26 @@ const selectRootContainerStyles = (enableHero, viewport) => {
       paddingHorizontal: 16
     }
   }
+  if (enablePeeking) {
+    return {
+      width: '100%'
+    }
+  }
   return {}
 }
 
-const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
-  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+const selectMainContainerStyles = (enableHero, viewport, maxWidth, enablePeeking) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web' && !enablePeeking) {
     return {
       width: '100%',
       maxWidth: maxWidth || 1200
     }
   }
+  if (enablePeeking) {
+    return {
+      width: '100%'
+    }
+  }
   if (maxWidth !== null && maxWidth !== undefined) {
     return {
       maxWidth,
@@ -277,16 +309,24 @@ const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
   return {}
 }
 
-const selectNavigationStyles = (tabs, enableHero, viewport) => {
+const selectNavigationStyles = (tabs, enableHero, viewport, enablePeeking, maxWidth) => {
   let marginHorizontal = 0
 
   if (enableHero && tabs) {
     marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN
   }
 
-  return {
+  const styles = {
     marginHorizontal
   }
+
+  if (enablePeeking && maxWidth) {
+    styles.maxWidth = maxWidth
+    styles.alignSelf = 'center'
+    styles.width = '100%'
+  }
+
+  return styles
 }
 
 /**
@@ -295,22 +335,16 @@ const selectNavigationStyles = (tabs, enableHero, viewport) => {
  * @param {number} containerWidth - The width of the carousel container.
  * @param {boolean} enablePeeking - Flag indicating whether peeking is enabled.
  * @param {Object} viewport - The viewport configuration object used to determine peeking properties.
- * @param {React.MutableRefObject<number>} activeIndexRef - A ref object holding the current active index of the carousel.
+ * @param {number} maxWidth - The maximum width constraint for the carousel content.
  * @returns {number} The calculated final width of the carousel container.
  */
-const calculateFinalWidth = (containerWidth, enablePeeking, viewport, activeIndexRef) => {
+const calculateFinalWidth = (containerWidth, enablePeeking, viewport, maxWidth) => {
   let finalWidth = containerWidth
 
   if (enablePeeking) {
-    const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
-    const slideWide =
-      containerWidth - (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
-
-    if (activeIndexRef.current === 0) {
-      finalWidth = slideWide + peekingMarginLeft - peekingMiddleSpace
-    } else {
-      finalWidth = slideWide + peekingGap
-    }
+    const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
+    const baseWidth = maxWidth || containerWidth
+    finalWidth = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap
   }
 
   return finalWidth
@@ -431,7 +465,15 @@ const Carousel = React.forwardRef(
 
     const contentMaxWidthValue = useResponsiveProp(contentMaxWidth)
     const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
-    const maxWidth = resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
+
+    let maxWidth = null
+    if (enablePeeking || contentMaxWidth !== undefined) {
+      maxWidth =
+        contentMaxWidthValue === undefined
+          ? responsiveWidth
+          : resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
+    }
+
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
       autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
@@ -494,8 +536,17 @@ const Carousel = React.forwardRef(
     const isSwiping = React.useRef(false)
     const autoPlayRef = React.useRef(null)
 
+    const [rootContainerLayout, setRootContainerLayout] = React.useState({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    })
+    const rootContainerLayoutRef = React.useRef(rootContainerLayout)
+
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= totalItems
+    const currentViewportWidth = rootContainerLayout.width
 
     const handleAnimationStart = React.useCallback(
       (...args) => {
@@ -518,21 +569,16 @@ const Carousel = React.forwardRef(
 
     const updateOffset = React.useCallback(() => {
       if (enablePeeking) {
-        const { peekingGap, peekingMiddleSpace, peekingMarginLeft } = getPeekingProps(viewport)
+        const { peekingGap, peekingMiddleSpace } = getPeekingProps(viewport)
 
         let finalWidth
-        const slideWide =
-          containerLayoutRef.current.width -
-          (peekingMiddleSpace * PEEKING_MULTIPLIER + peekingGap * PEEKING_MULTIPLIER)
+        const baseWidth = maxWidth || containerLayoutRef.current.width
+        const slideWide = baseWidth - peekingMiddleSpace * PEEKING_MULTIPLIER
 
         if (activeIndexRef.current === 0) {
           finalWidth = 0
         } else {
-          finalWidth =
-            slideWide +
-            peekingMarginLeft -
-            peekingMiddleSpace +
-            (slideWide + peekingGap) * (activeIndexRef.current - ACTIVE_INDEX_OFFSET_MULTIPLIER)
+          finalWidth = (slideWide + peekingGap) * activeIndexRef.current
         }
 
         animatedX.current = finalWidth * NEGATIVE_MULTIPLIER
@@ -558,7 +604,7 @@ const Carousel = React.forwardRef(
         })
         heroPan.setValue({ x: 0, y: 0 })
       }
-    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking])
+    }, [pan, animatedX, heroPan, heroAnimatedX, enableHero, viewport, enablePeeking, maxWidth])
 
     const animate = React.useCallback(
       (panToAnimate, toValue, toIndex, isSwipeRelease = false) => {
@@ -664,7 +710,7 @@ const Carousel = React.forwardRef(
           containerLayoutRef.current.width,
           enablePeeking,
           viewport,
-          activeIndexRef
+          maxWidth
         )
 
         toValue.x = finalWidth * -1 * calcDelta
@@ -710,7 +756,8 @@ const Carousel = React.forwardRef(
         enablePeeking,
         pan,
         heroPan,
-        enableHero
+        enableHero,
+        maxWidth
       ]
     )
 
@@ -767,6 +814,10 @@ const Carousel = React.forwardRef(
       heroContainerLayoutRef.current = heroContainerLayout
     }, [heroContainerLayout])
 
+    React.useEffect(() => {
+      rootContainerLayoutRef.current = rootContainerLayout
+    }, [rootContainerLayout])
+
     React.useEffect(() => {
       pan.x.addListener(({ value }) => {
         animatedX.current = value
@@ -849,6 +900,12 @@ const Carousel = React.forwardRef(
       }
     }) => setPreviousNextNavigationButtonWidth(width)
 
+    const onRootContainerLayout = ({
+      nativeEvent: {
+        layout: { x, y, width, height }
+      }
+    }) => setRootContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
+
     const isSwipeAllowed = React.useCallback(() => {
       if (totalItems === 1) {
         return false
@@ -1071,8 +1128,11 @@ const Carousel = React.forwardRef(
     )
 
     return (
-      <View style={selectRootContainerStyles(enableHero, viewport)}>
-        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth)}>
+      <View
+        style={selectRootContainerStyles(enableHero, viewport, enablePeeking)}
+        onLayout={onRootContainerLayout}
+      >
+        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth, enablePeeking)}>
           <CarouselProvider
             activeIndex={activeIndex}
             goTo={goTo}
@@ -1087,6 +1147,8 @@ const Carousel = React.forwardRef(
               enableDisplayMultipleItemsPerSlide,
               viewport
             )}
+            maxWidth={maxWidth}
+            viewportWidth={currentViewportWidth}
           >
             <View
               style={[
@@ -1113,7 +1175,9 @@ const Carousel = React.forwardRef(
                       enablePeeking,
                       enableDisplayMultipleItemsPerSlide,
                       isAutoPlayEnabled,
-                      viewport
+                      viewport,
+                      maxWidth,
+                      viewportWidth: currentViewportWidth
                     })
                   ]}
                 >
@@ -1139,7 +1203,9 @@ const Carousel = React.forwardRef(
                     enablePeeking,
                     enableDisplayMultipleItemsPerSlide,
                     isAutoPlayEnabled,
-                    viewport
+                    viewport,
+                    maxWidth,
+                    currentViewportWidth
                   )}
                   testID="previous-button-container"
                 >
@@ -1192,22 +1258,7 @@ const Carousel = React.forwardRef(
                     let hidden = !isAnimating && index !== activeIndex
 
                     if (enablePeeking && !isAnimating) {
-                      if (enableDisplayMultipleItemsPerSlide) {
-                        const maxItemsForSlide = getMaximumItemsForSlide(
-                          enableDisplayMultipleItemsPerSlide,
-                          viewport
-                        )
-                        if (
-                          index >= activeIndex * maxItemsForSlide - 1 &&
-                          index < activeIndex * maxItemsForSlide + maxItemsForSlide + 1
-                        ) {
-                          hidden = false
-                        } else {
-                          hidden = true
-                        }
-                      } else if (index >= activeIndex - 1 && index <= activeIndex + 1) {
-                        hidden = false
-                      }
+                      hidden = false
                     } else if (
                       !enablePeeking &&
                       enableDisplayMultipleItemsPerSlide &&
@@ -1250,7 +1301,9 @@ const Carousel = React.forwardRef(
                     enablePeeking,
                     enableDisplayMultipleItemsPerSlide,
                     isAutoPlayEnabled,
-                    viewport
+                    viewport,
+                    maxWidth,
+                    currentViewportWidth
                   )}
                   testID="next-button-container"
                 >
@@ -1268,7 +1321,9 @@ const Carousel = React.forwardRef(
                 </View>
               ) : null}
             </View>
-            <View style={selectNavigationStyles(tabs, enableHero, viewport)}>
+            <View
+              style={selectNavigationStyles(tabs, enableHero, viewport, enablePeeking, maxWidth)}
+            >
               {showPanelNavigation ? activePanelNavigation : null}
             </View>
           </CarouselProvider>

package/src/Carousel/CarouselContext.jsx

@@ -14,7 +14,9 @@ const CarouselProvider = ({
   themeTokens,
   totalItems,
   width,
-  maximumItemsForSlide
+  maximumItemsForSlide,
+  maxWidth,
+  viewportWidth
 }) => {
   const value = React.useMemo(
     () => ({
@@ -26,7 +28,9 @@ const CarouselProvider = ({
       themeTokens,
       totalItems,
       width,
-      maximumItemsForSlide
+      maximumItemsForSlide,
+      maxWidth,
+      viewportWidth
     }),
     [
       activeIndex,
@@ -37,7 +41,9 @@ const CarouselProvider = ({
       totalItems,
       themeTokens,
       width,
-      maximumItemsForSlide
+      maximumItemsForSlide,
+      maxWidth,
+      viewportWidth
     ]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
@@ -61,7 +67,9 @@ CarouselProvider.propTypes = {
   themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
-  maximumItemsForSlide: PropTypes.number
+  maximumItemsForSlide: PropTypes.number,
+  maxWidth: PropTypes.number,
+  viewportWidth: PropTypes.number
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -18,27 +18,28 @@ const selectContainerStyle = ({
   width,
   elementIndex,
   enablePeeking,
-  peekingMarginLeft,
   peekingGap,
   hidden,
   enableDisplayMultipleItemsPerSlide,
   viewport,
-  peekingMiddleSpace
+  peekingMiddleSpace,
+  maxWidth,
+  viewportWidth
 }) => {
   let adjustedWidth = width
   let marginLeft = 0
 
   if (enablePeeking) {
     const isFirst = elementIndex === 0
-    adjustedWidth = width - (peekingMiddleSpace * 2 + peekingGap * 2)
+    const baseWidth = maxWidth || width
+    adjustedWidth = baseWidth - peekingMiddleSpace * 2
     if (isFirst) {
-      marginLeft = peekingMarginLeft
+      marginLeft = peekingMiddleSpace + (viewportWidth - maxWidth) / 2
     } else {
       marginLeft = peekingGap
     }
   }
 
-  // Adjust width and margins for multiple items per slide.
   if (enableDisplayMultipleItemsPerSlide) {
     switch (viewport) {
       case 'xs':
@@ -102,7 +103,8 @@ const CarouselItem = React.forwardRef(
     },
     ref
   ) => {
-    const { width, activeIndex, goTo, maximumItemsForSlide } = useCarousel()
+    const { width, activeIndex, goTo, maximumItemsForSlide, maxWidth, viewportWidth } =
+      useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
@@ -162,6 +164,8 @@ const CarouselItem = React.forwardRef(
           enablePeeking,
           enableDisplayMultipleItemsPerSlide,
           viewport,
+          maxWidth,
+          viewportWidth,
           ...peekingProps
         })}
         {...selectedProps}

package/src/Carousel/Constants.js

@@ -23,3 +23,13 @@ export const SWIPE_RELEASE_STYLES = {
 
 export const INSTANT_ANIMATION_DURATION = 1
 export const DEFAULT_SWIPE_RELEASE_DURATION = 500
+export const POSITION_VARIANTS = {
+  EDGE: 'edge',
+  INSIDE: 'inside',
+  OUTSIDE: 'outside'
+}
+
+export const POSITION_PROPERTIES = {
+  LEFT: 'left',
+  RIGHT: 'right'
+}

package/src/Checkbox/Checkbox.jsx

@@ -109,6 +109,25 @@ const selectFeedbackTokens = ({ feedbackMarginBottom, feedbackMarginTop, feedbac
   feedbackMarginTop
 })
 
+const selectPressableStyles = ({
+  padding,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom
+}) => ({
+  padding,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom
+})
+
+const selectContainerStyles = ({ iconContainerHeight, iconContainerWidth }) => ({
+  height: iconContainerHeight,
+  width: iconContainerWidth
+})
+
 /**
  * Basic Checkbox component.
  *
@@ -160,6 +179,7 @@ const Checkbox = React.forwardRef(
       tokens,
       value,
       variant,
+      testID,
       ...rest
     },
     ref
@@ -211,24 +231,22 @@ const Checkbox = React.forwardRef(
       <View style={staticStyles.wrapper} ref={ref}>
         <StackView direction={feedbackPosition === 'top' ? 'column-reverse' : 'column'} space={0}>
           <Pressable
+            testID={testID && `${testID}-pressable`}
             disabled={inactive}
             onKeyDown={handleKeyDown}
             onPress={handleChange}
             {...selectedProps}
-            style={staticStyles.removeOutline}
+            style={[staticStyles.removeOutline, selectPressableStyles(defaultTokens)]}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
               const labelStyles = selectLabelStyles(stateTokens, themeOptions)
-              const alignWithLabel = label
-                ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
-                : null
 
               return (
                 <StackView space={0}>
                   <View style={staticStyles.container}>
-                    <View style={alignWithLabel}>
+                    <View style={[staticStyles.iconContainer, selectContainerStyles(stateTokens)]}>
                       <View
                         style={[
                           staticStyles.defaultInputStyles,
@@ -335,7 +353,11 @@ Checkbox.propTypes = {
   /**
    * An optional Checkbox description.
    */
-  description: PropTypes.string
+  description: PropTypes.string,
+  /**
+   * A identifier for testing purposes.
+   */
+  testID: PropTypes.string
 }
 
 export default Checkbox
@@ -344,6 +366,6 @@ const staticStyles = StyleSheet.create({
   wrapper: { backgroundColor: 'transparent' },
   container: { flexDirection: 'row', alignItems: 'center' },
   defaultInputStyles: { alignItems: 'center', justifyContent: 'center' },
-  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },
+  iconContainer: { display: 'flex', justifyContent: 'center', alignItems: 'center' },
   removeOutline: { outlineStyle: 'none' }
 })

package/src/ExpandCollapse/Control.jsx

@@ -50,7 +50,7 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight'
   return {
     [paddingSide]: iconGap,
-    paddingTop: iconPaddingTop
+    ...(iconPaddingTop && { transform: [{ translateY: iconPaddingTop }] })
   }
 }
 

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -20,13 +20,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   contentfulProps
 ])
 
-function selectBorderStyles(tokens) {
-  return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
-  }
-}
+const selectWrapperStyles = ({ borderWidth, borderTopWidth, borderStyle, borderColor }) => ({
+  borderStyle,
+  borderColor,
+  borderTopWidth,
+  borderBottomWidth: borderWidth,
+  borderBottomStyle: borderStyle,
+  borderBottomColor: borderColor
+})
 
 /**
  * Flexible base component for lists where some or all items are collapsible headers.
@@ -55,7 +56,7 @@ const ExpandCollapse = React.forwardRef(
 
     return (
       <View style={staticStyles.container} ref={ref} {...selectProps(rest)} dataSet={dataSet}>
-        <View style={selectBorderStyles(themeTokens)}>
+        <View style={selectWrapperStyles(themeTokens)}>
           {typeof children === 'function'
             ? children({ openIds, onToggle, resetValues, setValues, unsetValues, instanceId })
             : children}

package/src/ExpandCollapse/Panel.jsx

@@ -96,6 +96,7 @@ const ExpandCollapsePanel = React.forwardRef(
       controlRef,
       content,
       copy = 'en',
+      disableMobileScrollBuffer = false,
       ...rest
     },
     ref
@@ -118,7 +119,10 @@ const ExpandCollapsePanel = React.forwardRef(
 
     // on mobile devices we require a scroll buffer equal to the font size
     // to avoid triggering scrolling unnecessarily
-    const mobileScrollBuffer = Platform.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize
+    const mobileScrollBuffer =
+      Platform.OS === 'web' || disableMobileScrollBuffer
+        ? 0
+        : selectTextStyles(themeTokens)?.fontSize
 
     const handleControlPress = (event) => {
       onToggle?.(panelId, event)
@@ -287,7 +291,11 @@ ExpandCollapsePanel.propTypes = {
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
-  content: PropTypes.bool
+  content: PropTypes.bool,
+  /**
+   * A boolean prop to disable the extra scroll buffer on mobile devices (only applicable on iOS/Android, ignored on web)
+   */
+  disableMobileScrollBuffer: PropTypes.bool
 }
 
 export default ExpandCollapsePanel