@telus-uds/components-base 1.74.0 → 1.76.0

package/src/Notification/Notification.jsx

@@ -1,8 +1,13 @@
-import React, { forwardRef, useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { forwardRef, useState, useRef } from 'react'
+import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
+import {
+  applyTextStyles,
+  useTheme,
+  useThemeTokens,
+  useResponsiveThemeTokens
+} from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -11,7 +16,9 @@ import {
   variantProp,
   viewProps,
   wrapStringsInText,
-  useResponsiveProp
+  useResponsiveProp,
+  createMediaQueryStyles,
+  StyleSheet
 } from '../utils'
 import IconButton from '../IconButton'
 import useCopy from '../utils/useCopy'
@@ -61,6 +68,110 @@ const selectContentContainerStyle = (maxWidth) => ({
   width: maxWidth || '100%'
 })
 
+const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
+    (acc, [vp, viewportTokens]) => {
+      acc[vp] = selectContainerStyles({ ...viewportTokens })
+      return acc
+    },
+    {}
+  )
+
+  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles)
+
+  const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
+    container: { flexDirection: 'row', ...selectContainerMediaQueryStyles }
+  })
+
+  const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
+    contentContainer: {
+      flexDirection: 'row',
+      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%' }
+      })
+    }
+  })
+
+  const { ids: staticContentContainerIds, styles: staticContentContainerStyles } =
+    StyleSheet.create({
+      staticContentContainer: { flexDirection: 'row', flexShrink: 1 }
+    })
+
+  const { ids: iconContainerIds, styles: iconContainerStyles } = StyleSheet.create({
+    iconContainer: selectIconContainerStyles(themeTokens[viewport])
+  })
+
+  const { ids: dismissButtonContainerIds, styles: dismissButtonContainerStyles } =
+    StyleSheet.create({
+      dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
+    })
+
+  const { ids: textIds, styles: textStyles } = StyleSheet.create({
+    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
+  })
+
+  const { styles: selectIconPropsStyles } = StyleSheet.create({
+    selectIconProps: selectIconProps(themeTokens[viewport])
+  })
+
+  const { styles: selectDismissIconPropsStyles } = StyleSheet.create({
+    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
+  })
+
+  // eslint-disable-next-line no-param-reassign
+  mediaIdsRef.current = {
+    containerIds,
+    contentContainerIds,
+    staticContentContainerIds,
+    iconContainerIds,
+    dismissButtonContainerIds,
+    textIds
+  }
+
+  return {
+    containerStyles,
+    contentContainerStyles,
+    staticContentContainerStyles,
+    iconContainerStyles,
+    dismissButtonContainerStyles,
+    textStyles,
+    selectIconPropsStyles,
+    selectDismissIconPropsStyles
+  }
+}
+
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+  containerStyles: {
+    container: { flexDirection: 'row', ...selectContainerStyles(themeTokens) }
+  },
+  contentContainerStyles: {
+    contentContainer: {
+      flexDirection: 'row',
+      flexShrink: 1,
+      justifyContent: 'space-between',
+      ...selectContentContainerStyle(maxWidth)
+    }
+  },
+  staticContentContainerStyles: {
+    staticContentContainer: { flexDirection: 'row', flexShrink: 1 }
+  },
+  iconContainerStyles: { iconContainer: { ...selectIconContainerStyles(themeTokens) } },
+  dismissButtonContainerStyles: {
+    dismissButtonContainer: { ...selectDismissButtonContainerStyles(themeTokens) }
+  },
+  textStyles: { text: { ...selectTextStyles(themeTokens, themeOptions, dismissible) } },
+  selectIconPropsStyles: { selectIconProps: { ...selectIconProps(themeTokens) } },
+  selectDismissIconPropsStyles: {
+    selectDismissIconProps: { ...selectDismissIconProps(themeTokens) }
+  }
+})
+
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -116,43 +227,121 @@ const Notification = forwardRef(
   ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = useState(false)
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Notification', tokens, variant, { system, viewport })
     const getCopy = useCopy({ dictionary, copy })
+
     const { themeOptions } = useTheme()
-    const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const { enableMediaQueryStyleSheet } = themeOptions
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+    const themeTokens = useTokens('Notification', tokens, variant, { system, viewport })
+    const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+
+    const notificationComponentRef = useRef({
+      containerStyles: {},
+      contentContainerStyles: {},
+      staticContentContainerStyles: {},
+      iconContainerStyles: {},
+      dismissButtonContainerStyles: {},
+      textStyles: {},
+      selectIconPropsStyles: {},
+      selectDismissIconPropsStyles: {}
+    })
+    const mediaIdsRef = useRef({
+      containerIds: {},
+      contentContainerIds: {},
+      staticContentContainerIds: {},
+      iconContainerIds: {},
+      dismissButtonContainerIds: {},
+      textIds: {},
+      selectIconPropsIds: {},
+      selectDismissIconPropsIds: {}
+    })
+
+    if (enableMediaQueryStyleSheet) {
+      notificationComponentRef.current = getMediaQueryStyles(
+        themeTokens,
+        themeOptions,
+        viewport,
+        mediaIdsRef,
+        dismissible
+      )
+    } else {
+      notificationComponentRef.current = getDefaultStyles(
+        themeTokens,
+        themeOptions,
+        maxWidth,
+        dismissible
+      )
+    }
 
     if (isDismissed) {
       return null
     }
 
-    const textStyles = selectTextStyles(themeTokens, themeOptions, dismissible)
-
     const content = wrapStringsInText(
-      typeof children === 'function' ? children({ textStyles, variant }) : children,
-      { style: textStyles }
+      typeof children === 'function'
+        ? children({ textStyles: notificationComponentRef.current.textStyles.text, variant })
+        : children,
+      { style: notificationComponentRef.current.textStyles.text }
     )
 
-    const { icon: IconComponent, dismissIcon: DismissIconComponent, dismissIconColor } = themeTokens
+    const {
+      icon: IconComponent,
+      dismissIcon: DismissIconComponent,
+      dismissIconColor
+    } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport]
 
     const onDismissPress = () => setIsDismissed(true)
 
     return (
       <View
         ref={ref}
-        style={[staticStyles.container, selectContainerStyles(themeTokens)]}
+        style={notificationComponentRef.current.containerStyles.container}
+        dataSet={mediaIdsRef && { media: mediaIdsRef.current.containerIds.container }}
         {...selectProps(rest)}
       >
-        <View style={[staticStyles.content, selectContentContainerStyle(contentMaxWidth)]}>
-          <View style={staticStyles.contentContainer}>
+        <View
+          style={notificationComponentRef.current.contentContainerStyles.contentContainer}
+          dataSet={
+            mediaIdsRef && { media: mediaIdsRef.current.contentContainerIds.contentContainer }
+          }
+        >
+          <View
+            style={
+              notificationComponentRef.current.staticContentContainerStyles.staticContentContainer
+            }
+            dataSet={
+              mediaIdsRef && {
+                media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
+              }
+            }
+          >
             {IconComponent && (
-              <View style={selectIconContainerStyles(themeTokens)}>
-                <IconComponent {...selectIconProps(themeTokens)} />
+              <View
+                style={notificationComponentRef.current.iconContainerStyles.iconContainer}
+                dataSet={
+                  mediaIdsRef && { media: mediaIdsRef.current.iconContainerIds.iconContainer }
+                }
+              >
+                <IconComponent
+                  {...notificationComponentRef.current.selectIconPropsStyles.selectIconProps}
+                />
               </View>
             )}
-            {content && typeof content === 'function' ? content({ textStyles, variant }) : content}
+            {content && typeof content === 'function'
+              ? content({ textStyles: notificationComponentRef.current.textStyles.text, variant })
+              : content}
           </View>
           {dismissible && DismissIconComponent && (
-            <View style={selectDismissButtonContainerStyles(themeTokens)}>
+            <View
+              style={
+                notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer
+              }
+              dataSet={
+                mediaIdsRef && {
+                  media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
+                }
+              }
+            >
               <IconButton
                 action="close"
                 onPress={onDismissPress}
@@ -161,7 +350,12 @@ const Notification = forwardRef(
                 accessibilityLabel={getCopy('dismiss')}
                 variant={{ inverse: dismissIconColor === '#ffffff', size: 'small' }}
               >
-                {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
+                {() => (
+                  <DismissIconComponent
+                    {...notificationComponentRef.current.selectDismissIconPropsStyles
+                      .selectDismissIconProps}
+                  />
+                )}
               </IconButton>
             </View>
           )}
@@ -198,18 +392,3 @@ Notification.propTypes = {
 }
 
 export default Notification
-
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-})

package/src/OrderedList/OrderedList.jsx

@@ -7,29 +7,26 @@ import Item from './Item'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const getChildrenWithParentVariants = (variant, children, start) => {
-  if (variant)
-    return children.map((child, i) => {
+const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  const childrenWithParentVariants = useMemo(() => {
+    const addVariantToProps = (child, i, isLastChild) => {
       const existingChildVariants = child.props?.variant ?? {}
-      return {
-        ...child,
-        props: {
-          ...child.props,
-          index: start + i,
-          isLastChild: i === children.length - 1,
-          variant: { ...existingChildVariants, ...variant }
-        }
+      return React.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: { ...existingChildVariants, ...variant }
+      })
+    }
+
+    if (variant) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1))
       }
-    })
-
-  return children
-}
+      return [addVariantToProps(children, 0, true)]
+    }
 
-const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
-  const childrenWithParentVariants = useMemo(
-    () => getChildrenWithParentVariants(variant, children, start),
-    [children, variant, start]
-  )
+    return children
+  }, [children, variant, start])
 
   return (
     <OrderedListBase ref={ref} {...selectProps(rest)}>

package/src/PriceLockup/PriceLockup.jsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import PropTypes from 'prop-types'
+import Divider from '../Divider'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps } from '../utils'
+import renderFootnoteContent from './utils/renderFootnoteContent'
+import renderPrice from './utils/renderPrice'
+import renderTypography from './utils/renderTypography'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectTopTextTypographyTokens = ({ topTextFontSize, topTextLineHeight }) => ({
+  fontSize: topTextFontSize,
+  lineHeight: topTextLineHeight
+})
+
+const selectCurrencySymbolTypographyTokens = ({
+  currencySymbolFontSize,
+  currencySymbolLineHeight,
+  currencySymbolFontWeight
+}) => ({
+  fontSize: currencySymbolFontSize,
+  lineHeight: currencySymbolLineHeight,
+  fontWeight: currencySymbolFontWeight
+})
+
+const selectAmountTypographyTokens = ({
+  amountFontSize,
+  amountLineHeight,
+  amountLetterSpacing,
+  amountFontWeight,
+  fontColor
+}) => {
+  // This is used to apply the proper line height to the amount
+  const lineHeightMultiplier = 1.18
+  return {
+    color: fontColor,
+    fontSize: amountFontSize,
+    lineHeight: amountLineHeight * lineHeightMultiplier,
+    letterSpacing: amountLetterSpacing,
+    fontWeight: amountFontWeight
+  }
+}
+
+const selectCentsTypographyTokens = ({ centsFontSize, centsLineHeight, centsFontWeight }) => ({
+  fontSize: centsFontSize,
+  lineHeight: centsLineHeight,
+  fontWeight: centsFontWeight
+})
+
+const selectRateTypographyTokens = ({ rateFontSize, rateLineHeight, rateFontWeight }) => ({
+  fontSize: rateFontSize,
+  lineHeight: rateLineHeight,
+  fontWeight: rateFontWeight
+})
+
+const selectBottomTextTypographyTokens = ({ bottomTextFontSize, bottomTextLineHeight }) => ({
+  fontSize: bottomTextFontSize,
+  lineHeight: bottomTextLineHeight
+})
+
+const PriceLockup = ({
+  size = 'medium',
+  signDirection = 'left',
+  footnoteLinks,
+  topText,
+  price,
+  currencySymbol = '$',
+  rateText,
+  ratePosition = 'right',
+  bottomText,
+  onClickFootnote,
+  strikeThrough,
+  a11yText,
+  tokens: priceLockupTokens,
+  variant = {},
+  ...rest
+}) => {
+  const viewport = useViewport()
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    fontColor,
+    dividerColor,
+    ...themeTokens
+  } = useThemeTokens(
+    'PriceLockup',
+    priceLockupTokens,
+    { ...variant, size },
+    { viewport, strikeThrough }
+  )
+  const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens)
+  const amountTypographyTokens = selectAmountTypographyTokens(themeTokens)
+  const centsTypographyTokens = selectCentsTypographyTokens(themeTokens)
+  const rateTypographyTokens = selectRateTypographyTokens(themeTokens)
+  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens)
+  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens)
+
+  return (
+    <View style={[staticStyles.priceLockupContainer, { ...selectProps(rest) }]}>
+      {topText ? <View>{renderTypography(topText, topTextTypographyTokens)}</View> : null}
+      {renderPrice(
+        price,
+        rateText,
+        ratePosition,
+        signDirection,
+        currencySymbol,
+        currencySymbolTypographyTokens,
+        amountTypographyTokens,
+        centsTypographyTokens,
+        rateTypographyTokens,
+        fontColor,
+        strikeThrough,
+        a11yText,
+        bottomText,
+        bottomLinksMarginLeft,
+        footnoteLinks,
+        onClickFootnote,
+        themeTokens
+      )}
+      {bottomText ? (
+        <>
+          <Divider
+            testID="price-lockup-divider"
+            role="separator"
+            tokens={{ color: dividerColor }}
+          />
+          {renderFootnoteContent(
+            footnoteMarginTop,
+            bottomTextMarginTop,
+            bottomText,
+            bottomTextTypographyTokens,
+            fontColor,
+            footnoteLinks,
+            bottomLinksMarginLeft,
+            onClickFootnote,
+            themeTokens
+          )}
+        </>
+      ) : null}
+    </View>
+  )
+}
+
+PriceLockup.displayName = 'PriceLockup'
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards.
+   */
+  size: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
+  currencySymbol: PropTypes.string,
+  /**
+   * Shows additional info above the price
+   */
+  topText: PropTypes.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
+  price: PropTypes.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
+  rateText: PropTypes.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
+  bottomText: PropTypes.string,
+  /**
+   * Displays which side the currency should appear (left, right)
+   */
+  signDirection: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should appear (bottom, right)
+   */
+  ratePosition: PropTypes.oneOf(['right', 'bottom']),
+  /**
+   * Shows additional link for context
+   */
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
+  onClickFootnote: PropTypes.func,
+  /**
+   * To show price savings comparison
+   */
+  strikeThrough: PropTypes.bool,
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
+  a11yText: PropTypes.string,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
+}
+
+export default PriceLockup
+
+const staticStyles = StyleSheet.create({
+  priceLockupContainer: {
+    alignSelf: 'flex-start'
+  }
+})

package/src/PriceLockup/index.js

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

package/src/PriceLockup/utils/renderFootnoteContent.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { StyleSheet, View, Text, Platform } from 'react-native'
+import renderTypography from './renderTypography'
+import renderFootnoteLinks from './renderFootnoteLinks'
+
+const selectFootnoteContainer = ({ footnoteMarginTop }) => ({
+  marginTop: footnoteMarginTop
+})
+
+const selectFootnoteBottomTextContainer = ({ bottomTextMarginTop }) => ({
+  marginTop: bottomTextMarginTop
+})
+
+const selectFootnoteLinksStyles = ({ bottomLinksMarginLeft }) => ({
+  marginLeft: bottomLinksMarginLeft
+})
+
+const renderFootnoteContent = (
+  footnoteMarginTop,
+  bottomTextMarginTop,
+  bottomText,
+  bottomTextTypographyTokens,
+  fontColor,
+  footnoteLinks,
+  bottomLinksMarginLeft,
+  onClickFootnote,
+  themeTokens
+) => {
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
+  return (
+    <>
+      <View
+        style={[staticStyles.footnoteContainer, selectFootnoteContainer({ footnoteMarginTop })]}
+      >
+        <Text style={selectFootnoteBottomTextContainer({ bottomTextMarginTop })}>
+          {renderTypography(bottomText, bottomTextTypographyTokens, undefined, fontColor)}{' '}
+        </Text>
+        {footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? (
+          <View
+            style={[
+              staticStyles.footnoteLinkContainer,
+              selectFootnoteLinksStyles({ bottomLinksMarginLeft })
+            ]}
+          >
+            {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+          </View>
+        ) : null}
+      </View>
+      {footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? (
+        <View style={staticStyles.verticalFootnoteLinkContainer}>
+          {renderFootnoteLinks(footnoteLinks, themeTokens, onClickFootnote)}
+        </View>
+      ) : null}
+    </>
+  )
+}
+
+export default renderFootnoteContent
+
+const staticStyles = StyleSheet.create({
+  footnoteContainer: {
+    flexDirection: 'row'
+  },
+  footnoteLinkContainer: {
+    flexDirection: 'row',
+    ...Platform.select({
+      ios: { alignSelf: 'flex-end', top: 2 },
+      android: { alignSelf: 'center', top: -8 }
+    })
+  },
+  verticalFootnoteLinkContainer: {
+    ...Platform.select({
+      ios: { top: 10 },
+      android: { top: -2 }
+    })
+  }
+})

package/src/PriceLockup/utils/renderFootnoteLinks.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import FootnoteLink from '../../Footnote/FootnoteLink'
+
+const selectFootnoteLinkStyles = (
+  {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight,
+    footnoteLinkFontSize
+  },
+  footnoteLinks
+) => {
+  // This is used to apply the proper line height when there is 4 or more footnote links
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3
+  const lineHeight =
+    footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED
+      ? footnoteLinkFontSize * footnoteLinkLineHeight
+      : undefined
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight,
+    fontSize: footnoteLinkFontSize
+  }
+}
+
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) =>
+  footnoteLinks && footnoteLinks.length > 0 ? (
+    <FootnoteLink
+      tokens={selectFootnoteLinkStyles(themeTokens, footnoteLinks)}
+      content={footnoteLinks}
+      onClick={onClickFootnote}
+    />
+  ) : null
+
+export default renderFootnoteLinks