@telus-uds/components-web 2.31.1 → 2.31.3

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 14 Feb 2024 02:21:15 GMT and should not be manually modified.
+This log was last generated on Fri, 23 Feb 2024 19:32:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.31.3
+
+Fri, 23 Feb 2024 19:32:18 GMT
+
+### Patches
+
+- fix breadcrumbs component current item font-weight (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.78.0
+- Bump @telus-uds/system-theme-tokens to v2.52.0
+
+## 2.31.2
+
+Tue, 20 Feb 2024 23:14:38 GMT
+
+### Patches
+
+- Bump @telus-uds/components-base to v1.77.1
+
 ## 2.31.1
 
-Wed, 14 Feb 2024 02:21:15 GMT
+Wed, 14 Feb 2024 02:29:37 GMT
 
 ### Patches
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -27,9 +27,15 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline'
+  alignItems: 'baseline',
+  height: _ref => {
+    let {
+      iconContainerSize
+    } = _ref;
+    return `${iconContainerSize}px`;
+  }
 });
-const omitProps = _ref => {
+const omitProps = _ref2 => {
   let {
     current,
     path,
@@ -38,7 +44,7 @@ const omitProps = _ref => {
     childRoutes,
     component,
     ...props
-  } = _ref;
+  } = _ref2;
   return props;
 };
 const getBreadcrumbName = (item, params) => {
@@ -101,7 +107,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref2 => {
+const Breadcrumbs = _ref3 => {
   let {
     baseUrl,
     children,
@@ -112,7 +118,7 @@ const Breadcrumbs = _ref2 => {
     variant,
     LinkRouter,
     ...rest
-  } = _ref2;
+  } = _ref3;
   // React Helmet can cause a memory leak in SSR if not properly configured.
   // Only run it in SSR if theme options tells us to.
   /* const {
@@ -122,7 +128,7 @@ const Breadcrumbs = _ref2 => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref3 => {
+  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref4 => {
     let {
       props: {
         href,
@@ -130,7 +136,7 @@ const Breadcrumbs = _ref2 => {
         ...itemRest
       },
       ref
-    } = _ref3;
+    } = _ref4;
     return {
       path: href,
       breadcrumbName,
@@ -139,6 +145,7 @@ const Breadcrumbs = _ref2 => {
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
   const items = getItems(activeRoutes, params, !children);
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
   const metadata = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.HelmetProvider, {
     context: helmetContext,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHelmetAsync.Helmet, {
@@ -158,7 +165,8 @@ const Breadcrumbs = _ref2 => {
     "aria-label": "Breadcrumb",
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
-      children: items.map(_ref4 => {
+      iconContainerSize: themeTokens.iconContainerSize,
+      children: items.map(_ref5 => {
         let {
           href,
           current,
@@ -166,7 +174,7 @@ const Breadcrumbs = _ref2 => {
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
-        } = _ref4;
+        } = _ref5;
         return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
           ...itemRest,
           current: current,

package/lib/Breadcrumbs/Item/Item.js

@@ -24,38 +24,65 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
       listItemPadding
     } = _ref;
     return `${listItemPadding}px`;
+  },
+  lineHeight: _ref2 => {
+    let {
+      lineHeight,
+      fontSize
+    } = _ref2;
+    return `${Math.ceil(lineHeight * fontSize)}px`;
+  },
+  height: _ref3 => {
+    let {
+      iconContainerSize
+    } = _ref3;
+    return `${iconContainerSize}px`;
   }
 });
 const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
-  display: 'inline-flex',
+  display: 'flex',
+  justifyContent: 'center',
   alignItems: 'center',
-  paddingLeft: _ref2 => {
+  paddingLeft: _ref4 => {
     let {
       iconPadding
-    } = _ref2;
+    } = _ref4;
     return `${iconPadding}px`;
   },
-  paddingRight: _ref3 => {
+  paddingRight: _ref5 => {
     let {
       iconPadding
-    } = _ref3;
+    } = _ref5;
     return `${iconPadding}px`;
   },
-  fontFamily: _ref4 => {
+  fontFamily: _ref6 => {
     let {
       fontName,
       fontWeight
-    } = _ref4;
+    } = _ref6;
     return (0, _componentsBase.applyTextStyles)({
       fontName,
       fontWeight
     }).fontFamily;
+  },
+  height: _ref7 => {
+    let {
+      iconContainerSize
+    } = _ref7;
+    return `${iconContainerSize}px`;
+  },
+  width: _ref8 => {
+    let {
+      iconContainerSize,
+      iconPadding
+    } = _ref8;
+    return `${iconContainerSize + iconPadding * 2}px`;
   }
 });
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
   let {
     href,
     children,
@@ -68,7 +95,7 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     LinkRouter,
     linkRouterProps,
     ...rest
-  } = _ref5;
+  } = _ref9;
   const {
     iconColor,
     icon: ChevronRightIcon,
@@ -76,22 +103,30 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     color,
     iconSize,
     fontSize,
-    ...themeTokens
+    fontWeight,
+    fontName,
+    lineHeight,
+    listItemPadding,
+    iconContainerSize,
+    iconPadding
   } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
   const linkOptions = {
     ..._componentsBase.clickProps.toPressProps(selectProps(rest)),
     href
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, {
-    ...themeTokens,
+    listItemPadding: listItemPadding,
+    lineHeight: lineHeight,
+    fontSize: fontSize,
+    iconContainerSize: iconContainerSize,
     children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
         color: currentColor,
-        fontSize
-      },
-      variant: {
-        ...variant
+        fontSize,
+        fontWeight,
+        lineHeight
       },
+      variant: variant,
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
@@ -99,14 +134,18 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
         ref: ref,
         tokens: {
           color,
-          blockFontSize: fontSize
+          blockFontSize: fontSize,
+          blockLineHeight: lineHeight
         },
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
-        ...themeTokens,
+        iconPadding: iconPadding,
+        fontName: fontName,
+        fontWeight: fontWeight,
+        iconContainerSize: iconContainerSize,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
           size: iconSize,
           color: iconColor

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
+import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import Item from './Item/Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,9 +20,15 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline'
+  alignItems: 'baseline',
+  height: _ref => {
+    let {
+      iconContainerSize
+    } = _ref;
+    return `${iconContainerSize}px`;
+  }
 });
-const omitProps = _ref => {
+const omitProps = _ref2 => {
   let {
     current,
     path,
@@ -31,7 +37,7 @@ const omitProps = _ref => {
     childRoutes,
     component,
     ...props
-  } = _ref;
+  } = _ref2;
   return props;
 };
 const getBreadcrumbName = (item, params) => {
@@ -94,7 +100,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref2 => {
+const Breadcrumbs = _ref3 => {
   let {
     baseUrl,
     children,
@@ -105,7 +111,7 @@ const Breadcrumbs = _ref2 => {
     variant,
     LinkRouter,
     ...rest
-  } = _ref2;
+  } = _ref3;
   // React Helmet can cause a memory leak in SSR if not properly configured.
   // Only run it in SSR if theme options tells us to.
   /* const {
@@ -115,7 +121,7 @@ const Breadcrumbs = _ref2 => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref3 => {
+  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref4 => {
     let {
       props: {
         href,
@@ -123,7 +129,7 @@ const Breadcrumbs = _ref2 => {
         ...itemRest
       },
       ref
-    } = _ref3;
+    } = _ref4;
     return {
       path: href,
       breadcrumbName,
@@ -132,6 +138,7 @@ const Breadcrumbs = _ref2 => {
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
   const items = getItems(activeRoutes, params, !children);
+  const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant);
   const metadata = /*#__PURE__*/_jsx(HelmetProvider, {
     context: helmetContext,
     children: /*#__PURE__*/_jsx(Helmet, {
@@ -151,7 +158,8 @@ const Breadcrumbs = _ref2 => {
     "aria-label": "Breadcrumb",
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledList, {
-      children: items.map(_ref4 => {
+      iconContainerSize: themeTokens.iconContainerSize,
+      children: items.map(_ref5 => {
         let {
           href,
           current,
@@ -159,7 +167,7 @@ const Breadcrumbs = _ref2 => {
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
-        } = _ref4;
+        } = _ref5;
         return /*#__PURE__*/_createElement(Item, {
           ...itemRest,
           current: current,

package/lib-module/Breadcrumbs/Item/Item.js

@@ -17,38 +17,65 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
       listItemPadding
     } = _ref;
     return `${listItemPadding}px`;
+  },
+  lineHeight: _ref2 => {
+    let {
+      lineHeight,
+      fontSize
+    } = _ref2;
+    return `${Math.ceil(lineHeight * fontSize)}px`;
+  },
+  height: _ref3 => {
+    let {
+      iconContainerSize
+    } = _ref3;
+    return `${iconContainerSize}px`;
   }
 });
 const IconContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
-  display: 'inline-flex',
+  display: 'flex',
+  justifyContent: 'center',
   alignItems: 'center',
-  paddingLeft: _ref2 => {
+  paddingLeft: _ref4 => {
     let {
       iconPadding
-    } = _ref2;
+    } = _ref4;
     return `${iconPadding}px`;
   },
-  paddingRight: _ref3 => {
+  paddingRight: _ref5 => {
     let {
       iconPadding
-    } = _ref3;
+    } = _ref5;
     return `${iconPadding}px`;
   },
-  fontFamily: _ref4 => {
+  fontFamily: _ref6 => {
     let {
       fontName,
       fontWeight
-    } = _ref4;
+    } = _ref6;
     return applyTextStyles({
       fontName,
       fontWeight
     }).fontFamily;
+  },
+  height: _ref7 => {
+    let {
+      iconContainerSize
+    } = _ref7;
+    return `${iconContainerSize}px`;
+  },
+  width: _ref8 => {
+    let {
+      iconContainerSize,
+      iconPadding
+    } = _ref8;
+    return `${iconContainerSize + iconPadding * 2}px`;
   }
 });
-const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const Item = /*#__PURE__*/forwardRef((_ref9, ref) => {
   let {
     href,
     children,
@@ -61,7 +88,7 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
     LinkRouter,
     linkRouterProps,
     ...rest
-  } = _ref5;
+  } = _ref9;
   const {
     iconColor,
     icon: ChevronRightIcon,
@@ -69,22 +96,30 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
     color,
     iconSize,
     fontSize,
-    ...themeTokens
+    fontWeight,
+    fontName,
+    lineHeight,
+    listItemPadding,
+    iconContainerSize,
+    iconPadding
   } = useThemeTokens('Breadcrumbs', tokens, variant);
   const linkOptions = {
     ...clickProps.toPressProps(selectProps(rest)),
     href
   };
   return /*#__PURE__*/_jsx(StyledItemContainer, {
-    ...themeTokens,
+    listItemPadding: listItemPadding,
+    lineHeight: lineHeight,
+    fontSize: fontSize,
+    iconContainerSize: iconContainerSize,
     children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color: currentColor,
-        fontSize
-      },
-      variant: {
-        ...variant
+        fontSize,
+        fontWeight,
+        lineHeight
       },
+      variant: variant,
       children: children
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(Link, {
@@ -92,14 +127,18 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
         ref: ref,
         tokens: {
           color,
-          blockFontSize: fontSize
+          blockFontSize: fontSize,
+          blockLineHeight: lineHeight
         },
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
       }), /*#__PURE__*/_jsx(IconContainer, {
-        ...themeTokens,
+        iconPadding: iconPadding,
+        fontName: fontName,
+        fontWeight: fontWeight,
+        iconContainerSize: iconContainerSize,
         children: /*#__PURE__*/_jsx(ChevronRightIcon, {
           size: iconSize,
           color: iconColor

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.77.0",
+    "@telus-uds/components-base": "1.78.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.51.0",
+    "@telus-uds/system-theme-tokens": "^2.52.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.31.1"
+  "version": "2.31.3"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -9,7 +9,8 @@ import {
   selectSystemProps,
   unpackFragment,
   withLinkRouter,
-  getTokensPropType
+  getTokensPropType,
+  useThemeTokens
 } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import Item from './Item/Item'
@@ -24,7 +25,8 @@ const StyledList = styled.ol({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline'
+  alignItems: 'baseline',
+  height: ({ iconContainerSize }) => `${iconContainerSize}px`
 })
 
 const omitProps = ({
@@ -135,6 +137,7 @@ const Breadcrumbs = ({
     : routes.filter((route) => route.path && route.breadcrumbName)
 
   const items = getItems(activeRoutes, params, !children)
+  const themeTokens = useThemeTokens('Breadcrumbs', tokens, variant)
 
   const metadata = (
     <HelmetProvider context={helmetContext}>
@@ -154,7 +157,7 @@ const Breadcrumbs = ({
 
   return (
     <nav aria-label="Breadcrumb" {...selectProps(rest)}>
-      <StyledList>
+      <StyledList iconContainerSize={themeTokens.iconContainerSize}>
         {items.map(
           ({
             href,

package/src/Breadcrumbs/Item/Item.jsx

@@ -15,15 +15,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledItemContainer = styled.li({
   display: 'flex',
-  paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`
+  paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
+  lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
+  height: ({ iconContainerSize }) => `${iconContainerSize}px`
 })
 
 const IconContainer = styled.span({
-  display: 'inline-flex',
+  display: 'flex',
+  justifyContent: 'center',
   alignItems: 'center',
   paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
   paddingRight: ({ iconPadding }) => `${iconPadding}px`,
-  fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily
+  fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily,
+  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
+  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`
 })
 
 const Item = forwardRef(
@@ -47,15 +52,33 @@ const Item = forwardRef(
       color,
       iconSize,
       fontSize,
-      ...themeTokens
+      fontWeight,
+      fontName,
+      lineHeight,
+      listItemPadding,
+      iconContainerSize,
+      iconPadding
     } = useThemeTokens('Breadcrumbs', tokens, variant)
 
     const linkOptions = { ...clickProps.toPressProps(selectProps(rest)), href }
 
     return (
-      <StyledItemContainer {...themeTokens}>
+      <StyledItemContainer
+        listItemPadding={listItemPadding}
+        lineHeight={lineHeight}
+        fontSize={fontSize}
+        iconContainerSize={iconContainerSize}
+      >
         {current ? (
-          <Typography tokens={{ color: currentColor, fontSize }} variant={{ ...variant }}>
+          <Typography
+            tokens={{
+              color: currentColor,
+              fontSize,
+              fontWeight,
+              lineHeight
+            }}
+            variant={variant}
+          >
             {children}
           </Typography>
         ) : (
@@ -63,14 +86,19 @@ const Item = forwardRef(
             <Link
               {...linkOptions}
               ref={ref}
-              tokens={{ color, blockFontSize: fontSize }}
+              tokens={{ color, blockFontSize: fontSize, blockLineHeight: lineHeight }}
               LinkRouter={LinkRouter}
               linkRouterProps={linkRouterProps}
               variant={variant}
             >
               {children}
             </Link>
-            <IconContainer {...themeTokens}>
+            <IconContainer
+              iconPadding={iconPadding}
+              fontName={fontName}
+              fontWeight={fontWeight}
+              iconContainerSize={iconContainerSize}
+            >
               <ChevronRightIcon size={iconSize} color={iconColor} />
             </IconContainer>
           </>