@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.5

package/__tests__/StackView/getStackedContent.test.jsx

@@ -0,0 +1,295 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { render } from '@testing-library/react-native'
+
+import Theme from '../../__fixtures__/Theme'
+import { getStackedContent, Typography } from '../../src'
+
+// Make test composition simpler by wrapping getStackedContent in a component
+const StackedContent = ({ children, ...props }) => <View>{getStackedContent(children, props)}</View>
+StackedContent.propTypes = { children: PropTypes.node }
+
+describe('getStackedContent (Spacers)', () => {
+  it('renders spacers between simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent space={1}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(2)
+  })
+
+  it('gives spacers sizes according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+
+    const { getByTestId } = render(
+      <StackedContent space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders spacers between children wrapped in one Fragment', () => {
+    const content = (
+      <>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(2)
+  })
+
+  it('renders spacers between children wrapped in sibling Fragments', () => {
+    // Simulate common pattern of using fragments for conditional rendering
+    const someCondition = true
+
+    const content = (
+      <>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        {someCondition && (
+          <>
+            <Typography>C</Typography>
+            <Typography>D</Typography>
+            <Typography>E</Typography>
+          </>
+        )}
+      </>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+
+  it('does not render spacers between children wrapped in a component', () => {
+    const content = (
+      <View>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </View>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('does not render spacers between empty or nullish children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent space={1}>
+        <Typography>A</Typography>
+        {/* this is a comment */}
+        <Typography>B</Typography>
+        {null}
+        <Typography>C</Typography>
+        {false}
+        <Typography>D</Typography>
+        {undefined}
+        {null}
+        {false}
+        <Typography>E</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+
+  it('renders spacers between valid children in an array', () => {
+    const content = [
+      <Typography key="A">A</Typography>,
+      null,
+      false,
+      <Typography key="B">B</Typography>,
+      undefined,
+      <View key="C">
+        <Typography key="D">D</Typography>
+        <Typography key="E">E</Typography>
+        <Typography key="F">F</Typography>
+      </View>,
+      <Fragment key="G">
+        <Typography key="H">H</Typography>
+        <Typography key="I">I</Typography>
+      </Fragment>
+    ]
+
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    // Between A, B, C, H, I = 4
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+})
+
+describe('getStackedContent (Dividers)', () => {
+  it('renders dividers between simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Divider-\d$/)).toHaveLength(2)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('renders dividers between valid children in an array', () => {
+    const content = [
+      <Typography key="A">A</Typography>,
+      null,
+      false,
+      <Typography key="B">B</Typography>,
+      undefined,
+      <View key="C">
+        <Typography key="D">D</Typography>
+        <Typography key="E">E</Typography>
+        <Typography key="F">F</Typography>
+      </View>,
+      <Fragment key="G">
+        <Typography key="H">H</Typography>
+        <Typography key="I">I</Typography>
+      </Fragment>
+    ]
+
+    const { queryAllByTestId } = render(
+      <StackedContent space={1} divider>
+        {content}
+      </StackedContent>,
+      {
+        wrapper: Theme
+      }
+    )
+
+    // Between A, B, C, H, I = 4
+    expect(queryAllByTestId(/Stack-Divider-\d+$/)).toHaveLength(4)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('gives dividers spacing according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+
+    const { getByTestId } = render(
+      <StackedContent space={2} divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('can pass props down to dividers', () => {
+    const tokens = { color: '#012345' }
+
+    const { getByTestId } = render(
+      <StackedContent divider={{ tokens, vertical: true }}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: tokens.color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: tokens.color })
+  })
+})
+
+describe('getStackedContent (Boxes)', () => {
+  it('renders boxes around simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent box>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Box-\d$/)).toHaveLength(3)
+    expect(queryAllByTestId(/Stack-Divider/)).toHaveLength(0)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('gives boxes spacing according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = {
+      paddingTop: expectedSize,
+      paddingLeft: expectedSize,
+      paddingBottom: expectedSize,
+      paddingRight: expectedSize
+    }
+
+    const { getByTestId } = render(
+      <StackedContent space={2} box>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Box-0')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-2')).toHaveStyle(expectedStyle)
+  })
+
+  it('gives boxes spacing on specified sides only, if box props object is passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = {
+      paddingTop: expectedSize,
+      paddingLeft: expectedSize
+    }
+    const unexpectedStyle = {
+      paddingBottom: expectedSize,
+      paddingRight: expectedSize
+    }
+
+    const { getByTestId } = render(
+      <StackedContent box={{ top: 2, left: 2 }}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Box-0')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-2')).toHaveStyle(expectedStyle)
+
+    expect(getByTestId('Stack-Box-0')).not.toHaveStyle(unexpectedStyle)
+    expect(getByTestId('Stack-Box-1')).not.toHaveStyle(unexpectedStyle)
+    expect(getByTestId('Stack-Box-2')).not.toHaveStyle(unexpectedStyle)
+  })
+})

package/__tests__/TextInput/TextInput.test.jsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { TextInput } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+
+// eslint-disable-next-line react/prop-types
+const Wrapper = ({ children }) => (
+  <Viewport viewport="xs">
+    <Theme>{children}</Theme>
+  </Viewport>
+)
+
+describe('TextInput', () => {
+  it('renders the label', () => {
+    const { queryByText } = render(<TextInput label="Test label content" />, { wrapper: Wrapper })
+
+    expect(queryByText('Test label content')).toBeTruthy()
+  })
+
+  it('renders the hint', () => {
+    const { queryByText } = render(
+      <TextInput label="Test label content" hint="Test hint content" />,
+      { wrapper: Wrapper }
+    )
+
+    expect(queryByText('Test hint content')).toBeTruthy()
+  })
+
+  it('renders the feedback', () => {
+    const { queryByText } = render(<TextInput feedback="Test feedback content" />, {
+      wrapper: Wrapper
+    })
+
+    expect(queryByText('Test feedback content')).toBeTruthy()
+  })
+
+  it('renders the tooltip', () => {
+    const { queryByText } = render(
+      <TextInput label="Test label content" tooltip="Test tooltip content" />,
+      { wrapper: Wrapper }
+    )
+
+    // TODO: check for either the actual content or accessible text when the Tooltip is rendered
+    expect(queryByText('?')).toBeTruthy()
+  })
+
+  it('triggers the interactive callbacks', () => {
+    const onFocus = jest.fn()
+    const onBlur = jest.fn()
+    const onMouseOver = jest.fn()
+    const onMouseOut = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInput
+        label="Input label"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onFocus).not.toHaveBeenCalled()
+    fireEvent(input, 'focus')
+    expect(onFocus).toHaveBeenCalledTimes(1)
+
+    expect(onBlur).not.toHaveBeenCalled()
+    fireEvent(input, 'blur')
+    expect(onBlur).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOver).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOver')
+    expect(onMouseOver).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOut).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOut')
+    expect(onMouseOut).toHaveBeenCalledTimes(1)
+  })
+
+  it("can't be edited when inactive", () => {
+    const { getByA11yLabel } = render(<TextInput label="Input label" inactive />, {
+      wrapper: Wrapper
+    })
+
+    const input = getByA11yLabel('Input label')
+
+    expect(input).toHaveProp('editable', false)
+  })
+
+  it('changes value when uncontrolled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(<TextInput label="Input label" onChange={onChange} />, {
+      wrapper: Wrapper
+    })
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it('changes value when controlled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInput label="Input label" onChange={onChange} value="initial value" />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it("doesn't change value when readOnly", () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInput label="Input label" onChange={onChange} value="initial value" readOnly />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

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/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/ButtonBase.js

@@ -19,6 +19,7 @@ const getOuterBorderOffset = ({
 }) => outerBorderGap + outerBorderWidth;
 
 const selectOuterContainerStyles = ({
+  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -26,6 +27,7 @@ const selectOuterContainerStyles = ({
   outerBorderRadius = 0,
   outerBackgroundColor
 }) => ({
+  alignSelf,
   padding: outerBorderGap,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
@@ -37,13 +39,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 +48,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'
         }
       })
     };

package/lib/Button/ButtonGroup.js

@@ -1,24 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import ButtonBase from './ButtonBase';
+import { StackWrap } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes';
+import { a11yProps, pressProps, variantProp, getTokensPropType, selectTokens } from '../utils/propTypes';
 import { useMultipleInputValues } from '../utils/input';
 
-const selectContainerStyles = ({
-  direction
-}) => ({
-  flexDirection: direction
-});
-
-const selectItemTokens = ({
-  gap
-}, index) => ({
-  marginLeft: index && gap
-});
-
 const ButtonGroup = ({
   variant,
   buttonVariant = {},
@@ -41,7 +30,11 @@ const ButtonGroup = ({
   const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, {
     viewport
   });
-  const containerStyles = selectContainerStyles(themeTokens);
+  const stackTokens = selectTokens('StackView', themeTokens);
+  const {
+    direction,
+    space
+  } = themeTokens;
   const {
     currentValues,
     toggleOneValue
@@ -57,14 +50,15 @@ const ButtonGroup = ({
     ...rest
   });
   const itemA11yRole = a11y.accessibilityRole === 'radioGroup' ? 'radio' : 'checkbox';
-  return /*#__PURE__*/React.createElement(View, Object.assign({
-    style: containerStyles
-  }, a11y), items.map(({
+  return /*#__PURE__*/React.createElement(StackWrap, Object.assign({}, a11y, {
+    space: space,
+    direction: direction,
+    tokens: stackTokens
+  }), items.map(({
     label,
     id = label,
     accessibilityLabel
   }, index) => {
-    const itemTokens = selectItemTokens(themeTokens, index);
     const isSelected = currentValues.includes(id); // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
 
     const pressHandlers = Object.fromEntries(Object.entries(pressProps.select(rest)).map(([key, handler]) => ({
@@ -100,8 +94,6 @@ const ButtonGroup = ({
       })
     }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
     // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-    // See also: TODO: make margin the responsibility of a parent
-    // https://github.com/telus/universal-design-system/issues/525
 
     return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({
       key: id
@@ -111,7 +103,6 @@ const ButtonGroup = ({
         component: 'ButtonGroup',
         ...buttonVariant
       },
-      tokens: itemTokens,
       selected: isSelected,
       inactive: inactive
     }, itemA11y), label);