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

package/lib/ViewportProvider/useViewportListener.js

@@ -0,0 +1,43 @@
+import { useLayoutEffect } from 'react';
+import { Dimensions } from 'react-native';
+import { viewports } from '@telus-uds/system-constants'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+// to update on every pixel change during window resize; but we only want rerenders to occur
+// when a viewport threshold has been crossed.
+
+const lookupViewport = () => viewports.select(Dimensions.get('window').width);
+/**
+ * In SSR, React gets spooked if it sees `useLayoutEffect` and fires warnings assuming the
+ * developer doesn't realise the effect won't run: https://reactjs.org/link/uselayouteffect-ssr
+ *
+ * To avoid these warnings while still conforming to the rules of hooks, always use this
+ * explicitly no-op hook, instead of the useLayoutEffect that is implicitly no-op on SSR.
+ */
+
+
+const useViewportListenerSSR = () => {};
+/**
+ * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
+ * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
+ * is shown to the user. Then bind events to update the viewport if it changes.
+ */
+
+
+const useViewportListenerCSR = setViewport => {
+  useLayoutEffect(() => {
+    setViewport(lookupViewport());
+
+    const onChange = ({
+      window
+    }) => setViewport(viewports.select(window.width));
+
+    const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
+    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
+
+    return listener?.remove || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+  }, [setViewport]);
+}; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
+
+
+const isSSR = typeof window === 'undefined';
+const useViewportListener = isSSR ? useViewportListenerSSR : useViewportListenerCSR;
+export default useViewportListener;

package/lib/index.js

@@ -1,19 +1,33 @@
+export { default as A11yText } from './A11yText';
 export { default as ActivityIndicator } from './ActivityIndicator';
 export { default as Box } from './Box';
 export * from './Button';
 export { default as Card } from './Card';
+export { default as Checkbox } from './Checkbox';
 export { default as Divider } from './Divider';
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
+export { default as Feedback } from './Feedback';
 export { default as FlexGrid } from './FlexGrid';
 export { default as Icon } from './Icon';
 export * from './Icon';
 export * from './Link';
+export { default as List } from './List';
 export { default as Pagination } from './Pagination';
+export { default as Radio } from './Radio';
+export { default as Select } from './Select';
 export { default as SideNav } from './SideNav';
+export { default as Skeleton } from './Skeleton';
+export { default as Spacer } from './Spacer';
+export { default as StackView } from './StackView';
+export * from './StackView';
+export { default as Tags } from './Tags';
+export * from './TextInput';
 export { default as ToggleSwitch } from './ToggleSwitch';
+export { default as Tooltip } from './Tooltip';
+export { default as TooltipButton } from './TooltipButton';
 export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider';
 export * from './utils';

package/lib/utils/a11y/index.js

@@ -0,0 +1 @@
+export * from './textSize';

package/lib/utils/a11y/textSize.js

@@ -0,0 +1,33 @@
+import { PixelRatio, Platform } from 'react-native';
+/**
+ * When a user increases text size using device accessibility settings, some elements
+ * should also scale, such as icons alongside text and space between paragraphs.
+ *
+ * @param {number} [value] - the value to multiply; defaults to system default font size
+ * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
+ */
+
+export const scaleWithText = (value, maxScale = Infinity) => {
+  if (!value) return value;
+  const scale = Math.min(PixelRatio.getFontScale(), maxScale) || 1;
+  return value * scale;
+};
+/**
+ * Native only, returns `undefined` on Web.
+ *
+ * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
+ * after iOS or Android font scaling, to give consistent accessible maximum sizes
+ * that don't make the content unusable.
+ *
+ * The return value of this function can be used as a React Native `Text` element's
+ * `maxFontSizeMultiplier` prop value.
+ */
+
+export const getMaxFontMultiplier = ({
+  fontSize,
+  fontScaleCap
+}) => {
+  if (Platform.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
+  if (fontScaleCap <= fontSize) return 1;
+  return fontScaleCap / fontSize;
+};

package/lib/utils/index.js

@@ -1,4 +1,10 @@
+export * from './a11y';
 export * from './animation';
 export * from './input';
+export * from './pressability';
 export * from './propTypes';
-export * from './spacing';
+export { default as info } from './info';
+export { default as useSpacingScale } from './useSpacingScale';
+export { default as useResponsiveProp } from './useResponsiveProp';
+export * from './useResponsiveProp';
+export { default as useUniqueId } from './useUniqueId';

package/lib/utils/info/index.js

@@ -0,0 +1,7 @@
+import platform from './platform';
+import versions from './versions'; // export an object accessed like info.platform.OS, info.version.uds, etc
+
+export default {
+  platform,
+  versions
+};

package/lib/utils/info/platform/index.js

@@ -0,0 +1,11 @@
+import { Platform } from 'react-native';
+import fileSuffix from './platform'; // Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+
+export default {
+  OS: Platform.OS,
+  fileSuffix
+};

package/lib/utils/info/platform/platform.android.js

@@ -0,0 +1 @@
+export default '.android';

package/lib/utils/info/platform/platform.ios.js

@@ -0,0 +1 @@
+export default '.ios';

package/lib/utils/info/platform/platform.native.js

@@ -0,0 +1,4 @@
+// This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
+// If this gets picked, either an unsupported React Native platform is being used somehow
+// (e.g. a native Windows app), or there's a serious config problem somewhere.
+export default '.native';

package/lib/utils/info/platform/platform.web.js

@@ -0,0 +1 @@
+export default '.web';

package/lib/utils/info/versions.js

@@ -0,0 +1,5 @@
+import { version } from '../../../package.json'; // Add more versions if they are useful e.g. theme schema version
+
+export default {
+  uds: version
+};

package/lib/utils/input.js

@@ -60,6 +60,7 @@ Consumers of this hook must be one of:
  *   currentValue: any
  *   setValue: (value: any) => void
  *   resetValue: () => void
+ *   isControlled: bool
  * }}
  */
 
@@ -91,7 +92,8 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   return {
     currentValue,
     setValue,
-    resetValue
+    resetValue,
+    isControlled
   };
 };
 /**

package/lib/utils/pressability.js

@@ -0,0 +1,92 @@
+import { Platform, StyleSheet } from 'react-native';
+import { pressProps } from './propTypes'; // These roles should result in cursor: pointer but don't in current RNW releases
+
+const shouldUseCursor = ['checkbox', 'radio', 'switch'];
+/**
+ * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
+ * however, it misses certain cases. This fills in known cases where widely used versions of RNW
+ * fail to apply an expected cursor style.
+ *
+ * @param {object} props
+ * @param {boolean} [props.inactive]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accessibilityRole]
+ * @returns
+ */
+
+export const getCursorStyle = ({
+  inactive,
+  disabled,
+  accessibilityRole
+}) => {
+  if (Platform.OS !== 'web') return undefined;
+  if (inactive || disabled) return staticStyles.notAllowed;
+  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
+  return undefined; // allows React Native Web's built-in logic to apply
+};
+/**
+ * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
+ */
+
+/**
+ * Maps the state object given by the React Native `Pressable` component to the set of
+ * equivalent appearance names used in UDS.
+ *
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
+ *   render functions passed to its `style` or `children` props.
+ * @param {object} [additionalState] - properties specific to the current component,
+ *   such as `inactive`, `selected`, etc.
+ * @returns {object}
+ */
+
+export const resolvePressableState = ({
+  pressed = false,
+  focused = false,
+  hovered = false
+} = {}, additionalState) => ({ ...additionalState,
+  focus: focused,
+  hover: hovered,
+  pressed
+});
+/**
+ * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
+ * object passed from the React Native `Pressable` component and optional extra properties.
+ *
+ * @param {object|function} tokens - UDS system tokens prop
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
+ * @param {object} [additionalState] - properties specific to the current component
+ * @returns {object} - resolved tokens object
+ */
+
+export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+  if (typeof tokens !== 'function') return tokens;
+  const udsPressableState = resolvePressableState(pressableState, additionalState);
+  return tokens(udsPressableState);
+};
+const staticStyles = StyleSheet.create(Platform.select({
+  web: {
+    notAllowed: {
+      cursor: 'not-allowed'
+    },
+    pointer: {
+      cursor: 'pointer'
+    }
+  },
+  default: {}
+}));
+/**
+ * From an object of props, extracts any platform-appropriate press handler functions and wraps
+ * them in a function that passes in some provided args. Allows components containing a Pressable
+ * to pass in press handlers that are then called with state or values that is otherwise internal.
+ */
+
+export const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+  // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
+  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+    [key]: (...defaultArgs) => {
+      // Pass each handler data on this button and current selection
+      handler(...args, ...defaultArgs);
+    }
+  })));
+  return pressHandlers;
+};

package/lib/utils/propTypes.js

@@ -1,6 +1,22 @@
 import PropTypes from 'prop-types';
 import { Linking, Platform } from 'react-native';
-import { tokenKeys } from '@telus-uds/tools-theme';
+import { components as tokenKeys } from '@telus-uds/system-themes/schema';
+export const paddingProp = {
+  propType: PropTypes.shape({
+    paddingBottom: PropTypes.number,
+    paddingLeft: PropTypes.number,
+    paddingRight: PropTypes.number,
+    paddingTop: PropTypes.number
+  })
+};
+export const rectProp = {
+  propType: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })
+};
 /**
  * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
  * @typedef {AppearanceSet} VariantProp
@@ -27,7 +43,7 @@ const getTokenNames = componentName => {
   const componentTokenNames = tokenKeys[componentName];
 
   if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/tools-theme`);
+    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-themes/schema`);
   }
 
   return componentTokenNames;
@@ -57,10 +73,33 @@ export const selectTokens = (componentName, tokens) => {
  *
  * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
  * where the main theming system doesn't apply. It is intentionally permissive about values.
+ *
+ * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
+ * @return {function} - a custom PropTypes validator
+ *
+ * @example
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in Component schema
+ *   tokens: getTokensPropType('Component')
+ * }
+ *
+ * Component.propTypes = {
+ *   // accepts all tokens keys defined in schemas for Component1 and Component2
+ *   tokens: getTokensPropType('Component1', 'Component2')
+ * }
  */
 
-export const getTokensPropType = componentName => PropTypes.oneOfType([PropTypes.shape(Object.fromEntries(getTokenNames(componentName).map(key => [key, tokenValueType]))), PropTypes.func // function that takes current appearances and returns above shape
-]);
+export const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
+  PropTypes.checkPropTypes({
+    [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+  }, props, propName, componentName);
+
+  if (typeof props[propName] !== 'function') {
+    PropTypes.checkPropTypes({
+      [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+    }, props, propName, componentName);
+  }
+};
 
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes);
@@ -140,7 +179,27 @@ export const a11yProps = {
         accessibilityElementsHidden: true
       }
     })
-  }
+  },
+
+  /**
+   * Generates an object of platform-appropriate a11y props describing an item that has an
+   * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
+   * saying "Item X of Y" when this item is select.
+   *
+   * @param {number} itemsCount - the number of items in the set
+   * @param {number} index - the current item's index in the set
+   * @returns {object} - platform-applicable a11y props describing this position (if available)
+   */
+  getPositionInSet: (itemsCount, index) => Platform.select({
+    web: {
+      // accessibilityPosInSet etc exists in React Native Web main branch
+      // but not in a release compatible with Expo etc; just use `aria-*`
+      'aria-setsize': itemsCount,
+      'aria-posinset': index + 1
+    },
+    // No equivalents exist on the native side
+    default: {}
+  })
 }; // Props related to HTML <a> anchor link attributes.
 
 const targetValues = ['_self', '_blank', '_parent', '_top'];
@@ -194,7 +253,7 @@ export const hrefAttrsProp = {
 
   })
 };
-const pressPropTypes = {
+const pressHandlerPropTypes = {
   onPress: PropTypes.func,
   onPressIn: PropTypes.func,
   onPressOut: PropTypes.func,
@@ -205,7 +264,16 @@ const pressPropTypes = {
       onFocus: PropTypes.func,
       onBlur: PropTypes.func
     },
-    default: {}
+    default: {
+      onLongPress: PropTypes.func
+    }
+  })
+};
+const pressPropTypes = { ...pressHandlerPropTypes,
+  disabled: PropTypes.bool,
+  ...Platform.select({
+    hitSlop: PropTypes.number,
+    pressRetentionOffset: PropTypes.oneOfType([PropTypes.number, rectProp.propType])
   })
 };
 export const pressProps = {
@@ -217,7 +285,8 @@ export const pressProps = {
   /**
    * Filters a props object, returning only the platform-relevant press props defined above
    */
-  select: getPropSelector(pressPropTypes)
+  select: getPropSelector(pressPropTypes),
+  selectHandlers: getPropSelector(pressHandlerPropTypes)
 };
 const linkPropTypes = { ...pressPropTypes,
   href: PropTypes.string,

package/lib/utils/useCopy.js

@@ -0,0 +1,16 @@
+/**
+ * Extract translations from a keyed dictionary for a given language.
+ * Returns a getter.
+ *
+ * @param {object} dictionary
+ * @param {'en'|'fr'} copy - language
+ * @return {function(string): string}
+ */
+function useCopy({
+  dictionary,
+  copy
+}) {
+  return key => dictionary[copy][key];
+}
+
+export default useCopy;

package/lib/utils/useResponsiveProp.js

@@ -0,0 +1,47 @@
+import { viewports } from '@telus-uds/system-constants';
+import { useViewport } from '../ViewportProvider';
+
+const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
+
+const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwn(objectProp, key));
+/**
+ * Resolves a prop which may be a responsive object with keys for viewports.
+ *
+ * Used internally in useResponsiveProp - see that for more details.
+ *
+ * @param {*} prop
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} viewport
+ * @param {*} [defaultValue]
+ * @returns {*}
+ */
+
+
+export 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))];
+  return value === undefined ? defaultValue : value;
+};
+/**
+ * Takes any value and, if that value is a responsive prop (an object with one or more
+ * keys matching system viewport names), returns the value corresponding to the largest
+ * viewport key smaller than the current screen's viewport.
+ *
+ * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
+ * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
+ *
+ * To generate propTypes for responsive props, see `responsiveProps` in `./utils/propTypes.js`.
+ *
+ * @param {*} prop - any value which may be an object with viewport keys
+ * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
+ * @returns {*}
+ */
+
+const useResponsiveProp = (prop, defaultValue) => {
+  const viewport = useViewport();
+  return resolveResponsiveProp(prop, viewport, defaultValue);
+};
+
+export default useResponsiveProp;

package/lib/utils/{spacing/useSpacingScale.js → useSpacingScale.js}

@@ -1,14 +1,34 @@
-import { useViewport } from '../../ViewportProvider';
-import { useThemeTokens } from '../../ThemeProvider';
-import { resolveSpacingValue, resolveSpacingOptions } from './utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import { resolveResponsiveProp } from './useResponsiveProp';
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('../propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('../propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('./propTypes.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
  */
 
+const resolveSpacingOptions = space => {
+  if (!space?.options) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
+  // https://github.com/telus/universal-design-system/issues/583
+
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -79,6 +99,7 @@ import { resolveSpacingValue, resolveSpacingOptions } from './utils';
  * @returns {number}
  */
 
+
 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.
@@ -89,11 +110,11 @@ const useSpacingScale = spaceValue => {
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = overridden ? null : resolveSpacingValue(spaceValue, viewport);
+  const space = !overridden && (spaceValue?.space ?? resolveResponsiveProp(spaceValue, viewport, 0));
   const {
     size
   } = useThemeTokens('spacingScale', tokens, variant, {
-    space,
+    space: typeof space === 'number' ? space : 0,
     viewport
   });
   return Math.max(size - subtract, 0);

package/lib/utils/useUniqueId.js

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+let id = 0;
+
+function useUniqueId(prefix = '') {
+  const [uniqueId] = useState(() => {
+    id += 1;
+    return `${prefix}-${id}`;
+  });
+  return uniqueId;
+}
+
+export default useUniqueId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.3",
+  "version": "0.0.2-prerelease.7",
   "description": "Base components",
   "keywords": [
     "base"
@@ -36,8 +36,9 @@
   },
   "peerDependencies": {
     "react": "*",
+    "react-dom": "*",
     "react-native": "*",
-    "react-native-web": "^0.14.13"
+    "react-native-web": "~0.14.13"
   },
   "devDependencies": {
     "@testing-library/jest-native": "^4.0.1",
@@ -46,9 +47,10 @@
     "react-test-renderer": "^16.3.2"
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.2",
+    "@telus-uds/system-constants": "^0.0.2-prerelease.2",
+    "@telus-uds/system-themes": "^0.0.2-prerelease.0",
     "lodash.merge": "^4.6.2",
-    "prop-types": "^15.7.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.2",
-  "changelog": "### [0.0.2-prerelease.3](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.2...@telus-uds/components-base/v0.0.2-prerelease.3) (2021-10-12)\n\n\n### Features\n\n* **base:** add `Card` component ([#597](https://github.com/telus/universal-design-system/issues/597)) ([9e29d3c](https://github.com/telus/universal-design-system/commit/9e29d3c426c7082ec4d54a0c9d353986c0cc0b01))\n* **base:** add useSpacingScale hook, apply to Box ([#606](https://github.com/telus/universal-design-system/issues/606)) ([5109b4f](https://github.com/telus/universal-design-system/commit/5109b4f7537b8a732b86e34675bef992a54873e5))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.3",
-  "newVersion": "0.0.2-prerelease.3",
+  "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",
   "packageName": "@telus-uds/components-base"
 }

package/src/Box/Box.jsx

@@ -99,6 +99,7 @@ const Box = ({
   variant,
   tokens,
   scroll,
+  testID,
   ...rest
 }) => {
   const a11y = a11yProps.select(rest)
@@ -116,13 +117,13 @@ const Box = ({
     const scrollProps = typeof scroll === 'object' ? scroll : {}
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
     return (
-      <ScrollView {...scrollProps} {...a11y}>
+      <ScrollView {...scrollProps} {...a11y} testID={testID}>
         {children}
       </ScrollView>
     )
   }
   return (
-    <View {...a11y} style={styles}>
+    <View {...a11y} style={styles} testID={testID}>
       {children}
     </View>
   )
@@ -142,6 +143,7 @@ Box.propTypes = {
   ]),
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
+  testID: PropTypes.string,
   children: PropTypes.node.isRequired
 }