@telus-uds/components-web 3.1.0 → 3.2.1

package/src/Breadcrumbs/Item/Item.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 import {
   Link,
   Typography,
@@ -9,10 +8,12 @@ import {
   selectSystemProps,
   useThemeTokens
 } from '@telus-uds/components-base'
-import { htmlAttrs } from '../../utils'
+import { htmlAttrs, styledComponents } from '../../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const StyledItemContainer = styled.li({
   display: 'inline-block',
   paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,

package/src/Callout/Callout.jsx

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

package/src/Card/Card.jsx

@@ -15,7 +15,7 @@ import {
   PressableCardBase,
   useResponsiveProp
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'
 import FullBleedContent, {
@@ -27,6 +27,8 @@ import ConditionalWrapper from '../shared/ConditionalWrapper'
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const { styled } = styledComponents
+
 /**
  * A basic card component, unstyled by default.
  *

package/src/Card/CardContent.jsx

@@ -7,11 +7,12 @@ import {
   useViewport,
   variantProp
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const CardContentContainer = styled.div(
   ({
     borderRadius,

package/src/Card/CardFooter.jsx

@@ -8,11 +8,12 @@ import {
   useViewport,
   variantProp
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
+import { htmlAttrs, styledComponents } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const CardFooterContainer = styled.div(
   ({ backgroundColor, borderRadius, paddingBottom, paddingLeft, paddingRight, paddingTop }) => ({
     backgroundColor,

package/src/Countdown/Countdown.jsx

@@ -15,16 +15,17 @@ import {
   StyleSheet
 } from '@telus-uds/components-base'
 import { viewports } from '@telus-uds/system-constants'
-import styled from 'styled-components'
 // Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
-import { htmlAttrs, transformGradient } from '../utils'
+import { htmlAttrs, transformGradient, styledComponents } from '../utils'
 import Segment from './Segment'
 import useCountdown from './useCountdown'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
+const { styled } = styledComponents
+
 const Container = styled.div(({ variant: { feature, inverse, large }, themeTokens, gradient }) => ({
   ...(large || feature ? { display: 'flex', flex: 0 } : {}),
   ...(feature && {

package/src/Countdown/Segment.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StackView, Typography, useCopy } from '@telus-uds/components-base'
-import styled from 'styled-components'
+import { styledComponents } from '../utils'
 import dictionary from './dictionary'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 // !TODO: put this back
 import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants'
 
+const { styled } = styledComponents
+
 // Pads with zeros on the left if it's a single digit number
 const pad = (number, segmentWidth = 2) => String(number).padStart(segmentWidth, '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,7 +19,9 @@ 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'

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

@@ -4,15 +4,18 @@ import {
   selectSystemProps,
   StackView,
   Typography,
+  useHash,
+  useInputValue,
   useResponsiveProp,
   withLinkRouter
 } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } 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({
@@ -34,16 +37,37 @@ const NavigationBar = React.forwardRef(
       heading,
       headingLevel = 'h1',
       items,
-      onChange = () => {},
+      onChange,
       selectedId,
+      value,
       LinkRouter,
       linkRouterProps,
       ...rest
     },
     ref
   ) => {
+    const { currentValue, setValue } = useInputValue({ value, initialValue: selectedId, onChange })
+
+    useHash(
+      (hash, event) => {
+        let hashItem = hash && items.find(({ href }) => hash === href)
+        if (!hashItem) {
+          const parentItem = items.find(({ items: parentItems }) =>
+            parentItems?.some(({ href }) => hash === href)
+          )
+          hashItem = parentItem?.items.find(({ href }) => hash === href)
+        }
+        const hashId = hashItem && (hashItem.id || hashItem.label)
+        if (hashId) setValue(hashId, event)
+      },
+      [items, setValue]
+    )
+
     const direction = useResponsiveProp({ xs: 'column', sm: 'row' })
-    const itemsForViewport = useResponsiveProp({ xs: collapseItems(items, selectedId), lg: items })
+    const itemsForViewport = useResponsiveProp({
+      xs: collapseItems(items, currentValue),
+      lg: items
+    })
     const openOverlayRef = React.useRef(null)
     const [openSubMenuId, setOpenSubMenuId] = React.useState(null)
     const handleSubMenuClose = (event) => {
@@ -161,14 +185,28 @@ const NavigationBar = React.forwardRef(
             const handleClick = (event) => {
               if (nestedItems) {
                 setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null)
+                return
+              }
+              if (href?.startsWith('#')) {
+                scrollToAnchor(href, event, () => setValue(itemId, event))
+              } else {
+                setValue(itemId, event)
               }
               onClick?.(event)
-              onChange?.(itemId, event)
             }
 
             const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem
             const isOpen = itemId === openSubMenuId
 
+            const scrollableNestedItems =
+              nestedItems?.map((item) => ({
+                ...item,
+                onPress: (event) => {
+                  const nestedItemId = item.id ?? item.label
+                  scrollToAnchor(item.href, event, () => setValue(nestedItemId, event))
+                }
+              })) ?? nestedItems
+
             return (
               <ItemComponent
                 ref={itemRef}
@@ -176,16 +214,16 @@ const NavigationBar = React.forwardRef(
                 href={href}
                 onClick={handleClick}
                 // TODO: refactor to pass selected ID via context
-                selectedId={selectedId}
+                selectedId={currentValue}
                 index={index}
                 LinkRouter={ItemLinkRouter}
                 linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
-                items={nestedItems}
-                selected={itemId === selectedId}
+                items={scrollableNestedItems}
+                selected={itemId === currentValue}
                 itemsContainerRef={itemsRef}
                 {...itemRest}
-                {...(nestedItems && { isOpen })}
-                {...(nestedItems && isOpen && { openOverlayRef })}
+                {...(scrollableNestedItems && { isOpen })}
+                {...(scrollableNestedItems && isOpen && { openOverlayRef })}
               >
                 {label}
               </ItemComponent>
@@ -207,7 +245,7 @@ NavigationBar.propTypes = {
    *
    * Each `item` object must contain:
    *  - `heading` - user-facing text in the tab link
-   *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
+   *  - `href` - the URL of the page linked to.
    *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
    */
   items: PropTypes.arrayOf(
@@ -242,13 +280,17 @@ NavigationBar.propTypes = {
    */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   /**
-   * Matches the `id` property of the item in `items` corresponding to the current page
+   * Initial selected item ID
    */
-  selectedId: PropTypes.string.isRequired,
+  selectedId: PropTypes.string,
   /**
    * Optional function to be called on pressing a link
    */
   onChange: PropTypes.func,
+  /**
+   * Controlled value for selected item ID
+   */
+  value: PropTypes.string,
   /**
    * Accesibility role for stackview
    */

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])
 

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/QuantitySelector.jsx

@@ -96,7 +96,7 @@ const QuantitySelector = React.forwardRef(
     }
 
     const renderLabel = () =>
-      label ? (
+      label || hint ? (
         <InputLabel
           forId={id}
           label={label}

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/ResponsiveImage/ResponsiveImage.jsx

@@ -14,9 +14,12 @@ const staticStyles = {
  * Provide different image sources for different screen sizes.
  */
 const ResponsiveImage = React.forwardRef(
-  ({ xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, loading = 'eager', ...rest }, ref) => {
+  (
+    { xsSrc, smSrc, mdSrc, lgSrc, xlSrc, fallbackSrc, alt, loading = 'eager', dataSet, ...rest },
+    ref
+  ) => {
     return (
-      <picture {...selectProps(rest)} ref={ref}>
+      <picture {...selectProps(rest)} ref={ref} {...dataSet}>
         <source srcSet={xlSrc} media={`(min-width: ${viewports.map.get(viewports.xl)}px)`} />
         <source srcSet={lgSrc} media={`(min-width: ${viewports.map.get(viewports.lg)}px)`} />
         <source srcSet={mdSrc} media={`(min-width: ${viewports.map.get(viewports.md)}px)`} />
@@ -65,7 +68,11 @@ ResponsiveImage.propTypes = {
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
-  loading: PropTypes.oneOf(['eager', 'lazy'])
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 }
 
 export default ResponsiveImage

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,