@telus-uds/components-base 1.83.0 → 1.85.0

package/lib-module/BaseProvider/HydrationContext.js

@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import { jsx as _jsx } from "react/jsx-runtime";
-const HydrationContext = /*#__PURE__*/createContext();
+const HydrationContext = /*#__PURE__*/React.createContext();
 const isSSR = typeof window === 'undefined';
 const hasWebStyleTag = () => {
   var _document;
@@ -19,7 +19,7 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-export const useHydrationContext = () => useContext(HydrationContext);
+export const useHydrationContext = () => React.useContext(HydrationContext);
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
@@ -29,8 +29,8 @@ export const HydrationProvider = _ref => {
   let {
     children
   } = _ref;
-  const [hasMounted, setHasMounted] = useState(false);
-  useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false);
+  React.useEffect(() => {
     setHasMounted(true);
   }, []);
 

package/lib-module/Box/Box.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import ScrollView from "react-native-web/dist/exports/ScrollView";
@@ -170,7 +170,7 @@ const setBackgroundImage = _ref2 => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -218,8 +218,8 @@ const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover');
   const backgroundImagePosition = useResponsiveProp(position, 'none');
   const backgroundImageAlign = useResponsiveProp(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = useState(0);
+  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
   if (backgroundImage) content = setBackgroundImage({
     src,
     alt,
@@ -230,7 +230,7 @@ const Box = /*#__PURE__*/forwardRef((_ref3, ref) => {
     backgroundImageHeight,
     content
   });
-  useEffect(() => {
+  React.useEffect(() => {
     if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
       Image.getSize(src, (width, height) => {
         // Only update the state if the size has changed

package/lib-module/Button/Button.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'button',
     tokens,

package/lib-module/Button/ButtonBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import View from "react-native-web/dist/exports/View";
@@ -218,7 +218,7 @@ const selectItemIconTokens = _ref10 => {
     color: iconColor || color
   };
 };
-const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -321,9 +321,6 @@ ButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   ...buttonPropTypes
 };
-ButtonBase.defaultProps = {
-  id: undefined
-};
 const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button

package/lib-module/Button/ButtonDropdown.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import Text from "react-native-web/dist/exports/Text";
@@ -49,7 +49,7 @@ const selectIconTokens = _ref => {
     }
   };
 };
-const ButtonDropdown = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,

package/lib-module/Button/ButtonGroup.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
@@ -12,9 +12,10 @@ import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ButtonGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant,
+    buttonVariant,
     tokens,
     items = [],
     values,
@@ -127,6 +128,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
         // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
         return /*#__PURE__*/_jsx(ButtonBase, {
           ref: itemRef,
+          variant: buttonVariant,
           ...pressHandlers,
           onPress: handlePress,
           tokens: getButtonTokens,
@@ -148,6 +150,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

package/lib-module/Button/ButtonLink.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
@@ -11,7 +11,7 @@ import { useViewport } from '../ViewportProvider';
  * ButtonLink is a block-level component and should not be used inline.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
+const ButtonLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'link',
     tokens,

package/lib-module/Card/Card.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
@@ -7,10 +7,52 @@ import { useViewport } from '../ViewportProvider';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
 import PressableCardBase from './PressableCardBase';
+import CheckboxButton from '../Checkbox/CheckboxButton';
+import RadioButton from '../Radio/RadioButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const SelectionType = {
+  Checkbox: 'checkbox',
+  Radio: 'radiogroup',
+  None: undefined
+};
+const selectInputStyle = _ref => {
+  let {
+    paddingTop,
+    paddingRight
+  } = _ref;
+  return {
+    position: 'absolute',
+    top: paddingTop,
+    right: paddingRight
+  };
+};
+const getInputProps = _ref2 => {
+  let {
+    id,
+    checkColor,
+    boxBackgroundColor,
+    checkBackgroundColor,
+    isControlled,
+    isChecked,
+    isInactive,
+    handleChange
+  } = _ref2;
+  return {
+    inputId: id,
+    tokens: {
+      iconColor: checkColor,
+      inputBackgroundColor: boxBackgroundColor,
+      iconBackgroundColor: checkBackgroundColor
+    },
+    isControlled,
+    isChecked,
+    inactive: isInactive,
+    handleChange
+  };
+};
 
 /**
  * A basic card component, unstyled by default.
@@ -60,16 +102,18 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Card = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  var _interactiveCard$vari, _interactiveCard$vari2;
   let {
     children,
     tokens,
     variant,
     dataSet,
     onPress,
+    id,
     interactiveCard,
     ...rest
-  } = _ref;
+  } = _ref3;
   const viewport = useViewport();
   const {
     themeOptions
@@ -81,6 +125,9 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
+  const selected = interactiveCard === null || interactiveCard === void 0 ? void 0 : (_interactiveCard$vari = interactiveCard.variant) === null || _interactiveCard$vari === void 0 ? void 0 : _interactiveCard$vari.selected;
+  const inactive = interactiveCard === null || interactiveCard === void 0 ? void 0 : (_interactiveCard$vari2 = interactiveCard.variant) === null || _interactiveCard$vari2 === void 0 ? void 0 : _interactiveCard$vari2.inactive;
+  const selectionType = interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.selectionType;
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
     interactive: true,
     ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
@@ -93,7 +140,45 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     paddingLeft,
     paddingRight,
     ...restOfTokens
-  } = themeTokens;
+  } = selectionType ? getThemeTokens() : themeTokens;
+  const {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    iconColor,
+    icon,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  } = getThemeTokens();
+  const checkboxTokens = {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    icon,
+    iconColor,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  };
+  const radioTokens = {
+    iconBackgroundColor,
+    iconColor,
+    containerShadow: inputShadow,
+    icon,
+    inputBackgroundColor,
+    inputBorderRadius,
+    inputSize: inputHeight,
+    checkedSize: iconSize,
+    inputBorderWidth,
+    inputBorderColor
+  };
   let cardStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
@@ -109,6 +194,43 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
   } else {
     cardStyles = themeTokens;
   }
+  const renderInputPerSelectionType = props => {
+    switch (selectionType) {
+      case SelectionType.Checkbox:
+        return /*#__PURE__*/_jsx(View, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/_jsx(CheckboxButton, {
+            ...props,
+            tokens: {
+              ...checkboxTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      case SelectionType.Radio:
+        return /*#__PURE__*/_jsx(View, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/_jsx(RadioButton, {
+            ...props,
+            tokens: {
+              ...radioTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  const renderNoSelectionView = () => /*#__PURE__*/_jsx(View, {
+    style: {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    },
+    children: children
+  });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
@@ -124,16 +246,31 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
           dataSet: dataSet,
           onPress: onPress,
           ...selectProps(rest),
-          children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
-        }), children ? /*#__PURE__*/_jsx(View, {
-          style: {
-            paddingTop,
-            paddingBottom,
-            paddingLeft,
-            paddingRight
-          },
-          children: children
-        }) : null]
+          children: cardState => {
+            const {
+              iconColor: checkColor,
+              inputBackgroundColor: boxBackgroundColor,
+              iconBackgroundColor: checkBackgroundColor
+            } = getThemeTokens({
+              ...cardState,
+              selected,
+              interactive: true,
+              isControl: true
+            }, interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens);
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [renderInputPerSelectionType(getInputProps({
+                id,
+                checkColor,
+                boxBackgroundColor,
+                checkBackgroundColor,
+                isControlled: true,
+                isChecked: selected || (cardState === null || cardState === void 0 ? void 0 : cardState.hover),
+                isInactive: inactive,
+                onPress
+              })), interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body]
+            });
+          }
+        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
       }) : children
     })
   });
@@ -158,15 +295,23 @@ Card.propTypes = {
    * Note: This is only available when `interactiveCard` prop is used.
    */
   onPress: PropTypes.func,
+  /**
+   * Card ID.
+   */
+  id: PropTypes.string,
   /**
    * Object to set interactive card's properties
    * - body: The body of the interactive card, can be any renderable node
    * - tokens: The tokens to be used for the interactive card
+   * - selectionType: If the card has `isControl` variant set to `true`, the selectionType can have one of the following options: 
+        - `radiogroup`
+        - `checkbox`
    * - variant: The variant to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
     body: PropTypes.node,
     tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType
   })
 };

package/lib-module/Card/CardBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
@@ -49,7 +49,7 @@ const selectStyles = _ref => {
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
-const CardBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const CardBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,

package/lib-module/Card/PressableCardBase.js

@@ -1,14 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
-import { a11yProps, clickProps, focusHandlerProps, getTokenNames, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import CardBase from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const tokenKeys = [...getTokenNames('Card'),
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
 // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
@@ -19,7 +19,7 @@ export const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.
  * based on these to an outer border and a base Card component. Not intended to be used in
  * apps or sites directly: build themed components on top of this.
  */
-const PressableCardBase = /*#__PURE__*/forwardRef((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,

package/lib-module/CardGroup/CardGroup.js

@@ -0,0 +1,210 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { a11yProps, focusHandlerProps, containUniqueFields, selectSystemProps, useMultipleInputValues, useInputValue, useCopy, viewProps, variantProp, getTokensPropType, copyPropTypes } from '../utils';
+import defaultDictionary from './dictionary';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import StackView, { StackWrap } from '../StackView';
+import Card from '../Card';
+import Fieldset from '../Fieldset';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const uniqueFields = ['id'];
+const CardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    copy = 'en',
+    tokens = {},
+    variant = {},
+    items = [],
+    validation,
+    feedback,
+    initialCheckedIds,
+    checkedIds,
+    onChange,
+    role = 'radiogroup',
+    isInactive,
+    name: inputGroupName,
+    dictionary = defaultDictionary,
+    ...rest
+  } = _ref;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const viewport = useViewport();
+  const cardGroupTokens = useThemeTokens('CardGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    space,
+    fieldSpace,
+    direction,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  } = cardGroupTokens;
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
+  const singleSelection = role === 'radiogroup';
+  const inputControl = {
+    value: checkedIds,
+    initialValue: initialCheckedIds,
+    onChange,
+    readOnly: isInactive
+  };
+  const singleInputValue = useInputValue(inputControl);
+  const multipleInputValues = useMultipleInputValues(inputControl);
+  const StackContainer = direction === 'row' ? StackWrap : StackView;
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+  const handleChange = React.useCallback((checked, event, cardId, itemOnChange) => {
+    if (checked && singleSelection) {
+      singleInputValue.setValue(cardId, event);
+    } else {
+      multipleInputValues.toggleOneValue(cardId, event);
+    }
+    return itemOnChange === null || itemOnChange === void 0 ? void 0 : itemOnChange(checked, event);
+  }, [singleInputValue, multipleInputValues, singleSelection]);
+  return /*#__PURE__*/_jsx(Fieldset, {
+    copy: copy,
+    ref: ref,
+    name: inputGroupName,
+    space: fieldSpace,
+    feedback: feedback,
+    validation: validation,
+    tokens: borderTokens,
+    inactive: isInactive,
+    showErrorBorder: true,
+    showIcon: showIcon,
+    accessibilityRole: role,
+    ...selectProps(rest),
+    children: props => /*#__PURE__*/_jsx(StackContainer, {
+      space: space,
+      children: items.map((_ref2, index) => {
+        let {
+          id,
+          interactiveCard,
+          card,
+          onPress: itemOnChange,
+          ...itemRest
+        } = _ref2;
+        const cardId = id || `${getCopy('prefixId')}[${index}]`;
+        const itemHandleChange = (checked, event) => handleChange(checked, event, cardId, itemOnChange);
+        return /*#__PURE__*/_jsx(Card, {
+          id: cardId,
+          onPress: itemHandleChange,
+          interactiveCard: {
+            ...interactiveCard,
+            tokens: {
+              paddingTop,
+              paddingBottom,
+              paddingLeft,
+              paddingRight,
+              ...(interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens)
+            },
+            variant: {
+              isControl: true,
+              selected: singleSelection ? singleInputValue.currentValue === cardId : multipleInputValues.currentValues.includes(cardId),
+              inactive: isInactive
+            },
+            selectionType: role
+          },
+          ...selectItemProps(itemRest),
+          ...props,
+          children: card === null || card === void 0 ? void 0 : card.body
+        }, cardId);
+      })
+    })
+  });
+});
+CardGroup.displayName = 'CardGroup';
+const dictionaryContentShape = PropTypes.shape({
+  prefixId: PropTypes.string.isRequired
+});
+CardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Optional theme token overrides for the outer RadioCardGroup component
+   */
+  tokens: getTokensPropType('CardGroup'),
+  /**
+   * Theme variants, shared between both RadioCardGroup and RadioCard
+   */
+  variant: variantProp.propType,
+  /**
+   * Array of objects containing specifics for each Card to be rendered in the group.
+   */
+  items: PropTypes.arrayOf(PropTypes.exact({
+    ...selectedItemPropTypes,
+    id: PropTypes.string,
+    interactiveCard: PropTypes.object,
+    card: PropTypes.object,
+    onPress: PropTypes.func
+  })),
+  /**
+   * 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 provided, the card with this id is selected on first render.
+   * If the role is radiogroup, it's a string
+   * If the role is checkbox, it's a array of string.
+   * Can have 'null' as value
+   */
+  initialCheckedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * If not undefined, the card 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.
+   * If the role is radiogroup, it's a string
+   * If the role is checkbox, it's a array of string.
+   * Can have 'null' as value
+   */
+  checkedIds: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  /**
+   * Function to call on change in selection state. Is required if the selection state is controlled
+   * by a parent using checkedId and the input is not readOnly.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Renders the card group like a radio card group or a checkbox card group
+   */
+  role: PropTypes.oneOf(['radiogroup', 'checkbox']),
+  /**
+   * If true, the card cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  isInactive: PropTypes.bool,
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset and each input.
+   */
+  name: PropTypes.string
+};
+export default CardGroup;

package/lib-module/CardGroup/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    prefixId: 'Card'
+  },
+  fr: {
+    prefixId: 'Carte'
+  }
+};