@telus-uds/components-base 1.40.0 → 1.41.0

package/lib-module/Button/ButtonBase.js

@@ -42,11 +42,12 @@ const selectOuterContainerStyles = _ref2 => {
   };
 };
 
-const selectOuterWidthStyles = _ref3 => {
+const selectOuterSizeStyles = _ref3 => {
   let {
     outerBorderGap,
     outerBorderWidth,
-    width
+    width,
+    height
   } = _ref3;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
@@ -54,10 +55,16 @@ const selectOuterWidthStyles = _ref3 => {
     outerBorderGap,
     outerBorderWidth
   });
-  const widthStyles = {};
+  const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
+
+  if (typeof width === 'number' || typeof height === 'number') {
+    sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
+    sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
+    return sizeStyles;
+  }
 
   if (!width) {
-    return { ...widthStyles,
+    return { ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
@@ -66,30 +73,26 @@ const selectOuterWidthStyles = _ref3 => {
         }
       })
     };
-  } // Apply width tokens: number === pixels, string === explicit units e.g. %
-
-
-  if (typeof width === 'number') {
-    widthStyles.width = width + outerBorderOffset * 2;
-    return widthStyles;
   } // Ensure the negative margin doesn't make element off-centre
 
 
   if (Platform.OS === 'web') {
-    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
-    return widthStyles;
+    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
+    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
+    return sizeStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
 
   if (width === '100%') {
-    widthStyles.flexGrow = 1;
-    return widthStyles;
+    sizeStyles.flexGrow = 1;
+    return sizeStyles;
   } // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
   // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
 
 
-  widthStyles.width = width;
-  return widthStyles;
+  sizeStyles.width = width;
+  sizeStyles.height = height;
+  return sizeStyles;
 };
 
 const selectInnerContainerStyles = _ref4 => {
@@ -101,38 +104,68 @@ const selectInnerContainerStyles = _ref4 => {
     paddingBottom,
     shadow,
     borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
     minWidth
   } = _ref4;
 
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = value => typeof value === 'number' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
+  const offsetBorder = _ref5 => {
+    let {
+      value,
+      borderSize = borderWidth
+    } = _ref5;
+    return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
+  };
 
   return {
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
+    paddingLeft: offsetBorder({
+      value: paddingLeft,
+      borderSize: borderLeftWidth
+    }),
+    paddingRight: offsetBorder({
+      value: paddingRight,
+      borderSize: borderRightWidth
+    }),
+    paddingTop: offsetBorder({
+      value: paddingTop,
+      borderSize: borderTopWidth
+    }),
+    paddingBottom: offsetBorder({
+      value: paddingBottom,
+      borderSize: borderBottomWidth
+    }),
     backgroundColor,
     minWidth,
     ...applyShadowToken(shadow)
   };
 };
 
-const selectBorderStyles = _ref5 => {
+const selectBorderStyles = _ref6 => {
   let {
     borderColor,
     borderWidth,
-    borderRadius
-  } = _ref5;
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
+  } = _ref6;
   return {
     borderColor,
     borderWidth,
-    borderRadius
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
   };
 };
 
-const selectTextStyles = (_ref6, themeOptions) => {
+const selectTextStyles = (_ref7, themeOptions) => {
   let {
     fontSize,
     color,
@@ -142,7 +175,7 @@ const selectTextStyles = (_ref6, themeOptions) => {
     textAlign,
     textLine,
     textLineStyle
-  } = _ref6;
+  } = _ref7;
   return applyTextStyles({
     fontSize,
     color,
@@ -156,10 +189,10 @@ const selectTextStyles = (_ref6, themeOptions) => {
   });
 };
 
-const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   let {
     accessibilityRole
-  } = _ref7;
+  } = _ref8;
   return Platform.select({
     web: {
       // if it would overflow the container, wraps instead
@@ -172,19 +205,19 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   });
 };
 
-const selectItemIconTokens = _ref8 => {
+const selectItemIconTokens = _ref9 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref8;
+  } = _ref9;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
+const ButtonBase = /*#__PURE__*/forwardRef((_ref10, ref) => {
   let {
     id,
     href,
@@ -199,7 +232,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref9;
+  } = _ref10;
   const {
     onPress,
     ...rest
@@ -216,7 +249,7 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
 
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
   };
 
   const {
@@ -287,10 +320,7 @@ const staticStyles = StyleSheet.create({
     // Apply all button alignment horizontally; no vertical stacking within a button
     flexDirection: 'row'
   },
-  text: {
-    flexGrow: 1,
-    // On native but not web, flexShrink here wraps text prematurely
-    ...Platform.select({
+  text: { ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
         transition: 'color 200ms'

package/lib-module/ExpandCollapse/Panel.js

@@ -11,8 +11,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // just void functions for now, since there are no style tokens for a panel or control at this point
 
-const selectGroupStyles = () => {};
-
 const selectContainerStyles = _ref => {
   let {
     contentPaddingLeft,
@@ -89,13 +87,21 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
-    style: selectGroupStyles(themeTokens),
+    style: themeTokens,
     children: [/*#__PURE__*/_jsx(ExpandCollapseControl, { ...selectedProps,
       isExpanded: isExpanded,
       tokens: controlTokens,
+      variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
       children: control
+    }), isExpanded && /*#__PURE__*/_jsx(View, {
+      style: {
+        borderTopColor: themeTokens.expandDividerColor,
+        borderTopWidth: themeTokens.expanddDividerWidth,
+        marginLeft: themeTokens.contentPaddingLeft,
+        marginRight: themeTokens.contentPaddingRight
+      }
     }), /*#__PURE__*/_jsx(Animated.View, {
       ref: animatedRef,
       style: animatedStyles,

package/lib-module/Icon/IconText.js

@@ -35,7 +35,7 @@ const IconText = /*#__PURE__*/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 size = (iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size) ?? 0;
 
   const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
     style: {

package/lib-module/InputSupports/InputSupports.js

@@ -15,6 +15,7 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     hint,
     hintPosition = 'inline',
     feedback,
+    feedbackTokens = {},
     tooltip,
     validation,
     nativeID
@@ -48,11 +49,12 @@ const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
     }), typeof children === 'function' ? children({
       inputId,
       ...a11yProps
-    }) : children, feedback && /*#__PURE__*/_jsx(Feedback, {
+    }) : children, feedback ? /*#__PURE__*/_jsx(Feedback, {
       id: feedbackId,
       title: feedback,
-      validation: validation
-    })]
+      validation: validation,
+      tokens: feedbackTokens
+    }) : null]
   });
 });
 InputSupports.displayName = 'InputSupports';
@@ -85,6 +87,11 @@ InputSupports.propTypes = {
    */
   feedback: PropTypes.string,
 
+  /**
+   * Additional tokens to override the default feedback tokens.
+   */
+  feedbackTokens: PropTypes.objectOf(PropTypes.string),
+
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib-module/Notification/Notification.js

@@ -4,9 +4,10 @@ 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, useResponsiveProp } from '../utils';
-import ButtonBase from '../Button/ButtonBase';
+import IconButton from '../IconButton';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
+import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -34,7 +35,8 @@ const selectIconContainerStyles = _ref2 => {
     iconGap
   } = _ref2;
   return {
-    paddingRight: iconGap
+    paddingRight: iconGap,
+    placeContent: 'center'
   };
 };
 
@@ -54,7 +56,8 @@ const selectDismissButtonContainerStyles = _ref4 => {
     dismissButtonGap
   } = _ref4;
   return {
-    paddingLeft: dismissButtonGap
+    paddingLeft: dismissButtonGap,
+    placeContent: 'center'
   };
 };
 
@@ -125,8 +128,10 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
     ...rest
   } = _ref5;
   const [isDismissed, setIsDismissed] = useState(false);
+  const viewport = useViewport();
   const themeTokens = useThemeTokens('Notification', tokens, variant, {
-    system
+    system,
+    viewport
   });
   const getCopy = useCopy({
     dictionary,
@@ -150,11 +155,11 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
   });
   const {
     icon: IconComponent,
-    dismissIcon: DismissIconComponent
+    dismissIcon: DismissIconComponent,
+    dismissIconColor
   } = themeTokens;
 
-  const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-
+  const onDismissPress = () => setIsDismissed(true);
 
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -174,10 +179,16 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
         }) : content]
       }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
         style: selectDismissButtonContainerStyles(themeTokens),
-        children: /*#__PURE__*/_jsx(ButtonBase, {
+        children: /*#__PURE__*/_jsx(IconButton, {
+          action: "close",
           onPress: onDismissPress,
+          icon: DismissIconComponent,
           accessibilityRole: "button",
           accessibilityLabel: getCopy('dismiss'),
+          variant: {
+            inverse: dismissIconColor === '#ffffff',
+            size: 'small'
+          },
           children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
           })
         })
@@ -215,8 +226,7 @@ Notification.propTypes = { ...selectedSystemPropTypes,
 export default Notification;
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    justifyContent: 'center'
+    flexDirection: 'row'
   },
   contentContainer: {
     flexDirection: 'row',

package/lib-module/Pagination/Pagination.js

@@ -54,6 +54,20 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const {
+    borderColor,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    ellipsisPadding,
+    ellipsisBorderRightWidth,
+    ellipsisBorderLeftWidth,
+    ellipsisBorderTopWidth,
+    ellipsisBorderBottomWidth,
+    ellipsisHeight
+  } = themeTokens;
   const items = React.Children.toArray(children);
   const {
     isItemActive,
@@ -69,6 +83,17 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     truncateAbove
   });
   const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions);
+  const ellipisContainerStyles = StyleSheet.create({
+    container: {
+      height: ellipsisHeight,
+      padding: ellipsisPadding,
+      borderRightWidth: ellipsisBorderRightWidth,
+      borderLeftWidth: ellipsisBorderLeftWidth,
+      borderTopWidth: ellipsisBorderTopWidth,
+      borderBottomWidth: ellipsisBorderBottomWidth,
+      borderColor
+    }
+  });
 
   if (items.length === 0) {
     return null;
@@ -103,9 +128,14 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
 
     if (shouldRenderEllipsis(itemIndex)) {
-      return /*#__PURE__*/_jsx(Text, {
-        style: ellipsisTextStyles,
-        children: "..."
+      return /*#__PURE__*/_jsx(View, {
+        style: { ...ellipisContainerStyles.container
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: { ...ellipsisTextStyles
+          },
+          children: "..."
+        })
       }, "...");
     }
 
@@ -119,19 +149,31 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     linkRouterProps: linkRouterProps
   })];
   return /*#__PURE__*/_jsx(View, {
-    style: staticStyles.container,
+    style: { ...staticStyles.container
+    },
     ref: ref,
     ...selectProps(rest),
-    children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
-      let [element] = _ref3;
-      return element !== null;
-    }).map(_ref4 => {
-      let [element, key] = _ref4;
-      return /*#__PURE__*/_jsx(Box, {
-        right: gap,
-        children: element
-      }, key);
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        borderColor,
+        borderWidth,
+        borderLeftWidth,
+        borderRightWidth,
+        borderTopWidth,
+        borderBottomWidth,
+        ...staticStyles.container
+      },
+      children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+      .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
+        let [element] = _ref3;
+        return element !== null;
+      }).map(_ref4 => {
+        let [element, key] = _ref4;
+        return /*#__PURE__*/_jsx(Box, {
+          right: gap,
+          children: element
+        }, key);
+      })
     })
   });
 });

package/lib-module/Radio/Radio.js

@@ -42,6 +42,8 @@ const selectDescriptionStyles = _ref2 => {
     descriptionFontSize,
     descriptionLineHeight,
     descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
     inputSize,
     fontColor,
     labelMarginLeft = 0
@@ -51,7 +53,9 @@ const selectDescriptionStyles = _ref2 => {
     color: fontColor,
     ...applyTextStyles({
       fontSize: descriptionFontSize,
-      lineHeight: descriptionLineHeight
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
     })
   };
 };

package/lib-module/Select/Select.js

@@ -150,6 +150,15 @@ const selectValidationIconContainerStyles = _ref6 => {
     })
   };
 };
+
+const selectCustomFeedbackStyles = _ref7 => {
+  let {
+    feedbackBackgroundColor
+  } = _ref7;
+  return {
+    backgroundColor: feedbackBackgroundColor
+  };
+};
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -184,7 +193,7 @@ const selectValidationIconContainerStyles = _ref6 => {
  */
 
 
-const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
+const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
   let {
     value,
     initialValue,
@@ -198,7 +207,7 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
     variant,
     testID,
     ...rest
-  } = _ref7;
+  } = _ref8;
   const {
     currentValue,
     setValue
@@ -240,11 +249,12 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
     ...selectedProps,
     validation: validation,
-    children: _ref8 => {
+    feedbackTokens: selectCustomFeedbackStyles(themeTokens),
+    children: _ref9 => {
       let {
         inputId,
         ...props
-      } = _ref8;
+      } = _ref9;
       return /*#__PURE__*/_jsxs(View, {
         style: selectOuterBorderStyles(themeTokens),
         children: [/*#__PURE__*/_jsx(Picker, {

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.25.0",
+    "@telus-uds/system-theme-tokens": "^2.26.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.40.0"
+  "version": "1.41.0"
 }