@telus-uds/components-base 2.0.0 → 2.0.1

package/src/Carousel/CarouselFirstFocus/CarouselFirstFocus.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Pressable, Platform, StyleSheet } from 'react-native'
 import { PropTypes } from 'prop-types'
 
@@ -10,7 +10,7 @@ import { useCarousel } from '../CarouselContext'
  *
  * @TODO rework this after integrating with SkipLink when available.
  */
-const CarouselFirstFocus = forwardRef(({ title }, ref) => {
+const CarouselFirstFocus = React.forwardRef(({ title }, ref) => {
   const { getCopyWithPlaceholders } = useCarousel()
 
   // TODO: integrate skip link description if behaving as skip link.

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -13,30 +13,96 @@ import { useCarousel } from '../CarouselContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const selectContainerStyle = ({
+  width,
+  activeIndex,
+  elementIndex,
+  totalItems,
+  enablePeeking,
+  peekingMarginLeft,
+  peekingFirstSpace,
+  peekingLastSpace,
+  peekingMiddleSpace,
+  peekingGap,
+  hidden
+}) => {
+  let adjustedWidth = width
+  let marginLeft = 0
+  const marginRight = 0
+
+  if (enablePeeking) {
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace)
+    const isFirst = elementIndex === 0
+    const isActive = activeIndex === elementIndex
+
+    if (isActive) {
+      if (isFirst) {
+        marginLeft = peekingMarginLeft
+      } else {
+        marginLeft = peekingGap
+      }
+    } else if (isFirst) {
+      marginLeft = peekingMarginLeft + peekingGap + peekingFirstSpace + peekingMiddleSpace
+      if (activeIndex > 1) {
+        marginLeft += (peekingGap + peekingMiddleSpace * 2) * (activeIndex - 1)
+      }
+      if (activeIndex === totalItems - 1) {
+        marginLeft += peekingLastSpace - peekingMiddleSpace
+      }
+    } else {
+      marginLeft = peekingGap
+    }
+  }
+
+  const style = {
+    width: adjustedWidth,
+    marginLeft,
+    marginRight
+  }
+
+  if (hidden && Platform.OS === 'web') {
+    style.visibility = 'hidden'
+  }
+
+  return style
+}
+
 /**
  * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselItem = ({ children, elementIndex, tag = 'li', hidden, ...rest }) => {
-  const { width, activeIndex } = useCarousel()
+const CarouselItem = React.forwardRef(
+  ({ children, elementIndex, tag = 'li', hidden, enablePeeking, peekingProps, ...rest }, ref) => {
+    const { width, activeIndex, totalItems, height } = useCarousel()
 
-  const selectedProps = selectProps({
-    ...rest,
-    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
-  })
+    const selectedProps = selectProps({
+      ...rest,
+      ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+    })
 
-  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
-  const style = { width }
-  if (hidden && Platform.OS === 'web') {
-    // On web, visibility: hidden makes all children non-focusable. It doesn't exist on native.
-    style.visibility = 'hidden'
+    const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+
+    return (
+      <View
+        style={selectContainerStyle({
+          width,
+          activeIndex,
+          elementIndex,
+          totalItems,
+          hidden,
+          height,
+          enablePeeking,
+          ...peekingProps
+        })}
+        {...selectedProps}
+        {...focusabilityProps}
+        ref={ref}
+      >
+        {children}
+      </View>
+    )
   }
-  return (
-    <View style={style} {...selectedProps} {...focusabilityProps}>
-      {children}
-    </View>
-  )
-}
+)
 
 CarouselItem.propTypes = {
   ...selectedSystemPropTypes,
@@ -65,7 +131,22 @@ CarouselItem.propTypes = {
   /**
    * Function to set carousel content background color when slide is being display
    */
-  setContentBackgroundColor: PropTypes.func
+  setContentBackgroundColor: PropTypes.func,
+  /**
+   * Boolean to enable peeking effect on the first and last slide
+   */
+  enablePeeking: PropTypes.bool,
+  /**
+   * Object to configure the peeking effect
+   */
+  peekingProps: PropTypes.shape({
+    peekingMarginLeft: PropTypes.number,
+    peekingMarginRight: PropTypes.number,
+    peekingFirstSpace: PropTypes.number,
+    peekingLastSpace: PropTypes.number,
+    peekingMiddleSpace: PropTypes.number,
+    peekingGap: PropTypes.number
+  })
 }
 
 CarouselItem.displayName = 'Carousel.Item'

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -4,22 +4,30 @@ import StepTracker from '../../StepTracker'
 import StackView from '../../StackView'
 import { variantProp } from '../../utils'
 
-const CarouselStepTracker = ({ variant }) => {
-  const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
+const CarouselStepTracker = React.forwardRef(({ variant }, ref) => {
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens: { stepTrackerCurrentBackgroundColor, ...themeTokens }
+  } = useCarousel()
   const stackViewTokens = {
     justifyContent: 'center'
   }
+
   const stepTrackerTokens = {
     showStepLabel: false,
     showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
     connectorCompletedColor: 'none',
     connectorColor: 'none',
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   }
+
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
   return (
-    <StackView direction="row" tokens={stackViewTokens}>
+    <StackView direction="row" tokens={stackViewTokens} ref={ref}>
       <StepTracker
         current={activeIndex}
         steps={steps}
@@ -33,7 +41,9 @@ const CarouselStepTracker = ({ variant }) => {
       />
     </StackView>
   )
-}
+})
+
+CarouselStepTracker.displayName = 'CarouselStepTracker'
 
 CarouselStepTracker.propTypes = {
   variant: variantProp.propType

package/src/Carousel/CarouselTabs/CarouselTabs.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useResponsiveProp } from '../../utils'
@@ -7,7 +7,7 @@ import Carousel from '../Carousel'
 /**
  * @deprecated Please use Carousel and pass the `tabs` prop.
  */
-const CarouselTabs = forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
+const CarouselTabs = React.forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
   const tabs = useResponsiveProp({ md: items })
 
   return (

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -11,28 +11,38 @@ const selectTabPanelStyle = () => ({
   backgroundColor: 'transparent'
 })
 
-const CarouselTabsPanel = forwardRef(({ items }, ref) => {
+const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
   const { activeIndex, goTo } = useCarousel()
-  const nextFocusRef = useRef()
-  const firstTabRef = useRef()
-  const [isInverse, setIsInverse] = useState(false)
-
-  // TODO: figure out a better cross-brand way to specify subcomponent variants.
-  // For now, this picks an Allium variant, and does nothing in brands that lack it.
-  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-  const dividerVariant = { decorative: true }
+  const nextFocusRef = React.useRef()
+  const firstTabRef = React.useRef()
+  const [isInverse, setIsInverse] = React.useState(false)
 
   const lastTabSelected = activeIndex === items.length - 1
 
   // Get current select tab style
-  useEffect(() => {
+  React.useEffect(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex)
     setIsInverse(selectedVariantIsInverse?.inverse)
   }, [items, activeIndex])
 
+  // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+  const dividerVariant = { decorative: true, inverse: isInverse }
+
   return (
     <View style={selectTabPanelStyle()}>
-      <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
+      <StackView
+        direction="row"
+        space={3}
+        divider={{
+          variant: dividerVariant,
+          accessibilityRole: 'presentation',
+          accessibilityOrientation: null
+        }}
+        ref={ref}
+        accessibilityRole="tablist"
+      >
         {items.map(({ title, onPress, inverse, ...panelItemProps }, index) => {
           const selected = index === activeIndex
           const isNext = index === activeIndex + 1

package/src/Carousel/CarouselTabs/CarouselTabsPanelItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Text, Platform } from 'react-native'
 
@@ -64,12 +64,12 @@ const selectTextStyles = ({
     color
   })
 
-const CarouselTabsPanelItem = forwardRef(
+const CarouselTabsPanelItem = React.forwardRef(
   ({ title, selected, inactive, variant, tokens, accessibilityRole = 'tab', ...rest }, ref) => {
     // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
     // Don't allow disabled to be set while focus is true else focus state gets locked `true`
     // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
-    const [isFocused, setIsFocused] = useState(false)
+    const [isFocused, setIsFocused] = React.useState(false)
     const disabled = (inactive || selected) && !isFocused
 
     const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant)

package/src/Carousel/CarouselThumbnail.jsx

@@ -2,14 +2,25 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Image } from 'react-native'
 import { useCarousel } from './CarouselContext'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
+
+const selectPressableTokens = ({ borderColor, borderRadius, borderWidth, margin, padding }) => ({
+  borderColor,
+  borderRadius,
+  borderWidth,
+  margin,
+  padding
+})
 
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
-  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo, themeTokens } =
-    useCarousel()
+const CarouselThumbnail = React.forwardRef(({ accessibilityLabel, alt, index, src }, ref) => {
+  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo } = useCarousel()
+  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail')
+  const viewport = useViewport()
   const thumbnailTitle =
     alt ??
     getCopyWithPlaceholders('stepTrackerLabel')
@@ -21,32 +32,22 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
     // Allow using the spacebar for navigation
     if (event?.key === ' ') goTo(index)
   }
-  const {
-    thumbnailBorderColor,
-    thumbnailBorderRadius,
-    thumbnailBorderWidth,
-    thumbnailMargin,
-    thumbnailPadding,
-    thumbnailSelectedBorderColor,
-    thumbnailSelectedBorderWidth,
-    thumbnailSize
-  } = themeTokens
+  const { borderWidth, padding, selectedBorderColor, selectedBorderWidth, size, margin } =
+    getThumbnailTokens({ viewport })
   const styles = {
-    pressable: {
-      borderColor: thumbnailBorderColor,
-      borderRadius: thumbnailBorderRadius,
-      borderWidth: thumbnailBorderWidth,
-      margin: thumbnailMargin,
-      padding: thumbnailPadding
-    },
     image: {
-      height: thumbnailSize,
-      width: thumbnailSize
+      height: size,
+      width: size
     },
     selected: {
-      borderColor: thumbnailSelectedBorderColor,
-      borderWidth: thumbnailSelectedBorderWidth,
-      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+      borderColor: selectedBorderColor,
+      borderWidth: selectedBorderWidth,
+      padding: padding - selectedBorderWidth,
+      marginBottom: margin + selectedBorderWidth
+    },
+    nonSelected: {
+      padding: padding - borderWidth,
+      marginBottom: margin + selectedBorderWidth
     }
   }
 
@@ -55,7 +56,21 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
       key={src}
       onKeyDown={handleKeyDown}
       onPress={handlePress}
-      style={[styles.pressable, index === activeIndex && styles.selected]}
+      style={({ hovered, pressed, focused }) => {
+        const pressableStyles = selectPressableTokens(
+          getThumbnailTokens({
+            hover: hovered,
+            pressed,
+            focus: focused
+          })
+        )
+
+        return [
+          pressableStyles,
+          index === activeIndex ? [styles.selected, { outline: 'none' }] : styles.nonSelected
+        ]
+      }}
+      ref={ref}
     >
       <Image
         accessibilityIgnoresInvertColors
@@ -66,7 +81,10 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
       />
     </Pressable>
   )
-}
+})
+
+CarouselThumbnail.displayName = 'CarouselThumbnail'
+
 CarouselThumbnail.propTypes = {
   accessibilityLabel: PropTypes.string,
   alt: PropTypes.string,

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -1,28 +1,32 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 import { useCarousel } from './CarouselContext'
 import CarouselThumbnail from './CarouselThumbnail'
 import { StackWrap } from '../StackView'
+import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
-const CarouselThumbnailNavigation = forwardRef(({ thumbnails = [] }, ref) => {
-  const { totalItems, themeTokens } = useCarousel()
+const CarouselThumbnailNavigation = React.forwardRef(({ thumbnails = [] }, ref) => {
+  const viewport = useViewport()
+  const { alignItems } = useThemeTokens('CarouselThumbnail', {}, { viewport })
+  const { totalItems } = useCarousel()
   if (thumbnails.length !== totalItems) {
     throw new Error('Thumbnail set provided does not match the number of slides in the carousel')
   }
-  const { thumbnailContainerPaddingTop, thumbnailMargin } = themeTokens
+  const { containerPaddingTop: thumbnailContainerPaddingTop } = useThemeTokens('CarouselThumbnail')
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   }
   const containerStyles = {
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+    alignItems,
+    paddingTop: thumbnailContainerPaddingTop
   }
 
   return (
     <View style={containerStyles}>
-      <StackWrap direction="row" tokens={stackWrapTokens} ref={ref}>
+      <StackWrap direction="row" tokens={stackWrapTokens} space={2} ref={ref}>
         {thumbnails.map(({ accessibilityLabel, alt, src }, index) => (
           <CarouselThumbnail
             accessibilityLabel={accessibilityLabel}

package/src/Carousel/dictionary.js

@@ -5,14 +5,18 @@ export default {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
-    // TODO: French translations here
-    carouselLabel: '(fr) %{stepCount} items',
-    iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
-    stepLabel: '(fr) %{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: '(fr) Skip %{title}'
+    // French translations
+    carouselLabel: '%{stepCount} éléments',
+    iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 }

package/src/Checkbox/Checkbox.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -39,6 +39,7 @@ const selectInputStyles = (
     inputHeight,
     inputOutlineColor,
     inputOutlineWidth,
+    inputOutlineOffset,
     inputShadow,
     inputWidth
   },
@@ -55,7 +56,8 @@ const selectInputStyles = (
     web: {
       outlineStyle: 'solid',
       outlineColor: inputOutlineColor,
-      outlineWidth: inputOutlineWidth
+      outlineWidth: inputOutlineWidth,
+      outlineOffset: inputOutlineOffset
     }
   })
 })
@@ -120,7 +122,7 @@ const selectFeedbackTokens = ({ feedbackMarginBottom, feedbackMarginTop, feedbac
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = forwardRef(
+const Checkbox = React.forwardRef(
   (
     {
       checked,
@@ -190,6 +192,7 @@ const Checkbox = forwardRef(
             onKeyDown={handleKeyDown}
             onPress={handleChange}
             {...selectedProps}
+            style={staticStyles.removeOutline}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
@@ -309,5 +312,6 @@ const staticStyles = StyleSheet.create({
   wrapper: { backgroundColor: 'transparent' },
   container: { flexDirection: 'row', alignItems: 'center' },
   defaultInputStyles: { alignItems: 'center', justifyContent: 'center' },
-  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },
+  removeOutline: { outlineStyle: 'none' }
 })