@telus-uds/components-web 2.26.0 → 2.28.0

package/package.json

@@ -5,18 +5,37 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.71.0",
+    "@telus-uds/components-base": "1.73.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
+    "moment": "2.29.4",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.47.0",
+    "@telus-uds/system-theme-tokens": "^2.49.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
-    "moment": "2.29.4"
+    "semver": "^7.5.4"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib-module/index.js",
+      "require": "./lib/index.js"
+    },
+    "./*": {
+      "import": "./lib-module/*/index.js",
+      "require": "./lib/*/index.js"
+    },
+    "./server": {
+      "import": "./lib-module/server.js",
+      "require": "./lib/server.js"
+    },
+    "./server/*": {
+      "import": "./lib-module/*/server.js",
+      "require": "./lib/server/*/server.js"
+    }
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
@@ -27,6 +46,8 @@
     "assert": "^2.0.0",
     "babel-plugin-react-native-web": "^0.18.7",
     "babel-plugin-styled-components": "^2.0.6",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "jest-axe": "^6.0.0",
     "jest-styled-components": "^7.0.8",
     "react-test-renderer": "~18.0.0",
@@ -62,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.26.0"
+  "version": "2.28.0"
 }

package/src/DatePicker/DatePicker.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react'
+import React, { forwardRef, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
@@ -13,10 +13,12 @@ import {
   useViewport,
   useThemeTokens,
   applyTextStyles,
-  getTokensPropType
+  getTokensPropType,
+  Portal,
+  useSafeLayoutEffect
 } from '@telus-uds/components-base'
 import moment from 'moment'
-import { isUndefined } from 'lodash'
+import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
@@ -48,6 +50,12 @@ const DateInputWrapper = styled.div({
   flexDirection: 'column'
 })
 
+const PortalPositionedContainer = styled.div({
+  position: 'absolute',
+  left: ({ left }) => `${left}px`,
+  top: ({ top }) => `${top}px`
+})
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -97,6 +105,23 @@ const DatePicker = forwardRef(
     const [inputText, setInputText] = useState(
       date instanceof moment ? date.format(dateFormat) : ''
     )
+    const textInputRef = useRef()
+    const [datePickerPosition, setDatePickerPosition] = useState({ left: 0, top: 0 })
+
+    useSafeLayoutEffect(() => {
+      const updateDimensions = () => {
+        if (inline) return
+        const { left, top } = textInputRef.current.getBoundingClientRect()
+        setDatePickerPosition({
+          left,
+          top: top + textInputRef.current.offsetHeight
+        })
+      }
+      const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
+      updateDimensions()
+      window.addEventListener('resize', throttledUpdateDimensions)
+      return () => window.removeEventListener('resize', throttledUpdateDimensions)
+    }, [])
 
     const [isFocused, setIsFocused] = useState(false)
     const [isClickedInside, setIsClickedInside] = useState(false)
@@ -204,19 +229,7 @@ const DatePicker = forwardRef(
       />
     )
     return (
-      <CalendarContainer
-        {...selectProps(rest)}
-        daySize={daySize}
-        validation={validation}
-        remainingTokens={{
-          ...remainingTokens
-        }}
-        calendarDayDefaultHeight={circleSize}
-        calendarDayDefaultWidth={circleSize}
-        calendarMonthFontTokens={calendarMonthFontTokens}
-        calendarWeekFontTokens={calendarWeekFontTokens}
-        defaultFontTokens={defaultFontTokens}
-      >
+      <>
         {inline ? (
           <>
             <HiddenInputFieldContainer
@@ -225,65 +238,30 @@ const DatePicker = forwardRef(
             >
               <input ref={ref} id={id} type="text" value={inputText} readOnly />
             </HiddenInputFieldContainer>
-            <DayPickerSingleDateController
-              date={inputDate}
-              onDateChange={onChange}
-              focused={isFocused}
-              onFocusChange={onFocusChange}
-              numberOfMonths={1}
-              hideKeyboardShortcutsPanel={true}
-              keepOpenOnDateSelect={false}
+            <CalendarContainer
+              {...selectProps(rest)}
               daySize={daySize}
-              renderNavPrevButton={renderPrevButton}
-              renderNavNextButton={renderNextButton}
-              isOutsideRange={isDayDisabled}
-              phrases={getCopy()}
-              renderMonthElement={({ month }) => (
-                <MonthCenterContainer>
-                  <div>
-                    {dictionary[copy]
-                      ? dictionary[copy].months[month.month()]
-                      : month.format('MMMM')}{' '}
-                    {month.year()}
-                  </div>
-                </MonthCenterContainer>
-              )}
-              renderWeekHeaderElement={(day) => (
-                <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
-              )}
-            />
-          </>
-        ) : (
-          <DateInputWrapper onMouseDown={handleMouseDown} onFocus={handleFocus}>
-            <TextInput
-              copy={copy}
-              feedback={feedback}
-              hint={hint}
-              placeholder="DD / MM / YYYY"
-              onChange={onChangeInput}
-              tooltip={tooltip}
-              hintPosition={hintPosition}
-              label={dictionary[copy]?.roleDescription ?? label}
-              value={inputText}
               validation={validation}
-              inactive={disabled}
+              remainingTokens={remainingTokens}
+              calendarDayDefaultHeight={circleSize}
+              calendarDayDefaultWidth={circleSize}
+              calendarMonthFontTokens={calendarMonthFontTokens}
+              calendarWeekFontTokens={calendarWeekFontTokens}
+              defaultFontTokens={defaultFontTokens}
             >
-              <SingleDatePicker
+              <DayPickerSingleDateController
                 date={inputDate}
-                disabled={disabled}
                 onDateChange={onChange}
                 focused={isFocused}
                 onFocusChange={onFocusChange}
                 numberOfMonths={1}
                 hideKeyboardShortcutsPanel={true}
-                keepOpenOnDateSelect={true}
+                keepOpenOnDateSelect={false}
                 daySize={daySize}
-                ref={ref}
                 renderNavPrevButton={renderPrevButton}
+                renderNavNextButton={renderNextButton}
                 isOutsideRange={isDayDisabled}
                 phrases={getCopy()}
-                id={id}
-                renderNavNextButton={renderNextButton}
                 renderMonthElement={({ month }) => (
                   <MonthCenterContainer>
                     <div>
@@ -298,10 +276,94 @@ const DatePicker = forwardRef(
                   <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
                 )}
               />
+            </CalendarContainer>
+          </>
+        ) : (
+          <DateInputWrapper onMouseDown={handleMouseDown} onFocus={handleFocus}>
+            <TextInput
+              copy={copy}
+              feedback={feedback}
+              hint={hint}
+              placeholder="DD / MM / YYYY"
+              onChange={onChangeInput}
+              tooltip={tooltip}
+              hintPosition={hintPosition}
+              label={dictionary[copy]?.roleDescription ?? label}
+              value={inputText}
+              validation={validation}
+              inactive={disabled}
+              ref={textInputRef}
+            >
+              <Portal>
+                {/* Because `SingleDatePicker` is an absolutely positioned element,
+                 * putting it in a `Portal` breaks view heirarchy because it doesn't
+                 * align with `TextInput`, but rather position itself with the nearest
+                 * positioned ancestor.
+                 *
+                 * This means that the `Portal` needs to be positioned absolutely,
+                 * but the `SingleDatePicker` needs to be positioned relative to the
+                 * `Portal`.
+                 *
+                 * This is accomplished by wrapping the `SingleDatePicker` in a
+                 * `PortalPositionedContainer` which positions the `SingleDatePicker`
+                 * relative to the `Portal`. This container is then positioned absolutely
+                 * relative to the `TextInput`.
+                 *
+                 * TODO: Using `floating-ui` or something like that is a more preferred and streamlined way
+                 * to position popovers and overlays.
+                 */}
+                <PortalPositionedContainer
+                  top={datePickerPosition.top}
+                  left={datePickerPosition.left}
+                >
+                  <CalendarContainer
+                    {...selectProps(rest)}
+                    daySize={daySize}
+                    validation={validation}
+                    remainingTokens={remainingTokens}
+                    calendarDayDefaultHeight={circleSize}
+                    calendarDayDefaultWidth={circleSize}
+                    calendarMonthFontTokens={calendarMonthFontTokens}
+                    calendarWeekFontTokens={calendarWeekFontTokens}
+                    defaultFontTokens={defaultFontTokens}
+                  >
+                    <SingleDatePicker
+                      date={inputDate}
+                      disabled={disabled}
+                      onDateChange={onChange}
+                      focused={isFocused}
+                      onFocusChange={onFocusChange}
+                      numberOfMonths={1}
+                      hideKeyboardShortcutsPanel={true}
+                      keepOpenOnDateSelect={true}
+                      daySize={daySize}
+                      ref={ref}
+                      renderNavPrevButton={renderPrevButton}
+                      isOutsideRange={isDayDisabled}
+                      phrases={getCopy()}
+                      id={id}
+                      renderNavNextButton={renderNextButton}
+                      renderMonthElement={({ month }) => (
+                        <MonthCenterContainer>
+                          <div>
+                            {dictionary[copy]
+                              ? dictionary[copy].months[month.month()]
+                              : month.format('MMMM')}{' '}
+                            {month.year()}
+                          </div>
+                        </MonthCenterContainer>
+                      )}
+                      renderWeekHeaderElement={(day) => (
+                        <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
+                      )}
+                    />
+                  </CalendarContainer>
+                </PortalPositionedContainer>
+              </Portal>
             </TextInput>
           </DateInputWrapper>
         )}
-      </CalendarContainer>
+      </>
     )
   }
 )

package/src/Image/Image.jsx

@@ -1,24 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base'
-import { htmlAttrs, warn } from '../utils'
+import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/components-base/server'
+import { warn } from '../utils/logger'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const StyledImage = styled.img(({ height }) => {
-  return {
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  }
-})
-const StyledRoundedImage = styled(StyledImage)`
-  border-radius: ${({ borderRadius }) => borderRadius}px;
-`
-const StyledCircularImage = styled(StyledImage)({
-  borderRadius: '50%'
-})
-
 const Image = ({
   src,
   width,
@@ -27,10 +13,11 @@ const Image = ({
   rounded,
   loading = 'eager',
   tokens,
+  theme,
   variant,
   ...rest
 }) => {
-  const { borderRadius } = useThemeTokens('Image', tokens, variant)
+  let { borderRadius } = theme
   const isCircle = rounded === 'circle'
   const isCorners = rounded === 'corners'
   const isSquare = width === height
@@ -42,19 +29,21 @@ const Image = ({
     )
   }
 
-  let ImageComponent
   if (isCircle) {
-    ImageComponent = StyledCircularImage
+    borderRadius = '50%'
   } else if (isCorners) {
-    ImageComponent = StyledRoundedImage
-  } else {
-    ImageComponent = StyledImage
+    borderRadius = '4px'
   }
 
+  const style = {
+    borderRadius,
+    height: height ?? 'auto',
+    maxWidth: '100%'
+  }
   return (
-    <ImageComponent
+    <img
       {...selectProps(rest)}
-      borderRadius={borderRadius}
+      style={style}
       src={src}
       width={width}
       height={height}
@@ -97,4 +86,6 @@ Image.propTypes = {
   tokens: getTokensPropType('Image')
 }
 
+Image.displayName = 'Image'
+
 export default Image

package/src/Image/index.js

@@ -1,3 +1,8 @@
 import Image from './Image'
+import withClientTheme from '../utils/theming/with-client-theme'
 
-export default Image
+// Exporting the unwrapped component separately for react-docgen to extract info for docsite
+export { Image as DefaultImage }
+
+const ClientThemedImage = withClientTheme(Image)
+export default ClientThemedImage

package/src/Image/server.js

@@ -0,0 +1,5 @@
+import withServerTheme from '../utils/theming/with-server-theme'
+import Image from './Image'
+
+const ServerThemedImage = withServerTheme(Image, 'Image')
+export default ServerThemedImage

package/src/OptimizeImage/OptimizeImage.jsx

@@ -69,7 +69,7 @@ const OptimizeImage = ({
           disableRetina,
           supportsWebp
         ),
-        fallbackSrc: getFallbackUrl(contentfulAssetUrl, xl, quality)
+        fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
       })
     })
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs])

package/src/OptimizeImage/utils/getFallbackUrl.js

@@ -1,8 +1,8 @@
 import isSvgUrl from './isSvgUrl'
 
-export default function getFallbackUrl(url, width, quality) {
+export default function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
-    return `${url}?w=${width}&q=${quality}`
+    return `${url}?${dimension}=${size}&q=${quality}`
   }
 
   return url

package/src/Table/Cell.jsx

@@ -59,6 +59,11 @@ const createStyledCell = (htmlElement) => styled[htmlElement]`
       ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}`
       : `inset 0 1px 0 ${cellBoxShadowColor}`
   }};
+  ${({ display }) =>
+    display &&
+    `*:not(:empty) {
+    display: ${display};
+  }`}
 `
 const StyledHeaderCell = createStyledCell('th')
 const StyledDataCell = createStyledCell('td')
@@ -81,7 +86,8 @@ const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type
     fontSize,
     lineHeight,
     stickyBackgroundColor,
-    fontColor
+    fontColor,
+    display
   } = useThemeTokens('Table', themeTokens, { spacing, type, text })
 
   const sharedProps = {
@@ -95,7 +101,8 @@ const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type
     cellPaddingLeft,
     cellPaddingBottom,
     stickyBackgroundColor,
-    cellBoxShadowColor
+    cellBoxShadowColor,
+    display
   }
 
   const typographyTokens = {

package/src/baseExports.js

@@ -22,6 +22,7 @@ export {
   Checkbox,
   CheckboxGroup,
   ChevronLink,
+  ColourToggle,
   Divider,
   ExpandCollapse,
   Feedback,

package/src/index.js

@@ -1,3 +1,5 @@
+'use client'
+
 export { default as Badge } from './Badge'
 export { default as OrderedList } from './OrderedList'
 export { default as PreviewCard } from './PreviewCard'
@@ -13,6 +15,7 @@ export { default as PriceLockup } from './PriceLockup'
 export { default as Footnote } from './Footnote'
 export { default as QuantitySelector } from './QuantitySelector'
 export { default as IconButton } from './IconButton'
+export { default as Image, DefaultImage } from './Image'
 export { transformGradient } from './utils'
 export { default as Breadcrumbs } from './Breadcrumbs'
 export { default as BlockQuote } from './BlockQuote'
@@ -20,7 +23,6 @@ export { default as OptimizeImage } from './OptimizeImage'
 export { default as Testimonial } from './Testimonial'
 export { default as Toast } from './Toast'
 export { default as Table } from './Table'
-export { default as Image } from './Image'
 export { default as WebVideo } from './WebVideo'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as Spinner } from './Spinner'

package/src/server.js

@@ -0,0 +1,5 @@
+import ServerThemedImage from './Image/server'
+
+// Export themed components
+/* eslint-disable import/prefer-default-export */
+export { ServerThemedImage as Image }

package/src/utils/theming/get-theme-from-server.js

@@ -0,0 +1,22 @@
+const cachedTheme = {}
+const theme = process.env.UDS_THEME
+
+async function importTheme(componentName) {
+  try {
+    cachedTheme[componentName] = await import(
+      `@telus-uds/theme-${theme}/build/rn/${componentName}.js`
+    )
+  } catch (_) {
+    throw new Error(
+      `An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`
+    )
+  }
+}
+
+export default async function getTheme(componentName) {
+  if (cachedTheme[componentName]) {
+    return cachedTheme[componentName]
+  }
+  await importTheme(componentName)
+  return cachedTheme[componentName]
+}

package/src/utils/theming/with-client-theme.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useThemeTokens } from '@telus-uds/components-base'
+
+const withClientTheme = (Component) => {
+  const UdsStyledComponent = ({ tokens: tokenOverrides, variant, ...props }) => {
+    const theme = useThemeTokens(Component.displayName, variant, tokenOverrides)
+    return <Component theme={theme} {...props} />
+  }
+
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  }
+
+  return UdsStyledComponent
+}
+
+export default withClientTheme

package/src/utils/theming/with-server-theme.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { getThemeTokens } from '@telus-uds/components-base/server'
+
+import getTheme from './get-theme-from-server'
+
+const withServerTheme = (Component, componentName) => {
+  const UdsStyledComponent = async ({ tokens: tokenOverrides, variant, ...props }) => {
+    const componentTheme = await getTheme(componentName)
+    const themeTokens = getThemeTokens(componentTheme, tokenOverrides, variant)
+    return <Component theme={themeTokens} {...props} />
+  }
+  UdsStyledComponent.propTypes = {
+    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    variant: PropTypes.string
+  }
+
+  return UdsStyledComponent
+}
+
+export default withServerTheme

package/types/WebVideo.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType } from 'react'
+import { YouTubeEvent } from 'react-youtube'
 import type { HTMLAttrs } from './common'
 
 export interface WebVideoProps extends HTMLAttrs {
@@ -10,9 +11,9 @@ export interface WebVideoProps extends HTMLAttrs {
   videoLength: number
   copy?: 'en' | 'fr'
   onStart?: () => void
-  onPlay?: () => void
-  onEnd?: () => void
-  onPause?: () => void
+  onPlay?: (event: YouTubeEvent<number>) => void
+  onEnd?: (event: YouTubeEvent<number>) => void
+  onPause?: (event: YouTubeEvent<number>) => void
 }
 
 declare const WebVideo: ComponentType<WebVideoProps>