@telus-uds/components-base 1.7.0 → 1.8.1

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/lib-module/utils/props/textInputProps.js

@@ -20,7 +20,8 @@ const textProps = {
 const inputValueProps = {
   value: PropTypes.string,
   initialValue: PropTypes.string,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  inactive: PropTypes.bool
 };
 /**
  * This collection adds props that can be passed through to both React Native's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "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,7 +49,13 @@
     "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",
@@ -58,8 +63,8 @@
   },
   "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.3",
+    "@telus-uds/system-theme-tokens": "^2.0.1",
     "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.

package/src/InputLabel/InputLabel.jsx

@@ -38,7 +38,18 @@ const selectGapStyles = ({ gap }) => ({ marginRight: gap })
 
 const InputLabel = forwardRef(
   (
-    { label, forId, hint, hintPosition = 'inline', hintId, tooltip, tokens, variant, ...rest },
+    {
+      copy = 'en',
+      label,
+      forId,
+      hint,
+      hintPosition = 'inline',
+      hintId,
+      tooltip,
+      tokens,
+      variant,
+      ...rest
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('InputLabel', tokens, variant)
@@ -77,7 +88,7 @@ const InputLabel = forwardRef(
                 { height: themeTokens.fontSize * themeTokens.lineHeight }
               ]}
             >
-              <Tooltip content={tooltip} />
+              <Tooltip content={tooltip} copy={copy} />
             </View>
           )}
         </View>
@@ -94,6 +105,10 @@ 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/src/InputSupports/InputSupports.jsx

@@ -8,7 +8,10 @@ import { useThemeTokens } from '../ThemeProvider'
 import useInputSupports from './useInputSupports'
 
 const InputSupports = forwardRef(
-  ({ children, label, hint, hintPosition = 'inline', feedback, tooltip, validation }, ref) => {
+  (
+    { children, copy = 'en', label, hint, hintPosition = 'inline', feedback, tooltip, validation },
+    ref
+  ) => {
     const { space } = useThemeTokens('InputSupports')
 
     const { inputId, hintId, feedbackId, a11yProps } = useInputSupports({
@@ -22,6 +25,7 @@ const InputSupports = forwardRef(
       <StackView space={space} ref={ref}>
         {label && (
           <InputLabel
+            copy={copy}
             label={label}
             hint={hint}
             hintPosition={hintPosition}
@@ -40,6 +44,10 @@ 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/src/Notification/Notification.jsx

@@ -159,7 +159,7 @@ Notification.propTypes = {
    */
   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']),

package/src/Radio/Radio.jsx

@@ -121,7 +121,11 @@ const Radio = forwardRef(
     },
     ref
   ) => {
-    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue(
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue(
       {
         value: checked,
         initialValue: defaultChecked,

package/src/Radio/RadioGroup.jsx

@@ -44,7 +44,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * ### 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
  *
@@ -76,6 +76,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
 const RadioGroup = forwardRef(
   (
     {
+      copy = 'en',
       tokens,
       radioTokens,
       variant,
@@ -142,6 +143,7 @@ const RadioGroup = forwardRef(
 
     return (
       <Fieldset
+        copy={copy}
         ref={ref}
         name={inputGroupName}
         legend={legend}
@@ -163,6 +165,10 @@ 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
    */
@@ -208,11 +214,11 @@ RadioGroup.propTypes = {
    */
   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,
@@ -222,11 +228,11 @@ RadioGroup.propTypes = {
    */
   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/src/RadioCard/RadioCard.jsx

@@ -77,7 +77,11 @@ const RadioCard = forwardRef(
     },
     ref
   ) => {
-    const { currentValue: isChecked, setValue: setIsChecked, isControlled } = useInputValue({
+    const {
+      currentValue: isChecked,
+      setValue: setIsChecked,
+      isControlled
+    } = useInputValue({
       value: checked,
       initialValue: defaultChecked,
       onChange

package/src/RadioCard/RadioCardGroup.jsx

@@ -77,6 +77,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
 const RadioCardGroup = forwardRef(
   (
     {
+      copy = 'en',
       tokens,
       radioCardTokens,
       variant,
@@ -120,6 +121,7 @@ const RadioCardGroup = forwardRef(
 
     return (
       <Fieldset
+        copy={copy}
         ref={ref}
         name={inputGroupName}
         legend={legend}
@@ -170,6 +172,10 @@ 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/src/Search/Search.jsx

@@ -218,7 +218,7 @@ Search.propTypes = {
    */
   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([

package/src/Skeleton/Skeleton.jsx

@@ -7,7 +7,10 @@ import {
   a11yProps,
   getTokensPropType,
   selectSystemProps,
+  responsiveProps,
+  useResponsiveProp,
   useSpacingScale,
+  spacingProps,
   variantProp,
   viewProps
 } from '../utils'
@@ -37,9 +40,29 @@ const selectSquareStyles = ({ radius }) => ({
 })
 
 const Skeleton = forwardRef(
-  ({ tokens, variant, size, characters, lines, shape = 'line', ...rest }, ref) => {
+  (
+    {
+      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 = () => {
@@ -97,9 +120,39 @@ 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'])
 }