@telus-uds/components-base 1.34.2 → 1.36.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 19 Apr 2023 11:24:21 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Apr 2023 19:05:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.36.0
+
+Thu, 20 Apr 2023 19:05:54 GMT
+
+### Minor changes
+
+- added adjustments to IconText (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.21.0
+
+### Patches
+
+- dependency version fix (srikanthkhari@gmail.com)
+
+## 1.35.0
+
+Wed, 19 Apr 2023 18:49:51 GMT
+
+### Minor changes
+
+- Add Flex tokens to Card Content (carlos.jeronimo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.20.0
+
 ## 1.34.2
 
-Wed, 19 Apr 2023 11:24:21 GMT
+Wed, 19 Apr 2023 11:32:31 GMT
 
 ### Patches
 

package/component-docs.json

@@ -36,6 +36,11 @@
       "Image": {
         "borderRadius": "radius"
       },
+      "Spinner": {
+        "fullScreenOverLayBackground": "color",
+        "size": "size",
+        "thickness": "border"
+      },
       "Callout": {
         "background": "color",
         "gap": "size",
@@ -234,7 +239,11 @@
         "paddingRight": "size",
         "paddingTop": "size",
         "minWidth": "size",
-        "shadow": "shadow"
+        "shadow": "shadow",
+        "contentAlignItems": "flexAlign",
+        "contentJustifyContent": "flexJustifyContent",
+        "contentFlexGrow": "integer",
+        "contentFlexShrink": "integer"
       },
       "PreviewCard": {
         "flex": "integer",
@@ -315,6 +324,8 @@
         "labelMarginLeft": "size"
       },
       "ChevronLink": {
+        "height": "size",
+        "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
         "leftIcon": "icon",
@@ -813,6 +824,10 @@
         "paddingTop": "size",
         "minWidth": "size",
         "shadow": "shadow",
+        "contentAlignItems": "flexAlign",
+        "contentJustifyContent": "flexJustifyContent",
+        "contentFlexGrow": "integer",
+        "contentFlexShrink": "integer",
         "radioCheckedBackgroundColor": "color",
         "radioCheckedSize": "size",
         "radioInputBackgroundColor": "color",
@@ -3264,7 +3279,11 @@
                 "paddingRight": "size",
                 "paddingTop": "size",
                 "minWidth": "size",
-                "shadow": "shadow"
+                "shadow": "shadow",
+                "contentAlignItems": "flexAlign",
+                "contentJustifyContent": "flexJustifyContent",
+                "contentFlexGrow": "integer",
+                "contentFlexShrink": "integer"
               }
             },
             "required": false,
@@ -6947,7 +6966,11 @@
                 "paddingRight": "size",
                 "paddingTop": "size",
                 "minWidth": "size",
-                "shadow": "shadow"
+                "shadow": "shadow",
+                "contentAlignItems": "flexAlign",
+                "contentJustifyContent": "flexJustifyContent",
+                "contentFlexGrow": "integer",
+                "contentFlexShrink": "integer"
               }
             },
             "required": false,
@@ -7556,6 +7579,10 @@
                 "paddingTop": "size",
                 "minWidth": "size",
                 "shadow": "shadow",
+                "contentAlignItems": "flexAlign",
+                "contentJustifyContent": "flexJustifyContent",
+                "contentFlexGrow": "integer",
+                "contentFlexShrink": "integer",
                 "radioCheckedBackgroundColor": "color",
                 "radioCheckedSize": "size",
                 "radioInputBackgroundColor": "color",
@@ -12420,6 +12447,8 @@
             "type": {
               "name": "custom",
               "raw": {
+                "height": "size",
+                "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",
                 "leftIcon": "icon",
@@ -12501,6 +12530,39 @@
             "required": false,
             "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
           },
+          "iconProps": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "type": {
+              "name": "exact",
+              "value": {
+                "variant": {
+                  "name": "custom",
+                  "raw": "variantProp.propType",
+                  "required": false
+                },
+                "tokens": {
+                  "name": "custom",
+                  "raw": "getTokensPropType('Icon')",
+                  "required": false
+                },
+                "accessibilityLabel": {
+                  "name": "string",
+                  "description": "Descriptive label used in web SVG title tag for accessibility",
+                  "required": false
+                },
+                "scalesWithText": {
+                  "name": "bool",
+                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Optional variant that may be passed down to the link's icon if there is one"
+          },
           "tokens": {
             "defaultValue": {
               "value": "{}",
@@ -12560,35 +12622,6 @@
             "required": false,
             "description": ""
           },
-          "iconProps": {
-            "type": {
-              "name": "exact",
-              "value": {
-                "variant": {
-                  "name": "custom",
-                  "raw": "variantProp.propType",
-                  "required": false
-                },
-                "tokens": {
-                  "name": "custom",
-                  "raw": "getTokensPropType('Icon')",
-                  "required": false
-                },
-                "accessibilityLabel": {
-                  "name": "string",
-                  "description": "Descriptive label used in web SVG title tag for accessibility",
-                  "required": false
-                },
-                "scalesWithText": {
-                  "name": "bool",
-                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "Optional variant that may be passed down to the link's icon if there is one"
-          },
           "icon": {
             "type": {
               "name": "elementType"
@@ -13018,6 +13051,10 @@
                 "paddingTop": "size",
                 "minWidth": "size",
                 "shadow": "shadow",
+                "contentAlignItems": "flexAlign",
+                "contentJustifyContent": "flexJustifyContent",
+                "contentFlexGrow": "integer",
+                "contentFlexShrink": "integer",
                 "radioCheckedBackgroundColor": "color",
                 "radioCheckedSize": "size",
                 "radioInputBackgroundColor": "color",

package/lib/Icon/IconText.js

@@ -54,15 +54,25 @@ const IconText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
 
   const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
-  const iconAdjusted = _Platform.default.OS === 'android' && iconContent && size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const iconAdjustedAndriod = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: {
       transform: [{
         translateY: size * 0.2
       }]
     },
     children: iconContent
-  }) : iconContent;
-  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+  });
+  const iconAdjustedIOS = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      transform: [{
+        translateY: size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+  const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
+  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
   });

package/lib/IconButton/IconButton.js

@@ -152,7 +152,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
 
 const staticStyles = _StyleSheet.default.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 });
 

package/lib/Link/ChevronLink.js

@@ -45,9 +45,13 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       leftIcon,
       rightIcon,
       iconDisplace,
+      height,
+      textLineHeight,
       ...otherTokens
     } = getChevronTokens(linkState);
     return { ...(0, _utils.selectTokens)('Link', otherTokens),
+      height,
+      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib/Link/LinkBase.js

@@ -62,10 +62,16 @@ const selectOuterBorderStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLineHeight,
+    blockFontSize
   } = _ref2;
   return {
     color,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      lineHeight: textLineHeight,
+      blockFontSize
+    }),
     ..._Platform.default.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -83,9 +89,9 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockFontName
   } = _ref3;
   return (0, _ThemeProvider.applyTextStyles)({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   });
@@ -153,7 +159,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     href,
     icon,
     iconPosition = icon ? 'left' : undefined,
-    iconProps,
+    iconProps = {},
     variant,
     tokens = {},
     children,
@@ -198,10 +204,15 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const themeTokens = resolveLinkTokens(linkState);
+      const {
+        height,
+        ...themeTokens
+      } = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [height ? {
+        height
+      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -267,7 +278,7 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'baseline'
+    alignSelf: 'center'
   }
 });
 

package/lib-module/Icon/IconText.js

@@ -36,15 +36,28 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
 
 
   const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
-  const iconAdjusted = Platform.OS === 'android' && iconContent && size ? /*#__PURE__*/_jsx(View, {
+
+  const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
         translateY: size * 0.2
       }]
     },
     children: iconContent
-  }) : iconContent;
-  return getStackedContent(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+  });
+
+  const iconAdjustedIOS = /*#__PURE__*/_jsx(View, {
+    style: {
+      transform: [{
+        translateY: size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+
+  const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
+  return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
   });

package/lib-module/IconButton/IconButton.js

@@ -126,7 +126,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
 };
 const staticStyles = StyleSheet.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 });
 export default withLinkRouter(IconButton);

package/lib-module/Link/ChevronLink.js

@@ -27,9 +27,13 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftIcon,
       rightIcon,
       iconDisplace,
+      height,
+      textLineHeight,
       ...otherTokens
     } = getChevronTokens(linkState);
     return { ...selectTokens('Link', otherTokens),
+      height,
+      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib-module/Link/LinkBase.js

@@ -37,10 +37,16 @@ const selectOuterBorderStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLineHeight,
+    blockFontSize
   } = _ref2;
   return {
     color,
+    ...applyTextStyles({
+      lineHeight: textLineHeight,
+      blockFontSize
+    }),
     ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -58,9 +64,9 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockFontName
   } = _ref3;
   return applyTextStyles({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   });
@@ -128,7 +134,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     href,
     icon,
     iconPosition = icon ? 'left' : undefined,
-    iconProps,
+    iconProps = {},
     variant,
     tokens = {},
     children,
@@ -170,10 +176,15 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const themeTokens = resolveLinkTokens(linkState);
+      const {
+        height,
+        ...themeTokens
+      } = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [height ? {
+        height
+      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -238,7 +249,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'baseline'
+    alignSelf: 'center'
   }
 });
 export default withLinkRouter(LinkBase);

package/package.json

@@ -11,13 +11,13 @@
     "@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.19.0",
+    "@telus-uds/system-theme-tokens": "^2.21.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
     "react-native-picker-select": "^8.0.4",
-    "semver": "^7.3.5"
+    "semver": "7.3.5"
   },
   "description": "Base components",
   "devDependencies": {
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.34.2"
+  "version": "1.36.0"
 }

package/src/Icon/IconText.jsx

@@ -23,15 +23,19 @@ const IconText = forwardRef(
     // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
     // See abandoned issue https://github.com/facebook/react-native/issues/6529
     const size = iconProps?.tokens?.size
-    const iconAdjusted =
-      Platform.OS === 'android' && iconContent && size ? (
-        <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
-      ) : (
-        iconContent
-      )
+    const iconAdjustedAndriod = (
+      <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
+    )
+
+    const iconAdjustedIOS = (
+      <View style={{ transform: [{ translateY: size * 0.01 }] }}>{iconContent}</View>
+    )
+
+    const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS
+    const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
     return getStackedContent(
-      iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted],
+      iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer],
       { space, direction: 'row' }
     )
   }

package/src/IconButton/IconButton.jsx

@@ -115,7 +115,7 @@ IconButton.propTypes = {
 
 const staticStyles = StyleSheet.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 })
 

package/src/Link/ChevronLink.jsx

@@ -15,9 +15,12 @@ const ChevronLink = forwardRef(
   ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
+      const { leftIcon, rightIcon, iconDisplace, height, textLineHeight, ...otherTokens } =
+        getChevronTokens(linkState)
       return {
         ...selectTokens('Link', otherTokens),
+        height,
+        textLineHeight,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
       }

package/src/Link/LinkBase.jsx

@@ -42,24 +42,27 @@ const selectOuterBorderStyles = ({
       }
     : {}
 
-const selectTextStyles = ({ color }) => ({
-  color,
-  ...Platform.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-})
+const selectTextStyles = ({ color, textLineHeight, blockFontSize }) => {
+  return {
+    color,
+    ...applyTextStyles({ lineHeight: textLineHeight, blockFontSize }),
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  }
+}
 
 const selectBlockStyles = (
   { blockFontWeight, blockFontSize, blockLineHeight, blockFontName },
   themeOptions
 ) =>
   applyTextStyles({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   })
@@ -111,7 +114,7 @@ const LinkBase = forwardRef(
       href,
       icon,
       iconPosition = icon ? 'left' : undefined,
-      iconProps,
+      iconProps = {},
       variant,
       tokens = {},
       children,
@@ -147,11 +150,12 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
-          const themeTokens = resolveLinkTokens(linkState)
+          const { height, ...themeTokens } = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
 
           return [
+            height ? { height } : {},
             outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
@@ -222,7 +226,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'baseline'
+    alignSelf: 'center'
   }
 })