@telus-uds/components-base 1.7.1 → 1.8.0

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/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
    */

package/lib-module/Search/Search.js

@@ -216,7 +216,7 @@ Search.propTypes = { ...selectedContainerPropTypes,
   accessibilityLabel: PropTypes.string,
 
   /**
-   * Select english or french copy for the accessible labels.
+   * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({

package/lib-module/Skeleton/Skeleton.js

@@ -4,7 +4,7 @@ import Platform from "react-native-web/dist/exports/Platform";
 import propTypes from 'prop-types';
 import StackView from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useSpacingScale, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, responsiveProps, useResponsiveProp, useSpacingScale, spacingProps, variantProp, viewProps } from '../utils';
 import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
 import skeletonWebAnimation from './skeletonWebAnimation';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,13 +45,23 @@ const Skeleton = /*#__PURE__*/forwardRef(({
   tokens,
   variant,
   size,
+  sizeIndex = size,
+  sizePixels,
   characters,
   lines,
   shape = 'line',
   ...rest
 }, ref) => {
   const themeTokens = useThemeTokens('Skeleton', tokens, variant);
-  const skeletonHeight = useSpacingScale(size || themeTokens.size);
+  const pixels = useResponsiveProp(sizePixels);
+  const spacingScaleValue = typeof pixels === 'number' ? // Size by an exact number of pixels
+  {
+    options: {
+      size: pixels
+    }
+  } : // Size by an index on the spacing scale (getting default index from theme if none provided)
+  sizeIndex || themeTokens.size;
+  const skeletonHeight = useSpacingScale(spacingScaleValue);
   const nativeAnimation = useSkeletonNativeAnimation();
 
   const getAnimationBaseOnPlatform = () => {
@@ -109,9 +119,45 @@ Skeleton.displayName = 'Skeleton';
 Skeleton.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('Skeleton'),
   variant: variantProp.propType,
-  size: propTypes.number,
+
+  /**
+   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
+   *
+   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
+   */
+  sizeIndex: spacingProps.types.spacingValue,
+
+  /**
+   * @deprecated alias for `sizeIndex`
+   */
+  size: spacingProps.types.spacingValue,
+
+  /**
+   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
+   *
+   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
+   */
+  sizePixels: responsiveProps.getTypeOptionallyByViewport(propTypes.number),
+
+  /**
+   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
+   *
+   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
+   */
   characters: propTypes.number,
+
+  /**
+   * Determines how many Skeleton items are rendered (default 1).
+   *
+   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
+   *
+   * The amount of spacing between multiple lines is controlled by theme tokens.
+   */
   lines: propTypes.number,
+
+  /**
+   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
+   */
   shape: propTypes.oneOf(['line', 'circle', 'box'])
 };
 export default Skeleton;

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -83,6 +83,7 @@ const selectLabelTokens = ({
 });
 
 const ToggleSwitch = /*#__PURE__*/forwardRef(({
+  copy = 'en',
   value,
   initialValue,
   onChange,
@@ -119,6 +120,7 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(({
     children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
       style: [selectLabelStyles(themeTokens), staticStyles.containText],
       children: /*#__PURE__*/_jsx(InputLabel, {
+        copy: copy,
         forId: inputId,
         label: label,
         tokens: selectLabelTokens(themeTokens),
@@ -167,6 +169,11 @@ const ToggleSwitch = /*#__PURE__*/forwardRef(({
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
 ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   tokens: getTokensPropType('ToggleSwitch'),
   variant: variantProp.propType,
 

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -12,6 +12,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
+  copy = 'en',
   variant,
   tokens,
   items = [],
@@ -88,6 +89,7 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
       ...a11yProps.getPositionInSet(items.length, index)
     };
     return /*#__PURE__*/_jsx(ToggleSwitch, {
+      copy: copy,
       id: id,
       ref: itemRef,
       onChange: handleChange,
@@ -119,6 +121,11 @@ const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
 });
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
 ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
   tokens: getTokensPropType('ToggleSwitchGroup'),
   variant: variantProp.propType,
 

package/lib-module/Tooltip/Tooltip.js

@@ -301,7 +301,7 @@ Tooltip.propTypes = { ...selectedSystemPropTypes,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
-   * Select english or french copy for the accessible label.
+   * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
 

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
 import Platform from "react-native-web/dist/exports/Platform"; // TODO: systematise animations
@@ -9,14 +9,25 @@ function useVerticalExpandAnimation({
   isExpanded,
   tokens
 }) {
+  const [isAnimating, setIsAnimating] = useState(false);
   const expandAnimatedValue = useRef(new Animated.Value(0)).current;
+  const elementRef = useRef(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens;
+  } = tokens; // Treat as animating from when expanded state changes, until animation completes
+
+  useEffect(() => setIsAnimating(true), [isExpanded]);
   useEffect(() => {
+    const onComplete = () => !isExpanded && setIsAnimating(false);
+
     if (Platform.OS === 'web') {
-      return;
+      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
+
+      const element = elementRef.current;
+      element.addEventListener('transitionend', onComplete);
+      return () => element.removeEventListener('transitionend', onComplete);
     }
 
     const animationConfig = {
@@ -25,25 +36,26 @@ function useVerticalExpandAnimation({
       toValue: isExpanded ? containerHeight : 0,
       useNativeDriver: false
     };
-    Animated.timing(expandAnimatedValue, animationConfig).start();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
-  let containerStyles; // don't visually collapse the container until we have it measured
+    const animation = Animated.timing(expandAnimatedValue, animationConfig);
+    animation.start(onComplete);
+    return () => animation.stop();
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+
+  const containerStyles = !isExpanded && !isAnimating ? {
+    visibility: 'hidden'
+  } : {}; // don't visually collapse the container until we have it measured
 
   if (containerHeight !== null) {
     if (Platform.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
-        height: isExpanded ? containerHeight : 0
-      };
+      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
+      containerStyles.height = isExpanded ? containerHeight : 0;
     } else {
-      containerStyles = {
-        height: expandAnimatedValue
-      };
+      containerStyles.height = expandAnimatedValue;
     }
   }
 
-  return containerStyles;
+  return [containerStyles, elementRef];
 }
 
 export default useVerticalExpandAnimation;

package/lib-module/utils/props/inputSupportsProps.js

@@ -1,6 +1,11 @@
 import PropTypes from 'prop-types';
 export default {
   types: {
+    /**
+     * Whether the English or French copy will be used (e.g. for accessibility labels).
+     */
+    copy: PropTypes.oneOf(['en', 'fr']),
+
     /**
      * The input label.
      */
@@ -33,6 +38,7 @@ export default {
     validation: PropTypes.oneOf(['error', 'success'])
   },
   select: ({
+    copy,
     label,
     hint,
     hintPosition,
@@ -41,6 +47,7 @@ export default {
     validation
   }) => ({
     supportsProps: {
+      copy,
       label,
       hint,
       hintPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -31,8 +31,7 @@
     "build:code": "yarn build:main && yarn 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": "yarn build:code --watch"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"
@@ -50,6 +49,12 @@
     "react-native-web": "^0.17.0"
   },
   "devDependencies": {
+    "@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.1",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
@@ -59,7 +64,7 @@
   "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-theme-tokens": "^2.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",