@telus-uds/components-web 2.17.2 → 2.18.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 } from '@telus-uds/components-base';
+import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography } from '@telus-uds/components-base';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import ItemBase from '../OrderedList/ItemBase';
 import Image from '../Image';
@@ -10,19 +10,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const DEFAULT_ROW_SIZE = {
-  sm: 2,
-  lg: 3,
-  xl: 6
-};
 
-const row = (rowSize, rowBorderSize) => ({
+const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
   [`:not(:nth-of-type(${rowSize}n + 1))`]: {
-    borderLeftWidth: `${rowBorderSize}px`
+    borderLeftWidth: `${rowBorderWidth}px`
   },
   [`:nth-of-type(n+${rowSize + 1})`]: {
-    borderTopWidth: `${rowBorderSize}px`
+    borderTopWidth: `${rowBorderWidth}px`
   }
 });
 
@@ -47,9 +42,11 @@ const Item = /*#__PURE__*/styled(ItemBase).withConfig({
   } = _ref;
   return {
     display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 0,
-    flexShrink: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
     padding: `${itemPadding}px`,
     boxSizing: 'border-box',
     borderStyle: 'solid',
@@ -77,24 +74,24 @@ const Center = /*#__PURE__*/styled('div').withConfig({
 const WaffleGrid = _ref2 => {
   let {
     items,
-    rowSize = DEFAULT_ROW_SIZE,
+    rowSize = null,
     LinkRouter,
     tokens,
     variant,
     linkRouterProps,
     ...rest
   } = _ref2;
-  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant);
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, {
+    viewport
+  });
   const currentRowSize = useResponsiveProp(rowSize);
   return /*#__PURE__*/_jsx(Container, { ...selectProps(rest),
     children: items.map(child => /*#__PURE__*/_createElement(Item, { ...themeTokens,
       key: child.href,
-      rowSize: currentRowSize
+      rowSize: rowSize ? currentRowSize : themeTokens.rowSize
     }, /*#__PURE__*/_jsx(Link, {
       href: child.href,
-      variant: {
-        alternative: true
-      },
       LinkRouter: child.LinkRouter || LinkRouter,
       linkRouterProps: { ...linkRouterProps,
         ...child.linkRouterProps
@@ -106,10 +103,13 @@ const WaffleGrid = _ref2 => {
         _jsx(Image, {
           src: child.image,
           alt: child.imageAltText,
-          width: 64,
-          height: 64
+          width: 96,
+          height: 128
         }) : // Otherwise it must be an arbitrary content, which we just display by itself
-        child.image, /*#__PURE__*/_jsx("span", {
+        child.image, /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            weight: 'semibold'
+          },
           children: child.text
         })]
       })

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.59.2",
+    "@telus-uds/components-base": "1.60.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.41.0",
+    "@telus-uds/system-theme-tokens": "^2.41.1",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.17.2"
+  "version": "2.18.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -351,7 +351,25 @@ Autocomplete.propTypes = {
   /**
    * Input value for controlled usage
    */
-  value: PropTypes.string
+  value: PropTypes.string,
+  /**
+   * Can be used to set the initial items of the component
+   */
+  initialItems: PropTypes.arrayOf(
+    PropTypes.shape({ id: PropTypes.string, label: PropTypes.string })
+  ),
+  /**
+   * Initial value for the component
+   */
+  initialValue: PropTypes.string,
+  /**
+   * Boolean to set if it's readonly or not
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.oneOf(['error', 'success'])
 }
 
 export default Autocomplete

package/src/Badge/Badge.jsx

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

package/src/BlockQuote/BlockQuote.jsx

@@ -7,7 +7,8 @@ import {
   Typography,
   useThemeTokens,
   withLinkRouter,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs, transformGradient } from '../utils'
@@ -167,6 +168,14 @@ const BlockQuote = ({
 BlockQuote.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
+  tokens: getTokensPropType('BlockQuote'),
+  variant: PropTypes.exact({
+    alternative: PropTypes.bool,
+    size: PropTypes.string
+  }),
+  /**
+   * Children nodes that can be added
+   */
   children: PropTypes.node.isRequired,
   /**
    * External source's identifier (e.g. author's name)

package/src/Callout/Callout.jsx

@@ -1,7 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'
+import {
+  Icon,
+  selectSystemProps,
+  Typography,
+  useThemeTokens,
+  getTokensPropType
+} from '@telus-uds/components-base'
 
 import { htmlAttrs } from '../utils'
 
@@ -91,10 +97,14 @@ const Callout = ({
 
 Callout.propTypes = {
   ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Callout'),
   /**
    * Icon to display on the left side of the Callout
    */
   icon: PropTypes.elementType,
+  /**
+   * Children nodes that can be added
+   */
   children: PropTypes.node.isRequired,
   /**
    * To change the horizontal alignment of the Callout's text

package/src/DatePicker/DatePicker.jsx

@@ -86,6 +86,8 @@ const DatePicker = forwardRef(
       variant = {},
       validation,
       disabled,
+      prevTestID,
+      nextTestID,
       ...rest
     },
     ref
@@ -187,6 +189,7 @@ const DatePicker = forwardRef(
         }}
         icon={previousIcon}
         variant={{ size: 'small' }}
+        testID={prevTestID}
       />
     )
     const renderNextButton = ({ onClick }) => (
@@ -196,6 +199,7 @@ const DatePicker = forwardRef(
         }}
         icon={nextIcon}
         variant={{ size: 'small' }}
+        testID={nextTestID}
       />
     )
     return (
@@ -361,7 +365,19 @@ DatePicker.propTypes = {
   /**
    * Disable the input which will not open the calendar picker
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * A unique identifier for the previous icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-prev` attribute for example.
+   */
+  prevTestID: PropTypes.string,
+  /**
+   * A unique identifier for the next icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-next` attribute for example.
+   */
+  nextTestID: PropTypes.string
 }
 
 DatePicker.defaultProps = {
@@ -376,7 +392,9 @@ DatePicker.defaultProps = {
   tooltip: undefined,
   onDateChange: () => {},
   validation: undefined,
-  disabled: false
+  disabled: false,
+  prevTestID: '',
+  nextTestID: ''
 }
 
 export default DatePicker

package/src/Disclaimer/Disclaimer.jsx

@@ -30,6 +30,9 @@ const Disclaimer = ({ children, ...rest }) => {
 
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Children nodes that can be added
+   */
   children: PropTypes.node.isRequired
 }
 

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { ExpandCollapse } from '@telus-uds/components-base'
+import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, nativeID, ...rest }, ref) => {
@@ -51,10 +51,15 @@ ExpandCollapseMini.propTypes = {
    * ID for DOM element on web
    */
   nativeID: PropTypes.string,
-  children: PropTypes.node.isRequired
+  /**
+   * Children nodes that can be added
+   */
+  children: PropTypes.node.isRequired,
+  tokens: getTokensPropType('ExpandCollapseMini')
 }
 ExpandCollapseMini.defaultProps = {
   onToggle: () => {},
+  tokens: {},
   nativeID: ''
 }
 

package/src/Listbox/Listbox.jsx

@@ -5,7 +5,8 @@ import {
   ExpandCollapse,
   useThemeTokens,
   withLinkRouter,
-  ListboxContext
+  ListboxContext,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import ListboxGroup from './ListboxGroup'
 import ListboxItem from './ListboxItem'
@@ -155,7 +156,12 @@ Listbox.propTypes = {
   /**
    * To select an item by default
    */
-  selectedId: PropTypes.string
+  selectedId: PropTypes.string,
+  /**
+   * onClose event
+   */
+  onClose: PropTypes.func,
+  tokens: getTokensPropType('Listbox')
 }
 
 Listbox.Overlay = DropdownOverlay

package/src/NavigationBar/NavigationBar.jsx

@@ -209,12 +209,17 @@ NavigationBar.propTypes = {
   /**
    * Optional function to be called on pressing a link
    */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  /**
+   * Accesibility role for stackview
+   */
+  accessibilityRole: PropTypes.string
 }
 NavigationBar.defaultProps = {
   heading: undefined,
   headingLevel: 'h1',
-  onChange: () => {}
+  onChange: () => {},
+  accessibilityRole: ''
 }
 
 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 } from '@telus-uds/components-base'
+import { selectSystemProps, variantProp } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
@@ -52,9 +52,10 @@ OrderedList.propTypes = {
   /**
    * The position to start the list with.
    */
-  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  variant: variantProp.propType
 }
-OrderedList.defaultProps = { start: 1 }
+OrderedList.defaultProps = { start: 1, variant: {} }
 
 OrderedList.Item = Item
 

package/src/Ribbon/Ribbon.jsx

@@ -1,6 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'
+import {
+  selectSystemProps,
+  Typography,
+  useThemeTokens,
+  getTokensPropType
+} from '@telus-uds/components-base'
 import styled from 'styled-components'
 import { htmlAttrs } from '../utils'
 
@@ -141,7 +146,8 @@ Ribbon.propTypes = {
   /** sets the left offset (triggers absolute positioning) */
   left: PropTypes.number,
   /** sets the top offset (triggers absolute positioning) */
-  top: PropTypes.number
+  top: PropTypes.number,
+  tokens: getTokensPropType('Ribbon')
 }
 
 export default Ribbon

package/src/Toast/Toast.jsx

@@ -7,7 +7,8 @@ import {
   Typography,
   withLinkRouter,
   Spacer,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled, { keyframes, css } from 'styled-components'
 import { htmlAttrs } from '../utils'
@@ -180,7 +181,8 @@ Toast.propTypes = {
     text: PropTypes.string.isRequired,
     LinkRouter: withLinkRouter.propTypes?.LinkRouter,
     linkRouterProps: withLinkRouter.propTypes?.linkRouterProps
-  })
+  }),
+  tokens: getTokensPropType('Toast')
 }
 
 export default Toast

package/src/Video/Video.jsx

@@ -2,7 +2,12 @@ import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import fscreen from 'fscreen'
-import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base'
+import {
+  useThemeTokens,
+  selectSystemProps,
+  getTokensPropType,
+  variantProp
+} from '@telus-uds/components-base'
 import Spinner from '../Spinner'
 
 import { warn, htmlAttrs } from '../utils'
@@ -969,7 +974,9 @@ Video.propTypes = {
    * The title of the video being rendered. This is used for analytics purposes in conjunction with `analyticsTracking`.
    * @since 1.3.0
    */
-  videoTitle: PropTypes.string
+  videoTitle: PropTypes.string,
+  tokens: getTokensPropType('Video'),
+  variant: variantProp.propType
 }
 
 Video.defaultProps = {

package/src/WaffleGrid/WaffleGrid.jsx

@@ -7,7 +7,9 @@ import {
   selectSystemProps,
   useResponsiveProp,
   useThemeTokens,
-  withLinkRouter
+  withLinkRouter,
+  useViewport,
+  Typography
 } from '@telus-uds/components-base'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import ItemBase from '../OrderedList/ItemBase'
@@ -16,15 +18,13 @@ import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const DEFAULT_ROW_SIZE = { sm: 2, lg: 3, xl: 6 }
-
-const row = (rowSize, rowBorderSize) => ({
+const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
   [`:not(:nth-of-type(${rowSize}n + 1))`]: {
-    borderLeftWidth: `${rowBorderSize}px`
+    borderLeftWidth: `${rowBorderWidth}px`
   },
   [`:nth-of-type(n+${rowSize + 1})`]: {
-    borderTopWidth: `${rowBorderSize}px`
+    borderTopWidth: `${rowBorderWidth}px`
   }
 })
 
@@ -37,9 +37,11 @@ const Container = styled(OrderedListBase)({
 
 const Item = styled(ItemBase)(({ rowSize, itemPadding, itemBorderColor, rowBorderWidth }) => ({
   display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 0,
-  flexShrink: 0,
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexGrow: 1,
+  flexShrink: 1,
   padding: `${itemPadding}px`,
   boxSizing: 'border-box',
   borderStyle: 'solid',
@@ -63,35 +65,39 @@ const Center = styled('div')({
  */
 const WaffleGrid = ({
   items,
-  rowSize = DEFAULT_ROW_SIZE,
+  rowSize = null,
   LinkRouter,
   tokens,
   variant,
   linkRouterProps,
   ...rest
 }) => {
-  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant)
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, { viewport })
   const currentRowSize = useResponsiveProp(rowSize)
 
   return (
     <Container {...selectProps(rest)}>
       {items.map((child) => (
-        <Item {...themeTokens} key={child.href} rowSize={currentRowSize}>
+        <Item
+          {...themeTokens}
+          key={child.href}
+          rowSize={rowSize ? currentRowSize : themeTokens.rowSize}
+        >
           <Link
             href={child.href}
-            variant={{ alternative: true }}
             LinkRouter={child.LinkRouter || LinkRouter}
             linkRouterProps={{ ...linkRouterProps, ...child.linkRouterProps }}
           >
             <Center>
               {typeof child.image === 'string' ? (
                 // Assuming that string passed is the image URL
-                <Image src={child.image} alt={child.imageAltText} width={64} height={64} />
+                <Image src={child.image} alt={child.imageAltText} width={96} height={128} />
               ) : (
                 // Otherwise it must be an arbitrary content, which we just display by itself
                 child.image
               )}
-              <span>{child.text}</span>
+              <Typography variant={{ weight: 'semibold' }}>{child.text}</Typography>
             </Center>
           </Link>
         </Item>

package/types/Callout.d.ts

@@ -6,6 +6,7 @@ export interface CalloutProps extends HTMLAttrs {
   variant?: Variant
   icon?: ElementType
   verticalAlign?: 'top' | 'middle' | 'bottom'
+  textAlignToFlex?: 'left' | 'center'
 }
 
 declare const Callout: ComponentType<CalloutProps>