@telus-uds/components-base 1.8.1 → 1.8.4

package/lib/Link/LinkBase.js

@@ -37,79 +37,95 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.linkProps, _props.viewProps]);
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBorderOutline
-}) => // A view wrapper with a border on native messes up inline text alignment
-// so for now make focus styles strictly web-only
-_Platform.default.OS === 'web' ? {
-  // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-  outline: outerBorderOutline,
-  ...(0, _ThemeProvider.applyOuterBorder)({
+const selectOuterBorderStyles = _ref => {
+  let {
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
-    borderRadius
-  }),
-  // Stops focus ring stretching horizontally if parent has display: block
-  // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-  display: 'inline-flex'
-} : {};
-
-const selectTextStyles = ({
-  color
-}) => ({
-  color,
-  ..._Platform.default.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-});
+    borderRadius,
+    outerBorderOutline
+  } = _ref;
+  return (// A view wrapper with a border on native messes up inline text alignment
+    // so for now make focus styles strictly web-only
+    _Platform.default.OS === 'web' ? {
+      // Allow theme to define outline, or, turn off outline and use border if rounded corners required
+      outline: outerBorderOutline,
+      ...(0, _ThemeProvider.applyOuterBorder)({
+        outerBorderColor,
+        outerBorderWidth,
+        outerBorderGap,
+        borderRadius
+      }),
+      // Stops focus ring stretching horizontally if parent has display: block
+      // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+      display: 'inline-flex'
+    } : {}
+  );
+};
 
-const selectBlockStyles = ({
-  blockFontWeight,
-  blockFontSize,
-  blockLineHeight,
-  blockFontName
-}) => (0, _ThemeProvider.applyTextStyles)({
-  fontWeight: blockFontWeight,
-  fontSize: blockFontSize,
-  lineHeight: blockLineHeight,
-  fontName: blockFontName
-});
+const selectTextStyles = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return {
+    color,
+    ..._Platform.default.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
 
-const selectDecorationStyles = ({
-  color,
-  textLine,
-  textLineStyle
-}) => ({
-  color,
-  textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle,
-  ..._Platform.default.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-});
+const selectBlockStyles = _ref3 => {
+  let {
+    blockFontWeight,
+    blockFontSize,
+    blockLineHeight,
+    blockFontName
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontWeight: blockFontWeight,
+    fontSize: blockFontSize,
+    lineHeight: blockLineHeight,
+    fontName: blockFontName
+  });
+};
 
-const selectIconTokens = ({
-  color,
-  iconSize,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  color,
-  translateX: iconTranslateX,
-  translateY: iconTranslateY,
-  size: iconSize
-});
+const selectDecorationStyles = _ref4 => {
+  let {
+    color,
+    textLine,
+    textLineStyle
+  } = _ref4;
+  return {
+    color,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle,
+    ..._Platform.default.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
+
+const selectIconTokens = _ref5 => {
+  let {
+    color,
+    iconSize,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref5;
+  return {
+    color,
+    translateX: iconTranslateX,
+    translateY: iconTranslateY,
+    size: iconSize
+  };
+};
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
  * only (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.
@@ -134,17 +150,19 @@ const selectIconTokens = ({
  */
 
 
-const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
-  href,
-  icon,
-  iconPosition = icon ? 'left' : undefined,
-  iconProps,
-  variant,
-  tokens = {},
-  children,
-  accessibilityRole = 'link',
-  ...rawRest
-}, ref) => {
+const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    href,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
+    variant,
+    tokens = {},
+    children,
+    accessibilityRole = 'link',
+    ...rawRest
+  } = _ref6;
+
   const {
     onPress,
     ...props

package/lib/Link/TextButton.js

@@ -26,14 +26,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-const TextButton = /*#__PURE__*/(0, _react.forwardRef)(({
-  onPress,
-  children,
-  variant,
-  tokens,
-  accessibilityRole = 'button',
-  ...linkProps
-}, ref) => {
+const TextButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onPress,
+    children,
+    variant,
+    tokens,
+    accessibilityRole = 'button',
+    ...linkProps
+  } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
     onPress: onPress,

package/lib/List/List.js

@@ -31,25 +31,32 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * allows icon, dividers and customized typography
  */
 
-const List = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  showDivider,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const accessibilityRole = _Platform.default.select({
-    web: 'list',
-    default: 'none'
-  });
+const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    showDivider,
+    tokens,
+    variant,
+    accessibilityRole = _Platform.default.select({
+      web: 'list',
+      default: undefined
+    }),
+    ...rest
+  } = _ref;
 
   const items = _react.Children.map(children, (child, index) => {
-    if (child.type.name === _ListItem.default.name) {
+    var _child$type, _child$type2;
+
+    // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
+    const isListItem = componentName => Boolean(componentName === _ListItem.default.displayName);
+
+    if (isListItem(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || isListItem(child === null || child === void 0 ? void 0 : (_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name)) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {
         showDivider,
         isLastItem: index + 1 === _react.Children.count(children),
         tokens,
-        variant
+        variant,
+        ...child.props
       });
     }
 

package/lib/List/ListItem.js

@@ -29,93 +29,122 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectBulletStyles = ({
-  itemBulletWidth,
-  itemBulletHeight,
-  itemBulletColor
-}) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-});
+const selectBulletStyles = _ref => {
+  let {
+    itemBulletWidth,
+    itemBulletHeight,
+    itemBulletColor
+  } = _ref;
+  return {
+    width: itemBulletWidth,
+    height: itemBulletHeight,
+    borderRadius: itemBulletHeight / 2,
+    backgroundColor: itemBulletColor
+  };
+};
 
-const selectBulletContainerStyles = ({
-  itemBulletContainerWidth,
-  itemBulletContainerAlign
-}) => ({
-  width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign
-});
+const selectBulletContainerStyles = _ref2 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletContainerAlign
+  } = _ref2;
+  return {
+    width: itemBulletContainerWidth,
+    alignItems: itemBulletContainerAlign
+  };
+};
 
-const selectItemIconTokens = ({
-  itemIconSize,
-  itemIconColor
-}) => ({
-  size: itemIconSize,
-  color: itemIconColor
-});
+const selectItemIconTokens = _ref3 => {
+  let {
+    itemIconSize,
+    itemIconColor
+  } = _ref3;
+  return {
+    size: itemIconSize,
+    color: itemIconColor
+  };
+};
 
-const selectSideItemContainerStyles = ({
-  listGutter,
-  iconMarginTop
-}) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
-}); // Align bullets with the top line of text the same way icons are aligned
+const selectSideItemContainerStyles = _ref4 => {
+  let {
+    listGutter,
+    iconMarginTop
+  } = _ref4;
+  return {
+    marginTop: iconMarginTop,
+    marginRight: listGutter
+  };
+}; // Align bullets with the top line of text the same way icons are aligned
 
 
-const selectBulletPositioningStyles = ({
-  itemIconSize
-}) => ({
-  width: itemIconSize,
-  height: itemIconSize
-});
+const selectBulletPositioningStyles = _ref5 => {
+  let {
+    itemIconSize
+  } = _ref5;
+  return {
+    width: itemIconSize,
+    height: itemIconSize
+  };
+};
 
-const selectItemStyles = ({
-  itemFontWeight,
-  itemFontSize,
-  itemLineHeight,
-  itemFontName
-}) => (0, _ThemeProvider.applyTextStyles)({
-  fontWeight: itemFontWeight,
-  fontSize: itemFontSize,
-  lineHeight: itemLineHeight,
-  fontName: itemFontName
-});
+const selectItemStyles = _ref6 => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName
+  } = _ref6;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName
+  });
+};
 
-const selectItemBlockStyles = ({
-  interItemMargin
-}) => ({
-  marginBottom: interItemMargin
-});
+const selectItemBlockStyles = _ref7 => {
+  let {
+    interItemMargin
+  } = _ref7;
+  return {
+    marginBottom: interItemMargin
+  };
+};
 
-const selectDividerStyles = ({
-  dividerColor,
-  dividerSize,
-  interItemMarginWithDivider
-}) => ({
-  borderBottomWidth: dividerSize,
-  borderColor: dividerColor,
-  marginBottom: interItemMarginWithDivider,
-  paddingBottom: interItemMarginWithDivider
-});
+const selectDividerStyles = _ref8 => {
+  let {
+    dividerColor,
+    dividerSize,
+    interItemMarginWithDivider
+  } = _ref8;
+  return {
+    borderBottomWidth: dividerSize,
+    borderColor: dividerColor,
+    marginBottom: interItemMarginWithDivider,
+    paddingBottom: interItemMarginWithDivider
+  };
+};
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 
 
-const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant,
-  icon,
-  iconColor,
-  iconSize,
-  showDivider,
-  children,
-  isLastItem,
-  ...rest
-}, ref) => {
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
+  let {
+    tokens,
+    variant,
+    icon,
+    iconColor,
+    iconSize,
+    showDivider,
+    children,
+    isLastItem,
+    accessibilityRole = _Platform.default.select({
+      web: 'listitem',
+      default: undefined
+    }),
+    ...rest
+  } = _ref9;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
   const itemStyles = selectItemStyles(themeTokens);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
@@ -126,11 +155,6 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   const iconTokens = selectItemIconTokens(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
 
-  const accessibilityRole = _Platform.default.select({
-    web: 'listitem',
-    default: 'item'
-  });
-
   const renderItem = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrap,
     children: (0, _utils.wrapStringsInText)(children, {

package/lib/Modal/Modal.js

@@ -39,57 +39,69 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectContainerStyles = ({
-  containerPaddingLeft,
-  containerPaddingRight,
-  containerPaddingTop,
-  containerPaddingBottom,
-  maxWidth,
-  height
-}) => ({
-  height,
-  maxWidth,
-  paddingLeft: containerPaddingLeft,
-  paddingRight: containerPaddingRight,
-  paddingTop: containerPaddingTop,
-  paddingBottom: containerPaddingBottom
-});
+const selectContainerStyles = _ref => {
+  let {
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerPaddingBottom,
+    maxWidth,
+    height
+  } = _ref;
+  return {
+    height,
+    maxWidth,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    paddingBottom: containerPaddingBottom
+  };
+};
 
-const selectModalStyles = ({
-  backgroundColor,
-  borderRadius,
-  height,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow
-}) => ({
-  backgroundColor,
-  borderRadius,
-  height,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  ...(0, _ThemeProvider.applyShadowToken)(shadow)
-});
+const selectModalStyles = _ref2 => {
+  let {
+    backgroundColor,
+    borderRadius,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow
+  } = _ref2;
+  return {
+    backgroundColor,
+    borderRadius,
+    height,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
 
-const selectBackdropStyles = ({
-  backdropColor,
-  backdropOpacity
-}) => ({
-  backgroundColor: backdropColor,
-  opacity: backdropOpacity
-});
+const selectBackdropStyles = _ref3 => {
+  let {
+    backdropColor,
+    backdropOpacity
+  } = _ref3;
+  return {
+    backgroundColor: backdropColor,
+    opacity: backdropOpacity
+  };
+};
 
-const selectCloseButtonContainerStyles = ({
-  paddingRight,
-  paddingTop
-}) => ({
-  paddingRight,
-  paddingTop
-});
+const selectCloseButtonContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
 /**
  * A modal window is a secondary window that opens on top of the main one.
  * Users have to interact with it before they can carry out their task and return to the main window.
@@ -106,17 +118,18 @@ const selectCloseButtonContainerStyles = ({
  */
 
 
-const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  isOpen,
-  onClose,
-  maxWidth,
-  tokens,
-  variant,
-  copy,
-  closeButton,
-  ...rest
-}, ref) => {
+const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    children,
+    isOpen,
+    onClose,
+    maxWidth,
+    tokens,
+    variant,
+    copy,
+    closeButton,
+    ...rest
+  } = _ref5;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
@@ -230,6 +243,7 @@ const staticStyles = _StyleSheet.default.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 });