@telus-uds/components-web 4.19.2 → 5.0.0-alpha.1

package/src/Card/Card.jsx

@@ -18,13 +18,14 @@ import {
   useAllViewportTokens
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import CardContent from './CardContent'
-import CardFooter from './CardFooter'
-import FullBleedContent, {
+import { CardContent } from './CardContent'
+import { CardFooter } from './CardFooter'
+import {
+  FullBleedContent,
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
-import ConditionalWrapper from '../shared/ConditionalWrapper'
+import { ConditionalWrapper } from '../shared/ConditionalWrapper/ConditionalWrapper'
 
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -87,7 +88,7 @@ const getCardContentTokens = (baseTokens, options = {}) => {
  * ### With Footer
  *
  * Pass any component or simply a string in the `footer` prop in order to render
- * a card with a footer (which uses the `alternative` background).
+ * a card with a footer (which uses the `feature2` style).
  *
  * ### With Full Bleed Content
  *
@@ -108,32 +109,27 @@ const getCardContentTokens = (baseTokens, options = {}) => {
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const DynamicWidthContainer = styled.div.withConfig({
-  shouldForwardProp: (prop) =>
-    !['marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'height', 'alignSelf'].includes(
-      prop
-    )
-})(
+const DynamicWidthContainer = styled.div(
   ({
-    width,
-    display,
-    borderRadius,
-    overflow,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    alignSelf
+    $width,
+    $display,
+    $borderRadius,
+    $overflow,
+    $marginTop,
+    $marginBottom,
+    $marginLeft,
+    $marginRight,
+    $alignSelf
   }) => ({
-    width,
-    display,
-    borderRadius,
-    overflow,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    alignSelf
+    width: $width,
+    display: $display,
+    borderRadius: $borderRadius,
+    overflow: $overflow,
+    marginTop: $marginTop,
+    marginBottom: $marginBottom,
+    marginLeft: $marginLeft,
+    marginRight: $marginRight,
+    alignSelf: $alignSelf
   })
 )
 
@@ -144,39 +140,39 @@ const InteractiveCardWrapper = styled.div(() => ({
   flexDirection: 'column'
 }))
 
-const InteractiveOverlay = styled.div(({ overlayOpacity, borderRadius }) => ({
+const InteractiveOverlay = styled.div(({ $overlayOpacity, $borderRadius }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  backgroundColor: `rgba(0, 0, 0, ${overlayOpacity || 0})`,
-  borderRadius,
+  backgroundColor: `rgba(0, 0, 0, ${$overlayOpacity || 0})`,
+  borderRadius: $borderRadius,
   pointerEvents: 'none',
   transition: 'background-color 0.2s ease',
   zIndex: 1
 }))
 
-const FocusBorder = styled.div(({ borderWidth, borderColor, borderRadius }) => ({
+const FocusBorder = styled.div(({ $borderWidth, $borderColor, $borderRadius }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  borderWidth,
-  borderColor,
-  borderRadius,
+  borderWidth: $borderWidth,
+  borderColor: $borderColor,
+  borderRadius: $borderRadius,
   borderStyle: 'solid',
   pointerEvents: 'none',
   zIndex: 2
 }))
 
 const FullBleedPaddingWrapper = styled.div(
-  ({ paddingTop, paddingBottom, paddingLeft, paddingRight }) => ({
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
+  ({ $paddingTop, $paddingBottom, $paddingLeft, $paddingRight }) => ({
+    paddingTop: $paddingTop,
+    paddingBottom: $paddingBottom,
+    paddingLeft: $paddingLeft,
+    paddingRight: $paddingRight,
     display: 'flex',
     flexDirection: 'column'
   })
@@ -204,14 +200,14 @@ const calculateFullBleedPadding = (themeTokens, fullBleedPadding, paddingSides)
   }
 
   return {
-    paddingTop: applyPadding('Top'),
-    paddingBottom: applyPadding('Bottom'),
-    paddingLeft: applyPadding('Left'),
-    paddingRight: applyPadding('Right')
+    $paddingTop: applyPadding('Top'),
+    $paddingBottom: applyPadding('Bottom'),
+    $paddingLeft: applyPadding('Left'),
+    $paddingRight: applyPadding('Right')
   }
 }
 
-const Card = React.forwardRef(
+export const Card = React.forwardRef(
   (
     {
       children,
@@ -394,10 +390,10 @@ const Card = React.forwardRef(
       (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT)
 
     const contentWrapperStyleProps = {
-      ...(hasValidImgCol && { width: adaptiveContentWidth }),
-      ...(hasValidImgCol && imgColCurrentViewport >= maxCol && { display: 'none' }),
+      ...(hasValidImgCol && { $width: adaptiveContentWidth }),
+      ...(hasValidImgCol && imgColCurrentViewport >= maxCol && { $display: 'none' }),
       ...(fullBleedContentChildrenAlign && {
-        alignSelf: fullBleedContentChildrenAlign
+        $alignSelf: fullBleedContentChildrenAlign
       })
     }
 
@@ -434,10 +430,10 @@ const Card = React.forwardRef(
       fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM
 
     const imageWrapperStyleProps = {
-      ...(isImageWidthAdjustable && { width: fullBleedImageWidth }),
+      ...(isImageWidthAdjustable && { $width: fullBleedImageWidth }),
       ...(isImageWidthAdjustable &&
-        imgColCurrentViewport >= maxCol && { borderRadius, overflow: 'hidden' }),
-      ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && { display: 'none' })
+        imgColCurrentViewport >= maxCol && { $borderRadius: borderRadius, $overflow: 'hidden' }),
+      ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && { $display: 'none' })
     }
 
     return (
@@ -562,12 +558,15 @@ const Card = React.forwardRef(
                       </ConditionalWrapper>
                     )}
                   </StackView>
-                  <InteractiveOverlay overlayOpacity={overlayOpacity} borderRadius={borderRadius} />
+                  <InteractiveOverlay
+                    $overlayOpacity={overlayOpacity}
+                    $borderRadius={borderRadius}
+                  />
                   {showFocusBorder && (
                     <FocusBorder
-                      borderWidth={`${focusTokens.borderWidth}px`}
-                      borderColor={focusTokens.borderColor}
-                      borderRadius={borderRadius}
+                      $borderWidth={`${focusTokens.borderWidth}px`}
+                      $borderColor={focusTokens.borderColor}
+                      $borderRadius={borderRadius}
                     />
                   )}
                 </InteractiveCardWrapper>
@@ -754,5 +753,3 @@ Card.propTypes = {
    */
   dataSet: PropTypes.object
 }
-
-export default Card

package/src/Card/CardContent.jsx

@@ -16,45 +16,45 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const CardContentContainer = styled.div(
   ({
-    borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    withFooter,
-    contentAlignItems: alignItems,
-    contentFlexGrow: flexGrow,
-    contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent,
-    borderWidth,
-    alignSelf,
-    backgroundColor
+    $borderRadius,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight,
+    $paddingTop,
+    $withFooter,
+    $contentAlignItems: alignItems,
+    $contentFlexGrow: flexGrow,
+    $contentFlexShrink: flexShrink,
+    $contentJustifyContent: justifyContent,
+    $borderWidth,
+    $alignSelf,
+    $backgroundColor
   }) => ({
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
-    borderBottomLeftRadius: withFooter ? 0 : borderRadius,
-    borderBottomRightRadius: withFooter ? 0 : borderRadius,
-    borderTopLeftRadius: borderRadius,
-    borderTopRightRadius: borderRadius,
-    paddingBottom: paddingBottom - borderWidth,
-    paddingLeft: paddingLeft - borderWidth,
-    paddingRight: paddingRight - borderWidth,
-    paddingTop: paddingTop - borderWidth,
+    borderBottomLeftRadius: $withFooter ? 0 : $borderRadius,
+    borderBottomRightRadius: $withFooter ? 0 : $borderRadius,
+    borderTopLeftRadius: $borderRadius,
+    borderTopRightRadius: $borderRadius,
+    paddingBottom: $paddingBottom - $borderWidth,
+    paddingLeft: $paddingLeft - $borderWidth,
+    paddingRight: $paddingRight - $borderWidth,
+    paddingTop: $paddingTop - $borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,
     flexGrow,
     flexShrink,
     justifyContent,
-    alignSelf,
-    backgroundColor
+    alignSelf: $alignSelf,
+    backgroundColor: $backgroundColor
   })
 )
 
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-const CardContent = React.forwardRef(
+export const CardContent = React.forwardRef(
   (
     { children, flexContent, tokens, variant, withFooter = false, backgroundImage, ...rest },
     ref
@@ -140,11 +140,37 @@ const CardContent = React.forwardRef(
       themeTokens = allTokens.current
     }
 
+    const {
+      borderRadius,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      paddingTop,
+      contentAlignItems,
+      contentFlexGrow,
+      contentFlexShrink,
+      contentJustifyContent,
+      borderWidth,
+      alignSelf,
+      backgroundColor
+    } = themeTokens
+
     return (
       <CardContentContainer
-        {...themeTokens}
+        $borderRadius={borderRadius}
+        $paddingBottom={paddingBottom}
+        $paddingLeft={paddingLeft}
+        $paddingRight={paddingRight}
+        $paddingTop={paddingTop}
+        $contentAlignItems={contentAlignItems}
+        $contentFlexGrow={contentFlexGrow}
+        $contentFlexShrink={contentFlexShrink}
+        $contentJustifyContent={contentJustifyContent}
+        $borderWidth={borderWidth}
+        $alignSelf={alignSelf}
+        $backgroundColor={backgroundColor}
         flexContent={flexContent}
-        withFooter={withFooter}
+        $withFooter={withFooter}
         ref={ref}
         data-media={mediaIds}
         {...selectProps(rest)}
@@ -185,5 +211,3 @@ CardContent.propTypes = {
    */
   backgroundImage: PropTypes.object
 }
-
-export default CardContent

package/src/Card/CardFooter.jsx

@@ -14,34 +14,50 @@ import { htmlAttrs } from '../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const CardFooterContainer = styled.div(
-  ({ backgroundColor, borderRadius, paddingBottom, paddingLeft, paddingRight, paddingTop }) => ({
-    backgroundColor,
-    borderBottomLeftRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
+  ({
+    $backgroundColor,
+    $borderRadius,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight,
+    $paddingTop
+  }) => ({
+    backgroundColor: $backgroundColor,
+    borderBottomLeftRadius: $borderRadius,
+    borderBottomRightRadius: $borderRadius,
     // @todo circle back to the following non-standard value to
     // see if it can be integrated into the palette
     boxShadow: 'inset 0px 1px 3px rgba(0, 0, 0, 0.05)',
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
+    paddingBottom: $paddingBottom,
+    paddingLeft: $paddingLeft,
+    paddingRight: $paddingRight,
+    paddingTop: $paddingTop
   })
 )
 
 /**
  * Card footer, applying the tokens as per the theme used.
  */
-const CardFooter = ({ children, padding, tokens, variant, ...rest }) => {
+export const CardFooter = ({ children, padding, tokens, variant, ...rest }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens(
     'Card',
     tokens,
-    { ...variant, background: 'alternative' },
+    { ...variant, style: 'feature2' },
     { viewport }
   )
+  const { paddingBottom, paddingLeft, paddingRight, paddingTop } = padding || themeTokens
 
   return (
-    <CardFooterContainer {...themeTokens} {...padding} {...selectProps(rest)}>
+    <CardFooterContainer
+      $paddingBottom={paddingBottom}
+      $paddingLeft={paddingLeft}
+      $paddingRight={paddingRight}
+      $paddingTop={paddingTop}
+      $borderRadius={themeTokens.borderRadius}
+      $backgroundColor={themeTokens.backgroundColor}
+      {...selectProps(rest)}
+    >
       {children}
     </CardFooterContainer>
   )
@@ -66,5 +82,3 @@ CardFooter.propTypes = {
    */
   variant: variantProp.propType
 }
-
-export default CardFooter

package/src/Countdown/Countdown.jsx

@@ -19,8 +19,8 @@ import styled from 'styled-components'
 // Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
 import { htmlAttrs, transformGradient } from '../utils'
-import Segment from './Segment'
-import useCountdown from './useCountdown'
+import { Segment } from './Segment'
+import { useCountdown } from './useCountdown'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 
 const DAYS = 'days'
@@ -72,7 +72,7 @@ const getMainTextTokens = ({
   fontName: textTimerFontName
 })
 
-const Countdown = React.forwardRef(
+export const Countdown = React.forwardRef(
   (
     {
       copy = 'en',
@@ -266,5 +266,3 @@ Countdown.propTypes = {
    */
   units: PropTypes.arrayOf(PropTypes.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
 }
-
-export default Countdown

package/src/Countdown/Segment.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { StackView, Typography, useCopy } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import dictionary from './dictionary'
+import { dictionary } from './dictionary'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 // !TODO: put this back
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'
@@ -10,19 +10,19 @@ import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'
 // Pads with zeros on the left if it's a single digit number
 const pad = (number, segmentWidth = 2) => String(number).padStart(segmentWidth, '0')
 
-const Container = styled.div(({ segmentFontSize, segmentWidth = 2, variant: { feature } }) => ({
+const Container = styled.div(({ $segmentFontSize, $segmentWidth = 2, variant: { feature } }) => ({
   justifyContent: 'space-evenly',
   display: 'inline-flex',
   ...(feature && {
     // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
-    width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
+    width: `${$segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * $segmentWidth}px`,
     display: 'flex'
   })
 }))
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts
-const Segment = React.forwardRef(
+export const Segment = React.forwardRef(
   (
     {
       copy = 'en',
@@ -43,8 +43,8 @@ const Segment = React.forwardRef(
 
     return (
       <Container
-        segmentFontSize={segmentFontSize}
-        segmentWidth={segmentWidth}
+        $segmentFontSize={segmentFontSize}
+        $segmentWidth={segmentWidth}
         variant={variant}
         ref={ref}
       >
@@ -88,5 +88,3 @@ Segment.propTypes = {
   mainTextMediaIds: PropTypes.string,
   variant: countdownVariantPropType
 }
-
-export default Segment

package/src/Countdown/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     days: 'Days',
     day: 'Day',

package/src/Countdown/types.js

@@ -19,5 +19,3 @@ export const dictionaryContentShape = PropTypes.shape({
   seconds: PropTypes.string.isRequired,
   second: PropTypes.string.isRequired
 })
-
-export default { countdownVariantPropType, dictionaryContentShape }

package/src/Countdown/useCountdown.js

@@ -12,7 +12,7 @@ const getTimeCounts = (countdown) => {
   return [days, hours, minutes, seconds]
 }
 
-const useCountdown = (targetTime) => {
+export const useCountdown = (targetTime) => {
   const countdownTime = new Date(targetTime).getTime()
   if (!countdownTime) {
     throw new Error('Invalid target time is provided!')
@@ -30,5 +30,3 @@ const useCountdown = (targetTime) => {
 
   return getTimeCounts(countdown)
 }
-
-export default useCountdown