@telus-uds/components-web 2.12.0 → 2.13.0

package/lib-module/Table/Cell.js

@@ -1,93 +1,80 @@
 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';
 import { jsx as _jsx } from "react/jsx-runtime";
-const stickyStyles = /*#__PURE__*/css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);&::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], _ref => {
+const HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+};
+
+const stickyStyles = _ref => {
   let {
-    cellStickyShadow
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref;
-  return cellStickyShadow;
-});
+  return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+};
+
 const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
   let {
     isSticky,
-    cellBoxShadowColor,
     align,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
-    cellMinWidth
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref2;
-  return css(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+    type,
+    cellStickyShadow,
+    stickyBackgroundColor
+  }));
 });
-const StyledHeading = /*#__PURE__*/styled.th.withConfig({
-  displayName: "Cell__StyledHeading",
+
+const createStyledCell = htmlElement => styled[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";", ""], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
   let {
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor
+    cellBoxShadowColor,
+    type
   } = _ref3;
-  return `
-  background-color: ${cellHeadingBackground};
-  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
-});
-const StyledSubHeading = /*#__PURE__*/styled.th.withConfig({
-  displayName: "Cell__StyledSubHeading",
-  componentId: "components-web__sc-ltgfic-1"
-})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
-  let {
-    cellSubheadingBackground
-  } = _ref4;
-  return cellSubheadingBackground;
-});
-const StyledCell = /*#__PURE__*/styled.td.withConfig({
-  displayName: "Cell__StyledCell",
-  componentId: "components-web__sc-ltgfic-2"
-})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
-  let {
-    cellBackground
-  } = _ref5;
-  return cellBackground;
-});
-const StyledRowHeading = /*#__PURE__*/styled.th.withConfig({
-  displayName: "Cell__StyledRowHeading",
-  componentId: "components-web__sc-ltgfic-3"
-})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
-  let {
-    cellRowHeadingBackground
-  } = _ref6;
-  return cellRowHeadingBackground;
+  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
 });
 
-const Cell = _ref7 => {
+const StyledHeaderCell = createStyledCell('th');
+const StyledDataCell = createStyledCell('td');
+
+const Cell = _ref4 => {
   let {
     children,
-    type = 'default',
     isFirstInRow,
     align = 'left',
-    tokens: cellTokens
-  } = _ref7;
+    tokens: cellTokens,
+    type
+  } = _ref4;
   const {
     text,
     isScrollable: isTableScrollable,
-    variant,
-    tokens: tableTokens
+    tokens: tableTokens,
+    spacing
   } = useTableContext();
   const themeTokens = { ...tableTokens,
     ...cellTokens
   };
   const {
     cellMinWidth,
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor,
     cellBoxShadowColor,
-    cellSubheadingBackground,
     cellBackground,
-    cellRowHeadingBackground,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -95,80 +82,72 @@ const Cell = _ref7 => {
     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':
-      return /*#__PURE__*/_jsx(StyledHeading, {
+    case HEADER_TYPE.HEADING:
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
-        cellHeadingBackground: cellHeadingBackground,
-        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h4'
-          },
           children: children
         })
       });
 
-    case 'subHeading':
-      return /*#__PURE__*/_jsx(StyledSubHeading, {
+    case HEADER_TYPE.SUBHEADING:
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
-        cellSubheadingBackground: cellSubheadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h5'
-          },
           children: children
         })
       });
 
-    case 'rowHeading':
-      return /*#__PURE__*/_jsx(StyledRowHeading, {
+    case HEADER_TYPE.ROWHEADING:
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "row",
-        cellRowHeadingBackground: cellRowHeadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: text === 'small' ? 'h5' : 'h4'
-          },
           children: children
         })
       });
 
     default:
-      return /*#__PURE__*/_jsx(StyledCell, {
-        cellBackground: cellBackground,
-        ...sharedProps,
+      return /*#__PURE__*/_jsx(StyledDataCell, { ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
-          tokens: {
-            fontSize
-          },
-          variant: {
-            size: text
-          },
+          tokens: typographyTokens,
           children: children
         })
       });
@@ -176,14 +155,10 @@ const Cell = _ref7 => {
 };
 
 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/lib-module/Table/Header.js

@@ -9,7 +9,10 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx("thead", {
     children: /*#__PURE__*/_jsx(Row, {
-      children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      children: React.Children.map(children, child =>
+      /*#__PURE__*/
+      // TO DO: pass type as a variant instead of prop
+      cloneElement(child, {
         type: 'heading'
       }))
     })

package/lib-module/Table/SubHeading.js

@@ -8,7 +8,10 @@ const Header = _ref => {
     children
   } = _ref;
   return /*#__PURE__*/_jsx(Row, {
-    children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    children: React.Children.map(children, child =>
+    /*#__PURE__*/
+    // TO DO: pass type as a variant instead of prop
+    cloneElement(child, {
       type: 'subHeading'
     }))
   });

package/lib-module/Table/Table.js

@@ -39,6 +39,7 @@ export const useTableContext = () => useContext(TableContext);
 const Table = _ref2 => {
   let {
     children,
+    spacing = 'default',
     fullWidth = true,
     text = 'medium',
     tokens,
@@ -83,7 +84,7 @@ const Table = _ref2 => {
         text,
         isScrollable,
         tokens,
-        variant
+        spacing
       },
       children: /*#__PURE__*/_jsx(StyledTable, {
         tableWidth: tableWidth,

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse as ExpandCollapseBase, Icon, useThemeTokensCallback } from '@telus-uds/components-base';
+import { ExpandCollapse as ExpandCollapseBase, IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,12 +23,9 @@ const ExpandCollapseIconContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref;
   return {
     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
   };
 });
@@ -41,7 +38,7 @@ const ExpandCollapseTitle = /*#__PURE__*/styled.h4.withConfig({
   } = _ref2;
   return {
     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`
@@ -59,8 +56,21 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     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 /*#__PURE__*/_jsx(ExpandCollapseBase, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -68,7 +78,12 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapseBase.Panel, { ...expandProps,
       panelId: "ExpandCollapsePanel",
       controlTokens: {
-        icon: null
+        icon: null,
+        backgroundColor: 'transparent',
+        paddingLeft: expandTitlePaddingLeft,
+        borderColor: expandTitleBorderColor,
+        borderWidth: expandTitleBorder,
+        textLine: expandTitleUnderline
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
@@ -82,15 +97,16 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
           expanded
         });
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
-          onClick: event => expandProps.onToggle('ExpandCollapsePanel', event),
+          onClick: event => handleExpandToggle(expandProps, event, expanded),
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
             tokens: getTokens(),
-            children: /*#__PURE__*/_jsx(Icon, {
+            children: /*#__PURE__*/_jsx(IconButton, {
               icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              onClick: event => handleExpandToggle(expandProps, event, expanded)
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),
@@ -102,9 +118,11 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         contentPaddingBottom: expandContentPaddingBottom,
         contentPaddingLeft: expandContentPaddingLeft,
         contentPaddingRight: expandContentPaddingRight,
-        contentPaddingTop: expandContentPaddingTop
+        contentPaddingTop: expandContentPaddingTop,
+        borderColor: contentBorderColor,
+        marginBottom: contentMarginBottom
       },
-      children: children
+      children: expand ? children : null
     })
   });
 });

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens } from '@telus-uds/components-base';
+import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
@@ -47,7 +47,8 @@ const Unordered = /*#__PURE__*/styled.ul.withConfig({
   return {
     listStyleType: 'none',
     margin: 0,
-    padding: tokens.unorderedPadding
+    padding: 0,
+    paddingTop: tokens.unorderedPadding
   };
 });
 const ListItem = /*#__PURE__*/styled(OrderedListBase.Item).withConfig({
@@ -113,9 +114,16 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
   });
   const hasIndexedContent = indexedContent.length > 0;
   const hasNonIndexedContent = nonIndexedContent.length > 0;
-  const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant);
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
+    viewport
+  });
   return /*#__PURE__*/_jsxs("div", { ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(ExpandCollapse, {
+    children: [/*#__PURE__*/_jsx(Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    }), /*#__PURE__*/_jsx(ExpandCollapse, {
       collapseTitle: getCopy('headingView'),
       expandTitle: getCopy('headingHide'),
       ref: ref,
@@ -137,8 +145,11 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
             children: /*#__PURE__*/_jsx(Typography, {
               block: true,
               heading: true,
-              variant: {
-                size: 'h4'
+              tokens: {
+                fontName: themeTokens.expandTitleFontName,
+                fontWeight: themeTokens.expandTitleFontWeight,
+                fontSize: themeTokens.titleFontSize,
+                lineHeight: themeTokens.titleLineHeight
               },
               children: getCopy('nonIndexedTitle')
             })
@@ -154,7 +165,11 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
           })]
         })]
       })
-    }), /*#__PURE__*/_jsx(Divider, {})]
+    }), /*#__PURE__*/_jsx(Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    })]
   });
 });
 TermsAndConditions.displayName = 'TermsAndConditions';

package/lib-module/VideoPicker/VideoPickerPlayer.js

@@ -26,11 +26,13 @@ const VideoPickerPlayer = _ref => {
       space: 2,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: {
-          size: 'h2',
-          colour: 'secondary'
+          size: 'h3'
         },
         children: video.title
       }), /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          colour: 'default'
+        },
         children: video.description
       })]
     })]