@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.5

package/__tests__/utils/spacing.test.jsx

@@ -0,0 +1,273 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import { useSpacingScale } from '../../src/utils/spacing'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+
+describe('useSpacingScale', () => {
+  // values from testTheme.js
+  const expectedDefaultScale = [0, 4, 8, 16, 24, 32, 36]
+  const expectedCompactScale = [0, 2, 4, 6, 8, 10, 12]
+  const expectedResponsiveScale = {
+    xs: [0, 1, 2, 3, 4, 5, 6],
+    sm: [0, 3, 4, 5, 6, 7, 8],
+    md: [0, 3, 4, 5, 6, 7, 8],
+    lg: [0, 7, 8, 9, 10, 11, 12],
+    xl: [0, 7, 8, 9, 10, 11, 12]
+  }
+
+  const wrapper = ({ children, viewport }) => (
+    <Viewport viewport={viewport}>
+      <Theme>{children}</Theme>
+    </Viewport>
+  )
+
+  it.each(expectedDefaultScale.map((item, index) => [item, index]))(
+    'returns the expected size index %# from the theme spacing scale',
+    (expectedSize, index) => {
+      const { result } = renderHook(() => useSpacingScale(index), {
+        wrapper
+      })
+      expect(result.current).toBe(expectedSize)
+    }
+  )
+  it.each(expectedCompactScale.map((item, index) => [item, index]))(
+    'returns the expected size index %# from the theme spacing scale in a variant',
+    (expectedSize, index) => {
+      const { result } = renderHook(
+        () => useSpacingScale({ space: index, options: { variant: { compact: true } } }),
+        {
+          wrapper
+        }
+      )
+      expect(result.current).toBe(expectedSize)
+    }
+  )
+  it.each(Object.entries(expectedResponsiveScale))(
+    'returns appropriate sizes from a responsive theme variant at %p viewport',
+    (viewport, expectedValues) => {
+      const { result, rerender } = renderHook(({ spacingValue }) => useSpacingScale(spacingValue), {
+        wrapper
+      })
+      expectedValues.forEach((expectedSize, index) => {
+        rerender({
+          viewport,
+          spacingValue: { space: index, options: { variant: { responsive: true } } }
+        })
+        expect(result.current).toBe(expectedSize)
+      })
+    }
+  )
+
+  it('returns the 0 index when passed a nullish spacing value', () => {
+    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
+      wrapper
+    })
+    // implicit undefined
+    expect(result.current).toBe(expectedDefaultScale[0])
+    // explicit undefined
+    rerender(undefined)
+    expect(result.current).toBe(expectedDefaultScale[0])
+    rerender(null)
+    expect(result.current).toBe(expectedDefaultScale[0])
+
+    // confim this test isn't a false positive misuing rerender etc
+    rerender(1)
+    expect(result.current).toBe(expectedDefaultScale[1])
+  })
+  it('returns the 0 index when passed a nullish spacing value in a variant', () => {
+    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
+      wrapper,
+      initialProps: { options: { variant: { compact: true } } }
+    })
+    // implicit undefined
+    expect(result.current).toBe(expectedCompactScale[0])
+    // explicit undefined
+    rerender({ space: undefined, options: { variant: { compact: true } } })
+    expect(result.current).toBe(expectedCompactScale[0])
+    rerender({ space: null, options: { variant: { compact: true } } })
+    expect(result.current).toBe(expectedCompactScale[0])
+
+    // confim this test isn't a false positive misuing rerender etc
+    rerender({ space: 1, options: { variant: { compact: true } } })
+    expect(result.current).toBe(expectedCompactScale[1])
+  })
+
+  it('returns the highest index when passed an out-of-bounds spacing index', () => {
+    const { result } = renderHook(() => useSpacingScale(99), {
+      wrapper
+    })
+    expect(result.current).toBe(expectedDefaultScale[expectedDefaultScale.length - 1])
+  })
+  it('returns the highest index when passed an out-of-bounds spacing index in a variant', () => {
+    const { result } = renderHook(
+      () => useSpacingScale({ space: 99, options: { variant: { compact: true } } }),
+      {
+        wrapper
+      }
+    )
+    expect(result.current).toBe(expectedCompactScale[expectedDefaultScale.length - 1])
+  })
+
+  it('returns viewport indexes that explicitly match current viewport', () => {
+    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
+    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: 'xs', spacingValue }
+    })
+    expect(result.current).toBe(expectedDefaultScale[1])
+    rerender({ viewport: 'sm', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[2])
+    rerender({ viewport: 'md', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[3])
+    rerender({ viewport: 'lg', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[4])
+    rerender({ viewport: 'xl', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[5])
+  })
+  it('returns viewport indexes that explicitly match current viewport in a variant', () => {
+    const spacingValue = {
+      xs: 1,
+      sm: 2,
+      md: 3,
+      lg: 4,
+      xl: 5,
+      options: { variant: { compact: true } }
+    }
+    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: 'xs', spacingValue }
+    })
+    expect(result.current).toBe(expectedCompactScale[1])
+    rerender({ viewport: 'sm', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[2])
+    rerender({ viewport: 'md', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[3])
+    rerender({ viewport: 'lg', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[4])
+    rerender({ viewport: 'xl', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[5])
+  })
+
+  it('returns viewport indexes that implicitly match current viewport', () => {
+    const spacingValue = { xs: 1, md: 3 }
+    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: 'xs', spacingValue }
+    })
+    expect(result.current).toBe(expectedDefaultScale[1])
+    rerender({ viewport: 'sm', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[1])
+    rerender({ viewport: 'md', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[3])
+    rerender({ viewport: 'lg', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[3])
+    rerender({ viewport: 'xl', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[3])
+  })
+  it('returns viewport indexes that implicitly match current viewport in a variant', () => {
+    const spacingValue = { xs: 1, md: 3, options: { variant: { compact: true } } }
+    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: 'xs', spacingValue }
+    })
+    expect(result.current).toBe(expectedCompactScale[1])
+    rerender({ viewport: 'sm', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[1])
+    rerender({ viewport: 'md', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[3])
+    rerender({ viewport: 'lg', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[3])
+    rerender({ viewport: 'xl', spacingValue })
+    expect(result.current).toBe(expectedCompactScale[3])
+  })
+
+  it('chooses smallest provided viewport index if viewport is unavailable', () => {
+    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
+    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: null, spacingValue }
+    })
+    expect(result.current).toBe(expectedDefaultScale[1])
+  })
+  it('chooses 0 index if current viewport matches no provided index', () => {
+    const spacingValue = { lg: 4 }
+    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: 'xs', spacingValue }
+    })
+    expect(result.current).toBe(expectedDefaultScale[0])
+    rerender({ viewport: 'sm', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[0])
+    rerender({ viewport: 'md', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[0])
+    rerender({ viewport: 'lg', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[4])
+    rerender({ viewport: 'xl', spacingValue })
+    expect(result.current).toBe(expectedDefaultScale[4])
+  })
+
+  it('subtracts a provided value from a spacing scale value', () => {
+    const spacingValue = { viewport: 'xs', space: 2, options: { subtract: 3 } }
+    const { result } = renderHook(() => useSpacingScale(spacingValue), {
+      wrapper
+    })
+    expect(result.current).toBe(expectedDefaultScale[2] - 3)
+  })
+  it('subtracts a provided value from a spacing scale value in a variant', () => {
+    const spacingValue = {
+      space: 4,
+      options: { subtract: 3, variant: { compact: true } }
+    }
+    const { result } = renderHook(() => useSpacingScale(spacingValue), {
+      wrapper
+    })
+    expect(result.current).toBe(expectedCompactScale[4] - 3)
+  })
+  it('returns 0 if a subtraction would result in a negative number', () => {
+    const spacingValue = { space: 2, options: { subtract: 999 } }
+    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { spacingValue }
+    })
+    expect(result.current).toBe(0)
+  })
+
+  it('gives an exact amount if `size` option is passed', () => {
+    const size = 123456
+    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, options: { size } }
+    const compactSpacingValue = { ...spacingValue, options: { size, variant: { compact: true } } }
+    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
+      wrapper,
+      initialProps: { viewport: 'xs', spacingValue }
+    })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'sm', spacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'md', spacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'lg', spacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'xl', spacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'xs', spacingValue: compactSpacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'sm', spacingValue: compactSpacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'md', spacingValue: compactSpacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'lg', spacingValue: compactSpacingValue })
+    expect(result.current).toBe(size)
+    rerender({ viewport: 'xl', spacingValue: compactSpacingValue })
+    expect(result.current).toBe(size)
+  })
+  it('subtracts from size if `subtract` and `size` options are provided', () => {
+    const size = 123456
+    const subtract = 12345
+    const spacingValue = { options: { size, subtract } }
+    const { result } = renderHook(() => useSpacingScale(spacingValue), {
+      wrapper
+    })
+    expect(result.current).toBe(size - subtract)
+  })
+})

package/__tests__/utils/useUniqueId.test.js

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react-hooks'
+import useUniqueId from '../../lib/utils/useUniqueId'
+
+describe('useUniqueId hook', () => {
+  it('returns the same id for each re-render, but a different id for a new instance', () => {
+    const { result, rerender } = renderHook(() => useUniqueId('prefix'))
+
+    expect(result.current).toBe('prefix-1')
+
+    rerender()
+
+    expect(result.current).toBe('prefix-1')
+
+    // has to be done within the same test case, as we can't ensure order in which tests are being run in parallel
+    const { result: result2, rerender: rerender2 } = renderHook(() => useUniqueId('prefix'))
+
+    expect(result.current).toBe('prefix-1')
+    expect(result2.current).toBe('prefix-2')
+
+    // ensure that instances' rerendering doesn't affect one another
+    rerender2()
+
+    expect(result.current).toBe('prefix-1')
+    expect(result2.current).toBe('prefix-2')
+
+    rerender()
+
+    expect(result.current).toBe('prefix-1')
+    expect(result2.current).toBe('prefix-2')
+  })
+})

package/babel.config.json

@@ -0,0 +1,8 @@
+{
+  "presets": [["@babel/preset-react", { "useBuiltIns": true }]],
+  "env": {
+    "test": {
+      "presets": ["module:metro-react-native-babel-preset"]
+    }
+  }
+}

package/jest.config.js

@@ -1,22 +1,23 @@
-const path = require('path')
+const preset = require('react-native/jest-preset')
 const displayName = require('./package.json').name.split('@telus-uds/').pop()
 
+// cherry-pick the bits of the preset we want to avoid it overriding the fix we have on L14
 module.exports = {
+  haste: preset.haste,
   displayName,
-  preset: 'react-native',
+  setupFiles: preset.setupFiles,
   transform: {
-    // Required in addition to be preset since preset omits jsx extension
     // Use babel-jest instead of react-native/jest/preprocessor.js so that the coverage report is correct as per:
     //  https://github.com/facebook/react-native/issues/20404#issuecomment-593392763
     //  https://kulshekhar.github.io/ts-jest/docs/guides/react-native/#jest-config
-    '\\.(jsx)$': 'babel-jest'
+    // __dirname here tells babel to look in components-base for babel root when running from monorepo root
+    '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }]
   },
   setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
-  moduleDirectories: ['node_modules', path.join(__dirname, 'src')],
   moduleNameMapper: {
     '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
   },
-
+  transformIgnorePatterns: preset.transformIgnorePatterns,
   // Count everything in src when calculating coverage
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/A11yInfoProvider/index.js

@@ -1,8 +1,8 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { AccessibilityInfo, Platform } from 'react-native';
-const ScreenReaderContext = createContext(false);
-const ReducedMotionContext = createContext(false);
+const ScreenReaderContext = /*#__PURE__*/createContext(false);
+const ReducedMotionContext = /*#__PURE__*/createContext(false);
 
 const A11yInfoProvider = ({
   children

package/lib/A11yText/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
@@ -26,7 +24,7 @@ const A11yText = ({
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   });
-  return /*#__PURE__*/React.createElement(View, _extends({
+  return /*#__PURE__*/React.createElement(View, Object.assign({
     style: styles.invisible
   }, a11y));
 };

package/lib/ActivityIndicator/Spinner.web.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
 const SVG_RADIUS = 20;
@@ -31,7 +29,7 @@ const Spinner = ({
   "aria-valuetext": label,
   role: "progressbar",
   "aria-busy": true
-}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("animateTransform", _extends({
+}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("animateTransform", Object.assign({
   attributeName: "transform",
   type: "rotate",
   values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`
@@ -45,10 +43,10 @@ const Spinner = ({
   r: "20",
   strokeDasharray: [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
   strokeDashoffset: 0
-}, /*#__PURE__*/React.createElement("animate", _extends({
+}, /*#__PURE__*/React.createElement("animate", Object.assign({
   attributeName: "stroke-dashoffset",
   values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`
-}, animationProps, bezierProps)), /*#__PURE__*/React.createElement("animate", _extends({
+}, animationProps, bezierProps)), /*#__PURE__*/React.createElement("animate", Object.assign({
   attributeName: "stroke-dasharray",
   values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`
 }, animationProps, bezierProps)))));

package/lib/Box/Box.js

@@ -1,111 +1,146 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View, ScrollView } from 'react-native';
-import { useViewport } from '../ViewportProvider';
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import { levelsPropType, responsivePropTypeFactory, variantProp, getTokensPropType } from '../utils/propTypes';
-const propToStyleMap = {
-  top: 'paddingTop',
-  below: 'marginBottom',
-  bottom: 'paddingBottom',
-  left: 'paddingLeft',
-  right: 'paddingRight',
-  vertical: 'paddingVertical',
-  horizontal: 'paddingHorizontal'
-};
-
-const transformPropToStyle = key => propToStyleMap[key];
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, spacingProps, variantProp, getTokensPropType, useSpacingScale } from '../utils';
+/**
+ * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/propTypes.js').SpacingOptions} SpacingOptions
+ */
 
-const getStyleByType = (currentViewPort, styleProp, levels) => {
-  if (typeof styleProp === 'undefined') return null;
-  if (typeof styleProp === 'number') return levels[currentViewPort][styleProp];
-  const spacingValue = styleProp[currentViewPort];
-  return levels[currentViewPort][spacingValue];
-};
+const selectBoxStyles = tokens => {
+  const styles = {
+    backgroundColor: tokens.backgroundColor
+  };
+  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
 
-const getBaseStyle = (currentViewPort, styleProps, levels) => {
-  const styleObject = {};
-  Object.entries(styleProps).forEach(([key, styleProp]) => {
-    const styleKey = transformPropToStyle(key);
-    styleObject[styleKey] = getStyleByType(currentViewPort, styleProp, levels);
+  paddings.forEach(side => {
+    if (tokens[side]) {
+      styles[side] = tokens[side];
+    }
   });
-  return styleObject;
+  return styles;
 };
 /**
- * A layout utility component
+ * A layout utility component. Use Box to create space (padding) around content.
+ *
+ * ## Spacing
+ *
+ * For most simple uses, pass a number to Box's `space` prop referring to an index in the theme's
+ * spacing scale. For example, for a box with the theme's smallest non-zero amount of padding on all sides:
+ *
+ * ```jsx
+ * <Box space={1}>
+ * ```
+ *
+ * #### Targetting specific sides
+ *
+ * Box allows spacing value props to be assigned to any side or all sides using the following props:
+ *
+ * - `space` sets the default for all sides, which is overridden by other props below
+ * - `horizontal` sets defaults for `left` and `right` (overriding `space` there if it is set)
+ * - `vertical` sets defaults for `top` and `bottom` (overriding `space` there if it is set)
+ * - `left` sets the left side padding, inside the box's bounds
+ * - `right` sets the right side padding, inside the box's bounds
+ * - `top` sets the top side padding, inside the box's bounds
+ * - `bottom` sets the bottom side padding, inside the box's bounds
+ *
+ * Box only controls spacing within its bounds. If space is needed around a box outside of its bounds,
+ * use `Spacer`, `StackView` or wrap the `Box` inside another `Box`.
+ *
+ * #### Viewport-specific spacing
+ *
+ * Responsive behaviours may be set by passing any of the above props an object keyed by viewports.
  *
- * > TODO decide on the API we want to offer here
+ * For example, if a theme's spacing scale is [0, 4, 8...], this below will have padding of 4px on top,
+ * bottom, and right, and its left padding will be 0px on xs, sm and md viewports and 8px on lg and xl viewports:
+ *
+ * ```jsx
+ * <Box space={1} left={{ xs: 0, lg: 2 }} />`
+ * ```
+ *
+ * #### Subtracting from spacing
+ *
+ * A parent may sometimes need to reduce the spacing size on one or more sides of a `Box` by some variable.
+ * For example, the parent may have a border on one side and want to reduce the spacing of a child box
+ * by the width of that border on that side. This can be achieved using the `subtract` option of the
+ * spacing object, for example:
+ *
+ * ```jsx
+ * <Box space={2} left={{ space: 2, options: { subtract: themeTokens.borderWidthLeft } }} />`
+ * ```
+ *
+ * See `useSpacingScale` hook for other spacing value options and documentation.
+ *
+ * ## Theming
+ *
+ * Box is intended for layout, so minimal theming is supported. Use components like `Card` for
+ * more sophisticated theming.
+ *
+ * ## Scroll
+ *
+ * If passed, the box will be scrollable. If an object is passed, it will be passed to React Native's
+ * `ScrollView` component as props.
+ *
+ * When building native iOS and Android apps, it is important to remember to ensure any screen containing
+ * 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,
-  top,
-  below,
-  bottom,
-  left,
-  right,
-  vertical,
-  horizontal,
   variant,
   tokens,
-  scroll = false,
-  scrollProps = null
+  scroll,
+  testID,
+  ...rest
 }) => {
-  const theme = useTheme(); // TODO: integrate level resolution with other tokens as part of
-  // https://github.com/telus/universal-design-system/issues/267
-
-  const {
-    levels
-  } = theme.components.Box; // TODO: update Box logic to use viewport as an appearance context and make levels themable
-  // https://github.com/telus/universal-design-system/issues/87
-
-  const viewport = useViewport();
-  const {
-    backgroundColor
-  } = useThemeTokens('Box', tokens, variant);
-  const bkgStyle = {
-    backgroundColor
+  const a11y = a11yProps.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 styleProps = {
-    below,
-    bottom,
-    left,
-    right,
-    top,
-    vertical,
-    horizontal
-  };
-  const baseStyle = getBaseStyle(viewport, styleProps, levels);
-  const styles = [baseStyle, bkgStyle];
 
   if (scroll) {
-    return /*#__PURE__*/React.createElement(ScrollView, _extends({
-      contentContainerStyle: styles
-    }, scrollProps), children);
+    const scrollProps = typeof scroll === 'object' ? scroll : {};
+    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    return /*#__PURE__*/React.createElement(ScrollView, Object.assign({}, scrollProps, a11y, {
+      testID: testID
+    }), children);
   }
 
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles
-  }, children);
-}; // TODO apply props as separate
-
+  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
+    style: styles,
+    testID: testID
+  }), children);
+};
 
-const responsiveLevelsPropType = responsivePropTypeFactory(levelsPropType);
 Box.propTypes = {
-  below: responsiveLevelsPropType,
-  bottom: responsiveLevelsPropType,
-  left: responsiveLevelsPropType,
-  right: responsiveLevelsPropType,
-  top: responsiveLevelsPropType,
-  vertical: responsiveLevelsPropType,
-  horizontal: responsiveLevelsPropType,
-  scroll: PropTypes.bool,
-  scrollProps: PropTypes.object,
+  space: spacingProps.types.spacingValue,
+  vertical: spacingProps.types.spacingValue,
+  horizontal: spacingProps.types.spacingValue,
+  bottom: spacingProps.types.spacingValue,
+  left: spacingProps.types.spacingValue,
+  right: spacingProps.types.spacingValue,
+  top: spacingProps.types.spacingValue,
+  scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
+  testID: PropTypes.string,
   children: PropTypes.node.isRequired
 };
 export default Box;

package/lib/Button/Button.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes from './propTypes';
@@ -8,7 +6,7 @@ import { a11yProps } from '../utils/propTypes';
 const Button = ({
   accessibilityRole = 'button',
   ...props
-}) => /*#__PURE__*/React.createElement(ButtonBase, _extends({}, props, {
+}) => /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, props, {
   accessibilityRole: accessibilityRole
 }));