@telus-uds/components-base 1.84.0 → 1.85.1

package/lib/Card/Card.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _ThemeProvider = require("../ThemeProvider");
@@ -13,11 +13,51 @@ var _ViewportProvider = require("../ViewportProvider");
 var _props = require("../utils/props");
 var _CardBase = _interopRequireDefault(require("./CardBase"));
 var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
+var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
+var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.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.
@@ -67,16 +107,18 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * you automatically make inaccessible its children, which may or may not be appropriate
  * depending on what you are trying to achieve.
  */
-const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  var _interactiveCard$vari, _interactiveCard$vari2;
   let {
     children,
     tokens,
     variant,
     dataSet,
     onPress,
+    id,
     interactiveCard,
     ...rest
-  } = _ref;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     themeOptions
@@ -88,6 +130,9 @@ const Card = /*#__PURE__*/(0, _react.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 = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
     interactive: true,
     ...((interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.variant) || {})
@@ -100,7 +145,45 @@ const Card = /*#__PURE__*/(0, _react.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) {
@@ -116,6 +199,43 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } else {
     cardStyles = themeTokens;
   }
+  const renderInputPerSelectionType = props => {
+    switch (selectionType) {
+      case SelectionType.Checkbox:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
+            ...props,
+            tokens: {
+              ...checkboxTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      case SelectionType.Radio:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+            ...props,
+            tokens: {
+              ...radioTokens,
+              ...(props === null || props === void 0 ? void 0 : props.tokens)
+            }
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  const renderNoSelectionView = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    },
+    children: children
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       ref: ref,
@@ -131,16 +251,31 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           dataSet: dataSet,
           onPress: onPress,
           ...selectProps(rest),
-          children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
-        }), children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.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
     })
   });
@@ -165,15 +300,23 @@ Card.propTypes = {
    * Note: This is only available when `interactiveCard` prop is used.
    */
   onPress: _propTypes.default.func,
+  /**
+   * Card ID.
+   */
+  id: _propTypes.default.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.default.shape({
     body: _propTypes.default.node,
     tokens: (0, _utils.getTokensPropType)('Card'),
+    selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
     variant: _utils.variantProp.propType
   })
 };

package/lib/Card/CardBase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -13,8 +13,6 @@ var _utils = require("../utils");
 var _props = require("../utils/props");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
 
 // Ensure explicit selection of tokens
@@ -58,7 +56,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__*/(0, _react.forwardRef)((_ref2, ref) => {
+const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,

package/lib/Card/PressableCardBase.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectPressableCardTokens = exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -14,10 +14,8 @@ var _utils = require("../utils");
 var _CardBase = _interopRequireDefault(require("./CardBase"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-const tokenKeys = [...(0, _utils.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'];
@@ -29,7 +27,7 @@ const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key
  * apps or sites directly: build themed components on top of this.
  */
 exports.selectPressableCardTokens = selectPressableCardTokens;
-const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     tokens,

package/lib/CardGroup/CardGroup.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _StackView = _interopRequireWildcard(require("../StackView"));
+var _Card = _interopRequireDefault(require("../Card"));
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const uniqueFields = ['id'];
+const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    copy = 'en',
+    tokens = {},
+    variant = {},
+    items = [],
+    validation,
+    feedback,
+    initialCheckedIds,
+    checkedIds,
+    onChange,
+    role = 'radiogroup',
+    isInactive,
+    name: inputGroupName,
+    dictionary = _dictionary.default,
+    ...rest
+  } = _ref;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const cardGroupTokens = (0, _ThemeProvider.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 = (0, _utils.useInputValue)(inputControl);
+  const multipleInputValues = (0, _utils.useMultipleInputValues)(inputControl);
+  const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+  const handleChange = _react.default.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__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_Card.default, {
+          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.default.shape({
+  prefixId: _propTypes.default.string.isRequired
+});
+CardGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Optional theme token overrides for the outer RadioCardGroup component
+   */
+  tokens: (0, _utils.getTokensPropType)('CardGroup'),
+  /**
+   * Theme variants, shared between both RadioCardGroup and RadioCard
+   */
+  variant: _utils.variantProp.propType,
+  /**
+   * Array of objects containing specifics for each Card to be rendered in the group.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+    ...selectedItemPropTypes,
+    id: _propTypes.default.string,
+    interactiveCard: _propTypes.default.object,
+    card: _propTypes.default.object,
+    onPress: _propTypes.default.func
+  })),
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.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.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.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.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.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.default.func,
+  /**
+   * Renders the card group like a radio card group or a checkbox card group
+   */
+  role: _propTypes.default.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.default.bool,
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset and each input.
+   */
+  name: _propTypes.default.string
+};
+var _default = CardGroup;
+exports.default = _default;

package/lib/CardGroup/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    prefixId: 'Card'
+  },
+  fr: {
+    prefixId: 'Carte'
+  }
+};
+exports.default = _default;

package/lib/CardGroup/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _CardGroup = _interopRequireDefault(require("./CardGroup"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _CardGroup.default;
+exports.default = _default;