@telus-uds/components-base 2.0.0 → 2.0.1

package/src/BaseProvider/HydrationContext.jsx

@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform } from 'react-native'
 
-const HydrationContext = createContext()
+const HydrationContext = React.createContext()
 const isSSR = typeof window === 'undefined'
 const hasWebStyleTag = () => {
   if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
@@ -18,15 +18,15 @@ const hasWebStyleTag = () => {
  * during the very first client-side render or hydration, but not available on the server,
  * to ensure no changes happen until the original SSR DOM has been hydrated.
  */
-export const useHydrationContext = () => useContext(HydrationContext)
+export const useHydrationContext = () => React.useContext(HydrationContext)
 
 /**
  * Allows components and hooks to observe if SSR hydration is currently in progress
  * and if so, to re-render with content that differs to the server when it is complete.
  */
 export const HydrationProvider = ({ children }) => {
-  const [hasMounted, setHasMounted] = useState(false)
-  useEffect(() => {
+  const [hasMounted, setHasMounted] = React.useState(false)
+  React.useEffect(() => {
     setHasMounted(true)
   }, [])
 

package/src/BaseProvider/index.jsx

@@ -6,7 +6,8 @@ import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
 import { HydrationProvider } from './HydrationContext'
 
-const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
+// eslint-disable-next-line no-unused-vars
+const BaseProvider = React.forwardRef(({ defaultTheme, children, themeOptions }, _) => (
   <HydrationProvider>
     <A11yInfoProvider>
       <ViewportProvider>
@@ -16,7 +17,9 @@ const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
       </ViewportProvider>
     </A11yInfoProvider>
   </HydrationProvider>
-)
+))
+
+BaseProvider.displayName = 'BaseProvider'
 
 BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,

package/src/Box/Box.jsx

@@ -1,18 +1,21 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { View, ScrollView } from 'react-native'
+import { View, ScrollView, Platform, StyleSheet, ImageBackground, Image } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getA11yPropsFromHtmlTag,
   getTokensPropType,
   layoutTags,
+  responsiveProps,
   selectSystemProps,
   spacingProps,
+  useResponsiveProp,
   useSpacingScale,
   variantProp,
   viewProps
 } from '../utils'
+import backgroundImageStylesMap from './backgroundImageStylesMap'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -23,31 +26,96 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = (tokens) => {
-  let styles = { backgroundColor: tokens.backgroundColor }
-  if (tokens.gradient) {
+const selectBoxStyles = (
+  {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  },
+  customGradient
+) => {
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
+  }
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens
-    styles = {
-      ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient
+
+    if (Platform.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`
+    } else if (customGradient && Platform.OS !== 'web') {
+      styles.colors = [stopOne.color, stopTwo.color]
     }
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
   // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach((side) => {
-    if (tokens[side]) {
-      styles[side] = tokens[side]
+    if (rest[side]) {
+      styles[side] = rest[side]
     }
   })
   return styles
 }
 
+const setBackgroundImage = ({
+  src,
+  alt,
+  backgroundImageResizeMode,
+  backgroundImagePosition,
+  backgroundImageAlign,
+  backgroundImageWidth,
+  backgroundImageHeight,
+  content
+}) => {
+  if (backgroundImageResizeMode === 'contain') {
+    const containedViewStyle = {
+      ...staticStyles.containedView,
+      width: backgroundImageWidth,
+      height: backgroundImageHeight,
+      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    }
+
+    return (
+      <View style={staticStyles.containedContainer}>
+        <View style={containedViewStyle}>
+          <Image
+            source={{ uri: src }}
+            alt={alt}
+            style={staticStyles.containedImage}
+            accessibilityIgnoresInvertColors
+          />
+        </View>
+        {content}
+      </View>
+    )
+  }
+  return (
+    <ImageBackground
+      source={{ uri: src }}
+      alt={alt}
+      style={staticStyles.backgroundImageContainer}
+      resizeMode={backgroundImageResizeMode}
+    >
+      {content}
+    </ImageBackground>
+  )
+}
+
 /**
  * A layout utility component. Use Box to create space (padding) around content.
  *
@@ -113,7 +181,7 @@ const selectBoxStyles = (tokens) => {
  * text content is inside a scrollable box, as screens are not scrollable by default and even very
  * short text will require scrolling on small devices at the highest accessibility text scaling settings.
  */
-const Box = forwardRef(
+const Box = React.forwardRef(
   (
     {
       space,
@@ -132,6 +200,8 @@ const Box = forwardRef(
       accessibilityRole,
       testID,
       dataSet,
+      customGradient,
+      backgroundImage,
       ...rest
     },
     ref
@@ -149,21 +219,55 @@ const Box = forwardRef(
       paddingRight: useSpacingScale(right),
       paddingTop: useSpacingScale(top),
       paddingBottom: useSpacingScale(bottom),
-      ...selectBoxStyles(themeTokens)
+      ...selectBoxStyles(themeTokens, customGradient)
     }
 
+    let content = children
+    if (typeof customGradient === 'function')
+      content = customGradient(styles.colors, styles)(children)
+
+    const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
+    const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
+    const backgroundImagePosition = useResponsiveProp(position, 'none')
+    const backgroundImageAlign = useResponsiveProp(align, 'stretch')
+    const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0)
+    const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0)
+    if (backgroundImage)
+      content = setBackgroundImage({
+        src,
+        alt,
+        backgroundImageResizeMode,
+        backgroundImagePosition,
+        backgroundImageAlign,
+        backgroundImageWidth,
+        backgroundImageHeight,
+        content
+      })
+
+    React.useEffect(() => {
+      if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+        Image.getSize(src, (width, height) => {
+          // Only update the state if the size has changed
+          if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
+            setBackgroundImageWidth(width)
+            setBackgroundImageHeight(height)
+          }
+        })
+      }
+    }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src])
+
     if (scroll) {
       const scrollProps = typeof scroll === 'object' ? scroll : {}
       scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
       return (
         <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSet} ref={ref}>
-          {children}
+          {content}
         </ScrollView>
       )
     }
     return (
       <View {...props} style={styles} testID={testID} dataSet={dataSet} ref={ref}>
-        {children}
+        {content}
       </View>
     )
   }
@@ -253,7 +357,45 @@ Box.propTypes = {
   /**
    * Box accepts any content as children.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: PropTypes.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    ),
+    position: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])
+    ),
+    align: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
+    )
+  })
 }
 
 export default Box
+
+const staticStyles = StyleSheet.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+})

package/src/Box/backgroundImageStylesMap.js

@@ -0,0 +1,21 @@
+export default {
+  'top-start': { top: 0 },
+  'top-center': { left: 0, right: 0, marginHorizontal: 'auto' },
+  'top-end': { top: 0, right: 0 },
+  'right-start': { top: 0, right: 0 },
+  'left-start': { top: 0 },
+  'left-center': { top: 0, bottom: 0, marginVertical: 'auto' },
+  'none-start': { top: 0, bottom: 0, marginVertical: 'auto' },
+  'none-center': { top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' },
+  'right-center': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'none-end': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'bottom-start': { bottom: 0, left: 0 },
+  'left-end': { bottom: 0, left: 0 },
+  'bottom-center': { left: 0, right: 0, bottom: 0, marginHorizontal: 'auto' },
+  'bottom-end': { right: 0, bottom: 0 },
+  'right-end': { right: 0, bottom: 0 },
+  'top-stretch': { left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { left: 0, right: 0, bottom: 0, width: '100%' }
+}

package/src/Button/Button.jsx

@@ -1,16 +1,21 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/props'
+import { useViewport } from '../ViewportProvider'
 
-const Button = forwardRef(({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  return (
-    <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
-  )
-})
+const Button = React.forwardRef(
+  ({ accessibilityRole = 'button', tokens, variant, ...props }, ref) => {
+    const viewport = useViewport()
+    const buttonVariant = { viewport, ...variant }
+    const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+    return (
+      <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} ref={ref} />
+    )
+  }
+)
 Button.displayName = 'Button'
 
 Button.propTypes = {

package/src/Button/ButtonBase.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
@@ -30,7 +30,6 @@ const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
 const selectOuterContainerStyles = ({
-  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -38,7 +37,11 @@ const selectOuterContainerStyles = ({
   borderRadius,
   outerBackgroundColor
 }) => ({
-  alignSelf,
+  ...Platform.select({
+    native: {
+      alignSelf: 'flex-start'
+    }
+  }),
   backgroundColor: outerBackgroundColor,
   opacity,
   ...applyOuterBorder({
@@ -49,15 +52,21 @@ const selectOuterContainerStyles = ({
   })
 })
 
-const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) => {
+const selectOuterSizeStyles = ({ outerBorderGap, outerBorderWidth, width, height }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
-  const widthStyles = {}
+  const sizeStyles = {}
+  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
+  if ((typeof width === 'number' && width > 0) || (typeof height === 'number' && height > 0)) {
+    sizeStyles.width = width ? width + outerBorderOffset * 2 : width
+    sizeStyles.height = height ? height + outerBorderOffset * 2 : height
+    return sizeStyles
+  }
 
   if (!width) {
     return {
-      ...widthStyles,
+      ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
@@ -66,26 +75,23 @@ const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) =>
     }
   }
 
-  // Apply width tokens: number === pixels, string === explicit units e.g. %
-  if (typeof width === 'number') {
-    widthStyles.width = width + outerBorderOffset * 2
-    return widthStyles
-  }
-
   // Ensure the negative margin doesn't make element off-centre
   if (Platform.OS === 'web') {
-    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`
-    return widthStyles
+    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`
+    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`
+    return sizeStyles
   }
   // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
   if (width === '100%') {
-    widthStyles.flexGrow = 1
-    return widthStyles
+    sizeStyles.flexGrow = 1
+    return sizeStyles
   }
+
   // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
   // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
-  widthStyles.width = width
-  return widthStyles
+  sizeStyles.width = width
+  sizeStyles.height = height
+  return sizeStyles
 }
 
 const selectInnerContainerStyles = ({
@@ -96,30 +102,46 @@ const selectInnerContainerStyles = ({
   paddingBottom,
   shadow,
   borderWidth,
+  borderLeftWidth,
+  borderRightWidth,
+  borderTopWidth,
+  borderBottomWidth,
   minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = (value) =>
-    typeof value === 'number' && typeof borderWidth === 'number'
-      ? Math.max(0, value - borderWidth)
+  const offsetBorder = ({ value, borderSize = borderWidth }) =>
+    typeof value === 'number' && typeof borderSize === 'number'
+      ? Math.max(0, value - borderSize)
       : value
 
   return {
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
+    paddingLeft: offsetBorder({ value: paddingLeft, borderSize: borderLeftWidth }),
+    paddingRight: offsetBorder({ value: paddingRight, borderSize: borderRightWidth }),
+    paddingTop: offsetBorder({ value: paddingTop, borderSize: borderTopWidth }),
+    paddingBottom: offsetBorder({ value: paddingBottom, borderSize: borderBottomWidth }),
     backgroundColor,
     minWidth,
     ...applyShadowToken(shadow)
   }
 }
 
-const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
+const selectBorderStyles = ({
+  borderColor,
+  borderWidth,
+  borderRadius,
+  borderLeftWidth,
+  borderRightWidth,
+  borderTopWidth,
+  borderBottomWidth
+}) => ({
   borderColor,
   borderWidth,
-  borderRadius
+  borderRadius,
+  borderLeftWidth,
+  borderRightWidth,
+  borderTopWidth,
+  borderBottomWidth
 })
 
 const selectTextStyles = (
@@ -143,6 +165,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none', // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)
     },
@@ -150,12 +173,19 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
+const selectButtonStyles = ({ textAlign }) => {
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  }
+}
+
 const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   size: iconSize,
   color: iconColor || color
 })
 
-const ButtonBase = forwardRef(
+const ButtonBase = React.forwardRef(
   (
     {
       id,
@@ -186,7 +216,7 @@ const ButtonBase = forwardRef(
         staticStyles.row,
         selectWebOnlyStyles(inactive, themeTokens, systemProps),
         selectOuterContainerStyles(themeTokens),
-        selectOuterWidthStyles(themeTokens)
+        selectOuterSizeStyles(themeTokens)
       ]
     }
     const { themeOptions } = useTheme()
@@ -205,7 +235,15 @@ const ButtonBase = forwardRef(
           const themeTokens = resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
-          const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]
+          const textStyles = [
+            selectTextStyles(themeTokens, themeOptions),
+            staticStyles.text,
+            Platform.select({
+              web: {
+                pointerEvents: 'none' // bubbles press event to parent `Pressable`
+              }
+            })
+          ]
           const iconTokens = selectItemIconTokens(themeTokens)
           const { iconSpace } = themeTokens
 
@@ -214,6 +252,8 @@ const ButtonBase = forwardRef(
           const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
           const IconComponent = icon || themeTokens.icon
 
+          const rowStyles = selectButtonStyles(themeTokens)
+
           return (
             <View
               id={id}
@@ -226,7 +266,9 @@ const ButtonBase = forwardRef(
                   web: {
                     maxWidth: '100%', // ensure overflowing content wraps
                     // TODO: https://github.com/telus/universal-design-system/issues/487
-                    transition: 'background-color 200ms, border-color 200ms'
+                    transition: 'background-color 200ms, border-color 200ms',
+                    pointerEvents: 'none', // bubbles press event to parent `Pressable`
+                    ...rowStyles
                   }
                 })
               ]}
@@ -234,7 +276,7 @@ const ButtonBase = forwardRef(
               <IconText
                 icon={IconComponent}
                 iconPosition={iconPosition}
-                space={iconSpace}
+                space={icon ? iconSpace : 0}
                 iconProps={{ ...iconProps, tokens: iconTokens }}
               >
                 {wrapStringsInText(
@@ -261,15 +303,14 @@ ButtonBase.propTypes = {
   ...selectedSystemPropTypes,
   ...buttonPropTypes
 }
-ButtonBase.defaultProps = { id: undefined }
 
 const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   text: {
-    flexGrow: 1, // On native but not web, flexShrink here wraps text prematurely
     ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: { transition: 'color 200ms' }

package/src/Button/ButtonDropdown.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, Text, View } from 'react-native'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
@@ -6,6 +6,7 @@ import ButtonBase from './ButtonBase'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  getTokensPropType,
   focusHandlerProps,
   resolvePressableState,
   selectTokens,
@@ -49,7 +50,7 @@ const selectIconTokens = ({
   }
 })
 
-const ButtonDropdown = forwardRef(
+const ButtonDropdown = React.forwardRef(
   (
     {
       value,
@@ -153,6 +154,8 @@ ButtonDropdown.propTypes = {
   ...focusHandlerProps.types,
   ...buttonPropTypes,
   children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
+
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */