@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/src/Video/videoText.js

@@ -1,4 +1,4 @@
-const videoText = {
+export const videoText = {
   en: {
     videoPlayer:
       'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
@@ -54,5 +54,3 @@ const videoText = {
     fr: 'Français'
   }
 }
-
-export default videoText

package/src/VideoPicker/VideoPicker.jsx

@@ -10,48 +10,48 @@ import {
 } from '@telus-uds/components-base'
 import styled, { css } from 'styled-components'
 import { VideoPropType } from './videoPropType'
-import VideoPickerThumbnail from './VideoPickerThumbnail'
-import VideoPickerPlayer from './VideoPickerPlayer'
-import VideoSlider from './VideoSlider'
+import { VideoPickerThumbnail } from './VideoPickerThumbnail'
+import { VideoPickerPlayer } from './VideoPickerPlayer'
+import { VideoSlider } from './VideoSlider'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const framedContainerStyles = ({
-  framedContainerBackgroundColor,
-  framedContainerBorderWidth,
-  framedContainerBorderColor,
-  framedContainerBorderRadius,
-  framedMaxHeight
+  $framedContainerBackgroundColor,
+  $framedContainerBorderWidth,
+  $framedContainerBorderColor,
+  $framedContainerBorderRadius,
+  $framedMaxHeight
 }) => css`
-  background-color: ${framedContainerBackgroundColor};
-  border: ${framedContainerBorderWidth}px solid ${framedContainerBorderColor};
-  border-radius: ${framedContainerBorderRadius}px;
+  background-color: ${$framedContainerBackgroundColor};
+  border: ${$framedContainerBorderWidth}px solid ${$framedContainerBorderColor};
+  border-radius: ${$framedContainerBorderRadius}px;
 
   & > div {
-    max-height: ${framedMaxHeight}px;
+    max-height: ${$framedMaxHeight}px;
   }
 `
 
 const VideoPickerContainer = styled.div`
-  ${({ isFramed, ...tokens }) => isFramed && framedContainerStyles(tokens)}
+  ${({ $isFramed, ...tokens }) => $isFramed && framedContainerStyles(tokens)}
 `
 
-const framedPlayerContainerStyles = ({ framedMaxHeight, framedContainerPadding }) => css`
+const framedPlayerContainerStyles = ({ $framedMaxHeight, $framedContainerPadding }) => css`
   width: 66.67%;
-  padding: ${framedContainerPadding}px;
-  max-height: ${framedMaxHeight}px;
+  padding: ${$framedContainerPadding}px;
+  max-height: ${$framedMaxHeight}px;
   flex-shrink: 0;
   box-sizing: border-box;
 `
 
 const VideoPlayerContainer = styled.div`
-  ${({ isFramed, ...tokens }) => isFramed && framedPlayerContainerStyles(tokens)}
+  ${({ $isFramed, ...tokens }) => $isFramed && framedPlayerContainerStyles(tokens)}
   overflow: auto;
 `
 
 const framedVideoListContainerStyle = css`
-  max-height: ${({ framedMaxHeight }) => framedMaxHeight}px;
+  max-height: ${({ $framedMaxHeight }) => $framedMaxHeight}px;
   overflow: auto;
   flex-direction: column;
 `
@@ -62,10 +62,10 @@ const VideoListContainer = styled.div`
   position: relative;
   flex-grow: 1;
   flex-direction: column;
-  ${(props) => props.isFramed && framedVideoListContainerStyle}
+  ${(props) => props.$isFramed && framedVideoListContainerStyle}
 `
 
-const VideoPicker = React.forwardRef(
+export const VideoPicker = React.forwardRef(
   (
     {
       videoList = [],
@@ -124,7 +124,16 @@ const VideoPicker = React.forwardRef(
     ))
 
     return (
-      <VideoPickerContainer ref={ref} isFramed={isFramed} {...selectProps(rest)} {...themeTokens}>
+      <VideoPickerContainer
+        ref={ref}
+        $isFramed={isFramed}
+        $framedContainerBackgroundColor={themeTokens.framedContainerBackgroundColor}
+        $framedContainerBorderWidth={themeTokens.framedContainerBorderWidth}
+        $framedContainerBorderColor={themeTokens.framedContainerBorderColor}
+        $framedContainerBorderRadius={themeTokens.framedContainerBorderRadius}
+        $framedMaxHeight={themeTokens.framedMaxHeight}
+        {...selectProps(rest)}
+      >
         <StackView
           divider={
             isFramed
@@ -134,7 +143,11 @@ const VideoPicker = React.forwardRef(
           space={isFramed ? 0 : 4} // everything has internal padding in `frame` variant
           direction={isFramed ? 'row' : 'column'}
         >
-          <VideoPlayerContainer {...themeTokens} isFramed={isFramed}>
+          <VideoPlayerContainer
+            $isFramed={isFramed}
+            $framedMaxHeight={themeTokens.framedMaxHeight}
+            $framedContainerPadding={themeTokens.framedContainerPadding}
+          >
             <VideoPickerPlayer
               video={addVideoEventHandlers(currentVideo)}
               videoPlayerRef={videoPlayerRef}
@@ -147,7 +160,8 @@ const VideoPicker = React.forwardRef(
             <VideoListContainer
               viewport={viewport}
               data-testid="video-list-container"
-              isFramed={isFramed}
+              $isFramed={isFramed}
+              $framedMaxHeight={themeTokens.framedMaxHeight}
             >
               {listElements}
             </VideoListContainer>
@@ -204,5 +218,3 @@ VideoPicker.propTypes = {
    */
   onPause: PropTypes.func
 }
-
-export default VideoPicker

package/src/VideoPicker/VideoPickerPlayer.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { StackView, Typography } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
-import WebVideo from '../WebVideo/WebVideo'
+import { WebVideo } from '../WebVideo/WebVideo'
 import { VideoPropType, RefPropType } from './videoPropType'
 
-const VideoPickerPlayer = React.forwardRef(
+export const VideoPickerPlayer = React.forwardRef(
   ({ video = {}, videoPlayerRef, onStartVideo = () => {} }, ref) => (
     <StackView space={3} tokens={{ flexShrink: 1 }} ref={ref}>
       <div ref={videoPlayerRef}>
@@ -25,5 +25,3 @@ VideoPickerPlayer.propTypes = {
   videoPlayerRef: RefPropType,
   onStartVideo: PropTypes.func
 }
-
-export default VideoPickerPlayer

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -12,7 +12,7 @@ import {
 import styled from 'styled-components'
 import { getTimestamp } from '../shared/VideoSplash/helpers'
 import { VideoPropType, RefPropType } from './videoPropType'
-import VideoSplash from '../shared/VideoSplash/VideoSplash'
+import { VideoSplash } from '../shared/VideoSplash/VideoSplash'
 
 const { getItemPositionLayoutHandler, itemPositionsPropType } = horizontalScrollUtils
 
@@ -43,14 +43,14 @@ const createReactNativeStyles = ({
   })
 
 const ImageContainer = styled.div`
-  padding: ${(props) => `${props.outerBorderGap}px`};
-  border: ${(props) => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`};
-  border-radius: ${({ outerBorderRadius }) => outerBorderRadius}px;
+  padding: ${(props) => `${props.$outerBorderGap}px`};
+  border: ${(props) => `${props.$outerBorderWidth}px solid ${props.$outerBorderColor}`};
+  border-radius: ${({ $outerBorderRadius }) => $outerBorderRadius}px;
 `
 
 const VideoThumbnail = styled.div`
   position: relative;
-  width: ${(props) => (props.layout === 'vertical' ? '100%' : '144px')};
+  width: ${(props) => (props.$layout === 'vertical' ? '100%' : '144px')};
   flex-shrink: 0;
 
   * button {
@@ -66,9 +66,9 @@ const VideoThumbnail = styled.div`
 
   &::after {
     content: '';
-    border: ${({ borderWidth }) => borderWidth}px solid;
-    border-color: ${({ borderColor }) => borderColor};
-    border-radius: ${({ borderRadius }) => borderRadius}px;
+    border: ${({ $borderWidth }) => $borderWidth}px solid;
+    border-color: ${({ $borderColor }) => $borderColor};
+    border-radius: ${({ $borderRadius }) => $borderRadius}px;
     position: absolute;
     top: 0;
     left: 0;
@@ -77,7 +77,7 @@ const VideoThumbnail = styled.div`
   }
 
   & > div {
-    border-radius: ${({ borderRadius }) => borderRadius}px;
+    border-radius: ${({ $borderRadius }) => $borderRadius}px;
   }
 `
 
@@ -88,7 +88,7 @@ const ThumbnailTitleContainer = styled.div`
   overflow: hidden;
 `
 
-const VideoPickerThumbnail = React.forwardRef(
+export const VideoPickerThumbnail = React.forwardRef(
   (
     {
       videoPlayerRef,
@@ -111,7 +111,13 @@ const VideoPickerThumbnail = React.forwardRef(
 
     const renderThumbnailImage = (themeTokens) => {
       return (
-        <VideoThumbnail {...themeTokens} isPlaying={isPlaying} layout={layout}>
+        <VideoThumbnail
+          $borderWidth={themeTokens.borderWidth}
+          $borderColor={themeTokens.borderColor}
+          $borderRadius={themeTokens.borderRadius}
+          $isPlaying={isPlaying}
+          $layout={layout}
+        >
           <VideoSplash
             simpleMode
             poster={
@@ -126,7 +132,7 @@ const VideoPickerThumbnail = React.forwardRef(
 
     const renderThumbnailInfo = ({ titleColor, subTitleColor }) => (
       <StackView space={2} tokens={{ flexShrink: 1 }}>
-        <ThumbnailTitleContainer viewport={viewport}>
+        <ThumbnailTitleContainer>
           <Typography variant={{ bold: true }} tokens={{ color: titleColor }}>
             {video.title}
           </Typography>
@@ -184,7 +190,14 @@ const VideoPickerThumbnail = React.forwardRef(
               space={layout === 'vertical' ? 2 : 3}
               direction={layout === 'vertical' ? 'column' : 'row'}
             >
-              <ImageContainer {...themeTokens}>{renderThumbnailImage(themeTokens)}</ImageContainer>
+              <ImageContainer
+                $outerBorderGap={themeTokens.outerBorderGap}
+                $outerBorderWidth={themeTokens.outerBorderWidth}
+                $outerBorderColor={themeTokens.outerBorderColor}
+                $outerBorderRadius={themeTokens.outerBorderRadius}
+              >
+                {renderThumbnailImage(themeTokens)}
+              </ImageContainer>
               {renderThumbnailInfo(themeTokens)}
             </StackView>
           )
@@ -207,5 +220,3 @@ VideoPickerThumbnail.propTypes = {
   index: PropTypes.number,
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }
-
-export default VideoPickerThumbnail

package/src/VideoPicker/VideoSlider.jsx

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types'
 
 const { useItemPositions } = horizontalScrollUtils
 
-const VideoSlider = React.forwardRef(({ children }, ref) => {
+export const VideoSlider = React.forwardRef(({ children }, ref) => {
   const viewport = useViewport()
   const [itemPositions] = useItemPositions()
   const [containerWidth, setContainerWidth] = React.useState(null)
@@ -83,5 +83,3 @@ VideoSlider.displayName = 'VideoSlider'
 VideoSlider.propTypes = {
   children: PropTypes.node
 }
-
-export default VideoSlider

package/src/WaffleGrid/WaffleGrid.jsx

@@ -12,19 +12,19 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import OrderedListBase from '../OrderedList/OrderedListBase'
-import ItemBase from '../OrderedList/ItemBase'
-import Image from '../Image'
+import { OrderedListBase } from '../OrderedList/OrderedListBase'
+import { OrderedListItemBase } from '../OrderedList/OrderedListItemBase'
+import { Image } from '../Image/Image'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
-  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+  [`&:not(:nth-of-type(${rowSize}n + 1))`]: {
     borderLeftWidth: `${rowBorderWidth}px`
   },
-  [`:nth-of-type(n+${rowSize + 1})`]: {
+  [`&:nth-of-type(n+${rowSize + 1})`]: {
     borderTopWidth: `${rowBorderWidth}px`
   }
 })
@@ -33,26 +33,30 @@ const Container = styled(OrderedListBase)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
+  alignContent: 'stretch',
   justifyContent: 'flex-start'
 })
 
-const Item = styled(ItemBase)(({ rowSize, itemPadding, itemBorderColor, rowBorderWidth }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexGrow: 1,
-  flexShrink: 1,
-  padding: `${itemPadding}px`,
-  boxSizing: 'border-box',
-  borderStyle: 'solid',
-  borderColor: itemBorderColor,
-  borderWidth: 0,
-  '& > a': {
-    alignSelf: 'center'
-  },
-  ...row(rowSize, rowBorderWidth)
-}))
+const Item = styled(OrderedListItemBase)(
+  ({ $rowSize, $itemPadding, $itemBorderColor, $rowBorderWidth }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+    padding: `${$itemPadding}px`,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: $itemBorderColor,
+    borderWidth: 0,
+    '& > a': {
+      alignSelf: 'center',
+      width: '100%'
+    },
+    ...row($rowSize, $rowBorderWidth)
+  })
+)
 
 const Center = styled('div')({
   display: 'flex',
@@ -64,7 +68,7 @@ const Center = styled('div')({
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-const WaffleGrid = React.forwardRef(
+export const WaffleGrid = React.forwardRef(
   ({ items, rowSize = null, LinkRouter, tokens, variant, linkRouterProps, ...rest }, ref) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, { viewport })
@@ -74,9 +78,11 @@ const WaffleGrid = React.forwardRef(
       <Container ref={ref} {...selectProps(rest)}>
         {items.map((child) => (
           <Item
-            {...themeTokens}
             key={child.href}
-            rowSize={rowSize ? currentRowSize : themeTokens.rowSize}
+            $rowSize={rowSize ? currentRowSize : themeTokens.rowSize}
+            $itemPadding={themeTokens.itemPadding}
+            $itemBorderColor={themeTokens.itemBorderColor}
+            $rowBorderWidth={themeTokens.rowBorderWidth}
           >
             <Link
               href={child.href}
@@ -141,5 +147,3 @@ WaffleGrid.propTypes = {
   rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
   ...withLinkRouter.propTypes
 }
-
-export default WaffleGrid

package/src/WebVideo/WebVideo.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import YouTube from 'react-youtube'
 import styled from 'styled-components'
-import VideoSplash from '../shared/VideoSplash/VideoSplash'
+import { VideoSplash } from '../shared/VideoSplash/VideoSplash'
 import { htmlAttrs } from '../utils'
 import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils'
 
@@ -30,11 +30,11 @@ const aspectRatios = {
 }
 
 const AspectLimiter = styled.div((props) => ({
-  ...aspectRatios[props.aspectRatio],
+  ...aspectRatios[props.$aspectRatio],
   position: 'relative'
 }))
 
-const WebVideo = React.forwardRef(
+export const WebVideo = React.forwardRef(
   (
     {
       videoId,
@@ -103,7 +103,7 @@ const WebVideo = React.forwardRef(
 
     return (
       <StyledPlayerContainer ref={ref} data-testid="web-video-container" {...selectProps(rest)}>
-        <AspectLimiter aspectRatio={aspectRatio}>
+        <AspectLimiter $aspectRatio={aspectRatio}>
           {started ? (
             <StyledYoutubePlayer
               videoId={videoId}
@@ -202,5 +202,3 @@ export const VideoProps = {
 }
 
 WebVideo.propTypes = VideoProps
-
-export default WebVideo

package/src/baseExports.js

@@ -5,49 +5,57 @@ export {
   /**
    * Most base components should be re-exported as-is.
    */
-  ActionCard,
+  A11yInfoProvider,
   A11yText,
+  ActionCard,
   ActivityIndicator,
   Autocomplete,
+  BaseProvider,
   Box,
   Button,
-  BaseProvider,
-  A11yInfoProvider,
-  ViewportProvider,
-  ThemeProvider,
-  ButtonDropdown,
-  ButtonGroup,
   ButtonLink,
+  ButtonGroup,
+  ButtonDropdown,
   CardGroup,
   Carousel,
   CarouselItem,
-  CarouselProvider,
   CarouselTabs,
+  CarouselProvider,
+  ViewportProvider,
+  ThemeProvider,
   Checkbox,
   CheckboxGroup,
-  ChevronLink,
   ColourToggle,
   Divider,
   DownloadApp,
   ExpandCollapse,
+  ExpandCollapseAccordion,
+  ExpandCollapsePanel,
   ExpandCollapseMini,
   Feedback,
+  FileUpload,
   FlexGrid,
   FlexGridCol,
   FlexGridRow,
-  FileUpload,
   Icon,
   InputLabel,
   InputSupports,
+  ChevronLink,
   Link,
+  TextButton,
   Listbox,
+  ListboxOverlay,
   Modal,
   MultiSelectFilter,
   Notification,
   Pagination,
+  PaginationPageButton,
+  PaginationPageButtonBase,
   Portal,
   QuickLinks,
+  QuickLinksItem,
   QuickLinksFeature,
+  QuickLinksFeatureItem,
   Radio,
   RadioGroup,
   RadioCard,
@@ -55,18 +63,24 @@ export {
   Responsive,
   Search,
   Select,
+  SelectItem,
+  SelectGroup,
+  Shortcuts,
+  ShortcutsItem,
   SideNav,
+  SideNavItem,
+  SideNavItemsGroup,
   Skeleton,
   SkipLink,
   Spacer,
   StackView,
   StackWrap,
-  StepTracker,
   Status,
-  Tabs,
+  StepTracker,
   TabBar,
+  TabBarItem,
+  Tabs,
   Tags,
-  TextButton,
   TextArea,
   TextInput,
   Timeline,

package/src/index.js

@@ -1,43 +1,52 @@
 'use client'
 
-export { default as Badge } from './Badge'
-export * from './OrderedList'
-export { default as OrderedList } from './OrderedList'
-export { default as PreviewCard } from './PreviewCard'
-export { default as ResponsiveImage } from './ResponsiveImage'
-export { default as Ribbon } from './Ribbon'
-export { default as Countdown } from './Countdown'
-export { default as DatePicker } from './DatePicker'
-export { default as Paragraph } from './Paragraph'
-export { default as Span } from './Span'
-export { default as Callout } from './Callout'
-export { default as PriceLockup } from './PriceLockup'
-export { default as Footnote } from './Footnote'
-export { default as QuantitySelector } from './QuantitySelector'
-export { default as IconButton } from './IconButton'
-export { default as Image, DefaultImage } from './Image'
+export { Badge } from './Badge/Badge'
+export { OrderedListItem } from './OrderedList/OrderedListItem'
+export { OrderedList } from './OrderedList/OrderedList'
+export { PreviewCard, PreviewCardBase } from './PreviewCard/PreviewCard'
+export { PreviewCardAuthorDate } from './PreviewCard/PreviewCardAuthorDate'
+export { ResponsiveImage } from './ResponsiveImage/ResponsiveImage'
+export { Ribbon } from './Ribbon/Ribbon'
+export { Countdown } from './Countdown/Countdown'
+export { DatePicker } from './DatePicker/DatePicker'
+export { Paragraph } from './Paragraph/Paragraph'
+export { Span } from './Span/Span'
+export { Callout } from './Callout/Callout'
+export { PriceLockup } from './PriceLockup/PriceLockup'
+export { Footnote } from './Footnote/Footnote'
+export { FootnoteLink } from './Footnote/FootnoteLink'
+export { QuantitySelector } from './QuantitySelector/QuantitySelector'
+export { IconButton } from './IconButton/IconButton'
+export { Image, DefaultImage } from './Image/Image'
 export { transformGradient } from './utils'
-export { default as Breadcrumbs } from './Breadcrumbs'
-export { default as BlockQuote } from './BlockQuote'
-export { default as OptimizeImage } from './OptimizeImage'
-export { default as Testimonial } from './Testimonial'
-export { default as Toast } from './Toast'
-export * from './Table'
-export { default as Table } from './Table'
-export { default as WebVideo } from './WebVideo'
-export { default as WaffleGrid } from './WaffleGrid'
-export { default as Spinner } from './Spinner'
-export { default as VideoPicker } from './VideoPicker'
-export { default as Video } from './Video'
-export { default as StoryCard } from './StoryCard'
-export { default as Disclaimer } from './Disclaimer'
-export { default as Card } from './Card'
-export * from './List'
-export { default as List } from './List'
-export { default as TermsAndConditions } from './TermsAndConditions'
-export { default as NavigationBar } from './NavigationBar'
-export { default as Progress } from './Progress'
-export { default as SkeletonProvider } from './SkeletonProvider'
+export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'
+export { BreadcrumbItem } from './Breadcrumbs/BreadcrumbItem'
+export { BlockQuote } from './BlockQuote/BlockQuote'
+export { OptimizeImage } from './OptimizeImage/OptimizeImage'
+export { Testimonial } from './Testimonial/Testimonial'
+export { Toast } from './Toast/Toast'
+export { Table } from './Table/Table'
+export { TableRow } from './Table/TableRow'
+export { TableCell } from './Table/TableCell'
+export { TableSubHeading } from './Table/TableSubHeading'
+export { TableHeader } from './Table/TableHeader'
+export { TableBody } from './Table/TableBody'
+export { WebVideo } from './WebVideo/WebVideo'
+export { WaffleGrid } from './WaffleGrid/WaffleGrid'
+export { Spinner } from './Spinner/Spinner'
+export { VideoPicker } from './VideoPicker/VideoPicker'
+export { Video } from './Video/Video'
+export { StoryCard, StoryCardBase } from './StoryCard/StoryCard'
+export { Disclaimer } from './Disclaimer/Disclaimer'
+export { Card } from './Card/Card'
+export { List } from './List/List'
+export { ListItem } from './List/ListItem'
+export { TermsAndConditions } from './TermsAndConditions/TermsAndConditions'
+export { NavigationBar } from './NavigationBar/NavigationBar'
+export { NavigationItem } from './NavigationBar/NavigationItem'
+export { Progress } from '@telus-uds/components-base'
+export { ProgressBar } from './Progress/ProgressBar'
+export { SkeletonProvider } from './SkeletonProvider/SkeletonProvider'
 
 export { ssrStyles } from './utils'
 

package/src/server.js

@@ -1,5 +1,4 @@
-import ServerThemedImage from './Image/server'
+import { ServerThemedImage } from './Image/server'
 
 // Export themed components
-/* eslint-disable import/prefer-default-export */
 export { ServerThemedImage as Image }

package/src/shared/ConditionalWrapper/ConditionalWrapper.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const ConditionalWrapper = ({ children, condition, WrapperComponent, wrapperProps }) =>
+export const ConditionalWrapper = ({ children, condition, WrapperComponent, wrapperProps }) =>
   condition ? <WrapperComponent {...wrapperProps}>{children}</WrapperComponent> : children
 
 ConditionalWrapper.propTypes = {
@@ -10,5 +10,3 @@ ConditionalWrapper.propTypes = {
   WrapperComponent: PropTypes.elementType,
   wrapperProps: PropTypes.object
 }
-
-export default ConditionalWrapper