@telus-uds/components-base 1.13.0 → 1.14.2

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 12 Aug 2022 20:14:48 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Aug 2022 19:30:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.14.2
+
+Tue, 23 Aug 2022 19:30:28 GMT
+
+### Patches
+
+- fix: remove extra icons from pagination (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v2.4.0
+
+## 1.14.1
+
+Wed, 17 Aug 2022 20:50:59 GMT
+
+### Patches
+
+- Bump @telus-uds/system-theme-tokens to v2.3.0
+
+## 1.14.0
+
+Wed, 17 Aug 2022 18:45:01 GMT
+
+### Minor changes
+
+- Base notification component improvements (tiagohldb@gmail.com)
+- Allowing icons to the button component (tiagohldb@gmail.com)
+
+### Patches
+
+- fix(propTypes): fix PropTypes for icons (carlos.jeronimo@telus.com)
+
 ## 1.13.0
 
-Fri, 12 Aug 2022 20:14:48 GMT
+Fri, 12 Aug 2022 20:17:12 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -29,6 +29,9 @@
         "paddingBottom": "size",
         "width": "size",
         "minWidth": "size",
+        "iconSize": "size",
+        "iconSpace": "integer",
+        "icon": "icon",
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
@@ -1154,6 +1157,16 @@
             true
           ],
           "type": "state"
+        },
+        "width": {
+          "description": "The width of the modal",
+          "values": [
+            "s",
+            "m",
+            "l",
+            "xl"
+          ],
+          "type": "state"
         }
       },
       "Notification": {
@@ -4696,7 +4709,7 @@
             },
             "icon": {
               "type": {
-                "name": "func"
+                "name": "elementType"
               },
               "required": false,
               "description": "Renders side item icon"
@@ -4867,7 +4880,7 @@
             },
             "icon": {
               "type": {
-                "name": "func"
+                "name": "elementType"
               },
               "required": false,
               "description": "Renders side item icon"
@@ -4960,7 +4973,7 @@
           },
           "icon": {
             "type": {
-              "name": "func"
+              "name": "elementType"
             },
             "required": false,
             "description": "Renders side item icon"
@@ -8152,6 +8165,9 @@
                 "paddingBottom": "size",
                 "width": "size",
                 "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
@@ -8190,6 +8206,59 @@
             "required": false,
             "description": "Function called when the button is pressed. Required unless the button has a href."
           },
+          "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"
+          },
+          "iconPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
+          },
+          "icon": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -8485,6 +8554,9 @@
                 "paddingBottom": "size",
                 "width": "size",
                 "minWidth": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "icon": "icon",
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
@@ -8523,6 +8595,59 @@
             "required": false,
             "description": "Function called when the button is pressed. Required unless the button has a href."
           },
+          "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"
+          },
+          "iconPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
+          },
+          "icon": {
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -9968,7 +10093,7 @@
           },
           "icon": {
             "type": {
-              "name": "func"
+              "name": "elementType"
             },
             "required": false,
             "description": "A valid UDS icon component imported from a UDS palette."
@@ -10215,7 +10340,7 @@
           },
           "icon": {
             "type": {
-              "name": "func"
+              "name": "elementType"
             },
             "required": false,
             "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."

package/lib/Button/ButtonBase.js

@@ -23,6 +23,8 @@ var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
 var _utils = require("../utils");
 
+var _Icon = require("../Icon");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -190,7 +192,18 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   });
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
+const selectItemIconTokens = _ref8 => {
+  let {
+    color,
+    iconSize
+  } = _ref8;
+  return {
+    size: iconSize,
+    color
+  };
+};
+
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
   let {
     id,
     href,
@@ -201,8 +214,11 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
     // alias for inactive
     inactive = disabled,
     selected = false,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
     ...rawRest
-  } = _ref8;
+  } = _ref9;
 
   const {
     onPress,
@@ -241,10 +257,15 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const iconTokens = selectItemIconTokens(themeTokens);
+      const {
+        iconSpace
+      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
       // If in future we support text alignments other than center, add here.
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
+      const IconComponent = icon || themeTokens.icon;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
@@ -255,10 +276,18 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
             transition: 'background-color 200ms, border-color 200ms'
           }
         })],
-        children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
-          textStyles
-        }) : children, {
-          style: textStyles
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: iconSpace,
+          iconProps: { ...iconProps,
+            tokens: iconTokens
+          },
+          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+            textStyles
+          }) : children, {
+            style: textStyles
+          })
         })
       });
     }

package/lib/Button/propTypes.js

@@ -13,6 +13,8 @@ var _props = require("../utils/props");
 
 var _A11yText = _interopRequireDefault(require("../A11yText"));
 
+var _Icon = require("../Icon");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
@@ -46,6 +48,22 @@ const buttonPropTypes = {
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: _propTypes.default.func,
+
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: _propTypes.default.func,
   variant: _props.variantProp.propType
 };
 var _default = buttonPropTypes;

package/lib/Icon/IconText.js

@@ -86,7 +86,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`

package/lib/Link/LinkBase.js

@@ -245,7 +245,7 @@ LinkBase.propTypes = { ...selectedSystemPropTypes,
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.

package/lib/List/ListItem.js

@@ -246,7 +246,7 @@ ListItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Renders side item icon
    */
-  icon: _propTypes.default.func,
+  icon: _propTypes.default.elementType,
 
   /**
    * Will set display icon color

package/lib/Notification/Notification.js

@@ -79,6 +79,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     paddingLeft: dismissButtonGap
   };
 };
+
+const selectContentContainerStyle = maxWidth => ({
+  width: maxWidth || '100%'
+});
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -153,6 +157,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const contentMaxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
 
   if (isDismissed) {
     return null;
@@ -172,30 +177,33 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
 
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: staticStyles.contentContainer,
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectDismissButtonContainerStyles(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+          onPress: onDismissPress,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 });
 Notification.displayName = 'Notification';
@@ -230,9 +238,16 @@ exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 });

package/lib/Pagination/SideButton.js

@@ -33,12 +33,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const selectIconTokens = (_ref, direction) => {
+// We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return (0, _utils.selectTokens)('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -50,7 +60,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -59,7 +69,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const buttonVariant = {
     direction,
@@ -75,7 +85,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -101,11 +111,11 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib-module/Button/ButtonBase.js

@@ -7,6 +7,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
 import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 
@@ -167,7 +168,18 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   });
 };
 
-const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
+const selectItemIconTokens = _ref8 => {
+  let {
+    color,
+    iconSize
+  } = _ref8;
+  return {
+    size: iconSize,
+    color
+  };
+};
+
+const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
   let {
     id,
     href,
@@ -178,8 +190,11 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
     // alias for inactive
     inactive = disabled,
     selected = false,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
     ...rawRest
-  } = _ref8;
+  } = _ref9;
   const {
     onPress,
     ...rest
@@ -216,10 +231,15 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const iconTokens = selectItemIconTokens(themeTokens);
+      const {
+        iconSpace
+      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
       // If in future we support text alignments other than center, add here.
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
+      const IconComponent = icon || themeTokens.icon;
       return /*#__PURE__*/_jsx(View, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
@@ -230,10 +250,18 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
             transition: 'background-color 200ms, border-color 200ms'
           }
         })],
-        children: wrapStringsInText(typeof children === 'function' ? children({ ...resolvePressableState(pressableState, extraButtonState),
-          textStyles
-        }) : children, {
-          style: textStyles
+        children: /*#__PURE__*/_jsx(IconText, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: iconSpace,
+          iconProps: { ...iconProps,
+            tokens: iconTokens
+          },
+          children: wrapStringsInText(typeof children === 'function' ? children({ ...resolvePressableState(pressableState, extraButtonState),
+            textStyles
+          }) : children, {
+            style: textStyles
+          })
         })
       });
     }

package/lib-module/Button/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { variantProp, getTokensPropType } from '../utils/props';
 import A11yText from '../A11yText';
+import { iconComponentPropTypes } from '../Icon';
 export const textAndA11yText = ABBPropTypes.childrenOf(PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string]));
 const buttonPropTypes = {
   tokens: getTokensPropType('Button'),
@@ -31,6 +32,22 @@ const buttonPropTypes = {
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: PropTypes.func,
+
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: PropTypes.func,
   variant: variantProp.propType
 };
 export default buttonPropTypes;

package/lib-module/Icon/IconText.js

@@ -68,7 +68,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`

package/lib-module/Link/LinkBase.js

@@ -217,7 +217,7 @@ LinkBase.propTypes = { ...selectedSystemPropTypes,
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.

package/lib-module/List/ListItem.js

@@ -225,7 +225,7 @@ ListItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Renders side item icon
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * Will set display icon color

package/lib-module/Notification/Notification.js

@@ -3,7 +3,7 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp } from '../utils';
 import ButtonBase from '../Button/ButtonBase';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
@@ -57,6 +57,10 @@ const selectDismissButtonContainerStyles = _ref4 => {
     paddingLeft: dismissButtonGap
   };
 };
+
+const selectContentContainerStyle = maxWidth => ({
+  width: maxWidth || '100%'
+});
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -131,6 +135,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const contentMaxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
 
   if (isDismissed) {
     return null;
@@ -150,30 +155,33 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
 
 
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(ButtonBase, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: staticStyles.contentContainer,
+        children: [IconComponent && /*#__PURE__*/_jsx(View, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
+          })
+        }), content && typeof content === 'function' ? content({
+          textStyles,
+          variant
+        }) : content]
+      }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
+        style: selectDismissButtonContainerStyles(themeTokens),
+        children: /*#__PURE__*/_jsx(ButtonBase, {
+          onPress: onDismissPress,
+          accessibilityRole: "button",
+          accessibilityLabel: getCopy('dismiss'),
+          children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          })
         })
-      })
-    })]
+      })]
+    })
   });
 });
 Notification.displayName = 'Notification';
@@ -206,9 +214,16 @@ Notification.propTypes = { ...selectedSystemPropTypes,
 export default Notification;
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 });

package/lib-module/Pagination/SideButton.js

@@ -7,15 +7,25 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
-import useCopy from '../utils/useCopy';
+import useCopy from '../utils/useCopy'; // We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectIconTokens = (_ref, direction) => {
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return selectTokens('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -27,7 +37,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -36,7 +46,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const buttonVariant = {
     direction,
@@ -52,7 +62,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -76,11 +86,11 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.2.0",
+    "@telus-uds/system-theme-tokens": "^2.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.13.0"
+  "version": "1.14.2"
 }

package/src/Button/ButtonBase.jsx

@@ -17,6 +17,7 @@ import {
   wrapStringsInText,
   withLinkRouter
 } from '../utils'
+import { IconText } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -147,6 +148,11 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
+const selectItemIconTokens = ({ color, iconSize }) => ({
+  size: iconSize,
+  color
+})
+
 const ButtonBase = forwardRef(
   (
     {
@@ -158,6 +164,9 @@ const ButtonBase = forwardRef(
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
+      icon,
+      iconPosition = icon ? 'left' : undefined,
+      iconProps,
       ...rawRest
     },
     ref
@@ -195,10 +204,13 @@ const ButtonBase = forwardRef(
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
           const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]
+          const iconTokens = selectItemIconTokens(themeTokens)
+          const { iconSpace } = themeTokens
 
           // If the container has a width set, fill it instead of sizing from content.
           // If in future we support text alignments other than center, add here.
           const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
+          const IconComponent = icon || themeTokens.icon
 
           return (
             <View
@@ -217,15 +229,22 @@ const ButtonBase = forwardRef(
                 })
               ]}
             >
-              {wrapStringsInText(
-                typeof children === 'function'
-                  ? children({
-                      ...resolvePressableState(pressableState, extraButtonState),
-                      textStyles
-                    })
-                  : children,
-                { style: textStyles }
-              )}
+              <IconText
+                icon={IconComponent}
+                iconPosition={iconPosition}
+                space={iconSpace}
+                iconProps={{ ...iconProps, tokens: iconTokens }}
+              >
+                {wrapStringsInText(
+                  typeof children === 'function'
+                    ? children({
+                        ...resolvePressableState(pressableState, extraButtonState),
+                        textStyles
+                      })
+                    : children,
+                  { style: textStyles }
+                )}
+              </IconText>
             </View>
           )
         }}

package/src/Button/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { variantProp, getTokensPropType } from '../utils/props'
 import A11yText from '../A11yText'
+import { iconComponentPropTypes } from '../Icon'
 
 export const textAndA11yText = ABBPropTypes.childrenOf(
   PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])
@@ -31,6 +32,19 @@ const buttonPropTypes = {
    * Function called when the button is pressed. Required unless the button has a href.
    */
   onPress: PropTypes.func,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+  /**
+   * A function component for an SVG icon to render inside the link. Inherits size and color from
+   * the link and any Typography the link is nested inside.
+   */
+  icon: PropTypes.func,
   variant: variantProp.propType
 }
 export default buttonPropTypes

package/src/Icon/IconText.jsx

@@ -52,7 +52,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`
    * prop will be set as "true" so that the icon continues to match the size of the text

package/src/Link/LinkBase.jsx

@@ -193,7 +193,7 @@ LinkBase.propTypes = {
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
    */

package/src/List/ListItem.jsx

@@ -180,7 +180,7 @@ ListItem.propTypes = {
   /**
    * Renders side item icon
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
   /**
    * Will set display icon color
    */

package/src/Notification/Notification.jsx

@@ -10,7 +10,8 @@ import {
   selectTokens,
   variantProp,
   viewProps,
-  wrapStringsInText
+  wrapStringsInText,
+  useResponsiveProp
 } from '../utils'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
@@ -41,6 +42,10 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   paddingLeft: dismissButtonGap
 })
 
+const selectContentContainerStyle = (maxWidth) => ({
+  width: maxWidth || '100%'
+})
+
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -98,6 +103,7 @@ const Notification = forwardRef(
     const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
     const getCopy = useCopy({ dictionary, copy })
     const { themeOptions } = useTheme()
+    const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
 
     if (isDismissed) {
       return null
@@ -121,25 +127,27 @@ const Notification = forwardRef(
         style={[staticStyles.container, selectContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        {IconComponent && (
-          <View style={selectIconContainerStyles(themeTokens)}>
-            <IconComponent {...selectIconProps(themeTokens)} />
+        <View style={[staticStyles.content, selectContentContainerStyle(contentMaxWidth)]}>
+          <View style={staticStyles.contentContainer}>
+            {IconComponent && (
+              <View style={selectIconContainerStyles(themeTokens)}>
+                <IconComponent {...selectIconProps(themeTokens)} />
+              </View>
+            )}
+            {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
           </View>
-        )}
-        <View style={staticStyles.contentContainer}>
-          {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+          {dismissible && DismissIconComponent && (
+            <View style={selectDismissButtonContainerStyles(themeTokens)}>
+              <ButtonBase
+                onPress={onDismissPress}
+                accessibilityRole="button"
+                accessibilityLabel={getCopy('dismiss')}
+              >
+                {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+              </ButtonBase>
+            </View>
+          )}
         </View>
-        {dismissible && DismissIconComponent && (
-          <View style={selectDismissButtonContainerStyles(themeTokens)}>
-            <ButtonBase
-              onPress={onDismissPress}
-              accessibilityRole="button"
-              accessibilityLabel={getCopy('dismiss')}
-            >
-              {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
-            </ButtonBase>
-          </View>
-        )}
       </View>
     )
   }
@@ -175,9 +183,16 @@ export default Notification
 
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   contentContainer: {
-    flex: 1
+    flexDirection: 'row',
+    flexShrink: 1
+  },
+  content: {
+    flexDirection: 'row',
+    flexShrink: 1,
+    justifyContent: 'space-between'
   }
 })

package/src/Pagination/SideButton.jsx

@@ -12,6 +12,9 @@ import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter }
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
+// We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -35,7 +38,7 @@ const SideButton = forwardRef(
 
     const { icon } = getTokens(tokens, buttonVariant)
 
-    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')