@telus-uds/components-base 1.14.2 → 1.16.0

package/__tests17__/utils/useSpacingScale.test.jsx

@@ -0,0 +1,273 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import { useSpacingScale } from '../../src/utils'
+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/__tests17__/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/component-docs.json

@@ -89,6 +89,7 @@
         "previousIcon": "icon",
         "showPreviousNextNavigation": "show",
         "showPanelNavigation": "show",
+        "showPanelTabs": "show",
         "spaceBetweenSlideAndPreviousNextNavigation": "size",
         "spaceBetweenSlideAndPanelNavigation": "size",
         "thumbnailBorderColor": "color",
@@ -4646,12 +4647,26 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
-            "accessibilityRole": {
-              "defaultValue": {
-                "value": "Platform.select({ web: 'listitem', default: undefined })",
-                "computed": true
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
               },
-              "required": false
+              "required": false,
+              "description": ""
             },
             "tokens": {
               "type": {
@@ -4679,30 +4694,17 @@
               "required": false,
               "description": ""
             },
-            "variant": {
-              "type": {
-                "name": "objectOf",
-                "value": {
-                  "name": "union",
-                  "value": [
-                    {
-                      "name": "string"
-                    },
-                    {
-                      "name": "number"
-                    },
-                    {
-                      "name": "bool"
-                    }
-                  ]
-                }
-              },
-              "required": false,
-              "description": ""
-            },
             "children": {
               "type": {
-                "name": "node"
+                "name": "union",
+                "value": [
+                  {
+                    "name": "node"
+                  },
+                  {
+                    "name": "func"
+                  }
+                ]
               },
               "required": true,
               "description": ""
@@ -4817,12 +4819,26 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
-            "accessibilityRole": {
-              "defaultValue": {
-                "value": "Platform.select({ web: 'listitem', default: undefined })",
-                "computed": true
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
               },
-              "required": false
+              "required": false,
+              "description": ""
             },
             "tokens": {
               "type": {
@@ -4850,30 +4866,17 @@
               "required": false,
               "description": ""
             },
-            "variant": {
-              "type": {
-                "name": "objectOf",
-                "value": {
-                  "name": "union",
-                  "value": [
-                    {
-                      "name": "string"
-                    },
-                    {
-                      "name": "number"
-                    },
-                    {
-                      "name": "bool"
-                    }
-                  ]
-                }
-              },
-              "required": false,
-              "description": ""
-            },
             "children": {
               "type": {
-                "name": "node"
+                "name": "union",
+                "value": [
+                  {
+                    "name": "node"
+                  },
+                  {
+                    "name": "func"
+                  }
+                ]
               },
               "required": true,
               "description": ""
@@ -4910,12 +4913,26 @@
       "docs": {
         "description": "ListItem is responsible for rendering icon or a bullet as side item",
         "props": {
-          "accessibilityRole": {
-            "defaultValue": {
-              "value": "Platform.select({ web: 'listitem', default: undefined })",
-              "computed": true
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
             },
-            "required": false
+            "required": false,
+            "description": ""
           },
           "tokens": {
             "type": {
@@ -4943,30 +4960,17 @@
             "required": false,
             "description": ""
           },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
           "children": {
             "type": {
-              "name": "node"
+              "name": "union",
+              "value": [
+                {
+                  "name": "node"
+                },
+                {
+                  "name": "func"
+                }
+              ]
             },
             "required": true,
             "description": ""
@@ -8822,6 +8826,17 @@
             "required": false,
             "description": "Minimal part of slide width must be swiped for changing index.\nOtherwise animation restore current slide. Default value 0.2 means that 20% must be swiped for change index"
           },
+          "refocus": {
+            "defaultValue": {
+              "value": "Boolean(tabs)",
+              "computed": true
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
+          },
           "title": {
             "defaultValue": {
               "value": "'carousel'",
@@ -8994,6 +9009,7 @@
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
+                "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
                 "thumbnailBorderColor": "color",
@@ -9063,12 +9079,17 @@
             "required": false,
             "description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
           },
-          "refocus": {
+          "tabs": {
             "type": {
-              "name": "bool"
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": "CarouselTabsPanelItem.propTypes || {}",
+                "computed": true
+              }
             },
             "required": false,
-            "description": "If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.\n\nPass this as true when using carousel items that contain interactive content, so a user can easily tab into that content.\n\nIf skipLinkHref is passed, the focus target will be the SkipLink; if not, it'll be an empty element before the slide content."
+            "description": "If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.\n\nBe careful to ensure that the order of each element in the items array matches the order of each child in the Carousel."
           },
           "onAnimationStart": {
             "type": {
@@ -9259,7 +9280,7 @@
     },
     "CarouselTabs": {
       "docs": {
-        "description": "",
+        "description": "@deprecated Please use Carousel and pass the `tabs` prop.",
         "props": {
           "refocus": {
             "defaultValue": {
@@ -9300,6 +9321,7 @@
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
+                "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
                 "thumbnailBorderColor": "color",
@@ -9463,6 +9485,18 @@
             "required": false,
             "description": "If this is a complex carousel with a lot of focusable content, pass a href for a skip link. Typically, this will be an anchor link\nwith the ID of a focusable element immediately after the Carousel, e.g. `'#section-2-heading'`."
           },
+          "tabs": {
+            "type": {
+              "name": "arrayOf",
+              "value": {
+                "name": "shape",
+                "value": "CarouselTabsPanelItem.propTypes || {}",
+                "computed": true
+              }
+            },
+            "required": false,
+            "description": "If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.\n\nBe careful to ensure that the order of each element in the items array matches the order of each child in the Carousel."
+          },
           "panelNavigation": {
             "type": {
               "name": "element"
@@ -9679,6 +9713,7 @@
                 "previousIcon": "icon",
                 "showPreviousNextNavigation": "show",
                 "showPanelNavigation": "show",
+                "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
                 "thumbnailBorderColor": "color",

package/lib/A11yInfoProvider/index.js

@@ -37,9 +37,9 @@ const A11yInfoProvider = _ref => {
       return () => {};
     }
 
-    _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
 
-    _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
+    const screenReaderSubscription = _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
@@ -55,9 +55,18 @@ const A11yInfoProvider = _ref => {
     }
 
     return () => {
-      _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-
-      _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
+        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
+      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
+        _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+      }
+
+      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
+        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
+      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
+        _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      }
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {

package/lib/Button/ButtonGroup.js

@@ -155,8 +155,9 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           tokens: getButtonTokens,
           selected: isSelected,
           inactive: inactive,
-          ...itemA11y,
-          ...selectItemProps(itemRest),
+          ...selectItemProps({ ...itemRest,
+            ...itemA11y
+          }),
           children: label
         }, id);
       })