@telus-uds/components-base 2.0.0 → 2.0.1

package/src/Progress/ProgressBarBackground.jsx

@@ -1,11 +1,12 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { ImageBackground, StyleSheet } from 'react-native'
 
 import { variantProp } from '../utils'
 
-const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`
-const ProgressBarBackground = forwardRef(({ variant }, ref) => {
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`
+
+const ProgressBarBackground = React.forwardRef(({ variant }, ref) => {
   let source = null
   if (variant?.inactive) {
     source = inactiveBackground
@@ -22,6 +23,7 @@ const ProgressBarBackground = forwardRef(({ variant }, ref) => {
     />
   )
 })
+
 ProgressBarBackground.displayName = 'ProgressBarBackground'
 
 ProgressBarBackground.propTypes = {

package/src/QuickLinks/QuickLinks.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
@@ -15,7 +15,7 @@ import QuickLinksCard from './QuickLinksCard'
  *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
-const QuickLinks = forwardRef(
+const QuickLinks = React.forwardRef(
   ({ tokens, variant, listTokens, cardTokens, children, tag = 'ul', ...rest }, ref) => {
     const viewport = useViewport()
     const { dividers, list, card, stackSpace, stackGap, stackJustify } = useThemeTokens(
@@ -51,8 +51,17 @@ QuickLinks.displayName = 'QuickLinks'
 
 QuickLinks.propTypes = {
   tokens: getTokensPropType('QuickLinks'),
+  /**
+   * Custom tokens override for `Card`
+   */
   cardTokens: getTokensPropType('Card'),
+  /**
+   * Custom tokens override for `QuickLinksList`
+   */
   listTokens: getTokensPropType('QuickLinksList'),
+  /**
+   * The HTML tag to render the list as
+   */
   tag: PropTypes.string,
   variant: variantProp.propType,
   children: PropTypes.node

package/src/QuickLinks/QuickLinksCard.jsx

@@ -11,11 +11,17 @@ import CardBase from '../Card/CardBase'
  * Restyled Card with identical behaviour to Card, but themed according to the
  * QuickLinksCard theme rather than the Card theme.
  */
-const QuickLinksList = ({ tokens, variant, children }) => {
+const QuickLinksList = React.forwardRef(({ tokens, variant, children }, ref) => {
   const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant)
 
-  return <CardBase tokens={themeTokens}>{children}</CardBase>
-}
+  return (
+    <CardBase tokens={themeTokens} ref={ref}>
+      {children}
+    </CardBase>
+  )
+})
+
+QuickLinksList.displayName = 'QuickLinksList'
 
 QuickLinksList.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),

package/src/QuickLinks/QuickLinksItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { getTokensPropType, variantProp, withLinkRouter } from '../utils'
@@ -13,7 +13,7 @@ import ButtonBase from '../Button/ButtonBase'
  *
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
-const QuickLinksItem = forwardRef(({ tokens, variant, children, ...rest }, ref) => {
+const QuickLinksItem = React.forwardRef(({ tokens, variant, children, ...rest }, ref) => {
   const viewport = useViewport()
   const { list } = useThemeTokens('QuickLinks', tokens, variant, { viewport })
 

package/src/QuickLinksFeature/QuickLinksFeature.jsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, Children, cloneElement } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StackWrap } from '../StackView'
-
+import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 
@@ -17,34 +17,38 @@ const isQuickListItem = (element) => {
  * QuickLinksFeature renders a list of interactive items.
  *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
  */
-const QuickLinksFeature = forwardRef(({ tokens, variant, tag = 'ul', children, ...rest }, ref) => {
-  const { stackGap, stackJustify, stackSpace } = useThemeTokens(
-    'QuickLinksFeature',
-    tokens,
-    variant
-  )
+const QuickLinksFeature = React.forwardRef(
+  ({ tokens, variant, tag = 'ul', children, ...rest }, ref) => {
+    const viewport = useViewport()
+    const { stackGap, stackJustify, stackSpace } = useThemeTokens(
+      'QuickLinksFeature',
+      tokens,
+      variant,
+      { viewport }
+    )
 
-  const items = Children.map(children, (child) => {
-    if (isQuickListItem(child)) {
-      return cloneElement(child, child.props)
-    }
+    const items = React.Children.map(children, (child) => {
+      if (isQuickListItem(child)) {
+        return React.cloneElement(child, child.props)
+      }
 
-    return null
-  })
+      return null
+    })
 
-  return (
-    <StackWrap
-      space={stackSpace}
-      gap={stackGap}
-      tokens={{ justifyContent: stackJustify }}
-      tag={tag}
-      ref={ref}
-      {...selectProps(rest)}
-    >
-      {items}
-    </StackWrap>
-  )
-})
+    return (
+      <StackWrap
+        space={stackSpace}
+        gap={stackGap}
+        tokens={{ justifyContent: stackJustify }}
+        tag={tag}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        {items}
+      </StackWrap>
+    )
+  }
+)
 
 QuickLinksFeature.displayName = 'QuickLinksFeature'
 

package/src/QuickLinksFeature/QuickLinksFeatureItem.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { Image, Platform, Text, View } from 'react-native'
@@ -11,7 +11,7 @@ import {
   selectSystemProps
 } from '../utils'
 import { useViewport } from '../ViewportProvider'
-import { useThemeTokensCallback } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import { Link } from '../Link'
 import { StackWrap } from '../StackView'
 
@@ -29,6 +29,7 @@ const selectImageStyle = (imageDimension) => ({
 
 const selectContainerStyle = ({ contentMaxDimension, textAlign }) => ({
   textAlign,
+  outline: 'red',
   width: contentMaxDimension,
   overflow: 'hidden'
 })
@@ -40,51 +41,57 @@ const selectImageContainerStyle = (contentMaxDimension) => ({
   alignItems: 'center'
 })
 
+const selectLinkToken = ({ outerBorderColor }) => ({ outerBorderColor })
+
 /**
  * Component export along with QuickLinksFeature to be used as children
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-const QuickLinksFeatureItem = forwardRef(
+const QuickLinksFeatureItem = React.forwardRef(
   ({ tokens, variant, children, imageAccessibilityLabel, imageSource, ...rest }, ref) => {
     const viewport = useViewport()
     const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant)
-    const [hover, setHover] = useState(false)
-    const {
-      contentDirection,
-      contentSpace,
-      contentAlignItems,
-      contentMaxDimension,
-      imageDimension,
-      textAlign
-    } = getTokens({ viewport, hover })
 
     return (
-      <Link
-        ref={ref}
-        tokens={(state) => {
-          setHover(state.hover)
-          return getTokens(state)
-        }}
-        {...selectProps(rest)}
-      >
-        <View style={selectContainerStyle({ contentMaxDimension, textAlign })}>
-          <StackWrap
-            direction={contentDirection}
-            space={contentSpace}
-            tokens={{ alignItems: contentAlignItems }}
-          >
-            <View style={selectImageContainerStyle(contentMaxDimension)}>
-              <Image
-                accessibilityIgnoresInvertColors
-                imageAccessibilityLabel={imageAccessibilityLabel}
-                source={imageSource}
-                style={selectImageStyle(imageDimension)}
-              />
+      <Link ref={ref} {...selectProps(rest)} tokens={(state) => selectLinkToken(getTokens(state))}>
+        {({ hovered: hover, pressed, focused: focus }) => {
+          const {
+            contentDirection,
+            contentSpace,
+            contentAlignItems,
+            contentMaxDimension,
+            imageDimension,
+            textLine,
+            gap,
+            ...themeTokens
+          } = getTokens({ viewport, hover, pressed, focus })
+
+          const textStyle = {
+            ...applyTextStyles(themeTokens),
+            textDecorationLine: textLine
+          }
+          return (
+            <View style={selectContainerStyle({ ...themeTokens, contentMaxDimension })}>
+              <StackWrap
+                direction={contentDirection}
+                space={contentSpace}
+                gap={gap}
+                tokens={{ alignItems: contentAlignItems }}
+              >
+                <View style={selectImageContainerStyle(contentMaxDimension)}>
+                  <Image
+                    accessibilityIgnoresInvertColors
+                    imageAccessibilityLabel={imageAccessibilityLabel}
+                    source={imageSource}
+                    style={selectImageStyle(imageDimension)}
+                  />
+                  <Text style={textStyle}>{children}</Text>
+                </View>
+              </StackWrap>
             </View>
-            <Text>{children}</Text>
-          </StackWrap>
-        </View>
+          )
+        }}
       </Link>
     )
   }

package/src/Radio/Radio.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
@@ -47,11 +47,20 @@ const selectDescriptionStyles = ({
   descriptionFontSize,
   descriptionLineHeight,
   descriptionMarginLeft,
+  descriptionFontName,
+  descriptionFontWeight,
   inputSize,
+  fontColor,
   labelMarginLeft = 0
 }) => ({
   marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-  ...applyTextStyles({ fontSize: descriptionFontSize, lineHeight: descriptionLineHeight })
+  color: fontColor,
+  ...applyTextStyles({
+    fontSize: descriptionFontSize,
+    lineHeight: descriptionLineHeight,
+    fontName: descriptionFontName,
+    fontWeight: descriptionFontWeight
+  })
 })
 const selectLabelStyles = ({
   labelColor,
@@ -102,7 +111,7 @@ const selectLabelStyles = ({
  * or the internal state in case of uncontrolled radio button.
  *
  */
-const Radio = forwardRef(
+const Radio = React.forwardRef(
   (
     {
       checked,
@@ -164,6 +173,7 @@ const Radio = forwardRef(
         onKeyDown={handleKeyDown}
         onPress={handleChange}
         {...selectedProps}
+        style={staticStyles.removeOutline}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
@@ -195,7 +205,14 @@ const Radio = forwardRef(
                 )}
               </View>
               {Boolean(description) && (
-                <Text style={selectDescriptionStyles(getTokens())}>{description}</Text>
+                <Text
+                  style={selectDescriptionStyles({
+                    ...getTokens(),
+                    fontColor: labelStyles.color
+                  })}
+                >
+                  {description}
+                </Text>
               )}
             </StackView>
           )
@@ -231,7 +248,7 @@ Radio.propTypes = {
   /**
    * The label.
    */
-  label: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */
@@ -262,5 +279,6 @@ export default Radio
 
 const staticStyles = StyleSheet.create({
   container: { flexDirection: 'row', alignItems: 'center' },
-  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },
+  removeOutline: { outlineStyle: 'none' }
 })

package/src/Radio/RadioButton.jsx

@@ -1,9 +1,15 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import RadioInput from './RadioInput'
-import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../ThemeProvider'
+import {
+  applyOuterBorder,
+  applyShadowToken,
+  resolveThemeTokens,
+  validateThemeTokens,
+  useThemeTokens
+} from '../ThemeProvider'
 import {
   a11yProps,
   getTokensSetPropType,
@@ -43,6 +49,32 @@ const selectCheckedStyles = ({ checkedBackgroundColor, checkedSize }) => ({
   width: checkedSize
 })
 
+const selectIconTokens = ({ icon, iconColor, checkedSize }) => ({
+  icon,
+  color: iconColor,
+  size: checkedSize
+})
+
+const selectInputIconStyles = (
+  {
+    iconBackgroundColor,
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputSize,
+    containerShadow
+  },
+  isChecked
+) => ({
+  borderColor: inputBorderColor,
+  borderRadius: getBorderRadius(inputSize),
+  borderWidth: inputBorderWidth,
+  backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+  height: inputSize,
+  width: inputSize,
+  ...applyShadowToken(containerShadow)
+})
+
 const selectInputStyles = ({
   inputBackgroundColor,
   inputBorderColor,
@@ -84,7 +116,7 @@ const selectOuterBorderStyles = ({
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
-const RadioButton = forwardRef(
+const RadioButton = React.forwardRef(
   (
     {
       isChecked,
@@ -96,20 +128,40 @@ const RadioButton = forwardRef(
       handleChange,
       name: inputName,
       value,
+      testID = 'Radio-Checked',
       ...rest
     },
     ref
   ) => {
+    const radioTokens = useThemeTokens('Radio', tokens, {
+      checked: isChecked
+    })
+    const { icon: IconComponent, ...iconTokens } = selectIconTokens(radioTokens)
     const themeTokens = validateThemeTokens(
-      resolveThemeTokens(tokens, { checked: isChecked }),
+      resolveThemeTokens(IconComponent ? radioTokens : tokens, {
+        checked: isChecked
+      }),
       getTokensSetPropType(tokenKeys),
       'RadioButton'
     )
 
+    const getCheckedInput = (checked) => {
+      if (!checked) return null
+      if (!IconComponent) {
+        return <View style={selectCheckedStyles(themeTokens)} testID={testID} />
+      }
+      return <IconComponent {...iconTokens} />
+    }
+
     return (
       <View style={selectOuterBorderStyles(themeTokens)} {...selectProps(rest)}>
         <View
-          style={[staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)]}
+          style={[
+            staticStyles.defaultInputStyles,
+            IconComponent
+              ? selectInputIconStyles(themeTokens, isChecked)
+              : selectInputStyles(themeTokens)
+          ]}
           testID="Radio-Input"
         >
           {/* Add a real input on Web, skip on native platforms */}
@@ -124,7 +176,7 @@ const RadioButton = forwardRef(
             name={inputName}
             value={value}
           />
-          {isChecked && <View style={selectCheckedStyles(themeTokens)} testID="Radio-Checked" />}
+          {getCheckedInput(isChecked)}
         </View>
       </View>
     )

package/src/Radio/RadioGroup.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'
 
@@ -73,7 +73,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const RadioGroup = forwardRef(
+const RadioGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -99,10 +99,31 @@ const RadioGroup = forwardRef(
   ) => {
     const viewport = useViewport()
 
-    const { space, fieldSpace } = useThemeTokens('RadioGroup', tokens, variant, {
+    /* showIcon passes a boolean to displayIcon
+     */
+    const {
+      space,
+      fieldSpace,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    } = useThemeTokens('RadioGroup', tokens, variant, {
       viewport
     })
 
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
     const { currentValue, setValue } = useInputValue({
       value: checkedId,
       initialValue: initialCheckedId,
@@ -110,7 +131,7 @@ const RadioGroup = forwardRef(
       readOnly: readOnly || inactive
     })
 
-    const uniqueFields = ['id', 'label']
+    const uniqueFields = ['id']
     if (!containUniqueFields(items, uniqueFields)) {
       throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`)
     }
@@ -156,7 +177,8 @@ const RadioGroup = forwardRef(
         inactive={inactive}
         validation={validation}
         showErrorBorder
-        showIcon
+        tokens={borderTokens}
+        showIcon={showIcon}
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >

package/src/Radio/RadioInput.jsx

@@ -1,11 +1,23 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
  * On Web we need to include an actual input but hide it.
  */
-const RadioInput = forwardRef(
-  ({ checked, defaultChecked, disabled, id, isControlled, name, onChange, value }, ref) => {
+const RadioInput = React.forwardRef(
+  (
+    {
+      checked,
+      defaultChecked,
+      disabled = false,
+      id = null,
+      isControlled = false,
+      name,
+      onChange = () => {},
+      value
+    },
+    ref
+  ) => {
     const handleClick = (event) => {
       // Cancel the click dispatched via the label tag, since it's already wrapped
       // in <Pressable>
@@ -43,15 +55,4 @@ RadioInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool])
 }
 
-RadioInput.defaultProps = {
-  checked: undefined,
-  defaultChecked: undefined,
-  disabled: false,
-  id: null,
-  isControlled: false,
-  name: undefined,
-  onChange: () => {},
-  value: undefined
-}
-
 export default RadioInput

package/src/RadioCard/RadioCard.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 
@@ -59,7 +59,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = forwardRef(
+const RadioCard = React.forwardRef(
   (
     {
       tokens,

package/src/RadioCard/RadioCardGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useViewport } from '../ViewportProvider'
@@ -74,7 +74,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * />
  * ```
  */
-const RadioCardGroup = forwardRef(
+const RadioCardGroup = React.forwardRef(
   (
     {
       copy = 'en',
@@ -99,10 +99,30 @@ const RadioCardGroup = forwardRef(
     ref
   ) => {
     const viewport = useViewport()
-    const { space, fieldSpace, direction } = useThemeTokens('RadioCardGroup', tokens, variant, {
+    const {
+      space,
+      fieldSpace,
+      direction,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    } = useThemeTokens('RadioCardGroup', tokens, variant, {
       viewport
     })
 
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
     const { currentValue, setValue } = useInputValue({
       value: checkedId,
       initialValue: initialCheckedId,
@@ -134,7 +154,8 @@ const RadioCardGroup = forwardRef(
         inactive={inactive || readOnly}
         validation={validation}
         showErrorBorder
-        showIcon
+        tokens={borderTokens}
+        showIcon={showIcon}
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >