@telus-uds/components-base 2.0.0 → 2.0.1

package/src/ColourToggle/ColourBubble.jsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View, Pressable, Platform } from 'react-native'
+import { resolvePressableTokens } from '../utils/pressability'
+import { applyShadowToken } from '../ThemeProvider'
+import { getTokensPropType } from '../utils'
+
+const selectGeneralBubbleTokens = ({
+  outerBubbleHeight,
+  outerBubbleWidth,
+  outerBubbleContentAlignItems,
+  outerBubbleJustifyContent,
+  bubbleBorderColor,
+  bubbleBorderWidth,
+  bubbleBorderRadius
+}) => ({
+  height: outerBubbleHeight,
+  width: outerBubbleWidth,
+  justifyContent: outerBubbleContentAlignItems,
+  alignItems: outerBubbleJustifyContent,
+  borderColor: bubbleBorderColor,
+  borderWidth: bubbleBorderWidth,
+  borderRadius: bubbleBorderRadius,
+  ...Platform.select({ web: { outline: 'none' } })
+})
+
+const selectInnerBubbleTokens = ({
+  innerBubbleHeight,
+  innerBubbleWidth,
+  innerBubbleBorderRadius,
+  borderColor,
+  borderWidth,
+  shadow
+}) => ({
+  height: innerBubbleHeight,
+  width: innerBubbleWidth,
+  borderRadius: innerBubbleBorderRadius,
+  borderColor,
+  borderWidth,
+  ...applyShadowToken(shadow)
+})
+
+const selectBorderBubbleTokens = ({
+  bubbleBorderColor,
+  bubbleBorderWidth,
+  bubbleBorderRadius
+}) => ({
+  borderColor: bubbleBorderColor,
+  borderWidth: bubbleBorderWidth,
+  borderRadius: bubbleBorderRadius
+})
+
+const ColourBubble = React.forwardRef(
+  ({ tokens = {}, id, colourHexCode, colourName, isSelected, onPress }, ref) => {
+    const defaultTokens = tokens({ selected: isSelected })
+
+    const resolveColourBubbleTokens = (pressState) => resolvePressableTokens(tokens, pressState, {})
+
+    const themeTokens = React.useMemo(() => tokens(), [tokens])
+
+    return (
+      <Pressable
+        style={(state) => [
+          selectGeneralBubbleTokens(resolveColourBubbleTokens(state)),
+          isSelected && selectBorderBubbleTokens(defaultTokens)
+        ]}
+        onPress={onPress}
+        accessible
+        accessibilityRole="radio"
+        accessibilityLabel={colourName}
+        accessibilityState={{ checked: isSelected }}
+        ref={ref}
+        testID={id}
+      >
+        <View style={[selectInnerBubbleTokens(themeTokens), { backgroundColor: colourHexCode }]} />
+      </Pressable>
+    )
+  }
+)
+ColourBubble.displayName = 'ColourBubble'
+
+ColourBubble.propTypes = {
+  /**
+   * Colour toggle tokens callback.
+   */
+  tokens: getTokensPropType('ColourToggle'),
+  /**
+   * ID of each colour bubble
+   */
+  id: PropTypes.string,
+  /**
+   * Hexadecimal code for the background of the colour bubble
+   */
+  colourHexCode: PropTypes.string,
+  /**
+   * Name of the colour bubble
+   */
+  colourName: PropTypes.string,
+  /**
+   * If the current colour bubble is selected
+   */
+  isSelected: PropTypes.bool,
+  /**
+   * If provided, this function is called when the current selection
+   * of the color is changed of all currently `items`.
+   * Receives two parameters: item object selected and the event
+   */
+  onPress: PropTypes.func
+}
+
+export default ColourBubble

package/src/ColourToggle/ColourToggle.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { View } from 'react-native'
+import PropTypes from 'prop-types'
+
+import { useThemeTokensCallback } from '../ThemeProvider'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import { StackWrap } from '../StackView'
+import Typography from '../Typography'
+import ColourBubble from './ColourBubble'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const ColourToggle = React.forwardRef(
+  ({ tokens, variant, defaultColourId, items, onChange, ...rest }, ref) => {
+    const [currentColourId, setCurrentColourId] = React.useState(defaultColourId)
+    const getTokens = useThemeTokensCallback('ColourToggle', tokens, variant)
+
+    const { space } = getTokens()
+    const { colourName: currentColourName = '' } =
+      items.find((item) => item.id === currentColourId) || ''
+
+    return (
+      <View ref={ref} {...selectProps(rest)}>
+        <Typography>{currentColourName}</Typography>
+        <StackWrap space={space} accessibilityRole="radiogroup">
+          {items.map(({ id, colourHexCode, colourName }, index) => {
+            const colourBubbleId = id || `ColourBubble[${index}]`
+
+            const handleChangeColour = (event) => {
+              setCurrentColourId(id)
+              onChange?.(event, { id, colourHexCode, colourName })
+            }
+
+            return (
+              <ColourBubble
+                key={colourBubbleId}
+                id={colourBubbleId}
+                tokens={getTokens}
+                isSelected={id === currentColourId}
+                colourHexCode={colourHexCode}
+                colourName={colourName}
+                onPress={handleChangeColour}
+              />
+            )
+          })}
+        </StackWrap>
+      </View>
+    )
+  }
+)
+ColourToggle.displayName = 'ColourToggle'
+
+ColourToggle.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Optional theme token overrides for the outer ColourToggle component
+   */
+  tokens: getTokensPropType('ColourToggle'),
+  /**
+   * Colour toggle variant.
+   */
+  variant: variantProp.propType,
+  /**
+   * Id of the selected color when component mounts
+   */
+  defaultColourId: PropTypes.string,
+  /**
+   * Array of objects containing specifics for each ColourBubble to be rendered in the group.
+   */
+  items: PropTypes.arrayOf(
+    PropTypes.exact({
+      colourHexCode: PropTypes.string,
+      colourName: PropTypes.string,
+      id: PropTypes.string
+    })
+  ),
+  /**
+   * If provided, this function is called when the current selection of the color is changed of all currently `items`. Receives two parameters: item object selected and the event
+   */
+  onChange: PropTypes.func
+}
+
+export default ColourToggle

package/src/ColourToggle/index.js

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

package/src/Divider/Divider.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet, Platform } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
@@ -55,7 +55,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = forwardRef(({ variant, vertical = false, space, tokens, ...rest }, ref) => {
+const Divider = React.forwardRef(({ variant, vertical = false, space, tokens, ...rest }, ref) => {
   const { color, width } = useThemeTokens('Divider', tokens, variant)
 
   const borderStyles = vertical
@@ -101,6 +101,9 @@ Divider.displayName = 'Divider'
 Divider.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Divider'),
+  /**
+   * A number referring to a position on the space scale to create space on either side of the divider
+   */
   space: spacingProps.types.spacingValue,
   variant: variantProp.propType,
   /**

package/src/DownloadApp/DownloadApp.jsx

@@ -0,0 +1,165 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Platform, StyleSheet } from 'react-native'
+import {
+  a11yProps,
+  linkProps,
+  hrefAttrsProp,
+  viewProps,
+  getTokensPropType,
+  resolvePressableTokens,
+  variantProp,
+  copyPropTypes,
+  selectSystemProps,
+  useCopy
+} from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import defaultDictionary from './dictionary'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
+const selectOuterStyles = ({ borderColor, borderWidth, borderGap, borderRadius, padding }) => ({
+  outline: 'none',
+  borderColor,
+  borderWidth,
+  borderGap,
+  borderRadius,
+  padding
+})
+
+const DownloadApp = React.forwardRef(
+  (
+    {
+      copy = 'en',
+      dictionary = defaultDictionary,
+      type = 'ios',
+      href,
+      onPress,
+      tokens = {},
+      variant = {},
+      ...props
+    },
+    ref
+  ) => {
+    const getCopy = useCopy({ dictionary, copy })
+    const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
+
+    const selectedProps = selectProps({
+      accessibilityRole: href ? 'link' : 'button',
+      href,
+      onPress: linkProps.handleHref({ href, onPress }),
+      hrefAttrs,
+      ...rest
+    })
+
+    const getDownloadAppTokens = useThemeTokensCallback('DownloadApp', tokens, variant)
+    const resolveDownloadAppTokens = (pressableState) => {
+      const themeTokens = resolvePressableTokens(getDownloadAppTokens, pressableState, {})
+      return selectOuterStyles(themeTokens)
+    }
+
+    const { androidENIcon, androidFRIcon, iosENIcon, iosFRIcon } = getDownloadAppTokens()
+
+    const imageResources = {
+      en: {
+        android: androidENIcon,
+        ios: iosENIcon
+      },
+      fr: {
+        android: androidFRIcon,
+        ios: iosFRIcon
+      }
+    }
+    const IconComponent = imageResources[copy][type]
+
+    return (
+      <Pressable
+        ref={ref}
+        style={(pressState) => [resolveDownloadAppTokens(pressState), staticStyles.row]}
+        {...selectedProps}
+      >
+        <IconComponent
+          style={staticImageSizes[type][copy]}
+          alt={type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')}
+        />
+      </Pressable>
+    )
+  }
+)
+DownloadApp.displayName = 'DownloadApp'
+
+const dictionaryContentShape = PropTypes.shape({
+  altTextAndroid: PropTypes.string.isRequired,
+  altTextIos: PropTypes.string.isRequired
+})
+
+DownloadApp.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Select the type of image to show.
+   */
+  type: PropTypes.oneOf(['android', 'ios']),
+  /**
+   * It's a simple link that opens the Download Button instead of the onPress function.
+   */
+  href: PropTypes.string,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: PropTypes.func,
+  /**
+   * DownloadApp tokens.
+   */
+  tokens: getTokensPropType('DownloadApp'),
+  /**
+   * DownloadApp variant.
+   */
+  variant: variantProp.propType
+}
+
+const staticStyles = StyleSheet.create({
+  row: {
+    ...Platform.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        alignSelf: 'flex-start'
+      }
+    })
+  }
+})
+
+const staticImageSizes = {
+  android: {
+    en: {
+      width: 162,
+      height: 48
+    },
+    fr: {
+      width: 162,
+      height: 48
+    }
+  },
+  ios: {
+    en: {
+      width: 144,
+      height: 48
+    },
+    fr: {
+      width: 152,
+      height: 48
+    }
+  }
+}
+
+export default DownloadApp

package/src/DownloadApp/dictionary.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    altTextAndroid: 'Get it on Google Play',
+    altTextIos: 'Download on the App Store'
+  },
+  fr: {
+    altTextAndroid: 'Disponible sur Google Play',
+    altTextIos: 'Télécharger dans l’App Store'
+  }
+}

package/src/DownloadApp/index.js

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

package/src/ExpandCollapse/Accordion.jsx

@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import ExpandCollapse from './ExpandCollapse'
 
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
-const Accordion = forwardRef((props, ref) => <ExpandCollapse ref={ref} {...props} maxOpen={1} />)
+const Accordion = React.forwardRef((props, ref) => (
+  <ExpandCollapse ref={ref} {...props} maxOpen={1} />
+))
 Accordion.displayName = 'Accordion'
 Accordion.propTypes = ExpandCollapse.propTypes
 

package/src/ExpandCollapse/Control.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
-import { Pressable, View } from 'react-native'
+import React from 'react'
+import { Pressable, View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider'
@@ -11,25 +11,34 @@ function selectContainerStyles({
   backgroundColor,
   borderColor,
   borderWidth,
-  borderStyle,
+  borderStyle = 'solid',
   paddingLeft,
   paddingRight,
   paddingTop,
   paddingBottom,
   justifyContent,
   verticalAlign,
-  iconPosition
+  iconPosition,
+  borderTopRightRadius,
+  borderBottomRightRadius,
+  borderTopLeftRadius,
+  borderBottomLeftRadius
 }) {
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...verticalAlignRow(verticalAlign, iconPosition === 'right')
   }
 }
@@ -43,6 +52,13 @@ function selectIconContainerStyles({ iconGap, iconPaddingTop, iconPosition }) {
   }
 }
 
+function selectTextContainerStyles({ textLine }) {
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  }
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -50,7 +66,7 @@ function selectIconTokens(tokens) {
   }
 }
 
-const ExpandCollapseControl = forwardRef(
+const ExpandCollapseControl = React.forwardRef(
   (
     { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
     ref
@@ -73,8 +89,10 @@ const ExpandCollapseControl = forwardRef(
       expanded: isExpanded
     })
     const getControlTokens = (pressableState) => getTokens(getControlState(pressableState))
-    const getPressableStyle = (pressableState) =>
-      selectContainerStyles(getControlTokens(pressableState))
+    const getPressableStyle = (pressableState) => ({
+      ...selectContainerStyles(getControlTokens(pressableState)),
+      ...(Platform.OS === 'web' ? { outline: 'none' } : {})
+    })
 
     return (
       <Pressable ref={ref} {...selectedProps} onPress={onPress} style={getPressableStyle}>
@@ -83,13 +101,19 @@ const ExpandCollapseControl = forwardRef(
           return (
             <>
               {IconComponent && (
-                <View style={selectIconContainerStyles(themeTokens)}>
+                <View
+                  style={[selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+                >
                   <IconComponent {...selectIconTokens(themeTokens)} />
                 </View>
               )}
-              {typeof children === 'function'
-                ? children(getControlState(pressableState))
-                : children}
+              <View
+                style={[selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents]}
+              >
+                {typeof children === 'function'
+                  ? children(getControlState(pressableState))
+                  : children}
+              </View>
             </>
           )
         }}
@@ -99,6 +123,12 @@ const ExpandCollapseControl = forwardRef(
 )
 ExpandCollapseControl.displayName = 'ExpandCollapseControl'
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    pointerEvents: 'none'
+  }
+})
+
 ExpandCollapseControl.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('ExpandCollapseControl'),

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react'
-import { View } from 'react-native'
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens } from '../ThemeProvider'
@@ -29,7 +29,7 @@ function selectBorderStyles(tokens) {
  * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = forwardRef(
+const ExpandCollapse = React.forwardRef(
   ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, ...rest }, ref) => {
     const {
       currentValues: openIds,
@@ -46,10 +46,12 @@ const ExpandCollapse = forwardRef(
     const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
 
     return (
-      <View ref={ref} style={selectBorderStyles(themeTokens)} {...selectProps(rest)}>
-        {typeof children === 'function'
-          ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
-          : children}
+      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
+        <View style={selectBorderStyles(themeTokens)}>
+          {typeof children === 'function'
+            ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
+            : children}
+        </View>
       </View>
     )
   }
@@ -86,3 +88,9 @@ ExpandCollapse.propTypes = {
 }
 
 export default ExpandCollapse
+
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex'
+  }
+})