@telus-uds/components-web 1.9.0 → 1.11.0

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -0,0 +1,121 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+import { Icon, Spacer, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base'
+import NavigationItem from './NavigationItem'
+import Listbox from '../Listbox'
+import useOverlaidPosition from '../utils/useOverlaidPosition'
+import resolveItemSelection from './resolveItemSelection'
+
+/**
+ * A NavigationItem that opens or closes a Listbox of other NavigationItems.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */
+const NavigationSubMenu = ({
+  children,
+  id,
+  isOpen = false,
+  label,
+  onClick,
+  selectedId,
+  items = [],
+  openOverlayRef,
+  LinkRouter,
+  linkRouterProps
+}) => {
+  const focusTrapRef = useRef()
+
+  const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
+  const { align, offsets, minWidth } = useResponsiveProp({
+    xs: { align: { top: 'top', left: 'left' }, minWidth: maxWidth },
+    sm: { align: { top: 'top', right: 'right' }, minWidth: maxWidth },
+    lg: {
+      align: { top: 'bottom', center: 'center' },
+      offsets: { vertical: 4 },
+      minWidth: 192
+    }
+  })
+
+  const { overlaidPosition, sourceRef, targetRef, onTargetLayout, isReady } = useOverlaidPosition({
+    isShown: isOpen,
+    offsets,
+    align
+  })
+  const { selected } = resolveItemSelection({ id, label, items }, selectedId)
+
+  const handleClick = (event) => {
+    if (typeof onClick === 'function') onClick(event)
+  }
+
+  const { icoMenu } = useThemeTokens('NavigationBar', {}, {}, { expanded: isOpen })
+
+  return (
+    <>
+      <NavigationItem
+        ref={sourceRef}
+        accessibilityRole="button"
+        id={id}
+        selected={selected}
+        onClick={handleClick}
+        icon={icoMenu}
+      >
+        {({ textStyles }) => [
+          children,
+          <Spacer key={`${id}_spacer`} space={1} direction="row" />,
+          <Icon
+            key={`${id}_icon`}
+            icon={icoMenu}
+            variant={{ size: 'small' }}
+            tokens={{ color: textStyles[0]?.color, size: textStyles[0]?.fontSize }}
+          />
+        ]}
+      </NavigationItem>
+      {isOpen && (
+        <>
+          <Listbox.Overlay
+            overlaidPosition={overlaidPosition}
+            maxWidth={maxWidth}
+            minWidth={minWidth}
+            isReady={isReady}
+            onLayout={onTargetLayout}
+            ref={openOverlayRef}
+          >
+            <Listbox
+              items={items}
+              firstItemRef={targetRef}
+              parentRef={sourceRef}
+              selectedId={selectedId}
+              LinkRouter={LinkRouter}
+              linkRouterProps={linkRouterProps}
+            />
+          </Listbox.Overlay>
+          <div
+            // This catches and shifts focus to other interactive elements.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0}
+            ref={focusTrapRef}
+            onFocus={() => targetRef.current.focus()}
+          />
+        </>
+      )}
+    </>
+  )
+}
+
+NavigationSubMenu.displayName = 'NavigationSubMenu'
+
+// @TODO - proper prop types and comments
+NavigationSubMenu.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string,
+  isOpen: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  selectedId: PropTypes.string,
+  items: PropTypes.array,
+  openOverlayRef: PropTypes.object,
+  LinkRouter: PropTypes.elementType,
+  linkRouterProps: PropTypes.object
+}
+
+export default NavigationSubMenu

package/src/NavigationBar/collapseItems.js

@@ -0,0 +1,29 @@
+/**
+ * Make a list of items into a one-item list where all items are nested under the first item
+ */
+const collapseItems = (items, selectedId) => {
+  if (!items?.length) return items
+
+  // Give the root item the label of the current active link
+  // (or the first item if for some reason there's no match on the selectedId)
+  let rootLabel = items[0].label
+  const isSelected = ({ label, id }) => selectedId === id ?? label
+
+  // Linter doesn't like for loops, simulate loop that breaks
+  items.some((item) => {
+    if (isSelected(item)) {
+      rootLabel = item.label
+      return true // break
+    }
+    const nestedMatch = item.items?.find(isSelected)
+    if (nestedMatch) {
+      rootLabel = nestedMatch.label
+      return true // break
+    }
+    return false // continue
+  })
+
+  return [{ id: 'navigation-bar-root', label: rootLabel, items }]
+}
+
+export default collapseItems

package/src/NavigationBar/index.js

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

package/src/PriceLockup/PriceLockup.jsx

@@ -5,11 +5,12 @@ import {
   Divider,
   selectSystemProps,
   Typography,
-  useThemeTokens
+  useThemeTokens,
+  useViewport
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import FootnoteLink from '../Footnote/FootnoteLink'
-import typographyTokens from './tokens'
+import getTypographyTokens from './tokens'
 import { htmlAttrs, warn } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -56,11 +57,23 @@ const StrikeThroughContainer = styled.div`
     content: '';
     width: 100%;
     height: ${({ strikeThroughHeight }) => strikeThroughHeight};
-    background: ${({ strikeThroughBackground }) => strikeThroughBackground};
+    background: ${({ strikeThroughColor }) => strikeThroughColor};
     position: absolute;
   }
 `
 
+const selectFootnoteLinkStyles = ({
+  footnoteLinkColor,
+  footnoteLinkFontName,
+  footnoteLinkFontWeight
+}) => {
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight
+  }
+}
+
 const PriceLockup = ({
   size = 'medium',
   signDirection = 'left',
@@ -77,6 +90,7 @@ const PriceLockup = ({
   variant = {},
   ...rest
 }) => {
+  const viewport = useViewport()
   const {
     footnoteMarginTop,
     footnoteGap,
@@ -85,11 +99,18 @@ const PriceLockup = ({
     bottomLinksMarginLeft,
     topTextMarginBottom,
     strikeThroughHeight,
-    strikeThroughBackground,
+    strikeThroughColor,
     fontColor,
-    dividerColor
-  } = useThemeTokens('PriceLockup', priceLockupTokens, variant)
-
+    dividerColor,
+    footnoteLinkFontSize,
+    ...themeTokens
+  } = useThemeTokens(
+    'PriceLockup',
+    priceLockupTokens,
+    { ...variant, size },
+    { viewport, strikeThrough }
+  )
+  const typographyTokens = getTypographyTokens(themeTokens)
   const priceString = String(price)
   const lastDotPosition = priceString.lastIndexOf('.')
   const lastCommaPosition = priceString.lastIndexOf(',')
@@ -102,29 +123,32 @@ const PriceLockup = ({
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
 
-  const color = strikeThrough ? strikeThroughBackground : fontColor
-
   const renderTypography = (value, tokens) => (
-    <Typography tokens={{ ...tokens, color }}>{value}</Typography>
+    <Typography tokens={{ ...tokens, color: fontColor }}>{value}</Typography>
   )
 
   const renderCurrencySymbol = () =>
-    renderTypography(`${currencySymbol}`, typographyTokens.dollarSign[size])
+    renderTypography(`${currencySymbol}`, typographyTokens.dollarSign)
 
   const renderFootnoteLinks = () =>
     footnoteLinks && footnoteLinks.length > 0 ? (
-      <FootnoteLink number={footnoteLinks} onClick={onClickFootnote} />
+      <FootnoteLink
+        fontSize={footnoteLinkFontSize}
+        tokens={selectFootnoteLinkStyles(themeTokens)}
+        number={footnoteLinks}
+        onClick={onClickFootnote}
+      />
     ) : null
 
   const renderAmount = () => {
-    const amountComponent = renderTypography(amount, typographyTokens.amount[size])
+    const amountComponent = renderTypography(amount, typographyTokens.amount)
     if (strikeThrough) {
       return (
         <>
           <A11yText text={a11yText} />
           <StrikeThroughContainer
             strikeThroughHeight={`${strikeThroughHeight}px`}
-            strikeThroughBackground={strikeThroughBackground}
+            strikeThroughColor={strikeThroughColor}
           >
             {amountComponent}
           </StrikeThroughContainer>
@@ -140,12 +164,10 @@ const PriceLockup = ({
       <PriceContainer priceMarginBottom={`${priceMarginBottom}px`}>
         {signDirection === 'left' && renderCurrencySymbol()}
         {renderAmount()}
-        {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents[size])}
+        {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents)}
         {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
         {rateText && (
-          <RateTextContainer>
-            {renderTypography(rateText, typographyTokens.rate[size])}
-          </RateTextContainer>
+          <RateTextContainer>{renderTypography(rateText, typographyTokens.rate)}</RateTextContainer>
         )}
         {!bottomText && footnoteLinks.length <= 3 && (
           <BottomLinksContainer bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
@@ -164,7 +186,7 @@ const PriceLockup = ({
         footnoteGap={`${footnoteGap}px`}
       >
         <BottomTextContainer bottomTextMarginTop={`${bottomTextMarginTop}px`}>
-          {renderTypography(bottomText, typographyTokens.bottomText[size])}
+          {renderTypography(bottomText, typographyTokens.bottomText)}
         </BottomTextContainer>
         {footnoteLinks.length <= 3 && renderFootnoteLinks()}
       </FootnoteContainer>
@@ -180,12 +202,16 @@ const PriceLockup = ({
     <PriceLockupContainer {...selectProps(rest)}>
       {topText && (
         <TopTextContainer topTextMarginBottom={`${topTextMarginBottom}px`}>
-          {renderTypography(topText, typographyTokens.topText[size])}
+          {renderTypography(topText, typographyTokens.topText)}
         </TopTextContainer>
       )}
       {renderPrice()}
       {bottomText && (
-        <Divider testID="price-lockup-divider" role="separator" tokens={{ color: dividerColor }} />
+        <Divider
+          testID="price-lockup-divider"
+          role="separator"
+          tokens={{ color: dividerColor ?? 'rgba(0, 0, 0, 0)' }}
+        />
       )}
       {bottomText && renderFootnoteContent()}
     </PriceLockupContainer>

package/src/PriceLockup/tokens.js

@@ -1,58 +1,38 @@
-import palette from '@telus-uds/palette-allium/build/rn/palette'
-
-const {
-  fontSize: { size14, size16, size20, size28, size36, size40, size64 },
-  lineHeight: {
-    ratio1to1,
-    ratio10to7,
-    ratio3to2,
-    ratio8to5,
-    ratio5to4,
-    ratio6to5,
-    ratio9to8,
-    ratio4to3,
-    ratio8to7
-  },
-  letterSpacing: { condensed }
-} = palette
-
-const typographyTokens = {
-  topText: {
-    small: { fontSize: size14, lineHeight: ratio10to7 },
-    medium: { fontSize: size16, lineHeight: ratio3to2 },
-    large: { fontSize: size20, lineHeight: ratio8to5 }
-  },
+// map typography tokens accordenly
+export default ({
+  topTextFontSize,
+  fontColor,
+  topTextLineHeight,
+  currencySymbolFontSize,
+  currencySymbolLineHeight,
+  currencySymbolFontWeight,
+  amountFontSize,
+  amountLineHeight,
+  amountLetterSpacing,
+  amountFontWeight,
+  centsFontSize,
+  centsLineHeight,
+  rateFontSize,
+  rateLineHeight,
+  bottomTextFontSize,
+  bottomTextLineHeight,
+  rateFontWeight,
+  centsFontWeight
+}) => ({
+  topText: { fontSize: topTextFontSize, lineHeight: topTextLineHeight },
   dollarSign: {
-    small: { fontSize: size16, lineHeight: ratio5to4 },
-    medium: { fontSize: size20, lineHeight: ratio6to5 },
-    large: { fontSize: size36, lineHeight: ratio9to8 }
+    fontSize: currencySymbolFontSize,
+    lineHeight: currencySymbolLineHeight,
+    fontWeight: currencySymbolFontWeight
   },
-  // TODO - fontWeight should have its own const on palette
   amount: {
-    small: { fontSize: size28, lineHeight: ratio1to1, letterSpacing: condensed, fontWeight: '300' },
-    medium: {
-      fontSize: size40,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
-    },
-    large: { fontSize: size64, lineHeight: ratio1to1, letterSpacing: condensed, fontWeight: '300' }
-  },
-  cents: {
-    small: { fontSize: size16, lineHeight: ratio4to3 },
-    medium: { fontSize: size20, lineHeight: ratio6to5 },
-    large: { fontSize: size36, lineHeight: ratio9to8 }
-  },
-  rate: {
-    small: { fontSize: size14, lineHeight: ratio8to7 },
-    medium: { fontSize: size16, lineHeight: ratio5to4 },
-    large: { fontSize: size20, lineHeight: ratio8to5 }
+    color: fontColor,
+    fontSize: amountFontSize,
+    lineHeight: amountLineHeight,
+    letterSpacing: amountLetterSpacing,
+    fontWeight: amountFontWeight
   },
-  bottomText: {
-    small: { fontSize: size14, lineHeight: ratio10to7 },
-    medium: { fontSize: size16, lineHeight: ratio3to2 },
-    large: { fontSize: size20, lineHeight: ratio8to5 }
-  }
-}
-
-export default typographyTokens
+  cents: { fontSize: centsFontSize, lineHeight: centsLineHeight, fontWeight: centsFontWeight },
+  rate: { fontSize: rateFontSize, lineHeight: rateLineHeight, fontWeight: rateFontWeight },
+  bottomText: { fontSize: bottomTextFontSize, lineHeight: bottomTextLineHeight }
+})

package/src/Progress/ProgressBar.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  getTokensPropType,
+  Progress,
+  selectSystemProps,
+  useThemeTokens,
+  a11yProps,
+  viewProps,
+  variantProp
+} from '@telus-uds/components-base'
+import styled from 'styled-components'
+
+// Passes React Native-oriented system props through UDS Progress
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+const { Bar: ProgressBarBase } = Progress
+const Gradient = styled.div.attrs({ 'data-testid': 'ProgressBar-Gradient' })(
+  ({ percentage, gradient: { angle, stops, type } }) => ({
+    height: '100%',
+    // As per the design specs, we need to have the gradient expanding to 100% and being
+    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
+    // to the full length of the progress bar
+    width: `${(100 * 100) / percentage}%`,
+    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
+  })
+)
+
+/**
+ * The `ProgressBar` is a visual representation of linear progression.
+ * It provides simple but important information at a quick glance.
+ * This is a  Web-specific progress bar.
+ *
+ * ## Component API
+ *
+ * Use props and tokens from the base ProgressBar component. The difference is that the
+ * `gradient` is being used here to provide gradient filling.
+ *
+ */
+const ProgressBar = ({ percentage, tokens, variant, ...rest }) => {
+  const themeTokens = useThemeTokens('ProgressBar', tokens, variant)
+  const selectedProps = selectProps(rest)
+
+  return (
+    <ProgressBarBase percentage={percentage} tokens={tokens} variant={variant} {...selectedProps}>
+      {themeTokens.gradient && <Gradient {...themeTokens} percentage={percentage} />}
+    </ProgressBarBase>
+  )
+}
+
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Percentage of completion.
+   */
+  percentage: PropTypes.number,
+  /**
+   * ProgressBar tokens.
+   */
+  tokens: getTokensPropType('ProgressBar'),
+  /**
+   * ProgressBar variant.
+   */
+  variant: variantProp.propType
+}
+
+export default ProgressBar

package/src/Progress/index.js

@@ -0,0 +1,6 @@
+import { Progress } from '@telus-uds/components-base'
+import ProgressBar from './ProgressBar'
+
+Progress.Bar = ProgressBar
+
+export default Progress

package/src/Ribbon/Ribbon.jsx

@@ -22,6 +22,8 @@ const RibbonContainer = styled.div`
   border-radius: ${({ borderRadius }) => borderRadius};
   width: fit-content;
   box-shadow: ${({ boxShadow, shouldWrap }) => shouldWrap && boxShadow};
+  border-bottom-right-radius: ${({ borderRadiusBottomLeft }) => borderRadiusBottomLeft};
+  border-bottom-left-radius: ${({ borderRadiusBottomRight }) => borderRadiusBottomRight};
 `
 
 const RibbonCurve = styled.div`
@@ -71,15 +73,18 @@ const Ribbon = ({
     paddingLeft,
     paddingRight,
     paddingTop,
-    gradient
-  } = useThemeTokens('Ribbon', tokens, variant)
-
-  const { purpose } = variant
-  const { type: gradientType, angle: gradientAngle, stops: gradientColors } = gradient
-  const isOfferPurpose = purpose === 'offer'
-  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`
-  const background = isOfferPurpose ? gradientBackground : backgroundColor
+    gradient,
+    fontColor,
+    borderRadiusBottomLeft,
+    borderRadiusBottomRight
+  } = useThemeTokens('Ribbon', tokens, { ...variant, wrap: shouldWrap })
 
+  let background = backgroundColor
+  if (gradient) {
+    const { type: gradientType, angle: gradientAngle, stops: gradientColors } = gradient
+    const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`
+    background = gradientBackground
+  }
   return (
     <RibbonWrapper left={left} top={top} data-testid="ribbon-wrapper" {...selectProps(rest)}>
       <RibbonContainer
@@ -88,8 +93,15 @@ const Ribbon = ({
         padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
         borderRadius={`${borderRadius}px`}
         boxShadow={`${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`}
+        borderRadiusBottomLeft={`${borderRadiusBottomLeft}px`}
+        borderRadiusBottomRight={`${borderRadiusBottomRight}px`}
       >
-        <Typography variant={{ size: 'micro', bold: true, inverse: true }}>{children}</Typography>
+        <Typography
+          variant={{ size: 'micro', bold: true, inverse: true }}
+          tokens={{ color: fontColor }}
+        >
+          {children}
+        </Typography>
       </RibbonContainer>
       {shouldWrap && (
         <RibbonCurve

package/src/Spinner/Spinner.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { selectSystemProps, useScrollBlocking, useThemeTokens } from '@telus-uds/components-base'
+import { Portal } from '@gorhom/portal'
 import SpinnerContent from './SpinnerContent'
 import { htmlAttrs, media } from '../utils'
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants'
@@ -86,23 +87,25 @@ const Spinner = ({
   // Full screen spinner
   if (fullScreen) {
     return (
-      <FullscreenOverlay fullScreenOverLayBackground={fullScreenOverLayBackground}>
-        <SpinnerContainer
-          inline={inline}
-          fullScreen={fullScreen}
-          aria-live="assertive"
-          {...selectProps(rest)}
-        >
-          <SpinnerContent
-            label={label}
-            overlay={true}
-            size={size}
-            thickness={thickness}
-            sizeVariant={sizeVariant}
-            isStatic={isStatic}
-          />
-        </SpinnerContainer>
-      </FullscreenOverlay>
+      <Portal>
+        <FullscreenOverlay fullScreenOverLayBackground={fullScreenOverLayBackground}>
+          <SpinnerContainer
+            inline={inline}
+            fullScreen={fullScreen}
+            aria-live="assertive"
+            {...selectProps(rest)}
+          >
+            <SpinnerContent
+              label={label}
+              overlay={true}
+              size={size}
+              thickness={thickness}
+              sizeVariant={sizeVariant}
+              isStatic={isStatic}
+            />
+          </SpinnerContainer>
+        </FullscreenOverlay>
+      </Portal>
     )
   }
 

package/src/Table/Cell.jsx

@@ -73,7 +73,10 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
-    cellPaddingBottom
+    cellPaddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = useThemeTokens('Table', tokens, variant)
   const sharedProps = {
     align,
@@ -86,6 +89,12 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
     cellBoxShadowColor
   }
 
+  const typographyTokens = {
+    fontName,
+    fontWeight,
+    fontSize
+  }
+
   switch (type) {
     case 'heading':
       return (
@@ -95,7 +104,9 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
           cellHeadingBoxShadowColor={cellHeadingBoxShadowColor}
           {...sharedProps}
         >
-          <Typography variant={{ size: 'h4' }}>{children}</Typography>
+          <Typography tokens={typographyTokens} variant={{ size: 'h4' }}>
+            {children}
+          </Typography>
         </StyledHeading>
       )
     case 'subHeading':
@@ -105,7 +116,9 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
           cellSubheadingBackground={cellSubheadingBackground}
           {...sharedProps}
         >
-          <Typography variant={{ size: 'h5' }}>{children}</Typography>
+          <Typography tokens={typographyTokens} variant={{ size: 'h5' }}>
+            {children}
+          </Typography>
         </StyledSubHeading>
       )
     case 'rowHeading':
@@ -115,14 +128,18 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left' }) => {
           cellRowHeadingBackground={cellRowHeadingBackground}
           {...sharedProps}
         >
-          <Typography variant={{ size: text === 'small' ? 'h5' : 'h4' }}>{children}</Typography>
+          <Typography tokens={typographyTokens} variant={{ size: text === 'small' ? 'h5' : 'h4' }}>
+            {children}
+          </Typography>
         </StyledRowHeading>
       )
 
     default:
       return (
         <StyledCell cellBackground={cellBackground} {...sharedProps}>
-          <Typography variant={{ size: text }}>{children}</Typography>
+          <Typography tokens={{ fontSize }} variant={{ size: text }}>
+            {children}
+          </Typography>
         </StyledCell>
       )
   }