@telus-uds/components-base 1.0.1 → 1.1.0

package/generate-component-docs.js

@@ -0,0 +1,56 @@
+const fs = require('fs')
+const schema = require('@telus-uds/system-theme-tokens')
+const allExports = require('./src')
+
+const { a11yProps } = allExports
+const a11yPropTypes = Object.keys(a11yProps.types)
+
+const parseComponentDocs = (name, generated) => {
+  const { description } = generated // TODO parse markdown and split by heading
+  const props = {} // store derived prop data
+  const attributes = {
+    // any other computed attributes
+    acceptsRNA11yProps: a11yPropTypes.every((key) => key in generated.props)
+  }
+
+  Object.entries(generated.props).forEach(([propName, prop]) => {
+    if (prop.description?.includes('@ignore')) {
+      return // remove ignored props
+    }
+    if (attributes.acceptsRNA11yProps && a11yPropTypes.includes(propName)) {
+      return // remove a11y props if all supported (there are 30+, instead we have the above attribute to show this)
+    }
+
+    const out = { ...prop }
+
+    // check if this prop references the tokens schema
+    const tokensProp = out.type?.raw?.match(/getTokensPropType\('([A-z]+)'\)/)?.[1]
+    if (tokensProp) {
+      if (!schema.components[tokensProp]) {
+        throw new Error(`Unknown schema component reference: ${tokensProp} from component: ${name}`)
+      }
+      out.type = { ...out.type, raw: schema.components[tokensProp] }
+    }
+    props[propName] = out
+  })
+
+  return { docs: { description, props, attributes } }
+}
+
+const components = {}
+
+Object.entries(allExports).forEach(([name, exp]) => {
+  if (exp.__docgenInfo) {
+    // populated by babel-plugin-react-docgen
+    components[name] = parseComponentDocs(name, exp.__docgenInfo)
+
+    // check for second-level components e.g List.Item (can only be on a component)
+    Object.entries(exp).forEach(([subComponentName, prop]) => {
+      if (prop.__docgenInfo) {
+        components[name][subComponentName] = parseComponentDocs(subComponentName, prop.__docgenInfo)
+      }
+    })
+  }
+}, {})
+
+fs.writeFileSync('./component-docs.json', JSON.stringify({ schema, components }, null, 2))

package/lib/List/List.js

@@ -28,7 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /**
- * 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 = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -66,7 +66,6 @@ const List = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 List.displayName = 'List';
-List.Item = _ListItem.default;
 List.propTypes = { ..._propTypes2.a11yProps.types,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,

package/lib/List/ListItem.js

@@ -11,8 +11,6 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -57,6 +55,12 @@ const selectItemIconTokens = ({
   color: itemIconColor
 });
 
+const selectCommonIconStyles = ({
+  iconMarginTop
+}) => ({
+  marginTop: iconMarginTop
+});
+
 const selectSideItemContainerStyles = ({
   listGutter
 }) => ({
@@ -113,6 +117,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
+  const commonIconStyles = selectCommonIconStyles(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
 
   const accessibilityRole = _Platform.default.select({
@@ -120,27 +125,12 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
     default: 'item'
   });
 
-  const areChildrenStrings = () => {
-    if (Array.isArray(children)) {
-      return children.every(child => typeof child === 'string');
-    }
-
-    return typeof children === 'string';
-  };
-
-  const renderItem = () => {
-    if (areChildrenStrings()) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: itemStyles,
-        children: children
-      });
-    }
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.wrap,
-      children: children
-    });
-  };
+  const renderItem = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.wrap,
+    children: (0, _utils.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
@@ -171,7 +161,7 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
 
     if (icon) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [sideItemContainerStyles, areChildrenStrings() ? staticStyles.centeredIcons : undefined],
+        style: [sideItemContainerStyles, commonIconStyles],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
           size: iconSize || iconTokens.size,
           color: iconColor || iconTokens.color
@@ -201,9 +191,6 @@ const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row'
   },
-  centeredIcons: {
-    justifyContent: 'center'
-  },
   wrap: {
     flex: 1
   }

package/lib/List/index.js

@@ -3,11 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.default;
+  }
+});
 exports.default = void 0;
 
 var _List = _interopRequireDefault(require("./List"));
 
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+_List.default.Item = _ListItem.default;
 var _default = _List.default;
 exports.default = _default;

package/lib/Pagination/PageButton.js

@@ -78,13 +78,7 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 PageButton.displayName = 'PageButton';
-PageButton.propTypes = {
-  // Spreading any props into a secondary component accessed like Pagination.PageButton
-  // crashes a Docusaurus props table, but only in production, not in development
-  onPress: _propTypes.default.func,
-  href: _propTypes.default.string,
-  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
-  // ...linkProps.types,
+PageButton.propTypes = { ..._utils.linkProps.types,
   label: _propTypes.default.string,
   isActive: _propTypes.default.bool,
   copy: _utils.copyPropTypes,

package/lib/StackView/StackWrap.js

@@ -21,8 +21,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// CSS.supports needs an example of the type of value you intend to use.
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+const cssSupports = (...args) => {
+  var _window$CSS;
+
+  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...args);
+}; // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
+
+
 const exampleGapValue = '1px';
 /**
  * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
@@ -33,15 +40,12 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _CSS;
-
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
 
   const gap = props.gap ?? space;
-  const canUseCSSGap = _Platform.default.OS === 'web' && gap === space && // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
-  typeof ((_CSS = CSS) === null || _CSS === void 0 ? void 0 : _CSS.supports) === 'function' && CSS.supports('gap', exampleGapValue);
+  const canUseCSSGap = _Platform.default.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue);
   return canUseCSSGap ?
   /*#__PURE__*/
   // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.

package/lib/index.js

@@ -21,6 +21,8 @@ var _exportNames = {
   IconButton: true,
   InputLabel: true,
   List: true,
+  ListItem: true,
+  ListBase: true,
   Modal: true,
   Notification: true,
   Pagination: true,
@@ -153,6 +155,18 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _List.ListItem;
+  }
+});
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.ListBase;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -420,7 +434,7 @@ Object.keys(_Link).forEach(function (key) {
   });
 });
 
-var _List = _interopRequireDefault(require("./List"));
+var _List = _interopRequireWildcard(require("./List"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
 

package/lib/utils/a11y/propTypes.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes.native"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = { ..._propTypes2.default,
+  // 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
+};
+exports.default = _default;

package/lib/utils/a11y/propTypes.native.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+var _default = {
+  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
+};
+exports.default = _default;

package/lib/utils/propTypes.js

@@ -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.
@@ -404,7 +322,7 @@ exports.pressProps = pressProps;
 const linkPropTypes = { ...pressPropTypes,
   href: _propTypes.default.string,
   hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
-  ...a11yPropTypes
+  ..._propTypes2.default
 };
 const linkProps = {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -23,8 +23,11 @@
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
     "format": "prettier --write .",
-    "build": "babel src -d lib",
-    "dev": "yarn build --watch",
+    "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": {
@@ -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.1.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/v1.0.0",
-  "changelog": "### [1.0.1](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.0...@telus-uds/components-base/v1.0.1) (2022-02-07)\n\n\n### Bug Fixes\n\n* **base:** add dataSet to FlexGrid (via viewProps) ([#1276](https://github.com/telus/universal-design-system/issues/1276)) ([dea06a1](https://github.com/telus/universal-design-system/commit/dea06a1393bd78147b0eebfde10f4d3365b518b4))\n",
-  "releaseTag": "@telus-uds/components-base/v1.0.1",
-  "newVersion": "1.0.1",
+  "previousReleaseTag": "@telus-uds/components-base/v1.0.1",
+  "changelog": "## [1.1.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.1...@telus-uds/components-base/v1.1.0) (2022-02-28)\n\n\n### Features\n\n* **component-base:** add some fixes to the list component ([#1226](https://github.com/telus/universal-design-system/issues/1226)) ([35a42e0](https://github.com/telus/universal-design-system/commit/35a42e05e23630696286e7c8607e7a1e8da9d6c2))\n* **ds-allium:** add an Allium List ([#1304](https://github.com/telus/universal-design-system/issues/1304)) ([2f91c74](https://github.com/telus/universal-design-system/commit/2f91c74d6c0b30f09089e8f11beb3739e5be1887))\n* generate component docs ([#1292](https://github.com/telus/universal-design-system/issues/1292)) ([e0c03a5](https://github.com/telus/universal-design-system/commit/e0c03a5c4b5186e97d424c5b1c4594b1dda8201f))\n\n\n### Bug Fixes\n\n* **base:** no SSR crash on transpiled global CSS ([#1311](https://github.com/telus/universal-design-system/issues/1311)) ([7bc585c](https://github.com/telus/universal-design-system/commit/7bc585cc76bf7d760b1630a6f90f336f2be2abda))\n",
+  "releaseTag": "@telus-uds/components-base/v1.1.0",
+  "newVersion": "1.1.0",
   "packageName": "@telus-uds/components-base"
 }

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
   }