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

package/lib/esm/utils/theming/with-server-theme.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getThemeTokens, getTokensPropType } from '@telus-uds/components-base/server';
-import getTheme from './get-theme-from-server';
+import { getTheme } from './get-theme-from-server';
 import { jsx as _jsx } from "react/jsx-runtime";
-const withServerTheme = (Component, componentName) => {
+export const withServerTheme = (Component, componentName) => {
   const UdsStyledComponent = async _ref => {
     let {
       tokens: tokenOverrides,
@@ -22,5 +22,4 @@ const withServerTheme = (Component, componentName) => {
     variant: PropTypes.string
   };
   return UdsStyledComponent;
-};
-export default withServerTheme;
+};

package/lib/esm/utils/transforms.js

@@ -1,4 +1 @@
-export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-export default {
-  transformGradient
-};
+export const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;

package/lib/esm/utils/useOverlaidPosition.js

@@ -121,7 +121,7 @@ function getOverlaidPosition(_ref2) {
  * a small task because UDS's tooltip logic only really works for short text - it might be
  * better to use a third-party library).
  */
-const useOverlaidPosition = _ref3 => {
+export const useOverlaidPosition = _ref3 => {
   let {
     isShown = false,
     offsets,
@@ -220,5 +220,4 @@ const useOverlaidPosition = _ref3 => {
     onTargetLayout,
     isReady
   };
-};
-export default useOverlaidPosition;
+};

package/lib/esm/utils/useTypographyTheme.js

@@ -1,5 +1,5 @@
 import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base';
-const useTypographyTheme = (variant, tokens) => {
+export const useTypographyTheme = (variant, tokens) => {
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
@@ -20,5 +20,4 @@ const useTypographyTheme = (variant, tokens) => {
     fontSize: `${fontSize}px`,
     lineHeight: `${lineHeight}px`
   };
-};
-export default useTypographyTheme;
+};

package/package.json

@@ -5,16 +5,16 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.29.1",
-    "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.20.0",
+    "@telus-uds/components-base": "^4.0.0-alpha.1",
+    "@telus-uds/system-constants": "^4.0.0-alpha.0",
+    "@telus-uds/system-theme-tokens": "^5.0.0-alpha.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "moment": "2.29.4",
     "prop-types": "^15.7.2",
     "react-dates": "^21.8.0",
-    "react-helmet-async": "^1.3.0",
+    "react-helmet-async": "^2.0.5",
     "react-moment-proptypes": "^1.8.1",
     "react-youtube": "^10.1.0",
     "semver": "^7.5.4"
@@ -24,33 +24,24 @@
       "import": "./lib/esm/index.js",
       "require": "./lib/cjs/index.js"
     },
-    "./*": {
-      "import": "./lib/esm/*/index.js",
-      "require": "./lib/cjs/*/index.js"
-    },
     "./server": {
       "import": "./lib/esm/server.js",
       "require": "./lib/cjs/server.js"
-    },
-    "./server/*": {
-      "import": "./lib/esm/*/server.js",
-      "require": "./lib/cjs/*/server.js"
     }
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
     "@telus-uds/browserslist-config": "^1.0.5",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^13.3.0",
-    "@types/react": "^18.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^19.0.0",
     "assert": "^2.0.0",
-    "babel-plugin-react-native-web": "^0.18.7",
+    "babel-plugin-react-native-web": "^0.21.2",
     "babel-plugin-styled-components": "^2.0.6",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "jest-axe": "^6.0.0",
     "jest-styled-components": "^7.0.8",
-    "react-test-renderer": "~18.0.0",
     "webpack": "5.x"
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
@@ -59,10 +50,10 @@
   "module": "lib/esm/index.js",
   "name": "@telus-uds/components-web",
   "peerDependencies": {
-    "react": ">=18.2.0 <19.0.0",
-    "react-dom": ">=18.2.0 <19.0.0",
-    "react-native-web": "^0.19.10",
-    "styled-components": "^5.3.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "react-native-web": "^0.19.10 || ^0.21.0",
+    "styled-components": "^5.3.0 || ^6.0.0"
   },
   "repository": {
     "type": "git",
@@ -82,5 +73,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.19.2"
+  "version": "5.0.0-alpha.1"
 }

package/src/Badge/Badge.jsx

@@ -12,22 +12,22 @@ import { htmlAttrs, transformGradient } from '../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const BadgeContainer = styled.div`
-  background: ${({ background }) => background};
-  border: ${({ border }) => border};
+  background: ${({ $background }) => $background};
+  border: ${({ $border }) => $border};
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: fit-content;
-  padding: ${({ padding }) => padding};
-  border-radius: ${({ radius }) => radius};
+  padding: ${({ $padding }) => $padding};
+  border-radius: ${({ $radius }) => $radius};
   width: fit-content;
-  ${({ isOutlineOffer, isAlternative, gradient }) =>
-    (isOutlineOffer || isAlternative) &&
+  ${({ $isOutlineOffer, $isAlternative, $gradient }) =>
+    ($isOutlineOffer || $isAlternative) &&
     `
     > div {
-      background: ${gradient};
+      background: ${$gradient};
 	    -webkit-background-clip: text;
-	    ${gradient && '-webkit-text-fill-color: transparent;'}
+	    ${$gradient && '-webkit-text-fill-color: transparent;'}
     }`}
 `
 
@@ -37,7 +37,7 @@ const fontSizeMapping = {
   16: 'h6'
 }
 
-const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
+export const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   const {
     backgroundColor,
     gradient,
@@ -67,15 +67,15 @@ const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref
 
   return (
     <BadgeContainer
-      isOutlineOffer={isOutlineOffer}
-      isAlternative={alternative}
-      padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
-      radius={`${borderRadius}px`}
-      background={background}
-      fontName={fontName}
-      fontWeight={fontWeight}
-      gradient={semanticGradient}
-      border={`${borderWidth}px solid ${borderColor}`}
+      $isOutlineOffer={isOutlineOffer}
+      $isAlternative={alternative}
+      $padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+      $radius={`${borderRadius}px`}
+      $background={background}
+      $fontName={fontName}
+      $fontWeight={fontWeight}
+      $gradient={semanticGradient}
+      $border={`${borderWidth}px solid ${borderColor}`}
       ref={ref}
       {...selectProps(rest)}
     >
@@ -102,5 +102,3 @@ Badge.propTypes = {
     inverse: PropTypes.bool
   })
 }
-
-export default Badge

package/src/BlockQuote/BlockQuote.jsx

@@ -22,24 +22,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const BlockQuoteContainer = styled.blockquote`
   margin: 0;
   position: relative;
-  padding-left: ${({ paddingLeft }) => `${paddingLeft}px`};
-  padding-right: ${({ paddingRight }) => `${paddingRight}px`};
-  padding-bottom: ${({ paddingBottom }) => `${paddingBottom}px`};
-  padding-top: ${({ paddingTop }) => `${paddingTop}px`};
+  padding-left: ${({ $paddingLeft }) => `${$paddingLeft}px`};
+  padding-right: ${({ $paddingRight }) => `${$paddingRight}px`};
+  padding-bottom: ${({ $paddingBottom }) => `${$paddingBottom}px`};
+  padding-top: ${({ $paddingTop }) => `${$paddingTop}px`};
   &::before {
     content: '';
     left: 0;
     top: 0;
     position: absolute;
     height: 100%;
-    width: ${({ width }) => `${width}px`};
-    background: ${({ backgroundGradient }) =>
-      backgroundGradient && transformGradient(backgroundGradient)};
+    width: ${({ $width }) => `${$width}px`};
+    background: ${({ $backgroundGradient }) =>
+      $backgroundGradient && transformGradient($backgroundGradient)};
   }
 `
 
 const QuoteContainer = styled.div`
-  margin-bottom: ${({ marginBottom }) => `${marginBottom}px`};
+  margin-bottom: ${({ $marginBottom }) => `${$marginBottom}px`};
 `
 
 const selectTitleHeadingTokens = (themeTokens) => ({
@@ -49,7 +49,7 @@ const selectTitleHeadingTokens = (themeTokens) => ({
   lineHeight: themeTokens.titleHeadingLineHeight
 })
 
-const BlockQuote = React.forwardRef(
+export const BlockQuote = React.forwardRef(
   (
     {
       children,
@@ -165,7 +165,7 @@ const BlockQuote = React.forwardRef(
               blockLineHeight: linkLineHeight,
               color
             }}
-            variant={{ alternative: true }}
+            variant={{ style: 'subtle' }}
             LinkRouter={LinkRouter}
             linkRouterProps={linkRouterProps}
           >
@@ -201,7 +201,7 @@ const BlockQuote = React.forwardRef(
       )
 
       if (additionalInfo || link) {
-        return <QuoteContainer marginBottom={marginBottom}>{quote}</QuoteContainer>
+        return <QuoteContainer $marginBottom={marginBottom}>{quote}</QuoteContainer>
       }
 
       return quote
@@ -210,12 +210,12 @@ const BlockQuote = React.forwardRef(
     return (
       <BlockQuoteContainer
         {...selectProps(rest)}
-        paddingTop={paddingTop}
-        paddingBottom={paddingBottom}
-        paddingLeft={paddingLeft}
-        paddingRight={paddingRight}
-        width={width}
-        backgroundGradient={backgroundGradient}
+        $paddingTop={paddingTop}
+        $paddingBottom={paddingBottom}
+        $paddingLeft={paddingLeft}
+        $paddingRight={paddingRight}
+        $width={width}
+        $backgroundGradient={backgroundGradient}
         ref={ref}
       >
         {renderQuote()}
@@ -241,7 +241,7 @@ BlockQuote.propTypes = {
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('BlockQuote'),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool,
+    style: PropTypes.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse']),
     size: PropTypes.string
   }),
   /**
@@ -265,5 +265,3 @@ BlockQuote.propTypes = {
    */
   textStyle: PropTypes.oneOf(['large', 'heading'])
 }
-
-export default BlockQuote

package/src/Breadcrumbs/{Item/Item.jsx → BreadcrumbItem.jsx}

@@ -9,28 +9,29 @@ import {
   useThemeTokens
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
-import { htmlAttrs } from '../../utils'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledItemContainer = styled.li({
   display: 'inline-block',
-  paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
-  lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
+  paddingLeft: ({ $listItemPadding }) => `${$listItemPadding}px`,
+  lineHeight: ({ $lineHeight, $fontSize }) => `${Math.ceil($lineHeight * $fontSize)}px`,
   marginBottom: '8px'
 })
 
 const IconContainer = styled.span({
   display: 'inline-block',
-  paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
-  paddingRight: ({ iconPadding }) => `${iconPadding}px`,
-  fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily,
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
-  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`,
+  paddingLeft: ({ $iconPadding }) => `${$iconPadding}px`,
+  paddingRight: ({ $iconPadding }) => `${$iconPadding}px`,
+  fontFamily: ({ $fontName, $fontWeight }) =>
+    applyTextStyles({ fontName: $fontName, fontWeight: $fontWeight }).fontFamily,
+  height: ({ $iconContainerSize }) => `${$iconContainerSize}px`,
+  width: ({ $iconContainerSize, $iconPadding }) => `${$iconContainerSize + $iconPadding * 2}px`,
   verticalAlign: 'bottom'
 })
 
-const Item = React.forwardRef(
+export const BreadcrumbItem = React.forwardRef(
   (
     {
       href,
@@ -64,10 +65,10 @@ const Item = React.forwardRef(
 
     return (
       <StyledItemContainer
-        listItemPadding={listItemPadding}
-        lineHeight={lineHeight}
-        fontSize={fontSize}
-        iconContainerSize={iconContainerSize}
+        $listItemPadding={listItemPadding}
+        $lineHeight={lineHeight}
+        $fontSize={fontSize}
+        $iconContainerSize={iconContainerSize}
       >
         {current ? (
           <Typography
@@ -95,10 +96,10 @@ const Item = React.forwardRef(
               {children}
             </Link>
             <IconContainer
-              iconPadding={iconPadding}
-              fontName={fontName}
-              fontWeight={fontWeight}
-              iconContainerSize={iconContainerSize}
+              $iconPadding={iconPadding}
+              $fontName={fontName}
+              $fontWeight={fontWeight}
+              $iconContainerSize={iconContainerSize}
             >
               <ChevronRightIcon size={iconSize} color={iconColor} />
             </IconContainer>
@@ -109,9 +110,9 @@ const Item = React.forwardRef(
   }
 )
 
-Item.displayName = 'Item'
+BreadcrumbItem.displayName = 'BreadcrumbItem'
 
-Item.propTypes = {
+BreadcrumbItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Breadcrumb text
@@ -137,5 +138,3 @@ Item.propTypes = {
    */
   onPress: PropTypes.func
 }
-
-export default Item

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -15,7 +15,7 @@ import {
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
-import Item from './Item/Item'
+import { BreadcrumbItem } from './BreadcrumbItem'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -23,6 +23,7 @@ const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
+  alignContent: 'stretch',
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
@@ -107,7 +108,7 @@ const MAX_ITEMS_ON_XS_VIEWPORT = 4
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = React.forwardRef(
+export const Breadcrumbs = React.forwardRef(
   (
     {
       baseUrl,
@@ -211,7 +212,7 @@ const Breadcrumbs = React.forwardRef(
 
     return (
       <nav aria-label="Breadcrumb" ref={ref} {...selectProps(rest)}>
-        <StyledList iconContainerSize={themeTokens.iconContainerSize}>
+        <StyledList $iconContainerSize={themeTokens.iconContainerSize}>
           {items.map(
             ({
               href,
@@ -223,7 +224,7 @@ const Breadcrumbs = React.forwardRef(
               ...itemRest
             }) => {
               return (
-                <Item
+                <BreadcrumbItem
                   {...itemRest}
                   current={current}
                   href={href}
@@ -235,7 +236,7 @@ const Breadcrumbs = React.forwardRef(
                   onPress={onPress}
                 >
                   {breadcrumbName}
-                </Item>
+                </BreadcrumbItem>
               )
             }
           )}
@@ -278,7 +279,3 @@ Breadcrumbs.propTypes = {
    */
   variant: PropTypes.shape({ inverse: PropTypes.bool, light: PropTypes.bool })
 }
-
-Breadcrumbs.Item = Item
-
-export default Breadcrumbs

package/src/Callout/Callout.jsx

@@ -40,18 +40,18 @@ const verticalAlignToFlex = (verticalAlign) => {
 }
 
 const CalloutContainer = styled.div(
-  ({ rounded, verticalAlign, textAlignToFlex, background, gap, borderRadius, padding }) => ({
-    background,
+  ({ $rounded, $verticalAlign, $textAlignToFlex, $background, $gap, $borderRadius, $padding }) => ({
+    background: $background,
     display: 'flex',
-    gap,
-    borderRadius,
-    padding,
-    justifyContent: getAlignment(rounded, textAlignToFlex),
-    alignItems: verticalAlignToFlex(verticalAlign)
+    gap: $gap,
+    borderRadius: $borderRadius,
+    padding: $padding,
+    justifyContent: getAlignment($rounded, $textAlignToFlex),
+    alignItems: verticalAlignToFlex($verticalAlign)
   })
 )
 
-const Callout = React.forwardRef(
+export const Callout = React.forwardRef(
   ({ icon, children, verticalAlign, textAlignToFlex, tokens, variant = {}, ...rest }, ref) => {
     const {
       background,
@@ -68,15 +68,15 @@ const Callout = React.forwardRef(
 
     return (
       <CalloutContainer
-        size={size}
-        rounded={rounded}
+        $size={size}
+        $rounded={rounded}
         data-testid="callout-container"
-        verticalAlign={verticalAlign}
-        textAlignToFlex={textAlignToFlex}
-        background={background}
-        gap={gap}
-        borderRadius={borderRadius}
-        padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+        $verticalAlign={verticalAlign}
+        $textAlignToFlex={textAlignToFlex}
+        $background={background}
+        $gap={gap}
+        $borderRadius={borderRadius}
+        $padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
         ref={ref}
         {...selectProps(rest)}
       >
@@ -111,5 +111,3 @@ Callout.propTypes = {
    */
   verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
 }
-
-export default Callout