@telus-uds/components-base 1.6.1 → 1.8.0

package/lib/utils/props/textProps.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// These are the props accepted specifically on React Native (Web) `Text` elements.
+// They are generally concerned with the behaviour of multiline text.
+const crossPlatform = {
+  /**
+   * Truncates text after this many lines with an ellipsis at the end.
+   * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
+   */
+  numberOfLines: _propTypes.default.number,
+
+  /**
+   * Default is true on web and false on native
+   */
+  selectable: _propTypes.default.bool
+};
+/**
+ * See React Native docs for latest details on these.
+ * https://reactnative.dev/docs/text
+ */
+
+const nativeOnly = {
+  ellipsizeMode: _propTypes.default.string,
+  maxFontSizeMultiplier: _propTypes.default.number,
+  minimumFontScale: _propTypes.default.number,
+  onTextLayout: _propTypes.default.func,
+  suppressHighlighting: _propTypes.default.bool,
+  textBreakStrategy: _propTypes.default.string
+};
+/**
+ * These set HTML attributes of the same name.
+ */
+
+const webOnly = {
+  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
+  lang: _propTypes.default.string
+};
+var _default = {
+  /**
+   * Set of prop types specific to React Native and React Native Web `Text`,
+   * which largely revolve around the behaviour of multiline non-pressable text.
+   */
+  types: { ...crossPlatform,
+    ...webOnly,
+    ...nativeOnly
+  },
+
+  /**
+   * Filters a props object, returning only props specific to `Text` elements
+   * on the current platform. Does not include props applicable to `Text` and `View`.
+   */
+  select: (0, _getPropSelector.default)({ ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};
+exports.default = _default;

package/lib-module/Button/ButtonGroup.js

@@ -4,6 +4,7 @@ import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import ButtonBase from './ButtonBase';
 import { StackWrap } from '../StackView';
+import Fieldset from '../Fieldset';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
@@ -21,6 +22,13 @@ const ButtonGroup = /*#__PURE__*/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',
@@ -35,7 +43,8 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
   const stackTokens = selectTokens('StackView', themeTokens);
   const {
     direction,
-    space
+    space,
+    fieldSpace
   } = themeTokens;
   const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant);
   const {
@@ -57,54 +66,71 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
 
   if (!containUniqueFields(items, uniqueFields)) {
     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
 
-  return /*#__PURE__*/_jsx(StackWrap, { ...systemProps,
-    space: space,
-    direction: direction,
-    tokens: stackTokens,
+
+  const innerRole = Platform.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  return /*#__PURE__*/_jsx(Fieldset, { ...systemProps,
     ref: ref,
-    children: 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,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    readOnly: readOnly,
+    inactive: inactive,
+    validation: validation,
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(StackWrap, {
+      accessibilityRole: innerRole,
+      space: space,
+      direction: direction,
+      tokens: stackTokens,
+      ref: ref,
+      children: items.map(({
         label,
-        currentValues
-      }]);
-
-      const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress(event);
-        toggleOneValue(id, event);
-      };
-
-      const itemA11y = {
-        accessibilityState: {
-          checked: isSelected
-        },
-        accessibilityRole: itemA11yRole,
+        id = label,
         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 /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
-        ...pressHandlers,
-        onPress: handlePress,
-        tokens: getButtonTokens,
-        selected: isSelected,
-        inactive: inactive,
-        ...itemA11y,
-        ...selectItemProps(itemRest),
-        children: label
-      }, id);
+        ...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
+        }]);
+
+        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)
+        }; // 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 /*#__PURE__*/_jsx(ButtonBase, {
+          ref: itemRef,
+          ...pressHandlers,
+          onPress: handlePress,
+          tokens: getButtonTokens,
+          selected: isSelected,
+          inactive: inactive,
+          ...itemA11y,
+          ...selectItemProps(itemRest),
+          children: label
+        }, id);
+      })
     })
   });
 });
@@ -168,6 +194,52 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    * 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/lib-module/Checkbox/CheckboxGroup.js

@@ -213,18 +213,18 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
   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/lib-module/ExpandCollapse/Panel.js

@@ -75,7 +75,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
     }
   };
 
-  const animatedStyles = useVerticalExpandAnimation({
+  const [animatedStyles, animatedRef] = useVerticalExpandAnimation({
     containerHeight,
     isExpanded,
     tokens: themeTokens
@@ -96,6 +96,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
       onPress: handleControlPress,
       children: control
     }), /*#__PURE__*/_jsx(Animated.View, {
+      ref: animatedRef,
       style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
       ...focusabilityProps,
       children: /*#__PURE__*/_jsx(View, {

package/lib-module/Fieldset/Fieldset.js

@@ -17,6 +17,7 @@ import Legend from './Legend';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const Fieldset = /*#__PURE__*/forwardRef(({
+  copy = 'en',
   space,
   feedback,
   feedbackPosition = 'top',
@@ -44,6 +45,7 @@ const Fieldset = /*#__PURE__*/forwardRef(({
 
   const legendContent = legend && /*#__PURE__*/_jsx(Legend, {
     children: /*#__PURE__*/_jsx(InputLabel, {
+      copy: copy,
       label: legend,
       hint: hint,
       hintPosition: hintPosition,
@@ -83,6 +85,11 @@ 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.

package/lib-module/InputLabel/InputLabel.js

@@ -35,6 +35,7 @@ const selectGapStyles = ({
 });
 
 const InputLabel = /*#__PURE__*/forwardRef(({
+  copy = 'en',
   label,
   forId,
   hint,
@@ -68,7 +69,8 @@ const InputLabel = /*#__PURE__*/forwardRef(({
           height: themeTokens.fontSize * themeTokens.lineHeight
         }],
         children: /*#__PURE__*/_jsx(Tooltip, {
-          content: tooltip
+          content: tooltip,
+          copy: copy
         })
       })]
     }), hint && !isHintInline && /*#__PURE__*/_jsx(Text, {
@@ -81,6 +83,11 @@ const InputLabel = /*#__PURE__*/forwardRef(({
 InputLabel.displayName = 'InputLabel';
 InputLabel.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
   /**
    * The input label.
    */

package/lib-module/InputSupports/InputSupports.js

@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const InputSupports = /*#__PURE__*/forwardRef(({
   children,
+  copy = 'en',
   label,
   hint,
   hintPosition = 'inline',
@@ -34,6 +35,7 @@ const InputSupports = /*#__PURE__*/forwardRef(({
     space: space,
     ref: ref,
     children: [label && /*#__PURE__*/_jsx(InputLabel, {
+      copy: copy,
       label: label,
       hint: hint,
       hintPosition: hintPosition,
@@ -54,6 +56,11 @@ InputSupports.displayName = 'InputSupports';
 InputSupports.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 input label.
    */

package/lib-module/List/ListItem.js

@@ -26,8 +26,7 @@ const selectBulletContainerStyles = ({
   itemBulletContainerAlign
 }) => ({
   width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign,
-  justifyContent: itemBulletContainerAlign
+  alignItems: itemBulletContainerAlign
 });
 
 const selectItemIconTokens = ({
@@ -38,16 +37,20 @@ const selectItemIconTokens = ({
   color: itemIconColor
 });
 
-const selectCommonIconStyles = ({
+const selectSideItemContainerStyles = ({
+  listGutter,
   iconMarginTop
 }) => ({
-  marginTop: iconMarginTop
-});
+  marginTop: iconMarginTop,
+  marginRight: listGutter
+}); // Align bullets with the top line of text the same way icons are aligned
 
-const selectSideItemContainerStyles = ({
-  listGutter
+
+const selectBulletPositioningStyles = ({
+  itemIconSize
 }) => ({
-  marginRight: listGutter
+  width: itemIconSize,
+  height: itemIconSize
 });
 
 const selectItemStyles = ({
@@ -100,8 +103,8 @@ const ListItem = /*#__PURE__*/forwardRef(({
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
-  const commonIconStyles = selectCommonIconStyles(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const accessibilityRole = Platform.select({
     web: 'listitem',
@@ -144,7 +147,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
 
     if (icon) {
       return /*#__PURE__*/_jsx(View, {
-        style: [sideItemContainerStyles, commonIconStyles],
+        style: sideItemContainerStyles,
         children: /*#__PURE__*/_jsx(IconComponent, {
           size: iconSize || iconTokens.size,
           color: iconColor || iconTokens.color
@@ -155,8 +158,11 @@ const ListItem = /*#__PURE__*/forwardRef(({
     return /*#__PURE__*/_jsx(View, {
       style: [sideItemContainerStyles, itemBulletContainerStyles],
       children: /*#__PURE__*/_jsx(View, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
+        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+        children: /*#__PURE__*/_jsx(View, {
+          style: itemBulletStyles,
+          testID: "unordered-item-bullet"
+        })
       })
     });
   };
@@ -176,6 +182,10 @@ const staticStyles = StyleSheet.create({
   },
   wrap: {
     flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });
 ListItem.propTypes = { ...selectedSystemPropTypes,

package/lib-module/Notification/Notification.js

@@ -177,7 +177,7 @@ Notification.propTypes = { ...selectedSystemPropTypes,
   dismissible: PropTypes.bool,
 
   /**
-   * Select english or french copy for the accessible label of the dismiss button.
+   * Select English or French copy for the accessible label of the dismiss button.
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
     dismiss: PropTypes.string

package/lib-module/Radio/RadioGroup.js

@@ -29,7 +29,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * ### Uncontrolled version
  *
  * If the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.
- * Whenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).
+ * Whenever the radio gets toggled, it calls the `onChange` callback with the new value (string).
  *
  * ### Use in forms
  *
@@ -60,6 +60,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  */
 
 const RadioGroup = /*#__PURE__*/forwardRef(({
+  copy = 'en',
   tokens,
   radioTokens,
   variant,
@@ -128,6 +129,7 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
     }, radioId);
   });
   return /*#__PURE__*/_jsx(Fieldset, {
+    copy: copy,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -148,6 +150,11 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
 RadioGroup.displayName = 'RadioGroup';
 RadioGroup.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
   /**
    * Optional theme token overrides for the outer RadioGroup component
    */
@@ -199,12 +206,12 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   feedback: PropTypes.string,
 
   /**
-   * If provided, the radio card with this id is selected on first render.
+   * If provided, the radio with this id is selected on first render.
    */
   initialCheckedId: PropTypes.string,
 
   /**
-   * If not undefined, the radio card with this id is selected (or none is selected if `null`), and the
+   * If not undefined, the radio with this id is selected (or none is selected if `null`), and the
    * element's selection state will be controlled by its parent using the `onChange` function.
    */
   checkedId: PropTypes.string,
@@ -216,12 +223,12 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   onChange: PropTypes.func,
 
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the radios cannot be selected by the user and simply show their current state.
    */
   readOnly: PropTypes.bool,
 
   /**
-   * If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the radios cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: PropTypes.bool,

package/lib-module/RadioCard/RadioCardGroup.js

@@ -61,6 +61,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  */
 
 const RadioCardGroup = /*#__PURE__*/forwardRef(({
+  copy = 'en',
   tokens,
   radioCardTokens,
   variant,
@@ -106,6 +107,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
   }
 
   return /*#__PURE__*/_jsx(Fieldset, {
+    copy: copy,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -155,6 +157,11 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
 RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */