@telus-uds/components-base 1.0.1 → 1.3.0

package/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|jsx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-a11y']
+}

package/.storybook/preview.js

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@telus-uds/palette-allium/build/rn/fonts/fonts.css'
+import '@telus-uds/palette-koodo/build/rn/fonts/fonts.css'
+import '@telus-uds/palette-public-mobile/build/rn/fonts/fonts.css'
+
+import alliumTheme from '@telus-uds/theme-allium'
+import koodoTheme from '@telus-uds/theme-koodo'
+import pmTheme from '@telus-uds/theme-public-mobile'
+/* eslint-enable import/no-extraneous-dependencies */
+
+import testTheme from '../__fixtures__/testTheme'
+
+import { BaseProvider } from '../src'
+
+const themes = [alliumTheme, koodoTheme, pmTheme, testTheme]
+const themeLookup = themes.reduce((memo, t) => ({ ...memo, [t.metadata.name]: t }), {})
+
+const baseDecorator = (Story, { globals }) => (
+  <BaseProvider key={globals.theme} defaultTheme={themeLookup[globals.theme]}>
+    <Story />
+  </BaseProvider>
+)
+
+export const decorators = [baseDecorator]
+
+// globals persist in browser session store - not fun if you have multiple branded storybooks on the same domain/port
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'UDS theme for components',
+    defaultValue: alliumTheme.metadata.name,
+    toolbar: {
+      icon: 'beaker',
+      items: Object.keys(themeLookup)
+    }
+  }
+}

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+@telus-uds/components-base:build: cache hit, replaying output 00426a473859b487
+@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
+@telus-uds/components-base:build: $ babel src -d lib
+@telus-uds/components-base:build: Successfully compiled 214 files with Babel (15991ms).
+@telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.3.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.2.0...@telus-uds/components-base/v1.3.0) (2022-03-21)
+
+### Features
+
+- **components-base:** add common system props handler and restructure props-related utils ([#1444](https://github.com/telus/universal-design-system/issues/1444)) ([ab655ec](https://github.com/telus/universal-design-system/commit/ab655ec61796b6a6d7094c2c42ceef8b5197c634))
+- **docs:** add tokens override documentation ([#1330](https://github.com/telus/universal-design-system/issues/1330)) ([49092e5](https://github.com/telus/universal-design-system/commit/49092e5d5f6c2d3a85de930a74a03afff8a60062))
+
+### Bug Fixes
+
+- **base:** inherit FlexGrid.Col responsive size if 0 ([#1419](https://github.com/telus/universal-design-system/issues/1419)) ([9defeb0](https://github.com/telus/universal-design-system/commit/9defeb0da08099afb83df9e7ee902f037cb4de02))
+- **ds-allium:** fix some errors in RN builds ([#1448](https://github.com/telus/universal-design-system/issues/1448)) ([8bc4778](https://github.com/telus/universal-design-system/commit/8bc477890f0183584fdc1009d7929b71d23820a3))
+
+## [1.2.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.1.0...@telus-uds/components-base/v1.2.0) (2022-03-02)
+
+### Features
+
+- add withLinkRouter to support router integration ([#1324](https://github.com/telus/universal-design-system/issues/1324)) ([e56f491](https://github.com/telus/universal-design-system/commit/e56f491ac088a005f364330cfc70901532df7cea))
+- **component-base:** refactor ToggleSwitch to use input label and add tooltip support ([#1341](https://github.com/telus/universal-design-system/issues/1341)) ([979da1a](https://github.com/telus/universal-design-system/commit/979da1afb5b319df51026f44299d363f50f1be7d))
+- **components-base:** add ToggleSwitchGroup ([#1307](https://github.com/telus/universal-design-system/issues/1307)) ([402630a](https://github.com/telus/universal-design-system/commit/402630ad04c2d81c4f882fed564cf4ae33096cea))
+
+## [1.1.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.1...@telus-uds/components-base/v1.1.0) (2022-02-28)
+
+### Features
+
+- **component-base:** add some fixes to the list component ([#1226](https://github.com/telus/universal-design-system/issues/1226)) ([35a42e0](https://github.com/telus/universal-design-system/commit/35a42e05e23630696286e7c8607e7a1e8da9d6c2))
+- **ds-allium:** add an Allium List ([#1304](https://github.com/telus/universal-design-system/issues/1304)) ([2f91c74](https://github.com/telus/universal-design-system/commit/2f91c74d6c0b30f09089e8f11beb3739e5be1887))
+- generate component docs ([#1292](https://github.com/telus/universal-design-system/issues/1292)) ([e0c03a5](https://github.com/telus/universal-design-system/commit/e0c03a5c4b5186e97d424c5b1c4594b1dda8201f))
+
+### Bug Fixes
+
+- **base:** no SSR crash on transpiled global CSS ([#1311](https://github.com/telus/universal-design-system/issues/1311)) ([7bc585c](https://github.com/telus/universal-design-system/commit/7bc585cc76bf7d760b1630a6f90f336f2be2abda))
+
 ### [1.0.1](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.0...@telus-uds/components-base/v1.0.1) (2022-02-07)
 
 ### Bug Fixes

package/README.md

@@ -2,4 +2,4 @@
 
 The UDS base components are a set of low level react-native components themed by UDS themes.
 
-Refer to the [UDS monorepo README](../../README.md) for details.
+Refer to the [UDS monorepo README](https://github.com/telus/universal-design-system/#readme) for details.

package/__fixtures__/Accessible.js

@@ -1,5 +1,6 @@
 // this is a copy of an autogenerated file
-/* eslint-disable */
+/* eslint-disable spaced-comment */
+/* eslint-disable react/prop-types */
 
 import * as React from 'react'
 
@@ -25,7 +26,8 @@ const Accessible = ({ title, titleId, size, color }) =>
         )
       : null,
     /*#__PURE__*/ React.createElement('path', {
-      d: 'M4.231 12.257l.662.662a5.87 5.87 0 00-.982 3.235c0 1.585.618 3.078 1.74 4.2a5.903 5.903 0 004.2 1.739 5.839 5.839 0 002.991-.831l.242-.151.647.645c-1.167.81-2.517 1.244-3.88 1.244a6.83 6.83 0 01-4.845-2.003A6.805 6.805 0 013 16.154c0-1.315.378-2.568 1.067-3.65l.165-.247zm5.81-9.99c.178 0 .358.037.527.112l.175.093c.575.334 5.897 3.426 5.907 3.433.307.192.507.492.579.822.124.433.054.913-.22 1.3l-.1.125-2.68 2.738c.106.088.21.178.313.273l.166.162.014.016 5.136-.603.07-.002a1.3 1.3 0 011.3 1.265l-.004.14-.39 6.71a1.46 1.46 0 01-1.455 1.369l-.094-.003a1.456 1.456 0 01-1.362-1.41l.003-.141.337-4.465a.09.09 0 00-.09-.103l-1.71.3a6.86 6.86 0 01-.809 5.367l-.165.254-.66-.66a5.882 5.882 0 00.96-3.206 5.903 5.903 0 00-1.738-4.2 5.904 5.904 0 00-4.201-1.74c-1.06 0-2.073.291-2.966.813l-.24.148-.648-.648a6.827 6.827 0 012.94-1.156l.312-.035 2.507-2.778-1.5-.876L8.33 7.31a1.47 1.47 0 01-2.081.002c-.542-.542-.554-1.423-.078-2.008l.102-.112 2.902-2.596c.244-.217.552-.33.865-.33zm10.24 10.386c.096-.848-.406-.964-.75-.955l-.061.003-3.975.467c.223.338.41.701.576 1.073l.12.28 1.75-.308.077-.022.156-.004c.288 0 .562.125.754.34.15.174.236.392.246.618l-.003.136-.337 4.454a.541.541 0 00.136.389.536.536 0 00.287.171l.086.013c.289 0 .509-.18.567-.422l.015-.093.357-6.14zm-10.24-9.475a.387.387 0 00-.202.056l-.057.043L6.905 5.85c-.215.23-.222.607-.012.817a.558.558 0 00.725.057l.068-.058.027-.027 2.444-2.07 3.024 1.766-2.663 2.952a6.958 6.958 0 012.683.85l.31.183 2.727-2.784a.602.602 0 00.135-.46l-.02-.1-.013-.053a.385.385 0 00-.165-.241l-5.94-3.451a.38.38 0 00-.194-.053zM17.743 1c1.16 0 2.106.945 2.106 2.106a2.11 2.11 0 01-2.106 2.107 2.11 2.11 0 01-2.106-2.107c0-1.161.945-2.106 2.106-2.106zm0 .91a1.196 1.196 0 000 2.392 1.196 1.196 0 000-2.391z',
+      d:
+        'M4.231 12.257l.662.662a5.87 5.87 0 00-.982 3.235c0 1.585.618 3.078 1.74 4.2a5.903 5.903 0 004.2 1.739 5.839 5.839 0 002.991-.831l.242-.151.647.645c-1.167.81-2.517 1.244-3.88 1.244a6.83 6.83 0 01-4.845-2.003A6.805 6.805 0 013 16.154c0-1.315.378-2.568 1.067-3.65l.165-.247zm5.81-9.99c.178 0 .358.037.527.112l.175.093c.575.334 5.897 3.426 5.907 3.433.307.192.507.492.579.822.124.433.054.913-.22 1.3l-.1.125-2.68 2.738c.106.088.21.178.313.273l.166.162.014.016 5.136-.603.07-.002a1.3 1.3 0 011.3 1.265l-.004.14-.39 6.71a1.46 1.46 0 01-1.455 1.369l-.094-.003a1.456 1.456 0 01-1.362-1.41l.003-.141.337-4.465a.09.09 0 00-.09-.103l-1.71.3a6.86 6.86 0 01-.809 5.367l-.165.254-.66-.66a5.882 5.882 0 00.96-3.206 5.903 5.903 0 00-1.738-4.2 5.904 5.904 0 00-4.201-1.74c-1.06 0-2.073.291-2.966.813l-.24.148-.648-.648a6.827 6.827 0 012.94-1.156l.312-.035 2.507-2.778-1.5-.876L8.33 7.31a1.47 1.47 0 01-2.081.002c-.542-.542-.554-1.423-.078-2.008l.102-.112 2.902-2.596c.244-.217.552-.33.865-.33zm10.24 10.386c.096-.848-.406-.964-.75-.955l-.061.003-3.975.467c.223.338.41.701.576 1.073l.12.28 1.75-.308.077-.022.156-.004c.288 0 .562.125.754.34.15.174.236.392.246.618l-.003.136-.337 4.454a.541.541 0 00.136.389.536.536 0 00.287.171l.086.013c.289 0 .509-.18.567-.422l.015-.093.357-6.14zm-10.24-9.475a.387.387 0 00-.202.056l-.057.043L6.905 5.85c-.215.23-.222.607-.012.817a.558.558 0 00.725.057l.068-.058.027-.027 2.444-2.07 3.024 1.766-2.663 2.952a6.958 6.958 0 012.683.85l.31.183 2.727-2.784a.602.602 0 00.135-.46l-.02-.1-.013-.053a.385.385 0 00-.165-.241l-5.94-3.451a.38.38 0 00-.194-.053zM17.743 1c1.16 0 2.106.945 2.106 2.106a2.11 2.11 0 01-2.106 2.107 2.11 2.11 0 01-2.106-2.107c0-1.161.945-2.106 2.106-2.106zm0 .91a1.196 1.196 0 000 2.392 1.196 1.196 0 000-2.391z',
       fillRule: 'evenodd'
     })
   )

package/__fixtures__/Accessible.native.js

@@ -1,5 +1,7 @@
 // this is a copy of an autogenerated file
-/* eslint-disable */
+/* eslint-disable spaced-comment */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable react/prop-types */
 
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
@@ -24,7 +26,8 @@ const Accessible = ({ title, titleId, size, color }) =>
         )
       : null,
     /*#__PURE__*/ React.createElement(Path, {
-      d: 'M4.231 12.257l.662.662a5.87 5.87 0 00-.982 3.235c0 1.585.618 3.078 1.74 4.2a5.903 5.903 0 004.2 1.739 5.839 5.839 0 002.991-.831l.242-.151.647.645c-1.167.81-2.517 1.244-3.88 1.244a6.83 6.83 0 01-4.845-2.003A6.805 6.805 0 013 16.154c0-1.315.378-2.568 1.067-3.65l.165-.247zm5.81-9.99c.178 0 .358.037.527.112l.175.093c.575.334 5.897 3.426 5.907 3.433.307.192.507.492.579.822.124.433.054.913-.22 1.3l-.1.125-2.68 2.738c.106.088.21.178.313.273l.166.162.014.016 5.136-.603.07-.002a1.3 1.3 0 011.3 1.265l-.004.14-.39 6.71a1.46 1.46 0 01-1.455 1.369l-.094-.003a1.456 1.456 0 01-1.362-1.41l.003-.141.337-4.465a.09.09 0 00-.09-.103l-1.71.3a6.86 6.86 0 01-.809 5.367l-.165.254-.66-.66a5.882 5.882 0 00.96-3.206 5.903 5.903 0 00-1.738-4.2 5.904 5.904 0 00-4.201-1.74c-1.06 0-2.073.291-2.966.813l-.24.148-.648-.648a6.827 6.827 0 012.94-1.156l.312-.035 2.507-2.778-1.5-.876L8.33 7.31a1.47 1.47 0 01-2.081.002c-.542-.542-.554-1.423-.078-2.008l.102-.112 2.902-2.596c.244-.217.552-.33.865-.33zm10.24 10.386c.096-.848-.406-.964-.75-.955l-.061.003-3.975.467c.223.338.41.701.576 1.073l.12.28 1.75-.308.077-.022.156-.004c.288 0 .562.125.754.34.15.174.236.392.246.618l-.003.136-.337 4.454a.541.541 0 00.136.389.536.536 0 00.287.171l.086.013c.289 0 .509-.18.567-.422l.015-.093.357-6.14zm-10.24-9.475a.387.387 0 00-.202.056l-.057.043L6.905 5.85c-.215.23-.222.607-.012.817a.558.558 0 00.725.057l.068-.058.027-.027 2.444-2.07 3.024 1.766-2.663 2.952a6.958 6.958 0 012.683.85l.31.183 2.727-2.784a.602.602 0 00.135-.46l-.02-.1-.013-.053a.385.385 0 00-.165-.241l-5.94-3.451a.38.38 0 00-.194-.053zM17.743 1c1.16 0 2.106.945 2.106 2.106a2.11 2.11 0 01-2.106 2.107 2.11 2.11 0 01-2.106-2.107c0-1.161.945-2.106 2.106-2.106zm0 .91a1.196 1.196 0 000 2.392 1.196 1.196 0 000-2.391z',
+      d:
+        'M4.231 12.257l.662.662a5.87 5.87 0 00-.982 3.235c0 1.585.618 3.078 1.74 4.2a5.903 5.903 0 004.2 1.739 5.839 5.839 0 002.991-.831l.242-.151.647.645c-1.167.81-2.517 1.244-3.88 1.244a6.83 6.83 0 01-4.845-2.003A6.805 6.805 0 013 16.154c0-1.315.378-2.568 1.067-3.65l.165-.247zm5.81-9.99c.178 0 .358.037.527.112l.175.093c.575.334 5.897 3.426 5.907 3.433.307.192.507.492.579.822.124.433.054.913-.22 1.3l-.1.125-2.68 2.738c.106.088.21.178.313.273l.166.162.014.016 5.136-.603.07-.002a1.3 1.3 0 011.3 1.265l-.004.14-.39 6.71a1.46 1.46 0 01-1.455 1.369l-.094-.003a1.456 1.456 0 01-1.362-1.41l.003-.141.337-4.465a.09.09 0 00-.09-.103l-1.71.3a6.86 6.86 0 01-.809 5.367l-.165.254-.66-.66a5.882 5.882 0 00.96-3.206 5.903 5.903 0 00-1.738-4.2 5.904 5.904 0 00-4.201-1.74c-1.06 0-2.073.291-2.966.813l-.24.148-.648-.648a6.827 6.827 0 012.94-1.156l.312-.035 2.507-2.778-1.5-.876L8.33 7.31a1.47 1.47 0 01-2.081.002c-.542-.542-.554-1.423-.078-2.008l.102-.112 2.902-2.596c.244-.217.552-.33.865-.33zm10.24 10.386c.096-.848-.406-.964-.75-.955l-.061.003-3.975.467c.223.338.41.701.576 1.073l.12.28 1.75-.308.077-.022.156-.004c.288 0 .562.125.754.34.15.174.236.392.246.618l-.003.136-.337 4.454a.541.541 0 00.136.389.536.536 0 00.287.171l.086.013c.289 0 .509-.18.567-.422l.015-.093.357-6.14zm-10.24-9.475a.387.387 0 00-.202.056l-.057.043L6.905 5.85c-.215.23-.222.607-.012.817a.558.558 0 00.725.057l.068-.058.027-.027 2.444-2.07 3.024 1.766-2.663 2.952a6.958 6.958 0 012.683.85l.31.183 2.727-2.784a.602.602 0 00.135-.46l-.02-.1-.013-.053a.385.385 0 00-.165-.241l-5.94-3.451a.38.38 0 00-.194-.053zM17.743 1c1.16 0 2.106.945 2.106 2.106a2.11 2.11 0 01-2.106 2.107 2.11 2.11 0 01-2.106-2.107c0-1.161.945-2.106 2.106-2.106zm0 .91a1.196 1.196 0 000 2.392 1.196 1.196 0 000-2.391z',
       fillRule: 'evenodd'
     })
   )

package/__fixtures__/testTheme.js

@@ -1515,6 +1515,15 @@ export default {
         }
       ]
     },
+    ToggleSwitchGroup: {
+      tokens: {
+        space: 2,
+        direction: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        flexGrow: 1
+      }
+    },
     TextInput: {
       appearances: {
         validation: appearances.TextInput.validation,

package/__tests__/FlexGrid/Col.test.jsx

@@ -48,7 +48,6 @@ describe('FlexGrid.Col offsets', () => {
     )
     const expectIfOffsetExpected = (propViewport) => {
       const target = getByText(`${propViewport}Offset`).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfOffsetExpected('xs').toHaveStyle(getOffsetStyle('xs'))
@@ -104,7 +103,6 @@ describe('FlexGrid.Col sizes', () => {
 
     const expectIfSizeExpected = (propViewport) => {
       const target = getByText(propViewport).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfSizeExpected('xs').toHaveStyle(getNumericSizeStyle('xs'))
@@ -154,7 +152,6 @@ describe('FlexGrid.Col sizes', () => {
 
     const expectIfSizeExpected = (text) => {
       const target = getByText(text).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[text] ? expect(target) : expect(target).not
     }
     expectIfSizeExpected('xs-md').toHaveStyle(getNumericSizeStyle('xs'))
@@ -166,16 +163,17 @@ describe('FlexGrid.Col sizes', () => {
   })
 
   // Testing special "hiding" case on passing xs, sm, md, lg, xl props as 0.
-  // Doesn't inherit like other values for these props, only applies to the given prop
+  // Should inherit like other values for these props, confirmed in:
+  // https://github.com/telus/universal-design-system/pull/364#discussion_r671382300
   it.each(
     // true here indicates hiding styles should apply
     // Align expected results like a table so they're easier to read
     /* prettier-ignore */ [
     ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
-    ['sm', { xs: false, sm: true,  md: false, lg: false, xl: false }],
-    ['md', { xs: false, sm: false, md: true,  lg: false, xl: false }],
-    ['lg', { xs: false, sm: false, md: false, lg: true,  xl: false }],
-    ['xl', { xs: false, sm: false, md: false, lg: false, xl: true  }]
+    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
+    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
+    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
+    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
   ]
   )('applies hiding styles from one prop at viewport "%s"', (viewport, expected) => {
     const hidingStyle = { display: 'none' }
@@ -199,7 +197,6 @@ describe('FlexGrid.Col sizes', () => {
     )
     const expectIfHidingExpected = (propViewport) => {
       const target = getByText(propViewport).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfHidingExpected('xs').toHaveStyle(hidingStyle)
@@ -248,7 +245,6 @@ describe('FlexGrid.Col horizontalAlign', () => {
 
     const expectIfAlignExpected = (propViewport) => {
       const target = getByText(propViewport).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfAlignExpected('xs').toHaveStyle(alignRightStyle)

package/__tests__/HorizontalScroll/HorizontalScroll.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import { Pressable, Text, View } from 'react-native'
 import { fireEvent, render } from '@testing-library/react-native'

package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx

@@ -69,4 +69,14 @@ describe('ToggleSwitch', () => {
     expect(handleChange).toHaveBeenLastCalledWith(true, { nativeEvent: 'example' })
     expect(queryAllByA11yState(checked)).toHaveLength(0)
   })
+
+  it('displays the label', () => {
+    const label = 'Toggle me!'
+    const { getByText } = render(
+      <Theme>
+        <ToggleSwitch label={label} />
+      </Theme>
+    )
+    expect(getByText(label)).toBeTruthy()
+  })
 })

package/__tests__/ToggleSwitch/ToggleSwitchGroup.test.jsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { render, fireEvent, within } from '@testing-library/react-native'
+
+import Theme from '../../__fixtures__/Theme'
+import ToggleSwitchGroup from '../../src/ToggleSwitch/ToggleSwitchGroup'
+
+const items = [
+  { label: 'One', id: 'one', accessibilityLabel: 'Option one' },
+  { label: 'Two', id: 'two', accessibilityLabel: 'Option two' },
+  { label: 'Three', id: 'three', accessibilityLabel: 'Option three' },
+  { label: 'Four', id: 'four', accessibilityLabel: 'Option four' }
+]
+const checked = { checked: true }
+const setup = (props) =>
+  render(
+    <Theme>
+      <ToggleSwitchGroup items={items} {...props} />
+    </Theme>
+  )
+
+const hasA11yLabel = (queryResult, label) =>
+  queryResult.some((testInstance) => within(testInstance).queryAllByA11yLabel(label).length)
+
+describe('ToggleSwitchGroup', () => {
+  describe('when uncontrolled', () => {
+    it('toggles on one and only one item by default', async () => {
+      const { getAllByA11yRole, queryAllByA11yState } = setup()
+
+      expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+      const switches = getAllByA11yRole('radio')
+      const one = switches[0]
+      await fireEvent.press(one)
+      let toggledOn = queryAllByA11yState(checked)
+      expect(toggledOn).toHaveLength(1)
+      expect(hasA11yLabel(toggledOn, 'Option one')).toBeTruthy()
+
+      const two = switches[1]
+      await fireEvent.press(two)
+      toggledOn = queryAllByA11yState(checked)
+      expect(toggledOn).toHaveLength(1)
+      expect(hasA11yLabel(toggledOn, 'Option two')).toBeTruthy()
+    })
+
+    it('is accessible as a radio group by default', async () => {
+      const { queryAllByA11yRole } = setup()
+      expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
+      expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
+      const switches = queryAllByA11yRole('radio')
+      expect(switches).toHaveLength(4)
+    })
+
+    it('is accessible as checkboxes button when maxValues > 1', async () => {
+      const { queryAllByA11yRole, queryAllByA11yState } = setup({ maxValues: 2 })
+
+      expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
+      expect(queryAllByA11yRole('radio')).toHaveLength(0)
+
+      const switches = queryAllByA11yRole('switch')
+      expect(switches).toHaveLength(4)
+
+      expect(queryAllByA11yState(checked)).toHaveLength(0)
+      await fireEvent.press(switches[0])
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+    })
+
+    it('selects unlimited items when maxValues is turned off', async () => {
+      const { getAllByA11yRole, queryAllByA11yState } = setup({ maxValues: null })
+
+      expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+      const switches = getAllByA11yRole('switch')
+      const one = switches[0]
+      await fireEvent.press(one)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const two = switches[1]
+      await fireEvent.press(two)
+      expect(queryAllByA11yState(checked)).toHaveLength(2)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const three = switches[2]
+      await fireEvent.press(three)
+      expect(queryAllByA11yState(checked)).toHaveLength(3)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+    })
+
+    it('auto-selects any provided initialValues', async () => {
+      const { queryAllByA11yState } = setup({
+        initialValues: ['one', 'two'],
+        maxValues: 2
+      })
+      expect(queryAllByA11yState(checked)).toHaveLength(2)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option four')).not.toBeTruthy()
+    })
+  })
+
+  describe('when controlled', () => {
+    it('calls onChange handler on press in controlled mode, providing pressed id', async () => {
+      const handleChange = jest.fn((arg) => arg)
+      const { getAllByA11yRole } = setup({ values: [], onChange: handleChange })
+
+      expect(handleChange).toHaveBeenCalledTimes(0)
+
+      const switches = getAllByA11yRole('radio')
+      const one = switches[0]
+      await fireEvent(one, 'press', { nativeEvent: 'example' })
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      expect(handleChange).toHaveBeenCalledWith(['one'], { nativeEvent: 'example' })
+
+      const two = switches[1]
+      await fireEvent(two, 'press', { nativeEvent: 'example2' })
+      expect(handleChange).toHaveBeenCalledTimes(2)
+      expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
+    })
+
+    it("doesn't change its own selection if `values` is passed", async () => {
+      const { getByA11yLabel, queryAllByA11yState } = setup({ values: ['one'], onChange: () => {} })
+
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const one = getByA11yLabel('Option one')
+      await fireEvent.press(one)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const two = getByA11yLabel('Option two')
+      await fireEvent.press(two)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+    })
+
+    it('does not render an invalid `values` invalidly', async () => {
+      const { queryAllByA11yState } = setup({
+        values: ['one', 'two', 'three'],
+        maxValues: 2,
+        onChange: () => {}
+      })
+      expect(queryAllByA11yState(checked)).toHaveLength(2)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).toBeTruthy()
+    })
+  })
+
+  describe('when read-only', () => {
+    it("doesn't call onChange handler when read-only", async () => {
+      const handleChange = jest.fn((arg) => arg)
+      const { getByA11yLabel } = setup({ values: [], onChange: handleChange, readOnly: true })
+
+      expect(handleChange).toHaveBeenCalledTimes(0)
+
+      const one = getByA11yLabel('Option one')
+      await fireEvent.press(one)
+      expect(handleChange).toHaveBeenCalledTimes(0)
+
+      const two = getByA11yLabel('Option two')
+      await fireEvent.press(two)
+      expect(handleChange).toHaveBeenCalledTimes(0)
+    })
+
+    it("doesn't change its selection on press", async () => {
+      const { getByA11yLabel, queryAllByA11yState } = setup({
+        values: ['one'],
+        readOnly: true
+      })
+
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const one = getByA11yLabel('Option one')
+      await fireEvent.press(one)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const two = getByA11yLabel('Option two')
+      await fireEvent.press(two)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+    })
+  })
+})

package/__tests__/utils/props.test.js

@@ -0,0 +1,36 @@
+import { selectSystemProps } from '../../src/utils'
+
+describe('selectSystemProps', () => {
+  it('reduces the selectors and the types correctly', () => {
+    const somePropNames = ['a', 'b']
+    const someTypes = { a: 1, b: 2 }
+    const someOtherPropNames = ['c', 'd']
+    const someOtherTypes = { c: 3, d: 4 }
+    const reducer = (props) => (acc, allowedPropName) =>
+      allowedPropName in props ? { ...acc, [allowedPropName]: props[allowedPropName] } : acc
+    const exampleProps = { a: 'a', c: 'c', e: 'e' }
+    const [selectProps, selectedPropTypes] = selectSystemProps([
+      { select: (props) => somePropNames.reduce(reducer(props), {}), types: someTypes },
+      { select: (props) => someOtherPropNames.reduce(reducer(props), {}), types: someOtherTypes }
+    ])
+    expect(selectProps(exampleProps)).toEqual({ a: 'a', c: 'c' })
+    expect(selectedPropTypes).toEqual({ a: 1, b: 2, c: 3, d: 4 })
+  })
+
+  it('returns selector throwing if one of the prop helpers does not have any valid prop selectors', () => {
+    const [selectProps] = selectSystemProps([{ types: {} }])
+    expect(() => {
+      selectProps({ someProp: 'some value' })
+    }).toThrowError(
+      "An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in"
+    )
+  })
+
+  it('throws if one of the prop helpers does not have any valid prop types selectors', () => {
+    expect(() => {
+      selectSystemProps([{ select: () => {} }])
+    }).toThrowError(
+      "An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in"
+    )
+  })
+})

package/__tests__/utils/semantics.test.jsx

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native'
 
-import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
+import { getA11yPropsFromHtmlTag, supportedTags } from '../../src'
 
 // Note that currently all tests run as ios so only native logic can be tested here
 // until cross-platform tests are set up. See issue:
@@ -8,16 +8,7 @@ import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
 
 // As a temporary measure, there are tests on web-context HTML output for Box component
 // in @telus-uds/ds-allium which test the actual output when the tags are rendered.
-
-// These tests will therefore just test the values returned in a native context.
 describe('getA11yPropsFromHtmlTag', () => {
-  it.each(Object.entries(tagsToRoles))(
-    'responds to tag "%s" with accessibilityRole "%s"',
-    (tag, role) => {
-      expect(getA11yPropsFromHtmlTag(tag)).toEqual({ accessibilityRole: role })
-    }
-  )
-
   it.each([
     [1, 'h1'],
     [2, 'h2'],

package/babel.config.js

@@ -1,20 +1,13 @@
-module.exports = {
-  env: {
-    /*
-     * we actually want this setup to be used whenever we're not in `test` but
-     * babel merges plugins array rather than replacing so we can't set it as a
-     * default. However the default BABEL_ENV value is development (jest sets it
-     * to test)
-     */
-    development: {
-      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
-      plugins: [['react-native-web', { commonjs: true }]]
-    },
-    /*
-     * jest is testing for just ios at the moment, use a preset which best matches that env
-     */
-    test: {
+module.exports = (api) => {
+  const env = api.cache(() => process.env.NODE_ENV)
+  if (env === 'test') {
+    // configuration for jest
+    return {
       presets: ['module:metro-react-native-babel-preset']
     }
   }
+  return {
+    presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
+    plugins: [['react-native-web', { commonjs: true }]]
+  }
 }