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

package/lib/esm/Card/Card.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase, useResponsiveProp, hrefAttrsProp, useAllViewportTokens } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import CardContent from './CardContent';
-import CardFooter from './CardFooter';
-import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import ConditionalWrapper from '../shared/ConditionalWrapper';
+import { CardContent } from './CardContent';
+import { CardFooter } from './CardFooter';
+import { FullBleedContent, getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
+import { ConditionalWrapper } from '../shared/ConditionalWrapper/ConditionalWrapper';
 
 // Passes React Native-oriented system props through UDS Card
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -97,31 +97,30 @@ const getCardContentTokens = function (baseTokens) {
  * `Card` component accepts all the standard accessibility props.
  */
 const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
-  shouldForwardProp: prop => !['marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'height', 'alignSelf'].includes(prop),
   displayName: "Card__DynamicWidthContainer",
   componentId: "components-web__sc-1elbtwd-0"
 })(_ref => {
   let {
-    width,
-    display,
-    borderRadius,
-    overflow,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    alignSelf
+    $width,
+    $display,
+    $borderRadius,
+    $overflow,
+    $marginTop,
+    $marginBottom,
+    $marginLeft,
+    $marginRight,
+    $alignSelf
   } = _ref;
   return {
-    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
   };
 });
 const InteractiveCardWrapper = /*#__PURE__*/styled.div.withConfig({
@@ -138,8 +137,8 @@ const InteractiveOverlay = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1elbtwd-2"
 })(_ref2 => {
   let {
-    overlayOpacity,
-    borderRadius
+    $overlayOpacity,
+    $borderRadius
   } = _ref2;
   return {
     position: 'absolute',
@@ -147,8 +146,8 @@ const InteractiveOverlay = /*#__PURE__*/styled.div.withConfig({
     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
@@ -159,9 +158,9 @@ const FocusBorder = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1elbtwd-3"
 })(_ref3 => {
   let {
-    borderWidth,
-    borderColor,
-    borderRadius
+    $borderWidth,
+    $borderColor,
+    $borderRadius
   } = _ref3;
   return {
     position: 'absolute',
@@ -169,9 +168,9 @@ const FocusBorder = /*#__PURE__*/styled.div.withConfig({
     left: 0,
     right: 0,
     bottom: 0,
-    borderWidth,
-    borderColor,
-    borderRadius,
+    borderWidth: $borderWidth,
+    borderColor: $borderColor,
+    borderRadius: $borderRadius,
     borderStyle: 'solid',
     pointerEvents: 'none',
     zIndex: 2
@@ -182,16 +181,16 @@ const FullBleedPaddingWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1elbtwd-4"
 })(_ref4 => {
   let {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
+    $paddingTop,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight
   } = _ref4;
   return {
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
+    paddingTop: $paddingTop,
+    paddingBottom: $paddingBottom,
+    paddingLeft: $paddingLeft,
+    paddingRight: $paddingRight,
     display: 'flex',
     flexDirection: 'column'
   };
@@ -217,13 +216,13 @@ const calculateFullBleedPadding = (themeTokens, fullBleedPadding, paddingSides)
     return customTokens?.[tokenKey] ?? themeTokens[tokenKey] - borderWidth ?? 0;
   };
   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 = /*#__PURE__*/React.forwardRef(function () {
+export const Card = /*#__PURE__*/React.forwardRef(function () {
   let {
     children,
     footer,
@@ -382,13 +381,13 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const isImageWidthAdjustable = hasValidImgCol && (fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT);
   const contentWrapperStyleProps = {
     ...(hasValidImgCol && {
-      width: adaptiveContentWidth
+      $width: adaptiveContentWidth
     }),
     ...(hasValidImgCol && imgColCurrentViewport >= maxCol && {
-      display: 'none'
+      $display: 'none'
     }),
     ...(fullBleedContentChildrenAlign && {
-      alignSelf: fullBleedContentChildrenAlign
+      $alignSelf: fullBleedContentChildrenAlign
     })
   };
   const columnFlex = {
@@ -412,14 +411,14 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
     ...(isImageWidthAdjustable && {
-      width: fullBleedImageWidth
+      $width: fullBleedImageWidth
     }),
     ...(isImageWidthAdjustable && imgColCurrentViewport >= maxCol && {
-      borderRadius,
-      overflow: 'hidden'
+      $borderRadius: borderRadius,
+      $overflow: 'hidden'
     }),
     ...(isImageWidthAdjustable && imgColCurrentViewport === 0 && {
-      display: 'none'
+      $display: 'none'
     })
   };
   return /*#__PURE__*/_jsxs(CardBase, {
@@ -489,17 +488,11 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
               wrapperProps: contentWrapperStyleProps,
               condition: isImageWidthAdjustable,
               children: /*#__PURE__*/_jsx(CardContent, {
-                tokens: {
-                  ...getCardContentTokens(tokensWithoutBg, {
-                    backgroundImage,
-                    fullBleedContentChildrenAlign,
-                    useTransparentBackground: true
-                  }),
-                  paddingTop: tokens.paddingTop !== undefined ? tokens.paddingTop : allThemeTokens.paddingTop,
-                  paddingBottom: tokens.paddingBottom !== undefined ? tokens.paddingBottom : allThemeTokens.paddingBottom,
-                  paddingLeft: tokens.paddingLeft !== undefined ? tokens.paddingLeft : allThemeTokens.paddingLeft,
-                  paddingRight: tokens.paddingRight !== undefined ? tokens.paddingRight : allThemeTokens.paddingRight
-                },
+                tokens: getCardContentTokens(tokensWithoutBg, {
+                  backgroundImage,
+                  fullBleedContentChildrenAlign,
+                  useTransparentBackground: true
+                }),
                 variant: variant,
                 withFooter: hasFooter,
                 backgroundImage: backgroundImage,
@@ -522,12 +515,12 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
               })
             })]
           }), /*#__PURE__*/_jsx(InteractiveOverlay, {
-            overlayOpacity: overlayOpacity,
-            borderRadius: borderRadius
+            $overlayOpacity: overlayOpacity,
+            $borderRadius: borderRadius
           }), showFocusBorder && /*#__PURE__*/_jsx(FocusBorder, {
-            borderWidth: `${focusTokens.borderWidth}px`,
-            borderColor: focusTokens.borderColor,
-            borderRadius: borderRadius
+            $borderWidth: `${focusTokens.borderWidth}px`,
+            $borderColor: focusTokens.borderColor,
+            $borderRadius: borderRadius
           })]
         });
       }
@@ -685,5 +678,4 @@ Card.propTypes = {
    * Data set for the card.
    */
   dataSet: PropTypes.object
-};
-export default Card;
+};

package/lib/esm/Card/CardContent.js

@@ -10,46 +10,46 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1k2501q-0"
 })(_ref => {
   let {
-    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
   } = _ref;
   return {
     // 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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     flexContent,
@@ -138,10 +138,35 @@ const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   } else {
     themeTokens = allTokens.current;
   }
+  const {
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    contentAlignItems,
+    contentFlexGrow,
+    contentFlexShrink,
+    contentJustifyContent,
+    borderWidth,
+    alignSelf,
+    backgroundColor
+  } = themeTokens;
   return /*#__PURE__*/_jsx(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),
@@ -175,5 +200,4 @@ CardContent.propTypes = {
    * When present, makes the CardContent background transparent.
    */
   backgroundImage: PropTypes.object
-};
-export default CardContent;
+};

package/lib/esm/Card/CardFooter.js

@@ -10,31 +10,31 @@ const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-pm6vns-0"
 })(_ref => {
   let {
-    backgroundColor,
-    borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
+    $backgroundColor,
+    $borderRadius,
+    $paddingBottom,
+    $paddingLeft,
+    $paddingRight,
+    $paddingTop
   } = _ref;
   return {
-    backgroundColor,
-    borderBottomLeftRadius: borderRadius,
-    borderBottomRightRadius: borderRadius,
+    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 = _ref2 => {
+export const CardFooter = _ref2 => {
   let {
     children,
     padding,
@@ -49,9 +49,19 @@ const CardFooter = _ref2 => {
   }, {
     viewport
   });
+  const {
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = padding || themeTokens;
   return /*#__PURE__*/_jsx(CardFooterContainer, {
-    ...themeTokens,
-    ...padding,
+    $paddingBottom: paddingBottom,
+    $paddingLeft: paddingLeft,
+    $paddingRight: paddingRight,
+    $paddingTop: paddingTop,
+    $borderRadius: themeTokens.borderRadius,
+    $backgroundColor: themeTokens.backgroundColor,
     ...selectProps(rest),
     children: children
   });
@@ -74,5 +84,4 @@ CardFooter.propTypes = {
    * Card variant.
    */
   variant: variantProp.propType
-};
-export default CardFooter;
+};

package/lib/esm/Countdown/Countdown.js

@@ -6,8 +6,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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DAYS = 'days';
@@ -72,7 +72,7 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
@@ -257,5 +257,4 @@ Countdown.propTypes = {
    * Possible values: `'days'`, `'hours'`, `'minutes'`, `'seconds'`
    */
   units: PropTypes.arrayOf(PropTypes.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
-};
-export default Countdown;
+};

package/lib/esm/Countdown/Segment.js

@@ -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';
@@ -18,8 +18,8 @@ const Container = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-yrh35y-0"
 })(_ref => {
   let {
-    segmentFontSize,
-    segmentWidth = 2,
+    $segmentFontSize,
+    $segmentWidth = 2,
     variant: {
       feature
     }
@@ -29,7 +29,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     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'
     })
   };
@@ -37,7 +37,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
 // 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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Segment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     segmentFontSize,
@@ -60,8 +60,8 @@ const Segment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     feature
   } = variant;
   return /*#__PURE__*/_jsx(Container, {
-    segmentFontSize: segmentFontSize,
-    segmentWidth: segmentWidth,
+    $segmentFontSize: segmentFontSize,
+    $segmentWidth: segmentWidth,
     variant: variant,
     ref: ref,
     children: /*#__PURE__*/_jsxs(StackView, {
@@ -100,5 +100,4 @@ Segment.propTypes = {
   labelMediaIds: PropTypes.string,
   mainTextMediaIds: PropTypes.string,
   variant: countdownVariantPropType
-};
-export default Segment;
+};

package/lib/esm/Countdown/dictionary.js

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

package/lib/esm/Countdown/types.js

@@ -17,8 +17,4 @@ export const dictionaryContentShape = PropTypes.shape({
   minute: PropTypes.string.isRequired,
   seconds: PropTypes.string.isRequired,
   second: PropTypes.string.isRequired
-});
-export default {
-  countdownVariantPropType,
-  dictionaryContentShape
-};
+});

package/lib/esm/Countdown/useCountdown.js

@@ -9,7 +9,7 @@ const getTimeCounts = countdown => {
   const seconds = Math.floor(countdown % (1000 * 60) / 1000);
   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!');
@@ -22,5 +22,4 @@ const useCountdown = targetTime => {
     return () => clearInterval(interval);
   }, [countdownTime]);
   return getTimeCounts(countdown);
-};
-export default useCountdown;
+};