@telus-uds/components-web 1.11.0 → 2.0.0

package/lib-module/SkeletonProvider/SkeletonProvider.js

@@ -0,0 +1,65 @@
+import React, { Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@telus-uds/components-base';
+import Image from '../Image';
+import SkeletonTypography from './SkeletonTypography';
+import SkeletonImage from './SkeletonImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+const SkeletonProvider = _ref => {
+  let {
+    children,
+    show
+  } = _ref;
+
+  if (!show) {
+    return children;
+  }
+
+  const mapChild = child => {
+    if (!child) {
+      return null;
+    }
+
+    let childElement = child;
+
+    if (childElement.props && 'children' in childElement.props) {
+      const {
+        children: elementChildren
+      } = childElement.props;
+      const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
+      childElement = /*#__PURE__*/cloneElement(childElement, {
+        children: mappedChildren
+      });
+    }
+
+    if (childElement.type === Typography) {
+      return /*#__PURE__*/_jsx(SkeletonTypography, { ...childElement.props.skeleton,
+        show: show,
+        children: childElement
+      });
+    }
+
+    if (childElement.type === Image) {
+      return /*#__PURE__*/_jsx(SkeletonImage, { ...childElement.props.skeleton,
+        imgHeight: childElement.props.height,
+        rounded: childElement.props.rounded,
+        show: show,
+        children: childElement
+      });
+    }
+
+    return childElement;
+  };
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Children.map(children, mapChild)
+  });
+};
+
+SkeletonProvider.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
+};
+export default SkeletonProvider;

package/lib-module/SkeletonProvider/SkeletonTypography.js

@@ -0,0 +1,41 @@
+var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const SkeletonTypography = _ref => {
+  let {
+    show,
+    size,
+    sizeIndex,
+    sizePixels,
+    characters,
+    lines,
+    children
+  } = _ref;
+
+  if (!show) {
+    return children;
+  }
+
+  return /*#__PURE__*/_jsx(Skeleton, {
+    size: size,
+    sizeIndex: sizeIndex,
+    sizePixels: sizePixels,
+    characters: characters,
+    lines: lines
+  });
+};
+
+SkeletonTypography.propTypes = {
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
+  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
+  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  characters: (_Skeleton$propTypes4 = Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
+  lines: (_Skeleton$propTypes5 = Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
+};
+export default SkeletonTypography;

package/lib-module/SkeletonProvider/index.js

@@ -0,0 +1,2 @@
+import SkeletonProvider from './SkeletonProvider';
+export default SkeletonProvider;

package/lib-module/Table/Table.js

@@ -13,7 +13,12 @@ const StyledContainer = /*#__PURE__*/styled.div.withConfig({
 const StyledTable = /*#__PURE__*/styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "components-web__sc-10d9q3m-1"
-})(["margin:0;padding:0;"]);
+})(["margin:0;padding:0;width:", ";"], _ref => {
+  let {
+    tableWidth
+  } = _ref;
+  return `${tableWidth}px`;
+});
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => useContext(TableContext);
 /**
@@ -31,14 +36,15 @@ export const useTableContext = () => useContext(TableContext);
  * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
 
-const Table = _ref => {
+const Table = _ref2 => {
   let {
     children,
+    fullWidth = false,
     text = 'medium',
     tokens,
     variant,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     tablePaddingBottom
   } = useThemeTokens('Table', tokens, variant);
@@ -48,8 +54,10 @@ const Table = _ref => {
   const [tableWidth, setTableWidth] = useState(0);
   useSafeLayoutEffect(() => {
     const updateDimensions = () => {
-      setContainerWidth(containerRef.current.clientWidth);
-      setTableWidth(tableRef.current.clientWidth);
+      const containerClientWidth = containerRef.current.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current.clientWidth;
+      setContainerWidth(containerClientWidth);
+      setTableWidth(responsiveTableWidth);
     };
 
     const throttledUpdateDimensions = throttle(updateDimensions, 100, {
@@ -78,6 +86,7 @@ const Table = _ref => {
         variant
       },
       children: /*#__PURE__*/_jsx(StyledTable, {
+        tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
         children: children

package/lib-module/Toast/Toast.js

@@ -21,7 +21,7 @@ const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in
 const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
     containerBackgroundColor
   } = _ref;

package/lib-module/index.js

@@ -32,7 +32,9 @@ export { default as Video } from './Video';
 export { default as StoryCard } from './StoryCard';
 export { default as Disclaimer } from './Disclaimer';
 export { default as Card } from './Card';
+export { default as List } from './List';
 export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
+export { default as SkeletonProvider } from './SkeletonProvider';
 export * from './baseExports';

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.40.0",
+    "@telus-uds/components-base": "1.42.0",
     "@telus-uds/system-constants": "^1.2.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.25.0",
+    "@telus-uds/system-theme-tokens": "^2.26.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0"
@@ -61,5 +61,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.11.0"
+  "version": "2.0.0"
 }

package/src/Breadcrumbs/Breadcrumbs.jsx

@@ -74,10 +74,13 @@ const getItems = (items, params, concatenatePaths) => {
       const isLast = i === filteredItems.length - 1
       const breadcrumbName = getBreadcrumbName(item, params)
       const href = getPath(item.path, params, concatenatePaths, paths)
+      const { LinkRouter, linkRouterProps } = item
       return {
         breadcrumbName,
         href,
         current: isLast,
+        LinkRouter,
+        linkRouterProps,
         ...omitProps(selectProps(item))
       }
     })
@@ -103,7 +106,6 @@ const Breadcrumbs = ({
   linkRouterProps,
   params = {},
   tokens,
-  reactRouterLinkComponent,
   routes,
   variant,
   LinkRouter,
@@ -157,25 +159,25 @@ const Breadcrumbs = ({
             href,
             current,
             breadcrumbName,
-            reactRouterLinkComponent: linkComponent = reactRouterLinkComponent,
             LinkRouter: ItemLinkRouter = LinkRouter,
             linkRouterProps: itemLinkRouterProps,
             ...itemRest
-          }) => (
-            <Item
-              {...itemRest}
-              current={current}
-              href={href}
-              tokens={tokens}
-              key={href}
-              linkRouterProps={{ ...linkRouterProps, itemLinkRouterProps }}
-              reactRouterLinkComponent={linkComponent}
-              variant={{ ...variant, size: 'micro' }}
-              LinkRouter={ItemLinkRouter}
-            >
-              {breadcrumbName}
-            </Item>
-          )
+          }) => {
+            return (
+              <Item
+                {...itemRest}
+                current={current}
+                href={href}
+                tokens={tokens}
+                key={href}
+                linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                variant={{ ...variant, size: 'micro' }}
+                LinkRouter={ItemLinkRouter}
+              >
+                {breadcrumbName}
+              </Item>
+            )
+          }
         )}
       </StyledList>
       {metadata}
@@ -198,11 +200,6 @@ Breadcrumbs.propTypes = {
    * React Router params.
    */
   params: PropTypes.object,
-  /**
-   * React Router Link component.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * An array of routes to be displayed as breadcrumbs.
    */

package/src/Breadcrumbs/Item/Item.jsx

@@ -7,8 +7,7 @@ import {
   applyTextStyles,
   clickProps,
   selectSystemProps,
-  useThemeTokens,
-  withLinkRouter
+  useThemeTokens
 } from '@telus-uds/components-base'
 import { htmlAttrs } from '../../utils'
 
@@ -31,11 +30,12 @@ const Item = forwardRef(
   (
     {
       href,
-      reactRouterLinkComponent: ReactRouterLink,
       children,
       current = false,
       tokens,
       variant = { light: true }, // `light` variant (shared with the `Link` component) is default by design
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -50,13 +50,7 @@ const Item = forwardRef(
       ...themeTokens
     } = useThemeTokens('Breadcrumbs', tokens, variant)
 
-    const linkOptions = clickProps.toPressProps(selectProps(rest))
-
-    if (ReactRouterLink) {
-      linkOptions.to = href
-    } else {
-      linkOptions.href = href
-    }
+    const linkOptions = { ...clickProps.toPressProps(selectProps(rest)), href }
 
     return (
       <StyledItemContainer {...themeTokens}>
@@ -66,29 +60,16 @@ const Item = forwardRef(
           </Typography>
         ) : (
           <>
-            {ReactRouterLink ? (
-              <ReactRouterLink
-                {...linkOptions}
-                tokens={{ color, blockFontSize: fontSize }}
-                // TODO refactor
-                // eslint-disable-next-line react/no-unstable-nested-components
-                component={(props) => {
-                  return <Link {...props} variant={variant} />
-                }}
-                ref={ref}
-              >
-                {children}
-              </ReactRouterLink>
-            ) : (
-              <Link
-                {...linkOptions}
-                tokens={{ color, blockFontSize: fontSize }}
-                ref={ref}
-                variant={variant}
-              >
-                {children}
-              </Link>
-            )}
+            <Link
+              {...linkOptions}
+              ref={ref}
+              tokens={{ color, blockFontSize: fontSize }}
+              LinkRouter={LinkRouter}
+              linkRouterProps={linkRouterProps}
+              variant={variant}
+            >
+              {children}
+            </Link>
             <IconContainer {...themeTokens}>
               <ChevronRightIcon size={iconSize} color={iconColor} />
             </IconContainer>
@@ -114,16 +95,10 @@ Item.propTypes = {
    */
   current: PropTypes.bool,
   /**
-   * Target URL. This will be converted to `to` if the `reactRouterLinkComponent`
+   * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
-  /**
-   * React Router Link component. This will be passed down from the parent
-   * `<Breadcrumbs>` if the parent has a `reactRouterLinkComponent` provided.
-   * @deprecated please use `LinkRouter` and `linkRouterProps` instead
-   */
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Variant to render.
    */
@@ -134,8 +109,7 @@ Item.propTypes = {
 // - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
 Item.defaultProps = {
   current: false,
-  reactRouterLinkComponent: undefined,
   variant: { light: true }
 }
 
-export default withLinkRouter(Item)
+export default Item

package/src/DatePicker/CalendarContainer.jsx

@@ -1,13 +1,18 @@
 import styled from 'styled-components'
 import defaultReactDatesCss from './reactDatesCss'
 
+// calendarDayDefaultHeight and calendarDayDefaultWidth
+// refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
+
 const CalendarContainer = styled.div(
   ({
     daySize,
     validation,
     remainingTokens,
     calendarMonthFontTokens,
-    dayPickerNavigationButtonTokens,
+    calendarDayDefaultHeight,
+    calendarDayDefaultWidth,
+    calendarWeekFontTokens,
     defaultFontTokens
   }) => `
   ${defaultReactDatesCss}
@@ -19,9 +24,10 @@ const CalendarContainer = styled.div(
     display: block;
   }
   .SingleDatePicker_picker {
+    background-color: ${remainingTokens.calendarBackgroundColor};
     box-shadow: none;
     border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
-    border-radius: ${remainingTokens.singleDatePickerRadius};
+    border-radius: ${remainingTokens.singleDatePickerRadius}px;
     padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${
     remainingTokens.singleDatePickerLeftRight
   }px;
@@ -30,15 +36,15 @@ const CalendarContainer = styled.div(
   .DateInput {
     width: 100%;
     border: 2px solid ${remainingTokens.dateInputBorderColor};
-    border-radius: ${remainingTokens.dateInputBorderRadius};
     ${validation === 'error' && `input { border-color: ${remainingTokens.invalidInputMixin}; }`};
     ${validation === 'success' && `input { border-color: ${remainingTokens.validInputMixin}; }`};
   }
   .DateInput:hover {
+    border-radius: ${remainingTokens.dateInputBorderRadius}px;
     border: 2px solid ${remainingTokens.dateInputHoverBorderColor};
   }
-  .DateInput:focus {
-    border: 2px solid ${remainingTokens.dateInputFocusBorderColor};
+  .DateInput_input:focus {
+    border: 3px solid ${remainingTokens.dateInputFocusBorderColor};
   }
   .SingleDatePickerInput__withBorder {
     border: 0 !important;
@@ -59,96 +65,65 @@ const CalendarContainer = styled.div(
     z-index: 4;
     left: ${(daySize * 8.5 - 20) / 2}px;
   }
+  .DateInput_fangShape {
+    fill: ${remainingTokens.calendarBackgroundColor}
+  }
   .DateInput_fangStroke {
     stroke: ${remainingTokens.dateInputStrokeColor};
   }
   .CalendarMonth_caption {
     color: ${remainingTokens.calendarMonthCaptionColor};
     font-family: ${calendarMonthFontTokens.fontFamily};
-    font-size: ${remainingTokens.calendarMonthCaptionFontSize};
+    font-size: ${remainingTokens.calendarMonthCaptionFontSize}px;
     font-weight: ${calendarMonthFontTokens.fontWeight};
     line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
     padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
   }
+  .DayPicker{
+    background-color: ${remainingTokens.calendarBackgroundColor};
+  }
   .DayPicker__withBorder {
     box-shadow: none;
   }
-  .DayPickerNavigation_button {
-    align-items: center;
+  .DayPickerNavigation {  
     display: flex;
-    justify-content: center;
-    border: 1px solid ${remainingTokens.dayPickerNavigationButtonBorderColor};
-    background-color: ${remainingTokens.dayPickerNavigationButtonBackgroundColor};
-    border-radius: 50%;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-    max-height: ${remainingTokens.dayPickerNavigationButtonMaxHeight}px;
-    max-width: ${remainingTokens.dayPickerNavigationButtonMaxWidth}px;
-    position: absolute;
-    top: 18px;
-    line-height: 0.78;
-    padding: ${remainingTokens.dayPickerNavigationButtonPadding}px;
-    cursor: pointer;
-    user-select: none;
-    &:nth-child(1) {
-      left: ${remainingTokens.dayPickerNavigationButtonChildLeft}px;
-    }
-    &:nth-child(2) {
-      right: ${remainingTokens.dayPickerNavigationButtonChildRight}px;
-      i {
-        font-family: 'TELUS Core Icons';
-        display: inline-block;
-        font-weight: normal;
-        font-style: normal;
-        speak: none;
-        text-decoration: inherit;
-        text-transform: none;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        line-height: 1;
-        vertical-align: middle;
-        &:before {
-          content: '\\F107';
-          display: inline-block;
-        }
-      }
-    }
-    & svg {
-      fill: ${remainingTokens.dayPickerNavigationButtonChildSvgFill};
-    }
+    justify-content: space-between;
+    align-self: center;
+    top: 23px;
+    padding: 0px ${remainingTokens.dayPickerNavigationButtonPadding}px;
   }
   .DayPickerNavigation_button__default:focus,
-  .DayPickerNavigation_button__default:hover {
-    border: 1px solid ${remainingTokens.dayPickerNavigationButtonDefaultHoverBorderColor};
-  }
-  .DayPickerNavigation_svg__horizontal {
-    fill: ${remainingTokens.dayPickerNavigationSVGHorizontalFill};
-  }
+  .DayPickerNavigation_button:hover,
+  .DayPickerNavigation_svg__horizontal,
   .DayPicker_weekHeader {
     color: ${remainingTokens.dayPickerWeekHeaderColor};
-    font-family: ${dayPickerNavigationButtonTokens.fontFamily};
-    font-weight: ${dayPickerNavigationButtonTokens.fontWeight};
+    font-family: ${calendarWeekFontTokens.fontFamily};
     font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
     line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
-    & small {
-      font-size: ${remainingTokens.dayPickerWeekHeaderSmall};
-    }
     & li {
+      font-size: ${remainingTokens.dayPickerWeekHeaderSmall}px;
       max-width: ${daySize}px !important;
     }
   }
+  .CalendarMonthGrid {
+    background-color: ${remainingTokens.calendarBackgroundColor};
+  }
+  .CalendarMonth {
+    background-color: ${remainingTokens.calendarBackgroundColor};
+  }
   .CalendarDay__default {
     padding: 0px;
     position: relative;
+    background: ${remainingTokens.calendarDayDefaultBackgroundColor};
     background-clip: padding-box;
-    border: ${remainingTokens.calendarDayDefaultBorder} solid ${
+    border: ${remainingTokens.calendarDayDefaultBorder}px solid ${
     remainingTokens.calendarDayDefaultBorderColor
   };
     vertical-align: middle;
     font-family: ${defaultFontTokens.fontFamily};
     font-weight: ${defaultFontTokens.fontWeight}
     font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
-    font-size: ${remainingTokens.calendarDayDefaultFontSize};
+    font-size: ${remainingTokens.calendarDayDefaultFontSize}px;
     line-height: ${daySize - 3}px !important;
     color: ${remainingTokens.calendarDayDefaultColor};
     text-decoration: none;
@@ -159,36 +134,51 @@ const CalendarContainer = styled.div(
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      height: ${remainingTokens.calendarDayDefaultBeforeHeight}px;
-      width: ${remainingTokens.calendarDayDefaultBeforeWidth}px;
+      height: ${calendarDayDefaultHeight}px;
+      width: ${calendarDayDefaultWidth}px;
       border-radius: 50%;
       background: transparent;
       transition: all 0.3s;
       z-index: -1;
     }
   }
-  .CalendarDay__default:hover,
-  .CalendarDay__selected,
-  .CalendarDay__selected:active,
-  .CalendarDay__selected:hover {
-    background: none;
+  .CalendarDay__default:hover  {
+    background: ${remainingTokens.calendarDaySelectedHoverBackground};
     border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
     color: ${remainingTokens.calendarDaySelectedHoverColor};
     text-decoration: none;
     z-index: 0;
     &:before {
+      border: 1px solid ${remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
       background: ${remainingTokens.calendarDaySelectedHoverBeforeBackground};
     }
   }
+  .CalendarDay__default:focus{
+    background: ${remainingTokens.calendarDaySelectedHoverBackground};
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      border: 1px solid ${remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
+      background: ${remainingTokens.calendarDaySelectedFocusBeforeBackground};
+    }
+  }
+  .CalendarDay__selected,
+  .CalendarDay__selected:active,
+  .CalendarDay__selected:hover
   .CalendarDay__default.CalendarDay__selected,
   .CalendarDay__default.CalendarDay__selected:active
-    .CalendarDay__default.CalendarDay__selected:hover {
+    .CalendarDay__default.CalendarDay__selected:hover{
+    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
     color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
     text-decoration: none;
+    z-index: 0;
     &:before {
-      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
-    }
+      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
   }
+}
   .CalendarDay__blocked_out_of_range,
   .CalendarDay__blocked_out_of_range:active,
   .CalendarDay__blocked_out_of_range:hover,