@telus-uds/components-web 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -1,12 +1,57 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 01 May 2023 22:02:12 GMT and should not be manually modified.
+This log was last generated on Wed, 17 May 2023 00:13:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.12.0
+
+Wed, 17 May 2023 00:13:27 GMT
+
+### Minor changes
+
+- Standardized Pagination (wlsdud194@hotmail.com)
+- move 'List' to components-web (kyle.king2@telus.com)
+- Standardize DatePicker for TELUS, Public Mobile, and Koodo (samuraix221@hotmail.com)
+- add 'strikeThroughPosition' token (kyle.king2@telus.com)
+- Add fullWidth prop to Table (wlsdud194@hotmail.com)
+- make Skeleton provider multibrand (mauricio.batresmontejo@telus.com)
+- Expand collapse standardization (akshay.pandey1@telus.com)
+- Bump @telus-uds/components-base to v1.41.0
+- Bump @telus-uds/system-theme-tokens to v2.26.0
+
+### Patches
+
+- Remove flexGrow from text styles (wlsdud194@hotmail.com)
+- Fix an issue where `Toast` doesn't render as expected on smaller screens (shahzaibkhalidmalik@outlook.com)
+
+## 1.11.0
+
+Tue, 09 May 2023 00:29:54 GMT
+
+### Minor changes
+
+- Fix to import icon from palette (wlsdud194@hotmail.com)
+- make ProgressBar component to multibrand (mauricio.batresmontejo@telus.com)
+- Add fontWeight, fontName, color, currentColor to component implementation (kyle.king2@telus.com)
+- Callout has a new prop - textAlign that centers or left aligns text (akshay.pandey1@telus.com)
+- refactor 'PriceLockup' & 'FootnoteLink' to take additional properties/tokens (kyle.king2@telus.com)
+- font color as a property to follow the standarization guidelines in the brands for the ribbon components (35577399+JoshHC@users.noreply.github.com)
+- Updated snapshots for components that depend on 'Typography' (kyle.king2@telus.com)
+- added font props to Cell component (ignacio.cuyun@telus.com)
+- makes navigation bar component multibrand (mauricio.batresmontejo@telus.com)
+- moved 'Disclaimer' to components-web from ds-allium (kyle.king2@telus.com)
+- move 'VideoPicker' to components-web (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.40.0
+- Bump @telus-uds/system-theme-tokens to v2.25.0
+
+### Patches
+
+- Fix an issue where `Spinner` might not render correctly in `fullScreen` mode (shahzaibkhalidmalik@outlook.com)
+
 ## 1.10.0
 
-Mon, 01 May 2023 22:02:12 GMT
+Mon, 01 May 2023 22:09:07 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Item/Item.js

@@ -55,10 +55,20 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
       iconPadding
     } = _ref3;
     return `${iconPadding}px`;
+  },
+  fontFamily: _ref4 => {
+    let {
+      fontName,
+      fontWeight
+    } = _ref4;
+    return (0, _componentsBase.applyTextStyles)({
+      fontName,
+      fontWeight
+    }).fontFamily;
   }
 });
 
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     href,
     reactRouterLinkComponent: ReactRouterLink,
@@ -70,10 +80,14 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     },
     // `light` variant (shared with the `Link` component) is default by design
     ...rest
-  } = _ref4;
+  } = _ref5;
   const {
     iconColor,
     icon: ChevronRightIcon,
+    currentColor,
+    color,
+    iconSize,
+    fontSize,
     ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
 
@@ -87,14 +101,21 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-      variant: { ...variant,
-        secondary: true
+      tokens: {
+        color: currentColor,
+        fontSize
+      },
+      variant: { ...variant
       },
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [ReactRouterLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactRouterLink, { ...linkOptions,
-        // TODO refactor
+        tokens: {
+          color,
+          blockFontSize: fontSize
+        } // TODO refactor
         // eslint-disable-next-line react/no-unstable-nested-components
+        ,
         component: props => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...props,
             variant: variant
@@ -103,12 +124,16 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
         ref: ref,
         children: children
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
+        tokens: {
+          color,
+          blockFontSize: fontSize
+        },
         ref: ref,
         variant: variant,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, { ...themeTokens,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
-          size: 16,
+          size: iconSize,
           color: iconColor
         })
       })]

package/lib/Callout/Callout.js

@@ -21,6 +21,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 
+const getAlignment = (rounded, textAlignToFlex) => {
+  if (textAlignToFlex) {
+    switch (textAlignToFlex) {
+      case 'left':
+        return 'flex-star';
+
+      case 'center':
+        return 'center';
+
+      default:
+        return 'flex-start';
+    }
+  }
+
+  return rounded ? 'center' : ' flex-start';
+};
+
 const verticalAlignToFlex = verticalAlign => {
   switch (verticalAlign) {
     case 'top':
@@ -43,7 +60,8 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 })(_ref => {
   let {
     rounded,
-    verticalAlign = 'top',
+    verticalAlign,
+    textAlignToFlex,
     background,
     gap,
     borderRadius,
@@ -55,7 +73,7 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     gap,
     borderRadius,
     padding,
-    justifyContent: `${rounded ? 'center' : 'flex-start'}`,
+    justifyContent: getAlignment(rounded, textAlignToFlex),
     alignItems: verticalAlignToFlex(verticalAlign)
   };
 });
@@ -64,7 +82,8 @@ const Callout = _ref2 => {
   let {
     icon,
     children,
-    verticalAlign = 'top',
+    verticalAlign,
+    textAlignToFlex,
     tokens,
     variant = {},
     ...rest
@@ -88,6 +107,7 @@ const Callout = _ref2 => {
     rounded: rounded,
     "data-testid": "callout-container",
     verticalAlign: verticalAlign,
+    textAlignToFlex: textAlignToFlex,
     background: background,
     gap: gap,
     borderRadius: borderRadius,
@@ -118,6 +138,7 @@ const Callout = _ref2 => {
 Callout.propTypes = { ...selectedSystemPropTypes,
   icon: _propTypes.default.elementType,
   children: _propTypes.default.node.isRequired,
+  textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
   verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
 };
 var _default = Callout;

package/lib/DatePicker/CalendarContainer.js

@@ -11,6 +11,8 @@ var _reactDatesCss = _interopRequireDefault(require("./reactDatesCss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// calendarDayDefaultHeight and calendarDayDefaultWidth
+// refer to circle size when selected, focused, or hovered and is passed  with getResponsiveCircleSize in DatePicker
 const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "CalendarContainer",
   componentId: "components-web__sc-qdc1tg-0"
@@ -20,7 +22,9 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
     validation,
     remainingTokens,
     calendarMonthFontTokens,
-    dayPickerNavigationButtonTokens,
+    calendarDayDefaultHeight,
+    calendarDayDefaultWidth,
+    calendarWeekFontTokens,
     defaultFontTokens
   } = _ref;
   return `
@@ -33,24 +37,25 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.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;
@@ -71,94 +76,63 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.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;
@@ -169,36 +143,51 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.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/DatePicker/DatePicker.js

@@ -51,12 +51,19 @@ const getResponsiveDaySize = function () {
   return responsiveDaySize;
 };
 
-const getIcon = icon => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.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__*/_styledComponents.default.div.withConfig({
   displayName: "DatePicker__MonthCenterContainer",
@@ -129,6 +136,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const viewport = (0, _componentsBase.useViewport)();
   const daySize = getResponsiveDaySize(inline, viewport);
+  const circleSize = getResponsiveCircleSize(inline, viewport);
   const value = date ?? inputDate;
 
   const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -142,7 +150,9 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     previousIcon,
     nextIcon,
     ...remainingTokens
-  } = (0, _componentsBase.useThemeTokens)('DatePicker', tokens, variant, {
+  } = (0, _componentsBase.useThemeTokens)('DatePicker', tokens, { ...variant,
+    inline
+  }, {
     viewport
   });
   const defaultFontTokens = (0, _componentsBase.applyTextStyles)({
@@ -153,16 +163,50 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     fontName: remainingTokens.calendarMonthCaptionFontName,
     fontWeight: remainingTokens.calendarMonthCaptionFontWeight
   });
-  const dayPickerNavigationButtonTokens = (0, _componentsBase.applyTextStyles)({
+  const calendarWeekFontTokens = (0, _componentsBase.applyTextStyles)({
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
+
+  const renderPrevButton = _ref3 => {
+    let {
+      onClick
+    } = _ref3;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+      onPress: () => {
+        onClick();
+      },
+      icon: previousIcon,
+      variant: {
+        size: 'small'
+      }
+    });
+  };
+
+  const renderNextButton = _ref4 => {
+    let {
+      onClick
+    } = _ref4;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+      onPress: () => {
+        onClick();
+      },
+      icon: nextIcon,
+      variant: {
+        size: 'small'
+      }
+    });
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, { ...selectProps(rest),
     daySize: daySize,
     validation: validation,
-    remainingTokens: remainingTokens,
+    remainingTokens: { ...remainingTokens
+    },
+    calendarDayDefaultHeight: circleSize,
+    calendarDayDefaultWidth: circleSize,
     calendarMonthFontTokens: calendarMonthFontTokens,
-    dayPickerNavigationButtonTokens: dayPickerNavigationButtonTokens,
+    calendarWeekFontTokens: calendarWeekFontTokens,
     defaultFontTokens: defaultFontTokens,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputSupports, {
       copy: copy,
@@ -193,14 +237,14 @@ const DatePicker = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -212,26 +256,26 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           })
         })]
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
-        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__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]

package/lib/Disclaimer/Disclaimer.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledDisclaimer = /*#__PURE__*/_styledComponents.default.p.withConfig({
+  displayName: "Disclaimer__StyledDisclaimer",
+  componentId: "components-web__sc-1l4xf7u-0"
+})(_ref => {
+  let {
+    fontName,
+    fontWeight,
+    fontSize,
+    ...tokens
+  } = _ref;
+  const {
+    fontFamily
+  } = (0, _componentsBase.applyTextStyles)({
+    fontName,
+    fontWeight
+  });
+  return {
+    fontSize: `${fontSize}px`,
+    fontFamily,
+    ...tokens
+  };
+});
+/**
+ * Use Disclaimer to display singular legal statement and must be displayed
+ * immediately adjacent to the related, originating content.
+ */
+
+
+const Disclaimer = _ref2 => {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Disclaimer');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDisclaimer, { ...selectProps(rest),
+    ...themeTokens,
+    children: children
+  });
+};
+
+Disclaimer.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The content
+   */
+  children: _propTypes.default.node.isRequired
+};
+var _default = Disclaimer;
+exports.default = _default;

package/lib/Disclaimer/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Disclaimer.default;
+  }
+});
+
+var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }