@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/utils/useOverlaidPosition.js

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
-
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -12,34 +11,29 @@ const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
   return adjusted;
 };
-
 const getPosition = _ref => {
   let {
     edge,
     fromEdge,
     sourceSize
   } = _ref;
-
   switch (edge) {
     case 'near':
       return fromEdge;
-
     case 'mid':
       return fromEdge + sourceSize / 2;
-
     case 'far':
       return fromEdge + sourceSize;
-
     default:
       return 0;
   }
 };
-
 const getEdgeType = (align, alignSide) => {
   const alignTo = align[alignSide];
   const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
   return edge;
 };
+
 /**
  * Based on UDS's private getTooltipPosition but generalised.
  *
@@ -50,8 +44,6 @@ const getEdgeType = (align, alignSide) => {
  * before it is shown, which makes it account for the width being limiting in styles, custom font
  * rendering, etc.
  */
-
-
 function getOverlaidPosition(_ref2) {
   let {
     sourceLayout,
@@ -66,8 +58,9 @@ function getOverlaidPosition(_ref2) {
   const {
     scrollX = 0,
     scrollY = 0
-  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+  } = typeof window === 'object' ? window : {};
 
+  // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {};
   if (align.top) positioning.top = getPosition({
     edge: getEdgeType(align, 'top'),
@@ -99,20 +92,18 @@ function getOverlaidPosition(_ref2) {
     fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
     sourceSize: sourceLayout.width
   });
-
   if (!(align.left && align.right)) {
     // Check if the position and/or width need adjusting to fit on the screen
     const side = align.right ? 'right' : 'left';
     const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
     if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
-
     if (typeof adjusted.offset === 'number') {
       positioning[side] = adjusted.offset;
     }
   }
-
   return positioning;
 }
+
 /**
  * Positions an element in a modal or portal so that it appears tooltip-like below the
  * target element.
@@ -121,8 +112,6 @@ function getOverlaidPosition(_ref2) {
  * a small task because UDS's tooltip logic only really works for short text - it might be
  * better to use a third-party library).
  */
-
-
 const useOverlaidPosition = _ref3 => {
   let {
     isShown = false,
@@ -135,8 +124,9 @@ const useOverlaidPosition = _ref3 => {
   } = _ref3;
   // Element in main document flow that the targetRef element is positioned around
   const sourceRef = useRef(null);
-  const [sourceLayout, setSourceLayout] = useState(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+  const [sourceLayout, setSourceLayout] = useState(null);
 
+  // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
   const targetRef = useRef(null);
   const [targetDimensions, setTargetDimensions] = useState(null);
   const [windowDimensions, setWindowDimensions] = useState(null);
@@ -161,7 +151,6 @@ const useOverlaidPosition = _ref3 => {
           height
         };
       }
-
       return previousDimensions;
     });
   }, []);
@@ -169,7 +158,6 @@ const useOverlaidPosition = _ref3 => {
   useEffect(() => {
     const handleDimensionsChange = _ref5 => {
       var _sourceRef$current;
-
       let {
         window
       } = _ref5;
@@ -184,12 +172,9 @@ const useOverlaidPosition = _ref3 => {
         });
       });
     };
-
     let subscription;
-
     const unsubscribe = () => {
       var _subscription;
-
       if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
         // React Native >=0.65.0
         subscription.remove();
@@ -197,11 +182,9 @@ const useOverlaidPosition = _ref3 => {
         // React Native <0.65.0
         Dimensions.remove('change', handleDimensionsChange);
       }
-
       setSourceLayout(null);
       setTargetDimensions(null);
     };
-
     if (readyToShow) {
       subscription = Dimensions.addEventListener('change', handleDimensionsChange);
       handleDimensionsChange({
@@ -210,7 +193,6 @@ const useOverlaidPosition = _ref3 => {
     } else {
       unsubscribe();
     }
-
     return unsubscribe;
   }, [readyToShow]);
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
@@ -229,5 +211,4 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-
 export default useOverlaidPosition;

package/lib-module/utils/useResponsiveProp.js

@@ -1,8 +1,8 @@
 import { viewports } from '@telus-uds/system-constants';
 import { useViewport } from '../ViewportProvider';
 import hasOwnProperty from './hasOwnProperty';
-
 const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnProperty(objectProp, key));
+
 /**
  * Resolves a prop which may be a responsive object with keys for viewports.
  *
@@ -13,16 +13,17 @@ const hasResponsiveProperties = objectProp => viewports.keys.some(key => hasOwnP
  * @param {*} [defaultValue]
  * @returns {*}
  */
-
-
 export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
   if (prop === undefined) return defaultValue;
   if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
-  const value = viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
-  viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
+  const value = viewports.keys.includes(viewport) ?
+  // If there's a current viewport, return the closest match at or below it
+  viewports.inherit(prop)[viewport] :
+  // If no current viewport is available, default to smallest viewport
   prop[viewports.keys.find(key => hasOwnProperty(prop, key))];
   return value === undefined ? defaultValue : value;
 };
+
 /**
  * Takes any value and, if that value is a responsive prop (an object with one or more
  * keys matching system viewport names), returns the value corresponding to the largest
@@ -37,10 +38,8 @@ export const resolveResponsiveProp = (prop, viewport, defaultValue) => {
  * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
  * @returns {*}
  */
-
 const useResponsiveProp = (prop, defaultValue) => {
   const viewport = useViewport();
   return resolveResponsiveProp(prop, viewport, defaultValue);
 };
-
 export default useResponsiveProp;

package/lib-module/utils/useSafeLayoutEffect.js

@@ -1,29 +1,27 @@
 import { useLayoutEffect, useCallback } from 'react';
 import { useHydrationContext } from '../BaseProvider/HydrationContext';
 const isSSR = typeof window === 'undefined';
-
 const noop = () => {};
+
 /**
  * useSafeLayoutEffect is a alternative to useLayoutEffect that avoids SSR hydration problems:
  *  - In a client-side render, it uses useLayoutEffect to avoid flashing the pre-render UI to the user.
  *  - During hydration from SSR, the provided function is skipped to avoid mismatches from server content.
  *  - In SSR, it is a no-op function to avoid warnings about using useLayoutEffect in SSR
  */
-
-
 const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
 : function (fn) {
   let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  const isHydrating = useHydrationContext(); // Callback updates and effect re-runs when deps array content changes, like useEffect.
+  const isHydrating = useHydrationContext();
 
+  // Callback updates and effect re-runs when deps array content changes, like useEffect.
   /* eslint-disable-next-line react-hooks/exhaustive-deps */
-
   const callback = useCallback(fn, deps);
   useLayoutEffect(() => {
     // Do nothing before hydrating server-generated content, like useEffect. When hydration completes,
     // useHydrationContext provides false, re-rendering this hook and re-running the effect.
-    if (isHydrating) return noop; // If there's no hydration in progress, behave like useLayoutEffect.
-
+    if (isHydrating) return noop;
+    // If there's no hydration in progress, behave like useLayoutEffect.
     return callback();
   }, [isHydrating, callback]);
 };

package/lib-module/utils/useScrollBlocking.js

@@ -1,22 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-
 const addScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   var _ref$current;
-
   document.body.addEventListener('touchmove', preventScrolling, {
     passive: false
   });
   (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.addEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'hidden';
 };
-
 const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
   var _ref$current2;
-
   document.body.removeEventListener('touchmove', preventScrolling);
   (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.removeEventListener('touchmove', stopPropagation);
   document.body.style.overflow = 'inherit';
 };
+
 /**
  * Disables scrolling when passed `true` or an array where all items are `true`.
  *
@@ -26,8 +23,6 @@ const removeScrollBlocking = (preventScrolling, stopPropagation, ref) => {
  * @param {boolean | boolean[]} conditionProps
  * @returns
  */
-
-
 const useScrollBlocking = conditionProps => {
   // useRef refs are null on first render and don't trigger a re-render when they get their
   // element. Force re-run when ref mounts to ensure the stopPropagation listener is attached.
@@ -42,17 +37,15 @@ const useScrollBlocking = conditionProps => {
   const stopPropagation = useCallback(event => event.stopPropagation(), []);
   useEffect(() => {
     const cleanup = () => removeScrollBlocking(preventScrolling, stopPropagation, ref);
-
     if (conditionsMet) {
       addScrollBlocking(preventScrolling, stopPropagation, ref);
     } else {
       cleanup();
     }
-
-    return cleanup; // preventScrolling and stopPropagation are stable callbacks with no deps, so this
+    return cleanup;
+    // preventScrolling and stopPropagation are stable callbacks with no deps, so this
     // will re-run when conditionsMet or refIsMounted flip between true and false.
   }, [preventScrolling, conditionsMet, stopPropagation, refIsMounted]);
   return callbackRef;
 };
-
 export default useScrollBlocking;

package/lib-module/utils/useSpacingScale.js

@@ -16,7 +16,9 @@ const resolveSpacingOptions = space => {
     variant,
     subtract = 0
   } = space.options;
-  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  const overridden = typeof size === 'number';
+
+  // Might need an option that adapts the size value by current user's system font scale, so that
   // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
   // https://github.com/telus/universal-design-system/issues/583
 
@@ -29,6 +31,7 @@ const resolveSpacingOptions = space => {
     subtract
   };
 };
+
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -98,8 +101,6 @@ const resolveSpacingOptions = space => {
  * @param {SpacingValue} [spaceValue] - a {@link SpacingIndex} number, or a {@link SpacingObject}
  * @returns {number}
  */
-
-
 const useSpacingScale = spaceValue => {
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
@@ -119,5 +120,4 @@ const useSpacingScale = spaceValue => {
   });
   return Math.max(size - subtract, 0);
 };
-
 export default useSpacingScale;

package/lib-module/utils/useUniqueId.js

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 let id = 0;
-
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   const [uniqueId] = useState(() => {
@@ -9,5 +8,4 @@ function useUniqueId() {
   });
   return uniqueId;
 }
-
 export default useUniqueId;

package/lib-module/utils/withLinkRouter.js

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import hasOwnProperty from './hasOwnProperty';
+
 /**
  * Higher-order component that has no effect unless an additional prop `LinkRouter` is passed.
  * This may be used to provide custom wrappers for integrations with third party libraries.
@@ -29,9 +30,7 @@ import hasOwnProperty from './hasOwnProperty';
  * <IconButton icon={SomeIcon} LinkRouter={LinkLinkRouter} linkRouterProps={{ to, options }} ref={iconRef} />
  * ```
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const withLinkRouter = Component => {
   const wrappedComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
     let {
@@ -39,7 +38,8 @@ const withLinkRouter = Component => {
       linkRouterProps,
       ...props
     } = _ref;
-    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, { ...props,
+    if (!LinkRouter) return /*#__PURE__*/_jsx(Component, {
+      ...props,
       ref: ref
     });
     return /*#__PURE__*/_jsx(LinkRouter, {
@@ -48,23 +48,27 @@ const withLinkRouter = Component => {
       ref: ref,
       ...props
     });
-  }); // Ensure the returned component has appropriate outer properties set:
+  });
 
+  // Ensure the returned component has appropriate outer properties set:
   /* eslint-disable-next-line react/forbid-foreign-prop-types */
-
   const {
     displayName,
     name,
     propTypes,
     ...otherProperties
-  } = Component; // Apply unique component name as a displayName
+  } = Component;
 
-  wrappedComponent.displayName = Component.displayName || Component.name; // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  // Apply unique component name as a displayName
+  wrappedComponent.displayName = Component.displayName || Component.name;
 
-  wrappedComponent.propTypes = { ...Component.propTypes,
+  // Apply proptypes including wrapper props - is safely { ...undefined, ...undefined } in prod
+  wrappedComponent.propTypes = {
+    ...Component.propTypes,
     ...withLinkRouter.propTypes
-  }; // Forward any other properties explicitly set e.g. Component.SubComponent
+  };
 
+  // Forward any other properties explicitly set e.g. Component.SubComponent
   Object.keys(otherProperties).forEach(key => {
     // Skip internal React properties from wrappedComponent's forwardRef (render, $$typeof, etc)
     if (hasOwnProperty(Component, key) && !hasOwnProperty(wrappedComponent, key)) {
@@ -73,7 +77,6 @@ const withLinkRouter = Component => {
   });
   return wrappedComponent;
 };
-
 withLinkRouter.propTypes = {
   LinkRouter: PropTypes.elementType,
   linkRouterProps: PropTypes.object

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.43.0",
+    "@telus-uds/system-theme-tokens": "^2.44.1",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -73,5 +73,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.66.0"
+  "version": "1.67.1"
 }

package/src/Checkbox/CheckboxGroup.jsx

@@ -112,6 +112,15 @@ const CheckboxGroup = forwardRef(
       viewport
     })
 
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       values: checkedIds,
       initialValues: initialCheckedIds,
@@ -163,14 +172,7 @@ const CheckboxGroup = forwardRef(
         inactive={inactive}
         validation={validation}
         showErrorBorder
-        tokens={{
-          outlineWidth,
-          borderTopLeftRadius,
-          borderTopRightRadius,
-          borderBottomLeftRadius,
-          borderBottomRightRadius,
-          outlineOffset
-        }}
+        tokens={borderTokens}
         showIcon={showIcon}
         {...selectProps(rest)}
       >

package/src/CheckboxCardGroup/CheckboxCardGroup.jsx

@@ -0,0 +1,231 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import {
+  a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
+  getTokensPropType,
+  selectSystemProps,
+  useMultipleInputValues,
+  variantProp,
+  viewProps
+} from '../utils'
+import StackView, { StackWrap } from '../StackView'
+import CheckboxCard from '../CheckboxCard'
+import Fieldset from '../Fieldset'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+
+const CheckboxCardGroup = forwardRef(
+  (
+    {
+      copy = 'en',
+      tokens,
+      checkboxCardTokens,
+      variant,
+      items = [],
+      legend,
+      tooltip,
+      hint,
+      hintPosition = 'inline',
+      validation,
+      feedback,
+      initialCheckedIds,
+      checkedIds,
+      onChange,
+      readOnly,
+      name: inputGroupName,
+      inactive,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const {
+      space,
+      fieldSpace,
+      direction,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    } = useThemeTokens('CheckboxCardGroup', tokens, variant, {
+      viewport
+    })
+
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
+    const { currentValues, toggleOneValue } = useMultipleInputValues({
+      value: checkedIds,
+      initialValues: initialCheckedIds,
+      onChange,
+      readOnly: readOnly || inactive
+    })
+
+    const StackContainer = direction === 'row' ? StackWrap : StackView
+    // Needs 'checkboxgroup' role on direct parent of checkboxes for MacOS Voiceover's numbering to work,
+    // and also needs 'checkboxgroup' role on fieldset for correct description on focusing the set.
+    // TODO: test this on more web screen readers.
+
+    const uniqueFields = ['id']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`CheckboxCardGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
+    return (
+      <Fieldset
+        copy={copy}
+        ref={ref}
+        name={inputGroupName}
+        legend={legend}
+        tooltip={tooltip}
+        hint={hint}
+        hintPosition={hintPosition}
+        space={fieldSpace}
+        feedback={feedback}
+        inactive={inactive || readOnly}
+        validation={validation}
+        tokens={borderTokens}
+        showErrorBorder
+        showIcon={showIcon}
+        accessibilityRole="checkbox"
+        {...selectProps(rest)}
+      >
+        {(checkboxCardProperties) => (
+          <StackContainer space={space} accessibilityRole="checkbox">
+            {items.map(({ title, content, id, onChange: itemOnChange, ...itemRest }, index) => {
+              const cardId = id || `CheckboxCard[${index}]`
+              const handleChange = (newCheckedState, event) => {
+                if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+                toggleOneValue(cardId, event)
+              }
+
+              return (
+                <CheckboxCard
+                  key={cardId}
+                  id={cardId}
+                  checked={currentValues.includes(cardId)}
+                  onChange={handleChange}
+                  inactive={inactive}
+                  title={title}
+                  name={inputGroupName}
+                  tokens={checkboxCardTokens}
+                  variant={variant}
+                  readOnly={readOnly}
+                  {...selectItemProps(itemRest)}
+                  {...checkboxCardProperties}
+                >
+                  {content}
+                </CheckboxCard>
+              )
+            })}
+          </StackContainer>
+        )}
+      </Fieldset>
+    )
+  }
+)
+CheckboxCardGroup.displayName = 'CheckboxCardGroup'
+
+CheckboxCardGroup.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 CheckboxCardGroup component
+   */
+  tokens: getTokensPropType('CheckboxCardGroup'),
+  /**
+   * Optional theme token overrides for each inner CheckboxCard component
+   */
+  checkboxCardTokens: getTokensPropType('CheckboxCard'),
+  /**
+   * Theme variants, shared between both CheckboxCardGroup and CheckboxCard
+   */
+  variant: variantProp.propType,
+  /**
+   * Array of objects containing specifics for each CheckboxCard to be rendered in the group.
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.exact({
+      ...selectedItemPropTypes,
+      title: PropTypes.string,
+      content: PropTypes.node,
+      id: PropTypes.string,
+      onChange: PropTypes.func
+    })
+  ),
+  /**
+   * 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,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+  /**
+   * 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 provided, the checkboxed with this ids are selected on first render.
+   */
+  initialCheckedIds: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * If not undefined, the checkboxes with these ids is selected, and the
+   * element's selection state will be controlled by its parent using the `onChange` function.
+   */
+  checkedIds: 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,
+  /**
+   * If true, the checkbox cards cannot be selected by the user and simply show their current state.
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * If true, the checkbox card 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 checkbox input.
+   */
+  name: PropTypes.string
+}
+
+export default CheckboxCardGroup

package/src/CheckboxCardGroup/index.js

@@ -0,0 +1,3 @@
+import CheckboxCardGroup from './CheckboxCardGroup'
+
+export default CheckboxCardGroup