@telus-uds/components-base 1.65.0 → 1.67.0

package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js

@@ -0,0 +1,205 @@
+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';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const CheckboxCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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,
+    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 /*#__PURE__*/_jsx(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: true,
+    showIcon: true,
+    accessibilityRole: "checkbox",
+    ...selectProps(rest),
+    children: checkboxCardProperties => /*#__PURE__*/_jsx(StackContainer, {
+      space: space,
+      accessibilityRole: "checkbox",
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          content,
+          id,
+          onChange: itemOnChange,
+          ...itemRest
+        } = _ref2;
+        const cardId = id || `CheckboxCard[${index}]`;
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+          toggleOneValue(cardId, event);
+        };
+        return /*#__PURE__*/_jsx(CheckboxCard, {
+          id: cardId,
+          checked: currentValues.includes(cardId),
+          onChange: handleChange,
+          inactive: inactive,
+          title: title,
+          name: inputGroupName,
+          tokens: checkboxCardTokens,
+          variant: variant,
+          readOnly: readOnly,
+          ...selectItemProps(itemRest),
+          ...checkboxCardProperties,
+          children: content
+        }, cardId);
+      })
+    })
+  });
+});
+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/lib-module/CheckboxCardGroup/index.js

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

package/lib-module/Divider/Divider.js

@@ -10,6 +10,7 @@ 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]);
+
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
  * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
@@ -51,7 +52,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-
 const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant,
@@ -71,52 +71,54 @@ const Divider = /*#__PURE__*/forwardRef((_ref, ref) => {
     borderBottomColor: color,
     borderBottomWidth: width
   };
-  const a11y = Platform.OS === 'web' ? // There are aria attributes for dividers on web
+  const a11y = Platform.OS === 'web' ?
+  // There are aria attributes for dividers on web
   {
     // Early versions of React Native Web support 'aria-orientation' while
     // later versions only support accessibilityOrientation and map it. Supply both.
     'aria-orientation': vertical ? 'vertical' : 'horizontal',
     accessibilityOrientation: vertical ? 'vertical' : 'horizontal',
     accessibilityRole: 'separator'
-  } : // There are no such equivalent attributes for native
+  } :
+  // There are no such equivalent attributes for native
   {};
   const {
     testID,
     ...selectedProps
-  } = selectProps({ ...a11y,
+  } = selectProps({
+    ...a11y,
     ...rest
   });
-
   const divider = /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [styles.divider, borderStyles],
     testID: testID,
     ...selectedProps
   });
-
   if (!space) return divider;
   const spacerProps = {
     space,
     direction: vertical ? 'row' : 'column'
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Spacer, { ...spacerProps,
+    children: [/*#__PURE__*/_jsx(Spacer, {
+      ...spacerProps,
       testID: testID ? `${testID}-Spacer-before` : undefined
-    }), divider, /*#__PURE__*/_jsx(Spacer, { ...spacerProps,
+    }), divider, /*#__PURE__*/_jsx(Spacer, {
+      ...spacerProps,
       testID: testID ? `${testID}-Spacer-after` : undefined
     })]
   });
 });
 Divider.displayName = 'Divider';
-Divider.propTypes = { ...selectedSystemPropTypes,
+Divider.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Divider'),
-
   /**
    * A number referring to a position on the space scale to create space on either side of the divider
    */
   space: spacingProps.types.spacingValue,
   variant: variantProp.propType,
-
   /**
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.

package/lib-module/ExpandCollapse/Accordion.js

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
 import ExpandCollapse from './ExpandCollapse';
+
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const Accordion = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(ExpandCollapse, {
   ref: ref,

package/lib-module/ExpandCollapse/Control.js

@@ -10,7 +10,6 @@ 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]);
-
 function selectContainerStyles(_ref) {
   let {
     backgroundColor,
@@ -46,9 +45,9 @@ function selectContainerStyles(_ref) {
     borderBottomLeftRadius,
     ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   };
-} // TODO: use stack / spacer when available
-
+}
 
+// TODO: use stack / spacer when available
 function selectIconContainerStyles(_ref2) {
   let {
     iconGap,
@@ -61,7 +60,6 @@ function selectIconContainerStyles(_ref2) {
     paddingTop: iconPaddingTop
   };
 }
-
 function selectTextContainerStyles(_ref3) {
   let {
     textLine
@@ -71,14 +69,12 @@ function selectTextContainerStyles(_ref3) {
     flex: 1
   };
 }
-
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
     size: tokens.iconSize
   };
 }
-
 const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     onPress,
@@ -93,11 +89,11 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
-    accessibilityState: { ...(rest.accessibilityState || {}),
+    accessibilityState: {
+      ...(rest.accessibilityState || {}),
       expanded: isExpanded
     }
   });
-
   const getControlState = _ref5 => {
     let {
       pressed,
@@ -111,15 +107,13 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
       expanded: isExpanded
     };
   };
-
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
-
-  const getPressableStyle = pressableState => ({ ...selectContainerStyles(getControlTokens(pressableState)),
+  const getPressableStyle = pressableState => ({
+    ...selectContainerStyles(getControlTokens(pressableState)),
     ...(Platform.OS === 'web' ? {
       outline: 'none'
     } : {})
   });
-
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     ...selectedProps,
@@ -133,7 +127,8 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref4, ref) => {
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [IconComponent && /*#__PURE__*/_jsx(View, {
           style: [selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
-          children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
+          children: /*#__PURE__*/_jsx(IconComponent, {
+            ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/_jsx(View, {
           style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
@@ -149,21 +144,19 @@ const staticStyles = StyleSheet.create({
     pointerEvents: 'none'
   }
 });
-ExpandCollapseControl.propTypes = { ...selectedSystemPropTypes,
+ExpandCollapseControl.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ExpandCollapseControl'),
   variant: variantProp.propType,
-
   /**
    * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
    * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
    */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-
   /**
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: PropTypes.bool,
-
   /**
    * Function called when the ExpandCollapse is pressed.
    */

package/lib-module/ExpandCollapse/ExpandCollapse.js

@@ -5,7 +5,6 @@ import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -13,6 +12,7 @@ function selectBorderStyles(tokens) {
     borderBottomColor: tokens.borderColor
   };
 }
+
 /**
  * Flexible base component for lists where some or all items are collapsible headers.
  *
@@ -20,8 +20,6 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-
-
 const ExpandCollapse = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
@@ -60,33 +58,29 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ExpandCollapse.displayName = 'ExpandCollapse';
-ExpandCollapse.propTypes = { ...selectedSystemPropTypes,
+ExpandCollapse.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('ExpandCollapse'),
-
   /**
    * ExpandCollapse usually takes a render function to which it passes an object with properties
    * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
    * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-
   /**
    * If set, enforces a specific maximum number of open items, closing already-open items when new
    * items are opened. By default, any number of items may be open at once.
    */
   maxOpen: PropTypes.number,
-
   /**
    * If passed, the item or items that are expanded will be controlled by a parent component
    */
   open: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * Function called when which panels are currently open changes. Necessary if `open` is passed.
    */
   onChange: PropTypes.func,
-
   /**
    * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
    */

package/lib-module/ExpandCollapse/Panel.js

@@ -10,8 +10,9 @@ import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, useVerticalExpandAnimation, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // just void functions for now, since there are no style tokens for a panel or control at this point
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
+// just void functions for now, since there are no style tokens for a panel or control at this point
 const selectContainerStyles = _ref => {
   let {
     contentPaddingLeft,
@@ -27,7 +28,6 @@ const selectContainerStyles = _ref => {
     flex: 1
   };
 };
-
 const selectTextStyles = _ref2 => {
   let {
     contentPanelFontSize,
@@ -43,7 +43,6 @@ const selectTextStyles = _ref2 => {
     color: contentPanelFontColor
   };
 };
-
 const selectContentPanelStyles = _ref3 => {
   let {
     contentPanelBackgroundColor,
@@ -69,6 +68,7 @@ const selectContentPanelStyles = _ref3 => {
     marginBottom
   };
 };
+
 /**
  * An item in an `ExpandCollapse` which contains collapsible `children` and a `control` that opens
  * and closes the collapsible children when pressed.
@@ -79,8 +79,6 @@ const selectContentPanelStyles = _ref3 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-
-
 const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     openIds = [],
@@ -98,32 +96,30 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   } = _ref4;
   const [containerHeight, setContainerHeight] = useState(null);
   const isExpanded = openIds.includes(panelId);
-  const selectedProps = selectProps({ ...rest,
-    accessibilityState: { ...(rest.accessibilityState || {}),
+  const selectedProps = selectProps({
+    ...rest,
+    accessibilityState: {
+      ...(rest.accessibilityState || {}),
       expanded: isExpanded
     }
   });
   const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
-
   const handleControlPress = event => {
     onToggle(panelId, event);
     if (onPress) onPress(panelId, event);
   };
-
   const onContainerLayout = event => {
     const {
       layout: {
         height = 0
       } = {}
     } = event.nativeEvent;
-
     if (Platform.OS === 'web' || Platform.OS !== 'web' && containerHeight === null) {
       setContainerHeight(height);
     }
   };
-
   const [animatedStyles, animatedRef] = useVerticalExpandAnimation({
     containerHeight,
     isExpanded,
@@ -139,7 +135,8 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   }) : /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: themeTokens,
-    children: [/*#__PURE__*/_jsx(ExpandCollapseControl, { ...selectedProps,
+    children: [/*#__PURE__*/_jsx(ExpandCollapseControl, {
+      ...selectedProps,
       isExpanded: isExpanded,
       tokens: controlTokens,
       variant: variant,
@@ -159,7 +156,8 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
       ...focusabilityProps,
       children: /*#__PURE__*/_jsx(View, {
         onLayout: onContainerLayout,
-        style: { ...Platform.select({
+        style: {
+          ...Platform.select({
             default: {
               flex: 1
             },
@@ -175,52 +173,44 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
   });
 });
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
-ExpandCollapsePanel.propTypes = { ...selectedSystemPropTypes,
+ExpandCollapsePanel.propTypes = {
+  ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('ExpandCollapsePanel'),
-
   /**
    * Array of the ids of currently open groups
    */
   openIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
   /**
    * Unique name by which the ExpandCollapse controls this element.
    */
   panelId: PropTypes.string.isRequired,
-
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    * If Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent.
    */
   onToggle: PropTypes.func,
-
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel.
    */
   onPress: PropTypes.func,
-
   /**
    * ExpandCollapsePanel's children are the content that is hidden or revealed on open or close, and may be any
    * single React element or a render function which takes this group's isExpanded state, onToggle function and panelId
    */
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
   /**
    * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
   control: ExpandCollapseControl.propTypes.children,
-
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
-
   /**
    * An optional ref to be attached to the control
    */
   controlRef: ABBPropTypes.ref(),
-
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */