@telus-uds/components-base 2.4.0 → 3.0.0

package/src/Carousel/Carousel.jsx

@@ -25,7 +25,14 @@ import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
 import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel'
 import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
-import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL } from './Constants'
+import {
+  ITEMS_PER_VIEWPORT_MD,
+  ITEMS_PER_VIEWPORT_LG_XL,
+  DEFAULT_POSITION_OFFSET,
+  HERO_POSITION_OFFSET,
+  LARGE_VIEWPORT_MARGIN,
+  DEFAULT_VIEWPORT_MARGIN
+} from './Constants'
 
 const TRANSITION_MODES = {
   MANUAL: 'manual',
@@ -40,7 +47,12 @@ const staticStyles = StyleSheet.create({
     alignItems: 'center',
     position: 'relative',
     top: 0,
-    left: 0
+    left: 0,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
   },
   animationControlButton: {
     position: 'absolute',
@@ -77,13 +89,19 @@ const selectControlButtonPositionStyles = ({
   positionProperty = getDynamicPositionProperty(),
   spaceBetweenSlideAndButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide
+  enableDisplayMultipleItemsPerSlide,
+  enableHero,
+  viewport
 }) => {
   const styles = {}
   if (positionVariant === 'edge') {
     styles[positionProperty] = -1 * (buttonWidth / 2)
   } else if (positionVariant === 'inside') {
-    styles[positionProperty] = 0
+    if (enableHero && viewport === 'xl') {
+      styles[positionProperty] = HERO_POSITION_OFFSET
+    } else {
+      styles[positionProperty] = DEFAULT_POSITION_OFFSET
+    }
   } else if (positionVariant === 'outside') {
     if (enablePeeking || enableDisplayMultipleItemsPerSlide) {
       styles[positionProperty] = 0
@@ -102,7 +120,9 @@ const selectPreviousNextNavigationButtonStyles = (
   isLastSlide,
   areStylesAppliedOnPreviousButton,
   enablePeeking,
-  enableDisplayMultipleItemsPerSlide
+  enableDisplayMultipleItemsPerSlide,
+  enableHero,
+  viewport
 ) => {
   const styles = {
     zIndex: 1,
@@ -124,7 +144,9 @@ const selectPreviousNextNavigationButtonStyles = (
       positionProperty: getDynamicPositionProperty(areStylesAppliedOnPreviousButton),
       spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
       enablePeeking,
-      enableDisplayMultipleItemsPerSlide
+      enableDisplayMultipleItemsPerSlide,
+      enableHero,
+      viewport
     })
   }
 }
@@ -168,6 +190,40 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   return childrenArray.length
 }
 
+const selectRootContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      alignItems: 'center'
+    }
+  }
+  return {}
+}
+
+const selectMainContainerStyles = (enableHero, viewport) => {
+  if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
+    return {
+      width: '100%',
+      maxWidth: 1200
+    }
+  }
+  return {}
+}
+
+const selectNavigationStyles = (tabs, tabsPanelHeight, enableHero, viewport) => {
+  let marginTop = 0
+  let marginHorizontal = 0
+
+  if (enableHero && tabs) {
+    marginTop = -tabsPanelHeight
+    marginHorizontal = viewport === 'xl' ? LARGE_VIEWPORT_MARGIN : DEFAULT_VIEWPORT_MARGIN
+  }
+
+  return {
+    marginTop,
+    marginHorizontal
+  }
+}
+
 /**
  * Calculates the final width of the carousel container for displacement purposes based on various conditions.
  *
@@ -312,6 +368,7 @@ const Carousel = React.forwardRef(
       springConfig = undefined,
       thumbnails = undefined,
       enableDisplayMultipleItemsPerSlide = false,
+      enableHero = false,
       panelNavigation = thumbnails ? (
         <CarouselThumbnailNavigation thumbnails={thumbnails} />
       ) : (
@@ -364,7 +421,8 @@ const Carousel = React.forwardRef(
     const [containerLayout, setContainerLayout] = React.useState({
       x: 0,
       y: 0,
-      width: 0
+      width: 0,
+      height: 0
     })
     const containerLayoutRef = React.useRef(containerLayout)
 
@@ -572,6 +630,8 @@ const Carousel = React.forwardRef(
       [fixOffsetAndGo]
     )
 
+    const [tabsPanelHeight, setTabsPanelHeight] = React.useState(0)
+
     React.useEffect(() => {
       activeIndexRef.current = activeIndex
     }, [activeIndex])
@@ -627,11 +687,15 @@ const Carousel = React.forwardRef(
       }
     }, [stopAutoplay])
 
+    const onTabsPanelLayout = (event) => {
+      setTabsPanelHeight(event.nativeEvent.layout.height)
+    }
+
     const onContainerLayout = ({
       nativeEvent: {
-        layout: { x, y, width }
+        layout: { x, y, width, height }
       }
-    }) => setContainerLayout((prevState) => ({ ...prevState, x, y, width }))
+    }) => setContainerLayout((prevState) => ({ ...prevState, x, y, width, height }))
 
     const onPreviousNextNavigationButtonLayout = ({
       nativeEvent: {
@@ -794,160 +858,169 @@ const Carousel = React.forwardRef(
     }, [isCarouselPlaying, stopAutoplay, startAutoplay])
 
     return (
-      <CarouselProvider
-        activeIndex={activeIndex}
-        goTo={goTo}
-        getCopyWithPlaceholders={getCopyWithPlaceholders}
-        itemLabel={itemLabel}
-        totalItems={totalItems}
-        themeTokens={themeTokens}
-        firstFocusRef={firstFocusRef}
-        refocus={refocus}
-        width={containerLayout.width}
-      >
-        <View
-          style={[
-            staticStyles.root,
-            {
-              ...Platform.select({
-                web: {
-                  outline: 'none'
-                }
-              })
-            }
-          ]}
-          onLayout={onContainerLayout}
-          ref={ref}
-          {...systemProps}
-          {...containerProps}
-        >
-          {isAutoPlayEnabled ? (
+      <View style={selectRootContainerStyles(enableHero, viewport)}>
+        <View style={selectMainContainerStyles(enableHero, viewport)}>
+          <CarouselProvider
+            activeIndex={activeIndex}
+            goTo={goTo}
+            getCopyWithPlaceholders={getCopyWithPlaceholders}
+            itemLabel={itemLabel}
+            totalItems={totalItems}
+            themeTokens={themeTokens}
+            firstFocusRef={firstFocusRef}
+            refocus={refocus}
+            width={containerLayout.width}
+          >
             <View
-              style={[
-                staticStyles.animationControlButton,
-                selectControlButtonPositionStyles({
-                  positionVariant: previousNextNavigationPosition,
-                  buttonWidth: previousNextNavigationButtonWidth,
-                  positionProperty: getDynamicPositionProperty(),
-                  spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
-                  enablePeeking,
-                  enableDisplayMultipleItemsPerSlide
-                })
-              ]}
+              style={[staticStyles.root]}
+              onLayout={onContainerLayout}
+              ref={ref}
+              {...systemProps}
+              {...containerProps}
             >
-              <IconButton
-                icon={isCarouselPlaying ? pauseIcon : playIcon}
-                accessibilityLabel={
-                  isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel')
-                }
-                variant={previousNextIconButtonVariants}
-                onPress={onAnimationControlButtonPress}
-              />
-            </View>
-          ) : null}
-          {showPreviousNextNavigation && totalItems > 1 ? (
-            <View
-              style={selectPreviousNextNavigationButtonStyles(
-                previousNextNavigationButtonWidth,
-                previousNextNavigationPosition,
-                spaceBetweenSlideAndPreviousNextNavigation,
-                isFirstSlide,
-                isLastSlide,
-                true,
-                enablePeeking,
-                enableDisplayMultipleItemsPerSlide
+              {isAutoPlayEnabled ? (
+                <View
+                  style={[
+                    staticStyles.animationControlButton,
+                    selectControlButtonPositionStyles({
+                      positionVariant: previousNextNavigationPosition,
+                      buttonWidth: previousNextNavigationButtonWidth,
+                      positionProperty: getDynamicPositionProperty(),
+                      spaceBetweenSlideAndButton: spaceBetweenSlideAndPreviousNextNavigation,
+                      enablePeeking,
+                      enableDisplayMultipleItemsPerSlide,
+                      enableHero,
+                      viewport
+                    })
+                  ]}
+                >
+                  <IconButton
+                    icon={isCarouselPlaying ? pauseIcon : playIcon}
+                    accessibilityLabel={
+                      isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel')
+                    }
+                    variant={previousNextIconButtonVariants}
+                    onPress={onAnimationControlButtonPress}
+                  />
+                </View>
+              ) : null}
+              {showPreviousNextNavigation && totalItems > 1 ? (
+                <View
+                  style={selectPreviousNextNavigationButtonStyles(
+                    previousNextNavigationButtonWidth,
+                    previousNextNavigationPosition,
+                    spaceBetweenSlideAndPreviousNextNavigation,
+                    isFirstSlide,
+                    isLastSlide,
+                    true,
+                    enablePeeking,
+                    enableDisplayMultipleItemsPerSlide,
+                    enableHero,
+                    viewport
+                  )}
+                  testID="previous-button-container"
+                >
+                  <IconButton
+                    onLayout={onPreviousNextNavigationButtonLayout}
+                    icon={previousIcon}
+                    onPress={goToPrev}
+                    variant={previousNextIconButtonVariants}
+                    accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
+                      '%{targetStep}',
+                      activeIndex
+                    )}
+                    tokens={selectIconStyles(themeTokens)}
+                  />
+                </View>
+              ) : null}
+              {Boolean(skipLinkHref) && (
+                <SkipLink ref={firstFocusRef} href={skipLinkHref}>
+                  {getCopyWithPlaceholders('skipLink')}
+                </SkipLink>
               )}
-              testID="previous-button-container"
-            >
-              <IconButton
-                onLayout={onPreviousNextNavigationButtonLayout}
-                icon={previousIcon}
-                onPress={goToPrev}
-                variant={previousNextIconButtonVariants}
-                accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
-                  '%{targetStep}',
-                  activeIndex
-                )}
-                tokens={selectIconStyles(themeTokens)}
-              />
+              {!isFirstFocusContainer && (
+                <A11yText
+                  // Read the current slide position to screen readers on slide.
+                  // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
+                  accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
+                  text={getCopyWithPlaceholders('stepTrackerLabel')}
+                />
+              )}
+              <View style={selectContainerStyles(containerLayout.width)}>
+                <Animated.View
+                  style={StyleSheet.flatten([
+                    selectSwipeAreaStyles(
+                      totalItems,
+                      containerLayout.width,
+                      enablePeeking,
+                      enableDisplayMultipleItemsPerSlide
+                    ),
+                    {
+                      transform: [{ translateX: pan.x }, { translateY: pan.y }]
+                    }
+                  ])}
+                  {...panResponder.panHandlers}
+                  {...getA11yPropsFromHtmlTag(tag)}
+                  // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
+                  // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
+                  accessibilityLiveRegion={accessibilityLiveRegion}
+                >
+                  {childrenArray.map((element, index) => {
+                    const hidden = !isAnimating && index !== activeIndex
+                    const clonedElement = React.cloneElement(element, {
+                      elementIndex: index,
+                      hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
+                      enablePeeking,
+                      peekingProps: getPeekingProps(viewport),
+                      enableDisplayMultipleItemsPerSlide,
+                      viewport,
+                      backgroundColor: element.props.backgroundColor,
+                      enableHero,
+                      tabsPanelHeight
+                    })
+                    return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
+                  })}
+                </Animated.View>
+              </View>
+              {showPreviousNextNavigation && totalItems > 1 ? (
+                <View
+                  style={selectPreviousNextNavigationButtonStyles(
+                    previousNextNavigationButtonWidth,
+                    previousNextNavigationPosition,
+                    spaceBetweenSlideAndPreviousNextNavigation,
+                    isFirstSlide,
+                    isLastSlide,
+                    false,
+                    enablePeeking,
+                    enableDisplayMultipleItemsPerSlide,
+                    enableHero,
+                    viewport
+                  )}
+                  testID="next-button-container"
+                >
+                  <IconButton
+                    onLayout={onPreviousNextNavigationButtonLayout}
+                    icon={nextIcon}
+                    onPress={goToNext}
+                    variant={previousNextIconButtonVariants}
+                    accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
+                      '%{targetStep}',
+                      activeIndex + 2
+                    )}
+                    tokens={selectIconStyles(themeTokens)}
+                  />
+                </View>
+              ) : null}
             </View>
-          ) : null}
-          {Boolean(skipLinkHref) && (
-            <SkipLink ref={firstFocusRef} href={skipLinkHref}>
-              {getCopyWithPlaceholders('skipLink')}
-            </SkipLink>
-          )}
-          {!isFirstFocusContainer && (
-            <A11yText
-              // Read the current slide position to screen readers on slide.
-              // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
-              accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
-              text={getCopyWithPlaceholders('stepTrackerLabel')}
-            />
-          )}
-          <View style={selectContainerStyles(containerLayout.width)}>
-            <Animated.View
-              style={StyleSheet.flatten([
-                selectSwipeAreaStyles(
-                  totalItems,
-                  containerLayout.width,
-                  enablePeeking,
-                  enableDisplayMultipleItemsPerSlide
-                ),
-                {
-                  transform: [{ translateX: pan.x }, { translateY: pan.y }]
-                }
-              ])}
-              {...panResponder.panHandlers}
-              {...getA11yPropsFromHtmlTag(tag)}
-              // In iframes on Mac (e.g. in Storybook), this content may be misread or read twice.
-              // This is a known Voiceover bug: https://github.com/phetsims/a11y-research/issues/132
-              accessibilityLiveRegion={accessibilityLiveRegion}
-            >
-              {childrenArray.map((element, index) => {
-                const hidden = !isAnimating && index !== activeIndex
-                const clonedElement = React.cloneElement(element, {
-                  elementIndex: index,
-                  hidden: enablePeeking || enableDisplayMultipleItemsPerSlide ? false : hidden,
-                  enablePeeking,
-                  peekingProps: getPeekingProps(viewport),
-                  enableDisplayMultipleItemsPerSlide,
-                  viewport
-                })
-                return <React.Fragment key={index.toFixed(2)}>{clonedElement}</React.Fragment>
-              })}
-            </Animated.View>
-          </View>
-          {showPreviousNextNavigation && totalItems > 1 ? (
             <View
-              style={selectPreviousNextNavigationButtonStyles(
-                previousNextNavigationButtonWidth,
-                previousNextNavigationPosition,
-                spaceBetweenSlideAndPreviousNextNavigation,
-                isFirstSlide,
-                isLastSlide,
-                false,
-                enablePeeking,
-                enableDisplayMultipleItemsPerSlide
-              )}
-              testID="next-button-container"
+              style={selectNavigationStyles(tabs, tabsPanelHeight, enableHero, viewport)}
+              onLayout={tabs && onTabsPanelLayout}
             >
-              <IconButton
-                onLayout={onPreviousNextNavigationButtonLayout}
-                icon={nextIcon}
-                onPress={goToNext}
-                variant={previousNextIconButtonVariants}
-                accessibilityLabel={getCopyWithPlaceholders('iconButtonLabel').replace(
-                  '%{targetStep}',
-                  activeIndex + 2
-                )}
-                tokens={selectIconStyles(themeTokens)}
-              />
+              {showPanelNavigation ? activePanelNavigation : null}
             </View>
-          ) : null}
+          </CarouselProvider>
         </View>
-        {showPanelNavigation ? activePanelNavigation : null}
-      </CarouselProvider>
+      </View>
     )
   }
 )

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -11,6 +11,7 @@ import {
 } from '../../utils'
 import { useCarousel } from '../CarouselContext'
 import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants'
+import Box from '../../Box'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -99,11 +100,14 @@ const CarouselItem = React.forwardRef(
       peekingProps,
       enableDisplayMultipleItemsPerSlide,
       viewport,
+      backgroundColor,
+      enableHero,
+      tabsPanelHeight,
       ...rest
     },
     ref
   ) => {
-    const { width, activeIndex, height } = useCarousel()
+    const { width, activeIndex } = useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
@@ -118,7 +122,6 @@ const CarouselItem = React.forwardRef(
           width,
           elementIndex,
           hidden,
-          height,
           enablePeeking,
           enableDisplayMultipleItemsPerSlide,
           viewport,
@@ -128,7 +131,10 @@ const CarouselItem = React.forwardRef(
         {...focusabilityProps}
         ref={ref}
       >
-        {children}
+        <Box variant={{ background: backgroundColor }} space={0} flex={1}>
+          {children}
+          {enableHero && <View style={{ height: tabsPanelHeight }} />}
+        </Box>
       </View>
     )
   }
@@ -176,7 +182,11 @@ CarouselItem.propTypes = {
     peekingLastSpace: PropTypes.number,
     peekingMiddleSpace: PropTypes.number,
     peekingGap: PropTypes.number
-  })
+  }),
+  /**
+   * Background color of the slide. It supports Box background variant colors.
+   */
+  backgroundColor: PropTypes.string
 }
 
 CarouselItem.displayName = 'Carousel.Item'

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -33,6 +33,9 @@ const CarouselStepTracker = React.forwardRef(
     const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
 
     if (enableDisplayMultipleItemsPerSlide) {
+      if (totalItems === 1) {
+        return null
+      }
       return (
         <>
           <Spacer space={4} />

package/src/Carousel/Constants.js

@@ -1,3 +1,7 @@
 export const ITEMS_PER_VIEWPORT_MD = 2
 export const ITEMS_PER_VIEWPORT_LG_XL = 3
 export const GAP_BETWEEN_ITEMS = 16
+export const HERO_POSITION_OFFSET = 20
+export const DEFAULT_POSITION_OFFSET = 0
+export const LARGE_VIEWPORT_MARGIN = 40
+export const DEFAULT_VIEWPORT_MARGIN = 10

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ExpandCollapse from '../ExpandCollapse'
+import { getTokensPropType } from '../utils'
+import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
+
+const ExpandCollapseMini = React.forwardRef(
+  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
+    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
+    const handleChange = (openPanels, event) => {
+      if (typeof onToggle === 'function') {
+        const isOpen = openPanels.length > 0
+        onToggle(event, isOpen)
+      }
+    }
+
+    return (
+      <ExpandCollapse
+        onChange={handleChange}
+        tokens={tokens}
+        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
+      >
+        {(expandProps) => (
+          <ExpandCollapse.Panel
+            {...expandProps}
+            panelId={expandCollapeMiniPanelId}
+            variant={{ mini: true }}
+            controlTokens={{
+              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+              icon: null,
+              borderColor: 'transparent',
+              textLine: 'none',
+              backgroundColor: 'transparent'
+            }}
+            // TODO refactor
+            // eslint-disable-next-line react/no-unstable-nested-components
+            control={(pressableState) => (
+              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+            )}
+            controlRef={ref}
+            nativeID={nativeID}
+          >
+            {children}
+          </ExpandCollapse.Panel>
+        )}
+      </ExpandCollapse>
+    )
+  }
+)
+ExpandCollapseMini.displayName = 'ExpandCollapseMini'
+
+ExpandCollapseMini.propTypes = {
+  ...ExpandCollapseMiniControl.propTypes,
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
+  onToggle: PropTypes.func,
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  tokens: getTokensPropType('ExpandCollapseMini')
+}
+
+export default ExpandCollapseMini