@telus-uds/components-base 2.0.0 → 2.0.1

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