@telus-uds/components-base 2.0.0 → 2.0.2

package/src/Button/ButtonGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { Platform } from 'react-native'
@@ -30,10 +30,11 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const ButtonGroup = forwardRef(
+const ButtonGroup = React.forwardRef(
   (
     {
       variant,
+      buttonVariant,
       tokens,
       items = [],
       values,
@@ -62,7 +63,8 @@ const ButtonGroup = forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
     const stackTokens = selectTokens('StackView', themeTokens)
-    const { direction, space, fieldSpace } = themeTokens
+    const { direction, space, fieldSpace, borderRadius, backgroundColor, padding, gap } =
+      themeTokens
 
     const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
@@ -104,6 +106,12 @@ const ButtonGroup = forwardRef(
         inactive={inactive}
         validation={validation}
         accessibilityRole={accessibilityRole}
+        style={{
+          borderRadius,
+          backgroundColor,
+          padding,
+          ...(Platform.OS === 'web' ? { gap, width: 'fit-content' } : { alignSelf: 'flex-start' })
+        }}
         {...selectProps(rest)}
       >
         <StackWrap
@@ -111,6 +119,7 @@ const ButtonGroup = forwardRef(
           space={space}
           direction={direction}
           tokens={stackTokens}
+          gap={gap}
           ref={ref}
         >
           {items.map(
@@ -140,6 +149,7 @@ const ButtonGroup = forwardRef(
                 <ButtonBase
                   ref={itemRef}
                   key={id}
+                  variant={buttonVariant}
                   {...pressHandlers}
                   onPress={handlePress}
                   tokens={getButtonTokens}
@@ -167,6 +177,13 @@ ButtonGroup.displayName = 'ButtonGroup'
 ButtonGroup.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('ButtonGroup'),
+  /**
+   * To allow Button specific variant
+   */
+  buttonVariant: variantProp.propType,
+  /**
+   * Default variant prop
+   */
   variant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves

package/src/Button/ButtonLink.jsx

@@ -1,17 +1,21 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
+import { useViewport } from '../ViewportProvider'
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = forwardRef(
+const ButtonLink = React.forwardRef(
   ({ accessibilityRole = 'link', tokens, variant, dataSet, ...props }, ref) => {
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-    const getTokens = useThemeTokensCallback('Button', tokens, variant)
+    const viewport = useViewport()
+    const buttonVariant = { viewport, ...variant }
+    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
     return (
       <ButtonBase
         ref={ref}
@@ -30,7 +34,9 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
-  children: textAndA11yText
+  children: textAndA11yText,
+  dataSet: PropTypes.object,
+  accessibilityRole: PropTypes.string
 }
 
 export default ButtonLink

package/src/Card/Card.jsx

@@ -1,13 +1,55 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-
-import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { View } from 'react-native'
+import {
+  useThemeTokens,
+  useThemeTokensCallback,
+  useResponsiveThemeTokens,
+  useTheme
+} from '../ThemeProvider'
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
+import { a11yProps, linkProps, selectSystemProps, viewProps, responsiveProps } 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, linkProps])
+
+const SelectionType = {
+  Checkbox: 'checkbox',
+  Radio: 'radiogroup',
+  None: undefined
+}
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+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.
@@ -57,24 +99,234 @@ 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, ...rest }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
-
-  return (
-    <CardBase ref={ref} tokens={themeTokens} dataSet={dataSet} {...selectProps(rest)}>
-      {children}
-    </CardBase>
-  )
-})
+const Card = React.forwardRef(
+  (
+    { children, tokens, variant, dataSet, onPress, id, interactiveCard, backgroundImage, ...rest },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const { themeOptions } = useTheme()
+
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+
+    const themeTokens = useTokens(
+      'Card',
+      tokens,
+      variant,
+      !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 } = 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
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens)
+
+      const { ids, styles } = StyleSheet.create({
+        card: mediaQueryStyleSheet
+      })
+      cardStyles = styles.card
+      mediaIds = ids.card
+    } else {
+      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
+          ref={ref}
+          tokens={interactiveCard?.body ? restOfTokens : cardStyles}
+          backgroundImage={backgroundImage}
+          dataSet={mediaIds && { media: mediaIds }}
+          {...selectProps(rest)}
+        >
+          {interactiveCard?.body ? (
+            <>
+              <PressableCardBase
+                ref={ref}
+                tokens={getThemeTokens}
+                dataSet={dataSet}
+                onPress={onPress}
+                {...selectProps(rest)}
+              >
+                {(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
+                        })
+                      )}
+                      {typeof interactiveCard?.body === 'function'
+                        ? interactiveCard.body(cardState)
+                        : interactiveCard.body}
+                    </>
+                  )
+                }}
+              </PressableCardBase>
+              {children && selectionType !== SelectionType.None ? renderNoSelectionView() : null}
+            </>
+          ) : (
+            children
+          )}
+        </CardBase>
+      </>
+    )
+  }
+)
 
 Card.displayName = 'Card'
 
 Card.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
   children: PropTypes.node,
+  /**
+   * Card tokens.
+   */
   tokens: getTokensPropType('Card'),
-  variant: variantProp.propType
+  /**
+   * Card variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * 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.oneOfType([PropTypes.node, PropTypes.func]),
+    tokens: getTokensPropType('Card'),
+    selectionType: PropTypes.oneOf(Object.values(SelectionType)),
+    variant: variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: PropTypes.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    )
+  })
 }
 
 export default Card

package/src/Card/CardBase.jsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { View } from 'react-native'
+import { View, Platform, ImageBackground, StyleSheet } from 'react-native'
 
 import { applyShadowToken } from '../ThemeProvider'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -20,41 +20,92 @@ const selectStyles = ({
   paddingRight,
   paddingTop,
   minWidth,
-  shadow
-}) => ({
-  flex,
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  minWidth,
-  ...applyShadowToken(shadow)
-})
+  shadow,
+  backgroundGradient,
+  gradient
+}) => {
+  return {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    ...applyShadowToken(shadow),
+    ...(gradient && Platform.OS === 'web'
+      ? {
+          backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+          backgroundOrigin: `border-box`,
+          boxShadow: `inset 0 1000px white`,
+          border: `${borderWidth}px solid transparent`
+        }
+      : {}),
+    ...(backgroundGradient && Platform.OS === 'web'
+      ? {
+          backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+        }
+      : {})
+  }
+}
 
 /**
  * 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 cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
-  const props = selectProps(rest)
-
-  return (
-    <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
-      {children}
-    </View>
-  )
-})
+const CardBase = React.forwardRef(
+  ({ children, tokens, dataSet, backgroundImage, ...rest }, ref) => {
+    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
+    const props = selectProps(rest)
+
+    const { src = '', alt = '', resizeMode = '' } = backgroundImage || {}
+    const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
+    const imageSourceViewport = formatImageSource(useResponsiveProp(src))
+
+    return (
+      <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
+        {src ? (
+          <ImageBackground
+            alt={alt}
+            source={imageSourceViewport}
+            imageStyle={{ borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth }}
+            resizeMode={backgroundImageResizeMode}
+            style={styles.imageBackground}
+          >
+            {children}
+          </ImageBackground>
+        ) : (
+          children
+        )}
+      </View>
+    )
+  }
+)
 CardBase.displayName = 'CardBase'
 
+const styles = StyleSheet.create({
+  imageBackground: { width: '100%', height: '100%' }
+})
+
 CardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
-  tokens: getTokensPropType('Card')
+  tokens: getTokensPropType('Card'),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: PropTypes.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    )
+  })
 }
 
 export default CardBase

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,
@@ -54,6 +68,7 @@ const PressableCardBase = forwardRef(
       inactive,
       href,
       hrefAttrs,
+      dataSet,
       accessibilityRole = href ? 'link' : undefined,
       ...rawRest
     },
@@ -103,6 +118,7 @@ const PressableCardBase = forwardRef(
         onKeyDown={handleKeyDown}
         hrefAttrs={hrefAttrs}
         style={getOuterBorderStyle}
+        dataSet={dataSet}
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
@@ -119,7 +135,7 @@ PressableCardBase.displayName = 'PressableCardBase'
 PressableCardBase.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  tokens: getTokensSetPropType(tokenKeys, { requireAll: true, allowFunction: true }),
+  tokens: getTokensSetPropType(tokenKeys, { partial: true, allowFunction: true }),
   variant: variantProp.propType
 }