@telus-uds/components-web 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 21 Jun 2023 20:33:00 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Jun 2023 23:16:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.12.0
+
+Wed, 28 Jun 2023 23:16:56 GMT
+
+### Minor changes
+
+- Fixed an issue where FootnoteLink had a default property value which was being applied as 'smallerpx' instead of the intended 'smaller' (kyle.king2@telus.com)
+- Gradient token added to Card component (35577399+JoshHC@users.noreply.github.com)
+- added function to select link tokens from themeTokens (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.53.0
+- Bump @telus-uds/system-theme-tokens to v2.36.0
+
+### Patches
+
+- May not be able to focus `ChevronLink` for `theme-allium` (shahzaibkhalidmalik@outlook.com)
+
 ## 2.11.0
 
-Wed, 21 Jun 2023 20:33:00 GMT
+Wed, 21 Jun 2023 20:40:42 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -522,6 +522,7 @@
               "flex": "integer",
               "backgroundColor": "color",
               "borderColor": "color",
+              "gradient": "gradient",
               "borderRadius": "radius",
               "borderWidth": "border",
               "paddingBottom": "size",
@@ -1067,11 +1068,14 @@
             },
             "required": false
           },
-          "fontSize": {
-            "defaultValue": {
-              "value": "'smaller'",
-              "computed": false
+          "onClick": {
+            "type": {
+              "name": "func"
             },
+            "required": true,
+            "description": "A callback function to handle the click of a FootnoteLink."
+          },
+          "fontSize": {
             "type": {
               "name": "union",
               "value": [
@@ -1085,13 +1089,6 @@
             },
             "required": false,
             "description": "Override default `fontSize` to set specific font size value"
-          },
-          "onClick": {
-            "type": {
-              "name": "func"
-            },
-            "required": true,
-            "description": "A callback function to handle the click of a FootnoteLink."
           }
         },
         "attributes": {}
@@ -2362,6 +2359,55 @@
           },
           "required": false,
           "description": "To provide a11y text for `PriceLockup` component\n\n**Note:** a11yText will override strikethrough price, so it must include price (ie. \"was 50 dollars per month\")"
+        },
+        "tokens": {
+          "type": {
+            "name": "custom",
+            "raw": {
+              "fontName": "fontName",
+              "fontWeight": "fontWeight",
+              "footnoteMarginTop": "size",
+              "footnoteGap": "size",
+              "bottomTextMarginTop": "size",
+              "priceMarginBottom": "size",
+              "bottomLinksMarginLeft": "size",
+              "topTextMarginBottom": "size",
+              "strikeThroughHeight": "size",
+              "strikeThroughColor": "color",
+              "fontColor": "color",
+              "dividerColor": "color",
+              "topTextFontSize": "fontSize",
+              "strikeThroughPosition": "size",
+              "topTextLineHeight": "lineHeight",
+              "currencySymbolFontSize": "fontSize",
+              "currencySymbolLineHeight": "lineHeight",
+              "currencySymbolFontName": "fontName",
+              "currencySymbolFontWeight": "fontWeight",
+              "amountFontSize": "fontSize",
+              "amountLineHeight": "lineHeight",
+              "amountLetterSpacing": "letterSpacing",
+              "amountFontWeight": "fontWeight",
+              "amountFontName": "fontName",
+              "centsFontSize": "fontSize",
+              "centsLineHeight": "lineHeight",
+              "centsFontName": "fontName",
+              "centsFontWeight": "fontWeight",
+              "topTextFontName": "fontName",
+              "topTextFontWeight": "fontWeight",
+              "rateFontSize": "fontSize",
+              "rateLineHeight": "lineHeight",
+              "rateFontName": "fontName",
+              "rateFontWeight": "fontWeight",
+              "bottomTextFontSize": "fontSize",
+              "bottomTextLineHeight": "lineHeight",
+              "footnoteLinkColor": "color",
+              "footnoteLinkFontName": "fontName",
+              "footnoteLinkFontWeight": "fontWeight",
+              "footnoteLinkFontSize": "fontSize"
+            }
+          },
+          "required": false,
+          "description": "`PriceLockup` tokens"
         }
       },
       "attributes": {}
@@ -9118,6 +9164,7 @@
               "flex": "integer",
               "backgroundColor": "color",
               "borderColor": "color",
+              "gradient": "gradient",
               "borderRadius": "radius",
               "borderWidth": "border",
               "paddingBottom": "size",
@@ -12742,7 +12789,10 @@
               "paddingBottom": "size",
               "shadow": "shadow",
               "alignSelf": "flexAlign",
+              "space": "integer",
               "icon": "icon",
+              "trackHeight": "size",
+              "outerBorderGapButton": "size",
               "width": "size",
               "trackBorderWidth": "border",
               "trackBorderColor": "color",
@@ -13068,7 +13118,10 @@
               "paddingBottom": "size",
               "shadow": "shadow",
               "alignSelf": "flexAlign",
+              "space": "integer",
               "icon": "icon",
+              "trackHeight": "size",
+              "outerBorderGapButton": "size",
               "width": "size",
               "trackBorderWidth": "border",
               "trackBorderColor": "color",

package/lib/Card/Card.js

@@ -30,6 +30,7 @@ const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,
@@ -38,6 +39,7 @@ const selectCardBaseTokens = _ref => {
   return {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -28,12 +28,6 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const {
-    variant
-  } = rest;
-  const {
-    borderWidth
-  } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMini', tokens, variant);
 
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
@@ -43,9 +37,6 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
-    tokens: {
-      borderWidth
-    },
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -53,7 +44,11 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         mini: true
       },
       controlTokens: {
-        icon: null
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -29,7 +29,22 @@ const presentationOnly = {
 
 };
 
-const ExpandCollapseMiniControl = _ref => {
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+
+const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
     collapseTitle,
@@ -38,16 +53,25 @@ const ExpandCollapseMiniControl = _ref => {
     tokens,
     variant = {},
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     expanded,
-    hover
-  } = pressableState || {};
+    hover,
+    focus
+  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
+
+  const {
+    outerBorderColor
+  } = (0, _componentsBase.useThemeTokens)('Link', {}, {}, {
+    focus
+  });
   const {
     size,
-    icon
+    icon,
+    ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
-    expanded
+    expanded,
+    focus
   }); // Choose hover styles when any part of Control is hoverred
 
   const appearance = { ...variant,
@@ -75,7 +99,8 @@ const ExpandCollapseMiniControl = _ref => {
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({ ...getTokens(linkState),
-      outerBorderWidth: 0
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
     }),
     ...presentationOnly,
     ...selectProps(rest),

package/lib/Footnote/FootnoteLink.js

@@ -140,8 +140,7 @@ FootnoteLink.propTypes = { ...selectedSystemPropTypes,
   fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 };
 var _default = FootnoteLink;
 exports.default = _default;

package/lib/PriceLockup/PriceLockup.js

@@ -316,7 +316,12 @@ PriceLockup.propTypes = { ...selectedSystemPropTypes,
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: _propTypes.default.string
+  a11yText: _propTypes.default.string,
+
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
 };
 var _default = PriceLockup;
 exports.default = _default;

package/lib-module/Card/Card.js

@@ -12,6 +12,7 @@ const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,
@@ -20,6 +21,7 @@ const selectCardBaseTokens = _ref => {
   return {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse, useThemeTokens } from '@telus-uds/components-base';
+import { ExpandCollapse } from '@telus-uds/components-base';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -10,12 +10,6 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const {
-    variant
-  } = rest;
-  const {
-    borderWidth
-  } = useThemeTokens('ExpandCollapseMini', tokens, variant);
 
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
@@ -25,9 +19,6 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   return /*#__PURE__*/_jsx(ExpandCollapse, {
-    tokens: {
-      borderWidth
-    },
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -35,7 +26,11 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
         mini: true
       },
       controlTokens: {
-        icon: null
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,

package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -15,7 +15,22 @@ const presentationOnly = {
 
 };
 
-const ExpandCollapseMiniControl = _ref => {
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+
+const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
     collapseTitle,
@@ -24,16 +39,25 @@ const ExpandCollapseMiniControl = _ref => {
     tokens,
     variant = {},
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     expanded,
-    hover
-  } = pressableState || {};
+    hover,
+    focus
+  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
+
+  const {
+    outerBorderColor
+  } = useThemeTokens('Link', {}, {}, {
+    focus
+  });
   const {
     size,
-    icon
+    icon,
+    ...themeTokens
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-    expanded
+    expanded,
+    focus
   }); // Choose hover styles when any part of Control is hoverred
 
   const appearance = { ...variant,
@@ -61,7 +85,8 @@ const ExpandCollapseMiniControl = _ref => {
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({ ...getTokens(linkState),
-      outerBorderWidth: 0
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
     }),
     ...presentationOnly,
     ...selectProps(rest),

package/lib-module/Footnote/FootnoteLink.js

@@ -122,7 +122,6 @@ FootnoteLink.propTypes = { ...selectedSystemPropTypes,
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 };
 export default FootnoteLink;

package/lib-module/PriceLockup/PriceLockup.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
@@ -293,6 +293,11 @@ PriceLockup.propTypes = { ...selectedSystemPropTypes,
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: PropTypes.string
+  a11yText: PropTypes.string,
+
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
 };
 export default PriceLockup;

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.52.0",
+    "@telus-uds/components-base": "1.53.0",
     "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.35.0",
+    "@telus-uds/system-theme-tokens": "^2.36.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.11.0"
+  "version": "2.12.0"
 }

package/src/Card/Card.jsx

@@ -23,18 +23,22 @@ import FullBleedContent, {
 const selectCardBaseTokens = ({
   backgroundColor,
   borderColor,
+  gradient,
   borderWidth,
   borderRadius,
   shadow,
   minWidth
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderRadius,
-  shadow,
-  minWidth
-})
+}) => {
+  return {
+    backgroundColor,
+    borderColor,
+    gradient,
+    borderWidth,
+    borderRadius,
+    shadow,
+    minWidth
+  }
+}
 
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,12 +1,9 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { ExpandCollapse, useThemeTokens } from '@telus-uds/components-base'
+import { ExpandCollapse } from '@telus-uds/components-base'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest }, ref) => {
-  const { variant } = rest
-  const { borderWidth } = useThemeTokens('ExpandCollapseMini', tokens, variant)
-
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0
@@ -15,13 +12,19 @@ const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest },
   }
 
   return (
-    <ExpandCollapse tokens={{ borderWidth }} onChange={handleChange}>
+    <ExpandCollapse onChange={handleChange}>
       {(expandProps) => (
         <ExpandCollapse.Panel
           {...expandProps}
           panelId="ExpandCollapseMiniPanel"
           variant={{ mini: true }}
-          controlTokens={{ icon: null }}
+          controlTokens={{
+            // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+            icon: null,
+            borderColor: 'transparent',
+            textLine: 'none',
+            backgroundColor: 'transparent'
+          }}
           // TODO refactor
           // eslint-disable-next-line react/no-unstable-nested-components
           control={(pressableState) => (

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -13,6 +13,13 @@ const presentationOnly = {
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 }
 
+const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
+  color,
+  textLine,
+  blockLineHeight: lineHeight,
+  blockFontSize: fontSize
+})
+
 const ExpandCollapseMiniControl = ({
   pressableState,
   collapseTitle,
@@ -22,9 +29,15 @@ const ExpandCollapseMiniControl = ({
   variant = {},
   ...rest
 }) => {
-  const { expanded, hover } = pressableState || {}
-
-  const { size, icon } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, { expanded })
+  const { expanded, hover, focus } = pressableState || {}
+  // we only want focus outline when focusing, if user is pressing we don't want the border.
+  const { outerBorderColor } = useThemeTokens('Link', {}, {}, { focus })
+  const { size, icon, ...themeTokens } = useThemeTokens(
+    'ExpandCollapseMiniControl',
+    tokens,
+    variant,
+    { expanded, focus }
+  )
 
   // Choose hover styles when any part of Control is hoverred
   const appearance = { ...variant, hover }
@@ -45,7 +58,11 @@ const ExpandCollapseMiniControl = ({
       variant={appearance}
       icon={icon}
       iconPosition={iconPosition}
-      tokens={(linkState) => ({ ...getTokens(linkState), outerBorderWidth: 0 })}
+      tokens={(linkState) => ({
+        ...getTokens(linkState),
+        ...selectLinkTokens(themeTokens),
+        outerBorderColor
+      })}
       {...presentationOnly}
       {...selectProps(rest)}
     >

package/src/Footnote/FootnoteLink.jsx

@@ -123,8 +123,7 @@ FootnoteLink.propTypes = {
 }
 
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 }
 
 export default FootnoteLink

package/src/PriceLockup/PriceLockup.jsx

@@ -6,7 +6,8 @@ import {
   selectSystemProps,
   Typography,
   useThemeTokens,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import FootnoteLink from '../Footnote/FootnoteLink'
@@ -273,7 +274,11 @@ PriceLockup.propTypes = {
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: PropTypes.string
+  a11yText: PropTypes.string,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
 }
 
 export default PriceLockup