@telus-uds/components-web 3.1.0 → 3.2.1

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-web
 
-<!-- This log was last generated on Mon, 02 Dec 2024 20:23:48 GMT and should not be manually modified. -->
+This log was last generated on Thu, 19 Dec 2024 04:54:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.2.1
+
+Thu, 19 Dec 2024 04:54:39 GMT
+
+### Patches
+
+- `List`: fix TELUS, Koodo & Public Mobile styles (sergio.ramirez@telus.com)
+- `Breadcrumbs`: fix layout shift due to performance issues (guillermo.peitzner@telus.com)
+- `styled-components` may break SSR in Next.js Pages Router app (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v2.3.0
+- Bump @telus-uds/system-theme-tokens to v3.2.0
+
+## 3.2.0
+
+Fri, 06 Dec 2024 02:06:03 GMT
+
+### Minor changes
+
+- `NavigationBar`: enable hash navigation (guillermo.peitzner@telus.com)
+- `ChevronLink`, `Search` & `ResponsiveImage`: new `dataSet` prop added to the components to allow the capability to pass data (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v2.2.0
+
+### Patches
+
+- `QuantitySelector`: render hint when no label is provided (guillermo.peitzner@telus.com)
+
 ## 3.1.0
 
-Mon, 02 Dec 2024 20:23:48 GMT
+Mon, 02 Dec 2024 20:29:26 GMT
 
 ### Minor changes
 

package/lib/Badge/Badge.js

@@ -1,34 +1,41 @@
 import React from 'react';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
-import { htmlAttrs, transformGradient } from '../utils';
+import { htmlAttrs, transformGradient, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Badge__BadgeContainer",
-  componentId: "components-web__sc-tsiuo2-0"
-})(["background:", ";border:", ";display:inline-flex;justify-content:center;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
+const {
+  styled
+} = styledComponents;
+const BadgeContainer = styled.div`
+  background: ${_ref => {
   let {
     background
   } = _ref;
   return background;
-}, _ref2 => {
+}};
+  border: ${_ref2 => {
   let {
     border
   } = _ref2;
   return border;
-}, _ref3 => {
+}};
+  display: inline-flex;
+  justify-content: center;
+  padding: ${_ref3 => {
   let {
     padding
   } = _ref3;
   return padding;
-}, _ref4 => {
+}};
+  border-radius: ${_ref4 => {
   let {
     radius
   } = _ref4;
   return radius;
-}, _ref5 => {
+}};
+  width: fit-content;
+  ${_ref5 => {
   let {
     isOutlineOffer,
     isAlternative,
@@ -40,7 +47,8 @@ const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
 	    -webkit-background-clip: text;
 	    ${gradient && '-webkit-text-fill-color: transparent;'}
     }`;
-});
+}}
+`;
 const fontSizeMapping = {
   12: 'micro',
   14: 'small',

package/lib/BlockQuote/BlockQuote.js

@@ -1,53 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, useResponsiveThemeTokens, createMediaQueryStyles, withLinkRouter, useViewport, getTokensPropType, StyleSheet } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs, transformGradient } from '../utils';
+import { htmlAttrs, transformGradient, styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const BlockQuoteContainer = /*#__PURE__*/styled.blockquote.withConfig({
-  displayName: "BlockQuote__BlockQuoteContainer",
-  componentId: "components-web__sc-vals3u-0"
-})(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
+const {
+  styled
+} = styledComponents;
+const BlockQuoteContainer = styled.blockquote`
+  margin: 0;
+  position: relative;
+  padding-left: ${_ref => {
   let {
     paddingLeft
   } = _ref;
   return `${paddingLeft}px`;
-}, _ref2 => {
+}};
+  padding-right: ${_ref2 => {
   let {
     paddingRight
   } = _ref2;
   return `${paddingRight}px`;
-}, _ref3 => {
+}};
+  padding-bottom: ${_ref3 => {
   let {
     paddingBottom
   } = _ref3;
   return `${paddingBottom}px`;
-}, _ref4 => {
+}};
+  padding-top: ${_ref4 => {
   let {
     paddingTop
   } = _ref4;
   return `${paddingTop}px`;
-}, _ref5 => {
+}};
+  &::before {
+    content: '';
+    left: 0;
+    top: 0;
+    position: absolute;
+    height: 100%;
+    width: ${_ref5 => {
   let {
     width
   } = _ref5;
   return `${width}px`;
-}, _ref6 => {
+}};
+    background: ${_ref6 => {
   let {
     backgroundGradient
   } = _ref6;
   return backgroundGradient && transformGradient(backgroundGradient);
-});
-const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "BlockQuote__QuoteContainer",
-  componentId: "components-web__sc-vals3u-1"
-})(["margin-bottom:", ";"], _ref7 => {
+}};
+  }
+`;
+const QuoteContainer = styled.div`
+  margin-bottom: ${_ref7 => {
   let {
     marginBottom
   } = _ref7;
   return `${marginBottom}px`;
-});
+}};
+`;
 const selectTitleHeadingTokens = themeTokens => ({
   fontSize: themeTokens.titleHeadingFontSize,
   fontName: themeTokens.titleHeadingFontName,

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -1,17 +1,16 @@
 import React, { createElement as _createElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { isEqual } from 'lodash';
 import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import Item from './Item/Item';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledList = /*#__PURE__*/styled.ol.withConfig({
-  displayName: "Breadcrumbs__StyledList",
-  componentId: "components-web__sc-gwwxrc-0"
-})({
+const {
+  styled
+} = styledComponents;
+const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
@@ -135,15 +134,9 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   const [optionsHidden, setOptionsHidden] = React.useState(false);
   const [itemsToBeRendered, setItemsToBeRendered] = React.useState([]);
   const viewport = useViewport();
-  React.useEffect(() => {
-    if (optionsHidden) {
-      if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
-        setItemsToBeRendered(activeRoutes);
-      }
-      return;
-    }
+  const newItems = React.useMemo(() => {
     if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
-      const newItems = [...activeRoutes.slice(0, 2), {
+      return [...activeRoutes.slice(0, 2), {
         path: '#',
         breadcrumbName: '...',
         onPress: event => {
@@ -152,12 +145,25 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         },
         isExpander: true
       }, activeRoutes[activeRoutes.length - 1]];
-      setItemsToBeRendered(newItems);
-      setOptionsHidden(true);
+    }
+    return activeRoutes;
+  }, [viewport, activeRoutes]);
+  React.useEffect(() => {
+    if (optionsHidden) {
+      if (viewport !== 'xs' && !isEqual(itemsToBeRendered, activeRoutes)) {
+        setItemsToBeRendered(activeRoutes);
+      }
+      return;
+    }
+    if (viewport === 'xs' && activeRoutes.length >= MAX_ITEMS_ON_XS_VIEWPORT) {
+      if (!isEqual(itemsToBeRendered, newItems)) {
+        setItemsToBeRendered(newItems);
+        setOptionsHidden(true);
+      }
     } else if (!isEqual(itemsToBeRendered, activeRoutes)) {
       setItemsToBeRendered(activeRoutes);
     }
-  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered]);
+  }, [viewport, activeRoutes, optionsHidden, itemsToBeRendered, newItems]);
   const items = getItems(itemsToBeRendered, params, !children);
   const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant);
   const metadata = /*#__PURE__*/_jsx(HelmetProvider, {

package/lib/Breadcrumbs/Item/Item.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
-import { htmlAttrs } from '../../utils';
+import { htmlAttrs, styledComponents } from '../../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
-  displayName: "Item__StyledItemContainer",
-  componentId: "components-web__sc-1rfdaul-0"
-})({
+const {
+  styled
+} = styledComponents;
+const StyledItemContainer = styled.li({
   display: 'inline-block',
   paddingLeft: _ref => {
     let {
@@ -25,10 +24,7 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
   },
   marginBottom: '8px'
 });
-const IconContainer = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Item__IconContainer",
-  componentId: "components-web__sc-1rfdaul-1"
-})({
+const IconContainer = styled.span({
   display: 'inline-block',
   paddingLeft: _ref3 => {
     let {

package/lib/Callout/Callout.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Icon, selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const {
+  styled
+} = styledComponents;
 const getAlignment = (rounded, textAlignToFlex) => {
   if (textAlignToFlex) {
     switch (textAlignToFlex) {
@@ -30,10 +32,7 @@ const verticalAlignToFlex = verticalAlign => {
       return 'top';
   }
 };
-const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Callout__CalloutContainer",
-  componentId: "components-web__sc-1a7ptx-0"
-})(_ref => {
+const CalloutContainer = styled.div(_ref => {
   let {
     rounded,
     verticalAlign,

package/lib/Card/Card.js

@@ -1,7 +1,7 @@
 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 } from '@telus-uds/components-base';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import CardContent from './CardContent';
 import CardFooter from './CardFooter';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
@@ -10,6 +10,9 @@ import ConditionalWrapper from '../shared/ConditionalWrapper';
 // Passes React Native-oriented system props through UDS Card
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const {
+  styled
+} = styledComponents;
 
 /**
  * A basic card component, unstyled by default.
@@ -40,10 +43,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const DynamicWidthContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Card__DynamicWidthContainer",
-  componentId: "components-web__sc-1elbtwd-0"
-})(_ref => {
+const DynamicWidthContainer = styled.div(_ref => {
   let {
     width,
     display,

package/lib/Card/CardContent.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CardContent__CardContentContainer",
-  componentId: "components-web__sc-1k2501q-0"
-})(_ref => {
+const {
+  styled
+} = styledComponents;
+const CardContentContainer = styled.div(_ref => {
   let {
     borderRadius,
     paddingBottom,

package/lib/Card/CardFooter.js

@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, paddingProp, selectSystemProps, useThemeTokens, useViewport, variantProp } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CardFooter__CardFooterContainer",
-  componentId: "components-web__sc-pm6vns-0"
-})(_ref => {
+const {
+  styled
+} = styledComponents;
+const CardFooterContainer = styled.div(_ref => {
   let {
     backgroundColor,
     borderRadius,

package/lib/Countdown/Countdown.js

@@ -2,19 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Spacer, StackView, Typography, selectSystemProps, useViewport, useTheme, useThemeTokens, useResponsiveThemeTokens, createMediaQueryStyles, applyTextStyles, getTokensPropType, StyleSheet } from '@telus-uds/components-base';
 import { viewports } from '@telus-uds/system-constants';
-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 { htmlAttrs, transformGradient, styledComponents } from '../utils';
 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 [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Container = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Countdown__Container",
-  componentId: "components-web__sc-18tqcb2-0"
-})(_ref => {
+const {
+  styled
+} = styledComponents;
+const Container = styled.div(_ref => {
   let {
     variant: {
       feature,

package/lib/Countdown/Segment.js

@@ -1,22 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StackView, Typography, useCopy } from '@telus-uds/components-base';
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import dictionary from './dictionary';
 import { countdownVariantPropType, dictionaryContentShape } from './types';
 // !TODO: put this back
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 
 // Pads with zeros on the left if it's a single digit number
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pad = function (number) {
   let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return String(number).padStart(segmentWidth, '0');
 };
-const Container = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Segment__Container",
-  componentId: "components-web__sc-yrh35y-0"
-})(_ref => {
+const Container = styled.div(_ref => {
   let {
     segmentFontSize,
     segmentWidth = 2,

package/lib/DatePicker/CalendarContainer.js

@@ -1,13 +1,13 @@
-import styled from 'styled-components';
+import { styledComponents } from '../utils';
 import defaultReactDatesCss from './reactDatesCss';
 
 // calendarDayDefaultHeight and calendarDayDefaultWidth
 // refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
 
-const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CalendarContainer",
-  componentId: "components-web__sc-qdc1tg-0"
-})(_ref => {
+const {
+  styled
+} = styledComponents;
+const CalendarContainer = styled.div(_ref => {
   let {
     daySize,
     remainingTokens,

package/lib/DatePicker/DatePicker.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import { SingleDatePicker, DayPickerSingleDateController } from 'react-dates';
@@ -9,8 +8,11 @@ import moment from 'moment';
 import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
-import { htmlAttrs } from '../utils';
+import { htmlAttrs, styledComponents } from '../utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  styled
+} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const dateFormat = 'DD / MM / YYYY';
 const dateFormatWithoutSpaces = 'DD/MM/YYYY';
@@ -30,24 +32,15 @@ const getResponsiveCircleSize = function () {
   }
   return inline ? 44 : 26;
 };
-const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DatePicker__MonthCenterContainer",
-  componentId: "components-web__sc-mz8fi3-0"
-})({
+const MonthCenterContainer = styled.div({
   display: 'flex',
   justifyContent: 'center'
 });
-const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DatePicker__DateInputWrapper",
-  componentId: "components-web__sc-mz8fi3-1"
-})({
+const DateInputWrapper = styled.div({
   display: 'flex',
   flexDirection: 'column'
 });
-const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DatePicker__PortalPositionedContainer",
-  componentId: "components-web__sc-mz8fi3-2"
-})({
+const PortalPositionedContainer = styled.div({
   position: 'absolute',
   left: _ref => {
     let {
@@ -252,10 +245,11 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
-  const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
-    displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-3"
-  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
+  const HiddenInputFieldContainer = styled.div`
+      height: ${props => props.height};
+      width: ${props => props.width};
+      overflow: hidden;
+    `;
   const {
     hiddenInputFieldContainerHeight,
     hiddenInputFieldContainerWidth,