@telus-uds/components-web 1.11.0 → 1.12.0

package/lib/SkeletonProvider/SkeletonProvider.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Image = _interopRequireDefault(require("../Image"));
+
+var _SkeletonTypography = _interopRequireDefault(require("./SkeletonTypography"));
+
+var _SkeletonImage = _interopRequireDefault(require("./SkeletonImage"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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__*/(0, _react.cloneElement)(childElement, {
+        children: mappedChildren
+      });
+    }
+
+    if (childElement.type === _componentsBase.Typography) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, { ...childElement.props.skeleton,
+        show: show,
+        children: childElement
+      });
+    }
+
+    if (childElement.type === _Image.default) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, { ...childElement.props.skeleton,
+        imgHeight: childElement.props.height,
+        rounded: childElement.props.rounded,
+        show: show,
+        children: childElement
+      });
+    }
+
+    return childElement;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: _react.Children.map(children, mapChild)
+  });
+};
+
+SkeletonProvider.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired
+};
+var _default = SkeletonProvider;
+exports.default = _default;

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SkeletonTypography = _ref => {
+  let {
+    show,
+    size,
+    sizeIndex,
+    sizePixels,
+    characters,
+    lines,
+    children
+  } = _ref;
+
+  if (!show) {
+    return children;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+    size: size,
+    sizeIndex: sizeIndex,
+    sizePixels: sizePixels,
+    characters: characters,
+    lines: lines
+  });
+};
+
+SkeletonTypography.propTypes = {
+  show: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node,
+  size: (_Skeleton$propTypes = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
+  sizeIndex: (_Skeleton$propTypes2 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
+  sizePixels: (_Skeleton$propTypes3 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  characters: (_Skeleton$propTypes4 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
+  lines: (_Skeleton$propTypes5 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
+};
+var _default = SkeletonTypography;
+exports.default = _default;

package/lib/SkeletonProvider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _SkeletonProvider.default;
+exports.default = _default;

package/lib/Table/Table.js

@@ -35,7 +35,12 @@ const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const StyledTable = /*#__PURE__*/_styledComponents.default.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.default.createContext({});
 
@@ -58,14 +63,15 @@ const useTableContext = () => (0, _react.useContext)(TableContext);
 
 exports.useTableContext = useTableContext;
 
-const Table = _ref => {
+const Table = _ref2 => {
   let {
     children,
+    fullWidth = false,
     text = 'medium',
     tokens,
     variant,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     tablePaddingBottom
   } = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
@@ -75,8 +81,10 @@ const Table = _ref => {
   const [tableWidth, setTableWidth] = (0, _react.useState)(0);
   (0, _componentsBase.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 = (0, _lodash.default)(updateDimensions, 100, {
@@ -105,6 +113,7 @@ const Table = _ref => {
         variant
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
+        tableWidth: tableWidth,
         cellSpacing: 0,
         ref: tableRef,
         children: children

package/lib/Toast/Toast.js

@@ -39,7 +39,7 @@ const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s f
 const ToastContainer = /*#__PURE__*/_styledComponents.default.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/index.js

@@ -38,9 +38,11 @@ var _exportNames = {
   StoryCard: true,
   Disclaimer: true,
   Card: true,
+  List: true,
   TermsAndConditions: true,
   NavigationBar: true,
-  Progress: true
+  Progress: true,
+  SkeletonProvider: true
 };
 Object.defineProperty(exports, "Autocomplete", {
   enumerable: true,
@@ -120,6 +122,12 @@ Object.defineProperty(exports, "Image", {
     return _Image.default;
   }
 });
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
 Object.defineProperty(exports, "Listbox", {
   enumerable: true,
   get: function () {
@@ -192,6 +200,12 @@ Object.defineProperty(exports, "Ribbon", {
     return _Ribbon.default;
   }
 });
+Object.defineProperty(exports, "SkeletonProvider", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.default;
+  }
+});
 Object.defineProperty(exports, "Span", {
   enumerable: true,
   get: function () {
@@ -333,12 +347,16 @@ var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
 
 var _Card = _interopRequireDefault(require("./Card"));
 
+var _List = _interopRequireDefault(require("./List"));
+
 var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
 
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
 
 var _Progress = _interopRequireDefault(require("./Progress"));
 
+var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib-module/DatePicker/CalendarContainer.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
-import defaultReactDatesCss from './reactDatesCss';
+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 = /*#__PURE__*/styled.div.withConfig({
   displayName: "CalendarContainer",
   componentId: "components-web__sc-qdc1tg-0"
@@ -9,7 +11,9 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
     validation,
     remainingTokens,
     calendarMonthFontTokens,
-    dayPickerNavigationButtonTokens,
+    calendarDayDefaultHeight,
+    calendarDayDefaultWidth,
+    calendarWeekFontTokens,
     defaultFontTokens
   } = _ref;
   return `
@@ -22,24 +26,25 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
     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;
     z-index: 3;
   }
   .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;
@@ -60,94 +65,63 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
     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 ${remainingTokens.calendarDayDefaultBorderColor};
+    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;
@@ -158,36 +132,51 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
       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,

package/lib-module/DatePicker/DatePicker.js

@@ -5,7 +5,7 @@ import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { Icon, InputSupports, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
+import { IconButton, InputSupports, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
@@ -28,12 +28,19 @@ const getResponsiveDaySize = function () {
   return responsiveDaySize;
 };
 
-const getIcon = icon => /*#__PURE__*/_jsx(Icon, {
-  icon: icon,
-  variant: {
-    size: 'small'
+const getResponsiveCircleSize = function () {
+  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
+  let responsiveCircleSize;
+
+  if (viewport === 'xs') {
+    responsiveCircleSize = 26;
+  } else {
+    responsiveCircleSize = inline ? 44 : 26;
   }
-});
+
+  return responsiveCircleSize;
+};
 
 const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "DatePicker__MonthCenterContainer",
@@ -105,6 +112,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
+  const circleSize = getResponsiveCircleSize(inline, viewport);
   const value = date ?? inputDate;
   const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
@@ -116,7 +124,9 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     previousIcon,
     nextIcon,
     ...remainingTokens
-  } = useThemeTokens('DatePicker', tokens, variant, {
+  } = useThemeTokens('DatePicker', tokens, { ...variant,
+    inline
+  }, {
     viewport
   });
   const defaultFontTokens = applyTextStyles({
@@ -127,16 +137,50 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontName: remainingTokens.calendarMonthCaptionFontName,
     fontWeight: remainingTokens.calendarMonthCaptionFontWeight
   });
-  const dayPickerNavigationButtonTokens = applyTextStyles({
+  const calendarWeekFontTokens = applyTextStyles({
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
+
+  const renderPrevButton = _ref3 => {
+    let {
+      onClick
+    } = _ref3;
+    return /*#__PURE__*/_jsx(IconButton, {
+      onPress: () => {
+        onClick();
+      },
+      icon: previousIcon,
+      variant: {
+        size: 'small'
+      }
+    });
+  };
+
+  const renderNextButton = _ref4 => {
+    let {
+      onClick
+    } = _ref4;
+    return /*#__PURE__*/_jsx(IconButton, {
+      onPress: () => {
+        onClick();
+      },
+      icon: nextIcon,
+      variant: {
+        size: 'small'
+      }
+    });
+  };
+
   return /*#__PURE__*/_jsx(CalendarContainer, { ...selectProps(rest),
     daySize: daySize,
     validation: validation,
-    remainingTokens: remainingTokens,
+    remainingTokens: { ...remainingTokens
+    },
+    calendarDayDefaultHeight: circleSize,
+    calendarDayDefaultWidth: circleSize,
     calendarMonthFontTokens: calendarMonthFontTokens,
-    dayPickerNavigationButtonTokens: dayPickerNavigationButtonTokens,
+    calendarWeekFontTokens: calendarWeekFontTokens,
     defaultFontTokens: defaultFontTokens,
     children: /*#__PURE__*/_jsx(InputSupports, {
       copy: copy,
@@ -167,14 +211,14 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           hideKeyboardShortcutsPanel: true,
           keepOpenOnDateSelect: false,
           daySize: daySize,
-          navPrev: getIcon(previousIcon),
-          navNext: getIcon(nextIcon),
+          renderNavPrevButton: renderPrevButton,
+          renderNavNextButton: renderNextButton,
           isOutsideRange: isDayDisabled,
           phrases: getCopy(),
-          renderMonthElement: _ref3 => {
+          renderMonthElement: _ref5 => {
             let {
               month
-            } = _ref3;
+            } = _ref5;
             return /*#__PURE__*/_jsx(MonthCenterContainer, {
               children: /*#__PURE__*/_jsxs("div", {
                 children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -186,26 +230,26 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           })
         })]
       }) : /*#__PURE__*/_jsx(SingleDatePicker, {
-        ref: ref,
-        id: id,
         date: value,
         onDateChange: onChange,
         focused: isFocused,
         onFocusChange: onFocusChange,
         numberOfMonths: 1,
         hideKeyboardShortcutsPanel: true,
-        displayFormat: "DD / MM / YYYY",
-        placeholder: "DD / MM / YYYY",
-        keepOpenOnDateSelect: false,
+        keepOpenOnDateSelect: true,
         daySize: daySize,
-        navPrev: getIcon(previousIcon),
-        navNext: getIcon(nextIcon),
+        ref: ref,
+        renderNavPrevButton: renderPrevButton,
         isOutsideRange: isDayDisabled,
         phrases: getCopy(),
-        renderMonthElement: _ref4 => {
+        id: id,
+        displayFormat: "DD / MM / YYYY",
+        placeholder: "DD / MM / YYYY",
+        renderNavNextButton: renderNextButton,
+        renderMonthElement: _ref6 => {
           let {
             month
-          } = _ref4;
+          } = _ref6;
           return /*#__PURE__*/_jsx(MonthCenterContainer, {
             children: /*#__PURE__*/_jsxs("div", {
               children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]

package/lib-module/List/List.js

@@ -0,0 +1,2 @@
+import { ListBase as List } from '@telus-uds/components-base';
+export default List;