@telus-uds/components-base 1.14.1 → 1.15.0

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 17 Aug 2022 20:48:46 GMT and should not be manually modified.
+This log was last generated on Thu, 08 Sep 2022 15:35:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.15.0
+
+Thu, 08 Sep 2022 15:35:51 GMT
+
+### Minor changes
+
+- Add support for React 18 (srikanthkhari@gmail.com)
+
+### Patches
+
+- undefined (srikanthkhari@gmail.com)
+- Refactor ListItem to support a private pressable list item subcomponent (alan.slater@nearform.com)
+
+## 1.14.3
+
+Thu, 01 Sep 2022 15:40:38 GMT
+
+### Patches
+
+- add input validation to select component (evander.owusu@telus.com)
+- Refactor ssr support to match ssrStyles approach proven in ds-allium (alan.slater@nearform.com)
+
+## 1.14.2
+
+Tue, 23 Aug 2022 19:32:37 GMT
+
+### Patches
+
+- fix: remove extra icons from pagination (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v2.4.0
+
 ## 1.14.1
 
-Wed, 17 Aug 2022 20:48:46 GMT
+Wed, 17 Aug 2022 20:50:59 GMT
 
 ### Patches
 

package/__tests17__/A11yText/A11yText.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import A11yText from '../../src/A11yText'
+
+describe('A11yText', () => {
+  it('has an accessible label', async () => {
+    const { getByA11yLabel } = render(<A11yText text="Some text" />)
+
+    const a11yText = getByA11yLabel('Some text')
+    expect(a11yText).toBeTruthy()
+    expect(() => getByA11yLabel('Not some text')).toThrow()
+  })
+
+  it("doesn't render regular text", async () => {
+    const { getByText } = render(<A11yText text="Some text" />)
+    expect(() => getByText('Some text')).toThrow()
+  })
+
+  it('defaults to text role', async () => {
+    const { getByRole } = render(<A11yText text="Some text" />)
+
+    const a11yText = getByRole('text')
+    expect(a11yText).toBeTruthy()
+    expect(() => getByRole('header')).toThrow()
+  })
+
+  it('can be set to header role', async () => {
+    const { getByRole } = render(<A11yText text="Some text" heading />)
+
+    const a11yText = getByRole('header')
+    expect(a11yText).toBeTruthy()
+    expect(() => getByRole('text')).toThrow()
+  })
+})

package/__tests17__/ActivityIndicator/ActivityIndicator.test.jsx

@@ -0,0 +1,68 @@
+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')
+
+const render = (jsx) => baseRender(jsx, { wrapper: Theme })
+
+describe('ActivityIndicator', () => {
+  it('has an accessible label', async () => {
+    const { getByA11yLabel } = render(<ActivityIndicator label="I'm a loader" />)
+
+    expect(getByA11yLabel("I'm a loader")).toBeTruthy()
+  })
+
+  it('has a role of progressbar', async () => {
+    const { getByRole } = render(<ActivityIndicator label="I'm a loader" />)
+
+    expect(getByRole('progressbar')).toBeTruthy()
+  })
+
+  it('has an a11y state of busy', async () => {
+    const { getAllByAccessibilityState } = render(<ActivityIndicator label="I'm a loader" />)
+    expect(getAllByAccessibilityState({ busy: true })).toBeTruthy()
+  })
+
+  it("doesn't render regular text for the label", async () => {
+    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/__tests17__/ActivityIndicator/__snapshots__/ActivityIndicator.test.jsx.snap

@@ -0,0 +1,299 @@
+// 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
+      collapsable={false}
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "height": 24,
+            "transform": Array [
+              Object {
+                "rotate": "45deg",
+              },
+            ],
+            "width": 24,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "height": 12,
+              "overflow": "hidden",
+              "width": 24,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            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
+                collapsable={false}
+                style={
+                  Object {
+                    "borderColor": "#0e6ac8",
+                    "borderRadius": 12,
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        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
+            collapsable={false}
+            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
+                collapsable={false}
+                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
+      collapsable={false}
+      style={
+        Object {
+          "alignItems": "center",
+          "bottom": 0,
+          "justifyContent": "center",
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "height": 24,
+            "width": 24,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "height": 16,
+              "overflow": "hidden",
+              "width": 24,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "height": 24,
+                "width": 24,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "height": 16,
+                  "overflow": "hidden",
+                  "width": 24,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "borderColor": "#0e6ac8",
+                    "borderRadius": 12,
+                    "borderWidth": 2,
+                    "height": 24,
+                    "width": 24,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/__tests17__/Box/Box.test.jsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { render, fireEvent } from '@testing-library/react-native'
+import { Box } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const textContent = 'Some text content'
+
+// Based on testTheme
+const expectedScale = [0, 4, 8, 16, 24, 32, 36]
+
+describe('Box', () => {
+  it('is scrollable if scroll props provided', async () => {
+    const onScroll = jest.fn()
+    const { getByText } = render(
+      <Theme>
+        <Box scroll={{ onScroll }}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    const content = getByText(textContent)
+
+    expect(onScroll).toHaveBeenCalledTimes(0)
+    await fireEvent.scroll(content)
+    expect(onScroll).toHaveBeenCalledTimes(1)
+  })
+
+  it('maps regular props to RN styles', () => {
+    const props = {
+      top: 1,
+      bottom: 2,
+      left: 3,
+      right: 4
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingTop: expectedScale[1],
+      paddingBottom: expectedScale[2],
+      paddingLeft: expectedScale[3],
+      paddingRight: expectedScale[4]
+    })
+  })
+
+  it(`maps horizontal and vertical props to RN styles`, () => {
+    const props = {
+      horizontal: 1,
+      vertical: 2
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[1],
+      paddingRight: expectedScale[1],
+      paddingTop: expectedScale[2],
+      paddingBottom: expectedScale[2]
+    })
+  })
+
+  it(`maps all-sides space prop to RN styles`, () => {
+    const props = {
+      space: 3
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[3],
+      paddingRight: expectedScale[3],
+      paddingTop: expectedScale[3],
+      paddingBottom: expectedScale[3]
+    })
+  })
+
+  it(`applies side overrides in increasing specificity`, () => {
+    const props = {
+      space: 1,
+      horizontal: 2,
+      top: 3,
+      right: 4
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[2],
+      paddingRight: expectedScale[4],
+      paddingTop: expectedScale[3],
+      paddingBottom: expectedScale[1]
+    })
+  })
+})

package/__tests17__/Button/Button.test.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+import { StyleSheet } from 'react-native'
+import testTheme from '../../__fixtures__/testTheme'
+
+import Theme from '../../__fixtures__/Theme'
+import Button from '../../src/Button/Button'
+
+const label = 'Test label text'
+
+describe('Button', () => {
+  it('renders a labelled, pressable button', async () => {
+    const handlePress = jest.fn()
+    const { getByRole } = render(
+      <Theme>
+        <Button onPress={handlePress}>{label}</Button>
+      </Theme>
+    )
+
+    const button = getByRole('button')
+    expect(button).toHaveTextContent(label)
+
+    expect(handlePress).toHaveBeenCalledTimes(0)
+    await fireEvent.press(button)
+    expect(handlePress).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies theme variants', () => {
+    const { tokens } = testTheme.components.Button
+    const { getByText } = render(
+      <Theme>
+        <Button onPress={() => {}}>regular</Button>
+        <Button variant={{ solid: true }} onPress={() => {}}>
+          solid
+        </Button>
+      </Theme>
+    )
+
+    expect(getByText('regular')).toHaveStyle({ color: tokens.color })
+    expect(getByText('solid')).toHaveStyle({ color: '#ffffff' })
+  })
+
+  it('maintains size if border width changes as state changes', async () => {
+    // React Native Testing Library doesn't seem to support Pressable states
+    // so we have to simulate the pressed-in state
+    const { getByText } = render(
+      <Theme>
+        <Button onPress={() => {}}>default</Button>
+        <Button variant={{ pressed: true }} onPress={() => {}}>
+          pressed
+        </Button>
+      </Theme>
+    )
+    const defaultButton = getByText('default')
+    const pressedButton = getByText('pressed')
+
+    const getStyle = (element) => StyleSheet.flatten(element.props.style)
+    const getElementHeight = ({
+      borderWidth = 0,
+      paddingVertical = 0,
+      paddingTop = 0,
+      paddingBottom = 0,
+      lineHeight = 0
+    }) =>
+      borderWidth * 2 +
+      (paddingTop || paddingVertical) +
+      (paddingBottom || paddingVertical) +
+      lineHeight
+    const getTotalHeight = (element) =>
+      getElementHeight(getStyle(element)) +
+      getElementHeight(getStyle(element.parent.parent)) +
+      getElementHeight(getStyle(element.parent.parent.parent))
+
+    const containerStyle = getStyle(defaultButton.parent.parent.parent)
+    const pressedContainerStyle = getStyle(pressedButton.parent.parent.parent)
+
+    // test theme has border width that increases during pressed state
+    expect(containerStyle.borderWidth).toEqual(2)
+    expect(pressedContainerStyle.borderWidth).toEqual(8)
+
+    // ensure that the overall height is balanced to not change
+    const expectedHeight = 56
+    expect(getTotalHeight(defaultButton)).toBe(expectedHeight)
+    expect(getTotalHeight(pressedButton)).toBe(expectedHeight)
+  })
+})