@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/utils/useCopy.js

@@ -1,16 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_COPY = void 0;
+const DEFAULT_COPY = 'en';
 /**
  * Extract translations from a keyed dictionary for a given language.
  * Returns a getter.
  *
- * @param {object} dictionary
- * @param {'en'|'fr'} copy - language
+ * @example
+ * const getCopy = useCopy({
+ *   copy: 'en',
+ *   dictionary: {
+ *     en: { label: 'english label' },
+ *     fr: { label: 'french label' }
+ *   }
+ * })
+ *
+ * getCopy('label') => 'english label'
+ *
+ * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
+ * @example
+ * const getCopy = useCopy({
+ *   copy: { label: 'custom label' }
+ * })
+ *
+ * getCopy('label') => 'custom label'
+ *
+ * @param {object} [dictionary]
+ * @param {'en'|'fr'|object} copy - language
  * @return {function(string): string}
  */
+
+exports.DEFAULT_COPY = DEFAULT_COPY;
+
 function useCopy({
   dictionary,
-  copy
+  copy = DEFAULT_COPY
 }) {
-  return key => dictionary[copy][key];
+  if (typeof copy === 'string') {
+    return key => key ? dictionary[copy][key] : dictionary[copy];
+  } // support overriding the entire copy dictionary with an object for a single language
+
+
+  return key => copy[key];
 }
 
-export default useCopy;
+var _default = useCopy;
+exports.default = _default;

package/lib/utils/useHash.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const doAction = (action, event) => {
+  var _window, _window$location;
+
+  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
+};
+/**
+ * @typedef {import('react').SyntheticEvent} SyntheticEvent
+ */
+
+/**
+ * Calls a function (passing it the current hash) based on the current hash state on mount,
+ * and binds it to call it again any time the hash changes.
+ *
+ * Consider using `useCallback` on the function to minimise adding and removing of event listeners.
+ *
+ * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
+ *
+ * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
+ * @returns
+ */
+
+
+const useHash = (action, isReady = true) => {
+  const [isDone, setIsDone] = (0, _react.useState)(false); // Do the action just once when ready after component mount, from hash on page load
+
+  const isToDo = isReady && !isDone;
+  (0, _react.useEffect)(() => {
+    if (isToDo) {
+      setIsDone(true);
+      doAction(action);
+    }
+  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
+
+  (0, _react.useEffect)(() => {
+    const handleChange = event => doAction(action, event);
+
+    window.addEventListener('hashchange', handleChange);
+    return () => window.removeEventListener('hashchange', handleChange);
+  }, [action]);
+};
+
+var _default = useHash;
+exports.default = _default;

package/lib/utils/useHash.native.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
+ * is handled at OS level and deep links have completely different usage.
+ */
+const useHash = () => {};
+
+var _default = useHash;
+exports.default = _default;

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,
@@ -103,21 +112,22 @@ const resolveSpacingOptions = space => {
 const useSpacingScale = spaceValue => {
   // 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 === null || spaceValue === void 0 ? 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 uniqueId;
 }
 
-export default useUniqueId;
+var _default = useUniqueId;
+exports.default = _default;

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.6",
+  "version": "1.0.0",
   "description": "Base components",
   "keywords": [
     "base"
   ],
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
-  "license": "ISC",
+  "license": "UNLICENSED",
   "main": "lib/index.js",
-  "module": "lib/index.js",
-  "react-native": "lib/index.js",
+  "react-native": "src/index.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -26,7 +25,7 @@
     "format": "prettier --write .",
     "build": "babel src -d lib",
     "dev": "yarn build --watch",
-    "release": "standard-version"
+    "release": "standard-version --release-as major"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -34,11 +33,14 @@
   "standard-engine": {
     "skip": true
   },
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
   "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,9 +49,13 @@
     "react-test-renderer": "^16.3.2"
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.4",
+    "airbnb-prop-types": "^2.16.0",
+    "@telus-uds/system-constants": "^1.0.0",
+    "@telus-uds/system-theme-tokens": "^1.0.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-native-picker-select": "^8.0.4",
+    "semver": "^7.3.5"
   }
 }

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.5",
-  "changelog": "### [0.0.2-prerelease.6](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.5...@telus-uds/components-base/v0.0.2-prerelease.6) (2021-11-08)\n\n\n### Features\n\n* **base:** add Tooltip component ([#687](https://github.com/telus/universal-design-system/issues/687)) ([38aaad4](https://github.com/telus/universal-design-system/commit/38aaad43d664b76e85a264901df5e1ca045a0304))\n* **base:** responsive directions with `useResponsiveProp` ([#677](https://github.com/telus/universal-design-system/issues/677)) ([b61e6a7](https://github.com/telus/universal-design-system/commit/b61e6a75159ce3fbd81758148ff8d10ab73cb409))\n\n\n### Bug Fixes\n\n* **base:** fix Tooltip positioning when page scrollbar is rendered ([#728](https://github.com/telus/universal-design-system/issues/728)) ([c52167d](https://github.com/telus/universal-design-system/commit/c52167d94b1306749f2755ed2c4fb39bedd5dbf6))\n* **base:** refresh viewport on first render, for SSR ([#712](https://github.com/telus/universal-design-system/issues/712)) ([b6288c0](https://github.com/telus/universal-design-system/commit/b6288c0e003a73f88e3fa5743ee085a767c53a0b))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.6",
-  "newVersion": "0.0.2-prerelease.6",
+  "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",
   "packageName": "@telus-uds/components-base"
 }

package/src/A11yText/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -10,7 +10,7 @@ import { a11yProps } from '../utils/propTypes'
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = ({ text, heading, ...rest }) => {
+const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
   const a11y = a11yProps.select({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -21,8 +21,10 @@ const A11yText = ({ text, heading, ...rest }) => {
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   })
-  return <View style={styles.invisible} {...a11y} />
-}
+  return <View style={styles.invisible} ref={ref} {...a11y} />
+})
+
+A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
   text: PropTypes.string.isRequired,

package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx}

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 
 const SVG_RADIUS = 20
@@ -20,8 +20,9 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = ({ size, color, thickness, label }) => (
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => (
   <svg
+    ref={ref}
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 48 48"
@@ -62,7 +63,8 @@ const Spinner = ({ size, color, thickness, label }) => (
       </circle>
     </g>
   </svg>
-)
+))
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes
 

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = ({ size, color, thickness, label }) => {
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
 
   React.useLayoutEffect(() => {
@@ -31,6 +31,7 @@ const Spinner = ({ size, color, thickness, label }) => {
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
     <View
+      ref={ref}
       style={[styles.container]}
       accessible
       accessibilityLabel={label}
@@ -109,7 +110,8 @@ const Spinner = ({ size, color, thickness, label }) => {
       </Animated.View>
     </View>
   )
-}
+})
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes
 

package/src/Box/Box.jsx

@@ -1,8 +1,17 @@
-import React from 'react'
+import React, { forwardRef } 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,
+  getA11yPropsFromHtmlTag,
+  layoutTags
+} from '../utils'
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
@@ -87,63 +96,146 @@ const selectBoxStyles = (tokens) => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = ({
-  space,
-  horizontal = space,
-  vertical = space,
-  top = vertical,
-  bottom = vertical,
-  left = horizontal,
-  right = horizontal,
-  children,
-  variant,
-  tokens,
-  scroll,
-  testID,
-  ...rest
-}) => {
-  const a11y = a11yProps.select(rest)
+const Box = forwardRef(
+  (
+    {
+      space,
+      horizontal = space,
+      vertical = space,
+      top = vertical,
+      bottom = vertical,
+      left = horizontal,
+      right = horizontal,
+      flex,
+      children,
+      variant,
+      tokens,
+      scroll,
+      tag,
+      accessibilityRole,
+      testID,
+      dataSet,
+      ...rest
+    },
+    ref
+  ) => {
+    const props = {
+      ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+      ...a11yProps.select(rest),
+      ...viewProps.select(rest)
+    }
 
-  const themeTokens = useThemeTokens('Box', tokens, variant)
-  const styles = {
-    paddingLeft: useSpacingScale(left),
-    paddingRight: useSpacingScale(right),
-    paddingTop: useSpacingScale(top),
-    paddingBottom: useSpacingScale(bottom),
-    ...selectBoxStyles(themeTokens)
-  }
+    const themeTokens = useThemeTokens('Box', tokens, variant)
+    const styles = {
+      flex,
+      paddingLeft: useSpacingScale(left),
+      paddingRight: useSpacingScale(right),
+      paddingTop: useSpacingScale(top),
+      paddingBottom: useSpacingScale(bottom),
+      ...selectBoxStyles(themeTokens)
+    }
 
-  if (scroll) {
-    const scrollProps = typeof scroll === 'object' ? scroll : {}
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
+    if (scroll) {
+      const scrollProps = typeof scroll === 'object' ? scroll : {}
+      scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
+      return (
+        <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
+          {children}
+        </ScrollView>
+      )
+    }
     return (
-      <ScrollView {...scrollProps} {...a11y} testID={testID}>
+      <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
         {children}
-      </ScrollView>
+      </View>
     )
   }
-  return (
-    <View {...a11y} style={styles} testID={testID}>
-      {children}
-    </View>
-  )
-}
+)
+Box.displayName = 'Box'
 
 Box.propTypes = {
+  ...a11yProps.propTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Box'),
+  /**
+   * Sets default padding on all sides of the box using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   space: spacingProps.types.spacingValue,
+  /**
+   * Sets top and bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   vertical: spacingProps.types.spacingValue,
+  /**
+   * Sets left and right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   horizontal: spacingProps.types.spacingValue,
+  /**
+   * Sets bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   bottom: spacingProps.types.spacingValue,
+  /**
+   * Sets left padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   left: spacingProps.types.spacingValue,
+  /**
+   * Sets right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   right: spacingProps.types.spacingValue,
+  /**
+   * Sets top padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   top: spacingProps.types.spacingValue,
+  /**
+   * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
+   *
+   * Set as 1 for the box to stretch and grow to fit in the available space, or another number to share
+   * space disproportionately with siblings. See https://reactnative.dev/docs/flexbox#flex for details.
+   *
+   * With the default `0`, the box takes its minimum width from its content.
+   */
+  flex: PropTypes.number,
+  /**
+   * Renders a scrollable ScrollView instead of an unscrollable View.
+   *
+   * May take an object of ScrollView props which are passed to the rendered ScrollView.
+   */
   scroll: PropTypes.oneOfType([
     PropTypes.bool,
     ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object
   ]),
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Box'),
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Use in tests if the box itself needs to be targetted and no other way of selecting the
+   * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
+   */
   testID: PropTypes.string,
+  /**
+   * @ignore
+   */
+  dataSet: PropTypes.object,
+  /**
+   * Box accepts any content as children.
+   */
   children: PropTypes.node.isRequired
 }
 

package/src/Button/Button.jsx

@@ -1,15 +1,22 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
+
 import ButtonBase from './ButtonBase'
-import buttonPropTypes from './propTypes'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/propTypes'
 
-const Button = ({ accessibilityRole = 'button', ...props }) => (
-  <ButtonBase {...props} accessibilityRole={accessibilityRole} />
-)
+const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
+  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  return (
+    <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+  )
+})
+Button.displayName = 'Button'
 
 Button.propTypes = {
   ...a11yProps.types,
-  ...buttonPropTypes
+  ...buttonPropTypes,
+  children: textAndA11yText
 }
 
 export default Button