@telus-uds/components-base 1.86.0 → 1.87.0

package/lib-module/utils/props/tokens.js

@@ -105,7 +105,7 @@ export const getTokensPropType = function () {
  * For example, for a set of tokens used in a common style, or for a set of tokens required by
  * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
  *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ * By default, requires an object with a complete set of tokens (allowing `null` and `undefined`).
  *
  * @param {string[]} componentTokenKeys - array of strings of token names
  * @param {object} [options]
@@ -124,7 +124,7 @@ export const getTokensSetPropType = function (componentTokenKeys) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
       args[_key2 - 2] = arguments[_key2];
     }
-    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
+    return props[propName] !== null && props[propName] !== undefined && tokenValueType.isRequired(props, propName, ...args);
   }])));
   return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
 };

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.57.0",
+    "@telus-uds/system-theme-tokens": "^2.58.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.86.0",
+  "version": "1.87.0",
   "types": "types/index.d.ts"
 }

package/src/ActionCard/ActionCard.jsx

@@ -0,0 +1,306 @@
+import React from 'react'
+import { Animated, View, StyleSheet, Text } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText,
+  clickProps,
+  hrefAttrsProp,
+  linkProps
+} from '../utils'
+import Icon from '../Icon'
+import Card from '../Card'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
+const selectCardStyles = (styles) =>
+  ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
+    if (styles[key]) acc[key] = styles[key]
+    return acc
+  }, {})
+
+const selectInteractiveCardStyles = ({
+  backgroundColor,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+}) => ({
+  ...(backgroundColor && { backgroundColor }),
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop
+})
+
+const selectIconStyles = ({
+  iconMarginBottom,
+  iconMarginLeft,
+  iconMarginRight,
+  iconMarginTop
+}) => ({
+  marginBottom: iconMarginBottom,
+  marginLeft: iconMarginLeft,
+  marginRight: iconMarginRight,
+  marginTop: iconMarginTop
+})
+
+const selectIconProps = ({ icon, iconBackgroundColor, iconColor }) => ({
+  icon,
+  variant: { background: true, padding: 'small' },
+  tokens: { backgroundColor: iconBackgroundColor, color: iconColor }
+})
+
+const selectTitleStyles = ({
+  titleMarginBottom,
+  titleMarginLeft,
+  titleMarginRight,
+  titleMarginTop
+}) => ({
+  marginBottom: titleMarginBottom,
+  marginLeft: titleMarginLeft,
+  marginRight: titleMarginRight,
+  marginTop: titleMarginTop
+})
+
+const selectTitleTextStyles = ({
+  titleFontColor,
+  titleFontName,
+  titleFontSize,
+  titleFontWeight,
+  titleLineHeight
+}) =>
+  applyTextStyles({
+    fontColor: titleFontColor,
+    fontName: titleFontName,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  })
+
+const selectContentStyles = ({
+  contentMarginBottom,
+  contentMarginLeft,
+  contentMarginRight,
+  contentMarginTop
+}) => ({
+  marginBottom: contentMarginBottom,
+  marginLeft: contentMarginLeft,
+  marginRight: contentMarginRight,
+  marginTop: contentMarginTop
+})
+
+const selectContentTextStyles = ({
+  contentFontColor,
+  contentFontName,
+  contentFontSize,
+  contentFontWeight,
+  contentLineHeight
+}) =>
+  applyTextStyles({
+    fontColor: contentFontColor,
+    fontName: contentFontName,
+    fontSize: contentFontSize,
+    fontWeight: contentFontWeight,
+    lineHeight: contentLineHeight
+  })
+
+const selectStatusIconProps = ({ statusIcon, statusIconColor }) => ({
+  icon: statusIcon,
+  tokens: { color: statusIconColor },
+  variant: { size: 'micro' }
+})
+
+const selectActionIconStyles = ({
+  actionIconMarginBottom,
+  actionIconMarginLeft,
+  actionIconMarginRight,
+  actionIconMarginTop
+}) => ({
+  marginBottom: actionIconMarginBottom,
+  marginLeft: actionIconMarginLeft,
+  marginRight: actionIconMarginRight,
+  marginTop: actionIconMarginTop
+})
+
+const selectActionIconProps = ({ actionIcon, actionIconColor }) => ({
+  icon: actionIcon,
+  tokens: { color: actionIconColor }
+})
+
+const ACTION_ICON_ANIMATION_DURATION = 100
+
+/**
+ * ActionCard component represents a card with an action that can be triggered by the user.
+ *
+ * @component
+ * @example
+ * return (
+ *   <ActionCard
+ *     icon={<Icon icon={Icons.EyeMasked} />}
+ *     title="Like"
+ *     href="/like"
+ *     accessibilityRole="link"
+ *     tokens={themeTokens}
+ *     variant={{validation: 'warning'}}
+ *     onPress={() => handleLike()}
+ *   >
+ *    Click here to like the post
+ *   </ActionCard>
+ * )
+ */
+const ActionCard = React.forwardRef(
+  (
+    { icon, title, children, href, direction = true, accessibilityRole, tokens, variant, ...rest },
+    ref
+  ) => {
+    const themeTokens = useThemeTokens('ActionCard', tokens, variant)
+
+    const actionIconAnimation = React.useRef(new Animated.Value(0)).current
+
+    const { onPress, ...props } = clickProps.toPressProps(rest)
+    const { hrefAttrs, rawRest } = hrefAttrsProp.bundle(props)
+    const selectedProps = selectProps({
+      accessibilityRole,
+      href,
+      onPress: linkProps.handleHref({ href, onPress }),
+      hrefAttrs,
+      ...rawRest
+    })
+
+    return (
+      <Card
+        ref={ref}
+        interactiveCard={{
+          body: (pressableState) => {
+            const animate = pressableState.pressed || pressableState.hover || pressableState.focus
+            Animated.timing(actionIconAnimation, {
+              toValue: animate ? themeTokens.actionIconTranslate : 0,
+              duration: ACTION_ICON_ANIMATION_DURATION,
+              useNativeDriver: false
+            }).start()
+
+            return (
+              <View style={staticStyles.container}>
+                {icon && (
+                  <View style={selectIconStyles(themeTokens)}>
+                    <Icon
+                      {...selectIconProps({
+                        icon,
+                        ...themeTokens
+                      })}
+                    />
+                  </View>
+                )}
+                <View style={staticStyles.content}>
+                  <View style={staticStyles.header}>
+                    <View style={[selectTitleStyles(themeTokens), staticStyles.title]}>
+                      <Text>
+                        {wrapStringsInText(title, { style: selectTitleTextStyles(themeTokens) })}
+                        {themeTokens.statusIcon && (
+                          <View style={staticStyles.statusIcon}>
+                            <Icon {...selectStatusIconProps(themeTokens)} />
+                          </View>
+                        )}
+                      </Text>
+                    </View>
+                    <View style={staticStyles.icons}>
+                      {direction && (
+                        <Animated.View
+                          style={[
+                            selectActionIconStyles(themeTokens),
+                            { transform: [{ translateX: actionIconAnimation }] }
+                          ]}
+                        >
+                          <Icon {...selectActionIconProps(themeTokens)} />
+                        </Animated.View>
+                      )}
+                    </View>
+                  </View>
+                  <View style={[staticStyles.body, selectContentStyles(themeTokens)]}>
+                    {typeof children === 'string'
+                      ? wrapStringsInText(children, {
+                          style: selectContentTextStyles(themeTokens)
+                        })
+                      : children}
+                  </View>
+                </View>
+              </View>
+            )
+          },
+          tokens: selectInteractiveCardStyles(themeTokens)
+        }}
+        tokens={selectCardStyles(themeTokens)}
+        {...selectedProps}
+      />
+    )
+  }
+)
+
+ActionCard.displayName = 'ActionCard'
+
+ActionCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('ActionCard'),
+  variant: variantProp.propType,
+  /**
+   * Icon for the ActionCard
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Title for the ActionCard
+   */
+  title: PropTypes.string,
+  /**
+   * Children for the ActionCard
+   */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+  /**
+   * href for the ActionCard
+   */
+  href: PropTypes.string,
+  /**
+   * Enable or disable the direction of the ActionCard
+   */
+  direction: PropTypes.bool,
+  /**
+   * AccesibilityRole for the ActionCard
+   */
+  accessibilityRole: PropTypes.string
+}
+
+const staticStyles = StyleSheet.create({
+  body: {
+    flexDirection: 'column'
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'column'
+  },
+  icons: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  title: {
+    flexShrink: 1
+  },
+  statusIcon: {
+    marginLeft: 4
+  }
+})
+
+export default ActionCard

package/src/ActionCard/index.js

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

package/src/Card/Card.jsx

@@ -9,13 +9,13 @@ import {
 } 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 } 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 [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, linkProps])
 
 const SelectionType = {
   Checkbox: 'checkbox',
@@ -253,7 +253,9 @@ const Card = React.forwardRef(
                           onPress
                         })
                       )}
-                      {interactiveCard?.body}
+                      {typeof interactiveCard?.body === 'function'
+                        ? interactiveCard.body(cardState)
+                        : interactiveCard.body}
                     </>
                   )
                 }}
@@ -304,7 +306,7 @@ Card.propTypes = {
    * - variant: The variant to be used for the interactive card
    */
   interactiveCard: PropTypes.shape({
-    body: PropTypes.node,
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     selectionType: PropTypes.oneOf(Object.values(SelectionType)),
     variant: variantProp.propType

package/src/Card/PressableCardBase.jsx

@@ -135,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
 }
 

package/src/Checkbox/Checkbox.jsx

@@ -192,6 +192,7 @@ const Checkbox = React.forwardRef(
             onKeyDown={handleKeyDown}
             onPress={handleChange}
             {...selectedProps}
+            style={staticStyles.removeOutline}
           >
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
@@ -311,5 +312,6 @@ const staticStyles = StyleSheet.create({
   wrapper: { backgroundColor: 'transparent' },
   container: { flexDirection: 'row', alignItems: 'center' },
   defaultInputStyles: { alignItems: 'center', justifyContent: 'center' },
-  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },
+  removeOutline: { outlineStyle: 'none' }
 })

package/src/List/List.jsx

@@ -41,20 +41,25 @@ const List = React.forwardRef(
       return child
     })
 
-    return (
+    const content = (
       <View
-        ref={ref}
         style={styles.list}
         accessibilityRole={accessibilityRole}
+        ref={ref}
         {...selectProps(rest)}
       >
         {items}
       </View>
     )
+
+    return Platform.OS === 'web' ? <div style={styles.container}>{content}</div> : content
   }
 )
 
 const styles = StyleSheet.create({
+  container: {
+    display: 'block'
+  },
   list: {
     flex: 1,
     flexShrink: 1

package/src/Modal/WebModal.jsx

@@ -62,7 +62,8 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexBasis: 0,
     zIndex: 1000,
-    display: 'flex'
+    display: 'flex',
+    overflowY: 'auto'
   }
 })
 

package/src/Notification/Notification.jsx

@@ -61,14 +61,24 @@ const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({
 
 const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   paddingLeft: dismissButtonGap,
-  placeContent: 'center'
+  placeContent: 'start'
 })
 
-const selectContentContainerStyle = (maxWidth) => ({
-  maxWidth: maxWidth || '100%'
+const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  paddingRight: themeTokens?.containerPaddingRight,
+  paddingLeft: themeTokens?.containerPaddingLeft
 })
 
-const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+const getMediaQueryStyles = (
+  themeTokens,
+  themeOptions,
+  mediaIdsRef,
+  dismissible,
+  viewport,
+  system
+) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
       acc[vp] = selectContainerStyles({ ...viewportTokens })
@@ -80,7 +90,10 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
   const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles)
 
   const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
-    container: { flexDirection: 'row', ...selectContainerMediaQueryStyles }
+    container: {
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      ...selectContainerMediaQueryStyles
+    }
   })
 
   const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
@@ -89,11 +102,11 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
       flexShrink: 1,
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
-        xs: { width: themeOptions?.contentMaxWidth.xs || '100%' },
-        md: { width: themeOptions?.contentMaxWidth.md || '100%' },
-        lg: { width: themeOptions?.contentMaxWidth.lg || '100%' },
-        sm: { width: themeOptions?.contentMaxWidth.sm || '100%' },
-        xl: { width: themeOptions?.contentMaxWidth.xl || '100%' }
+        xs: { width: themeOptions?.contentMaxWidth?.xs || '100%' },
+        md: { width: themeOptions?.contentMaxWidth?.md || '100%' },
+        lg: { width: themeOptions?.contentMaxWidth?.lg || '100%' },
+        sm: { width: themeOptions?.contentMaxWidth?.sm || '100%' },
+        xl: { width: themeOptions?.contentMaxWidth?.xl || '100%' }
       })
     }
   })
@@ -146,16 +159,20 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
   }
 }
 
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
-    container: { flexDirection: 'row', ...selectContainerStyles(themeTokens) }
+    container: {
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      ...selectContainerStyles(themeTokens)
+    }
   },
   contentContainerStyles: {
     contentContainer: {
+      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(maxWidth)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
     }
   },
   staticContentContainerStyles: {
@@ -260,16 +277,19 @@ const Notification = React.forwardRef(
       notificationComponentRef.current = getMediaQueryStyles(
         themeTokens,
         themeOptions,
-        viewport,
         mediaIdsRef,
-        dismissible
+        dismissible,
+        viewport,
+        system
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
         themeTokens,
         themeOptions,
         maxWidth,
-        dismissible
+        dismissible,
+        viewport,
+        system
       )
     }
 

package/src/Radio/Radio.jsx

@@ -173,6 +173,7 @@ const Radio = React.forwardRef(
         onKeyDown={handleKeyDown}
         onPress={handleChange}
         {...selectedProps}
+        style={staticStyles.removeOutline}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
@@ -278,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/Tabs/Tabs.jsx

@@ -124,6 +124,7 @@ const Tabs = React.forwardRef(
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
                 linkRouterProps: itemLinkRouterProps,
+                render,
                 ...itemRest
               },
               index
@@ -151,6 +152,7 @@ const Tabs = React.forwardRef(
                   accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                  render={render}
                   {...itemProps}
                 >
                   {label}
@@ -178,7 +180,8 @@ Tabs.propTypes = {
       href: PropTypes.string,
       label: PropTypes.string,
       id: PropTypes.string,
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.ref(),
+      render: PropTypes.func
     })
   ),
   /**

package/src/Tabs/TabsItem.jsx

@@ -92,6 +92,7 @@ const TabsItem = React.forwardRef(
         : undefined,
       accessibilityState = accessibilityRole === 'tab' ? { selected } : undefined,
       id,
+      render,
       ...rawRest
     },
     ref
@@ -144,6 +145,8 @@ const TabsItem = React.forwardRef(
       // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
     }, [selected, index, itemPositions])
 
+    if (render) return render({ selected, handlePress })
+
     return (
       <Pressable
         ref={ref}
@@ -202,7 +205,8 @@ TabsItem.propTypes = {
   selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
   children: PropTypes.string,
-  id: PropTypes.string
+  id: PropTypes.string,
+  render: PropTypes.func
 }
 
 const staticStyles = StyleSheet.create({

package/src/index.js

@@ -1,4 +1,5 @@
 export { default as A11yText } from './A11yText'
+export { default as ActionCard } from './ActionCard'
 export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Autocomplete } from './Autocomplete'
 export { default as Box } from './Box'

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -53,8 +53,8 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
 
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (Platform.OS === 'web') {
-      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
-      containerStyles.visibility = 'hidden'
+      // Without `display: 'none', descendents are focusable on web even when collapsed.
+      containerStyles.display = 'none'
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
@@ -68,7 +68,7 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
       // this won't work on native platforms
       containerStyles.height = 0
-      containerStyles.visibility = 'hidden'
+      containerStyles.display = 'none'
     }
   } else if (Platform.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration

package/src/utils/props/tokens.js

@@ -122,7 +122,7 @@ export const getTokensPropType =
  * For example, for a set of tokens used in a common style, or for a set of tokens required by
  * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
  *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ * By default, requires an object with a complete set of tokens (allowing `null` and `undefined`).
  *
  * @param {string[]} componentTokenKeys - array of strings of token names
  * @param {object} [options]
@@ -142,7 +142,9 @@ export const getTokensSetPropType = (
           ? tokenValueType
           : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
             (props, propName, ...args) =>
-              props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)
+              props[propName] !== null &&
+              props[propName] !== undefined &&
+              tokenValueType.isRequired(props, propName, ...args)
       ])
     )
   )