@telus-uds/components-base 1.14.2 → 1.16.0

package/lib-module/Carousel/Carousel.js

@@ -16,6 +16,8 @@ import SkipLink from '../SkipLink';
 import A11yText from '../A11yText';
 import CarouselStepTracker from './CarouselStepTracker';
 import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -138,7 +140,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     skipLinkHref,
-    refocus,
+    tabs,
+    refocus = Boolean(tabs),
     title = 'carousel',
     springConfig = undefined,
     thumbnails = undefined,
@@ -161,6 +164,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
+    showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
   const [activeIndex, setActiveIndex] = React.useState(0);
@@ -389,6 +393,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
+    items: tabs
+  }) : panelNavigation;
   return /*#__PURE__*/_jsxs(CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -462,7 +469,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? panelNavigation : null]
+    }), showPanelNavigation ? activePanelNavigation : null]
   });
 });
 Carousel.propTypes = { ...selectedSystemPropTypes,
@@ -543,6 +550,13 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   skipLinkHref: PropTypes.string,
 
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
+
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -4,7 +4,10 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useResponsiveProp } from '../../utils';
 import Carousel from '../Carousel';
-import CarouselTabsPanel from './CarouselTabsPanel';
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
+
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -12,16 +15,14 @@ const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     refocus = true,
     ...carouselProps
   } = _ref;
-  const panelNavigation = useResponsiveProp({
-    md: /*#__PURE__*/_jsx(CarouselTabsPanel, {
-      items: items
-    })
+  const tabs = useResponsiveProp({
+    md: items
   });
   return /*#__PURE__*/_jsx(Carousel, {
     refocus: refocus,
     ...carouselProps,
     ref: ref,
-    panelNavigation: panelNavigation,
+    tabs: tabs,
     children: items.map(_ref2 => {
       let {
         title,

package/lib-module/Checkbox/Checkbox.js

@@ -191,6 +191,14 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const selectedProps = selectProps({
+    accessibilityRole: 'checkbox',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(View, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -201,12 +209,7 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
         disabled: inactive,
         onKeyDown: handleKeyDown,
         onPress: handleChange,
-        accessibilityRole: "checkbox",
-        accessibilityState: {
-          checked: isChecked,
-          disabled: inactive
-        },
-        ...selectProps(rest),
+        ...selectedProps,
         children: _ref6 => {
           let {
             focused: focus,

package/lib-module/ExpandCollapse/Control.js

@@ -67,12 +67,13 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...rest
   } = _ref3;
   const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
-  const selectedProps = selectProps({ ...rest,
-    accessibilityRole
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest,
+    accessibilityState: { ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
   });
-  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
-    expanded: isExpanded
-  };
 
   const getControlState = _ref4 => {
     let {

package/lib-module/ExpandCollapse/Panel.js

@@ -55,10 +55,11 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = _ref2;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
-  const selectedProps = selectProps(rest);
-  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
-    expanded: isExpanded
-  };
+  const selectedProps = selectProps({ ...rest,
+    accessibilityState: { ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
+  });
   const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });

package/lib-module/List/ListItem.js

@@ -1,252 +1,30 @@
 import React, { forwardRef } from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { useTheme, useThemeTokens, applyTextStyles } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectBulletStyles = _ref => {
-  let {
-    itemBulletWidth,
-    itemBulletHeight,
-    itemBulletColor
-  } = _ref;
-  return {
-    width: itemBulletWidth,
-    height: itemBulletHeight,
-    borderRadius: itemBulletHeight / 2,
-    backgroundColor: itemBulletColor
-  };
-};
-
-const selectBulletContainerStyles = _ref2 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerAlign
-  } = _ref2;
-  return {
-    width: itemBulletContainerWidth,
-    alignItems: itemBulletContainerAlign
-  };
-};
-
-const selectItemIconTokens = _ref3 => {
-  let {
-    itemIconSize,
-    itemIconColor
-  } = _ref3;
-  return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-
-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 = _ref5 => {
-  let {
-    itemIconSize
-  } = _ref5;
-  return {
-    width: itemIconSize,
-    height: itemIconSize
-  };
-};
-
-const selectItemStyles = (_ref6, themeOptions) => {
-  let {
-    itemFontWeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName
-  } = _ref6;
-  return applyTextStyles({
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  });
-};
-
-const selectItemBlockStyles = _ref7 => {
-  let {
-    interItemMargin
-  } = _ref7;
-  return {
-    marginBottom: interItemMargin
-  };
-};
-
-const selectDividerStyles = _ref8 => {
-  let {
-    dividerColor,
-    dividerSize,
-    interItemMarginWithDivider
-  } = _ref8;
-  return {
-    borderBottomWidth: dividerSize,
-    borderColor: dividerColor,
-    marginBottom: interItemMarginWithDivider,
-    paddingBottom: interItemMarginWithDivider
-  };
-};
+import ListItemBase from './ListItemBase';
+import { useThemeTokens } from '../ThemeProvider';
+import { variantProp } from '../utils';
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 
-
-const ListItem = /*#__PURE__*/forwardRef((_ref9, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
-    icon,
-    iconColor,
-    iconSize,
-    showDivider,
     children,
-    isLastItem,
-    accessibilityRole = Platform.select({
-      web: 'listitem',
-      default: undefined
-    }),
-    ...rest
-  } = _ref9;
+    ...listItemProps
+  } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  const {
-    themeOptions
-  } = useTheme();
-  const itemStyles = selectItemStyles(themeTokens, themeOptions);
-  const itemBlockStyles = selectItemBlockStyles(themeTokens);
-  const dividerStyles = selectDividerStyles(themeTokens);
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletStyles = selectBulletStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
-  const iconTokens = selectItemIconTokens(themeTokens);
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-
-  const renderItem = () => /*#__PURE__*/_jsx(View, {
-    style: staticStyles.wrap,
-    children: wrapStringsInText(children, {
-      style: itemStyles
-    })
-  });
-  /**
-   * Function responsible returning styling, in case the item is the last shouldn't
-   * add extra margin on the bottom, if "showDivider" is true it should add a divider
-   * and custom margin and padding, otherwise just adds a margin to the bottom
-   */
-
-
-  const getContainerStyle = () => {
-    if (isLastItem) {
-      return undefined;
-    }
-
-    if (showDivider) {
-      return dividerStyles;
-    }
-
-    return itemBlockStyles;
-  };
-  /**
-   * Renders item bullet or Icon in case it's defined
-   * in case children are string the icon is centered otherwise
-   * it will align itself at start of the container
-   */
-
-
-  const renderMarker = () => {
-    const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
-
-    if (icon) {
-      return /*#__PURE__*/_jsx(View, {
-        style: sideItemContainerStyles,
-        children: /*#__PURE__*/_jsx(IconComponent, {
-          size: iconSize || iconTokens.size,
-          color: iconColor || iconTokens.color
-        })
-      });
-    }
-
-    return /*#__PURE__*/_jsx(View, {
-      style: [sideItemContainerStyles, itemBulletContainerStyles],
-      children: /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-        children: /*#__PURE__*/_jsx(View, {
-          style: itemBulletStyles,
-          testID: "unordered-item-bullet"
-        })
-      })
-    });
-  };
-
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsx(ListItemBase, {
+    tokens: themeTokens,
     ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    children: [renderMarker(), renderItem()]
+    ...listItemProps,
+    children: children
   });
 });
 ListItem.displayName = 'ListItem';
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row'
-  },
-  wrap: {
-    flex: 1
-  },
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-ListItem.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
+ListItem.propTypes = {
   variant: variantProp.propType,
-  children: PropTypes.node.isRequired,
-
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: PropTypes.number,
-
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: PropTypes.bool,
-
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
+  ...ListItemBase.propTypes
 };
 export default ListItem;

package/lib-module/List/ListItemBase.js

@@ -0,0 +1,139 @@
+import React, { forwardRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import ListItemContent from './ListItemContent';
+import ListItemMark from './ListItemMark';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const selectItemBlockStyles = _ref => {
+  let {
+    interItemMargin
+  } = _ref;
+  return {
+    marginBottom: interItemMargin
+  };
+};
+
+const selectDividerStyles = _ref2 => {
+  let {
+    dividerColor,
+    dividerSize,
+    interItemMarginWithDivider
+  } = _ref2;
+  return {
+    borderBottomWidth: dividerSize,
+    borderColor: dividerColor,
+    marginBottom: interItemMarginWithDivider,
+    paddingBottom: interItemMarginWithDivider
+  };
+};
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+
+
+const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    icon,
+    iconColor,
+    iconSize,
+    showDivider,
+    children,
+    isLastItem,
+    accessibilityRole = Platform.select({
+      web: 'listitem',
+      default: undefined
+    }),
+    ...rest
+  } = _ref3;
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
+  const itemBlockStyles = selectItemBlockStyles(themeTokens);
+  const dividerStyles = selectDividerStyles(themeTokens);
+  /**
+   * Function responsible returning styling, in case the item is the last shouldn't
+   * add extra margin on the bottom, if "showDivider" is true it should add a divider
+   * and custom margin and padding, otherwise just adds a margin to the bottom
+   */
+
+  const getContainerStyle = () => {
+    if (isLastItem) {
+      return undefined;
+    }
+
+    if (showDivider) {
+      return dividerStyles;
+    }
+
+    return itemBlockStyles;
+  };
+
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [staticStyles.itemContainer, getContainerStyle()],
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: typeof children === 'function' ? children({
+      tokens,
+      icon,
+      iconColor,
+      iconSize,
+      isLastItem
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ListItemMark, {
+        tokens: tokens,
+        icon: icon,
+        iconColor: iconColor,
+        iconSize: iconSize
+      }), /*#__PURE__*/_jsx(ListItemContent, {
+        tokens: tokens,
+        children: children
+      })]
+    })
+  });
+});
+ListItemBase.displayName = 'ListItem';
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row'
+  }
+});
+ListItemBase.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('List'),
+  variant: variantProp.propType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: PropTypes.number,
+
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: PropTypes.bool,
+
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: PropTypes.bool
+};
+export default ListItemBase;

package/lib-module/List/ListItemContent.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { wrapStringsInText } from '../utils';
+import { useTheme, applyTextStyles } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const tokenTypes = {
+  itemFontWeight: PropTypes.string.isRequired,
+  itemFontSize: PropTypes.number.isRequired,
+  itemLineHeight: PropTypes.number.isRequired,
+  itemFontName: PropTypes.string.isRequired
+};
+
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName
+  } = _ref;
+  return applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName,
+    themeOptions
+  });
+};
+/**
+ * Subcomponent used within ListItem and similar components for rendering content that fills
+ * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
+ * and that applies text styles to strings via supplied tokens.
+ *
+ * It's the responsibility of themes to make sure that these text tokens align the first line of
+ * text nicely against the bullet or icon rendered by ListIconMark.
+ */
+
+
+const ListItemContent = _ref2 => {
+  let {
+    tokens,
+    children
+  } = _ref2;
+  const {
+    themeOptions
+  } = useTheme();
+  const textStyles = selectItemTextStyles(tokens, themeOptions);
+  return /*#__PURE__*/_jsx(View, {
+    style: staticStyles.wrap,
+    children: wrapStringsInText(children, {
+      style: textStyles
+    })
+  });
+};
+
+const staticStyles = StyleSheet.create({
+  wrap: {
+    flex: 1
+  }
+});
+ListItemContent.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+  children: PropTypes.node.isRequired
+};
+export default ListItemContent;