@telus-uds/components-base 0.0.2-prerelease.9 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.9",
+  "version": "1.0.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -25,7 +25,7 @@
     "format": "prettier --write .",
     "build": "babel src -d lib",
     "dev": "yarn build --watch",
-    "release": "standard-version"
+    "release": "standard-version --release-as major"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -33,6 +33,9 @@
   "standard-engine": {
     "skip": true
   },
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "*",
@@ -47,11 +50,12 @@
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^0.0.2-prerelease.2",
-    "@telus-uds/system-themes": "^0.0.2-prerelease.2",
+    "@telus-uds/system-constants": "^1.0.0",
+    "@telus-uds/system-theme-tokens": "^1.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
-    "react-native-picker-select": "^8.0.4"
+    "react-native-picker-select": "^8.0.4",
+    "semver": "^7.3.5"
   }
 }

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
-  "changelog": "### [0.0.2-prerelease.9](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.8...@telus-uds/components-base/v0.0.2-prerelease.9) (2021-12-29)\n\n\n### Features\n\n* **base:** implement IconButton ([#958](https://github.com/telus/universal-design-system/issues/958)) ([c3ff7dd](https://github.com/telus/universal-design-system/commit/c3ff7dd9fb76123d3ff8409e507c89ad91b7fef2))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.9",
-  "newVersion": "0.0.2-prerelease.9",
+  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.10",
+  "changelog": "## [1.0.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.10...@telus-uds/components-base/v1.0.0) (2022-02-03)\n\n\n### Features\n\n* add dataSet prop ([#1156](https://github.com/telus/universal-design-system/issues/1156)) ([21f49f6](https://github.com/telus/universal-design-system/commit/21f49f6c898118bb94c45f07a52c163b61e4cbaa))\n* **base:** add forwardRef to remaining components ([#1218](https://github.com/telus/universal-design-system/issues/1218)) ([49ccc42](https://github.com/telus/universal-design-system/commit/49ccc4217a68613f23dd7a23dd99e0f61fd6f121))\n* **base:** add tag prop for semantic HTML ([#1222](https://github.com/telus/universal-design-system/issues/1222)) ([581d070](https://github.com/telus/universal-design-system/commit/581d070782dfe569ffcf20c34de6e4409cdd8dfa))\n* **themes:** validate theme token types ([#1221](https://github.com/telus/universal-design-system/issues/1221)) ([dae382d](https://github.com/telus/universal-design-system/commit/dae382d19f86b88cd5de9df8c94f8200aee5b33f))\n\n\n### Bug Fixes\n\n* **base:** avoid errors in apps and update demo app ([#1215](https://github.com/telus/universal-design-system/issues/1215)) ([df6897a](https://github.com/telus/universal-design-system/commit/df6897a4918342e9859e596b9578bcdefc1a5702))\n",
+  "releaseTag": "@telus-uds/components-base/v1.0.0",
+  "newVersion": "1.0.0",
   "packageName": "@telus-uds/components-base"
 }

package/src/A11yText/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 
@@ -10,7 +10,7 @@ import { a11yProps } from '../utils/propTypes'
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = ({ text, heading, ...rest }) => {
+const A11yText = forwardRef(({ text, heading, ...rest }, ref) => {
   const a11y = a11yProps.select({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -21,8 +21,10 @@ const A11yText = ({ text, heading, ...rest }) => {
     accessibilityRole: heading ? 'header' : 'text',
     ...rest
   })
-  return <View style={styles.invisible} {...a11y} />
-}
+  return <View style={styles.invisible} ref={ref} {...a11y} />
+})
+
+A11yText.displayName = 'A11yText'
 
 A11yText.propTypes = {
   text: PropTypes.string.isRequired,

package/src/ActivityIndicator/Spinner.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 
 const SVG_RADIUS = 20
@@ -20,8 +20,9 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = ({ size, color, thickness, label }) => (
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => (
   <svg
+    ref={ref}
     width={`${size}px`}
     height={`${size}px`}
     viewBox="0 0 48 48"
@@ -62,7 +63,8 @@ const Spinner = ({ size, color, thickness, label }) => (
       </circle>
     </g>
   </svg>
-)
+))
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes
 

package/src/ActivityIndicator/Spinner.native.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Animated, Easing, StyleSheet, View } from 'react-native'
 import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared'
 
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = ({ size, color, thickness, label }) => {
+const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
 
   React.useLayoutEffect(() => {
@@ -31,6 +31,7 @@ const Spinner = ({ size, color, thickness, label }) => {
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
     <View
+      ref={ref}
       style={[styles.container]}
       accessible
       accessibilityLabel={label}
@@ -109,7 +110,8 @@ const Spinner = ({ size, color, thickness, label }) => {
       </Animated.View>
     </View>
   )
-}
+})
+Spinner.displayName = 'Spinner'
 
 Spinner.propTypes = propTypes
 

package/src/Box/Box.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -8,7 +8,9 @@ import {
   variantProp,
   getTokensPropType,
   useSpacingScale,
-  viewProps
+  viewProps,
+  getA11yPropsFromHtmlTag,
+  layoutTags
 } from '../utils'
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
@@ -94,63 +96,146 @@ const selectBoxStyles = (tokens) => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = ({
-  space,
-  horizontal = space,
-  vertical = space,
-  top = vertical,
-  bottom = vertical,
-  left = horizontal,
-  right = horizontal,
-  children,
-  variant,
-  tokens,
-  scroll,
-  testID,
-  ...rest
-}) => {
-  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
+const Box = forwardRef(
+  (
+    {
+      space,
+      horizontal = space,
+      vertical = space,
+      top = vertical,
+      bottom = vertical,
+      left = horizontal,
+      right = horizontal,
+      flex,
+      children,
+      variant,
+      tokens,
+      scroll,
+      tag,
+      accessibilityRole,
+      testID,
+      dataSet,
+      ...rest
+    },
+    ref
+  ) => {
+    const props = {
+      ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+      ...a11yProps.select(rest),
+      ...viewProps.select(rest)
+    }
 
-  const themeTokens = useThemeTokens('Box', tokens, variant)
-  const styles = {
-    paddingLeft: useSpacingScale(left),
-    paddingRight: useSpacingScale(right),
-    paddingTop: useSpacingScale(top),
-    paddingBottom: useSpacingScale(bottom),
-    ...selectBoxStyles(themeTokens)
-  }
+    const themeTokens = useThemeTokens('Box', tokens, variant)
+    const styles = {
+      flex,
+      paddingLeft: useSpacingScale(left),
+      paddingRight: useSpacingScale(right),
+      paddingTop: useSpacingScale(top),
+      paddingBottom: useSpacingScale(bottom),
+      ...selectBoxStyles(themeTokens)
+    }
 
-  if (scroll) {
-    const scrollProps = typeof scroll === 'object' ? scroll : {}
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
+    if (scroll) {
+      const scrollProps = typeof scroll === 'object' ? scroll : {}
+      scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
+      return (
+        <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
+          {children}
+        </ScrollView>
+      )
+    }
     return (
-      <ScrollView {...scrollProps} {...props} testID={testID}>
+      <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
         {children}
-      </ScrollView>
+      </View>
     )
   }
-  return (
-    <View {...props} style={styles} testID={testID}>
-      {children}
-    </View>
-  )
-}
+)
+Box.displayName = 'Box'
 
 Box.propTypes = {
+  ...a11yProps.propTypes,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Box'),
+  /**
+   * Sets default padding on all sides of the box using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   space: spacingProps.types.spacingValue,
+  /**
+   * Sets top and bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   vertical: spacingProps.types.spacingValue,
+  /**
+   * Sets left and right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   horizontal: spacingProps.types.spacingValue,
+  /**
+   * Sets bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   bottom: spacingProps.types.spacingValue,
+  /**
+   * Sets left padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   left: spacingProps.types.spacingValue,
+  /**
+   * Sets right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   right: spacingProps.types.spacingValue,
+  /**
+   * Sets top padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   top: spacingProps.types.spacingValue,
+  /**
+   * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
+   *
+   * Set as 1 for the box to stretch and grow to fit in the available space, or another number to share
+   * space disproportionately with siblings. See https://reactnative.dev/docs/flexbox#flex for details.
+   *
+   * With the default `0`, the box takes its minimum width from its content.
+   */
+  flex: PropTypes.number,
+  /**
+   * Renders a scrollable ScrollView instead of an unscrollable View.
+   *
+   * May take an object of ScrollView props which are passed to the rendered ScrollView.
+   */
   scroll: PropTypes.oneOfType([
     PropTypes.bool,
     ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object
   ]),
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Box'),
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Use in tests if the box itself needs to be targetted and no other way of selecting the
+   * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
+   */
   testID: PropTypes.string,
+  /**
+   * @ignore
+   */
+  dataSet: PropTypes.object,
+  /**
+   * Box accepts any content as children.
+   */
   children: PropTypes.node.isRequired
 }
 

package/src/Button/Button.jsx

@@ -1,14 +1,17 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/propTypes'
 
-const Button = ({ accessibilityRole = 'button', tokens, variant, ...props }) => {
+const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
   const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  return <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} />
-}
+  return (
+    <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+  )
+})
+Button.displayName = 'Button'
 
 Button.propTypes = {
   ...a11yProps.types,

package/src/Button/ButtonBase.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
 import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
@@ -130,83 +130,92 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
-const ButtonBase = ({
-  href,
-  hrefAttrs,
-  children,
-  onPress,
-  tokens = {},
-  disabled = false, // alias for inactive
-  inactive = disabled,
-  selected = false,
-  ...rest
-}) => {
-  const extraButtonState = { inactive, selected }
-  const resolveButtonTokens = (pressableState) =>
-    resolvePressableTokens(tokens, pressableState, extraButtonState)
-
-  const a11y = a11yProps.select(rest)
-
-  const getPressableStyle = (pressableState) => {
-    const themeTokens = resolveButtonTokens(pressableState)
-    return [
-      staticStyles.row,
-      selectWebOnlyStyles(inactive, themeTokens, a11y),
-      selectOuterContainerStyles(themeTokens),
-      selectOuterWidthStyles(themeTokens)
-    ]
-  }
+const ButtonBase = forwardRef(
+  (
+    {
+      href,
+      hrefAttrs,
+      children,
+      onPress,
+      tokens = {},
+      disabled = false, // alias for inactive
+      inactive = disabled,
+      selected = false,
+      dataSet,
+      ...rest
+    },
+    ref
+  ) => {
+    const extraButtonState = { inactive, selected }
+    const resolveButtonTokens = (pressableState) =>
+      resolvePressableTokens(tokens, pressableState, extraButtonState)
+
+    const a11y = a11yProps.select(rest)
+
+    const getPressableStyle = (pressableState) => {
+      const themeTokens = resolveButtonTokens(pressableState)
+      return [
+        staticStyles.row,
+        selectWebOnlyStyles(inactive, themeTokens, a11y),
+        selectOuterContainerStyles(themeTokens),
+        selectOuterWidthStyles(themeTokens)
+      ]
+    }
 
-  return (
-    <Pressable
-      href={href}
-      onPress={linkProps.handleHref({ href, onPress })}
-      style={getPressableStyle}
-      disabled={inactive}
-      hrefAttrs={hrefAttrs}
-      {...a11y}
-    >
-      {(pressableState) => {
-        const themeTokens = resolveButtonTokens(pressableState)
-        const containerStyles = selectInnerContainerStyles(themeTokens)
-        const borderStyles = selectBorderStyles(themeTokens)
-        const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
-
-        // If the container has a width set, fill it instead of sizing from content.
-        // If in future we support text alignments other than center, add here.
-        const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
-
-        return (
-          <View
-            style={[
-              containerStyles,
-              borderStyles,
-              stretchStyles,
-              staticStyles.row,
-              Platform.select({
-                web: {
-                  maxWidth: '100%', // ensure overflowing content wraps
-                  // TODO: https://github.com/telus/universal-design-system/issues/487
-                  transition: 'background-color 200ms, border-color 200ms'
-                }
-              })
-            ]}
-          >
-            {wrapStringsInText(
-              typeof children === 'function'
-                ? children({
-                    ...resolvePressableState(pressableState, extraButtonState),
-                    textStyles
-                  })
-                : children,
-              { style: textStyles }
-            )}
-          </View>
-        )
-      }}
-    </Pressable>
-  )
-}
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        onPress={linkProps.handleHref({ href, onPress })}
+        style={getPressableStyle}
+        disabled={inactive}
+        dataSet={dataSet}
+        hrefAttrs={hrefAttrs}
+        {...a11y}
+      >
+        {(pressableState) => {
+          const themeTokens = resolveButtonTokens(pressableState)
+          const containerStyles = selectInnerContainerStyles(themeTokens)
+          const borderStyles = selectBorderStyles(themeTokens)
+          const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
+
+          // If the container has a width set, fill it instead of sizing from content.
+          // If in future we support text alignments other than center, add here.
+          const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
+
+          return (
+            <View
+              style={[
+                containerStyles,
+                borderStyles,
+                stretchStyles,
+                staticStyles.row,
+                Platform.select({
+                  web: {
+                    maxWidth: '100%', // ensure overflowing content wraps
+                    // TODO: https://github.com/telus/universal-design-system/issues/487
+                    transition: 'background-color 200ms, border-color 200ms'
+                  }
+                })
+              ]}
+            >
+              {wrapStringsInText(
+                typeof children === 'function'
+                  ? children({
+                      ...resolvePressableState(pressableState, extraButtonState),
+                      textStyles
+                    })
+                  : children,
+                { style: textStyles }
+              )}
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+ButtonBase.displayName = 'ButtonBase'
 
 ButtonBase.propTypes = {
   ...a11yProps.types,