@telus-uds/components-base 1.82.0 → 1.84.0

package/lib-module/ExpandCollapse/ExpandCollapse.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
@@ -45,16 +46,19 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
   return /*#__PURE__*/_jsx(View, {
+    style: staticStyles.container,
     ref: ref,
-    style: selectBorderStyles(themeTokens),
     ...selectProps(rest),
-    children: typeof children === 'function' ? children({
-      openIds,
-      onToggle,
-      resetValues,
-      setValues,
-      unsetValues
-    }) : children
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectBorderStyles(themeTokens),
+      children: typeof children === 'function' ? children({
+        openIds,
+        onToggle,
+        resetValues,
+        setValues,
+        unsetValues
+      }) : children
+    })
   });
 });
 ExpandCollapse.displayName = 'ExpandCollapse';
@@ -86,4 +90,9 @@ ExpandCollapse.propTypes = {
    */
   initialOpen: PropTypes.arrayOf(PropTypes.string)
 };
-export default ExpandCollapse;
+export default ExpandCollapse;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+});

package/lib-module/ExpandCollapse/Panel.js

@@ -7,7 +7,8 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import ExpandCollapseControl from './Control';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps, useCopy } from '../utils';
+import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
@@ -100,10 +101,15 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
     variant,
     controlRef,
     content,
+    copy = 'en',
     ...rest
   } = _ref5;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
   const selectedProps = selectProps({
     ...rest,
     accessibilityState: {
@@ -134,15 +140,20 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
     tokens: themeTokens
   });
   const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps;
+  const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
+  const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/_jsx(View, {
     style: selectContentPanelStyles(themeTokens),
+    accessibilityLabel: panelAccessibilityLabel,
     children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
       style: selectTextStyles(themeTokens),
+      accessibilityLabel: subPanelAccessibilityLabel,
       children: children
     }) : children
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
+    accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/_jsx(View, {
       style: selectControlPanelStyles(themeTokens),
       children: /*#__PURE__*/_jsx(ExpandCollapseControl, {
@@ -177,6 +188,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref5, ref) => {
         },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
+          accessibilityLabel: subPanelAccessibilityLabel,
           children: children
         })
       })

package/lib-module/ExpandCollapse/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    panel: 'Panel',
+    subPanel: 'SubPanel'
+  },
+  fr: {
+    panel: 'Panneau',
+    subPanel: 'Sous-Panneau'
+  }
+};

package/lib-module/Icon/IconText.js

@@ -41,10 +41,10 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
    * The issue was mainly on IOS, the translateY style didn't match with the old calculations.
    */
   const resultY = valueTranslateY ? Math.floor(-1 * (valueTranslateY - 4)) : 0;
-  const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
+  const iconAdjustedAndroid = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
-        translateY: size * 0.2
+        translateY: valueTranslateY ? size * 0.2 : size * 0.01
       }]
     },
     children: iconContent
@@ -57,7 +57,7 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
     },
     children: iconContent
   });
-  const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const mobile = Platform.OS === 'android' ? iconAdjustedAndroid : iconAdjustedIOS;
   const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
   return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,

package/lib-module/Listbox/Listbox.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
   }
 });
 const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
-const Listbox = _ref => {
+const Listbox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     items = [],
     firstItemRef = null,
@@ -98,6 +98,7 @@ const Listbox = _ref => {
     children: /*#__PURE__*/_jsx(ExpandCollapse, {
       initialOpen: initialOpen,
       maxOpen: 1,
+      ref: ref,
       children: expandProps => /*#__PURE__*/_jsx(View, {
         style: [styles.list, {
           minHeight,
@@ -113,9 +114,9 @@ const Listbox = _ref => {
           const itemId = id ?? label;
 
           // Give the list of refs.
-          const itemRef = ref => {
-            itemRefs.current[index] = ref;
-            return ref;
+          const itemRef = currentItemRef => {
+            itemRefs.current[index] = currentItemRef;
+            return currentItemRef;
           };
           return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, {
             ...item,
@@ -140,7 +141,8 @@ const Listbox = _ref => {
       })
     })
   });
-};
+});
+Listbox.displayName = 'Listbox';
 Listbox.propTypes = {
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('Listbox'),

package/lib-module/Modal/WebModal.js

@@ -24,6 +24,7 @@ const WebModal = _ref => {
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: staticStyles.content,
+      accessibilityRole: "dialog",
       children: children
     })
   });
@@ -52,14 +53,15 @@ const staticStyles = StyleSheet.create({
     minHeight: 0,
     minWidth: 0,
     padding: 0,
-    textDecoration: 'none',
-    zIndex: 1
+    textDecorationLine: 'none',
+    zIndex: 1000
   },
   content: {
     flex: 1,
     flexGrow: 1,
     flexShrink: 1,
-    flexBasis: 0
+    flexBasis: 0,
+    zIndex: 1000
   }
 });
 export default WebModal;

package/lib-module/Notification/Notification.js

@@ -64,7 +64,7 @@ const selectDismissButtonContainerStyles = _ref4 => {
   };
 };
 const selectContentContainerStyle = maxWidth => ({
-  width: maxWidth || '100%'
+  maxWidth: maxWidth || '100%'
 });
 const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {

package/lib-module/Radio/Radio.js

@@ -240,7 +240,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.54.0",
+    "@telus-uds/system-theme-tokens": "^2.55.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.82.0",
+  "version": "1.84.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonGroup.jsx

@@ -34,6 +34,7 @@ const ButtonGroup = forwardRef(
   (
     {
       variant,
+      buttonVariant,
       tokens,
       items = [],
       values,
@@ -140,6 +141,7 @@ const ButtonGroup = forwardRef(
                 <ButtonBase
                   ref={itemRef}
                   key={id}
+                  variant={buttonVariant}
                   {...pressHandlers}
                   onPress={handlePress}
                   tokens={getButtonTokens}
@@ -167,6 +169,13 @@ ButtonGroup.displayName = 'ButtonGroup'
 ButtonGroup.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
+  /**
+   * To allow Button specific variant
+   */
+  buttonVariant: variantProp.propType,
+  /**
+   * Default variant prop
+   */
   variant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves