@telus-uds/components-web 2.12.0 → 2.14.0

package/src/QuantitySelector/SideButton.jsx

@@ -0,0 +1,74 @@
+import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base'
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const SideButton = ({
+  isEnabled,
+  onPress,
+  onDoubleClick,
+  accessibilityLabel,
+  accessibilityDisabled,
+  tokens,
+  variant
+}) => {
+  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant)
+  const getButtonTokens = ({ buttonState, disabled }) => {
+    const {
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      ...rest
+    } = getTokens({ ...buttonState, disabled })
+
+    return {
+      ...rest,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderRadius: borderRadius,
+      outerBorderTopLeftRadius: borderTopLeftRadius,
+      outerBorderTopRightRadius: borderTopRightRadius,
+      outerBorderBottomLeftRadius: borderBottomLeftRadius,
+      outerBorderBottomRightRadius: borderBottomRightRadius,
+      outerBorderGap: 0,
+      outerBorderWidth: 0
+    }
+  }
+
+  return (
+    <IconButton
+      tokens={(buttonState) => getButtonTokens({ disabled: !isEnabled, buttonState })}
+      onPress={onPress}
+      onDoubleClick={onDoubleClick}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityDisabled={accessibilityDisabled}
+    />
+  )
+}
+
+SideButton.displayName = 'QuantitySelectorSideButton'
+
+SideButton.defaultProps = {
+  isEnabled: true,
+  onPress: () => {},
+  onDoubleClick: () => {},
+  accessibilityLabel: '',
+  accessibilityDisabled: false,
+  tokens: {},
+  variant: {}
+}
+
+SideButton.propTypes = {
+  isEnabled: PropTypes.bool,
+  onPress: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  accessibilityLabel: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  tokens: PropTypes.object,
+  variant: PropTypes.object
+}
+export default SideButton

package/src/QuantitySelector/styles.js

@@ -1,83 +1,17 @@
 import styled from 'styled-components'
 
 export const InputField = styled.div`
-  order: 2;
-  min-width: 3.5rem;
-  max-width: 5 rem;
-  height: 28px;
-  padding: 0;
-  width: 64px;
+  order: 1;
   text-align: center;
   z-index: 10;
   input {
     text-align: center;
   }
-
-  &.alternative {
-    input {
-      height: 40px;
-    }
-  }
-`
-
-const ButtonWrapper = styled.div`
-  &.alternative {
-    div[role='button'] {
-      height: 42px;
-      > div {
-        height: 40px;
-        > div {
-          padding: 12px 16px;
-        }
-      }
-    }
-  }
-`
-
-export const LeftButtonWrapper = styled(ButtonWrapper)`
-  order: 0;
-  div[role='button'] {
-    border-radius: 4px 0px 0px 4px !important;
-    > div {
-      border-right: none;
-      border-radius: 4px 0px 0px 4px !important;
-    }
-  }
-
-  &.alternative {
-    div[role='button'] {
-      border-radius: 36px 0px 0px 36px !important;
-      > div {
-        border-radius: 24px 0px 0px 24px !important;
-      }
-    }
-  }
-`
-
-export const RightButtonWrapper = styled(ButtonWrapper)`
-  order: 3;
-  div[role='button'] {
-    border-radius: 0px 4px 4px 0px !important;
-    > div {
-      border-left: none;
-      border-radius: 0px 4px 4px 0px !important;
-    }
-  }
-
-  &.alternative {
-    div[role='button'] {
-      border-radius: 0px 36px 36px 0px !important;
-      > div {
-        border-radius: 0px 36px 36px 0px !important;
-      }
-    }
-  }
 `
 
 export const InputWrapper = styled.div`
-  textalign: start;
+  text-align: start;
   display: flex;
-  flexdirection: row;
-  flexwrap: nowrap;
-  justifycontent: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
 `

package/src/Spinner/Spinner.jsx

@@ -64,6 +64,7 @@ const Spinner = ({
   fullScreen = false,
   inline = false,
   label,
+  labelPosition,
   show = false,
   isStatic = false,
   tokens,
@@ -97,6 +98,7 @@ const Spinner = ({
           >
             <SpinnerContent
               label={label}
+              labelPosition={labelPosition}
               overlay={true}
               size={size}
               thickness={thickness}
@@ -115,6 +117,7 @@ const Spinner = ({
       <SpinnerContainer inline={inline} aria-live="assertive" {...selectProps(rest)}>
         <SpinnerContent
           label={label}
+          labelPosition={labelPosition}
           overlay={true}
           size={size}
           thickness={thickness}
@@ -141,6 +144,7 @@ const Spinner = ({
     <SpinnerContainer {...selectProps(rest)}>
       <SpinnerContent
         label={label}
+        labelPosition={labelPosition}
         size={size}
         thickness={thickness}
         sizeVariant={sizeVariant}
@@ -183,7 +187,11 @@ Spinner.propTypes = {
   /**
    * If true, it should render a static spinner
    */
-  isStatic: PropTypes.bool
+  isStatic: PropTypes.bool,
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: PropTypes.string
 }
 
 export default Spinner

package/src/Spinner/SpinnerContent.jsx

@@ -27,6 +27,7 @@ const Container = styled.div(({ overlay }) => ({
 
 const SpinnerContent = ({
   label,
+  labelPosition,
   overlay = false,
   sizeVariant,
   size,
@@ -34,9 +35,20 @@ const SpinnerContent = ({
   isStatic,
   ...rest
 }) => {
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  }
+
   return (
     <Container overlay={overlay}>
-      <StackView space={3} tokens={{ alignItems: 'center' }}>
+      <StackView
+        space={3}
+        tokens={{ alignItems: 'center' }}
+        direction={labelMapping[labelPosition]}
+      >
         <ActivityIndicator
           label={label}
           tokens={{ size, thickness }}

package/src/Table/Cell.jsx

@@ -1,19 +1,28 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { css } from 'styled-components'
-import { Typography, useThemeTokens } from '@telus-uds/components-base'
+import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base'
 import { useTableContext } from './Table'
 
-const stickyStyles = css`
+const HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+}
+
+const stickyStyles = ({ cellStickyShadow, stickyBackgroundColor, type }) => css`
   position: sticky;
   left: 0; // needed for sticky to work
   z-index: 2;
   clip-path: inset(0 -8px 0 0); // use clip path to cut off the shadow rendered below
-
+  // Override default cell background with stickyBackgroundColor with an exception to subheading and heading
+  ${type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING
+    ? `background-color: ${stickyBackgroundColor};`
+    : undefined}
   &::before {
     // use a pseudo element for the sticky shadow, since we already use shadows for inner cells border
     content: '';
-    box-shadow: ${({ cellStickyShadow }) => cellStickyShadow};
+    box-shadow: ${cellStickyShadow};
     position: absolute;
     top: 0;
     left: 0;
@@ -25,55 +34,43 @@ const stickyStyles = css`
 const sharedStyles = css`
   ${({
     isSticky,
-    cellBoxShadowColor,
     align,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
-    cellMinWidth
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   }) => css`
-    ${isSticky ? stickyStyles : undefined};
-    box-shadow: inset 0 -1px 0 ${cellBoxShadowColor};
     text-align: ${align};
     min-width: ${cellMinWidth}px;
     padding: ${cellPaddingTop}px ${cellPaddingRight}px ${cellPaddingBottom}px ${cellPaddingLeft}px;
+    background-color: ${cellBackground};
+    ${isSticky && stickyStyles({ type, cellStickyShadow, stickyBackgroundColor })};
   `}
 `
-const StyledHeading = styled.th`
-  ${sharedStyles};
-  ${({ cellHeadingBackground, cellHeadingBoxShadowColor }) => `
-  background-color: ${cellHeadingBackground};
-  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`}
-`
-
-const StyledSubHeading = styled.th`
-  ${sharedStyles};
-  background-color: ${({ cellSubheadingBackground }) => cellSubheadingBackground};
-`
-
-const StyledCell = styled.td`
-  ${sharedStyles};
-  background-color: ${({ cellBackground }) => cellBackground};
-`
-
-const StyledRowHeading = styled.th`
+const createStyledCell = (htmlElement) => styled[htmlElement]`
   ${sharedStyles};
-  background-color: ${({ cellRowHeadingBackground }) => cellRowHeadingBackground};
+  box-shadow: ${({ cellBoxShadowColor, type }) => {
+    return type === HEADER_TYPE.HEADING
+      ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}`
+      : `inset 0 1px 0 ${cellBoxShadowColor}`
+  }};
 `
+const StyledHeaderCell = createStyledCell('th')
+const StyledDataCell = createStyledCell('td')
 
-const Cell = ({ children, type = 'default', isFirstInRow, align = 'left', tokens: cellTokens }) => {
-  const { text, isScrollable: isTableScrollable, variant, tokens: tableTokens } = useTableContext()
+const Cell = ({ children, isFirstInRow, align = 'left', tokens: cellTokens, type }) => {
+  const { text, isScrollable: isTableScrollable, tokens: tableTokens, spacing } = useTableContext()
   const themeTokens = { ...tableTokens, ...cellTokens }
 
   const {
     cellMinWidth,
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor,
     cellBoxShadowColor,
-    cellSubheadingBackground,
     cellBackground,
-    cellRowHeadingBackground,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -81,84 +78,67 @@ const Cell = ({ children, type = 'default', isFirstInRow, align = 'left', tokens
     cellPaddingBottom,
     fontName,
     fontWeight,
-    fontSize
-  } = useThemeTokens('Table', themeTokens, variant)
+    fontSize,
+    lineHeight,
+    stickyBackgroundColor
+  } = useThemeTokens('Table', themeTokens, { spacing, type, text })
 
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellBackground,
     cellMinWidth,
-    cellStickyShadow,
+    cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    stickyBackgroundColor,
     cellBoxShadowColor
   }
-
   const typographyTokens = {
     fontName,
     fontWeight,
-    fontSize
+    fontSize,
+    lineHeight
   }
 
   switch (type) {
-    case 'heading':
+    case HEADER_TYPE.HEADING:
       return (
-        <StyledHeading
-          scope="col"
-          cellHeadingBackground={cellHeadingBackground}
-          cellHeadingBoxShadowColor={cellHeadingBoxShadowColor}
-          {...sharedProps}
-        >
-          <Typography tokens={typographyTokens} variant={{ size: 'h4' }}>
-            {children}
-          </Typography>
-        </StyledHeading>
+        <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledHeaderCell>
       )
-    case 'subHeading':
+
+    case HEADER_TYPE.SUBHEADING:
       return (
-        <StyledSubHeading
-          scope="col"
-          cellSubheadingBackground={cellSubheadingBackground}
-          {...sharedProps}
-        >
-          <Typography tokens={typographyTokens} variant={{ size: 'h5' }}>
-            {children}
-          </Typography>
-        </StyledSubHeading>
+        <StyledHeaderCell scope="col" {...sharedProps} type={type}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledHeaderCell>
       )
-    case 'rowHeading':
+
+    case HEADER_TYPE.ROWHEADING:
       return (
-        <StyledRowHeading
-          scope="row"
-          cellRowHeadingBackground={cellRowHeadingBackground}
-          {...sharedProps}
-        >
-          <Typography tokens={typographyTokens} variant={{ size: text === 'small' ? 'h5' : 'h4' }}>
-            {children}
-          </Typography>
-        </StyledRowHeading>
+        <StyledHeaderCell scope="row" {...sharedProps} type={type}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledHeaderCell>
       )
 
     default:
       return (
-        <StyledCell cellBackground={cellBackground} {...sharedProps}>
-          <Typography tokens={{ fontSize }} variant={{ size: text }}>
-            {children}
-          </Typography>
-        </StyledCell>
+        <StyledDataCell {...sharedProps}>
+          <Typography tokens={typographyTokens}>{children}</Typography>
+        </StyledDataCell>
       )
   }
 }
 
 Cell.propTypes = {
+  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,
   children: PropTypes.node,
-  /**
-   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
-   */
-  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+
   /**
    * @ignore
    * Used internally for making the first column sticky

package/src/Table/Header.jsx

@@ -5,7 +5,12 @@ import Row from './Row'
 const Header = ({ children }) => {
   return (
     <thead>
-      <Row>{React.Children.map(children, (child) => cloneElement(child, { type: 'heading' }))}</Row>
+      <Row>
+        {React.Children.map(children, (child) =>
+          // TO DO: pass type as a variant instead of prop
+          cloneElement(child, { type: 'heading' })
+        )}
+      </Row>
     </thead>
   )
 }

package/src/Table/SubHeading.jsx

@@ -5,7 +5,10 @@ import Row from './Row'
 const Header = ({ children }) => {
   return (
     <Row>
-      {React.Children.map(children, (child) => cloneElement(child, { type: 'subHeading' }))}
+      {React.Children.map(children, (child) =>
+        // TO DO: pass type as a variant instead of prop
+        cloneElement(child, { type: 'subHeading' })
+      )}
     </Row>
   )
 }

package/src/Table/Table.jsx

@@ -36,7 +36,15 @@ export const useTableContext = () => useContext(TableContext)
  * - 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"`)
  */
-const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, ...rest }) => {
+const Table = ({
+  children,
+  spacing = 'default',
+  fullWidth = true,
+  text = 'medium',
+  tokens,
+  variant,
+  ...rest
+}) => {
   const { tablePaddingBottom } = useThemeTokens('Table', tokens, variant)
   const containerRef = useRef()
   const tableRef = useRef()
@@ -75,7 +83,7 @@ const Table = ({ children, fullWidth = true, text = 'medium', tokens, variant, .
       tablePaddingBottom={`${tablePaddingBottom}px`}
       {...selectProps(rest)}
     >
-      <TableContext.Provider value={{ text, isScrollable, tokens, variant }}>
+      <TableContext.Provider value={{ text, isScrollable, tokens, spacing }}>
         <StyledTable tableWidth={tableWidth} cellSpacing={0} ref={tableRef}>
           {children}
         </StyledTable>

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import {
   ExpandCollapse as ExpandCollapseBase,
-  Icon,
+  IconButton,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
@@ -17,18 +17,15 @@ const ExpandCollapseControl = styled.div({
 
 const ExpandCollapseIconContainer = styled.div(({ tokens }) => ({
   alignItems: tokens.expandIconContainerAlignItems,
-  border: `${tokens.expandIconContainerBorder}px solid ${tokens.expandIconContainerBorderColor}`,
-  borderRadius: '50%',
-  display: 'flex',
-  height: tokens.expandIconContainerHeight,
   justifyContent: tokens.expandIconContainerJustifyContent,
-  margin: `${tokens.expandIconContainerMarginX}px ${tokens.expandIconContainerMarginY}px`,
+  marginLeft: `${tokens.expandIconContainerMarginY}px`,
+  marginRight: `${tokens.expandIconContainerMarginY}px`,
   width: tokens.expandIconContainerWidth
 }))
 
 const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
   color: tokens.expandTitleColor,
-  fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+  fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
   fontSize: tokens.expandTitleFontSize,
   lineHeight: tokens.expandTitleLineHeight,
   margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
@@ -42,8 +39,20 @@ const ExpandCollapse = forwardRef(
       expandContentPaddingBottom,
       expandContentPaddingLeft,
       expandContentPaddingRight,
-      expandContentPaddingTop
+      expandContentPaddingTop,
+      contentBorderColor,
+      contentMarginBottom,
+      expandTitlePaddingLeft,
+      expandTitleBorder,
+      expandTitleBorderColor,
+      expandTitleUnderline
     } = getTokens()
+    const [expand, setExpand] = useState(false)
+
+    const handleExpandToggle = (expandProps, event, expanded) => {
+      expandProps.onToggle('ExpandCollapsePanel', event)
+      setExpand(!expanded)
+    }
 
     return (
       <ExpandCollapseBase
@@ -55,7 +64,14 @@ const ExpandCollapse = forwardRef(
           <ExpandCollapseBase.Panel
             {...expandProps}
             panelId="ExpandCollapsePanel"
-            controlTokens={{ icon: null }}
+            controlTokens={{
+              icon: null,
+              backgroundColor: 'transparent',
+              paddingLeft: expandTitlePaddingLeft,
+              borderColor: expandTitleBorderColor,
+              borderWidth: expandTitleBorder,
+              textLine: expandTitleUnderline
+            }}
             // TODO refactor
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => {
@@ -64,11 +80,15 @@ const ExpandCollapse = forwardRef(
 
               return (
                 <ExpandCollapseControl
-                  onClick={(event) => expandProps.onToggle('ExpandCollapsePanel', event)}
+                  onClick={(event) => handleExpandToggle(expandProps, event, expanded)}
                   ref={ref}
                 >
                   <ExpandCollapseIconContainer tokens={getTokens()}>
-                    <Icon icon={icon} variant={{ size: 'small' }} />
+                    <IconButton
+                      icon={icon}
+                      variant={{ size: 'small' }}
+                      onClick={(event) => handleExpandToggle(expandProps, event, expanded)}
+                    />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>
                     {expanded ? expandTitle : collapseTitle}
@@ -80,10 +100,12 @@ const ExpandCollapse = forwardRef(
               contentPaddingBottom: expandContentPaddingBottom,
               contentPaddingLeft: expandContentPaddingLeft,
               contentPaddingRight: expandContentPaddingRight,
-              contentPaddingTop: expandContentPaddingTop
+              contentPaddingTop: expandContentPaddingTop,
+              borderColor: contentBorderColor,
+              marginBottom: contentMarginBottom
             }}
           >
-            {children}
+            {expand ? children : null}
           </ExpandCollapseBase.Panel>
         )}
       </ExpandCollapseBase>