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

package/__tests__/utils/useResponsiveProp.test.jsx

@@ -0,0 +1,202 @@
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import useResponsiveProp from '../../src/utils/useResponsiveProp'
+import Viewport from '../../__fixtures__/Viewport'
+
+const wrapper = ({ children, viewport }) => <Viewport viewport={viewport}>{children}</Viewport>
+
+describe('useResponsiveProp', () => {
+  it('returns viewport indexes that explicitly match current value', () => {
+    const responsiveProp = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
+    const { rerender, result } = renderHook((args) => useResponsiveProp(args.responsiveProp), {
+      wrapper,
+      initialProps: { viewport: 'xs', responsiveProp }
+    })
+    expect(result.current).toBe(1)
+    rerender({ viewport: 'sm', responsiveProp })
+    expect(result.current).toBe(2)
+    rerender({ viewport: 'md', responsiveProp })
+    expect(result.current).toBe(3)
+    rerender({ viewport: 'lg', responsiveProp })
+    expect(result.current).toBe(4)
+    rerender({ viewport: 'xl', responsiveProp })
+    expect(result.current).toBe(5)
+  })
+
+  it('returns viewport indexes that implicitly match current value', () => {
+    const responsiveProp = { sm: 2, lg: 4 }
+    const { rerender, result } = renderHook((args) => useResponsiveProp(args.responsiveProp), {
+      wrapper,
+      initialProps: { viewport: 'xs', responsiveProp }
+    })
+    expect(result.current).toBe(undefined)
+    rerender({ viewport: 'sm', responsiveProp })
+    expect(result.current).toBe(2)
+    rerender({ viewport: 'md', responsiveProp })
+    expect(result.current).toBe(2)
+    rerender({ viewport: 'lg', responsiveProp })
+    expect(result.current).toBe(4)
+    rerender({ viewport: 'xl', responsiveProp })
+    expect(result.current).toBe(4)
+  })
+
+  it('returns provided defaultValue where there is no match', () => {
+    const responsiveProp = { md: 2, lg: 4 }
+    const defaultValue = 'some default value'
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
+      }
+    )
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'sm', responsiveProp, defaultValue })
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'md', responsiveProp, defaultValue })
+    expect(result.current).toBe(2)
+    rerender({ viewport: 'lg', responsiveProp, defaultValue })
+    expect(result.current).toBe(4)
+    rerender({ viewport: 'xl', responsiveProp, defaultValue })
+    expect(result.current).toBe(4)
+  })
+
+  it('applies falsy values appropriately (replacing `undefined` with default value)', () => {
+    const responsiveProp = { sm: '', md: null, lg: false, xl: undefined }
+    const defaultValue = 0
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
+      }
+    )
+    expect(result.current).toBe(0)
+    rerender({ viewport: 'sm', responsiveProp, defaultValue })
+    expect(result.current).toBe('')
+    rerender({ viewport: 'md', responsiveProp, defaultValue })
+    expect(result.current).toBe(null)
+    rerender({ viewport: 'lg', responsiveProp, defaultValue })
+    expect(result.current).toBe(false)
+    rerender({ viewport: 'xl', responsiveProp, defaultValue })
+    expect(result.current).toBe(false)
+  })
+
+  it('returns a non-object prop unchanged', () => {
+    const exactFn = () => {}
+    const defaultValue = 'some value'
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp: exactFn, defaultValue }
+      }
+    )
+    expect(result.current).toBe(exactFn)
+    rerender({ viewport: 'sm', responsiveProp: exactFn, defaultValue })
+    expect(result.current).toBe(exactFn)
+    rerender({ viewport: 'md', responsiveProp: exactFn, defaultValue })
+    expect(result.current).toBe(exactFn)
+    rerender({ viewport: 'lg', responsiveProp: exactFn, defaultValue })
+    expect(result.current).toBe(exactFn)
+    rerender({ viewport: 'xl', responsiveProp: exactFn, defaultValue })
+    expect(result.current).toBe(exactFn)
+  })
+
+  it('returns a falsy value including explicit null unchanged, default value if undefined', () => {
+    const defaultValue = 'some value'
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp: null, defaultValue }
+      }
+    )
+    expect(result.current).toBe(null)
+    rerender({ viewport: 'sm', responsiveProp: false, defaultValue })
+    expect(result.current).toBe(false)
+    rerender({ viewport: 'md', responsiveProp: 0, defaultValue })
+    expect(result.current).toBe(0)
+    rerender({ viewport: 'lg', responsiveProp: '', defaultValue })
+    expect(result.current).toBe('')
+    rerender({ viewport: 'xl', responsiveProp: undefined, defaultValue })
+    expect(result.current).toBe(defaultValue)
+  })
+
+  it('returns a non-responsive object unchanged, rather than the default value', () => {
+    const nonresponsiveProp = { a: 1, b: 2 }
+    const defaultValue = 'some value'
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp: nonresponsiveProp, defaultValue }
+      }
+    )
+    expect(result.current).toBe(nonresponsiveProp)
+    rerender({ viewport: 'sm', responsiveProp: nonresponsiveProp, defaultValue })
+    expect(result.current).toBe(nonresponsiveProp)
+    rerender({ viewport: 'md', responsiveProp: nonresponsiveProp, defaultValue })
+    expect(result.current).toBe(nonresponsiveProp)
+    rerender({ viewport: 'lg', responsiveProp: nonresponsiveProp, defaultValue })
+    expect(result.current).toBe(nonresponsiveProp)
+    rerender({ viewport: 'xl', responsiveProp: nonresponsiveProp, defaultValue })
+    expect(result.current).toBe(nonresponsiveProp)
+  })
+
+  it('returns the smallest viewport property if current viewport value is missing', () => {
+    const responsiveProp = { xl: 5, lg: 4, md: 3 }
+    const defaultValue = 'some value'
+    const { result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        initialProps: { responsiveProp, defaultValue }
+      }
+    )
+    expect(result.current).toBe(3)
+  })
+
+  it('treats a responsive prop with extra non-responsive properties as responsive', () => {
+    const responsiveProp = { md: 3, lg: 4, options: { a: 1, b: 2 } }
+    const defaultValue = 'some value'
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
+      }
+    )
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'sm', responsiveProp, defaultValue })
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'md', responsiveProp, defaultValue })
+    expect(result.current).toBe(3)
+    rerender({ viewport: 'lg', responsiveProp, defaultValue })
+    expect(result.current).toBe(4)
+    rerender({ viewport: 'xl', responsiveProp, defaultValue })
+    expect(result.current).toBe(4)
+  })
+
+  it('treats an object with only explicitly-undefined viewport properties as responsive', () => {
+    // For example, if some logic generates the values for each viewport of a responsive prop,
+    // and in a certain case, they happen to all come out as `undefined`.
+    const responsiveProp = { sm: undefined, lg: undefined, options: { a: 1, b: 2 } }
+    const defaultValue = 'some value'
+    const { rerender, result } = renderHook(
+      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
+      {
+        wrapper,
+        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
+      }
+    )
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'sm', responsiveProp, defaultValue })
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'md', responsiveProp, defaultValue })
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'lg', responsiveProp, defaultValue })
+    expect(result.current).toBe(defaultValue)
+    rerender({ viewport: 'xl', responsiveProp, defaultValue })
+    expect(result.current).toBe(defaultValue)
+  })
+})

package/__tests__/utils/{spacing.test.jsx → useSpacingScale.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import { renderHook } from '@testing-library/react-hooks'
-import { useSpacingScale } from '../../src/utils/spacing'
+import { useSpacingScale } from '../../src/utils'
 import Theme from '../../__fixtures__/Theme'
 import Viewport from '../../__fixtures__/Viewport'
 

package/__tests__/utils/useUniqueId.test.js

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

package/jest.config.js

@@ -13,11 +13,17 @@ module.exports = {
     // __dirname here tells babel to look in components-base for babel root when running from monorepo root
     '\\.(js|jsx)$': ['babel-jest', { cwd: __dirname }]
   },
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-native/extend-expect',
+    // Fail tests that use console.error or console.warn
+    '<rootDir>/../../jest-no-console'
+  ],
   moduleNameMapper: {
     '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
   },
-  transformIgnorePatterns: preset.transformIgnorePatterns,
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native-community|@react-native-picker)'
+  ],
   // Count everything in src when calculating coverage
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/Box/Box.js

@@ -102,6 +102,7 @@ const Box = ({
   variant,
   tokens,
   scroll,
+  testID,
   ...rest
 }) => {
   const a11y = a11yProps.select(rest);
@@ -117,11 +118,14 @@ const Box = ({
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/React.createElement(ScrollView, Object.assign({}, scrollProps, a11y), children);
+    return /*#__PURE__*/React.createElement(ScrollView, Object.assign({}, scrollProps, a11y, {
+      testID: testID
+    }), children);
   }
 
   return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
-    style: styles
+    style: styles,
+    testID: testID
   }), children);
 };
 
@@ -136,6 +140,7 @@ Box.propTypes = {
   scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
+  testID: PropTypes.string,
   children: PropTypes.node.isRequired
 };
 export default Box;

package/lib/Button/Button.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes from './propTypes';
+import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/propTypes';
 
 const Button = ({
   accessibilityRole = 'button',
+  tokens,
+  variant,
   ...props
-}) => /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, props, {
-  accessibilityRole: accessibilityRole
-}));
+}) => {
+  const getTokens = useThemeTokensCallback('Button', tokens, variant);
+  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, props, {
+    tokens: getTokens,
+    accessibilityRole: accessibilityRole
+  }));
+};
 
 Button.propTypes = { ...a11yProps.types,
   ...buttonPropTypes

package/lib/Button/ButtonBase.js

@@ -1,17 +1,8 @@
 import React from 'react';
 import { Pressable, Text, View, StyleSheet, Platform } from 'react-native';
-import { useThemeTokensCallback } from '../ThemeProvider';
 import { applyTextStyles, applyShadowToken } from '../ThemeProvider/utils';
 import buttonPropTypes from './propTypes';
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes';
-
-const getCursorStyle = (inactive, accessibilityRole) => {
-  if (inactive) return 'not-allowed'; // These roles should result in cursor: pointer but don't in current RNW releases
-
-  if (['checkbox', 'radio', 'switch'].includes(accessibilityRole)) return 'pointer'; // For everything else, let React Native Web figure it out internally
-
-  return undefined;
-};
+import { a11yProps, getCursorStyle, hrefAttrsProp, linkProps, resolvePressableState, resolvePressableTokens } from '../utils';
 
 const getOuterBorderOffset = ({
   outerBorderGap = 0,
@@ -19,6 +10,7 @@ const getOuterBorderOffset = ({
 }) => outerBorderGap + outerBorderWidth;
 
 const selectOuterContainerStyles = ({
+  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -26,6 +18,7 @@ const selectOuterContainerStyles = ({
   outerBorderRadius = 0,
   outerBackgroundColor
 }) => ({
+  alignSelf,
   padding: outerBorderGap,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
@@ -37,13 +30,7 @@ const selectOuterContainerStyles = ({
 const selectOuterWidthStyles = ({
   outerBorderGap,
   outerBorderWidth,
-  width,
-  // TODO: make margin the responsibility of a parent
-  // https://github.com/telus/universal-design-system/issues/525
-  marginTop = 0,
-  marginBottom = 0,
-  marginLeft = 0,
-  marginRight = 0
+  width
 }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
@@ -52,22 +39,16 @@ const selectOuterWidthStyles = ({
     outerBorderWidth
   });
   const widthStyles = {
-    marginTop: marginTop - outerBorderOffset,
-    marginBottom: marginBottom - outerBorderOffset,
-    marginLeft: marginLeft - outerBorderOffset,
-    marginRight: marginRight - outerBorderOffset
+    margin: 0 - outerBorderOffset
   };
 
   if (!width) {
     return { ...widthStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
+        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
         web: {
-          width: 'fit-content'
-        },
-        // No fit-content or inline-block in RN. TODO: we might need to provide a prop to allow flex-end or center
-        native: {
-          alignSelf: 'flex-start'
+          display: 'inline-flex'
         }
       })
     };
@@ -104,7 +85,8 @@ const selectInnerContainerStyles = ({
   paddingTop,
   paddingBottom,
   shadow,
-  borderWidth
+  borderWidth,
+  minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -116,6 +98,7 @@ const selectInnerContainerStyles = ({
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
+    minWidth,
     ...applyShadowToken(shadow)
   };
 };
@@ -148,76 +131,83 @@ const selectTextStyles = ({
 
 const selectWebOnlyStyles = (inactive, themeTokens, {
   accessibilityRole
-}) => Platform.OS === 'web' ? {
-  // if it would overflow the container, wraps instead
-  maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
-  cursor: getCursorStyle(inactive, accessibilityRole),
-  outline: 'none' // removes the default browser :focus outline
+}) => {
+  return Platform.select({
+    web: {
+      // if it would overflow the container, wraps instead
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      outline: 'none',
+      // removes the default browser :focus outline
+      ...getCursorStyle(inactive, accessibilityRole)
+    },
+    default: {}
+  });
+}; // TODO: see if this can be made into a generalised utility, ideally when
+// there is a stable, generic, generalised approach to within-component text
+
+
+const resolveChildren = (children, {
+  textStyles,
+  state
+}) => {
+  switch (typeof children) {
+    case 'function':
+      return children(state);
 
-} : {};
+    case 'string':
+      return /*#__PURE__*/React.createElement(Text, {
+        style: textStyles
+      }, children);
+
+    default:
+      return children;
+  }
+};
 
 const ButtonBase = ({
   href,
   hrefAttrs,
   children,
-  variant,
   onPress,
-  tokens,
+  tokens = {},
   disabled = false,
   // alias for inactive
   inactive = disabled,
   selected = false,
   ...rest
 }) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
-
-  const getButtonState = ({
-    pressed,
-    focused,
-    hovered
-  }) => ({
-    pressed,
-    focus: focused,
-    hover: hovered,
+  const extraButtonState = {
     inactive,
     selected
-  });
+  };
 
-  const getTokensByPressableState = pressableState => getTokens(getButtonState(pressableState));
+  const resolveTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
 
   const a11y = a11yProps.select(rest);
 
   const getPressableStyle = pressableState => {
-    const themeTokens = getTokensByPressableState(pressableState);
-    return [staticStyles.wrapper, selectWebOnlyStyles(inactive, themeTokens, a11y), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
+    const themeTokens = resolveTokens(pressableState);
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, a11y), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
   };
 
-  const handlePress = linkProps.handleHref({
-    href,
-    onPress
-  });
   return /*#__PURE__*/React.createElement(Pressable, Object.assign({
-    onPress: handlePress,
+    href: href,
+    onPress: linkProps.handleHref({
+      href,
+      onPress
+    }),
     style: getPressableStyle,
-    disabled: inactive,
-    href: href
+    disabled: inactive
   }, hrefAttrsProp.spread(hrefAttrs), a11y), pressableState => {
-    const themeTokens = getTokensByPressableState(pressableState);
+    const themeTokens = resolveTokens(pressableState);
     const containerStyles = selectInnerContainerStyles(themeTokens);
     const borderStyles = selectBorderStyles(themeTokens);
-    const textStyles = { ...selectTextStyles(themeTokens),
-      ...Platform.select({
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        web: {
-          transition: 'color 200ms'
-        }
-      })
-    }; // If the container has a width set, fill it instead of sizing from content.
+    const textStyles = [selectTextStyles(themeTokens), staticStyles.text]; // If the container has a width set, fill it instead of sizing from content.
     // If in future we support text alignments other than center, add here.
 
-    const stretchStyles = !!themeTokens.width && staticStyles.center;
+    const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
     return /*#__PURE__*/React.createElement(View, {
-      style: [containerStyles, borderStyles, stretchStyles, Platform.select({
+      style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
         web: {
           maxWidth: '100%',
           // ensure overflowing content wraps
@@ -225,11 +215,12 @@ const ButtonBase = ({
           transition: 'background-color 200ms, border-color 200ms'
         }
       })]
-    }, typeof children === 'function' ? children({ ...getButtonState(pressableState),
+    }, resolveChildren(children, {
+      state: { ...resolvePressableState(pressableState, extraButtonState),
+        textStyles
+      },
       textStyles
-    }) : /*#__PURE__*/React.createElement(Text, {
-      style: textStyles
-    }, children));
+    }));
   });
 };
 
@@ -238,11 +229,24 @@ ButtonBase.propTypes = { ...a11yProps.types,
   ...linkProps.types
 };
 const staticStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row' // ensures alignSelf is horizontal
-
+  row: {
+    // Apply all button alignment horizontally; no vertical stacking within a button
+    flexDirection: 'row'
+  },
+  text: {
+    flexGrow: 1,
+    // On native but not web, flexShrink here wraps text prematurely
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: {
+        transition: 'color 200ms'
+      }
+    })
+  },
+  align: {
+    alignItems: 'center'
   },
-  center: {
+  stretch: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'