@telus-uds/components-base 1.1.0 → 1.3.1

package/.turbo/turbo-build.log

@@ -0,0 +1,8 @@
+@telus-uds/components-base:build: cache hit, replaying output 4c5b413de9c92c19
+@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
+@telus-uds/components-base:build: $ yarn build:main && yarn build:module
+@telus-uds/components-base:build: $ babel src -d lib
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (14990ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (11089ms).
+@telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js

package/CHANGELOG.json

@@ -0,0 +1,38 @@
+{
+  "name": "@telus-uds/components-base",
+  "entries": [
+    {
+      "date": "Wed, 30 Mar 2022 09:49:08 GMT",
+      "tag": "@telus-uds/components-base_v1.3.1",
+      "version": "1.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "cody.zuschlag@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e",
+            "comment": "post monorepo reorganization release"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-constants to v1.0.2",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.2.2",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/browserslist-config to v1.0.1",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,6 +1,39 @@
-# Changelog
+# Change Log - @telus-uds/components-base
 
-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.
+This log was last generated on Wed, 30 Mar 2022 09:49:08 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.3.1
+
+Wed, 30 Mar 2022 09:49:08 GMT
+
+### Patches
+
+- post monorepo reorganization release (cody.zuschlag@nearform.com)
+- Bump @telus-uds/system-constants to v1.0.2
+- Bump @telus-uds/system-theme-tokens to v1.2.2
+- Bump @telus-uds/browserslist-config to v1.0.1
+
+## [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)
 

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__/ActivityIndicator/ActivityIndicator.test.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
+import { Platform } from 'react-native'
 import { render as baseRender } from '@testing-library/react-native'
 import Theme from '../../__fixtures__/Theme'
 import ActivityIndicator from '../../src/ActivityIndicator'
+import * as A11yInfoProvider from '../../src/A11yInfoProvider'
 
 // Used to remove the "Animated: `useNativeDriver` is not supported because the native animated module is missing." warnings
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
@@ -30,4 +32,37 @@ describe('ActivityIndicator', () => {
     const { getByText } = render(<ActivityIndicator label="I'm a loader" />)
     expect(() => getByText("I'm a loader")).toThrow()
   })
+
+  it("doesn't animate when reduced motion is enabled", async () => {
+    jest
+      .spyOn(A11yInfoProvider, 'useA11yInfo')
+      .mockImplementation(() => ({ reduceMotionEnabled: true }))
+    // TODO: this won't be called until cross-platform Jest tests are configured
+    // see https://github.com/telus/universal-design-system/issues/319
+    if (Platform.OS === 'web') {
+      const { container } = render(<ActivityIndicator label="I'm a loader" />)
+      expect(container.querySelector('[attributeName="transform"]')).not.toBeInTheDocument()
+      expect(container.querySelector('[attributeName="stroke-dashoffset"]')).not.toBeInTheDocument()
+      expect(container.querySelector('[attributeName="stroke-dasharray"]')).not.toBeInTheDocument()
+    } else {
+      const component = render(<ActivityIndicator label="I'm a loader" />)
+      expect(component).toMatchSnapshot()
+    }
+  })
+  it("animates when reduced motion isn't enabled", async () => {
+    jest
+      .spyOn(A11yInfoProvider, 'useA11yInfo')
+      .mockImplementation(() => ({ reduceMotionEnabled: false }))
+    // TODO: this won't be called until cross-platform Jest tests are configured
+    // see https://github.com/telus/universal-design-system/issues/319
+    if (Platform.OS === 'web') {
+      const { container } = render(<ActivityIndicator label="I'm a loader" />)
+      expect(container.querySelector('[attributeName="transform"]')).toBeInTheDocument()
+      expect(container.querySelector('[attributeName="stroke-dashoffset"]')).toBeInTheDocument()
+      expect(container.querySelector('[attributeName="stroke-dasharray"]')).toBeInTheDocument()
+    } else {
+      const component = render(<ActivityIndicator label="I'm a loader" />)
+      expect(component).toMatchSnapshot()
+    }
+  })
 })

package/__tests__/ActivityIndicator/__snapshots__/ActivityIndicator.test.jsx.snap

@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActivityIndicator animates when reduced motion isn't enabled 1`] = `
+<View
+  accessibilityLabel="I'm a loader"
+  accessibilityRole="progressbar"
+  accessibilityState={
+    Object {
+      "busy": true,
+    }
+  }
+  accessible={true}
+  style={
+    Array [
+      Object {
+        "flexGrow": 0,
+        "flexShrink": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "height": 24,
+        "width": 24,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 24,
+            "transform": Array [
+              Object {
+                "rotate": "45deg",
+              },
+            ],
+            "width": 24,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "height": 12,
+              "overflow": "hidden",
+              "width": 24,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "height": 24,
+                "transform": Array [
+                  Object {
+                    "translateY": 0,
+                  },
+                  Object {
+                    "rotate": "-165deg",
+                  },
+                ],
+                "width": 24,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "height": 12,
+                  "overflow": "hidden",
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "borderColor": "#0e6ac8",
+                    "borderRadius": 12,
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 24,
+            "transform": Array [
+              Object {
+                "rotate": "45deg",
+              },
+            ],
+            "width": 24,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "height": 12,
+              "overflow": "hidden",
+              "top": 12,
+              "width": 24,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "height": 24,
+                "transform": Array [
+                  Object {
+                    "translateY": -12,
+                  },
+                  Object {
+                    "rotate": "345deg",
+                  },
+                ],
+                "width": 24,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "height": 12,
+                  "overflow": "hidden",
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "borderColor": "#0e6ac8",
+                    "borderRadius": 12,
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`ActivityIndicator doesn't animate when reduced motion is enabled 1`] = `
+<View
+  accessibilityLabel="I'm a loader"
+  accessibilityRole="progressbar"
+  accessibilityState={
+    Object {
+      "busy": true,
+    }
+  }
+  accessible={true}
+  style={
+    Array [
+      Object {
+        "flexGrow": 0,
+        "flexShrink": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "height": 24,
+        "width": 24,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "height": 24,
+            "width": 24,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "height": 16,
+              "overflow": "hidden",
+              "width": 24,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "height": 24,
+                "width": 24,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "height": 16,
+                  "overflow": "hidden",
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "borderColor": "#0e6ac8",
+                    "borderRadius": 12,
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

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()
+  })
 })