@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8

package/lib/utils/useResponsiveProp.js

@@ -1,9 +1,17 @@
-import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../ViewportProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.resolveResponsiveProp = void 0;
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _ViewportProvider = require("../ViewportProvider");
 
 const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
 
-const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
+const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => hasOwn(objectProp, key));
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -16,12 +24,12 @@ const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(
  */
 
 
-export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
+const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (prop === undefined) return defaultValue;
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
-  const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
-  viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
-  prop[viewports.keys.find(key => hasOwn(prop, key))];
+  const value = _systemConstants.viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
+  _systemConstants.viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
+  prop[_systemConstants.viewports.keys.find(key => hasOwn(prop, key))];
   return value === undefined ? defaultValue : value;
 };
 /**
@@ -39,9 +47,13 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * @returns {*}
  */
 
+
+exports.resolveResponsiveProp = resolveResponsiveProp;
+
 const useResponsiveProp = (prop, defaultValue) => {
-  const viewport = useViewport();
+  const viewport = (0, _ViewportProvider.useViewport)();
   return resolveResponsiveProp(prop, viewport, defaultValue);
 };
 
-export default useResponsiveProp;
+var _default = useResponsiveProp;
+exports.default = _default;

package/lib/utils/useSpacingScale.js

@@ -1,6 +1,16 @@
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { resolveResponsiveProp } from './useResponsiveProp';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _useResponsiveProp = require("./useResponsiveProp");
+
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
  * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
@@ -8,9 +18,8 @@ import { resolveResponsiveProp } from './useResponsiveProp';
  * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
  * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
  */
-
 const resolveSpacingOptions = space => {
-  if (!space?.options) return {};
+  if (!(space !== null && space !== void 0 && space.options)) return {};
   const {
     size,
     variant,
@@ -101,23 +110,26 @@ const resolveSpacingOptions = space => {
 
 
 const useSpacingScale = spaceValue => {
+  var _spaceValue$space;
+
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
-  const viewport = useViewport();
+  const viewport = (0, _ViewportProvider.useViewport)();
   const {
     tokens,
     variant,
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0));
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
-  } = useThemeTokens('spacingScale', tokens, variant, {
+  } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {
     space: typeof space === 'number' ? space : 0,
     viewport
   });
   return Math.max(size - subtract, 0);
 };
 
-export default useSpacingScale;
+var _default = useSpacingScale;
+exports.default = _default;

package/lib/utils/useUniqueId.js

@@ -1,12 +1,21 @@
-import { useState } from 'react';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
 let id = 0;
 
 function useUniqueId(prefix = '') {
-  const [uniqueId] = useState(() => {
+  const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
-    return `${prefix}-${id}`;
+    return "".concat(prefix, "-").concat(id);
   });
   return uniqueId;
 }
 
-export default useUniqueId;
+var _default = useUniqueId;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.7",
+  "version": "0.0.2-prerelease.8",
   "description": "Base components",
   "keywords": [
     "base"
@@ -9,8 +9,7 @@
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "ISC",
   "main": "lib/index.js",
-  "module": "lib/index.js",
-  "react-native": "lib/index.js",
+  "react-native": "src/index.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -35,10 +34,10 @@
     "skip": true
   },
   "peerDependencies": {
-    "react": "*",
+    "react": "^17.0.2",
     "react-dom": "*",
     "react-native": "*",
-    "react-native-web": "~0.14.13"
+    "react-native-web": "^0.17.0"
   },
   "devDependencies": {
     "@testing-library/jest-native": "^4.0.1",
@@ -47,8 +46,10 @@
     "react-test-renderer": "^16.3.2"
   },
   "dependencies": {
+    "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^0.0.2-prerelease.2",
-    "@telus-uds/system-themes": "^0.0.2-prerelease.0",
+    "@telus-uds/system-themes": "^0.0.2-prerelease.1",
+    "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
     "react-native-picker-select": "^8.0.4"

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.6",
-  "changelog": "### [0.0.2-prerelease.7](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.6...@telus-uds/components-base/v0.0.2-prerelease.7) (2021-11-23)\n\n\n### Features\n\n* **base:** add `Radio` button ([#731](https://github.com/telus/universal-design-system/issues/731)) ([ad1613c](https://github.com/telus/universal-design-system/commit/ad1613c547fe3b0cdf1490a92267f32045356133))\n* **base:** add base `Checkbox` component ([#706](https://github.com/telus/universal-design-system/issues/706)) ([a3fa01a](https://github.com/telus/universal-design-system/commit/a3fa01ad0da342be02c15284a103c22d7b315ae9))\n* **base:** add Tags component ([#785](https://github.com/telus/universal-design-system/issues/785)) ([90bbf40](https://github.com/telus/universal-design-system/commit/90bbf4035a0bc0a8cdf319d9b366c8498c0dfb56))\n* **base:** add TextArea ([#720](https://github.com/telus/universal-design-system/issues/720)) ([b18cae3](https://github.com/telus/universal-design-system/commit/b18cae3357375019ecc4e24e78ed9a2345b26139))\n* **base:** add the Select component ([#759](https://github.com/telus/universal-design-system/issues/759)) ([9cfdf84](https://github.com/telus/universal-design-system/commit/9cfdf846b7a273dd140537b60e08f30a70c13a66))\n* **base:** adding list component ([#296](https://github.com/telus/universal-design-system/issues/296)) ([#703](https://github.com/telus/universal-design-system/issues/703)) ([50e474d](https://github.com/telus/universal-design-system/commit/50e474d3d7f1988f5971a10be8416c8ac510626f))\n* **base:** implementing base Skeleton component ([#770](https://github.com/telus/universal-design-system/issues/770)) ([1138f08](https://github.com/telus/universal-design-system/commit/1138f08885f4cf67fc0fb7273758d20cc0a989c1)), closes [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296) [#296](https://github.com/telus/universal-design-system/issues/296)\n\n\n### Bug Fixes\n\n* **base:** adjust event handlers for checkbox / radio inputs on Web ([#820](https://github.com/telus/universal-design-system/issues/820)) ([87624d2](https://github.com/telus/universal-design-system/commit/87624d29166ce85aeaf7dc1db4dc5b60ecd170a5))\n* **base:** fix button text alignment ([#794](https://github.com/telus/universal-design-system/issues/794)) ([9671087](https://github.com/telus/universal-design-system/commit/9671087477eb45b0d3c872b47f1d24cdd43a727f))\n* **base:** various visual fixes for native/app ([#797](https://github.com/telus/universal-design-system/issues/797)) ([a00ab12](https://github.com/telus/universal-design-system/commit/a00ab124c40e1ea46441270acfd64ae0f37b0a68))\n* export a11ytext [prerelease-components-base] ([#830](https://github.com/telus/universal-design-system/issues/830)) ([af627a2](https://github.com/telus/universal-design-system/commit/af627a2b4fa4cbf78983521bbb66b86ab9f87601))\n* **jest:** pick .web files in -allium-web tests ([#765](https://github.com/telus/universal-design-system/issues/765)) ([e0b1bd5](https://github.com/telus/universal-design-system/commit/e0b1bd5edcc52b916685f8c5dcd8d2901d2ecdbd))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.7",
-  "newVersion": "0.0.2-prerelease.7",
+  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.7",
+  "changelog": "### [0.0.2-prerelease.8](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.7...@telus-uds/components-base/v0.0.2-prerelease.8) (2021-12-15)\n\n\n### Features\n\n* **base:** add `ProgressBar` component ([#890](https://github.com/telus/universal-design-system/issues/890)) ([b98315c](https://github.com/telus/universal-design-system/commit/b98315cc7dabb2c7130c62c9c3bbf6fdfb7419a0))\n* **base:** add `Tabs` component ([#908](https://github.com/telus/universal-design-system/issues/908)) ([073bbd2](https://github.com/telus/universal-design-system/commit/073bbd2a0b4282112aa434f8e97e505fa8b4b92f))\n* **base:** add base `StepTracker` component ([#800](https://github.com/telus/universal-design-system/issues/800)) ([aa7d472](https://github.com/telus/universal-design-system/commit/aa7d47297c1d9ba13daef60b5184ead07b95cd52))\n* **base:** add Group fieldsets for RadioCard, Radio, Checkbox ([#875](https://github.com/telus/universal-design-system/issues/875)) ([4b99987](https://github.com/telus/universal-design-system/commit/4b999872714144b643f676d3d473369d605b3eea))\n* **base:** add Notification ([#848](https://github.com/telus/universal-design-system/issues/848)) ([ee6a83e](https://github.com/telus/universal-design-system/commit/ee6a83e05dc991acef3b9449f78c17d43d63b248))\n* **base:** add RadioCard and PressableCardBase ([#865](https://github.com/telus/universal-design-system/issues/865)) ([55c6fa2](https://github.com/telus/universal-design-system/commit/55c6fa293f2fa09499aed763910d3791eefbc4a1))\n* **base:** add the Modal component ([#878](https://github.com/telus/universal-design-system/issues/878)) ([431d4cd](https://github.com/telus/universal-design-system/commit/431d4cd2c1a7f4ce30b453d437b9f5d7b69fd251))\n* **base:** add the Search component ([#798](https://github.com/telus/universal-design-system/issues/798)) ([7b974df](https://github.com/telus/universal-design-system/commit/7b974df12d2bf0cb94b6360091bac8ac57dd7245))\n* **base:** handle `Tabs` hashes, with `useHash` ([#910](https://github.com/telus/universal-design-system/issues/910)) ([8ad6507](https://github.com/telus/universal-design-system/commit/8ad65072c249e8439e7d1c7e55fee535a5f30b4e))\n* **ds-allium:** `PriceLockup` implmementation ([#858](https://github.com/telus/universal-design-system/issues/858)) ([8669b9e](https://github.com/telus/universal-design-system/commit/8669b9e3f80261bd18962dfba5d774c90a5f4ebb))\n* **ds-allium:** add `StoryCard` component ([#880](https://github.com/telus/universal-design-system/issues/880)) ([6f0616d](https://github.com/telus/universal-design-system/commit/6f0616dc761cbdcf470bc2505d773eb362bf800e))\n* **ds-allium:** add Modal content types ([#896](https://github.com/telus/universal-design-system/issues/896)) ([f070447](https://github.com/telus/universal-design-system/commit/f070447fc796139046a96892aab34b74bc1974a4))\n* **ds-allium:** add SubNavigation ([#931](https://github.com/telus/universal-design-system/issues/931)) ([834ee7b](https://github.com/telus/universal-design-system/commit/834ee7bbe811ea8477ac4870466ae573d73e3a8f))\n* use built icons ([#809](https://github.com/telus/universal-design-system/issues/809)) ([120802e](https://github.com/telus/universal-design-system/commit/120802e11bcb4352b9d2e171525f6dc5b687c023))\n\n\n### Bug Fixes\n\n* **base:** add outer border to Radio, extract RadioButton ([#847](https://github.com/telus/universal-design-system/issues/847)) ([b563335](https://github.com/telus/universal-design-system/commit/b563335087fbfffe6739ad185fe4fc7886ef4e4d))\n* **base:** fix Tags icon, update Allium Tags/ButtonGroup ([#888](https://github.com/telus/universal-design-system/issues/888)) ([6d6ff35](https://github.com/telus/universal-design-system/commit/6d6ff35caba4c9c6c99eacf015be56e8862ad170))\n* **components-base:** Remove named import of json file ([#930](https://github.com/telus/universal-design-system/issues/930)) ([9db1cbe](https://github.com/telus/universal-design-system/commit/9db1cbe501d3c049f1f6476720a3ee9bd8b4d736))\n* fix storybook error from proptypes ([#857](https://github.com/telus/universal-design-system/issues/857)) ([175537a](https://github.com/telus/universal-design-system/commit/175537a6ac4b48699f66b1a59eb35910cbf9930b))\n* update test theme icons + cleanup ds-allium icon usage ([#860](https://github.com/telus/universal-design-system/issues/860)) ([c2c0a84](https://github.com/telus/universal-design-system/commit/c2c0a84914eed9dafaf47acca30e1f5119f19e57))\n",
+  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
+  "newVersion": "0.0.2-prerelease.8",
   "packageName": "@telus-uds/components-base"
 }

package/src/Box/Box.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, spacingProps, variantProp, getTokensPropType, useSpacingScale } from '../utils'
+import {
+  a11yProps,
+  spacingProps,
+  variantProp,
+  getTokensPropType,
+  useSpacingScale,
+  viewProps
+} from '../utils'
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
@@ -102,7 +109,7 @@ const Box = ({
   testID,
   ...rest
 }) => {
-  const a11y = a11yProps.select(rest)
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
 
   const themeTokens = useThemeTokens('Box', tokens, variant)
   const styles = {
@@ -117,13 +124,13 @@ const Box = ({
     const scrollProps = typeof scroll === 'object' ? scroll : {}
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
     return (
-      <ScrollView {...scrollProps} {...a11y} testID={testID}>
+      <ScrollView {...scrollProps} {...props} testID={testID}>
         {children}
       </ScrollView>
     )
   }
   return (
-    <View {...a11y} style={styles} testID={testID}>
+    <View {...props} style={styles} testID={testID}>
       {children}
     </View>
   )

package/src/Button/Button.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import ButtonBase from './ButtonBase'
-import buttonPropTypes from './propTypes'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/propTypes'
 
@@ -12,7 +12,8 @@ const Button = ({ accessibilityRole = 'button', tokens, variant, ...props }) =>
 
 Button.propTypes = {
   ...a11yProps.types,
-  ...buttonPropTypes
+  ...buttonPropTypes,
+  children: textAndA11yText
 }
 
 export default Button

package/src/Button/ButtonBase.jsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import { Pressable, Text, View, StyleSheet, Platform } from 'react-native'
+import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { applyTextStyles, applyShadowToken } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
 import buttonPropTypes from './propTypes'
 import {
   a11yProps,
   getCursorStyle,
-  hrefAttrsProp,
   linkProps,
   resolvePressableState,
-  resolvePressableTokens
+  resolvePressableTokens,
+  wrapStringsInText
 } from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
@@ -20,27 +20,26 @@ const selectOuterContainerStyles = ({
   opacity,
   outerBorderColor,
   outerBorderWidth,
-  outerBorderGap = 0,
-  outerBorderRadius = 0,
+  outerBorderGap,
+  borderRadius,
   outerBackgroundColor
 }) => ({
   alignSelf,
-  padding: outerBorderGap,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius + outerBorderGap,
   backgroundColor: outerBackgroundColor,
-  opacity
+  opacity,
+  ...applyOuterBorder({
+    outerBorderGap,
+    outerBorderWidth,
+    outerBorderColor,
+    borderRadius
+  })
 })
 
 const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
-
-  const widthStyles = {
-    margin: 0 - outerBorderOffset
-  }
+  const widthStyles = {}
 
   if (!width) {
     return {
@@ -131,19 +130,6 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
-// TODO: see if this can be made into a generalised utility, ideally when
-// there is a stable, generic, generalised approach to within-component text
-const resolveChildren = (children, { textStyles, state }) => {
-  switch (typeof children) {
-    case 'function':
-      return children(state)
-    case 'string':
-      return <Text style={textStyles}>{children}</Text>
-    default:
-      return children
-  }
-}
-
 const ButtonBase = ({
   href,
   hrefAttrs,
@@ -156,13 +142,13 @@ const ButtonBase = ({
   ...rest
 }) => {
   const extraButtonState = { inactive, selected }
-  const resolveTokens = (pressableState) =>
+  const resolveButtonTokens = (pressableState) =>
     resolvePressableTokens(tokens, pressableState, extraButtonState)
 
   const a11y = a11yProps.select(rest)
 
   const getPressableStyle = (pressableState) => {
-    const themeTokens = resolveTokens(pressableState)
+    const themeTokens = resolveButtonTokens(pressableState)
     return [
       staticStyles.row,
       selectWebOnlyStyles(inactive, themeTokens, a11y),
@@ -177,11 +163,11 @@ const ButtonBase = ({
       onPress={linkProps.handleHref({ href, onPress })}
       style={getPressableStyle}
       disabled={inactive}
-      {...hrefAttrsProp.spread(hrefAttrs)}
+      hrefAttrs={hrefAttrs}
       {...a11y}
     >
       {(pressableState) => {
-        const themeTokens = resolveTokens(pressableState)
+        const themeTokens = resolveButtonTokens(pressableState)
         const containerStyles = selectInnerContainerStyles(themeTokens)
         const borderStyles = selectBorderStyles(themeTokens)
         const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
@@ -206,10 +192,15 @@ const ButtonBase = ({
               })
             ]}
           >
-            {resolveChildren(children, {
-              state: { ...resolvePressableState(pressableState, extraButtonState), textStyles },
-              textStyles
-            })}
+            {wrapStringsInText(
+              typeof children === 'function'
+                ? children({
+                    ...resolvePressableState(pressableState, extraButtonState),
+                    textStyles
+                  })
+                : children,
+              { style: textStyles }
+            )}
           </View>
         )
       }}

package/src/Button/ButtonGroup.jsx

@@ -27,7 +27,7 @@ const ButtonGroup = ({
   readOnly = false,
   inactive = false,
   accessibilityRole = maxValues === 1
-    ? 'radioGroup' // radioGroup is cross-platform; only web aria has generic groups
+    ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
     : Platform.select({ web: 'group', default: 'none' }),
   ...rest
 }) => {
@@ -50,7 +50,7 @@ const ButtonGroup = ({
     accessibilityRole,
     ...rest
   })
-  const itemA11yRole = a11y.accessibilityRole === 'radioGroup' ? 'radio' : 'checkbox'
+  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
   return (
     <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens}>

package/src/Button/ButtonLink.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ButtonBase from './ButtonBase'
-import buttonPropTypes from './propTypes'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
 
@@ -24,7 +24,8 @@ const ButtonLink = ({ accessibilityRole = 'link', tokens, variant, ...props }) =
 ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
-  ...linkProps.types
+  ...linkProps.types,
+  children: textAndA11yText
 }
 
 export default ButtonLink

package/src/Button/propTypes.js

@@ -1,5 +1,11 @@
 import PropTypes from 'prop-types'
+import ABBPropTypes from 'airbnb-prop-types'
 import { variantProp } from '../utils/propTypes'
+import A11yText from '../A11yText'
+
+export const textAndA11yText = ABBPropTypes.childrenOf(
+  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])
+)
 
 const buttonPropTypes = {
   /**
@@ -12,10 +18,14 @@ const buttonPropTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * Button's children must be either a text string, or a render function which is passed an object of
+   * Button's children must be either:
+   *  - One or more text strings and / or A11yText components
+   *  - A render function with contents that responds to current button state by being passed an object of:
+   * ```
    * { hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }
+   * ```
    */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.func, textAndA11yText]).isRequired,
   /**
    * Function called when the button is pressed. Required unless the button has a href.
    */

package/src/Card/Card.jsx

@@ -1,34 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
 
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps } from '../utils/propTypes'
-
-// Ensure explicit selection of tokens
-const selectStyles = ({
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  shadow
-}) => ({
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  ...applyShadowToken(shadow)
-})
+import CardBase from './CardBase'
 
 /**
  * A basic card component, unstyled by default.
@@ -81,13 +58,10 @@ const selectStyles = ({
 const Card = ({ children, tokens, variant, ...rest }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
-  const cardStyle = selectStyles(themeTokens)
-  const a11y = a11yProps.select(rest)
-
   return (
-    <View style={cardStyle} {...a11y}>
+    <CardBase tokens={themeTokens} {...rest}>
       {children}
-    </View>
+    </CardBase>
   )
 }
 

package/src/Card/CardBase.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import { applyShadowToken } from '../ThemeProvider'
+import { getTokensPropType } from '../utils'
+import { a11yProps, viewProps } from '../utils/propTypes'
+
+// Ensure explicit selection of tokens
+const selectStyles = ({
+  flex,
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  minWidth,
+  shadow
+}) => ({
+  flex,
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  borderWidth,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  minWidth,
+  ...applyShadowToken(shadow)
+})
+
+/**
+ * A themeless base component for Card which components can apply theme tokens to. Not
+ * intended to be used in apps or sites directly: build themed components on top of this.
+ */
+const CardBase = ({ children, tokens, ...rest }) => {
+  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
+
+  return (
+    <View style={cardStyle} {...props}>
+      {children}
+    </View>
+  )
+}
+
+CardBase.propTypes = {
+  children: PropTypes.node,
+  tokens: getTokensPropType('Card'),
+  ...a11yProps.types
+}
+
+export default CardBase