@telus-uds/components-base 1.38.0 → 1.39.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 27 Apr 2023 14:32:16 GMT and should not be manually modified.
+This log was last generated on Mon, 01 May 2023 22:02:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.39.0
+
+Mon, 01 May 2023 22:02:12 GMT
+
+### Minor changes
+
+- added adjustments to IconText (kyle.king2@telus.com)
+- list component standardization (akshay.pandey1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.24.0
+
 ## 1.38.0
 
-Thu, 27 Apr 2023 14:32:16 GMT
+Thu, 27 Apr 2023 14:41:57 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -414,7 +414,7 @@
         "labelMarginLeft": "size"
       },
       "ChevronLink": {
-        "height": "size",
+        "fontSize": "fontSize",
         "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
@@ -1360,9 +1360,7 @@
         "animationColorBefore": "color",
         "animationColorAfter": "color",
         "animationDivColorBefore": "color",
-        "animationDivColorAfter": "color",
-        "animationFillColorBefore": "color",
-        "animationFillColorAfter": "color"
+        "animationDivColorAfter": "color"
       },
       "ToggleSwitch": {
         "borderColor": "color",
@@ -12810,10 +12808,14 @@
             "description": ""
           },
           "tokens": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
             "type": {
               "name": "custom",
               "raw": {
-                "height": "size",
+                "fontSize": "fontSize",
                 "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",

package/lib/Link/ChevronLink.js

@@ -33,7 +33,7 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     direction = 'right',
     children,
-    tokens,
+    tokens = {},
     variant,
     dataSet,
     ...linkProps
@@ -47,10 +47,13 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       iconDisplace,
       height,
       textLineHeight,
+      fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
-    return { ...(0, _utils.selectTokens)('Link', otherTokens),
+    const linkTokens = (0, _utils.selectTokens)('Link', otherTokens);
+    return { ...linkTokens,
       height,
+      blockFontSize: tokens.fontSize ?? fontSize,
       textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0

package/lib/Link/LinkBase.js

@@ -204,15 +204,10 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const {
-        height,
-        ...themeTokens
-      } = resolveLinkTokens(linkState);
+      const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [height ? {
-        height
-      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -278,7 +273,7 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'center'
+    alignSelf: 'baseline'
   }
 });
 

package/lib/List/ListItem.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 
-var _Typography = _interopRequireDefault(require("../Typography"));
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -35,17 +33,12 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...listItemProps
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      variant: {
-        size: 'h4',
-        bold: true
-      },
-      children: title
-    }), children]
+    title: title,
+    children: children
   });
 });
 ListItem.displayName = 'ListItem';

package/lib/List/ListItemBase.js

@@ -21,6 +21,8 @@ var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
 
 var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
 
+var _Typography = _interopRequireDefault(require("../Typography"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -66,6 +68,7 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     iconSize,
     showDivider,
     children,
+    title,
     isLastItem,
     accessibilityRole = _Platform.default.select({
       web: 'listitem',
@@ -105,15 +108,30 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       iconColor,
       iconSize,
       isLastItem
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [{
+        flexDirection: 'row',
+        flex: 'wrap'
+      }, !title && {
+        alignItems: 'center'
+      }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
         tokens: tokens,
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
-        tokens: tokens,
-        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.titleAndContentContainer,
+        children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4',
+            bold: true
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+          tokens: tokens,
+          children: children
+        })]
       })]
     })
   });
@@ -123,6 +141,9 @@ ListItemBase.displayName = 'ListItem';
 const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row'
+  },
+  titleAndContentContainer: {
+    flexDirection: 'column'
   }
 });
 

package/lib-module/Link/ChevronLink.js

@@ -15,7 +15,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     direction = 'right',
     children,
-    tokens,
+    tokens = {},
     variant,
     dataSet,
     ...linkProps
@@ -29,10 +29,13 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       iconDisplace,
       height,
       textLineHeight,
+      fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
-    return { ...selectTokens('Link', otherTokens),
+    const linkTokens = selectTokens('Link', otherTokens);
+    return { ...linkTokens,
       height,
+      blockFontSize: tokens.fontSize ?? fontSize,
       textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0

package/lib-module/Link/LinkBase.js

@@ -176,15 +176,10 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const {
-        height,
-        ...themeTokens
-      } = resolveLinkTokens(linkState);
+      const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [height ? {
-        height
-      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -249,7 +244,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'center'
+    alignSelf: 'baseline'
   }
 });
 export default withLinkRouter(LinkBase);

package/lib-module/List/ListItem.js

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import ListItemBase from './ListItemBase';
-import Typography from '../Typography';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
 /**
@@ -8,7 +7,6 @@ import { variantProp } from '../utils';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
@@ -18,17 +16,12 @@ const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...listItemProps
   } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  return /*#__PURE__*/_jsxs(ListItemBase, {
+  return /*#__PURE__*/_jsx(ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'h4',
-        bold: true
-      },
-      children: title
-    }), children]
+    title: title,
+    children: children
   });
 });
 ListItem.displayName = 'ListItem';

package/lib-module/List/ListItemBase.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import ListItemContent from './ListItemContent';
 import ListItemMark from './ListItemMark';
+import Typography from '../Typography';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
@@ -46,6 +46,7 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
     iconSize,
     showDivider,
     children,
+    title,
     isLastItem,
     accessibilityRole = Platform.select({
       web: 'listitem',
@@ -85,15 +86,30 @@ const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
       iconColor,
       iconSize,
       isLastItem
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: [{
+        flexDirection: 'row',
+        flex: 'wrap'
+      }, !title && {
+        alignItems: 'center'
+      }],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: tokens,
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize
-      }), /*#__PURE__*/_jsx(ListItemContent, {
-        tokens: tokens,
-        children: children
+      }), /*#__PURE__*/_jsxs(View, {
+        style: staticStyles.titleAndContentContainer,
+        children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4',
+            bold: true
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(ListItemContent, {
+          tokens: tokens,
+          children: children
+        })]
       })]
     })
   });
@@ -102,6 +118,9 @@ ListItemBase.displayName = 'ListItem';
 const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
+  },
+  titleAndContentContainer: {
+    flexDirection: 'column'
   }
 });
 ListItemBase.propTypes = { ...selectedSystemPropTypes,

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.23.0",
+    "@telus-uds/system-theme-tokens": "^2.24.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.38.0"
+  "version": "1.39.0"
 }

package/src/Link/ChevronLink.jsx

@@ -12,14 +12,24 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...linkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const { leftIcon, rightIcon, iconDisplace, height, textLineHeight, ...otherTokens } =
-        getChevronTokens(linkState)
+      const {
+        leftIcon,
+        rightIcon,
+        iconDisplace,
+        height,
+        textLineHeight,
+        fontSize,
+        ...otherTokens
+      } = getChevronTokens(linkState)
+      const linkTokens = selectTokens('Link', otherTokens)
+
       return {
-        ...selectTokens('Link', otherTokens),
+        ...linkTokens,
         height,
+        blockFontSize: tokens.fontSize ?? fontSize,
         textLineHeight,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0

package/src/Link/LinkBase.jsx

@@ -150,12 +150,11 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
-          const { height, ...themeTokens } = resolveLinkTokens(linkState)
+          const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
 
           return [
-            height ? { height } : {},
             outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
@@ -226,7 +225,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'center'
+    alignSelf: 'baseline'
   }
 })
 

package/src/List/ListItem.jsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react'
 
 import ListItemBase from './ListItemBase'
-import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { variantProp } from '../utils'
 
@@ -11,8 +10,7 @@ import { variantProp } from '../utils'
 const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
-    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
-      {Boolean(title) && <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>}
+    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps} title={title}>
       {children}
     </ListItemBase>
   )

package/src/List/ListItemBase.jsx

@@ -5,6 +5,7 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
+import Typography from '../Typography'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -31,6 +32,7 @@ const ListItemBase = forwardRef(
       iconSize,
       showDivider,
       children,
+      title,
       isLastItem,
       accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
       ...rest
@@ -69,10 +71,23 @@ const ListItemBase = forwardRef(
         {typeof children === 'function' ? (
           children({ tokens, icon, iconColor, iconSize, isLastItem })
         ) : (
-          <>
+          <View
+            style={[
+              {
+                flexDirection: 'row',
+                flex: 'wrap'
+              },
+              !title && { alignItems: 'center' }
+            ]}
+          >
             <ListItemMark tokens={tokens} icon={icon} iconColor={iconColor} iconSize={iconSize} />
-            <ListItemContent tokens={tokens}>{children}</ListItemContent>
-          </>
+            <View style={staticStyles.titleAndContentContainer}>
+              {Boolean(title) && (
+                <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>
+              )}
+              <ListItemContent tokens={tokens}>{children}</ListItemContent>
+            </View>
+          </View>
         )}
       </View>
     )
@@ -83,7 +98,8 @@ ListItemBase.displayName = 'ListItem'
 const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
-  }
+  },
+  titleAndContentContainer: { flexDirection: 'column' }
 })
 
 ListItemBase.propTypes = {