@telus-uds/components-base 1.83.0 → 1.85.0

package/src/Card/Card.jsx

@@ -1,7 +1,6 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
-
 import {
   useThemeTokens,
   useThemeTokensCallback,
@@ -13,9 +12,45 @@ 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'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const SelectionType = {
+  Checkbox: 'checkbox',
+  Radio: 'radiogroup',
+  None: undefined
+}
+
+const selectInputStyle = ({ paddingTop, paddingRight }) => ({
+  position: 'absolute',
+  top: paddingTop,
+  right: paddingRight
+})
+
+const getInputProps = ({
+  id,
+  checkColor,
+  boxBackgroundColor,
+  checkBackgroundColor,
+  isControlled,
+  isChecked,
+  isInactive,
+  handleChange
+}) => ({
+  inputId: id,
+  tokens: {
+    iconColor: checkColor,
+    inputBackgroundColor: boxBackgroundColor,
+    iconBackgroundColor: checkBackgroundColor
+  },
+  isControlled,
+  isChecked,
+  inactive: isInactive,
+  handleChange
+})
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -64,8 +99,8 @@ 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 = forwardRef(
-  ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
+const Card = React.forwardRef(
+  ({ children, tokens, variant, dataSet, onPress, id, interactiveCard, ...rest }, ref) => {
     const viewport = useViewport()
     const { themeOptions } = useTheme()
 
@@ -80,13 +115,60 @@ const Card = forwardRef(
       !enableMediaQueryStyleSheet && { viewport }
     )
 
+    const selected = interactiveCard?.variant?.selected
+    const inactive = interactiveCard?.variant?.inactive
+    const selectionType = interactiveCard?.selectionType
+
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
       ...(interactiveCard?.variant || {})
     })
     // When interactive area is present, spacing tokens should only be applied
     // to individual Card sections, not Card as a whole
-    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = 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
@@ -103,6 +185,29 @@ const Card = forwardRef(
       cardStyles = themeTokens
     }
 
+    const renderInputPerSelectionType = (props) => {
+      switch (selectionType) {
+        case SelectionType.Checkbox:
+          return (
+            <View style={selectInputStyle(getThemeTokens())}>
+              <CheckboxButton {...props} tokens={{ ...checkboxTokens, ...props?.tokens }} />
+            </View>
+          )
+        case SelectionType.Radio:
+          return (
+            <View style={selectInputStyle(getThemeTokens())}>
+              <RadioButton {...props} tokens={{ ...radioTokens, ...props?.tokens }} />
+            </View>
+          )
+        default:
+          return null
+      }
+    }
+
+    const renderNoSelectionView = () => (
+      <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
+    )
+
     return (
       <>
         <CardBase
@@ -120,13 +225,40 @@ const Card = forwardRef(
                 onPress={onPress}
                 {...selectProps(rest)}
               >
-                {interactiveCard?.body}
+                {(cardState) => {
+                  const {
+                    iconColor: checkColor,
+                    inputBackgroundColor: boxBackgroundColor,
+                    iconBackgroundColor: checkBackgroundColor
+                  } = getThemeTokens(
+                    {
+                      ...cardState,
+                      selected,
+                      interactive: true,
+                      isControl: true
+                    },
+                    interactiveCard?.tokens
+                  )
+                  return (
+                    <>
+                      {renderInputPerSelectionType(
+                        getInputProps({
+                          id,
+                          checkColor,
+                          boxBackgroundColor,
+                          checkBackgroundColor,
+                          isControlled: true,
+                          isChecked: selected || cardState?.hover,
+                          isInactive: inactive,
+                          onPress
+                        })
+                      )}
+                      {interactiveCard?.body}
+                    </>
+                  )
+                }}
               </PressableCardBase>
-              {children ? (
-                <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>
-                  {children}
-                </View>
-              ) : null}
+              {children && selectionType !== SelectionType.None ? renderNoSelectionView() : null}
             </>
           ) : (
             children
@@ -158,15 +290,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/src/Card/CardBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 
@@ -50,7 +50,7 @@ const selectStyles = ({
  * 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 = forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
+const CardBase = React.forwardRef(({ children, tokens, dataSet, ...rest }, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
   const props = selectProps(rest)
   return (

package/src/Card/PressableCardBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, Platform } from 'react-native'
 
@@ -8,7 +8,6 @@ import {
   a11yProps,
   clickProps,
   focusHandlerProps,
-  getTokenNames,
   getTokensSetPropType,
   linkProps,
   resolvePressableState,
@@ -28,7 +27,22 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 ])
 
 const tokenKeys = [
-  ...getTokenNames('Card'),
+  '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
@@ -44,7 +58,7 @@ export const selectPressableCardTokens = (tokens) =>
  * 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 = forwardRef(
+const PressableCardBase = React.forwardRef(
   (
     {
       children,

package/src/CardGroup/CardGroup.jsx

@@ -0,0 +1,249 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+const uniqueFields = ['id']
+
+const CardGroup = React.forwardRef(
+  (
+    {
+      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?.(checked, event)
+      },
+      [singleInputValue, multipleInputValues, singleSelection]
+    )
+
+    return (
+      <Fieldset
+        copy={copy}
+        ref={ref}
+        name={inputGroupName}
+        space={fieldSpace}
+        feedback={feedback}
+        validation={validation}
+        tokens={borderTokens}
+        inactive={isInactive}
+        showErrorBorder
+        showIcon={showIcon}
+        accessibilityRole={role}
+        {...selectProps(rest)}
+      >
+        {(props) => (
+          <StackContainer space={space}>
+            {items.map(
+              ({ id, interactiveCard, card, onPress: itemOnChange, ...itemRest }, index) => {
+                const cardId = id || `${getCopy('prefixId')}[${index}]`
+                const itemHandleChange = (checked, event) =>
+                  handleChange(checked, event, cardId, itemOnChange)
+
+                return (
+                  <Card
+                    id={cardId}
+                    key={cardId}
+                    onPress={itemHandleChange}
+                    interactiveCard={{
+                      ...interactiveCard,
+                      tokens: {
+                        paddingTop,
+                        paddingBottom,
+                        paddingLeft,
+                        paddingRight,
+                        ...interactiveCard?.tokens
+                      },
+                      variant: {
+                        isControl: true,
+                        selected: singleSelection
+                          ? singleInputValue.currentValue === cardId
+                          : multipleInputValues.currentValues.includes(cardId),
+                        inactive: isInactive
+                      },
+                      selectionType: role
+                    }}
+                    {...selectItemProps(itemRest)}
+                    {...props}
+                  >
+                    {card?.body}
+                  </Card>
+                )
+              }
+            )}
+          </StackContainer>
+        )}
+      </Fieldset>
+    )
+  }
+)
+
+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/src/CardGroup/dictionary.js

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

package/src/CardGroup/index.js

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