@telus-uds/components-web 3.2.0 → 3.3.0

package/src/DatePicker/CalendarContainer.jsx

@@ -1,9 +1,11 @@
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import defaultReactDatesCss from './reactDatesCss'
 
 // calendarDayDefaultHeight and calendarDayDefaultWidth
 // refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
 
+const { styled } = styledComponents
+
 const CalendarContainer = styled.div(
   ({
     daySize,

package/src/DatePicker/DatePicker.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import momentPropTypes from 'react-moment-proptypes'
 import 'react-dates/initialize'
 import { SingleDatePicker, DayPickerSingleDateController } from 'react-dates'
@@ -20,11 +19,12 @@ import moment from 'moment'
 import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-const dateFormat = 'DD / MM / YYYY'
-const dateFormatWithoutSpaces = 'DD/MM/YYYY'
+
 const getResponsiveDaySize = (inline = false, viewport = 'md') => {
   if (viewport === 'xs') {
     return inline ? undefined : 36
@@ -55,8 +55,6 @@ const PortalPositionedContainer = styled.div({
   top: ({ top }) => `${top}px`
 })
 
-const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
-
 const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
   if (initialVisibleMonth === '' || inputDate instanceof moment) {
     return null
@@ -91,6 +89,7 @@ const DatePicker = React.forwardRef(
       copy = 'en',
       id,
       date,
+      dateFormat = 'DD / MM / YYYY',
       feedback,
       inline = false,
       isDayDisabled,
@@ -105,16 +104,20 @@ const DatePicker = React.forwardRef(
       disabled = false,
       prevTestID = '',
       nextTestID = '',
-      placeholder = 'DD / MM / YYYY',
+      placeholder = dateFormat,
+
       initialVisibleMonth = '',
       ...rest
     },
     ref
   ) => {
     const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined)
+
     const [inputText, setInputText] = React.useState(
       date instanceof moment ? date.format(dateFormat) : ''
     )
+    const dateFormatWithoutSpaces = dateFormat.replace(/\s/g, '')
+
     const textInputRef = React.useRef()
     const prevButtonRef = React.useRef()
     const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
@@ -135,7 +138,7 @@ const DatePicker = React.forwardRef(
       const throttledUpdate = throttle(updateDatePickerPosition, 100, { leading: false })
 
       // Initial call to set the position
-      updateDatePickerPosition()
+      throttledUpdate()
 
       // Register event listeners
       window.addEventListener('resize', throttledUpdate)
@@ -160,7 +163,7 @@ const DatePicker = React.forwardRef(
         setInputDate(date)
         setInputText(date instanceof moment ? date.format(dateFormat) : '')
       }
-    }, [date, inputDate])
+    }, [date, inputDate, dateFormat])
 
     React.useEffect(() => {
       let timeoutId
@@ -240,7 +243,10 @@ const DatePicker = React.forwardRef(
     }
 
     const handleValidation = (inputValidation) => {
-      if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      const momentDate = moment(inputText, dateFormat, true)
+      const isValidDate = momentDate.isValid()
+
+      if (!isValidDate && inputText !== '') {
         return 'error'
       }
 
@@ -466,8 +472,11 @@ DatePicker.propTypes = {
    */
   date: momentPropTypes.momentObj,
   /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  dateFormat: PropTypes.string,
+  /**
+   * Optional date format for the date input. If not set, the default value will be `DD / MM / YYYY`
    */
   feedback: PropTypes.string,
   /**
@@ -523,7 +532,7 @@ DatePicker.propTypes = {
    */
   nextTestID: PropTypes.string,
   /**
-   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   * Optional placeholder for the date input. If not set, the default value will be equal to the `dateFormat` prop
    */
   placeholder: PropTypes.string,
   /**

package/src/DatePicker/reactDatesCss.js

@@ -1,4 +1,6 @@
-import { css } from 'styled-components'
+import { styledComponents } from '../utils'
+
+const { css } = styledComponents
 
 const defaultReactDatesCss = css`
   .PresetDateRangePicker_panel {

package/src/Disclaimer/Disclaimer.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   applyTextStyles,
   selectSystemProps,
   useThemeTokens,
   getTokensPropType
 } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Footnote/Footnote.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled, { createGlobalStyle } from 'styled-components'
 import {
   Icon,
   Portal,
@@ -15,12 +14,20 @@ import {
 } from '@telus-uds/components-base'
 
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import { htmlAttrs, media, renderStructuredContent, isElementFocusable } from '../utils'
+import {
+  htmlAttrs,
+  media,
+  renderStructuredContent,
+  isElementFocusable,
+  styledComponents
+} from '../utils'
 import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const viewportBreakpoint = 1440
 
+const { styled, createGlobalStyle } = styledComponents
+
 const GlobalBodyScrollLock = createGlobalStyle({
   'html, body': media().until('md').css({ overflow: 'hidden' })
 })

package/src/Footnote/FootnoteLink.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   applyTextStyles,
   selectSystemProps,
@@ -9,7 +8,9 @@ import {
   variantProp
 } from '@telus-uds/components-base'
 import dictionary from './dictionary'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/NavigationBar/NavigationBar.jsx

@@ -9,12 +9,13 @@ import {
   useResponsiveProp,
   withLinkRouter
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs, scrollToAnchor } from '../utils'
+import { htmlAttrs, scrollToAnchor, styledComponents } from '../utils'
 import NavigationItem from './NavigationItem'
 import NavigationSubMenu from './NavigationSubMenu'
 import collapseItems from './collapseItems'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Heading = styled.div({

package/src/NavigationBar/NavigationItem.jsx

@@ -8,8 +8,9 @@ import {
   useThemeTokensCallback,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/OrderedList/Item.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   applyTextStyles,
   getTokensPropType,
@@ -12,9 +11,11 @@ import {
   wrapStringsInText
 } from '@telus-uds/components-base'
 import ItemBase from './ItemBase'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 import { OL_COUNTER_NAME } from './constants'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const selectItemTextStyles = (
@@ -70,7 +71,7 @@ const StyledItemBase = styled(ItemBase)(
 const ItemContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
-  gap: 5
+  gap: 0
 })
 
 const Item = React.forwardRef(

package/src/OrderedList/ItemBase.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const StyledItem = styled.li({
   display: 'flex'

package/src/OrderedList/OrderedList.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
 import { OL_COUNTER_NAME } from './constants'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({

package/src/OrderedList/OrderedListBase.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import ItemBase from './ItemBase'
 
+const { styled } = styledComponents
+
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'column',

package/src/Paragraph/Paragraph.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base'
 
-import { htmlAttrs, useTypographyTheme } from '../utils'
+import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/PreviewCard/PreviewCard.jsx

@@ -17,13 +17,15 @@ import {
   useTheme,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import FullBleedContent, {
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 import AuthorDate from './AuthorDate'
 
+const { styled } = styledComponents
+
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,

package/src/PriceLockup/PriceLockup.jsx

@@ -9,10 +9,11 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
 import FootnoteLink from '../Footnote/FootnoteLink'
 import getTypographyTokens from './tokens'
-import { htmlAttrs, warn } from '../utils'
+import { htmlAttrs, warn, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -73,6 +74,10 @@ const StrikeThroughContainer = styled.div`
     position: absolute;
   }
 `
+const TypographyContainer = styled.div`
+  display: flex;
+  padding-top: ${({ paddingTop }) => `${paddingTop || 0}px`};
+`
 
 const selectFootnoteLinkStyles = ({
   footnoteLinkColor,
@@ -153,11 +158,17 @@ const PriceLockup = React.forwardRef(
     const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
 
     const renderTypography = (value, tokens, position) => {
+      const { paddingTop, ...restOfTokens } = tokens
       const customProps =
         position === 'bottom'
           ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
-          : { tokens: { ...tokens, color: fontColor } }
-      return <Typography {...customProps}>{value}</Typography>
+          : { tokens: { ...restOfTokens, color: fontColor } }
+
+      return (
+        <TypographyContainer paddingTop={paddingTop}>
+          <Typography {...customProps}>{value}</Typography>
+        </TypographyContainer>
+      )
     }
 
     const renderCurrencySymbol = () =>

package/src/PriceLockup/tokens.js

@@ -6,12 +6,14 @@ export default ({
   currencySymbolFontSize,
   currencySymbolLineHeight,
   currencySymbolFontWeight,
+  currencySymbolPaddingTop,
   amountFontSize,
   amountLineHeight,
   amountLetterSpacing,
   amountFontWeight,
   centsFontSize,
   centsLineHeight,
+  centsPaddingTop,
   rateFontSize,
   rateLineHeight,
   bottomTextFontSize,
@@ -23,7 +25,8 @@ export default ({
   dollarSign: {
     fontSize: currencySymbolFontSize,
     lineHeight: currencySymbolLineHeight,
-    fontWeight: currencySymbolFontWeight
+    fontWeight: currencySymbolFontWeight,
+    paddingTop: currencySymbolPaddingTop
   },
   amount: {
     color: fontColor,
@@ -32,7 +35,16 @@ export default ({
     letterSpacing: amountLetterSpacing,
     fontWeight: amountFontWeight
   },
-  cents: { fontSize: centsFontSize, lineHeight: centsLineHeight, fontWeight: centsFontWeight },
-  rate: { fontSize: rateFontSize, lineHeight: rateLineHeight, fontWeight: rateFontWeight },
+  cents: {
+    fontSize: centsFontSize,
+    lineHeight: centsLineHeight,
+    fontWeight: centsFontWeight,
+    paddingTop: centsPaddingTop
+  },
+  rate: {
+    fontSize: rateFontSize,
+    lineHeight: rateLineHeight,
+    fontWeight: rateFontWeight
+  },
   bottomText: { fontSize: bottomTextFontSize, lineHeight: bottomTextLineHeight }
 })

package/src/Progress/ProgressBar.jsx

@@ -10,7 +10,9 @@ import {
   variantProp,
   applyShadowToken
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 // Passes React Native-oriented system props through UDS Progress
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])

package/src/QuantitySelector/styles.js

@@ -1,4 +1,6 @@
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 export const InputField = styled.div`
   order: 1;

package/src/Ribbon/Ribbon.jsx

@@ -6,8 +6,9 @@ import {
   useThemeTokens,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Span/Span.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base'
 
-import { htmlAttrs, useTypographyTheme } from '../utils'
+import { htmlAttrs, useTypographyTheme, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Spinner/Spinner.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   selectSystemProps,
   useScrollBlocking,
@@ -9,9 +8,11 @@ import {
 } from '@telus-uds/components-base'
 import { Portal } from '@gorhom/portal'
 import SpinnerContent from './SpinnerContent'
-import { htmlAttrs, media } from '../utils'
+import { htmlAttrs, media, styledComponents } from '../utils'
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const SpinnerContainer = styled.div(({ inline, fullScreen }) => ({

package/src/Spinner/SpinnerContent.jsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   ActivityIndicator,
   StackView,
   Typography,
   selectSystemProps
 } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 import { BACKDROP_Z_INDEX, LARGE } from './constants'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Container = styled.div(({ overlay }) => ({

package/src/StoryCard/StoryCard.jsx

@@ -18,12 +18,14 @@ import {
   useThemeTokensCallback,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import FullBleedContent, {
   getFullBleedBorderRadius,
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 
+const { styled } = styledComponents
+
 // Passes React Native-oriented system props through UDS PressableCardBase
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,

package/src/Table/Cell.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled, { css } from 'styled-components'
 import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base'
+import { styledComponents } from '../utils'
 import { useTableContext } from './Table'
 
+const { styled, css } = styledComponents
+
 const HEADER_TYPE = {
   HEADING: 'heading',
   SUBHEADING: 'subHeading',

package/src/Table/Table.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   selectSystemProps,
   useSafeLayoutEffect,
@@ -8,7 +7,9 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import throttle from 'lodash.throttle'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -5,7 +5,9 @@ import {
   IconButton,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const ExpandCollapseControl = styled.div({
   alignItems: 'center',

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   Box,
   Divider,
@@ -17,9 +16,11 @@ import {
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import { htmlAttrs, media, renderStructuredContent } from '../utils'
+import { htmlAttrs, media, renderStructuredContent, styledComponents } from '../utils'
 import defaultDictionary from './dictionary'
 
+const { styled } = styledComponents
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const ContentContainer = styled.div(({ tokens }) => ({

package/src/Testimonial/Testimonial.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   Icon,
   selectSystemProps,
@@ -10,7 +9,9 @@ import {
   getTokensPropType
 } from '@telus-uds/components-base'
 import Image from '../Image'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Toast/Toast.jsx

@@ -10,8 +10,9 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
-import styled, { keyframes, css } from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
+
+const { styled, css, keyframes } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/ControlBar.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
 import {
   StackView,
   useThemeTokens,
@@ -16,7 +14,9 @@ import VideoButton from './Controls/VideoButton/VideoButton'
 import VideoMenu from './Controls/VideoMenu/VideoMenu'
 
 import videoText from '../videoText'
-import { htmlAttrs } from '../../utils'
+import { htmlAttrs, styledComponents } from '../../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/Video/ControlBar/Controls/VideoButton/VideoButton.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-
 import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
-import { htmlAttrs } from '../../../../utils'
+
+import { htmlAttrs, styledComponents } from '../../../../utils'
+
+const { styled } = styledComponents
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])