@telus-uds/components-base 1.11.0 → 1.13.0

package/package.json

@@ -1,21 +1,55 @@
 {
-  "name": "@telus-uds/components-base",
-  "version": "1.11.0",
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "bugs": {
+    "url": "https://github.com/telus/universal-design-system/issues"
+  },
+  "dependencies": {
+    "airbnb-prop-types": "^2.16.0",
+    "@telus-uds/system-constants": "^1.0.4",
+    "@telus-uds/system-theme-tokens": "^2.2.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.merge": "^4.6.2",
+    "prop-types": "^15.7.2",
+    "react-native-picker-select": "^8.0.4",
+    "semver": "^7.3.5"
+  },
   "description": "Base components",
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/cli": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/manager-webpack5": "^6.5.6",
+    "@telus-uds/browserslist-config": "^1.0.4",
+    "@testing-library/jest-native": "^4.0.1",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/react-native": "^7.2.0",
+    "react-test-renderer": "^16.3.2",
+    "webpack": "5.x"
+  },
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "base"
   ],
-  "author": "TELUS Digital",
-  "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "UNLICENSED",
   "main": "lib/index.js",
   "module": "lib-module/index.js",
-  "react-native": "src/index.js",
-  "sideEffects": false,
-  "directories": {
-    "lib": "lib",
-    "test": "__tests__"
+  "name": "@telus-uds/components-base",
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-native": "*",
+    "react-native-web": "~0.17.5"
   },
+  "react-native": "src/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/telus/universal-design-system.git"
@@ -31,46 +65,11 @@
     "build:code": "npm run build:main && npm run build:module",
     "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
-    "build-storybook": "build-storybook",
-    "dev": "npm run build:code --watch"
-  },
-  "bugs": {
-    "url": "https://github.com/telus/universal-design-system/issues"
+    "build-storybook": "build-storybook"
   },
+  "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "browserslist": [
-    "extends @telus-uds/browserslist-config"
-  ],
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-native": "*",
-    "react-native-web": "~0.17.5"
-  },
-  "devDependencies": {
-    "@storybook/addon-a11y": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/cli": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
-    "@telus-uds/browserslist-config": "^1.0.4",
-    "@testing-library/jest-native": "^4.0.1",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2",
-    "webpack": "5.x"
-  },
-  "dependencies": {
-    "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.1.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.merge": "^4.6.2",
-    "prop-types": "^15.7.2",
-    "react-native-picker-select": "^8.0.4",
-    "semver": "^7.3.5"
-  }
+  "version": "1.13.0"
 }

package/src/BaseProvider/index.jsx

@@ -4,17 +4,20 @@ import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
 
-const BaseProvider = ({ defaultTheme, children }) => (
+const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
   <A11yInfoProvider>
     <ViewportProvider>
-      <ThemeProvider defaultTheme={defaultTheme}>{children}</ThemeProvider>
+      <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
+        {children}
+      </ThemeProvider>
     </ViewportProvider>
   </A11yInfoProvider>
 )
 
 BaseProvider.propTypes = {
+  children: PropTypes.node.isRequired,
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  children: PropTypes.node.isRequired
+  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
 }
 
 export default BaseProvider

package/src/Button/ButtonBase.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider'
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
@@ -121,13 +121,17 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
   borderRadius
 })
 
-const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, textAlign }) =>
+const selectTextStyles = (
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  themeOptions
+) =>
   applyTextStyles({
     fontSize,
     color,
     lineHeight,
     fontName,
     fontWeight,
+    themeOptions,
     textAlign
   })
 
@@ -174,6 +178,7 @@ const ButtonBase = forwardRef(
         selectOuterWidthStyles(themeTokens)
       ]
     }
+    const { themeOptions } = useTheme()
 
     return (
       <Pressable
@@ -189,7 +194,7 @@ const ButtonBase = forwardRef(
           const themeTokens = resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
-          const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
+          const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]
 
           // If the container has a width set, fill it instead of sizing from content.
           // If in future we support text alignments other than center, add here.

package/src/Button/ButtonGroup.jsx

@@ -45,6 +45,7 @@ const ButtonGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
       validation,
       feedback,
       name: inputGroupName,
@@ -94,6 +95,7 @@ const ButtonGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         readOnly={readOnly}
@@ -217,6 +219,10 @@ ButtonGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/src/Carousel/Carousel.jsx

@@ -11,15 +11,17 @@ import {
   selectSystemProps,
   a11yProps,
   viewProps,
-  useCopy
+  useCopy,
+  unpackFragment
 } from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
 import CarouselItem from './CarouselItem'
-import StepTracker from '../StepTracker'
-import StackView from '../StackView'
 import IconButton from '../IconButton'
-
+import SkipLink from '../SkipLink'
+import A11yText from '../A11yText'
+import CarouselStepTracker from './CarouselStepTracker'
+import CarouselThumbnailNavigation from './CarouselThumbnailNavigation'
 import dictionary from './dictionary'
 
 const staticStyles = StyleSheet.create({
@@ -33,19 +35,6 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-const staticTokens = {
-  stackView: {
-    justifyContent: 'center'
-  },
-  stepTracker: {
-    showStepLabel: false,
-    showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
-    connectorCompletedColor: 'none',
-    connectorColor: 'none'
-  }
-}
-
 const selectContainerStyles = (width) => ({
   backgroundColor: 'transparent',
   overflow: 'hidden',
@@ -160,27 +149,36 @@ const Carousel = React.forwardRef(
       onAnimationStart,
       onAnimationEnd,
       onIndexChanged,
+      skipLinkHref,
+      refocus,
+      title = 'carousel',
       springConfig = undefined,
-      onRenderPanelNavigation,
+      thumbnails = undefined,
+      panelNavigation = thumbnails ? (
+        <CarouselThumbnailNavigation thumbnails={thumbnails} />
+      ) : (
+        <CarouselStepTracker />
+      ),
       tag = 'ul',
-      accessibilityRole = 'adjustable',
-      accessibilityLabel = 'carousel',
+      accessibilityRole,
+      accessibilityLabel = title,
+      accessibilityLiveRegion = 'polite',
       copy,
       ...rest
     },
     ref
   ) => {
     const viewport = useViewport()
+    const themeTokens = useThemeTokens('Carousel', tokens, variant, {
+      viewport
+    })
     const {
       previousIcon,
       nextIcon,
       showPreviousNextNavigation,
       showPanelNavigation,
-      spaceBetweenSlideAndPreviousNextNavigation,
-      spaceBetweenSlideAndPanelNavigation
-    } = useThemeTokens('Carousel', tokens, variant, {
-      viewport
-    })
+      spaceBetweenSlideAndPreviousNextNavigation
+    } = themeTokens
     const [activeIndex, setActiveIndex] = React.useState(0)
 
     const [isAnimating, setIsAnimating] = React.useState(false)
@@ -201,7 +199,7 @@ const Carousel = React.forwardRef(
 
     const getCopy = useCopy({ dictionary, copy })
 
-    const childrenArray = React.Children.toArray(children)
+    const childrenArray = unpackFragment(children)
     const systemProps = selectProps({
       ...rest,
       accessibilityRole,
@@ -220,15 +218,12 @@ const Carousel = React.forwardRef(
     })
     const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] =
       React.useState(0)
+    const firstFocusRef = React.useRef(null)
     const pan = React.useRef(new Animated.ValueXY()).current
     const animatedX = React.useRef(0)
     const animatedY = React.useRef(0)
     const isFirstSlide = !activeIndex
     const isLastSlide = activeIndex + 1 >= children.length
-    const panelNavigationTokens = {
-      ...staticTokens.stepTracker,
-      containerPaddingTop: spaceBetweenSlideAndPanelNavigation
-    }
 
     const onContainerLayout = ({
       nativeEvent: {
@@ -308,8 +303,9 @@ const Carousel = React.forwardRef(
         updateOffset()
         handleAnimationStart(activeIndex)
         updateIndex(delta)
+        if (refocus) firstFocusRef.current?.focus()
       },
-      [updateIndex, updateOffset, activeIndex, handleAnimationStart]
+      [updateIndex, updateOffset, activeIndex, handleAnimationStart, refocus]
     )
 
     const goToNeighboring = React.useCallback(
@@ -405,22 +401,31 @@ const Carousel = React.forwardRef(
     // Related discussion - https://github.com/telus/universal-design-system/issues/1549
     const previousNextIconButtonVariants = { size: previousNextIconSize, raised: true }
 
-    const getCopyWithPlaceholders = (copyKey) => {
-      const copyText = getCopy(copyKey)
-        .replace(/%\{itemLabel\}/g, itemLabel)
-        .replace(/%\{stepNumber\}/g, activeIndex + 1)
-        .replace(/%\{stepCount\}/g, childrenArray.length)
+    const getCopyWithPlaceholders = React.useCallback(
+      (copyKey) => {
+        const copyText = getCopy(copyKey)
+          .replace(/%\{title\}/g, title)
+          .replace(/%\{itemLabel\}/g, itemLabel)
+          .replace(/%\{stepNumber\}/g, activeIndex + 1)
+          .replace(/%\{stepCount\}/g, childrenArray.length)
 
-      // First word might be a lowercase placeholder: capitalize the first letter
-      return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
-    }
+        // First word might be a lowercase placeholder: capitalize the first letter
+        return `${copyText[0].toUpperCase()}${copyText.slice(1)}`
+      },
+      [activeIndex, childrenArray.length, itemLabel, getCopy, title]
+    )
 
     return (
       <CarouselProvider
         activeIndex={activeIndex}
+        goTo={goTo}
+        getCopyWithPlaceholders={getCopyWithPlaceholders}
+        itemLabel={itemLabel}
         totalItems={childrenArray.length}
+        themeTokens={themeTokens}
+        firstFocusRef={firstFocusRef}
+        refocus={refocus}
         width={containerLayout.width}
-        goTo={goTo}
       >
         <View style={staticStyles.root} onLayout={onContainerLayout} ref={ref} {...systemProps}>
           {showPreviousNextNavigation && (
@@ -447,6 +452,19 @@ const Carousel = React.forwardRef(
               />
             </View>
           )}
+          {Boolean(skipLinkHref) && (
+            <SkipLink ref={firstFocusRef} href={skipLinkHref}>
+              {getCopyWithPlaceholders('skipLink')}
+            </SkipLink>
+          )}
+          <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.
+            ref={!skipLinkHref && refocus ? firstFocusRef : null}
+            accessibilityLiveRegion={!skipLinkHref && refocus ? undefined : 'polite'}
+            focusable={!skipLinkHref && refocus}
+            text={getCopyWithPlaceholders('stepTrackerLabel')}
+          />
           <View style={selectContainerStyles(containerLayout.width)}>
             <Animated.View
               style={StyleSheet.flatten([
@@ -457,6 +475,9 @@ const Carousel = React.forwardRef(
               ])}
               {...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
@@ -490,24 +511,7 @@ const Carousel = React.forwardRef(
             </View>
           )}
         </View>
-        {showPanelNavigation ? (
-          <StackView direction="row" tokens={staticTokens.stackView}>
-            {onRenderPanelNavigation ? (
-              onRenderPanelNavigation({ activeIndex, totalItems: childrenArray.length })
-            ) : (
-              <StepTracker
-                current={activeIndex}
-                steps={childrenArray.map((_, index) => String(index))}
-                copy={{
-                  // Give StepTracker copy from Carousel's language and dictionary
-                  stepLabel: getCopyWithPlaceholders('stepLabel'),
-                  stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
-                }}
-                tokens={panelNavigationTokens}
-              />
-            )}
-          </StackView>
-        ) : null}
+        {showPanelNavigation ? panelNavigation : null}
       </CarouselProvider>
     )
   }
@@ -542,6 +546,16 @@ Carousel.propTypes = {
    * Carousel uses `Animated.spring` to animate slide changes, use this option to pass custom animation configuration
    */
   springConfig: PropTypes.object,
+  /**
+   * An array of objects containing information on the thumbnails to be rendered as navigation panel
+   */
+  thumbnails: PropTypes.arrayOf(
+    PropTypes.shape({
+      accessibilityLabel: PropTypes.string,
+      alt: PropTypes.string,
+      src: PropTypes.string
+    })
+  ),
   /**
    * Minimal part of slide width must be swiped for changing index.
    * Otherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index
@@ -569,20 +583,33 @@ Carousel.propTypes = {
    */
   onIndexChanged: PropTypes.func,
   /**
-   * Use this to render a custom panel navigation element instead of dots navigation
-   * This function is also provided with an object with the following properties
-   * activeIndex: index of current slide
-   * totalItems: total number of slides
+   * If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link
+   * with the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`.
+   */
+  skipLinkHref: PropTypes.string,
+  /**
+   * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
+   *
+   * Pass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.
+   *
+   * If skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content.
+   */
+  refocus: PropTypes.bool,
+  /**
+   * Use this to render a custom panel navigation element instead of the default StepTracker's based navigation
+   * You can make use of `useCarousel` within your custom panel navigation component to hook into various Carousel states such as:
+   * - activeIndex: index of current slide
+   * - totalItems: total number of slides
    * Use it as follows:
    * ```js
    *    <Carousel
-   *      onRenderPanelNavigation={({ totalItems, activeIndex }) => <Text>Showing {activeIndex + 1}</Text>}
+   *      panelNavigation={<CustomPanelNavigation />}
    *    >
    *      <Carousel.Item>First Slide</Carousel.Item>
    *    </Carousel>
    * ```
    */
-  onRenderPanelNavigation: PropTypes.func,
+  panelNavigation: PropTypes.element,
   /**
    * When slide animation start
    * This function is also provided with a parameter indicating the current slide index before animation starts

package/src/Carousel/CarouselContext.jsx

@@ -1,12 +1,32 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getTokensPropType } from '../utils'
 
 const CarouselContext = React.createContext()
 
-const CarouselProvider = ({ children, activeIndex, totalItems, width, goTo }) => {
+const CarouselProvider = ({
+  activeIndex,
+  children,
+  goTo,
+  getCopyWithPlaceholders,
+  itemLabel,
+  refocus = false,
+  themeTokens,
+  totalItems,
+  width
+}) => {
   const value = React.useMemo(
-    () => ({ activeIndex, totalItems, width, goTo }),
-    [activeIndex, totalItems, width, goTo]
+    () => ({
+      activeIndex,
+      goTo,
+      getCopyWithPlaceholders,
+      itemLabel,
+      refocus,
+      themeTokens,
+      totalItems,
+      width
+    }),
+    [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
@@ -22,9 +42,13 @@ function useCarousel() {
 CarouselProvider.propTypes = {
   children: PropTypes.arrayOf(PropTypes.element).isRequired,
   activeIndex: PropTypes.number.isRequired,
+  goTo: PropTypes.func.isRequired,
+  getCopyWithPlaceholders: PropTypes.func.isRequired,
+  itemLabel: PropTypes.string.isRequired,
+  refocus: PropTypes.bool,
+  themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
-  goTo: PropTypes.func.isRequired
+  width: PropTypes.number.isRequired
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselFirstFocus/CarouselFirstFocus.jsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react'
+import { Pressable, Platform, StyleSheet } from 'react-native'
+import { PropTypes } from 'prop-types'
+
+import { useCarousel } from '../CarouselContext'
+
+/**
+ * Focus target so that when a new slide is shown, the user can tab into
+ * its content using the keyboard.
+ *
+ * @TODO rework this after integrating with SkipLink when available.
+ */
+const CarouselFirstFocus = forwardRef(({ title }, ref) => {
+  const { getCopyWithPlaceholders } = useCarousel()
+
+  // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
+  const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`
+
+  const accessibilityRole = Platform.select({
+    web: 'link', // The focused item will ultimately be a skip link.
+    default: 'button' // 'link' role usually denotes opening browser on Native.
+  })
+
+  return (
+    <Pressable
+      // TODO: integrate skip link functionality, jump focus to after Carousel
+      onPress={undefined}
+      ref={ref}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      style={StyleSheet.absoluteFill}
+      focusable
+    />
+  )
+})
+
+CarouselFirstFocus.displayName = 'CarouselFirstFocus'
+CarouselFirstFocus.propTypes = {
+  /**
+   * Simple description of this carousel for screenreaders, to be read before
+   * "{itemLabel} {index} of {count}.
+   *
+   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
+   */
+  title: PropTypes.string
+}
+
+export default CarouselFirstFocus

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useCarousel } from '../CarouselContext'
+import StepTracker from '../../StepTracker'
+import StackView from '../../StackView'
+
+const CarouselStepTracker = () => {
+  const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
+  const stackViewTokens = {
+    justifyContent: 'center'
+  }
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    knobCompletedBackgroundColor: 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  }
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index))
+  return (
+    <StackView direction="row" tokens={stackViewTokens}>
+      <StepTracker
+        current={activeIndex}
+        steps={steps}
+        copy={{
+          // Give StepTracker copy from Carousel's language and dictionary
+          stepLabel: getCopyWithPlaceholders('stepLabel'),
+          stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+        }}
+        tokens={stepTrackerTokens}
+      />
+    </StackView>
+  )
+}
+
+export default CarouselStepTracker

package/src/Carousel/CarouselStepTracker/index.js

@@ -0,0 +1,3 @@
+import CarouselStepTracker from './CarouselStepTracker'
+
+export default CarouselStepTracker

package/src/Carousel/CarouselTabs/CarouselTabs.jsx

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { useResponsiveProp } from '../../utils'
+import Carousel from '../Carousel'
+import CarouselTabsPanel from './CarouselTabsPanel'
+
+const CarouselTabs = forwardRef(({ items, refocus = true, ...carouselProps }, ref) => {
+  const panelNavigation = useResponsiveProp({ md: <CarouselTabsPanel items={items} /> })
+
+  return (
+    <Carousel refocus={refocus} {...carouselProps} ref={ref} panelNavigation={panelNavigation}>
+      {items.map(({ title, content }) => (
+        <React.Fragment key={title}>{content}</React.Fragment>
+      ))}
+    </Carousel>
+  )
+})
+
+CarouselTabs.displayName = 'CarouselTabs'
+CarouselTabs.propTypes = {
+  /**
+   * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      content: PropTypes.node.isRequired
+    })
+  ),
+  ...Carousel.propTypes
+}
+// CarouselTabs doesn't require `children` prop, it uses `items` instead.
+// eslint-disable-next-line react/forbid-foreign-prop-types
+if (CarouselTabs.propTypes?.children) delete CarouselTabs.propTypes?.children
+
+export default CarouselTabs