@telus-uds/components-web 2.19.4 → 2.20.0

package/lib-module/WaffleGrid/WaffleGrid.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography } from '@telus-uds/components-base';
+import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography, getTokensPropType } from '@telus-uds/components-base';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import ItemBase from '../OrderedList/ItemBase';
 import Image from '../Image';
@@ -146,6 +146,11 @@ WaffleGrid.propTypes = { ...selectedSystemPropTypes,
     ...withLinkRouter.propTypes
   })).isRequired,
 
+  /**
+   * Sets the tokens for WaffleGrid element.
+   */
+  tokens: getTokensPropType('WaffleGrid'),
+
   /**
    * Row size, optionally depending on the viewport
    */

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.62.0",
+    "@telus-uds/components-base": "1.63.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -48,11 +48,10 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "build": "npm run build:code && npm run build:docs",
+    "build": "npm run build:code",
     "build:main": "babel src -d lib",
     "build:module": "babel src -d lib-module --env-name module",
     "build:code": "npm run build:main && npm run build:module",
-    "build:docs": "babel-node --plugins=@telus-uds/babel-plugin-react-docgen generate-component-docs.js",
     "format": "prettier --write .",
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
@@ -63,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.19.4"
+  "version": "2.20.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -8,7 +8,8 @@ import {
   componentPropType,
   selectSystemProps,
   unpackFragment,
-  withLinkRouter
+  withLinkRouter,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import Item from './Item/Item'
@@ -187,6 +188,7 @@ const Breadcrumbs = ({
 
 Breadcrumbs.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Breadcrumbs'),
   ...withLinkRouter.propTypes,
   /**
    * Base URL used to build structured data.

package/src/Countdown/Countdown.jsx

@@ -8,7 +8,8 @@ import {
   selectSystemProps,
   useViewport,
   useThemeTokens,
-  applyTextStyles
+  applyTextStyles,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import { viewports } from '@telus-uds/system-constants'
 import styled from 'styled-components'
@@ -139,6 +140,7 @@ Countdown.displayName = 'Countdown'
 
 Countdown.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Countdown'),
   /**
    * Copy language identifier (`'en'` or `'fr'`) or a dictionary instance (an object with
    * the following keys: days, day, hours, hour, minutes, minute, seconds, second)

package/src/DatePicker/DatePicker.jsx

@@ -12,7 +12,8 @@ import {
   useCopy,
   useViewport,
   useThemeTokens,
-  applyTextStyles
+  applyTextStyles,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import moment from 'moment'
 import { isUndefined } from 'lodash'
@@ -309,6 +310,7 @@ DatePicker.displayName = 'DatePicker'
 
 DatePicker.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('DatePicker'),
   /**
    * A unique identifier.
    */
@@ -393,6 +395,7 @@ DatePicker.defaultProps = {
   onDateChange: () => {},
   validation: undefined,
   disabled: false,
+  tokens: undefined,
   prevTestID: '',
   nextTestID: ''
 }

package/src/Disclaimer/Disclaimer.jsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { applyTextStyles, selectSystemProps, useThemeTokens } from '@telus-uds/components-base'
+import {
+  applyTextStyles,
+  selectSystemProps,
+  useThemeTokens,
+  getTokensPropType
+} from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -30,9 +35,7 @@ const Disclaimer = ({ children, ...rest }) => {
 
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,
-  /**
-   * Children nodes that can be added
-   */
+  tokens: getTokensPropType('Disclaimer'),
   children: PropTypes.node.isRequired
 }
 

package/src/Footnote/Footnote.jsx

@@ -9,7 +9,8 @@ import {
   useCopy,
   useTheme,
   useResponsiveProp,
-  useThemeTokens
+  useThemeTokens,
+  getTokensPropType
 } from '@telus-uds/components-base'
 
 import OrderedListBase from '../OrderedList/OrderedListBase'
@@ -536,6 +537,7 @@ const dictionaryContentShape = PropTypes.shape({
 
 Footnote.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Footnote'),
   /**
    * The content.
    */

package/src/IconButton/IconButton.jsx

@@ -1,6 +1,10 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { IconButton as IconButtonBase, useThemeTokens } from '@telus-uds/components-base'
+import {
+  IconButton as IconButtonBase,
+  useThemeTokens,
+  getTokensPropType
+} from '@telus-uds/components-base'
 
 const IconButton = forwardRef(({ icon, action, tokens, variant = {}, ...iconButtonProps }, ref) => {
   const variantWithAction = action && !variant.action ? { ...variant, action } : variant
@@ -36,6 +40,7 @@ IconButton.displayName = 'IconButton'
 const propsWithoutIcon = ({ icon, ...props }) => props
 IconButton.propTypes = {
   ...propsWithoutIcon(IconButtonBase.propTypes),
+  tokens: getTokensPropType('IconButton'),
   /**
    * To set the icon to a multi-brand compatabile icon
    */
@@ -47,6 +52,6 @@ IconButton.propTypes = {
   icon: PropTypes.func
 }
 
-IconButton.defaultProps = { icon: null }
+IconButton.defaultProps = { icon: null, tokens: {} }
 
 export default IconButton

package/src/Image/Image.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base'
+import { selectSystemProps, useThemeTokens, getTokensPropType } from '@telus-uds/components-base'
 import { htmlAttrs, warn } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -67,6 +67,7 @@ Image.propTypes = {
   /**
    * The src attribute for the HTML img element.
    */
+
   src: PropTypes.string.isRequired,
   /**
    * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
@@ -89,7 +90,9 @@ Image.propTypes = {
   /**
    * Make image render as a circle or with rounded corners.
    */
-  rounded: PropTypes.oneOf(['circle', 'corners'])
+  rounded: PropTypes.oneOf(['circle', 'corners']),
+
+  tokens: getTokensPropType('Image')
 }
 
 export default Image

package/src/NavigationBar/NavigationBar.jsx

@@ -5,7 +5,8 @@ import {
   StackView,
   Typography,
   useResponsiveProp,
-  withLinkRouter
+  withLinkRouter,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
@@ -162,6 +163,7 @@ NavigationBar.displayName = 'NavigationBar'
 
 NavigationBar.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('NavigationBar'),
   ...withLinkRouter.propTypes,
   /**
    * NavigationBar pages
@@ -219,7 +221,8 @@ NavigationBar.defaultProps = {
   heading: undefined,
   headingLevel: 'h1',
   onChange: () => {},
-  accessibilityRole: ''
+  accessibilityRole: '',
+  tokens: {}
 }
 
 export default NavigationBar

package/src/OrderedList/OrderedList.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, variantProp } from '@telus-uds/components-base'
+import { selectSystemProps, getTokensPropType, variantProp } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
@@ -45,6 +45,7 @@ OrderedList.displayName = 'OrderedList'
 
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('OrderedList'),
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
@@ -55,7 +56,7 @@ OrderedList.propTypes = {
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   variant: variantProp.propType
 }
-OrderedList.defaultProps = { start: 1, variant: {} }
+OrderedList.defaultProps = { start: 1, tokens: {}, variant: {} }
 
 OrderedList.Item = Item
 

package/src/PreviewCard/PreviewCard.jsx

@@ -15,7 +15,8 @@ import {
   focusHandlerProps,
   viewProps,
   withLinkRouter,
-  useTheme
+  useTheme,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import FullBleedContent, {
@@ -161,6 +162,7 @@ PreviewCard.AuthorDate = AuthorDate
 
 PreviewCard.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('PreviewCard'),
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
    * a `PreviewCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).

package/src/Ribbon/Ribbon.jsx

@@ -138,6 +138,7 @@ const Ribbon = ({
 
 Ribbon.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Ribbon'),
   children: PropTypes.node,
   /** show/hide the ribbon fold
    * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
@@ -146,8 +147,7 @@ Ribbon.propTypes = {
   /** sets the left offset (triggers absolute positioning) */
   left: PropTypes.number,
   /** sets the top offset (triggers absolute positioning) */
-  top: PropTypes.number,
-  tokens: getTokensPropType('Ribbon')
+  top: PropTypes.number
 }
 
 export default Ribbon

package/src/Spinner/Spinner.jsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, useScrollBlocking, useThemeTokens } from '@telus-uds/components-base'
+import {
+  selectSystemProps,
+  useScrollBlocking,
+  useThemeTokens,
+  getTokensPropType
+} from '@telus-uds/components-base'
 import { Portal } from '@gorhom/portal'
 import SpinnerContent from './SpinnerContent'
 import { htmlAttrs, media } from '../utils'
@@ -156,6 +161,7 @@ const Spinner = ({
 
 Spinner.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Spinner'),
   /**
    * Content to be overlaid while the spinner is active. Can be text, any HTML element,
    * or any component.

package/src/StoryCard/StoryCard.jsx

@@ -16,7 +16,8 @@ import {
   viewProps,
   withLinkRouter,
   useThemeTokens,
-  useThemeTokensCallback
+  useThemeTokensCallback,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import FullBleedContent, {
@@ -151,6 +152,7 @@ StoryCard.displayName = 'StoryCard'
 
 StoryCard.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('StoryCard'),
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
    * a `StoryCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).

package/src/Table/Table.jsx

@@ -1,7 +1,12 @@
 import React, { useContext, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, useSafeLayoutEffect, useThemeTokens } from '@telus-uds/components-base'
+import {
+  selectSystemProps,
+  useSafeLayoutEffect,
+  useThemeTokens,
+  getTokensPropType
+} from '@telus-uds/components-base'
 import throttle from 'lodash.throttle'
 import { htmlAttrs } from '../utils'
 
@@ -100,6 +105,7 @@ const Table = ({
 
 Table.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Table'),
   children: PropTypes.node,
   /**
    * Sets text style

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -8,7 +8,8 @@ import {
   Typography,
   useCopy,
   useThemeTokens,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
@@ -168,6 +169,10 @@ TermsAndConditions.propTypes = {
       nonIndexedTitle: PropTypes.string
     })
   ]),
+  /**
+   * Sets the tokens for TermsAndConditions element.
+   */
+  tokens: getTokensPropType('TermsAndConditions'),
   /**
    * An array of nodes, strings, or a combination to be displayed in an ordered list.
    *
@@ -193,7 +198,8 @@ TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
   nonIndexedContent: [],
-  dictionary: defaultDictionary
+  dictionary: defaultDictionary,
+  tokens: {}
 }
 
 export default TermsAndConditions

package/src/Testimonial/Testimonial.jsx

@@ -6,7 +6,8 @@ import {
   selectSystemProps,
   Typography,
   useThemeTokens,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import Image from '../Image'
 import { htmlAttrs } from '../utils'
@@ -198,6 +199,7 @@ const Testimonial = ({
 
 Testimonial.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Testimonial'),
   /**
    * Testimonial content
    */

package/src/Toast/Toast.jsx

@@ -161,6 +161,7 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
 
 Toast.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Toast'),
   /**
    * If true, the toast will be displayed
    */
@@ -181,8 +182,7 @@ Toast.propTypes = {
     text: PropTypes.string.isRequired,
     LinkRouter: withLinkRouter.propTypes?.LinkRouter,
     linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
-  }),
-  tokens: getTokensPropType('Toast')
+  })
 }
 
 export default Toast

package/src/VideoPicker/VideoPicker.jsx

@@ -5,7 +5,8 @@ import {
   selectSystemProps,
   StackView,
   useThemeTokens,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 
 import styled, { css } from 'styled-components'
@@ -141,6 +142,7 @@ const VideoPicker = ({
 
 VideoPicker.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('VideoPicker'),
   /**
    * Id of the currently selected video (defaults to the first video if not set).
    */

package/src/WaffleGrid/WaffleGrid.jsx

@@ -9,7 +9,8 @@ import {
   useThemeTokens,
   withLinkRouter,
   useViewport,
-  Typography
+  Typography,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import ItemBase from '../OrderedList/ItemBase'
@@ -126,6 +127,7 @@ WaffleGrid.propTypes = {
        * The text displayed under the image
        */
       text: PropTypes.string,
+
       /**
        * Target URL
        */
@@ -133,6 +135,10 @@ WaffleGrid.propTypes = {
       ...withLinkRouter.propTypes
     })
   ).isRequired,
+  /**
+   * Sets the tokens for WaffleGrid element.
+   */
+  tokens: getTokensPropType('WaffleGrid'),
   /**
    * Row size, optionally depending on the viewport
    */