@telus-uds/components-base 1.26.0 → 1.27.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Feb 2023 17:37:16 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Feb 2023 17:20:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.27.0
+
+Thu, 23 Feb 2023 17:20:42 GMT
+
+### Minor changes
+
+- update public mobile themes (evander.owusu@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.11.0
+
+### Patches
+
+- ignore unwanted files (evander.owusu@telus.com)
+- Updated snapshots based on the SVG changes (101351850+nadaltelus@users.noreply.github.com)
+
 ## 1.26.0
 
-Fri, 10 Feb 2023 17:37:16 GMT
+Fri, 10 Feb 2023 17:40:05 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -1817,7 +1817,8 @@
             8,
             9,
             10,
-            11
+            11,
+            12
           ],
           "type": "state"
         }

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.10.0",
+    "@telus-uds/system-theme-tokens": "^2.11.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.26.0"
+  "version": "1.27.0"
 }

package/.eslintrc.js

@@ -1,9 +0,0 @@
-module.exports = {
-  rules: {
-    // Default props in React are deprecated outside of class-based components. Globally we use an
-    // option that skips this rule for functional components, but it doesn't play nicely with forwardRef.
-    // Since we don't intend to ever have class-based components within UDS components-base,
-    // but we do use forwardRef, best to turn off the rule completely for this package.
-    'react/require-default-props': 'off'
-  }
-}

package/__tests17__/A11yText/A11yText.test.jsx

@@ -1,34 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,299 +0,0 @@
-// 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

@@ -1,111 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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)
-  })
-})