@telus-uds/components-web 1.11.0 → 2.0.0

package/src/DatePicker/DatePicker.jsx

@@ -6,7 +6,7 @@ import 'react-dates/initialize'
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker'
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController'
 import {
-  Icon,
+  IconButton,
   InputSupports,
   selectSystemProps,
   useCopy,
@@ -31,8 +31,16 @@ const getResponsiveDaySize = (inline = false, viewport = 'md') => {
   return responsiveDaySize
 }
 
-const getIcon = (icon) => <Icon icon={icon} variant={{ size: 'small' }} />
+const getResponsiveCircleSize = (inline = false, viewport = 'md') => {
+  let responsiveCircleSize
+  if (viewport === 'xs') {
+    responsiveCircleSize = 26
+  } else {
+    responsiveCircleSize = inline ? 44 : 26
+  }
 
+  return responsiveCircleSize
+}
 const MonthCenterContainer = styled.div({
   display: 'flex',
   justifyContent: 'center'
@@ -82,6 +90,7 @@ const DatePicker = forwardRef(
   ) => {
     const [inputDate, setInputDate] = useState(date)
     const [isFocused, setIsFocused] = useState(false)
+
     const getCopy = useCopy({ dictionary, copy })
     const onFocusChange = ({ focused }) => {
       setIsFocused(focused)
@@ -92,9 +101,9 @@ const DatePicker = forwardRef(
     }
     const viewport = useViewport()
     const daySize = getResponsiveDaySize(inline, viewport)
+    const circleSize = getResponsiveCircleSize(inline, viewport)
 
     const value = date ?? inputDate
-
     const HiddenInputFieldContainer = styled.div`
       height: ${(props) => props.height};
       width: ${(props) => props.width};
@@ -107,9 +116,7 @@ const DatePicker = forwardRef(
       previousIcon,
       nextIcon,
       ...remainingTokens
-    } = useThemeTokens('DatePicker', tokens, variant, {
-      viewport
-    })
+    } = useThemeTokens('DatePicker', tokens, { ...variant, inline }, { viewport })
 
     const defaultFontTokens = applyTextStyles({
       fontName: remainingTokens.calendarDayDefaultFontName,
@@ -121,19 +128,40 @@ const DatePicker = forwardRef(
       fontWeight: remainingTokens.calendarMonthCaptionFontWeight
     })
 
-    const dayPickerNavigationButtonTokens = applyTextStyles({
+    const calendarWeekFontTokens = applyTextStyles({
       fontName: remainingTokens.dayPickerWeekHeaderFontName,
       fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
     })
-
+    const renderPrevButton = ({ onClick }) => (
+      <IconButton
+        onPress={() => {
+          onClick()
+        }}
+        icon={previousIcon}
+        variant={{ size: 'small' }}
+      />
+    )
+    const renderNextButton = ({ onClick }) => (
+      <IconButton
+        onPress={() => {
+          onClick()
+        }}
+        icon={nextIcon}
+        variant={{ size: 'small' }}
+      />
+    )
     return (
       <CalendarContainer
         {...selectProps(rest)}
         daySize={daySize}
         validation={validation}
-        remainingTokens={remainingTokens}
+        remainingTokens={{
+          ...remainingTokens
+        }}
+        calendarDayDefaultHeight={circleSize}
+        calendarDayDefaultWidth={circleSize}
         calendarMonthFontTokens={calendarMonthFontTokens}
-        dayPickerNavigationButtonTokens={dayPickerNavigationButtonTokens}
+        calendarWeekFontTokens={calendarWeekFontTokens}
         defaultFontTokens={defaultFontTokens}
       >
         <InputSupports
@@ -169,8 +197,8 @@ const DatePicker = forwardRef(
                 hideKeyboardShortcutsPanel={true}
                 keepOpenOnDateSelect={false}
                 daySize={daySize}
-                navPrev={getIcon(previousIcon)}
-                navNext={getIcon(nextIcon)}
+                renderNavPrevButton={renderPrevButton}
+                renderNavNextButton={renderNextButton}
                 isOutsideRange={isDayDisabled}
                 phrases={getCopy()}
                 renderMonthElement={({ month }) => (
@@ -190,22 +218,22 @@ const DatePicker = forwardRef(
             </>
           ) : (
             <SingleDatePicker
-              ref={ref}
-              id={id}
               date={value}
               onDateChange={onChange}
               focused={isFocused}
               onFocusChange={onFocusChange}
               numberOfMonths={1}
               hideKeyboardShortcutsPanel={true}
-              displayFormat="DD / MM / YYYY"
-              placeholder="DD / MM / YYYY"
-              keepOpenOnDateSelect={false}
+              keepOpenOnDateSelect={true}
               daySize={daySize}
-              navPrev={getIcon(previousIcon)}
-              navNext={getIcon(nextIcon)}
+              ref={ref}
+              renderNavPrevButton={renderPrevButton}
               isOutsideRange={isDayDisabled}
               phrases={getCopy()}
+              id={id}
+              displayFormat="DD / MM / YYYY"
+              placeholder="DD / MM / YYYY"
+              renderNavNextButton={renderNextButton}
               renderMonthElement={({ month }) => (
                 <MonthCenterContainer>
                   <div>

package/src/Footnote/Footnote.jsx

@@ -32,7 +32,6 @@ const StyledFootnote = styled.div(
     width: '100vw',
     backgroundColor: footnoteBackground,
     display: 'block',
-    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
     transform: 'translateY(100%)',
     transition: 'transform 500ms ease-out',
     '@media() (prefers-reduced-motion: reduce)': {
@@ -63,13 +62,23 @@ const StyledFootnoteHeader = styled.div({
   width: '100%'
 })
 
-const StyledHeader = styled.div(({ headerMargin }) => ({
-  alignItems: 'center',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  margin: headerMargin
-}))
+const StyledHeader = styled.div(
+  ({
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
+  }) => ({
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
+  })
+)
 
 const StyledFootnoteBody = styled.div(
   {
@@ -134,6 +143,7 @@ const CloseButton = styled.button(
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
+    backgroundColor: 'white',
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -208,6 +218,14 @@ const Footnote = (props) => {
     footnoteBodyPaddingRight,
     footnoteBodyPaddingTop,
     footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    headerFontName,
+    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -423,10 +441,23 @@ const Footnote = (props) => {
         >
           <ContentContainer maxWidth={maxWidth}>
             <StyledFootnoteHeader ref={headerRef}>
-              <StyledHeader ref={headingRef} headerMargin={headerMargin}>
-                <Typography block heading tabIndex={-1} variant={{ size: 'h4' }}>
+              <StyledHeader
+                ref={headingRef}
+                footnoteHeaderPaddingLeft={footnoteHeaderPaddingLeft}
+                footnoteHeaderPaddingRight={footnoteHeaderPaddingRight}
+                footnoteHeaderPaddingTop={footnoteHeaderPaddingTop}
+                footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
+                headerMargin={headerMargin}
+              >
+                <h2
+                  style={{
+                    fontSize: `${headerFontSize}px`,
+                    lineHeight: `${headerLineHeight}px`,
+                    fontFamily: `${headerFontName}${headerFontWeight}normal`
+                  }}
+                >
                   {getCopy('heading')}
-                </Typography>
+                </h2>
                 <CloseButton
                   closeButtonBorder={`${closeButtonBorderSize}px solid ${closeButtonBorderColor}`}
                   closeButtonWidth={`${closeButtonWidth}px`}

package/src/List/List.jsx

@@ -0,0 +1,3 @@
+import { ListBase as List } from '@telus-uds/components-base'
+
+export default List

package/src/List/ListItem.jsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base'
+
+const ListItem = forwardRef(({ children, title, ...rest }, ref) => (
+  <ListItemBase ref={ref} {...rest}>
+    {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
+    {children}
+  </ListItemBase>
+))
+ListItem.displayName = 'ListItem'
+
+ListItem.propTypes = {
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string
+}
+ListItem.defaultProps = {
+  title: undefined
+}
+
+export default ListItem

package/src/List/index.js

@@ -0,0 +1,6 @@
+import List from './List'
+import ListItem from './ListItem'
+
+List.Item = ListItem
+
+export default List

package/src/PriceLockup/PriceLockup.jsx

@@ -56,7 +56,8 @@ const StrikeThroughContainer = styled.div`
   ::before {
     content: '';
     width: 100%;
-    height: ${({ strikeThroughHeight }) => strikeThroughHeight};
+    top: ${({ strikeThroughPosition }) => `${strikeThroughPosition}px`};
+    height: ${({ strikeThroughHeight }) => `${strikeThroughHeight}px`};
     background: ${({ strikeThroughColor }) => strikeThroughColor};
     position: absolute;
   }
@@ -74,6 +75,16 @@ const selectFootnoteLinkStyles = ({
   }
 }
 
+const selectStrikeThroughTokens = ({
+  strikeThroughPosition,
+  strikeThroughHeight,
+  strikeThroughColor
+}) => ({
+  strikeThroughHeight,
+  strikeThroughPosition,
+  strikeThroughColor
+})
+
 const PriceLockup = ({
   size = 'medium',
   signDirection = 'left',
@@ -98,8 +109,6 @@ const PriceLockup = ({
     priceMarginBottom,
     bottomLinksMarginLeft,
     topTextMarginBottom,
-    strikeThroughHeight,
-    strikeThroughColor,
     fontColor,
     dividerColor,
     footnoteLinkFontSize,
@@ -146,10 +155,7 @@ const PriceLockup = ({
       return (
         <>
           <A11yText text={a11yText} />
-          <StrikeThroughContainer
-            strikeThroughHeight={`${strikeThroughHeight}px`}
-            strikeThroughColor={strikeThroughColor}
-          >
+          <StrikeThroughContainer {...selectStrikeThroughTokens(themeTokens)}>
             {amountComponent}
           </StrikeThroughContainer>
         </>

package/src/SkeletonProvider/SkeletonImage.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Skeleton } from '@telus-uds/components-base'
+
+const SkeletonImage = ({
+  rounded,
+  imgHeight,
+  size,
+  sizeIndex,
+  // Size automatically from image height, unless any size prop is passed in
+  sizePixels = !(size || sizeIndex) ? imgHeight : undefined,
+  show,
+  children
+}) => {
+  if (!show) {
+    return children
+  }
+
+  const shape = rounded !== 'circle' ? 'box' : rounded
+  return <Skeleton size={size} sizePixels={sizePixels} sizeIndex={sizeIndex} shape={shape} />
+}
+
+SkeletonImage.propTypes = {
+  imgHeight: PropTypes.number,
+  rounded: PropTypes.oneOf(['circle', 'corners']),
+  size: Skeleton.propTypes?.size,
+  sizeIndex: Skeleton.propTypes?.sizeIndex,
+  sizePixels: Skeleton.propTypes?.sizePixels,
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node
+}
+
+export default SkeletonImage

package/src/SkeletonProvider/SkeletonProvider.jsx

@@ -0,0 +1,62 @@
+import React, { Children, cloneElement } from 'react'
+import PropTypes from 'prop-types'
+import { Typography } from '@telus-uds/components-base'
+import Image from '../Image'
+import SkeletonTypography from './SkeletonTypography'
+import SkeletonImage from './SkeletonImage'
+
+const SkeletonProvider = ({ children, show }) => {
+  if (!show) {
+    return children
+  }
+
+  const mapChild = (child) => {
+    if (!child) {
+      return null
+    }
+
+    let childElement = child
+
+    if (childElement.props && 'children' in childElement.props) {
+      const { children: elementChildren } = childElement.props
+      const mappedChildren = Array.isArray(elementChildren)
+        ? elementChildren.map(mapChild)
+        : mapChild(elementChildren)
+      childElement = cloneElement(childElement, {
+        children: mappedChildren
+      })
+    }
+
+    if (childElement.type === Typography) {
+      return (
+        <SkeletonTypography {...childElement.props.skeleton} show={show}>
+          {childElement}
+        </SkeletonTypography>
+      )
+    }
+
+    if (childElement.type === Image) {
+      return (
+        <SkeletonImage
+          {...childElement.props.skeleton}
+          imgHeight={childElement.props.height}
+          rounded={childElement.props.rounded}
+          show={show}
+        >
+          {childElement}
+        </SkeletonImage>
+      )
+    }
+
+    return childElement
+  }
+
+  return <>{Children.map(children, mapChild)}</>
+}
+
+SkeletonProvider.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
+}
+
+export default SkeletonProvider

package/src/SkeletonProvider/SkeletonTypography.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Skeleton } from '@telus-uds/components-base'
+
+const SkeletonTypography = ({ show, size, sizeIndex, sizePixels, characters, lines, children }) => {
+  if (!show) {
+    return children
+  }
+
+  return (
+    <Skeleton
+      size={size}
+      sizeIndex={sizeIndex}
+      sizePixels={sizePixels}
+      characters={characters}
+      lines={lines}
+    />
+  )
+}
+
+SkeletonTypography.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  size: Skeleton.propTypes?.size,
+  sizeIndex: Skeleton.propTypes?.sizeIndex,
+  sizePixels: Skeleton.propTypes?.sizePixels,
+  characters: Skeleton.propTypes?.characters,
+  lines: Skeleton.propTypes?.lines
+}
+
+export default SkeletonTypography

package/src/SkeletonProvider/index.js

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

package/src/Table/Table.jsx

@@ -15,6 +15,7 @@ const StyledContainer = styled.div`
 const StyledTable = styled.table`
   margin: 0;
   padding: 0;
+  width: ${({ tableWidth }) => `${tableWidth}px`};
 `
 
 const TableContext = React.createContext({})
@@ -35,7 +36,7 @@ export const useTableContext = () => useContext(TableContext)
  * - Use `Table.Row` and `Table.Cell` to build up the tabular data
  * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
-const Table = ({ children, text = 'medium', tokens, variant, ...rest }) => {
+const Table = ({ children, fullWidth = false, text = 'medium', tokens, variant, ...rest }) => {
   const { tablePaddingBottom } = useThemeTokens('Table', tokens, variant)
   const containerRef = useRef()
   const tableRef = useRef()
@@ -45,8 +46,10 @@ const Table = ({ children, text = 'medium', tokens, variant, ...rest }) => {
 
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      setContainerWidth(containerRef.current.clientWidth)
-      setTableWidth(tableRef.current.clientWidth)
+      const containerClientWidth = containerRef.current.clientWidth
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth
+      setContainerWidth(containerClientWidth)
+      setTableWidth(responsiveTableWidth)
     }
 
     const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
@@ -73,7 +76,7 @@ const Table = ({ children, text = 'medium', tokens, variant, ...rest }) => {
       {...selectProps(rest)}
     >
       <TableContext.Provider value={{ text, isScrollable, tokens, variant }}>
-        <StyledTable cellSpacing={0} ref={tableRef}>
+        <StyledTable tableWidth={tableWidth} cellSpacing={0} ref={tableRef}>
           {children}
         </StyledTable>
       </TableContext.Provider>

package/src/Toast/Toast.jsx

@@ -77,6 +77,7 @@ const ToastContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
   background: ${({ containerBackgroundColor }) => containerBackgroundColor};
   gap: ${({ containerGap }) => containerGap};
   height: 0;

package/src/index.js

@@ -32,8 +32,10 @@ export { default as Video } from './Video'
 export { default as StoryCard } from './StoryCard'
 export { default as Disclaimer } from './Disclaimer'
 export { default as Card } from './Card'
+export { default as List } from './List'
 export { default as TermsAndConditions } from './TermsAndConditions'
 export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
+export { default as SkeletonProvider } from './SkeletonProvider'
 
 export * from './baseExports'