@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/utils/props/index.js

@@ -34,16 +34,16 @@ Object.defineProperty(exports, "clickProps", {
     return _clickProps.default;
   }
 });
-Object.defineProperty(exports, "copyPropTypes", {
+Object.defineProperty(exports, "componentPropType", {
   enumerable: true,
   get: function () {
-    return _copyPropTypes.default;
+    return _componentPropType.default;
   }
 });
-Object.defineProperty(exports, "componentPropType", {
+Object.defineProperty(exports, "copyPropTypes", {
   enumerable: true,
   get: function () {
-    return _componentPropType.default;
+    return _copyPropTypes.default;
   }
 });
 Object.defineProperty(exports, "hrefAttrsProp", {
@@ -64,16 +64,16 @@ Object.defineProperty(exports, "linkProps", {
     return _linkProps.default;
   }
 });
-Object.defineProperty(exports, "pressProps", {
+Object.defineProperty(exports, "paddingProp", {
   enumerable: true,
   get: function () {
-    return _pressProps.default;
+    return _paddingProp.default;
   }
 });
-Object.defineProperty(exports, "paddingProp", {
+Object.defineProperty(exports, "pressProps", {
   enumerable: true,
   get: function () {
-    return _paddingProp.default;
+    return _pressProps.default;
   }
 });
 Object.defineProperty(exports, "rectProp", {
@@ -88,16 +88,16 @@ Object.defineProperty(exports, "responsiveProps", {
     return _responsiveProps.default;
   }
 });
-Object.defineProperty(exports, "spacingProps", {
+Object.defineProperty(exports, "selectSystemProps", {
   enumerable: true,
   get: function () {
-    return _spacingProps.default;
+    return _selectSystemProps.default;
   }
 });
-Object.defineProperty(exports, "selectSystemProps", {
+Object.defineProperty(exports, "spacingProps", {
   enumerable: true,
   get: function () {
-    return _selectSystemProps.default;
+    return _spacingProps.default;
   }
 });
 Object.defineProperty(exports, "textInputProps", {

package/lib/utils/props/inputSupportsProps.js

@@ -11,6 +11,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var _default = {
   types: {
+    /**
+     * Whether the English or French copy will be used (e.g. for accessibility labels).
+     */
+    copy: _propTypes.default.oneOf(['en', 'fr']),
+
     /**
      * The input label.
      */
@@ -42,22 +47,27 @@ var _default = {
      */
     validation: _propTypes.default.oneOf(['error', 'success'])
   },
-  select: ({
-    label,
-    hint,
-    hintPosition,
-    feedback,
-    tooltip,
-    validation
-  }) => ({
-    supportsProps: {
+  select: _ref => {
+    let {
+      copy,
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    }
-  })
+    } = _ref;
+    return {
+      supportsProps: {
+        copy,
+        label,
+        hint,
+        hintPosition,
+        feedback,
+        tooltip,
+        validation
+      }
+    };
+  }
 };
 exports.default = _default;

package/lib/utils/props/linkProps.js

@@ -44,14 +44,15 @@ var _default = {
    * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
    * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
-  handleHref: ({
-    onPress,
-    href
-  }) => {
+  handleHref: _ref => {
+    let {
+      onPress,
+      href
+    } = _ref;
     return _Platform.default.select({
       web: onPress,
-      default: (...args) => {
-        if (onPress) onPress(...args);
+      default: function () {
+        if (onPress) onPress(...arguments);
         if (href) _Linking.default.openURL(href);
       }
     });

package/lib/utils/props/pressProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.pressPropTypes = void 0;
+exports.pressPropTypes = exports.default = void 0;
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 

package/lib/utils/props/tokens.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = void 0;
+exports.selectTokens = exports.getTokensSetPropType = exports.getTokensPropType = exports.getTokenNames = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -103,16 +103,22 @@ const selectTokens = (specifier, tokens, prefix) => {
 
 exports.selectTokens = selectTokens;
 
-const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
-  _propTypes.default.checkPropTypes({
-    [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
-  }, props, propName, componentName);
+const getTokensPropType = function () {
+  for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    componentsNames[_key] = arguments[_key];
+  }
 
-  if (typeof props[propName] !== 'function') {
+  return (props, propName, componentName) => {
     _propTypes.default.checkPropTypes({
-      [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
     }, props, propName, componentName);
-  }
+
+    if (typeof props[propName] !== 'function') {
+      _propTypes.default.checkPropTypes({
+        [propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
+      }, props, propName, componentName);
+    }
+  };
 };
 /**
  * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
@@ -132,12 +138,20 @@ const getTokensPropType = (...componentsNames) => (props, propName, componentNam
 
 exports.getTokensPropType = getTokensPropType;
 
-const getTokensSetPropType = (componentTokenKeys, {
-  partial = false,
-  allowFunction = false
-} = {}) => {
+const getTokensSetPropType = function (componentTokenKeys) {
+  let {
+    partial = false,
+    allowFunction = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
   const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
-  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+  function (props, propName) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+      args[_key2 - 2] = arguments[_key2];
+    }
+
+    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+  }])));
 
   return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
 };

package/lib/utils/ssr.js

@@ -21,7 +21,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {string} [appName]
  * @returns {ReactElement[]}
  */
-const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+const getReactNativeWebSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+
   _AppRegistry.default.registerComponent(appName, () => AppRoot);
 
   const {
@@ -43,7 +45,9 @@ const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
 
 exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
 
-const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+const getSSRStyles = function (AppRoot) {
+  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
+  let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
   ];
 };

package/lib/utils/useCopy.js

@@ -35,10 +35,12 @@ const DEFAULT_COPY = 'en';
 
 exports.DEFAULT_COPY = DEFAULT_COPY;
 
-function useCopy({
-  dictionary,
-  copy = DEFAULT_COPY
-}) {
+function useCopy(_ref) {
+  let {
+    dictionary,
+    copy = DEFAULT_COPY
+  } = _ref;
+
   if (typeof copy === 'string') {
     return key => key ? dictionary[copy][key] : dictionary[copy];
   } // support overriding the entire copy dictionary with an object for a single language

package/lib/utils/useHash.js

@@ -29,7 +29,8 @@ const doAction = (action, event) => {
  */
 
 
-const useHash = (action, isReady = true) => {
+const useHash = function (action) {
+  let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   const [isDone, setIsDone] = (0, _react.useState)(false); // Do the action just once when ready after component mount, from hash on page load
 
   const isToDo = isReady && !isDone;

package/lib/utils/useResponsiveProp.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.resolveResponsiveProp = void 0;
+exports.resolveResponsiveProp = exports.default = void 0;
 
 var _systemConstants = require("@telus-uds/system-constants");
 

package/lib/utils/useUniqueId.js

@@ -9,7 +9,8 @@ var _react = require("react");
 
 let id = 0;
 
-function useUniqueId(prefix = '') {
+function useUniqueId() {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
     return `${prefix}-${id}`;

package/lib/utils/withLinkRouter.js

@@ -50,11 +50,12 @@ const hasOwnProperty = (object, prop) => Object.prototype.hasOwnProperty.call(ob
 
 
 const withLinkRouter = Component => {
-  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)(({
-    LinkRouter,
-    linkRouterProps,
-    ...props
-  }, ref) => {
+  const wrappedComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+    let {
+      LinkRouter,
+      linkRouterProps,
+      ...props
+    } = _ref;
     if (!LinkRouter) return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, { ...props,
       ref: ref
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.7.1",
+  "version": "1.8.2",
   "description": "Base components",
   "keywords": [
     "base"
@@ -22,17 +22,16 @@
   },
   "scripts": {
     "test": "jest",
-    "lint": "yarn --cwd ../.. lint:path --color packages/components-base",
-    "lint:fix": "yarn --cwd ../.. lint:path --fix packages/components-base",
+    "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
+    "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
-    "build": "yarn build:code && yarn build:docs",
+    "build": "npm run build:code && npm run build:docs",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
-    "build:code": "yarn build:main && yarn build:module",
+    "build:code": "npm run build:main && npm run build:module",
     "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
-    "dev": "yarn build:code --watch",
-    "release": "standard-version"
+    "dev": "npm run build:code --watch"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -45,21 +44,28 @@
   ],
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "*",
+    "react-dom": "^17.0.2",
     "react-native": "*",
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {
-    "@telus-uds/browserslist-config": "^1.0.1",
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/cli": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/manager-webpack5": "^6.5.6",
+    "@telus-uds/browserslist-config": "^1.0.2",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",
-    "react-test-renderer": "^16.3.2"
+    "react-test-renderer": "^16.3.2",
+    "webpack": "5.x"
   },
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
-    "@telus-uds/system-constants": "^1.0.2",
-    "@telus-uds/system-theme-tokens": "^1.5.0",
+    "@telus-uds/system-constants": "^1.0.4",
+    "@telus-uds/system-theme-tokens": "^2.0.2",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/Button/ButtonGroup.jsx

@@ -5,6 +5,7 @@ import { Platform } from 'react-native'
 
 import ButtonBase from './ButtonBase'
 import { StackWrap } from '../StackView'
+import Fieldset from '../Fieldset'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
@@ -41,6 +42,13 @@ const ButtonGroup = forwardRef(
       onChange,
       readOnly = false,
       inactive = false,
+      legend,
+      tooltip,
+      hint,
+      validation,
+      feedback,
+      name: inputGroupName,
+      copy,
       accessibilityRole = maxValues === 1
         ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
         : Platform.select({ web: 'group', default: 'none' }),
@@ -51,7 +59,7 @@ const ButtonGroup = forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
     const stackTokens = selectTokens('StackView', themeTokens)
-    const { direction, space } = themeTokens
+    const { direction, space, fieldSpace } = themeTokens
 
     const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
@@ -74,53 +82,73 @@ const ButtonGroup = forwardRef(
       throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`)
     }
 
+    // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
+    const innerRole =
+      Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined
+
     return (
-      <StackWrap
+      <Fieldset
         {...systemProps}
-        space={space}
-        direction={direction}
-        tokens={stackTokens}
         ref={ref}
+        name={inputGroupName}
+        legend={legend}
+        tooltip={tooltip}
+        hint={hint}
+        space={fieldSpace}
+        feedback={feedback}
+        readOnly={readOnly}
+        inactive={inactive}
+        validation={validation}
+        accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
       >
-        {items.map(
-          ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
-            const isSelected = currentValues.includes(id)
+        <StackWrap
+          accessibilityRole={innerRole}
+          space={space}
+          direction={direction}
+          tokens={stackTokens}
+          ref={ref}
+        >
+          {items.map(
+            ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
+              const isSelected = currentValues.includes(id)
 
-            // Pass an object of relevant component state as first argument for any passed-in press handlers
-            const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+              // Pass an object of relevant component state as first argument for any passed-in press handlers
+              const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
-            const handlePress = (event) => {
-              if (pressHandlers.onPress) pressHandlers.onPress(event)
-              toggleOneValue(id, event)
-            }
+              const handlePress = (event) => {
+                if (pressHandlers.onPress) pressHandlers.onPress(event)
+                toggleOneValue(id, event)
+              }
 
-            const itemA11y = {
-              accessibilityState: { checked: isSelected },
-              accessibilityRole: itemA11yRole,
-              accessibilityLabel,
-              ...a11yProps.getPositionInSet(items.length, index)
-            }
+              const itemA11y = {
+                accessibilityState: { checked: isSelected },
+                accessibilityRole: itemA11yRole,
+                accessibilityLabel,
+                ...a11yProps.getPositionInSet(items.length, index)
+              }
 
-            // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
-            // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-            return (
-              <ButtonBase
-                ref={itemRef}
-                key={id}
-                {...pressHandlers}
-                onPress={handlePress}
-                tokens={getButtonTokens}
-                selected={isSelected}
-                inactive={inactive}
-                {...itemA11y}
-                {...selectItemProps(itemRest)}
-              >
-                {label}
-              </ButtonBase>
-            )
-          }
-        )}
-      </StackWrap>
+              // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+              // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+              return (
+                <ButtonBase
+                  ref={itemRef}
+                  key={id}
+                  {...pressHandlers}
+                  onPress={handlePress}
+                  tokens={getButtonTokens}
+                  selected={isSelected}
+                  inactive={inactive}
+                  {...itemA11y}
+                  {...selectItemProps(itemRest)}
+                >
+                  {label}
+                </ButtonBase>
+              )
+            }
+          )}
+        </StackWrap>
+      </Fieldset>
     )
   }
 )
@@ -180,7 +208,44 @@ ButtonGroup.propTypes = {
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: PropTypes.arrayOf(PropTypes.string)
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: PropTypes.string,
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: PropTypes.string,
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: PropTypes.string,
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: PropTypes.oneOf(['error', 'success']),
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: PropTypes.string,
+  /**
+   * If true, the buttons cannot be selected by the user and simply show their current state.
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset.
+   */
+  name: PropTypes.string,
+  /**
+   * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
+   */
+  copy: PropTypes.oneOf(['en', 'fr'])
 }
 
 export default ButtonGroup

package/src/Checkbox/Checkbox.jsx

@@ -137,7 +137,11 @@ const Checkbox = forwardRef(
     },
     ref
   ) => {
-    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue(
       {
         value: checked,
         initialValue: defaultChecked,
@@ -152,9 +156,8 @@ const Checkbox = forwardRef(
       ...variant
     })
     const defaultTokens = getTokens()
-    const { feedbackMarginBottom, feedbackMarginTop, feedbackPosition } = selectFeedbackTokens(
-      defaultTokens
-    )
+    const { feedbackMarginBottom, feedbackMarginTop, feedbackPosition } =
+      selectFeedbackTokens(defaultTokens)
     const styles = StyleSheet.create({
       feedbackContainer: { marginTop: feedbackMarginTop, marginBottom: feedbackMarginBottom }
     })

package/src/Checkbox/CheckboxGroup.jsx

@@ -219,16 +219,16 @@ CheckboxGroup.propTypes = {
    */
   onChange: PropTypes.func,
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the checkboxes cannot be selected by the user and simply show their current state.
    */
   readOnly: PropTypes.bool,
   /**
-   * If true, the checkbox cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the checkboxes cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: PropTypes.bool,
   /**
-   * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
+   * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: PropTypes.string
 }

package/src/ExpandCollapse/Panel.jsx

@@ -79,7 +79,8 @@ const ExpandCollapsePanel = forwardRef(
         setContainerHeight(height)
       }
     }
-    const animatedStyles = useVerticalExpandAnimation({
+
+    const [animatedStyles, animatedRef] = useVerticalExpandAnimation({
       containerHeight,
       isExpanded,
       tokens: themeTokens
@@ -105,6 +106,7 @@ const ExpandCollapsePanel = forwardRef(
           {control}
         </ExpandCollapseControl>
         <Animated.View
+          ref={animatedRef}
           style={[overflowContainerStyles, animatedStyles, staticStyles.itemsContainer]}
           {...focusabilityProps}
         >

package/src/Fieldset/Fieldset.jsx

@@ -18,6 +18,7 @@ import Legend from './Legend'
 const Fieldset = forwardRef(
   (
     {
+      copy = 'en',
       space,
       feedback,
       feedbackPosition = 'top',
@@ -44,6 +45,7 @@ const Fieldset = forwardRef(
     const legendContent = legend && (
       <Legend>
         <InputLabel
+          copy={copy}
           label={legend}
           hint={hint}
           hintPosition={hintPosition}
@@ -83,6 +85,10 @@ Fieldset.displayName = 'Fieldset'
 
 Fieldset.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * The accessibility role of the `<fieldset>` element itself. Other React Native accessibility
    * props are not supported because there is not an appropriate counterpart for Fieldsets.