@telus-uds/components-web 3.4.0 → 4.1.0

package/lib/{shared → esm/shared}/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, useThemeTokens } from '@telus-uds/components-base';
-import { styledComponents } from '../../../utils';
+import styled from 'styled-components';
 import { getAriaLabel, getTimestamp } from '../helpers';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
-const ButtonContainer = styled.button({
+const ButtonContainer = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContainer",
+  componentId: "components-web__sc-1edwy9o-0"
+})({
   background: 'none',
   border: 0,
   position: 'absolute',
@@ -16,7 +16,10 @@ const ButtonContainer = styled.button({
   padding: 0,
   cursor: 'pointer'
 });
-const ButtonContent = styled.div({
+const ButtonContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContent",
+  componentId: "components-web__sc-1edwy9o-1"
+})({
   background: _ref => {
     let {
       buttonBackground
@@ -79,7 +82,10 @@ const ButtonContent = styled.div({
     }
   }
 });
-const PlayIconContainer = styled.div({
+const PlayIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__PlayIconContainer",
+  componentId: "components-web__sc-1edwy9o-2"
+})({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -94,7 +100,10 @@ const PlayIconContainer = styled.div({
   borderRadius: '100%',
   transition: 'background 0.2s ease-in-out'
 });
-const DetailsContainer = styled.div({
+const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplashButtonWithDetails__DetailsContainer",
+  componentId: "components-web__sc-1edwy9o-3"
+})({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',

package/lib/{shared → esm/shared}/VideoSplash/VideoSplash.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, useViewport } from '@telus-uds/components-base';
+import styled from 'styled-components';
 import { viewports } from '@telus-uds/system-constants';
 import SplashButton from './SplashButton/SplashButton';
 import SplashButtonWithDetails from './SplashButtonWithDetails/SplashButtonWithDetails';
 import videoText from '../../Video/videoText';
-import { htmlAttrs, styledComponents } from '../../utils';
+import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  styled
-} = styledComponents;
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const SplashBackground = styled.div(_ref => {
+const SplashBackground = /*#__PURE__*/styled.div.withConfig({
+  displayName: "VideoSplash__SplashBackground",
+  componentId: "components-web__sc-1ejxt6-0"
+})(_ref => {
   let {
     videoPoster
   } = _ref;

package/lib/{utils → esm/utils}/index.js

@@ -8,5 +8,4 @@ import isElementFocusable from './isElementFocusable';
 import renderStructuredContent from './renderStructuredContent';
 import useOverlaidPosition from './useOverlaidPosition';
 import scrollToAnchor from './scrollToAnchor';
-import styledComponents from './theming/styled-components';
-export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor, styledComponents };
+export { deprecate, htmlAttrs, contentfulProps, transformGradient, useTypographyTheme, warn, media, renderStructuredContent, ssrStyles, isElementFocusable, useOverlaidPosition, scrollToAnchor };

package/lib/{utils → esm/utils}/ssr.js

@@ -1,5 +1,5 @@
+import { ServerStyleSheet } from 'styled-components';
 import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
-import styledComponents from './theming/styled-components';
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -24,9 +24,6 @@ const ssrStyles = function () {
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let router = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pages';
-  const {
-    ServerStyleSheet
-  } = styledComponents;
   const sheet = new ServerStyleSheet();
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();

package/package.json

@@ -1,20 +1,19 @@
 {
   "author": "TELUS Digital",
-  "type": "module",
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^2.5.0",
-    "@telus-uds/system-constants": "^2.0.0",
+    "@telus-uds/components-base": "^3.1.0",
+    "@telus-uds/system-constants": "^3.0.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": "^3.3.0",
+    "@telus-uds/system-theme-tokens": "^4.1.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -22,20 +21,20 @@
   },
   "exports": {
     ".": {
-      "import": "./lib/index.js",
-      "default": "./lib/index.js"
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
     },
     "./*": {
-      "import": "./lib/*/index.js",
-      "default": "./lib/index.js"
+      "import": "./lib/esm/*/index.js",
+      "require": "./lib/cjs/*/index.js"
     },
     "./server": {
-      "import": "./lib/server.js",
-      "default": "./lib/server.js"
+      "import": "./lib/esm/server.js",
+      "require": "./lib/cjs/server.js"
     },
     "./server/*": {
-      "import": "./lib/*/server.js",
-      "default": "./lib/*/server.js"
+      "import": "./lib/esm/*/server.js",
+      "require": "./lib/cjs/*/server.js"
     }
   },
   "description": "UDS mult-brand web components",
@@ -56,8 +55,8 @@
   },
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "MIT",
-  "main": "lib/index.js",
-  "module": "lib/index.js",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
   "name": "@telus-uds/components-web",
   "peerDependencies": {
     "react": "^18.2.0",
@@ -70,7 +69,9 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "build": "babel src -d lib --env-name module",
+    "build:cjs": "babel src -d lib/cjs",
+    "build:esm": "babel src -d lib/esm --env-name module",
+    "build": "npm run build:cjs && npm run build:esm",
     "format": "prettier --write .",
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
@@ -81,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "3.4.0"
+  "version": "4.1.0"
 }

package/src/Badge/Badge.jsx

@@ -6,12 +6,11 @@ import {
   getTokensPropType,
   useThemeTokens
 } from '@telus-uds/components-base'
-import { htmlAttrs, transformGradient, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs, transformGradient } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const BadgeContainer = styled.div`
   background: ${({ background }) => background};
   border: ${({ border }) => border};

package/src/BlockQuote/BlockQuote.jsx

@@ -14,12 +14,11 @@ import {
   getTokensPropType,
   StyleSheet
 } from '@telus-uds/components-base'
-import { htmlAttrs, transformGradient, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs, transformGradient } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const BlockQuoteContainer = styled.blockquote`
   margin: 0;
   position: relative;

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -13,13 +13,12 @@ import {
   useThemeTokens,
   useViewport
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 import Item from './Item/Item'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'row',

package/src/Breadcrumbs/Item/Item.jsx

@@ -8,12 +8,11 @@ import {
   selectSystemProps,
   useThemeTokens
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../../utils'
+import styled from 'styled-components'
+import { htmlAttrs } 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

@@ -7,13 +7,11 @@ import {
   useThemeTokens,
   getTokensPropType
 } from '@telus-uds/components-base'
-
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } 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 { styledComponents } from '../utils'
+import styled from 'styled-components'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'
 import FullBleedContent, {
@@ -27,8 +27,6 @@ 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,12 +7,11 @@ import {
   useViewport,
   variantProp
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const { styled } = styledComponents
-
 const CardContentContainer = styled.div(
   ({
     borderRadius,

package/src/Card/CardFooter.jsx

@@ -8,12 +8,11 @@ import {
   useViewport,
   variantProp
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } 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,20 @@ 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, styledComponents } from '../utils'
+import { htmlAttrs, transformGradient } from '../utils'
 import Segment from './Segment'
 import useCountdown from './useCountdown'
 import { countdownVariantPropType, dictionaryContentShape } from './types'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const DAYS = 'days'
+const HOURS = 'hours'
+const MINUTES = 'minutes'
+const SECONDS = 'seconds'
 
-const { styled } = styledComponents
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Container = styled.div(({ variant: { feature, inverse, large }, themeTokens, gradient }) => ({
   ...(large || feature ? { display: 'flex', flex: 0 } : {}),
@@ -69,13 +73,20 @@ const getMainTextTokens = ({
 })
 
 const Countdown = React.forwardRef(
-  ({ copy = 'en', targetTime, tokens, variant = {}, ...rest }, ref) => {
+  (
+    {
+      copy = 'en',
+      targetTime,
+      tokens,
+      variant = {},
+      units = [DAYS, HOURS, MINUTES, SECONDS],
+      ...rest
+    },
+    ref
+  ) => {
     const [days, hours, minutes, seconds] = useCountdown(targetTime)
     const viewport = useViewport()
-    const { feature, large, label, noDivider } = variant
-    if (noDivider && !label) {
-      throw new Error('`noDivider` variant can only be used with `label` enabled!')
-    }
+    const { feature, large, noDivider } = variant
 
     const { themeOptions } = useTheme()
 
@@ -190,33 +201,43 @@ const Countdown = React.forwardRef(
         media={containerMediaIds}
       >
         <StackView direction="row" space={1}>
-          <Segment
-            labelKey="day"
-            number={days}
-            segmentWidth={String(days).length}
-            {...segmentProps}
-          />
-          {divider}
-          <Segment
-            labelKey="hour"
-            number={hours}
-            {...segmentProps}
-            {...applyTextStyles(themeTokens)}
-          />
-          {divider}
-          <Segment
-            labelKey="minute"
-            number={minutes}
-            {...segmentProps}
-            {...applyTextStyles(themeTokens)}
-          />
-          {divider}
-          <Segment
-            labelKey="second"
-            number={seconds}
-            {...segmentProps}
-            {...applyTextStyles(themeTokens)}
-          />
+          {units.map((unit, index) => {
+            let number
+            let labelKey
+            switch (unit) {
+              case DAYS:
+                number = days
+                labelKey = 'day'
+                break
+              case HOURS:
+                number = hours
+                labelKey = 'hour'
+                break
+              case MINUTES:
+                number = minutes
+                labelKey = 'minute'
+                break
+              case SECONDS:
+                number = seconds
+                labelKey = 'second'
+                break
+              default:
+                return null
+            }
+
+            return (
+              <React.Fragment key={unit}>
+                <Segment
+                  labelKey={labelKey}
+                  number={number}
+                  {...(unit === DAYS && { segmentWidth: String(number).length })}
+                  {...segmentProps}
+                  {...applyTextStyles(themeTokens)}
+                />
+                {index < units.length - 1 && divider}
+              </React.Fragment>
+            )
+          })}
         </StackView>
       </Container>
     )
@@ -237,7 +258,12 @@ Countdown.propTypes = {
    * representing a point in the future to count down to.
    */
   targetTime: PropTypes.instanceOf(Date),
-  variant: countdownVariantPropType
+  variant: countdownVariantPropType,
+  /**
+   * An array of strings representing the units to display in the countdown.
+   * Possible values: `'days'`, `'hours'`, `'minutes'`, `'seconds'`
+   */
+  units: PropTypes.arrayOf(PropTypes.oneOf([DAYS, HOURS, MINUTES, SECONDS]))
 }
 
 export default Countdown

package/src/Countdown/Segment.jsx

@@ -1,14 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StackView, Typography, useCopy } from '@telus-uds/components-base'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 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,11 +1,9 @@
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 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

@@ -15,13 +15,12 @@ import {
   getTokensPropType,
   useSafeLayoutEffect
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import moment from 'moment'
 import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/DatePicker/reactDatesCss.js

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

package/src/Disclaimer/Disclaimer.jsx

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

package/src/Footnote/Footnote.jsx

@@ -12,22 +12,14 @@ import {
   useViewport,
   getTokensPropType
 } from '@telus-uds/components-base'
-
+import styled, { createGlobalStyle } from 'styled-components'
 import OrderedListBase from '../OrderedList/OrderedListBase'
-import {
-  htmlAttrs,
-  media,
-  renderStructuredContent,
-  isElementFocusable,
-  styledComponents
-} from '../utils'
+import { htmlAttrs, media, renderStructuredContent, isElementFocusable } 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

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

package/src/NavigationBar/NavigationBar.jsx

@@ -9,13 +9,12 @@ import {
   useResponsiveProp,
   withLinkRouter
 } from '@telus-uds/components-base'
-import { htmlAttrs, scrollToAnchor, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs, scrollToAnchor } 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,9 +8,8 @@ import {
   useThemeTokensCallback,
   getTokensPropType
 } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
-
-const { styled } = styledComponents
+import styled from 'styled-components'
+import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 

package/src/OrderedList/Item.jsx

@@ -10,12 +10,11 @@ import {
   useThemeTokens,
   wrapStringsInText
 } from '@telus-uds/components-base'
+import styled from 'styled-components'
 import ItemBase from './ItemBase'
-import { htmlAttrs, styledComponents } from '../utils'
+import { htmlAttrs } from '../utils'
 import { OL_COUNTER_NAME } from './constants'
 
-const { styled } = styledComponents
-
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const selectItemTextStyles = (

package/src/OrderedList/ItemBase.jsx

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

package/src/OrderedList/OrderedList.jsx

@@ -1,13 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base'
-import { htmlAttrs, styledComponents } from '../utils'
+import styled from 'styled-components'
+import { htmlAttrs } 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,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { styledComponents } from '../utils'
+import styled from 'styled-components'
 import ItemBase from './ItemBase'
 
-const { styled } = styledComponents
-
 const StyledList = styled.ol({
   display: 'flex',
   flexDirection: 'column',