@telus-uds/components-base 1.2.0 → 1.4.0

package/.turbo/turbo-build.log

@@ -0,0 +1,8 @@
+@telus-uds/components-base:build: cache hit, replaying output 875a557dac68c9fc
+@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
+@telus-uds/components-base:build: $ yarn build:main && yarn build:module
+@telus-uds/components-base:build: $ babel src -d lib
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (7019ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (5391ms).
+@telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js

package/CHANGELOG.json

@@ -0,0 +1,61 @@
+{
+  "name": "@telus-uds/components-base",
+  "entries": [
+    {
+      "date": "Fri, 01 Apr 2022 14:15:14 GMT",
+      "tag": "@telus-uds/components-base_v1.4.0",
+      "version": "1.4.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "simon.lawrence@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "05e43b4642997ec461094b5d8a439bfef1abaab8",
+            "comment": "Refactor children wrapping in the notifications"
+          }
+        ],
+        "minor": [
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.3.0",
+            "commit": "05e43b4642997ec461094b5d8a439bfef1abaab8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 30 Mar 2022 09:49:18 GMT",
+      "tag": "@telus-uds/components-base_v1.3.1",
+      "version": "1.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "cody.zuschlag@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e",
+            "comment": "post monorepo reorganization release"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-constants to v1.0.2",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.2.2",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/browserslist-config to v1.0.1",
+            "commit": "cdbb7a9be4572e4a3650b917a80bb6f0f57a471e"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,6 +1,49 @@
-# Changelog
+# Change Log - @telus-uds/components-base
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+This log was last generated on Fri, 01 Apr 2022 14:15:14 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.4.0
+
+Fri, 01 Apr 2022 14:15:14 GMT
+
+### Minor changes
+
+- Bump @telus-uds/system-theme-tokens to v1.3.0
+
+### Patches
+
+- Refactor children wrapping in the notifications (simon.lawrence@nearform.com)
+
+## 1.3.1
+
+Wed, 30 Mar 2022 09:49:18 GMT
+
+### Patches
+
+- post monorepo reorganization release (cody.zuschlag@nearform.com)
+- Bump @telus-uds/system-constants to v1.0.2
+- Bump @telus-uds/system-theme-tokens to v1.2.2
+- Bump @telus-uds/browserslist-config to v1.0.1
+- Export viewport context
+- Unify system props handling
+- Reduced motion support for ActivityIndicator component
+- Include FootnoteLink in list of wrappable children
+- Add a module build target
+- Add SSR util functions
+
+## [1.3.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.2.0...@telus-uds/components-base/v1.3.0) (2022-03-21)
+
+### Features
+
+- **components-base:** add common system props handler and restructure props-related utils ([#1444](https://github.com/telus/universal-design-system/issues/1444)) ([ab655ec](https://github.com/telus/universal-design-system/commit/ab655ec61796b6a6d7094c2c42ceef8b5197c634))
+- **docs:** add tokens override documentation ([#1330](https://github.com/telus/universal-design-system/issues/1330)) ([49092e5](https://github.com/telus/universal-design-system/commit/49092e5d5f6c2d3a85de930a74a03afff8a60062))
+
+### Bug Fixes
+
+- **base:** inherit FlexGrid.Col responsive size if 0 ([#1419](https://github.com/telus/universal-design-system/issues/1419)) ([9defeb0](https://github.com/telus/universal-design-system/commit/9defeb0da08099afb83df9e7ee902f037cb4de02))
+- **ds-allium:** fix some errors in RN builds ([#1448](https://github.com/telus/universal-design-system/issues/1448)) ([8bc4778](https://github.com/telus/universal-design-system/commit/8bc477890f0183584fdc1009d7929b71d23820a3))
 
 ## [1.2.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.1.0...@telus-uds/components-base/v1.2.0) (2022-03-02)
 

package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx

@@ -1,7 +1,9 @@
 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')
@@ -30,4 +32,37 @@ describe('ActivityIndicator', () => {
     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/__tests__/ActivityIndicator/__snapshots__/ActivityIndicator.test.jsx.snap

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

package/__tests__/FlexGrid/Col.test.jsx

@@ -48,7 +48,6 @@ describe('FlexGrid.Col offsets', () => {
     )
     const expectIfOffsetExpected = (propViewport) => {
       const target = getByText(`${propViewport}Offset`).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfOffsetExpected('xs').toHaveStyle(getOffsetStyle('xs'))
@@ -104,7 +103,6 @@ describe('FlexGrid.Col sizes', () => {
 
     const expectIfSizeExpected = (propViewport) => {
       const target = getByText(propViewport).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfSizeExpected('xs').toHaveStyle(getNumericSizeStyle('xs'))
@@ -154,7 +152,6 @@ describe('FlexGrid.Col sizes', () => {
 
     const expectIfSizeExpected = (text) => {
       const target = getByText(text).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[text] ? expect(target) : expect(target).not
     }
     expectIfSizeExpected('xs-md').toHaveStyle(getNumericSizeStyle('xs'))
@@ -166,16 +163,17 @@ describe('FlexGrid.Col sizes', () => {
   })
 
   // Testing special "hiding" case on passing xs, sm, md, lg, xl props as 0.
-  // Doesn't inherit like other values for these props, only applies to the given prop
+  // Should inherit like other values for these props, confirmed in:
+  // https://github.com/telus/universal-design-system/pull/364#discussion_r671382300
   it.each(
     // true here indicates hiding styles should apply
     // Align expected results like a table so they're easier to read
     /* prettier-ignore */ [
     ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
-    ['sm', { xs: false, sm: true,  md: false, lg: false, xl: false }],
-    ['md', { xs: false, sm: false, md: true,  lg: false, xl: false }],
-    ['lg', { xs: false, sm: false, md: false, lg: true,  xl: false }],
-    ['xl', { xs: false, sm: false, md: false, lg: false, xl: true  }]
+    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
+    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
+    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
+    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
   ]
   )('applies hiding styles from one prop at viewport "%s"', (viewport, expected) => {
     const hidingStyle = { display: 'none' }
@@ -199,7 +197,6 @@ describe('FlexGrid.Col sizes', () => {
     )
     const expectIfHidingExpected = (propViewport) => {
       const target = getByText(propViewport).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfHidingExpected('xs').toHaveStyle(hidingStyle)
@@ -248,7 +245,6 @@ describe('FlexGrid.Col horizontalAlign', () => {
 
     const expectIfAlignExpected = (propViewport) => {
       const target = getByText(propViewport).parent
-      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfAlignExpected('xs').toHaveStyle(alignRightStyle)

package/__tests__/utils/props.test.js

@@ -0,0 +1,36 @@
+import { selectSystemProps } from '../../src/utils'
+
+describe('selectSystemProps', () => {
+  it('reduces the selectors and the types correctly', () => {
+    const somePropNames = ['a', 'b']
+    const someTypes = { a: 1, b: 2 }
+    const someOtherPropNames = ['c', 'd']
+    const someOtherTypes = { c: 3, d: 4 }
+    const reducer = (props) => (acc, allowedPropName) =>
+      allowedPropName in props ? { ...acc, [allowedPropName]: props[allowedPropName] } : acc
+    const exampleProps = { a: 'a', c: 'c', e: 'e' }
+    const [selectProps, selectedPropTypes] = selectSystemProps([
+      { select: (props) => somePropNames.reduce(reducer(props), {}), types: someTypes },
+      { select: (props) => someOtherPropNames.reduce(reducer(props), {}), types: someOtherTypes }
+    ])
+    expect(selectProps(exampleProps)).toEqual({ a: 'a', c: 'c' })
+    expect(selectedPropTypes).toEqual({ a: 1, b: 2, c: 3, d: 4 })
+  })
+
+  it('returns selector throwing if one of the prop helpers does not have any valid prop selectors', () => {
+    const [selectProps] = selectSystemProps([{ types: {} }])
+    expect(() => {
+      selectProps({ someProp: 'some value' })
+    }).toThrowError(
+      "An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in"
+    )
+  })
+
+  it('throws if one of the prop helpers does not have any valid prop types selectors', () => {
+    expect(() => {
+      selectSystemProps([{ select: () => {} }])
+    }).toThrowError(
+      "An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in"
+    )
+  })
+})

package/__tests__/utils/semantics.test.jsx

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native'
 
-import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
+import { getA11yPropsFromHtmlTag, supportedTags } from '../../src'
 
 // Note that currently all tests run as ios so only native logic can be tested here
 // until cross-platform tests are set up. See issue:
@@ -8,16 +8,7 @@ import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
 
 // As a temporary measure, there are tests on web-context HTML output for Box component
 // in @telus-uds/ds-allium which test the actual output when the tags are rendered.
-
-// These tests will therefore just test the values returned in a native context.
 describe('getA11yPropsFromHtmlTag', () => {
-  it.each(Object.entries(tagsToRoles))(
-    'responds to tag "%s" with accessibilityRole "%s"',
-    (tag, role) => {
-      expect(getA11yPropsFromHtmlTag(tag)).toEqual({ accessibilityRole: role })
-    }
-  )
-
   it.each([
     [1, 'h1'],
     [2, 'h2'],

package/babel.config.js

@@ -1,13 +1,35 @@
 module.exports = (api) => {
-  const env = api.cache(() => process.env.NODE_ENV)
-  if (env === 'test') {
-    // configuration for jest
+  // configuration for jest
+  if (api.env('test')) {
     return {
       presets: ['module:metro-react-native-babel-preset']
     }
   }
+
+  // Default to CJS for docs generators etc; build as ESM modules when requested.
+  const isModule = api.env('module')
+
   return {
-    presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
-    plugins: [['react-native-web', { commonjs: true }]]
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-env',
+        {
+          // `false` in babel env options means preserve ESM import / export syntax
+          // https://babeljs.io/docs/en/babel-preset-env#modules
+          modules: isModule ? false : 'cjs'
+        }
+      ]
+    ],
+    plugins: [
+      [
+        'react-native-web',
+        {
+          // Use the build of React Native Web that matches our build. ESM prefered, for treeshaking etc.
+          // Be careful not to have both RNW builds in an app as init will run twice, shuffling styles.
+          commonjs: !isModule
+        }
+      ]
+    ]
   }
 }