@telus-uds/components-web 4.19.1 → 5.0.0-alpha.0

package/src/Table/Table.jsx

@@ -14,14 +14,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledContainer = styled.div`
   overflow: auto;
-  padding-bottom: ${(props) => (props.isScrollable ? `${props.tablePaddingBottom}px` : 0)};
+  padding-bottom: ${(props) => (props.$isScrollable ? `${props.$tablePaddingBottom}px` : 0)};
 `
 
 const StyledTable = styled.table`
   margin: 0;
   padding: 0;
-  width: ${({ fullWidth, tableWidth }) => (fullWidth ? '100%' : `${tableWidth}px`)};
-  border: ${(props) => `${props.borderWidth}px solid ${props.borderColor}`};
+  width: ${({ $fullWidth, $tableWidth }) => ($fullWidth ? '100%' : `${$tableWidth}px`)};
+  border: ${(props) => `${props.$borderWidth}px solid ${props.$borderColor}`};
   border-collapse: collapse;
 `
 
@@ -38,91 +38,97 @@ export const useTableContext = () => React.useContext(TableContext)
  * - Right-align prices and numbers that display decimal points
  *
  * ### Building up a `Table`
- * - Use `Table.Header` and `Table.Body` as direct children of `Table`
- * - Use `Table.SubHeading` to render an intermediate data heading row
- * - Use `Table.Row` and `Table.Cell` to build up the tabular data
- * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
+ * - Use `TableHeader` and `TableBody` as direct children of `Table`
+ * - Use `TableSubHeading` to render an intermediate data heading row
+ * - Use `TableRow` and `TableCell` to build up the tabular data
+ * - Use `TableCell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
-const Table = ({
-  children,
-  spacing = 'default',
-  fullWidth = true,
-  text = 'medium',
-  tokens,
-  variant,
-  ...rest
-}) => {
-  const themeTokens = useThemeTokens('Table', tokens, variant)
-  const { tablePaddingBottom, borderColor, borderWidth } = themeTokens
-  const containerRef = React.useRef()
-  const tableRef = React.useRef()
+export const Table = React.forwardRef(
+  (
+    { children, spacing = 'default', fullWidth = true, text = 'medium', tokens, variant, ...rest },
+    ref
+  ) => {
+    const themeTokens = useThemeTokens('Table', tokens, variant)
+    const { tablePaddingBottom, borderColor, borderWidth } = themeTokens
+    const internalRef = React.useRef()
+    const containerRef = ref ?? internalRef
+    const tableRef = React.useRef()
 
-  const [containerWidth, setContainerWidth] = React.useState(0)
-  const [tableWidth, setTableWidth] = React.useState(0)
+    const [containerWidth, setContainerWidth] = React.useState(0)
+    const [tableWidth, setTableWidth] = React.useState(0)
 
-  useSafeLayoutEffect(() => {
-    const updateDimensions = () => {
-      const containerClientWidth = containerRef.current?.clientWidth
-      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current?.clientWidth
-      setContainerWidth(containerClientWidth)
-      setTableWidth(responsiveTableWidth)
-    }
+    useSafeLayoutEffect(() => {
+      const updateDimensions = () => {
+        const containerClientWidth = containerRef.current?.clientWidth
+        const responsiveTableWidth = fullWidth
+          ? containerClientWidth
+          : tableRef.current?.clientWidth
+        setContainerWidth(containerClientWidth)
+        setTableWidth(responsiveTableWidth)
+      }
 
-    const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
+      const throttledUpdateDimensions = throttle(updateDimensions, 100, { leading: false })
 
-    updateDimensions()
+      updateDimensions()
 
-    // a pretty naive way of repeating the measurement after the fonts are loaded
-    window.addEventListener('load', updateDimensions)
-    window.addEventListener('resize', throttledUpdateDimensions)
+      // a pretty naive way of repeating the measurement after the fonts are loaded
+      window.addEventListener('load', updateDimensions)
+      window.addEventListener('resize', throttledUpdateDimensions)
 
-    return () => {
-      window.removeEventListener('load', updateDimensions)
-      window.removeEventListener('resize', throttledUpdateDimensions)
-    }
-  }, [])
+      return () => {
+        window.removeEventListener('load', updateDimensions)
+        window.removeEventListener('resize', throttledUpdateDimensions)
+      }
+    }, [])
 
-  const isScrollable = tableWidth > containerWidth
-  return (
-    <StyledContainer
-      ref={containerRef}
-      isScrollable={isScrollable}
-      tablePaddingBottom={tablePaddingBottom}
-    >
-      <TableContext.Provider
-        value={{
-          text,
-          isScrollable,
-          tokens,
-          spacing,
-          variant,
-          themeTokens
-        }}
+    const isScrollable = tableWidth > containerWidth
+    return (
+      <StyledContainer
+        ref={containerRef}
+        $isScrollable={isScrollable}
+        $tablePaddingBottom={tablePaddingBottom}
       >
-        <StyledTable
-          borderColor={borderColor}
-          borderWidth={borderWidth}
-          tableWidth={tableWidth}
-          cellSpacing={0}
-          ref={tableRef}
-          fullWidth={fullWidth}
-          {...selectProps(rest)}
+        <TableContext.Provider
+          value={{
+            text,
+            isScrollable,
+            tokens,
+            spacing,
+            variant,
+            themeTokens
+          }}
         >
-          {children}
-        </StyledTable>
-      </TableContext.Provider>
-    </StyledContainer>
-  )
-}
+          <StyledTable
+            $borderColor={borderColor}
+            $borderWidth={borderWidth}
+            $tableWidth={tableWidth}
+            cellSpacing={0}
+            ref={tableRef}
+            $fullWidth={fullWidth}
+            {...selectProps(rest)}
+          >
+            {children}
+          </StyledTable>
+        </TableContext.Provider>
+      </StyledContainer>
+    )
+  }
+)
+
+Table.displayName = 'Table'
 
 Table.propTypes = {
   ...selectedSystemPropTypes,
+  /** Theme tokens for Table */
   tokens: getTokensPropType('Table'),
+  /** Table content (rows, headers, etc) */
   children: PropTypes.node,
-  /**
-   * Sets text style
-   */
-  text: PropTypes.oneOf(['medium', 'small'])
+  /** Sets text style */
+  text: PropTypes.oneOf(['medium', 'small']),
+  /** Table spacing variant */
+  spacing: PropTypes.oneOf(['default', 'compact']),
+  /** If true, table takes 100% width of container */
+  fullWidth: PropTypes.bool,
+  /** Variant for Table styling */
+  variant: PropTypes.object
 }
-
-export default Table

package/src/Table/{Body.jsx → TableBody.jsx}

@@ -1,14 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const Body = React.forwardRef(({ children }, ref) => {
+export const TableBody = React.forwardRef(({ children }, ref) => {
   return <tbody ref={ref}>{children}</tbody>
 })
 
-Body.displayName = 'Body'
+TableBody.displayName = 'TableBody'
 
-Body.propTypes = {
+TableBody.propTypes = {
   children: PropTypes.node
 }
-
-export default Body

package/src/Table/{Cell.jsx → TableCell.jsx}

@@ -33,57 +33,63 @@ const stickyStyles = ({ cellStickyShadow, stickyBackgroundColor, type }) => css`
 `
 const sharedStyles = css`
   ${({
-    isSticky,
-    align,
-    cellPaddingTop,
-    cellPaddingRight,
-    cellPaddingBottom,
-    cellPaddingLeft,
-    cellBorderWidth,
-    cellBorderColor,
-    cellBorderTopWidth,
-    cellMinWidth,
-    cellBackground,
-    cellStickyShadow,
-    stickyBackgroundColor,
-    cellBottomLeftBorderRadius,
-    cellBottomRightBorderRadius,
-    cellTopLeftBorderRadius,
-    cellTopRightBorderRadius,
-    type
+    $isSticky,
+    $align,
+    $cellPaddingTop,
+    $cellPaddingRight,
+    $cellPaddingBottom,
+    $cellPaddingLeft,
+    $cellBorderWidth,
+    $cellBorderColor,
+    $cellBorderTopWidth,
+    $cellMinWidth,
+    $cellBackground,
+    $cellStickyShadow,
+    $stickyBackgroundColor,
+    $cellBottomLeftBorderRadius,
+    $cellBottomRightBorderRadius,
+    $cellTopLeftBorderRadius,
+    $cellTopRightBorderRadius,
+    $type
   }) => css`
-    text-align: ${align};
-    min-width: ${cellMinWidth}px;
-    padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
-    background-color: ${cellBackground};
-    ${isSticky && stickyStyles({ type, cellStickyShadow, stickyBackgroundColor })};
-    border-style: ${cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none'};
-    border-color: ${cellBorderColor};
-    border-width: ${cellBorderWidth}px;
-    border-top-width: ${cellBorderTopWidth || cellBorderWidth}px;
-    border-bottom-left-radius: ${cellBottomLeftBorderRadius}px;
-    border-bottom-right-radius: ${cellBottomRightBorderRadius}px;
-    border-top-left-radius: ${cellTopLeftBorderRadius}px;
-    border-top-right-radius: ${cellTopRightBorderRadius}px;
+    text-align: ${$align};
+    min-width: ${$cellMinWidth}px;
+    padding: ${$cellPaddingTop}px ${$cellPaddingRight}px ${$cellPaddingBottom}px
+      ${$cellPaddingLeft}px;
+    background-color: ${$cellBackground};
+    ${$isSticky &&
+    stickyStyles({
+      type: $type,
+      cellStickyShadow: $cellStickyShadow,
+      stickyBackgroundColor: $stickyBackgroundColor
+    })};
+    border-style: ${$cellBorderWidth || $cellBorderTopWidth ? 'solid' : 'none'};
+    border-color: ${$cellBorderColor};
+    border-width: ${$cellBorderWidth}px;
+    border-top-width: ${$cellBorderTopWidth || $cellBorderWidth}px;
+    border-bottom-left-radius: ${$cellBottomLeftBorderRadius}px;
+    border-bottom-right-radius: ${$cellBottomRightBorderRadius}px;
+    border-top-left-radius: ${$cellTopLeftBorderRadius}px;
+    border-top-right-radius: ${$cellTopRightBorderRadius}px;
   `}
 `
 const createStyledCell = (htmlElement) => styled[htmlElement]`
   ${sharedStyles};
-  box-shadow: ${({ cellBoxShadowColor, type }) => {
-    return type === HEADER_TYPE.HEADING
-      ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}`
-      : `inset 0 1px 0 ${cellBoxShadowColor}`
+  box-shadow: ${({ $cellBoxShadowColor, $type }) => {
+    return $type === HEADER_TYPE.HEADING
+      ? `inset 0 1px 0 ${$cellBoxShadowColor}, inset 0 -1px 0 ${$cellBoxShadowColor}`
+      : `inset 0 1px 0 ${$cellBoxShadowColor}`
   }};
-  ${({ display }) =>
-    display &&
+  ${({ $display }) =>
+    $display &&
     `*:not(:empty) {
-    display: ${display};
+    display: ${$display};
   }`}
 `
 const StyledHeaderCell = createStyledCell('th')
 const StyledDataCell = createStyledCell('td')
 
-const Cell = React.forwardRef(
+export const TableCell = React.forwardRef(
   ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type = 'default' }, ref) => {
     const {
       text,
@@ -120,25 +126,25 @@ const Cell = React.forwardRef(
     } = useThemeTokens('Table', themeTokens, { spacing, type, text, ...variant })
 
     const sharedProps = {
-      align,
-      isSticky: isTableScrollable && isFirstInRow,
-      cellBackground,
-      cellMinWidth,
-      cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
-      cellPaddingTop,
-      cellPaddingRight,
-      cellPaddingLeft,
-      cellPaddingBottom,
-      cellBorderWidth,
-      cellBorderColor,
-      cellBorderTopWidth,
-      cellTopLeftBorderRadius,
-      cellTopRightBorderRadius,
-      cellBottomLeftBorderRadius,
-      cellBottomRightBorderRadius,
-      stickyBackgroundColor,
-      cellBoxShadowColor,
-      display,
+      $align: align,
+      $isSticky: isTableScrollable && isFirstInRow,
+      $cellBackground: cellBackground,
+      $cellMinWidth: cellMinWidth,
+      $cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
+      $cellPaddingTop: cellPaddingTop,
+      $cellPaddingRight: cellPaddingRight,
+      $cellPaddingLeft: cellPaddingLeft,
+      $cellPaddingBottom: cellPaddingBottom,
+      $cellBorderWidth: cellBorderWidth,
+      $cellBorderColor: cellBorderColor,
+      $cellBorderTopWidth: cellBorderTopWidth,
+      $cellTopLeftBorderRadius: cellTopLeftBorderRadius,
+      $cellTopRightBorderRadius: cellTopRightBorderRadius,
+      $cellBottomLeftBorderRadius: cellBottomLeftBorderRadius,
+      $cellBottomRightBorderRadius: cellBottomRightBorderRadius,
+      $stickyBackgroundColor: stickyBackgroundColor,
+      $cellBoxShadowColor: cellBoxShadowColor,
+      $display: display,
       ref
     }
 
@@ -153,21 +159,21 @@ const Cell = React.forwardRef(
     switch (type) {
       case HEADER_TYPE.HEADING:
         return (
-          <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+          <StyledHeaderCell scope="col" {...sharedProps} $type={type}>
             <Typography tokens={typographyTokens}>{children}</Typography>
           </StyledHeaderCell>
         )
 
       case HEADER_TYPE.SUBHEADING:
         return (
-          <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+          <StyledHeaderCell scope="col" {...sharedProps} $type={type}>
             <Typography tokens={typographyTokens}>{children}</Typography>
           </StyledHeaderCell>
         )
 
       case HEADER_TYPE.ROWHEADING:
         return (
-          <StyledHeaderCell scope="row" {...sharedProps} type={type}>
+          <StyledHeaderCell scope="row" {...sharedProps} $type={type}>
             <Typography tokens={typographyTokens}>{children}</Typography>
           </StyledHeaderCell>
         )
@@ -182,9 +188,9 @@ const Cell = React.forwardRef(
   }
 )
 
-Cell.displayName = 'Cell'
+TableCell.displayName = 'TableCell'
 
-Cell.propTypes = {
+TableCell.propTypes = {
   type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,
   children: PropTypes.node,
@@ -200,5 +206,3 @@ Cell.propTypes = {
    */
   align: PropTypes.oneOf(['left', 'center', 'right'])
 }
-
-export default Cell

package/src/Table/{Header.jsx → TableHeader.jsx}

@@ -1,26 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { getTokensPropType } from '@telus-uds/components-base'
-import Row from './Row'
+import { TableRow } from './TableRow'
 
-const Header = React.forwardRef(({ children, tokens }, ref) => {
+export const TableHeader = React.forwardRef(({ children, tokens }, ref) => {
   return (
     <thead ref={ref}>
-      <Row tokens={tokens}>
+      <TableRow tokens={tokens}>
         {React.Children.map(children, (child) =>
           // TO DO: pass type as a variant instead of prop
           React.cloneElement(child, { type: 'heading' })
         )}
-      </Row>
+      </TableRow>
     </thead>
   )
 })
 
-Header.displayName = 'Header'
+TableHeader.displayName = 'TableHeader'
 
-Header.propTypes = {
+TableHeader.propTypes = {
   children: PropTypes.node,
   tokens: getTokensPropType('Table')
 }
-
-export default Header

package/src/Table/{Row.jsx → TableRow.jsx}

@@ -5,21 +5,22 @@ import { useTableContext } from './Table'
 
 const StyledTR = styled.tr`
   &:hover {
-    background-color: ${({ tokens }) => tokens?.rowHoverBackgroundColor} !important;
+    background-color: ${({ $tokens }) => $tokens?.rowHoverBackgroundColor} !important;
   }
-  border-style: ${({ tokens }) =>
-    tokens?.rowBorderWidth || tokens?.rowBorderTopWidth ? 'solid' : 'none'};
-  border-color: ${({ tokens }) => tokens?.rowBorderColor};
-  border-width: ${({ tokens }) => `${tokens?.rowBorderWidth}` || 0}px;
-  border-top-width: ${({ tokens }) => `${tokens?.rowBorderTopWidth}` || tokens?.rowBorderWidth}px;
+  border-style: ${({ $tokens }) =>
+    $tokens?.rowBorderWidth || $tokens?.rowBorderTopWidth ? 'solid' : 'none'};
+  border-color: ${({ $tokens }) => $tokens?.rowBorderColor};
+  border-width: ${({ $tokens }) => `${$tokens?.rowBorderWidth}` || 0}px;
+  border-top-width: ${({ $tokens }) =>
+    `${$tokens?.rowBorderTopWidth}` || $tokens?.rowBorderWidth}px;
 `
 
-const Row = React.forwardRef(({ children, tokens: rowTokens }, ref) => {
+export const TableRow = React.forwardRef(({ children, tokens: rowTokens }, ref) => {
   const { themeTokens } = useTableContext()
   const mergedTokens = { ...themeTokens, ...rowTokens }
 
   return (
-    <StyledTR ref={ref} tokens={mergedTokens}>
+    <StyledTR ref={ref} $tokens={mergedTokens}>
       {React.Children.map(children, (child, index) =>
         React.cloneElement(child, { isFirstInRow: index === 0 })
       )}
@@ -27,9 +28,9 @@ const Row = React.forwardRef(({ children, tokens: rowTokens }, ref) => {
   )
 })
 
-Row.displayName = 'Row'
+TableRow.displayName = 'TableRow'
 
-Row.propTypes = {
+TableRow.propTypes = {
   tokens: PropTypes.shape({
     borderColor: PropTypes.string,
     topBorderWidth: PropTypes.string,
@@ -40,5 +41,3 @@ Row.propTypes = {
   }),
   children: PropTypes.node
 }
-
-export default Row

package/src/Table/{SubHeading.jsx → TableSubHeading.jsx}

@@ -1,24 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { getTokensPropType } from '@telus-uds/components-base'
-import Row from './Row'
+import { TableRow } from './TableRow'
 
-const Header = React.forwardRef(({ children, tokens }, ref) => {
+export const TableSubHeading = React.forwardRef(({ children, tokens }, ref) => {
   return (
-    <Row ref={ref} tokens={tokens}>
+    <TableRow ref={ref} tokens={tokens}>
       {React.Children.map(children, (child) =>
         // TO DO: pass type as a variant instead of prop
         React.cloneElement(child, { type: 'subHeading' })
       )}
-    </Row>
+    </TableRow>
   )
 })
 
-Header.displayName = 'Header'
+TableSubHeading.displayName = 'TableSubHeading'
 
-Header.propTypes = {
+TableSubHeading.propTypes = {
   children: PropTypes.node,
   tokens: getTokensPropType('Table')
 }
-
-export default Header

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {
   ExpandCollapse as ExpandCollapseBase,
+  ExpandCollapsePanel,
   IconButton,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
@@ -15,20 +16,20 @@ const ExpandCollapseControl = styled.div({
   justifyContent: 'flex-start'
 })
 
-const ExpandCollapseIconContainer = styled.div(({ tokens }) => ({
-  alignItems: tokens.expandIconContainerAlignItems,
-  justifyContent: tokens.expandIconContainerJustifyContent,
-  marginLeft: `${tokens.expandIconContainerMarginY}px`,
-  marginRight: `${tokens.expandIconContainerMarginY}px`,
-  width: tokens.expandIconContainerWidth
+const ExpandCollapseIconContainer = styled.div(({ $tokens }) => ({
+  alignItems: $tokens.expandIconContainerAlignItems,
+  justifyContent: $tokens.expandIconContainerJustifyContent,
+  marginLeft: `${$tokens.expandIconContainerMarginY}px`,
+  marginRight: `${$tokens.expandIconContainerMarginY}px`,
+  width: $tokens.expandIconContainerWidth
 }))
 
-const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
-  color: tokens.expandTitleColor,
-  fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
-  fontSize: tokens.expandTitleFontSize,
-  lineHeight: tokens.expandTitleLineHeight,
-  margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
+const ExpandCollapseTitle = styled.h4(({ $tokens }) => ({
+  color: $tokens.expandTitleColor,
+  fontFamily: `${$tokens.expandTitleFontName}${$tokens.expandTitleFontWeight}normal`,
+  fontSize: $tokens.expandTitleFontSize,
+  lineHeight: $tokens.expandTitleLineHeight,
+  margin: `${$tokens.expandTitleMarginX}px ${$tokens.expandTitleMarginY}px`
 }))
 
 const getIconButtonTokens = ({
@@ -49,7 +50,7 @@ const getIconButtonTokens = ({
   outerBorderWidth: iconOuterBorderWidth
 })
 
-const ExpandCollapse = React.forwardRef(
+export const ExpandCollapse = React.forwardRef(
   ({ children, collapseTitle, expandTitle = collapseTitle, expandLabel, collapseLabel }, ref) => {
     const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
     const {
@@ -73,7 +74,7 @@ const ExpandCollapse = React.forwardRef(
         }}
       >
         {(expandProps) => (
-          <ExpandCollapseBase.Panel
+          <ExpandCollapsePanel
             {...expandProps}
             panelId="ExpandCollapsePanel"
             controlTokens={{
@@ -93,7 +94,7 @@ const ExpandCollapse = React.forwardRef(
 
               return (
                 <ExpandCollapseControl ref={ref}>
-                  <ExpandCollapseIconContainer tokens={getTokens()}>
+                  <ExpandCollapseIconContainer $tokens={getTokens()}>
                     {/*
                       Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants 
                       Setting `accessibilityRole` to `none` for `IconButton` to render as a `div` instead of `button` to avoid nested `buttons`
@@ -106,7 +107,7 @@ const ExpandCollapse = React.forwardRef(
                       accessibilityRole="none"
                     />
                   </ExpandCollapseIconContainer>
-                  <ExpandCollapseTitle tokens={getTokens()}>
+                  <ExpandCollapseTitle $tokens={getTokens()}>
                     {expanded ? expandTitle : collapseTitle}
                   </ExpandCollapseTitle>
                 </ExpandCollapseControl>
@@ -123,7 +124,7 @@ const ExpandCollapse = React.forwardRef(
             }}
           >
             {children}
-          </ExpandCollapseBase.Panel>
+          </ExpandCollapsePanel>
         )}
       </ExpandCollapseBase>
     )
@@ -139,5 +140,3 @@ ExpandCollapse.propTypes = {
   collapseLabel: PropTypes.string,
   expandLabel: PropTypes.string
 }
-
-export default ExpandCollapse