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

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -15,56 +15,58 @@ import {
   StyleSheet
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import ExpandCollapse from './ExpandCollapse'
-import OrderedListBase from '../OrderedList/OrderedListBase'
+import { ExpandCollapse } from './ExpandCollapse'
+import { OrderedListBase } from '../OrderedList/OrderedListBase'
+import { OrderedListItemBase } from '../OrderedList/OrderedListItemBase'
+
 import { htmlAttrs, media, renderStructuredContent } from '../utils'
-import defaultDictionary from './dictionary'
+import { dictionary as defaultDictionary } from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const ContentContainer = styled.div(({ tokens }) => ({
-  paddingBottom: tokens.contentPaddingBottom,
-  paddingLeft: tokens.contentPaddingLeft,
+const ContentContainer = styled.div(({ $tokens }) => ({
+  paddingBottom: $tokens.contentPaddingBottom,
+  paddingLeft: $tokens.contentPaddingLeft,
   ...media().from('md').css({
-    paddingBottom: tokens.mdContentPaddingBottom,
-    paddingLeft: tokens.mdContentPaddingLeft
+    paddingBottom: $tokens.mdContentPaddingBottom,
+    paddingLeft: $tokens.mdContentPaddingLeft
   })
 }))
 
-const Ordered = styled(OrderedListBase)(({ tokens }) => ({
+const Ordered = styled(OrderedListBase)(({ $tokens }) => ({
   listStylePosition: 'outside',
-  padding: tokens.orderedPadding
+  padding: $tokens.orderedPadding
 }))
 
-const Unordered = styled.ul(({ tokens }) => ({
+const Unordered = styled.ul(({ $tokens }) => ({
   listStyleType: 'none',
   margin: 0,
   padding: 0,
-  paddingTop: tokens.unorderedPadding
+  paddingTop: $tokens.unorderedPadding
 }))
 
-const ListItem = styled(OrderedListBase.Item)(({ tokens }) => ({
+const ListItem = styled(OrderedListItemBase)(({ $tokens }) => ({
   display: 'list-item',
   '&::marker': {
-    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
-    fontSize: tokens.listFontSize,
-    lineHeight: tokens.listLineHeight,
+    fontFamily: `${$tokens.listFontName}${$tokens.listFontWeight}normal`,
+    fontSize: $tokens.listFontSize,
+    lineHeight: $tokens.listLineHeight,
     textAlign: 'end !important'
   },
-  color: tokens.listColor,
-  fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
-  fontSize: tokens.listFontSize,
-  lineHeight: tokens.listLineHeight,
-  marginBottom: tokens.listMarginBottom,
-  marginLeft: tokens.listMarginLeft,
+  color: $tokens.listColor,
+  fontFamily: `${$tokens.listFontName}${$tokens.listFontWeight}normal`,
+  fontSize: $tokens.listFontSize,
+  lineHeight: $tokens.listLineHeight,
+  marginBottom: $tokens.listMarginBottom,
+  marginLeft: $tokens.listMarginLeft,
   wordBreak: 'break-word'
 }))
 
-const NonIndexedContentTitle = styled.div(({ tokens }) => ({
-  color: tokens.titleColor,
-  fontSize: tokens.titleFontSize,
-  lineHeight: tokens.titleLineHeight,
-  paddingLeft: tokens.titlePaddingLeft
+const NonIndexedContentTitle = styled.div(({ $tokens }) => ({
+  color: $tokens.titleColor,
+  fontSize: $tokens.titleFontSize,
+  lineHeight: $tokens.titleLineHeight,
+  paddingLeft: $tokens.titlePaddingLeft
 }))
 
 /**
@@ -76,7 +78,7 @@ const NonIndexedContentTitle = styled.div(({ tokens }) => ({
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-const TermsAndConditions = React.forwardRef(
+export const TermsAndConditions = React.forwardRef(
   (
     {
       copy = 'en',
@@ -164,12 +166,12 @@ const TermsAndConditions = React.forwardRef(
           expandLabel={getCopy('expandLabel')}
           ref={ref}
         >
-          <ContentContainer tokens={themeTokens}>
+          <ContentContainer $tokens={themeTokens}>
             {hasIndexedContent && (
-              <Ordered tokens={themeTokens}>
+              <Ordered $tokens={themeTokens}>
                 {indexedContent.map((contentItem, idx) => (
                   // eslint-disable-next-line react/no-array-index-key
-                  <ListItem tokens={listItemStyles} key={idx} media={listItemMediaIds}>
+                  <ListItem $tokens={listItemStyles} key={idx} data-media={listItemMediaIds}>
                     {renderStructuredContent(contentItem)}
                   </ListItem>
                 ))}
@@ -178,8 +180,8 @@ const TermsAndConditions = React.forwardRef(
             {hasNonIndexedContent && (
               <Box between={3}>
                 <NonIndexedContentTitle
-                  tokens={nonIndexedContentStyles}
-                  media={nonIndexedContentMediaIds}
+                  $tokens={nonIndexedContentStyles}
+                  data-media={nonIndexedContentMediaIds}
                 >
                   <Typography
                     block
@@ -194,10 +196,10 @@ const TermsAndConditions = React.forwardRef(
                     {getCopy('nonIndexedTitle')}
                   </Typography>
                 </NonIndexedContentTitle>
-                <Unordered tokens={themeTokens}>
+                <Unordered $tokens={themeTokens}>
                   {nonIndexedContent.map((contentItem, idx) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <ListItem tokens={listItemStyles} key={idx} media={listItemMediaIds}>
+                    <ListItem $tokens={listItemStyles} key={idx} data-media={listItemMediaIds}>
                       {renderStructuredContent(contentItem)}
                     </ListItem>
                   ))}
@@ -260,5 +262,3 @@ TermsAndConditions.propTypes = {
     fr: dictionaryContentShape
   })
 }
-
-export default TermsAndConditions

package/src/TermsAndConditions/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     headingHide: 'Hide terms and conditions',
     headingView: 'View terms and conditions',

package/src/Testimonial/Testimonial.jsx

@@ -9,27 +9,27 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import Image from '../Image'
+import { Image } from '../Image/Image'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const TestimonialContainer = styled.figure(({ testimonialContainerGap }) => ({
+const TestimonialContainer = styled.figure(({ $testimonialContainerGap }) => ({
   display: 'flex',
   flexDirection: 'column',
-  gap: testimonialContainerGap,
+  gap: $testimonialContainerGap,
   margin: 0
 }))
 
-const QuoteContainer = styled.div(({ quoteContainerGap }) => ({
+const QuoteContainer = styled.div(({ $quoteContainerGap }) => ({
   display: 'flex',
   alignItems: 'center',
-  gap: quoteContainerGap
+  gap: $quoteContainerGap
 }))
 
-const Divider = styled.div(({ dividerBorder, dividerBackgroundColor }) => ({
-  height: dividerBorder,
-  background: dividerBackgroundColor,
+const Divider = styled.div(({ $dividerBorder, $dividerBackgroundColor }) => ({
+  height: $dividerBorder,
+  background: $dividerBackgroundColor,
   width: '100%'
 }))
 
@@ -42,20 +42,19 @@ const AuthorInfoContainer = styled.div({
   flexDirection: 'column'
 })
 
-const Figcaption = styled.figcaption(({ figcaptionGap }) => ({
+const Figcaption = styled.figcaption(({ $figcaptionGap }) => ({
   display: 'flex',
   alignItems: 'center',
-  gap: figcaptionGap
+  gap: $figcaptionGap
 }))
 
-const Testimonial = React.forwardRef(
+export const Testimonial = React.forwardRef(
   (
     {
       showDivider,
       testimonial,
       title,
-      imageSrc,
-      image = imageSrc,
+      image,
       additionalInfo,
       testimonialStyle = 'large',
       tokens,
@@ -105,11 +104,11 @@ const Testimonial = React.forwardRef(
 
     return (
       <TestimonialContainer
-        testimonialContainerGap={testimonialContainerGap}
+        $testimonialContainerGap={testimonialContainerGap}
         ref={ref}
         {...selectProps(rest)}
       >
-        <QuoteContainer quoteContainerGap={quoteContainerGap}>
+        <QuoteContainer $quoteContainerGap={quoteContainerGap}>
           <Icon
             tokens={{ color: iconColor }}
             variant={{ size: 'micro' }}
@@ -117,8 +116,8 @@ const Testimonial = React.forwardRef(
           />
           {showDivider && (
             <Divider
-              dividerBackgroundColor={dividerBackgroundColor}
-              dividerBorder={dividerBorder}
+              $dividerBackgroundColor={dividerBackgroundColor}
+              $dividerBorder={dividerBorder}
               role="separator"
             />
           )}
@@ -147,7 +146,7 @@ const Testimonial = React.forwardRef(
           </Typography>
         </BlockQuote>
         {(image || title || additionalInfo) && (
-          <Figcaption figcaptionGap={figcaptionGap}>
+          <Figcaption $figcaptionGap={figcaptionGap}>
             {image &&
               (typeof image === 'string' ? (
                 <Image
@@ -196,8 +195,8 @@ const Testimonial = React.forwardRef(
         )}
         {showDivider && (
           <Divider
-            dividerBackgroundColor={dividerBackgroundColor}
-            dividerBorder={dividerBorder}
+            $dividerBackgroundColor={dividerBackgroundColor}
+            $dividerBorder={dividerBorder}
             role="separator"
           />
         )}
@@ -234,12 +233,5 @@ Testimonial.propTypes = {
   /**
    * The src attribute for the Image component or custom JSX content to render instead
    */
-  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * The src attribute for the `Image` component to be displayed on the testimonial
-   * @deprecated please use the `image` prop instead
-   */
-  imageSrc: PropTypes.string
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 }
-
-export default Testimonial

package/src/Toast/Toast.jsx

@@ -42,36 +42,39 @@ const slideDown =
 
 const animation = (props) => css`
   ${slideDown('height')(
-    `${props.animationHeightBefore}px`,
-    `${props.animationHeightAfter}px`,
+    `${props.$animationHeightBefore}px`,
+    `${props.$animationHeightAfter}px`,
     'auto'
   )} 1s ease-in-out 2s forwards,
     ${transform('padding-bottom')(
-    `${props.animationPaddingBottomBefore}px`,
-    `${props.animationPaddingBottomAfter}px`
+    `${props.$animationPaddingBottomBefore}px`,
+    `${props.$animationPaddingBottomAfter}px`
   )} 1s ease-in-out 2s forwards,
     ${transform('padding-top')(
-    `${props.animationPaddingTopBefore}px`,
-    `${props.animationPaddingTopAfter}px`
+    `${props.$animationPaddingTopBefore}px`,
+    `${props.$animationPaddingTopAfter}px`
   )} 1s ease-in-out 2s forwards,
     ${transform('background')(
-    props.animationBackgroundColorBefore,
-    props.animationBackgroundColorAfter
+    props.$animationBackgroundColorBefore,
+    props.$animationBackgroundColorAfter
   )} 1s ease-in-out 3.2s forwards;
   & * {
-    animation: ${transform('color')(props.animationColorBefore, props.animationColorAfter)} 1s
+    animation: ${transform('color')(props.$animationColorBefore, props.$animationColorAfter)} 1s
       ease-in-out 3s forwards;
   }
   & > a div {
-    animation: ${transform('color')(props.animationDivColorBefore, props.animationDivColorAfter)} 1s
-      ease-in-out 3s forwards;
+    animation: ${transform('color')(props.$animationDivColorBefore, props.$animationDivColorAfter)}
+      1s ease-in-out 3s forwards;
   }
   & > a svg {
-    animation: ${transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter)}
+    animation: ${transform('fill')(props.$animationFillColorBefore, props.$animationFillColorAfter)}
       1s ease-in-out 3s forwards;
   }
   & > a div {
-    animation: ${transform('color')(props.animationFillColorBefore, props.animationFillColorAfter)}
+    animation: ${transform('color')(
+        props.$animationFillColorBefore,
+        props.$animationFillColorAfter
+      )}
       1s ease-in-out 3s forwards;
   }
 `
@@ -81,16 +84,16 @@ const ToastContainer = styled.div`
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  padding-left: ${({ padding }) => padding}px;
-  padding-right: ${({ padding }) => padding}px;
-  background: ${({ containerBackgroundColor }) => containerBackgroundColor};
-  gap: ${({ containerGap }) => containerGap};
+  padding-left: ${({ $padding }) => $padding}px;
+  padding-right: ${({ $padding }) => $padding}px;
+  background: ${({ $containerBackgroundColor }) => $containerBackgroundColor};
+  gap: ${({ $containerGap }) => $containerGap};
   height: 0;
   overflow: hidden;
   animation: ${animation};
 `
 
-const Toast = React.forwardRef(
+export const Toast = React.forwardRef(
   ({ toast, copy, headline, link, tokens, variant = {}, ...rest }, ref) => {
     // viewport hook added to work adjust the padding to different sizes
     const viewport = useViewport()
@@ -122,22 +125,22 @@ const Toast = React.forwardRef(
 
     return (
       <ToastContainer
-        containerBackgroundColor={containerBackgroundColor}
-        containerGap={containerGap}
-        animationHeightBefore={animationHeightBefore}
-        animationHeightAfter={animationHeightAfter}
-        animationPaddingBottomBefore={animationPaddingBottomBefore}
-        animationPaddingBottomAfter={animationPaddingBottomAfter}
-        animationPaddingTopBefore={animationPaddingTopBefore}
-        animationPaddingTopAfter={animationPaddingTopAfter}
-        animationBackgroundColorBefore={animationBackgroundColorBefore}
-        animationBackgroundColorAfter={animationBackgroundColorAfter}
-        animationColorBefore={animationColorBefore}
-        animationColorAfter={animationColorAfter}
-        animationFillColorBefore={chevronInverseColor}
-        animationFillColorAfter={chevronDefaultColor}
+        $containerBackgroundColor={containerBackgroundColor}
+        $containerGap={containerGap}
+        $animationHeightBefore={animationHeightBefore}
+        $animationHeightAfter={animationHeightAfter}
+        $animationPaddingBottomBefore={animationPaddingBottomBefore}
+        $animationPaddingBottomAfter={animationPaddingBottomAfter}
+        $animationPaddingTopBefore={animationPaddingTopBefore}
+        $animationPaddingTopAfter={animationPaddingTopAfter}
+        $animationBackgroundColorBefore={animationBackgroundColorBefore}
+        $animationBackgroundColorAfter={animationBackgroundColorAfter}
+        $animationColorBefore={animationColorBefore}
+        $animationColorAfter={animationColorAfter}
+        $animationFillColorBefore={chevronInverseColor}
+        $animationFillColorAfter={chevronDefaultColor}
+        $padding={extraTokens.padding}
         ref={ref}
-        {...extraTokens}
         {...selectProps(rest)}
       >
         {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}
@@ -189,5 +192,3 @@ Toast.propTypes = {
     linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
   })
 }
-
-export default Toast

package/src/Video/ControlBar/ControlBar.jsx

@@ -9,31 +9,31 @@ import {
 } from '@telus-uds/components-base'
 
 import styled from 'styled-components'
-import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar'
-import VolumeSlider from './Controls/VolumeSlider/VolumeSlider'
-import VideoButton from './Controls/VideoButton/VideoButton'
-import VideoMenu from './Controls/VideoMenu/VideoMenu'
-import videoText from '../videoText'
+import { VideoProgressBar } from './Controls/VideoProgressBar/VideoProgressBar'
+import { VolumeSlider } from './Controls/VolumeSlider/VolumeSlider'
+import { VideoButton } from './Controls/VideoButton/VideoButton'
+import { VideoMenu } from './Controls/VideoMenu/VideoMenu'
+import { videoText } from '../videoText'
 import { htmlAttrs } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const getIcon = (icon) => <Icon icon={icon} />
 
-const ControlBarContainer = styled.div(({ isHidden, isMobile }) => ({
+const ControlBarContainer = styled.div(({ $isHidden, $isMobile }) => ({
   width: '100%',
   position: 'relative',
   transition: 'opacity 0.4s',
-  opacity: isHidden ? 0 : 1,
-  display: isMobile ? 'none' : undefined
+  opacity: $isHidden ? 0 : 1,
+  display: $isMobile ? 'none' : undefined
 }))
 
-const StyledControlBar = styled.div(({ padding, height }) => ({
+const StyledControlBar = styled.div(({ $padding, $height }) => ({
   boxSizing: 'border-box',
   position: 'absolute',
   width: '100%',
-  height,
-  padding,
+  height: $height,
+  padding: $padding,
   bottom: 0,
   backgroundColor: 'rgba(42, 44, 46, 0.85)', // TODO: replace with opaque greyThunder
   margin: 'auto',
@@ -47,15 +47,15 @@ const VideoProgressBarContainer = styled.div({
   flexGrow: 1
 })
 
-const MenuContainer = styled.div(({ isOpen, menuBottom, menuRight, menuMarginLeft }) => ({
+const MenuContainer = styled.div(({ $isOpen, $menuBottom, $menuRight, $menuMarginLeft }) => ({
   position: 'absolute',
-  bottom: menuBottom,
-  right: menuRight,
-  display: isOpen ? 'block' : 'none',
-  marginLeft: menuMarginLeft
+  bottom: $menuBottom,
+  right: $menuRight,
+  display: $isOpen ? 'block' : 'none',
+  marginLeft: $menuMarginLeft
 }))
 
-const ControlBar = ({
+export const ControlBar = ({
   videoPlayer,
   videoPlayerContainer,
   sources,
@@ -126,13 +126,18 @@ const ControlBar = ({
     return parsed
   }
 
-  const menuContainerStyleProps = { menuBottom, menuRight, menuMarginLeft }
+  const menuContainerStyleProps = {
+    $isOpen: false,
+    $menuBottom: menuBottom,
+    $menuRight: menuRight,
+    $menuMarginLeft: menuMarginLeft
+  }
 
   return (
-    <ControlBarContainer isHidden={isHidden} isMobile={isMobile} {...selectProps(rest)}>
+    <ControlBarContainer $isHidden={isHidden} $isMobile={isMobile} {...selectProps(rest)}>
       <StyledControlBar
-        padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
-        height={`${height}px`}
+        $padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+        $height={`${height}px`}
       >
         <VideoProgressBarContainer>
           <VideoProgressBar
@@ -197,7 +202,7 @@ const ControlBar = ({
           />
         </StackView>
         {captionsMenuOpen && (
-          <MenuContainer isOpen={captionsMenuOpen} {...menuContainerStyleProps}>
+          <MenuContainer {...menuContainerStyleProps} $isOpen={captionsMenuOpen}>
             <VideoMenu
               menuLabel={videoText[copy].captionsDialogue}
               menuOptions={parseTracks()}
@@ -208,7 +213,7 @@ const ControlBar = ({
           </MenuContainer>
         )}
         {qualityMenuOpen && (
-          <MenuContainer isOpen={qualityMenuOpen} {...menuContainerStyleProps}>
+          <MenuContainer {...menuContainerStyleProps} $isOpen={qualityMenuOpen}>
             <VideoMenu
               menuLabel={videoText[copy].qualityDialogue}
               menuOptions={parseVideoQuality()}
@@ -259,5 +264,3 @@ ControlBar.propTypes = {
   compactModeThreshold: PropTypes.number.isRequired,
   videoPlayerWidth: PropTypes.number.isRequired
 }
-
-export default ControlBar

package/src/Video/ControlBar/Controls/VideoButton/VideoButton.jsx

@@ -6,7 +6,7 @@ import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const StyledButton = styled.button(({ color }) => ({
+const StyledButton = styled.button(({ $color }) => ({
   background: 'none',
   border: 'none',
   padding: 0,
@@ -14,11 +14,11 @@ const StyledButton = styled.button(({ color }) => ({
   display: 'inline-flex',
   alignItems: 'stretch',
   'svg path': {
-    fill: color
+    fill: $color
   }
 }))
 
-const VideoButton = ({ icon, label, disableFocus, children, tokens, variant, ...rest }) => {
+export const VideoButton = ({ icon, label, disableFocus, children, tokens, variant, ...rest }) => {
   const { color } = useThemeTokens('VideoButton', tokens, variant)
 
   const handleOnKeyDown = (event) => {
@@ -39,7 +39,7 @@ const VideoButton = ({ icon, label, disableFocus, children, tokens, variant, ...
       aria-label={label}
       onKeyDown={handleOnKeyDown}
       tabIndex={disableFocus ? '-1' : undefined}
-      color={color}
+      $color={color}
       {...selectProps(rest)}
       onClick={handleClick}
     >
@@ -56,5 +56,3 @@ VideoButton.propTypes = {
   disableFocus: PropTypes.bool.isRequired,
   children: PropTypes.node
 }
-
-export default VideoButton

package/src/Video/ControlBar/Controls/VideoMenu/VideoMenu.jsx

@@ -8,15 +8,15 @@ import {
   Icon
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import videoText from '../../../videoText'
+import { videoText } from '../../../videoText'
 import { htmlAttrs } from '../../../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const MenuContainer = styled.div(({ padding, background }) => ({
+const MenuContainer = styled.div(({ $padding, $background }) => ({
   width: 114,
-  padding,
-  backgroundColor: background,
+  padding: $padding,
+  backgroundColor: $background,
   borderRadius: 5
 }))
 
@@ -34,32 +34,32 @@ const MenuButton = styled.button({
 
 const CheckmarkContainer = styled.div(
   ({
-    isSelectedItem,
-    checkMarkWidth,
-    checkMarkHeight,
-    checkMarkSelectedColor,
-    checkMarkHoverColor,
-    checkMarkFocusColor,
-    checkMarkUnselectedColor
+    $isSelectedItem,
+    $checkMarkWidth,
+    $checkMarkHeight,
+    $checkMarkSelectedColor,
+    $checkMarkHoverColor,
+    $checkMarkFocusColor,
+    $checkMarkUnselectedColor
   }) => ({
-    width: checkMarkWidth,
-    height: checkMarkHeight,
+    width: $checkMarkWidth,
+    height: $checkMarkHeight,
     marginTop: 2,
     outline: 'none',
 
     [`${MenuButton} && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkUnselectedColor
+      fill: $isSelectedItem ? $checkMarkSelectedColor : $checkMarkUnselectedColor
     },
     [`${MenuButton}:hover && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkHoverColor
+      fill: $isSelectedItem ? $checkMarkSelectedColor : $checkMarkHoverColor
     },
     [`${MenuButton}:focus && svg`]: {
-      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkFocusColor
+      fill: $isSelectedItem ? $checkMarkSelectedColor : $checkMarkFocusColor
     }
   })
 )
 
-const VideoMenu = ({
+export const VideoMenu = ({
   menuLabel,
   menuOptions,
   setSelection,
@@ -93,8 +93,6 @@ const VideoMenu = ({
                 ? videoText[copy].itemSelected
                 : videoText[copy].itemUnselected
             }`}
-            selectedItem={selectedItem}
-            itemValue={option.value}
             onClick={() => {
               if (selectedItem !== option.value) {
                 setSelection(option.value)
@@ -104,13 +102,13 @@ const VideoMenu = ({
           >
             <Typography variant={{ bold: true, inverse: true }}>{option.name}</Typography>
             <CheckmarkContainer
-              isSelectedItem={option.value === selectedItem}
-              checkMarkWidth={checkMarkWidth}
-              checkMarkHeight={checkMarkHeight}
-              checkMarkSelectedColor={checkMarkSelectedColor}
-              checkMarkHoverColor={checkMarkHoverColor}
-              checkMarkFocusColor={checkMarkFocusColor}
-              checkMarkUnselectedColor={checkMarkUnselectedColor}
+              $isSelectedItem={option.value === selectedItem}
+              $checkMarkWidth={checkMarkWidth}
+              $checkMarkHeight={checkMarkHeight}
+              $checkMarkSelectedColor={checkMarkSelectedColor}
+              $checkMarkHoverColor={checkMarkHoverColor}
+              $checkMarkFocusColor={checkMarkFocusColor}
+              $checkMarkUnselectedColor={checkMarkUnselectedColor}
             >
               <Icon icon={checkMarkIcon} />
             </CheckmarkContainer>
@@ -133,8 +131,8 @@ const VideoMenu = ({
   return (
     <MenuContainer
       onKeyDown={handleOnKeyDown}
-      padding={padding}
-      background={background}
+      $padding={padding}
+      $background={background}
       {...selectProps(rest)}
     >
       <StackView space={2} divider>
@@ -153,5 +151,3 @@ VideoMenu.propTypes = {
   selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   copy: PropTypes.oneOf(['en', 'fr']).isRequired
 }
-
-export default VideoMenu