@telus-uds/components-web 2.8.1 → 2.10.0

package/src/Disclaimer/Disclaimer.jsx

@@ -30,9 +30,6 @@ const Disclaimer = ({ children, ...rest }) => {
 
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,
-  /**
-   * The content
-   */
   children: PropTypes.node.isRequired
 }
 

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -39,6 +39,9 @@ ExpandCollapseMini.displayName = 'ExpandCollapseMini'
 
 ExpandCollapseMini.propTypes = {
   ...ExpandCollapseMiniControl.propTypes,
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
   onToggle: PropTypes.func,
   children: PropTypes.node.isRequired
 }

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -57,9 +57,21 @@ const ExpandCollapseMiniControl = ({
 ExpandCollapseMiniControl.propTypes = {
   ...selectedSystemPropTypes,
   ...Link.propTypes,
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
   onPress: PropTypes.func,
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
   expandTitle: PropTypes.string.isRequired,
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
   collapseTitle: PropTypes.string.isRequired,
+  /**
+   * React Native's `Pressable`'s state object
+   */
   pressableState: PropTypes.object,
   variant: PropTypes.object
 }

package/src/Footnote/Footnote.jsx

@@ -137,13 +137,19 @@ const ListItem = styled(OrderedListBase.Item)(
 )
 
 const CloseButton = styled.button(
-  ({ closeButtonBorder, closeButtonHeight, closeButtonMargin, closeButtonWidth }) => ({
+  ({
+    closeButtonBorder,
+    closeButtonHeight,
+    closeButtonBackgroundColor,
+    closeButtonMargin,
+    closeButtonWidth
+  }) => ({
     alignItems: 'center',
     borderRadius: '50%',
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: closeButtonBackgroundColor,
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -163,10 +169,16 @@ const ContentContainer = styled.div(
   })
 )
 
-const StyledCustomContentContainer = styled.div(({ color }) => ({
-  color,
-  fontFamily: 'HelveticaNow400normal'
-}))
+const StyledCustomContentContainer = styled.div(
+  ({ listItemColor, listItemFontSize, listItemLineHeight, listItemPaddingLeft }) => ({
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
+    fontFamily: 'HelveticaNow400normal'
+  })
+)
+
 const usePrevious = (value) => {
   const ref = useRef()
   useEffect(() => {
@@ -224,8 +236,6 @@ const Footnote = (props) => {
     footnoteHeaderPaddingBottom,
     headerLineHeight,
     headerFontSize,
-    headerFontName,
-    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -235,6 +245,7 @@ const Footnote = (props) => {
     listItemPaddingLeft,
     closeButtonBorderSize,
     closeButtonBorderColor,
+    closeButtonBackgroundColor,
     closeButtonHeight,
     closeButtonMarginTop,
     closeButtonMarginLeft,
@@ -401,7 +412,15 @@ const Footnote = (props) => {
     }
     if (React.isValidElement(data.content)) {
       return (
-        <StyledCustomContentContainer ref={contentRef}>{data.content}</StyledCustomContentContainer>
+        <StyledCustomContentContainer
+          listItemColor={listItemColor}
+          listItemFontSize={listItemFontSize}
+          listItemLineHeight={listItemLineHeight}
+          listItemPaddingLeft={listItemPaddingLeft}
+          ref={contentRef}
+        >
+          {data.content}
+        </StyledCustomContentContainer>
       )
     }
     return (
@@ -414,7 +433,14 @@ const Footnote = (props) => {
           listItemLineHeight={listItemLineHeight}
           listItemPaddingLeft={listItemPaddingLeft}
         >
-          <Typography>{renderStructuredContent(data.content)}</Typography>
+          <Typography
+            tokens={{
+              fontSize: listItemFontSize,
+              lineHeight: listItemLineHeight
+            }}
+          >
+            {renderStructuredContent(data.content)}
+          </Typography>
         </ListItem>
       </List>
     )
@@ -453,19 +479,20 @@ const Footnote = (props) => {
                 footnoteHeaderPaddingBottom={footnoteHeaderPaddingBottom}
                 headerMargin={headerMargin}
               >
-                <h2
-                  style={{
-                    fontSize: `${headerFontSize}px`,
-                    lineHeight: `${headerLineHeight}px`,
-                    fontFamily: `${headerFontName}${headerFontWeight}normal`
+                <Typography
+                  tokens={{
+                    fontSize: headerFontSize,
+                    lineHeight: headerLineHeight
                   }}
+                  variant={{ size: 'h4' }}
                 >
                   {getCopy('heading')}
-                </h2>
+                </Typography>
                 <CloseButton
-                  closeButtonBorder={`${closeButtonBorderSize}px solid ${closeButtonBorderColor}`}
+                  closeButtonBorder={`${closeButtonBorderSize} solid ${closeButtonBorderColor}`}
                   closeButtonWidth={`${closeButtonWidth}px`}
                   closeButtonHeight={`${closeButtonHeight}px`}
+                  closeButtonBackgroundColor={closeButtonBackgroundColor}
                   closeButtonMargin={`${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`}
                   onClick={(event) => {
                     closeFootnote(event, { returnFocus: true })

package/src/IconButton/IconButton.jsx

@@ -36,8 +36,14 @@ IconButton.displayName = 'IconButton'
 const propsWithoutIcon = ({ icon, ...props }) => props
 IconButton.propTypes = {
   ...propsWithoutIcon(IconButtonBase.propTypes),
+  /**
+   * To set the icon to a multi-brand compatabile icon
+   */
   // eslint-disable-next-line react/require-default-props
   action: PropTypes.oneOf(multiBrandIconNames),
+  /**
+   * To set a custom icon
+   */
   icon: PropTypes.func
 }
 

package/src/Listbox/Listbox.jsx

@@ -139,7 +139,13 @@ Listbox.propTypes = {
    * the last menu item.
    */
   parentRef: PropTypes.object,
+  /**
+   * `Listbox` items
+   */
   items: PropTypes.array,
+  /**
+   * To select an item by default
+   */
   selectedId: PropTypes.string
 }
 

package/src/Modal/ModalContent.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-filename-extension */
 import React, { useState } from 'react'
 import {
   Box,

package/src/NavigationBar/NavigationBar.jsx

@@ -198,6 +198,9 @@ NavigationBar.propTypes = {
    * Common navigation bar heading.
    */
   heading: PropTypes.string,
+  /**
+   * Sets the `headingLevel` of the `heading`
+   */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
   /**
    * Matches the `id` property of the item in `items` corresponding to the current page

package/src/OrderedList/Item.jsx

@@ -107,6 +107,9 @@ Item.propTypes = {
    * Item content
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
   title: PropTypes.string,
   /**
    * Item tokens

package/src/Paragraph/Paragraph.jsx

@@ -49,6 +49,9 @@ const Paragraph = ({ children, variant, tokens, testID, align, linesBetween = 1,
 Paragraph.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
+  /**
+   * Adds a `data-testid` attribute to the element for testing purposes
+   */
   testID: PropTypes.string,
   /**
    * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.

package/src/PreviewCard/AuthorDate.jsx

@@ -24,7 +24,13 @@ const AuthorDate = ({ author, date }) => {
 }
 
 AuthorDate.propTypes = {
+  /**
+   * Name of the author
+   */
   author: PropTypes.string.isRequired,
+  /**
+   * Date of the post
+   */
   date: PropTypes.string.isRequired
 }
 

package/src/PreviewCard/PreviewCard.jsx

@@ -120,20 +120,16 @@ const PreviewCard = forwardRef(
               >
                 {Boolean(tag) && (
                   <>
-                    <Typography variant={{ size: 'eyebrow', colour: 'secondary' }}>
-                      {tag}
-                    </Typography>
+                    <Typography variant={{ size: 'eyebrow' }}>{tag}</Typography>
                     <Spacer space={2} />
                   </>
                 )}
-                <Typography variant={{ size: 'h4', colour: 'secondary' }}>{title}</Typography>
+                <Typography variant={{ size: 'h4' }}>{title}</Typography>
                 {Boolean(footer) && (
                   <>
                     <Spacer space={2} />
                     {typeof footer === 'string' ? (
-                      <Typography variant={{ size: 'small', colour: 'secondary' }}>
-                        {footer}
-                      </Typography>
+                      <Typography variant={{ size: 'small' }}>{footer}</Typography>
                     ) : (
                       footer
                     )}

package/src/PriceLockup/PriceLockup.jsx

@@ -226,16 +226,53 @@ const PriceLockup = ({
 
 PriceLockup.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
   currencySymbol: PropTypes.string,
+  /**
+   * Shows additional info above the price
+   */
   topText: PropTypes.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
   price: PropTypes.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
   rateText: PropTypes.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
   bottomText: PropTypes.string,
+  /**
+   * Displays which side the currency should apperar (left, right)
+   */
   signDirection: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Shows additional link for context
+   */
   footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
   onClickFootnote: PropTypes.func,
+  /**
+   * To show price savings comparison
+   */
   strikeThrough: PropTypes.bool,
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
   a11yText: PropTypes.string
 }
 

package/src/QuantitySelector/QuantitySelector.jsx

@@ -210,25 +210,64 @@ const dictionaryContentShape = PropTypes.shape({
 })
 
 QuantitySelector.propTypes = {
+  /**
+   * The id of the input field
+   */
   id: PropTypes.string,
+  /**
+   * The minimum number allowed
+   */
   minNumber: PropTypes.number,
+  /**
+   * The maximum number allowed
+   */
   maxNumber: PropTypes.number,
+  /**
+   * The callback function that is called when the value of the input field changes
+   */
   onChange: PropTypes.func,
+  /**
+   * The default value of the input field
+   */
   defaultValue: PropTypes.number,
+  /**
+   * The label of the input field
+   */
   label: PropTypes.string,
+  /**
+   * The hint of the input field
+   */
   hint: PropTypes.string,
+  /**
+   * The position of the hint. Could be shown along side the label or below it
+   */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
+  /**
+   * Adds a question mark which will display a tooltip when clicked
+   */
   tooltip: PropTypes.string,
+  /**
+   * The accessibility label of the input field
+   */
   accessibilityLabel: PropTypes.string,
+  /**
+   * The dictionary object containing the content for the input field
+   */
   dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
+  /**
+   * The language to use for the copy.
+   */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
   variant: PropTypes.exact({
     alternative: PropTypes.bool
   }),
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  /**
+   * Sets `data-testid` attribute on the input field for testing purposes.
+   */
   testID: PropTypes.string
 }
 

package/src/Span/Span.jsx

@@ -27,6 +27,9 @@ const Span = ({ children, variant, tokens, testID, flex, ...rest }) => {
 Span.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
+  /**
+   * Adds `data-testid` attribute for testing
+   */
   testID: PropTypes.string,
   /**
    * Sets display to inline-flex so that children are laid out using the flex model.

package/src/Table/Table.jsx

@@ -87,6 +87,9 @@ const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, .
 Table.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,
+  /**
+   * Sets text style
+   */
   text: PropTypes.oneOf(['medium', 'small'])
 }
 

package/src/Toast/Toast.jsx

@@ -5,7 +5,9 @@ import {
   selectSystemProps,
   useThemeTokens,
   Typography,
-  withLinkRouter
+  withLinkRouter,
+  Spacer,
+  useViewport
 } from '@telus-uds/components-base'
 import styled, { keyframes, css } from 'styled-components'
 import { htmlAttrs } from '../utils'
@@ -86,6 +88,9 @@ const ToastContainer = styled.div`
 `
 
 const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) => {
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = useViewport()
+
   const {
     containerBackgroundColor,
     containerGap,
@@ -98,8 +103,9 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter
-  } = useThemeTokens('Toast', tokens, variant)
+    animationColorAfter,
+    chevronlinkFontWeight
+  } = useThemeTokens('Toast', tokens, variant, { viewport })
 
   // inherit ChevronLink tokens for animation colors
   const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
@@ -128,10 +134,15 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}
+      <Spacer space={2} direction="row" />
       <Typography variant={{ inverse: true }}>{copy}</Typography>
+      <Spacer space={2} direction="row" />
       {link && (
         <ChevronLink
-          variant={{ inverse: true }}
+          variant={{
+            inverse: true
+          }}
+          tokens={{ blockFontWeight: chevronlinkFontWeight }}
           href={link.href}
           LinkRouter={link.LinkRouter}
           linkRouterProps={link.linkRouterProps}
@@ -145,9 +156,21 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
 
 Toast.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * If true, the toast will be displayed
+   */
   toast: PropTypes.bool,
+  /**
+   * The copy to display in the toast
+   */
   copy: PropTypes.string.isRequired,
+  /**
+   * The headline to display in the toast (before copy)
+   */
   headline: PropTypes.string,
+  /**
+   * The link to display in the toast (after copy)
+   */
   link: PropTypes.shape({
     href: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,