@telus-uds/components-base 1.14.1 → 1.15.0

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;

package/lib-module/List/ListItemMark.js

@@ -0,0 +1,143 @@
+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 { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const tokenTypes = {
+  itemIconSize: PropTypes.number.isRequired,
+  itemIconColor: PropTypes.string.isRequired,
+  listGutter: PropTypes.number.isRequired,
+  iconMarginTop: PropTypes.number.isRequired
+};
+
+const selectItemIconTokens = _ref => {
+  let {
+    itemIconSize,
+    itemIconColor
+  } = _ref;
+  return {
+    size: itemIconSize,
+    color: itemIconColor
+  };
+};
+
+const selectSideItemContainerStyles = _ref2 => {
+  let {
+    listGutter,
+    iconMarginTop
+  } = _ref2;
+  return {
+    marginTop: iconMarginTop,
+    marginRight: listGutter
+  };
+}; // Align bullets with the top line of text the same way icons are aligned
+
+
+const selectBulletPositioningStyles = _ref3 => {
+  let {
+    itemIconSize
+  } = _ref3;
+  return {
+    width: itemIconSize,
+    height: itemIconSize
+  };
+};
+
+const selectBulletStyles = _ref4 => {
+  let {
+    itemBulletWidth,
+    itemBulletHeight,
+    itemBulletColor
+  } = _ref4;
+  return {
+    width: itemBulletWidth,
+    height: itemBulletHeight,
+    borderRadius: itemBulletHeight / 2,
+    backgroundColor: itemBulletColor
+  };
+};
+
+const selectBulletContainerStyles = _ref5 => {
+  let {
+    itemBulletContainerWidth,
+    itemBulletContainerAlign
+  } = _ref5;
+  return {
+    width: itemBulletContainerWidth,
+    alignItems: itemBulletContainerAlign
+  };
+};
+/**
+ * Subcomponent used within ListItem and similar components for rendering bullets or icons
+ * that sit alongside a ListIconContent in a { flexDirection: row } container.
+ *
+ * It's the responsibility of themes to make sure that the supplied tokens align the
+ * icon or bullet nicely against the first line of text in a ListIconContent.
+ */
+
+
+const ListItemMark = _ref6 => {
+  let {
+    icon,
+    iconColor,
+    iconSize,
+    tokens = {}
+  } = _ref6;
+
+  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
+
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+
+  if (icon) {
+    const iconTokens = selectItemIconTokens(themeTokens);
+    return /*#__PURE__*/_jsx(View, {
+      style: sideItemContainerStyles,
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        size: iconSize || iconTokens.size,
+        color: iconColor || iconTokens.color
+      })
+    });
+  }
+
+  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
+  const itemBulletStyles = selectBulletStyles(themeTokens);
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  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"
+      })
+    })
+  });
+};
+
+ListItemMark.propTypes = {
+  tokens: PropTypes.shape(tokenTypes).isRequired,
+
+  /**
+   * Renders side item icon
+   */
+  icon: PropTypes.elementType,
+
+  /**
+   * Will set display icon color
+   */
+  iconColor: PropTypes.string,
+
+  /**
+   * Allow the user define the icon size
+   */
+  iconSize: PropTypes.number
+};
+const staticStyles = StyleSheet.create({
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+export default ListItemMark;