@telus-uds/components-base 1.0.0 → 1.2.0

package/lib/utils/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
+exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.clickProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -13,6 +13,8 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
 
+var _propTypes2 = _interopRequireDefault(require("./a11y/propTypes"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const paddingProp = {
@@ -190,98 +192,14 @@ function getPropSelector(propTypes, regexp) {
   return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
     [key]: value
   } : items, {});
-} // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
-// so we have to define them ourselves.
-
-
-const a11yPropTypes = {
-  accessible: _propTypes.default.bool,
-  focusable: _propTypes.default.bool,
-  accessibilityElementsHidden: _propTypes.default.bool,
-  accessibilityHint: _propTypes.default.string,
-  // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: _propTypes.default.bool,
-  accessibilityLabel: _propTypes.default.string,
-  accessibilityRole: _propTypes.default.string,
-  accessibilityActions: _propTypes.default.arrayOf(_propTypes.default.shape({
-    name: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string
-  })),
-  accessibilityLiveRegion: _propTypes.default.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: _propTypes.default.shape({
-    disabled: _propTypes.default.bool,
-    selected: _propTypes.default.bool,
-    checked: _propTypes.default.oneOf([true, false, 'mixed']),
-    busy: _propTypes.default.bool,
-    expanded: _propTypes.default.bool
-  }),
-  accessibilityValue: _propTypes.default.shape({
-    min: _propTypes.default.number,
-    max: _propTypes.default.number,
-    now: _propTypes.default.number,
-    text: _propTypes.default.string
-  }),
-  accessibilityViewIsModal: _propTypes.default.bool,
-  importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: _propTypes.default.func,
-  onAccessibilityEscape: _propTypes.default.func,
-  onAccessibilityTap: _propTypes.default.func,
-  ..._Platform.default.select({
-    web: {
-      // React Native Web adds many a11y props that alias aria-* attributes
-      // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-      accessibilityActiveDescendant: _propTypes.default.string,
-      accessibilityAtomic: _propTypes.default.bool,
-      accessibilityAutoComplete: _propTypes.default.string,
-      accessibilityBusy: _propTypes.default.bool,
-      accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
-      accessibilityColumnCount: _propTypes.default.number,
-      accessibilityColumnIndex: _propTypes.default.number,
-      accessibilityColumnSpan: _propTypes.default.number,
-      accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-      accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-      accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-      accessibilityDetails: _propTypes.default.string,
-      accessibilityDisabled: _propTypes.default.bool,
-      accessibilityErrorMessage: _propTypes.default.string,
-      accessibilityExpanded: _propTypes.default.bool,
-      accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-      accessibilityHasPopup: _propTypes.default.string,
-      accessibilityHidden: _propTypes.default.bool,
-      accessibilityInvalid: _propTypes.default.bool,
-      accessibilityKeyShortcuts: _propTypes.default.string,
-      accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-      accessibilityLevel: _propTypes.default.number,
-      accessibilityModal: _propTypes.default.bool,
-      accessibilityMultiline: _propTypes.default.bool,
-      accessibilityMultiSelectable: _propTypes.default.bool,
-      accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
-      accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-      accessibilityPlaceholder: _propTypes.default.string,
-      accessibilityPosInSet: _propTypes.default.number,
-      accessibilityPressed: _propTypes.default.bool,
-      accessibilityReadOnly: _propTypes.default.bool,
-      accessibilityRequired: _propTypes.default.bool,
-      accessibilityRoleDescription: _propTypes.default.string,
-      accessibilityRowCount: _propTypes.default.number,
-      accessibilityRowIndex: _propTypes.default.number,
-      accessibilityRowSpan: _propTypes.default.number,
-      accessibilitySelected: _propTypes.default.bool,
-      accessibilitySetSize: _propTypes.default.number,
-      accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
-      accessibilityValueMax: _propTypes.default.number,
-      accessibilityValueMin: _propTypes.default.number,
-      accessibilityValueNow: _propTypes.default.number,
-      accessibilityValueText: _propTypes.default.string
-    }
-  })
-};
+}
+
 const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.
    */
-  types: a11yPropTypes,
+  types: _propTypes2.default,
 
   /**
    * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
@@ -289,7 +207,7 @@ const a11yProps = {
    * Where components accept React Native a11y props, pass { ...rest } from its props to this,
    * then spread the returned object into the component's props (usually its outer container).
    */
-  select: getPropSelector(a11yPropTypes, /^aria-/),
+  select: getPropSelector(_propTypes2.default, /^aria-/),
 
   /**
    * Use this to disable focus for elements which are visually hidden but still rendered.
@@ -401,10 +319,35 @@ const pressProps = {
   selectHandlers: getPropSelector(pressHandlerPropTypes)
 };
 exports.pressProps = pressProps;
+const clickHandlerMapping = {
+  onClick: 'onPress',
+  mouseDown: 'onPressIn',
+  mouseUp: 'onPressOut'
+};
+const clickProps = {
+  /**
+   * Web-oriented HTML click handlers that may be mapped to React Native press handlers
+   */
+  types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, _propTypes.default.func])),
+
+  /**
+   * Takes a set of props and converts HTML mouse click oriented event handlers to closest
+   * equivalent React Native press event handler.
+   *
+   * Use this when a component that expects press-oriented props may need to support third-party
+   * web-oriented tooling that injects web-oriented event handlers directly. For example, for
+   * to support use with NextJS's 'next/link' component, which injects `onClick` prop into its child.
+   */
+  toPressProps: props => Object.fromEntries(Object.entries(props).map(([originalName, value]) => {
+    const translatedName = clickHandlerMapping[originalName];
+    return translatedName ? [translatedName, value] : [originalName, value];
+  }))
+};
+exports.clickProps = clickProps;
 const linkPropTypes = { ...pressPropTypes,
   href: _propTypes.default.string,
   hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
-  ...a11yPropTypes
+  ..._propTypes2.default
 };
 const linkProps = {
   /**
@@ -446,7 +389,8 @@ const viewPropTypes = {
   pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
   onLayout: _propTypes.default.func,
   nativeID: _propTypes.default.string,
-  testID: _propTypes.default.string
+  testID: _propTypes.default.string,
+  dataSet: _propTypes.default.object
 };
 const viewProps = {
   /**

package/lib/utils/withLinkRouter.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+// Prototype-safe alternative to (linter-forbidden) someObject.hasOwnProperty()
+const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(object, prop);
+/**
+ * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
+ * This may be used to provide custom wrappers for integrations with third party libraries.
+ *
+ * If LinkRouter is passed, LinkRouter is rendered in place of the main component and is passed:
+ *
+ *  - `linkRouterProps`: an optional object passed alongside LinkRouter, for props needed by the wrapper
+ *    that are not valid props for the wrapped component.
+ *  - `Component`: automatically provided, the original component to render inside the wrapper.
+ *  - `ref`: forwarded `ref` passed down to `Component`
+ *  - All other props passed to the outer component
+ *
+ * @example A LinkRouter component to be used with link-like components might look like:
+ *
+ * ```jsx
+ * const LinkLinkRouter = forwardRef(({ Component, linkRouterProps: { to, options }, href, ...rest }, ref) => {
+ *   const { href: resolvedHref, onClick } = useSomeRouterHook({ to, href, options })
+ *   return <Component href={resolvedHref} onPress={onClick} {...rest} />
+ * })
+ * ```
+ *
+ * Any component that takes href and onPress props may then use this wrapper:
+ *
+ * ```jsx
+ * <Link href={href} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }}>Some link</Link>
+ * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
+ * ```
+ */
+
+
+const withLinkRouter = Component => {
+  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)(({
+    LinkRouter,
+    linkRouterProps,
+    ...props
+  }, ref) => {
+    if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
+      ref: ref
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRouter, {
+      linkRouterProps: linkRouterProps,
+      Component: Component,
+      ref: ref,
+      ...props
+    });
+  }); // Ensure the returned component has appropriate outer properties set:
+
+  /* eslint-disable-next-line react/forbid-foreign-prop-types */
+
+  const {
+    displayName,
+    name,
+    propTypes,
+    ...otherProperties
+  } = Component; // Apply unique component name as a displayName
+
+  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+
+  wrappedComponent.propTypes = { ...Component.propTypes,
+    ...withLinkRouter.propTypes
+  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+
+  Object.keys(otherProperties).forEach(key => {
+    // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
+    if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
+      wrappedComponent[key] = Component[key];
+    }
+  });
+  return wrappedComponent;
+};
+
+withLinkRouter.propTypes = {
+  LinkRouter: _propTypes.default.elementType,
+  linkRouterProps: _propTypes.default.object
+};
+var _default = withLinkRouter;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -23,9 +23,12 @@
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
     "format": "prettier --write .",
-    "build": "babel src -d lib",
-    "dev": "yarn build --watch",
-    "release": "standard-version --release-as major"
+    "build": "yarn build:code && yarn build:docs",
+    "build:code": "babel src -d lib",
+    "build:docs": "babel-node --plugins=react-docgen-alpha generate-component-docs.js",
+    "storybook": "start-storybook",
+    "dev": "yarn build:code --watch",
+    "release": "standard-version"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -43,6 +46,7 @@
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {
+    "@telus-uds/browserslist-config": "^1.0.0",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
@@ -50,8 +54,8 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.0",
-    "@telus-uds/system-theme-tokens": "^1.0.0",
+    "@telus-uds/system-constants": "^1.0.1-prerelease.0",
+    "@telus-uds/system-theme-tokens": "^1.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.10",
-  "changelog": "## [1.0.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.10...@telus-uds/components-base/v1.0.0) (2022-02-03)\n\n\n### Features\n\n* add dataSet prop ([#1156](https://github.com/telus/universal-design-system/issues/1156)) ([21f49f6](https://github.com/telus/universal-design-system/commit/21f49f6c898118bb94c45f07a52c163b61e4cbaa))\n* **base:** add forwardRef to remaining components ([#1218](https://github.com/telus/universal-design-system/issues/1218)) ([49ccc42](https://github.com/telus/universal-design-system/commit/49ccc4217a68613f23dd7a23dd99e0f61fd6f121))\n* **base:** add tag prop for semantic HTML ([#1222](https://github.com/telus/universal-design-system/issues/1222)) ([581d070](https://github.com/telus/universal-design-system/commit/581d070782dfe569ffcf20c34de6e4409cdd8dfa))\n* **themes:** validate theme token types ([#1221](https://github.com/telus/universal-design-system/issues/1221)) ([dae382d](https://github.com/telus/universal-design-system/commit/dae382d19f86b88cd5de9df8c94f8200aee5b33f))\n\n\n### Bug Fixes\n\n* **base:** avoid errors in apps and update demo app ([#1215](https://github.com/telus/universal-design-system/issues/1215)) ([df6897a](https://github.com/telus/universal-design-system/commit/df6897a4918342e9859e596b9578bcdefc1a5702))\n",
-  "releaseTag": "@telus-uds/components-base/v1.0.0",
-  "newVersion": "1.0.0",
+  "previousReleaseTag": "@telus-uds/components-base/v1.1.0",
+  "changelog": "## [1.2.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.1.0...@telus-uds/components-base/v1.2.0) (2022-03-02)\n\n\n### Features\n\n* add withLinkRouter to support router integration ([#1324](https://github.com/telus/universal-design-system/issues/1324)) ([e56f491](https://github.com/telus/universal-design-system/commit/e56f491ac088a005f364330cfc70901532df7cea))\n* **component-base:** refactor ToggleSwitch to use input label and add tooltip support ([#1341](https://github.com/telus/universal-design-system/issues/1341)) ([979da1a](https://github.com/telus/universal-design-system/commit/979da1afb5b319df51026f44299d363f50f1be7d))\n* **components-base:** add ToggleSwitchGroup ([#1307](https://github.com/telus/universal-design-system/issues/1307)) ([402630a](https://github.com/telus/universal-design-system/commit/402630ad04c2d81c4f882fed564cf4ae33096cea))\n",
+  "releaseTag": "@telus-uds/components-base/v1.2.0",
+  "newVersion": "1.2.0",
   "packageName": "@telus-uds/components-base"
 }

package/src/Box/Box.jsx

@@ -155,6 +155,7 @@ Box.displayName = 'Box'
 
 Box.propTypes = {
   ...a11yProps.propTypes,
+  ...viewProps.types,
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
   /**

package/src/Button/ButtonBase.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
 import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
@@ -6,10 +7,12 @@ import buttonPropTypes from './propTypes'
 import {
   a11yProps,
   getCursorStyle,
+  clickProps,
   linkProps,
   resolvePressableState,
   resolvePressableTokens,
-  wrapStringsInText
+  wrapStringsInText,
+  withLinkRouter
 } from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
@@ -133,19 +136,20 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
 const ButtonBase = forwardRef(
   (
     {
+      id,
       href,
       hrefAttrs,
       children,
-      onPress,
       tokens = {},
       disabled = false, // alias for inactive
       inactive = disabled,
       selected = false,
       dataSet,
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const extraButtonState = { inactive, selected }
     const resolveButtonTokens = (pressableState) =>
       resolvePressableTokens(tokens, pressableState, extraButtonState)
@@ -185,6 +189,7 @@ const ButtonBase = forwardRef(
 
           return (
             <View
+              id={id}
               style={[
                 containerStyles,
                 borderStyles,
@@ -218,10 +223,12 @@ const ButtonBase = forwardRef(
 ButtonBase.displayName = 'ButtonBase'
 
 ButtonBase.propTypes = {
+  id: PropTypes.string,
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types
 }
+ButtonBase.defaultProps = { id: undefined }
 
 const staticStyles = StyleSheet.create({
   row: {
@@ -245,4 +252,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default ButtonBase
+export default withLinkRouter(ButtonBase)

package/src/Card/CardBase.jsx

@@ -52,6 +52,7 @@ CardBase.displayName = 'CardBase'
 CardBase.propTypes = {
   children: PropTypes.node,
   tokens: getTokensPropType('Card'),
+  ...viewProps.types,
   ...a11yProps.types
 }
 

package/src/Card/PressableCardBase.jsx

@@ -11,7 +11,9 @@ import {
   getTokenNames,
   getTokensSetPropType,
   variantProp,
-  linkProps
+  linkProps,
+  clickProps,
+  withLinkRouter
 } from '../utils'
 import { a11yProps } from '../utils/propTypes'
 import CardBase from './CardBase'
@@ -43,12 +45,12 @@ const PressableCardBase = forwardRef(
       inactive,
       href,
       hrefAttrs,
-      onPress,
       accessibilityRole = href ? 'link' : undefined,
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const viewport = useViewport()
     const a11y = a11yProps.select({
       ...rest,
@@ -116,4 +118,4 @@ PressableCardBase.propTypes = {
   ...a11yProps.types
 }
 
-export default PressableCardBase
+export default withLinkRouter(PressableCardBase)

package/src/Checkbox/Checkbox.jsx

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import CheckboxInput from './CheckboxInput'
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'

package/src/FlexGrid/FlexGrid.jsx

@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
 
 FlexGrid.propTypes = {
   ...a11yProps.propTypes,
-  ...viewProps.propTypes,
+  ...viewProps.types,
   /**
    * Whether or not to give the grid a fixed width. This also centres the grid horizontally.
    */

package/src/IconButton/IconButton.jsx

@@ -5,11 +5,13 @@ import { Pressable, Platform, StyleSheet, View } from 'react-native'
 import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   variantProp,
+  clickProps,
   linkProps,
   resolvePressableState,
   hrefAttrsProp,
   getTokensPropType,
-  selectTokens
+  selectTokens,
+  withLinkRouter
 } from '../utils'
 import { a11yProps } from '../utils/propTypes'
 import Icon from '../Icon'
@@ -52,12 +54,12 @@ const IconButton = forwardRef(
       icon: IconComponent,
       href,
       hrefAttrs,
-      onPress,
       accessibilityRole = href ? 'link' : 'button',
-      ...rest
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...rest } = clickProps.toPressProps(rawRest)
     const a11y = a11yProps.select({
       ...rest,
       accessibilityRole
@@ -111,4 +113,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default IconButton
+export default withLinkRouter(IconButton)

package/src/Link/LinkBase.jsx

@@ -6,9 +6,11 @@ import {
   hrefAttrsProp,
   variantProp,
   linkProps,
-  getTokensPropType
+  getTokensPropType,
+  clickProps
 } from '../utils/propTypes'
 import { resolvePressableTokens } from '../utils/pressability'
+import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
 import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
@@ -92,7 +94,6 @@ const LinkBase = forwardRef(
   (
     {
       href,
-      onPress,
       icon,
       iconPosition = icon ? 'left' : undefined,
       iconProps,
@@ -101,10 +102,11 @@ const LinkBase = forwardRef(
       children,
       accessibilityRole = 'link',
       dataSet,
-      ...props
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
     const linkPropSet = linkProps.select({
       accessibilityRole,
@@ -200,4 +202,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default LinkBase
+export default withLinkRouter(LinkBase)

package/src/List/List.jsx

@@ -6,7 +6,7 @@ import { a11yProps } from '../utils/propTypes'
 import ListItem from './ListItem'
 
 /**
- * A Unordered List component has a child a ListItem that
+ * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
@@ -32,8 +32,6 @@ const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, re
 })
 List.displayName = 'List'
 
-List.Item = ListItem
-
 List.propTypes = {
   ...a11yProps.types,
   tokens: getTokensPropType('List'),

package/src/List/ListItem.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
-import { View, Platform, Text, StyleSheet } from 'react-native'
+import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { getTokensPropType, variantProp, wrapStringsInText } from '../utils'
 
 const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
   width: itemBulletWidth,
@@ -22,6 +22,10 @@ const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
   color: itemIconColor
 })
 
+const selectCommonIconStyles = ({ iconMarginTop }) => ({
+  marginTop: iconMarginTop
+})
+
 const selectSideItemContainerStyles = ({ listGutter }) => ({
   marginRight: listGutter
 })
@@ -58,24 +62,13 @@ const ListItem = forwardRef(
     const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
     const itemBulletStyles = selectBulletStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
+    const commonIconStyles = selectCommonIconStyles(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
     const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
-    const areChildrenStrings = () => {
-      if (Array.isArray(children)) {
-        return children.every((child) => typeof child === 'string')
-      }
-
-      return typeof children === 'string'
-    }
-
-    const renderItem = () => {
-      if (areChildrenStrings()) {
-        return <Text style={itemStyles}>{children}</Text>
-      }
-
-      return <View style={staticStyles.wrap}>{children}</View>
-    }
+    const renderItem = () => (
+      <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>
+    )
 
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
@@ -104,12 +97,7 @@ const ListItem = forwardRef(
 
       if (icon) {
         return (
-          <View
-            style={[
-              sideItemContainerStyles,
-              areChildrenStrings() ? staticStyles.centeredIcons : undefined
-            ]}
-          >
+          <View style={[sideItemContainerStyles, commonIconStyles]}>
             <IconComponent
               size={iconSize || iconTokens.size}
               color={iconColor || iconTokens.color}
@@ -143,9 +131,6 @@ const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row'
   },
-  centeredIcons: {
-    justifyContent: 'center'
-  },
   wrap: {
     flex: 1
   }

package/src/List/index.js

@@ -1,3 +1,8 @@
 import List from './List'
+import ListItem from './ListItem'
+
+List.Item = ListItem
+
+export { List as ListBase, ListItem }
 
 export default List