@telus-uds/components-base 1.65.0 → 1.67.0

package/src/CheckboxCardGroup/CheckboxCardGroup.jsx

@@ -0,0 +1,230 @@
+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,
+      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
+        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

package/src/Modal/Modal.jsx

@@ -23,6 +23,7 @@ import { useViewport } from '../ViewportProvider'
 import IconButton from '../IconButton'
 import dictionary from './dictionary'
 import useScrollBlocking from '../utils/useScrollBlocking'
+import ModalContent from './ModalContent'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -57,7 +58,7 @@ const selectModalStyles = ({
   height,
   paddingLeft,
   paddingRight,
-  paddingTop,
+  paddingTop: Platform.OS !== 'web' ? 16 + paddingTop : paddingTop, // the 16 additions are due to the border that is present in the mobile version
   paddingBottom,
   ...applyShadowToken(shadow)
 })
@@ -69,7 +70,11 @@ const selectBackdropStyles = ({ backdropColor, backdropOpacity }) => ({
 
 const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
   paddingRight,
-  paddingTop
+  paddingTop: Platform.OS !== 'web' ? 24 + paddingTop : paddingTop // The 24 additions are due to the border that is present in the mobile version for the close button
+})
+
+const selectScrollViewStyles = () => ({
+  flex: 1
 })
 
 /**
@@ -87,7 +92,31 @@ const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
  * - Don’t use modals consecutively
  */
 const Modal = forwardRef(
-  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, closeButton, ...rest }, ref) => {
+  (
+    {
+      children,
+      isOpen,
+      onClose,
+      maxWidth,
+      tokens,
+      copy,
+      closeButton,
+      onCancel = onClose,
+      onConfirm,
+      heading,
+      headingLevel,
+      subHeading,
+      subHeadingSize,
+      bodyText,
+      variant = {},
+      confirmButtonText,
+      confirmButtonVariant,
+      cancelButtonText,
+      cancelButtonType,
+      ...rest
+    },
+    ref
+  ) => {
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
     const modalRef = useScrollBlocking(isOpen)
@@ -142,7 +171,27 @@ const Modal = forwardRef(
                   )}
                 </View>
               )}
-              {children}
+              <ModalContent
+                tokens={tokens}
+                variant={variant}
+                onCancel={onCancel}
+                onConfirm={onConfirm}
+                heading={heading}
+                headingLevel={headingLevel}
+                subHeading={subHeading}
+                subHeadingSize={subHeadingSize}
+                bodyText={bodyText}
+                confirmButtonText={confirmButtonText}
+                confirmButtonVariant={confirmButtonVariant}
+                cancelButtonText={cancelButtonText}
+                cancelButtonType={cancelButtonType}
+              >
+                {Platform !== 'web' ? (
+                  <ScrollView style={selectScrollViewStyles}>{children}</ScrollView>
+                ) : (
+                  { children }
+                )}
+              </ModalContent>
             </View>
           </View>
           {/* when a modal becomes open its first focusable element is being automatically focused */}
@@ -181,7 +230,51 @@ Modal.propTypes = {
   /**
    * Pass a react node to override the default close button or pass `null` to hide the close button.
    */
-  closeButton: PropTypes.node
+  closeButton: PropTypes.node,
+  /**
+   * Receive a string to set the heading of the modal.
+   */
+  heading: PropTypes.string,
+  /**
+   * Receive h3 or h4 to define the level of the heading.
+   */
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  /**
+   * Receive a string to set the sub heading of the modal.
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Receive small, medium or large to set the size of the sub heading.
+   */
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Receive a string to set the bodyText of the modal.
+   */
+  bodyText: PropTypes.string,
+  /**
+   * Receive a string text for the confirm button.
+   */
+  confirmButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the confirm button.
+   */
+  confirmButtonVariant: PropTypes.object,
+  /**
+   * Receive a function for the onConfirm event in the confirm button.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * Receive a string text for the cancel button.
+   */
+  cancelButtonText: PropTypes.string,
+  /**
+   * Receives a variant of button for the cancel button.
+   */
+  cancelButtonType: PropTypes.elementType, // TODO: figure out a way of passing an icon to the TextButton
+  /**
+   * Receive a function for the onCancel event in the cancel button.
+   */
+  onCancel: PropTypes.func
 }
 
 export default Modal

package/src/Modal/ModalContent.jsx

@@ -0,0 +1,171 @@
+import React, { useState } from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import Box from '../Box'
+import { Button } from '../Button'
+import { TextButton } from '../Link'
+import Spacer from '../Spacer'
+import Typography from '../Typography'
+import { useThemeTokens } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
+
+const ModalContent = ({
+  heading,
+  headingLevel = 'h3',
+  subHeading,
+  subHeadingSize = 'medium',
+  bodyText,
+  confirmButtonText,
+  confirmButtonVariant = { priority: 'high' },
+  onConfirm,
+  tokens,
+  variant,
+  cancelButtonText,
+  cancelButtonType: CancelButton = TextButton,
+  children,
+  onCancel
+}) => {
+  const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
+    'Modal',
+    tokens,
+    variant
+  )
+  const [scrollContainerHeight, setScrollContainerHeight] = useState(0)
+  const [scrollContentHeight, setScrollContentHeight] = useState(0)
+  const viewport = useViewport()
+
+  const handleContainerLayout = ({
+    nativeEvent: {
+      layout: { height }
+    }
+  }) => setScrollContainerHeight(height)
+  const onContentSizeChange = (_, height) => setScrollContentHeight(height)
+  const isContentOverflowing = scrollContentHeight > scrollContainerHeight
+
+  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined
+  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined
+  const hasHeadingSection = Boolean(heading || subHeading)
+
+  const selectFooterContainerStyles = ({
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    marginLeft,
+    marginRight,
+    borderColor,
+    gap,
+    direction,
+    hasBorder
+  }) => ({
+    flexDirection: direction,
+    alignItems: 'center',
+    gap,
+    marginLeft: -marginLeft,
+    marginRight: -marginRight,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    borderTopColor: hasBorder ? borderColor : 'transparent',
+    borderTopWidth: hasBorder ? 1 : 0
+  })
+
+  const headingStyles = {
+    flexDirection: 'column',
+    paddingTop: 8,
+    paddingRight: themeTokens.headingPaddingRight
+  }
+
+  const subheadingStyles = {
+    marginTop: themeTokens.subHeadingMarginTop
+  }
+
+  return (
+    <View style={styles.modalContent}>
+      {hasHeadingSection && (
+        <View style={headingStyles}>
+          {heading && (
+            <Typography
+              variant={{ size: headingLevel }}
+              tokens={{ color: headingColor }}
+              heading={headingLevel}
+            >
+              {heading}
+            </Typography>
+          )}
+          {subHeading && (
+            <View style={subheadingStyles}>
+              <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
+            </View>
+          )}
+          {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
+        </View>
+      )}
+      {bodyText && (
+        <Box
+          scroll={{ onContentSizeChange, showsVerticalScrollIndicator: true }}
+          onLayout={handleContainerLayout}
+        >
+          <Typography>{bodyText}</Typography>
+        </Box>
+      )}
+      {children}
+      {(hasConfirmButton || hasCancelButton) && (
+        <View
+          style={[
+            selectFooterContainerStyles({
+              ...themeTokens,
+              hasBorder: isContentOverflowing
+            })
+          ]}
+        >
+          {hasConfirmButton && (
+            <Button
+              variant={confirmButtonVariant}
+              tokens={{ width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined }}
+              onPress={onConfirm}
+            >
+              {confirmButtonText}
+            </Button>
+          )}
+          {hasCancelButton ? (
+            <View style={styles.styledTextButtonContainer}>
+              <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
+                {cancelButtonText}
+              </CancelButton>
+            </View>
+          ) : null}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  modalContent: {
+    flex: 1,
+    flexDirection: 'column',
+    minHeight: Platform.OS === 'web' ? '100%' : 'auto'
+  },
+  styledTextButtonContainer: {
+    flex: 1
+  }
+})
+
+ModalContent.propTypes = {
+  tokens: PropTypes.object,
+  variant: PropTypes.object,
+  heading: PropTypes.string,
+  headingLevel: PropTypes.oneOf(['h3', 'h4']),
+  subHeading: PropTypes.string,
+  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  bodyText: PropTypes.string,
+  confirmButtonText: PropTypes.string,
+  confirmButtonVariant: PropTypes.object,
+  onConfirm: PropTypes.func,
+  cancelButtonText: PropTypes.string,
+  cancelButtonType: PropTypes.elementType, // TODO: figure out a way of passing an icon to the TextButton
+  children: PropTypes.node,
+  onCancel: PropTypes.func
+}
+
+export default ModalContent