@telus-uds/components-base 2.0.0 → 2.0.1

package/src/Pagination/PageButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 import ButtonBase from '../Button/ButtonBase'
@@ -17,7 +17,7 @@ import {
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
-const PageButton = forwardRef(
+const PageButton = React.forwardRef(
   ({ label, onPress, href, isActive, copy, variant, tokens, ...props }, ref) => {
     const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant)
 
@@ -28,12 +28,12 @@ const PageButton = forwardRef(
     const activeProps = isActive
       ? {
           selected: true,
-          ...a11yProps.nonFocusableProps,
+          ...a11yProps.nonFocusableProps
           // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
           // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-          key: 'active-item'
         }
       : {}
+    const key = isActive ? 'active-item' : undefined
 
     const accessibilityRole = href !== undefined ? 'link' : 'button'
     const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : ''
@@ -50,7 +50,7 @@ const PageButton = forwardRef(
     }
 
     return (
-      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} {...activeProps}>
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} key={key} {...activeProps}>
         {label}
       </ButtonBase>
     )
@@ -60,8 +60,17 @@ PageButton.displayName = 'PageButton'
 
 PageButton.propTypes = {
   ...linkProps.types,
+  /**
+   * To set custom label for the button
+   */
   label: PropTypes.string,
+  /**
+   * To set `PageButton` to active state
+   */
   isActive: PropTypes.bool,
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('PaginationPageButton')

package/src/Pagination/Pagination.jsx

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { View, Text, StyleSheet } from 'react-native'
 
 import {
@@ -31,7 +32,7 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight },
     themeOptions
   })
 
-const Pagination = forwardRef(
+const Pagination = React.forwardRef(
   (
     {
       children,
@@ -42,6 +43,7 @@ const Pagination = forwardRef(
       sideButtonTokens,
       LinkRouter,
       linkRouterProps,
+      numberOfPagesBeforeEllipsis = 4,
       ...rest
     },
     ref
@@ -52,6 +54,21 @@ const Pagination = forwardRef(
     })
     const { themeOptions } = useTheme()
 
+    const {
+      borderColor,
+      borderWidth,
+      borderLeftWidth,
+      borderRightWidth,
+      borderTopWidth,
+      borderBottomWidth,
+      ellipsisPadding,
+      ellipsisBorderRightWidth,
+      ellipsisBorderLeftWidth,
+      ellipsisBorderTopWidth,
+      ellipsisBorderBottomWidth,
+      ellipsisHeight
+    } = themeTokens
+
     const items = React.Children.toArray(children)
 
     const {
@@ -65,10 +82,22 @@ const Pagination = forwardRef(
       shouldRenderEllipsis
     } = usePagination({
       items,
-      truncateAbove
+      truncateAbove,
+      numberOfPagesBeforeEllipsis
     })
 
     const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
+    const ellipisContainerStyles = StyleSheet.create({
+      container: {
+        height: ellipsisHeight,
+        padding: ellipsisPadding,
+        borderRightWidth: ellipsisBorderRightWidth,
+        borderLeftWidth: ellipsisBorderLeftWidth,
+        borderTopWidth: ellipsisBorderTopWidth,
+        borderBottomWidth: ellipsisBorderBottomWidth,
+        borderColor
+      }
+    })
 
     if (items.length === 0) {
       return null
@@ -110,9 +139,15 @@ const Pagination = forwardRef(
 
         if (shouldRenderEllipsis(itemIndex)) {
           return (
-            <Text key="..." style={ellipsisTextStyles}>
-              ...
-            </Text>
+            <View key="..." style={{ ...ellipisContainerStyles.container }}>
+              <Text
+                style={{
+                  ...ellipsisTextStyles
+                }}
+              >
+                ...
+              </Text>
+            </View>
           )
         }
 
@@ -132,16 +167,34 @@ const Pagination = forwardRef(
     ]
 
     return (
-      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
-        {buttons
-          // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-          .map((element, index) => [element, `page-${index + 1}`])
-          .filter(([element]) => element !== null)
-          .map(([element, key]) => (
-            <Box right={gap} key={key}>
-              {element}
-            </Box>
-          ))}
+      <View
+        style={{
+          ...staticStyles.container
+        }}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        <View
+          style={{
+            borderColor,
+            borderWidth,
+            borderLeftWidth,
+            borderRightWidth,
+            borderTopWidth,
+            borderBottomWidth,
+            ...staticStyles.container
+          }}
+        >
+          {buttons
+            // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+            .map((element, index) => [element, `page-${index + 1}`])
+            .filter(([element]) => element !== null)
+            .map(([element, key]) => (
+              <Box right={gap} key={key}>
+                {element}
+              </Box>
+            ))}
+        </View>
       </View>
     )
   }
@@ -157,11 +210,24 @@ Pagination.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
+  /**
+   * To change the language for labels
+   */
   copy: copyPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('Pagination'),
+  /**
+   * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
+   */
   sideButtonVariant: variantProp.propType,
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
+  /**
+   * Custom tokens for `PaginationSideButton`
+   */
+  sideButtonTokens: getTokensPropType('PaginationSideButton'),
+  /**
+   * The number of pages before the ellipsis is shown
+   */
+  numberOfPagesBeforeEllipsis: PropTypes.number
 }
 
 const staticStyles = StyleSheet.create({

package/src/Pagination/SideButton.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import { Text } from 'react-native'
 
 import PropTypes from 'prop-types'
@@ -29,7 +29,7 @@ const directionToSide = {
   next: 'right'
 }
 
-const SideButton = forwardRef(
+const SideButton = React.forwardRef(
   ({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }, ref) => {
     const viewport = useViewport()
     const buttonVariant = { direction, viewport, ...variant }

package/src/Pagination/constants.js

@@ -0,0 +1,3 @@
+export const TRUNCATE_ABOVE_VALUE = 4
+export const MIN_PAGES_TO_SHOW = 3
+export const DEFAULT_PAGE_TO_SHOW_VALUE = 1

package/src/Pagination/dictionary.js

@@ -8,11 +8,11 @@ export default {
     nextText: 'Next'
   },
   fr: {
-    goToLabel: 'Aller au page n°',
+    goToLabel: 'Aller à la page n°',
     currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
+    previousLabel: 'Aller à la page précédente',
     previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
+    nextLabel: 'Aller à la page suivante',
     nextText: 'Suivant'
   }
 }

package/src/Pagination/usePagination.js

@@ -1,11 +1,13 @@
+import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } from './constants'
 /**
  * Handles configurable truncating of pagination items.
  *
  * @param {object} props
  * @param {React.Element[]} items
  * @param {number} truncateAbove
+ * @param {number} numberOfPagesBeforeEllipsis
  */
-function usePagination({ items, truncateAbove }) {
+function usePagination({ items, truncateAbove, numberOfPagesBeforeEllipsis }) {
   const activeItemIndex = Math.max(
     items.findIndex((item) => item.props.isActive),
     0 // default to the first item if none is marked as active
@@ -16,8 +18,17 @@ function usePagination({ items, truncateAbove }) {
     return { onPress, href, hrefAttrs, variant, tokens }
   }
 
-  const windowSize = truncateAbove > 4 ? 3 : 1
-  const truncateEnabled = items.length > truncateAbove
+  let windowSize
+
+  if (numberOfPagesBeforeEllipsis >= 1 && numberOfPagesBeforeEllipsis < items.length) {
+    windowSize = numberOfPagesBeforeEllipsis
+  } else if (truncateAbove > TRUNCATE_ABOVE_VALUE) {
+    windowSize = MIN_PAGES_TO_SHOW
+  } else {
+    windowSize = DEFAULT_PAGE_TO_SHOW_VALUE
+  }
+
+  const truncateEnabled = items.length > windowSize
 
   const truncateWindowStart = windowSize
   const truncateWindowEnd = items.length - 1 - windowSize

package/src/Portal/Portal.jsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+/**
+ * Portal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `Portal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const Portal = ({ children }) => {
+  const [portalContainer, setPortalContainer] = useState(null)
+  const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined'
+
+  useEffect(() => {
+    if (!isWebClient) {
+      return
+    }
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    setPortalContainer(container)
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (container && container.parentNode) {
+        container.parentNode.removeChild(container)
+      }
+    }
+  }, [isWebClient])
+
+  if (!portalContainer || !isWebClient) return null
+
+  return ReactDOM.createPortal(children, portalContainer)
+}
+
+Portal.propTypes = {
+  children: PropTypes.node.isRequired
+}
+
+export default Portal

package/src/Portal/Portal.native.jsx

@@ -0,0 +1,3 @@
+import { Portal } from '@gorhom/portal'
+
+export default Portal

package/src/Portal/index.js

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

package/src/PriceLockup/PriceLockup.jsx

@@ -0,0 +1,237 @@
+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 selectContainertokens = ({ alignItemsText }) => ({
+  alignItems: alignItemsText
+})
+
+const PriceLockup = React.forwardRef(
+  (
+    {
+      size = 'medium',
+      signDirection = 'left',
+      footnoteLinks,
+      topText,
+      price,
+      currencySymbol = '$',
+      rateText,
+      ratePosition = 'right',
+      bottomText,
+      onClickFootnote,
+      strikeThrough,
+      a11yText,
+      tokens: priceLockupTokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const {
+      footnoteMarginTop,
+      footnoteGap,
+      bottomTextMarginTop,
+      priceMarginBottom,
+      bottomLinksMarginLeft,
+      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, selectContainertokens(themeTokens)]}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        {topText ? (
+          <View style={staticStyles.topText}>
+            {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'
+  },
+  topText: {
+    marginBottom: 4
+  }
+})

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 }
+    })
+  }
+})