@telus-uds/components-base 1.3.0 → 1.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output 00426a473859b487
+@telus-uds/components-base:build: cache hit, replaying output 4c5b413de9c92c19
 @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 214 files with Babel (15991ms).
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (14990ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (11089ms).
 @telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js

package/CHANGELOG.json

@@ -0,0 +1,38 @@
+{
+  "name": "@telus-uds/components-base",
+  "entries": [
+    {
+      "date": "Wed, 30 Mar 2022 09:49:08 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,19 @@
-# 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 Wed, 30 Mar 2022 09:49:08 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.3.1
+
+Wed, 30 Mar 2022 09:49:08 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
 
 ## [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)
 

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/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
+        }
+      ]
+    ]
   }
 }