@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/src/Notification/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     dismiss: 'Close'
   },

package/src/OrderedList/OrderedList.jsx

@@ -1,13 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils'
-import OrderedListBase from './OrderedListBase'
-import Item from './Item'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { OrderedListBase } from './OrderedListBase'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const OrderedList = React.forwardRef(
+export const OrderedList = React.forwardRef(
   ({ children, start = 1, variant = {}, tokens = {}, ...rest }, ref) => {
     // Pass any variants and tokens "OrderedList" receives down to the individual list items.
     const childrenWithParentVariants = React.useMemo(() => {
@@ -46,7 +49,7 @@ const OrderedList = React.forwardRef(
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
   /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
+   * A list of ordered items wrapped in `OrderedListItem`.
    */
   children: PropTypes.node.isRequired,
   /**
@@ -58,7 +61,3 @@ OrderedList.propTypes = {
 }
 
 OrderedList.displayName = 'OrderedList'
-
-OrderedList.Item = Item
-
-export default OrderedList

package/src/OrderedList/OrderedListBase.jsx

@@ -3,9 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 
-import ItemBase from './ItemBase'
-
-const OrderedListBase = React.forwardRef(({ children, ...rest }, ref) => (
+export const OrderedListBase = React.forwardRef(({ children, ...rest }, ref) => (
   <View accessibilityRole="list" ref={ref} style={staticStyles.container} {...rest}>
     {children}
   </View>
@@ -20,10 +18,6 @@ OrderedListBase.propTypes = {
 
 OrderedListBase.displayName = 'OrderedList'
 
-OrderedListBase.Item = ItemBase
-
-export default OrderedListBase
-
 const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'column',

package/src/OrderedList/{Item.jsx → OrderedListItem.jsx}

@@ -2,17 +2,17 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native'
 
-import {
-  getTokensPropType,
-  htmlAttrs,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  wrapStringsInText
-} from '../utils'
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import Typography from '../Typography'
-import ItemBase from './ItemBase'
+import { getTokensPropType } from '../utils/props/tokens'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { wrapStringsInText } from '../utils/children'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { Typography } from '../Typography/Typography'
+import { OrderedListItemBase } from './OrderedListItemBase'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
@@ -58,7 +58,7 @@ const selectItemContentStyles = ({ interItemMargin, listGutter, ...themeTokens }
   marginBottom: !isLastChild ? interItemMargin : 0
 })
 
-const Item = React.forwardRef(
+export const OrderedListItem = React.forwardRef(
   ({ children, index, isLastChild, title, tokens = {}, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('OrderedList', tokens, variant)
     const headingTokens = title && {
@@ -78,7 +78,7 @@ const Item = React.forwardRef(
     })
 
     return (
-      <ItemBase
+      <OrderedListItemBase
         ref={ref}
         style={{ ...staticStyles.container, ...themeTokens }}
         {...selectProps(rest)}
@@ -96,12 +96,12 @@ const Item = React.forwardRef(
           )}
           <View>{itemContent}</View>
         </View>
-      </ItemBase>
+      </OrderedListItemBase>
     )
   }
 )
 
-Item.propTypes = {
+OrderedListItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Item content
@@ -116,7 +116,7 @@ Item.propTypes = {
    */
   isLastChild: PropTypes.bool,
   /**
-   * Defines the title of the `OrderedList.Item`
+   * Defines the title of the `OrderedListItem`
    */
   title: PropTypes.string,
   /**
@@ -129,9 +129,7 @@ Item.propTypes = {
   variant: variantProp.propType
 }
 
-Item.displayName = 'OrderedListItem'
-
-export default Item
+OrderedListItem.displayName = 'OrderedListItem'
 
 const staticStyles = StyleSheet.create({
   container: {

package/src/OrderedList/{ItemBase.jsx → OrderedListItemBase.jsx}

@@ -10,7 +10,7 @@ const getAccessibilityRole = () =>
     web: 'listitem'
   })
 
-const Item = React.forwardRef(({ children, style, ...rest }, ref) => (
+export const OrderedListItemBase = React.forwardRef(({ children, style, ...rest }, ref) => (
   <View
     accessibilityRole={getAccessibilityRole()}
     ref={ref}
@@ -21,7 +21,7 @@ const Item = React.forwardRef(({ children, style, ...rest }, ref) => (
   </View>
 ))
 
-Item.propTypes = {
+OrderedListItemBase.propTypes = {
   /**
    * Item content
    */
@@ -32,9 +32,7 @@ Item.propTypes = {
   style: PropTypes.object
 }
 
-Item.displayName = 'OrderedListItem'
-
-export default Item
+OrderedListItemBase.displayName = 'OrderedListItemBase'
 
 const staticStyles = StyleSheet.create({
   container: {

package/src/Pagination/Pagination.jsx

@@ -2,23 +2,23 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, Text, StyleSheet } from 'react-native'
 
-import {
-  a11yProps,
-  componentPropType,
-  copyPropTypes,
-  getTokensPropType,
-  selectSystemProps,
-  variantProp,
-  viewProps,
-  withLinkRouter
-} from '../utils'
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import Box from '../Box'
-
-import usePagination from './usePagination'
-import PageButton from './PageButton'
-import SideButton from './SideButton'
+import { a11yProps } from '../utils/props/a11yProps'
+import { componentPropType } from '../utils/props/componentPropType'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { getTokensPropType } from '../utils/props/tokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { variantProp } from '../utils/props/variantProp'
+import { viewProps } from '../utils/props/viewProps'
+import { withLinkRouter } from '../utils/withLinkRouter'
+import { applyTextStyles } from '../ThemeProvider/utils/styles'
+import { useTheme } from '../ThemeProvider/useTheme'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { Box } from '../Box/Box'
+
+import { usePagination } from './usePagination'
+import { PaginationPageButton } from './PaginationPageButton'
+import { SideButton } from './SideButton'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -32,7 +32,7 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight },
     themeOptions
   })
 
-const Pagination = React.forwardRef(
+export const Pagination = React.forwardRef(
   (
     {
       children,
@@ -125,7 +125,7 @@ const Pagination = React.forwardRef(
 
         if (shouldRenderButton(itemIndex)) {
           return (
-            <PageButton
+            <PaginationPageButton
               {...itemProps}
               LinkRouter={ItemLinkRouter}
               linkRouterProps={itemLinkRouterProps}
@@ -202,10 +202,6 @@ const Pagination = React.forwardRef(
 
 Pagination.displayName = 'Pagination'
 
-PageButton.displayName = 'PageButton'
-
-Pagination.PageButton = PageButton
-
 Pagination.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
@@ -234,8 +230,7 @@ const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     alignItems: 'center'
   }
 })
-
-export default Pagination

package/src/Pagination/{PageButton.jsx → PaginationPageButton.jsx}

@@ -1,23 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import ButtonBase from '../Button/ButtonBase'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import {
-  a11yProps,
-  copyPropTypes,
-  getTokensPropType,
-  hrefAttrsProp,
-  linkProps,
-  selectTokens,
-  variantProp,
-  withLinkRouter
-} from '../utils'
+import { ButtonBase } from '../Button/ButtonBase'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { a11yProps } from '../utils/props/a11yProps'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { getTokensPropType, selectTokens } from '../utils/props/tokens'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { linkProps } from '../utils/props/linkProps'
+import { variantProp } from '../utils/props/variantProp'
+import { withLinkRouter } from '../utils/withLinkRouter'
 
-import useCopy from '../utils/useCopy'
-import dictionary from './dictionary'
+import { useCopy } from '../utils/useCopy'
+import { dictionary } from './dictionary'
 
-const PageButton = React.forwardRef(
+const PaginationPageButtonInner = React.forwardRef(
   ({ label, onPress, href, isActive, copy, variant, tokens, ...props }, ref) => {
     const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant)
 
@@ -56,9 +53,9 @@ const PageButton = React.forwardRef(
     )
   }
 )
-PageButton.displayName = 'PageButton'
+PaginationPageButtonInner.displayName = 'PaginationPageButton'
 
-PageButton.propTypes = {
+PaginationPageButtonInner.propTypes = {
   ...linkProps.types,
   /**
    * To set custom label for the button
@@ -76,4 +73,6 @@ PageButton.propTypes = {
   tokens: getTokensPropType('PaginationPageButton')
 }
 
-export default withLinkRouter(PageButton)
+// Export unwrapped component for react-docgen to extract info for docsite
+export { PaginationPageButtonInner as PaginationPageButtonBase }
+export const PaginationPageButton = withLinkRouter(PaginationPageButtonInner)

package/src/Pagination/SideButton.jsx

@@ -3,14 +3,18 @@ import { Text } from 'react-native'
 
 import PropTypes from 'prop-types'
 
-import ButtonBase from '../Button/ButtonBase'
-import { IconText } from '../Icon'
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { useViewport } from '../ViewportProvider'
-import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils'
+import { ButtonBase } from '../Button/ButtonBase'
+import { IconText } from '../Icon/IconText'
+import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { copyPropTypes } from '../utils/props/copyPropTypes'
+import { hrefAttrsProp } from '../utils/props/hrefAttrsProp'
+import { linkProps } from '../utils/props/linkProps'
+import { selectTokens } from '../utils/props/tokens'
+import { withLinkRouter } from '../utils/withLinkRouter'
 
-import dictionary from './dictionary'
-import useCopy from '../utils/useCopy'
+import { dictionary } from './dictionary'
+import { useCopy } from '../utils/useCopy'
 
 // We need to drop the icon here since it gets rendered via children and not
 // `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
@@ -29,7 +33,7 @@ const directionToSide = {
   next: 'right'
 }
 
-const SideButton = React.forwardRef(
+const SideButtonInner = React.forwardRef(
   ({ direction = 'previous', onPress, href, copy, variant, tokens, ...props }, ref) => {
     const viewport = useViewport()
     const buttonVariant = { direction, viewport, ...variant }
@@ -77,12 +81,12 @@ const SideButton = React.forwardRef(
     )
   }
 )
-SideButton.displayName = 'SideButton'
+SideButtonInner.displayName = 'SideButton'
 
-SideButton.propTypes = {
+SideButtonInner.propTypes = {
   direction: PropTypes.oneOf(['previous', 'next']),
   copy: copyPropTypes,
   ...linkProps.types
 }
 
-export default withLinkRouter(SideButton)
+export const SideButton = withLinkRouter(SideButtonInner)

package/src/Pagination/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     goToLabel: 'Go to page number',
     currentLabel: '(current)',

package/src/Pagination/usePagination.js

@@ -7,7 +7,7 @@ import { DEFAULT_PAGE_TO_SHOW_VALUE, MIN_PAGES_TO_SHOW, TRUNCATE_ABOVE_VALUE } f
  * @param {number} truncateAbove
  * @param {number} numberOfPagesBeforeEllipsis
  */
-function usePagination({ items, truncateAbove, numberOfPagesBeforeEllipsis }) {
+export 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
@@ -76,5 +76,3 @@ function usePagination({ items, truncateAbove, numberOfPagesBeforeEllipsis }) {
     previousItemProps: getItemProps(activeItemIndex - 1)
   }
 }
-
-export default usePagination

package/src/Portal/Portal.jsx

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types'
  * @returns {React.ReactPortal} The React portal component.
  */
 
-const Portal = ({ children }) => {
+export const Portal = ({ children }) => {
   const [portalContainer, setPortalContainer] = useState(null)
   const isWebClient = typeof document !== 'undefined' && typeof window !== 'undefined'
 
@@ -48,5 +48,3 @@ const Portal = ({ children }) => {
 Portal.propTypes = {
   children: PropTypes.node.isRequired
 }
-
-export default Portal

package/src/Portal/Portal.native.jsx

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

package/src/PriceLockup/PriceLockup.jsx

@@ -1,13 +1,16 @@
 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'
+import { Divider } from '../Divider/Divider'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { viewProps } from '../utils/props/viewProps'
+import { renderFootnoteContent } from './utils/renderFootnoteContent'
+import { renderPrice } from './utils/renderPrice'
+import { renderTypography } from './utils/renderTypography'
 
 const PRICE_BASELINE_VARIANT = 'baseline'
 
@@ -67,7 +70,7 @@ const selectContainertokens = ({ alignItemsText }) => ({
   alignItems: alignItemsText
 })
 
-const PriceLockup = React.forwardRef(
+export const PriceLockup = React.forwardRef(
   (
     {
       size = 'medium',
@@ -230,8 +233,6 @@ PriceLockup.propTypes = {
   tokens: getTokensPropType('PriceLockup')
 }
 
-export default PriceLockup
-
 const staticStyles = StyleSheet.create({
   priceLockupContainer: {
     alignSelf: 'flex-start'

package/src/PriceLockup/utils/renderFootnoteContent.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet, View, Text, Platform } from 'react-native'
-import renderTypography from './renderTypography'
-import renderFootnoteLinks from './renderFootnoteLinks'
+import { renderTypography } from './renderTypography'
+import { renderFootnoteLinks } from './renderFootnoteLinks'
 
 const selectFootnoteContainer = ({ footnoteMarginTop }) => ({
   marginTop: footnoteMarginTop
@@ -15,7 +15,7 @@ const selectFootnoteLinksStyles = ({ bottomLinksMarginLeft }) => ({
   marginLeft: bottomLinksMarginLeft
 })
 
-const renderFootnoteContent = (
+export const renderFootnoteContent = (
   footnoteMarginTop,
   bottomTextMarginTop,
   bottomText,
@@ -55,8 +55,6 @@ const renderFootnoteContent = (
   )
 }
 
-export default renderFootnoteContent
-
 const staticStyles = StyleSheet.create({
   footnoteContainer: {
     flexDirection: 'row'

package/src/PriceLockup/utils/renderFootnoteLinks.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FootnoteLink from '../../Footnote/FootnoteLink'
+import { FootnoteLink } from '../../Footnote/FootnoteLink'
 
 const selectFootnoteLinkStyles = (
   {
@@ -26,7 +26,7 @@ const selectFootnoteLinkStyles = (
   }
 }
 
-const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) =>
+export const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) =>
   footnoteLinks?.length > 0 ? (
     <FootnoteLink
       tokens={selectFootnoteLinkStyles(themeTokens, footnoteLinks)}
@@ -34,5 +34,3 @@ const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) =>
       onClick={onClickFootnote}
     />
   ) : null
-
-export default renderFootnoteLinks

package/src/PriceLockup/utils/renderPrice.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { StyleSheet, View, Text, Platform } from 'react-native'
-import A11yText from '../../A11yText'
-import renderTypography from './renderTypography'
-import renderFootnoteLinks from './renderFootnoteLinks'
+import { A11yText } from '../../A11yText/A11yText'
+import { renderTypography } from './renderTypography'
+import { renderFootnoteLinks } from './renderFootnoteLinks'
 
 const selectStrikeThroughStyles = ({ strikeThroughColor }) => ({
   textDecorationColor: strikeThroughColor
@@ -42,7 +42,7 @@ const renderAmount = (
   return amountText
 }
 
-const renderPrice = (
+export const renderPrice = (
   price,
   rateText,
   ratePosition,
@@ -167,8 +167,6 @@ const renderPrice = (
   )
 }
 
-export default renderPrice
-
 const staticStyles = StyleSheet.create({
   priceContainerRow: {
     flexDirection: 'row'

package/src/PriceLockup/utils/renderTypography.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import Typography from '../../Typography'
+import { Typography } from '../../Typography/Typography'
 
-const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
+export const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
   const customProps =
     ratePosition === 'bottom' && value !== '$'
       ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
@@ -9,5 +9,3 @@ const renderTypography = (value, themeTokens, ratePosition, fontColor) => {
 
   return <Typography {...customProps}>{value}</Typography>
 }
-
-export default renderTypography

package/src/ProductCard/ProductCard.jsx

@@ -1,26 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, View, Image } from 'react-native'
-import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import defaultDictionary from './dictionary'
-import {
-  selectSystemProps,
-  getTokensPropType,
-  htmlAttrs,
-  viewProps,
-  useInputValue,
-  useCopy,
-  a11yProps
-} from '../utils'
+import { useViewport } from '../ViewportProvider/useViewport'
+import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
+import { dictionary as defaultDictionary } from './dictionary'
+import { selectSystemProps } from '../utils/props/selectSystemProps'
+import { getTokensPropType } from '../utils/props/tokens'
+import { htmlAttrs } from '../utils/htmlAttrs'
+import { viewProps } from '../utils/props/viewProps'
+import { useInputValue } from '../utils/input'
+import { useCopy } from '../utils/useCopy'
+import { a11yProps } from '../utils/props/a11yProps'
 
-import Badge from '../Badge'
-import PriceLockup from '../PriceLockup'
-import Typography from '../Typography'
-import { Button } from '../Button'
-import StackView from '../StackView'
-import Box from '../Box'
-import Icon from '../Icon'
+import { Badge } from '../Badge/Badge'
+import { PriceLockup } from '../PriceLockup/PriceLockup'
+import { Typography } from '../Typography/Typography'
+import { Button } from '../Button/Button'
+import { StackView } from '../StackView/StackView'
+import { Box } from '../Box/Box'
+import { Icon } from '../Icon/Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps])
 
@@ -40,7 +38,7 @@ const selectProductCardTokens = ({
   paddingVertical
 })
 
-const ProductCard = React.forwardRef(
+export const ProductCard = React.forwardRef(
   (
     {
       copy = 'en',
@@ -175,7 +173,6 @@ ProductCard.propTypes = {
   }),
   tokens: getTokensPropType('ProductCard')
 }
-export default ProductCard
 
 const staticStyles = StyleSheet.create({
   container: {

package/src/ProductCard/dictionary.js

@@ -1,4 +1,4 @@
-export default {
+export const dictionary = {
   en: {
     badgeText: '',
     brandName: 'Brand name',