@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/src/DatePicker/CalendarContainer.jsx

@@ -1,18 +1,18 @@
 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 = styled.div(
+export const CalendarContainer = styled.div(
   ({
-    daySize,
-    remainingTokens,
-    calendarMonthFontTokens,
-    calendarDayDefaultHeight,
-    calendarDayDefaultWidth,
-    calendarWeekFontTokens,
-    defaultFontTokens
+    $daySize,
+    $remainingTokens,
+    $calendarMonthFontTokens,
+    $calendarDayDefaultHeight,
+    $calendarDayDefaultWidth,
+    $calendarWeekFontTokens,
+    $defaultFontTokens
   }) => `
   ${defaultReactDatesCss}
   > div {
@@ -23,12 +23,12 @@ const CalendarContainer = styled.div(
     display: block;
   }
   .SingleDatePicker_picker {
-    background-color: ${remainingTokens.calendarBackgroundColor};
+    background-color: ${$remainingTokens.calendarBackgroundColor};
     box-shadow: none;
-    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
-    border-radius: ${remainingTokens.singleDatePickerRadius}px;
-    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${
-    remainingTokens.singleDatePickerLeftRight
+    border: 1px solid ${$remainingTokens.singleDatePickerBorderColor};
+    border-radius: ${$remainingTokens.singleDatePickerRadius}px;
+    padding: ${$remainingTokens.singleDatePickerPaddingTopBottom}px ${
+    $remainingTokens.singleDatePickerLeftRight
   }px;
     z-index: 1000;
   }
@@ -41,24 +41,24 @@ const CalendarContainer = styled.div(
   .DateInput_fang {
     transform: translateY(2px);
     z-index: 4;
-    left: ${(daySize * 8.5 - 20) / 2}px;
+    left: ${($daySize * 8.5 - 20) / 2}px;
   }
   .DateInput_fangShape {
-    fill: ${remainingTokens.calendarBackgroundColor}
+    fill: ${$remainingTokens.calendarBackgroundColor}
   }
   .DateInput_fangStroke {
-    stroke: ${remainingTokens.dateInputStrokeColor};
+    stroke: ${$remainingTokens.dateInputStrokeColor};
   }
   .CalendarMonth_caption {
-    color: ${remainingTokens.calendarMonthCaptionColor};
-    font-family: ${calendarMonthFontTokens.fontFamily};
-    font-size: ${remainingTokens.calendarMonthCaptionFontSize}px;
-    font-weight: ${calendarMonthFontTokens.fontWeight};
-    line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
-    padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
+    color: ${$remainingTokens.calendarMonthCaptionColor};
+    font-family: ${$calendarMonthFontTokens.fontFamily};
+    font-size: ${$remainingTokens.calendarMonthCaptionFontSize}px;
+    font-weight: ${$calendarMonthFontTokens.fontWeight};
+    line-height: ${$remainingTokens.calendarMonthCaptionLineHeight};
+    padding-bottom: ${$remainingTokens.calendarMonthCaptionPaddingBottom}px;
   }
   .DayPicker{
-    background-color: ${remainingTokens.calendarBackgroundColor};
+    background-color: ${$remainingTokens.calendarBackgroundColor};
   }
   .DayPicker__withBorder {
     box-shadow: none;
@@ -68,42 +68,42 @@ const CalendarContainer = styled.div(
     justify-content: space-between;
     align-self: center;
     top: 23px;
-    padding: 0px ${remainingTokens.dayPickerNavigationButtonPadding}px;
+    padding: 0px ${$remainingTokens.dayPickerNavigationButtonPadding}px;
   }
   .DayPickerNavigation_button__default:focus,
   .DayPickerNavigation_button:hover,
   .DayPickerNavigation_svg__horizontal,
   .DayPicker_weekHeader {
-    color: ${remainingTokens.dayPickerWeekHeaderColor};
-    font-family: ${calendarWeekFontTokens.fontFamily};
+    color: ${$remainingTokens.dayPickerWeekHeaderColor};
+    font-family: ${$calendarWeekFontTokens.fontFamily};
     font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
-    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
+    line-height: ${$remainingTokens.dayPickerWeekHeaderLineHeight};
     & li {
-      font-size: ${remainingTokens.dayPickerWeekHeaderSmall}px;
-      max-width: ${daySize}px !important;
+      font-size: ${$remainingTokens.dayPickerWeekHeaderSmall}px;
+      max-width: ${$daySize}px !important;
     }
   }
   .CalendarMonthGrid {
-    background-color: ${remainingTokens.calendarBackgroundColor};
+    background-color: ${$remainingTokens.calendarBackgroundColor};
   }
   .CalendarMonth {
-    background-color: ${remainingTokens.calendarBackgroundColor};
+    background-color: ${$remainingTokens.calendarBackgroundColor};
   }
   .CalendarDay__default {
     padding: 0px;
     position: relative;
-    background: ${remainingTokens.calendarDayDefaultBackgroundColor};
+    background: ${$remainingTokens.calendarDayDefaultBackgroundColor};
     background-clip: padding-box;
-    border: ${remainingTokens.calendarDayDefaultBorder}px solid ${
-    remainingTokens.calendarDayDefaultBorderColor
+    border: ${$remainingTokens.calendarDayDefaultBorder}px solid ${
+    $remainingTokens.calendarDayDefaultBorderColor
   };
     vertical-align: middle;
-    font-family: ${defaultFontTokens.fontFamily};
-    font-weight: ${defaultFontTokens.fontWeight}
+    font-family: ${$defaultFontTokens.fontFamily};
+    font-weight: ${$defaultFontTokens.fontWeight}
     font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
-    font-size: ${remainingTokens.calendarDayDefaultFontSize}px;
-    line-height: ${daySize - 3}px !important;
-    color: ${remainingTokens.calendarDayDefaultColor};
+    font-size: ${$remainingTokens.calendarDayDefaultFontSize}px;
+    line-height: ${$daySize - 3}px !important;
+    color: ${$remainingTokens.calendarDayDefaultColor};
     text-decoration: none;
     transition: all 0.3s;
     &:before {
@@ -112,8 +112,8 @@ const CalendarContainer = styled.div(
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      height: ${calendarDayDefaultHeight}px;
-      width: ${calendarDayDefaultWidth}px;
+      height: ${$calendarDayDefaultHeight}px;
+      width: ${$calendarDayDefaultWidth}px;
       border-radius: 50%;
       background: transparent;
       transition: all 0.3s;
@@ -121,38 +121,38 @@ const CalendarContainer = styled.div(
     }
   }
   .CalendarDay__default:hover  {
-    background: ${remainingTokens.calendarDaySelectedHoverBackground};
-    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
-    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    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};
+      border: 1px solid ${$remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
+      background: ${$remainingTokens.calendarDaySelectedHoverBeforeBackground};
     }
   }
   .CalendarDay__default:focus{
-    background: ${remainingTokens.calendarDaySelectedHoverBackground};
-    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
-    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    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};
+      border: 1px solid ${$remainingTokens.calendarDaySelectedHoverBeforeBorderColor};
+      background: ${$remainingTokens.calendarDaySelectedFocusBeforeBackground};
     }
   }
   .CalendarDay__selected,
   .CalendarDay__selected:active,
   .CalendarDay__default.CalendarDay__selected,
   .CalendarDay__default.CalendarDay__selected:active{
-    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
-    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
-    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
+    background: ${$remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
+    border: 1px solid ${$remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${$remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
     text-decoration: none;
     z-index: 0;
     &:before {
-      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
+      background: ${$remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
   }
 }
 
@@ -160,7 +160,7 @@ const CalendarContainer = styled.div(
 .CalendarDay__selected:hover
   .CalendarDay__default.CalendarDay__selected:hover{
   &:before {
-    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
+    background: ${$remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
   }
 }
 
@@ -168,8 +168,8 @@ const CalendarContainer = styled.div(
 .CalendarDay__default
 .CalendarDay__selected
 .CalendarDay__blocked_out_of_range{
-  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
-  color: ${remainingTokens.calendarDaySelectedDisabledColor};
+  background: ${$remainingTokens.calendarDaySelectedDisabledBackground};
+  color: ${$remainingTokens.calendarDaySelectedDisabledColor};
   text-decoration: none;
   z-index: 0;
   &:before {
@@ -178,11 +178,11 @@ const CalendarContainer = styled.div(
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    height: ${calendarDayDefaultHeight}px;
-    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
-    width: ${calendarDayDefaultWidth}px;
+    height: ${$calendarDayDefaultHeight}px;
+    border: 1px solid ${$remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    width: ${$calendarDayDefaultWidth}px;
     border-radius: 50%;
-    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    background: ${$remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
     transition: all 0.3s;
     z-index: -1;
   }
@@ -195,9 +195,9 @@ const CalendarContainer = styled.div(
   .CalendarDay__blocked_calendar:active,
   .CalendarDay__blocked_calendar:hover {
     font-weight: 300;
-    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
+    background: ${$remainingTokens.calendarDayBlockedCalendarHoverBackground};
     background-clip: padding-box;
-    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
+    color: ${$remainingTokens.calendarDayBlockedCalendarHoverColor};
     text-decoration: none;
     &:before {
       content: none;
@@ -205,5 +205,3 @@ const CalendarContainer = styled.div(
   }
 `
 )
-
-export default CalendarContainer

package/src/DatePicker/DatePicker.jsx

@@ -18,8 +18,8 @@ import {
 import styled from 'styled-components'
 import moment from 'moment'
 import { isUndefined, throttle } from 'lodash'
-import CalendarContainer from './CalendarContainer'
-import dictionary from './dictionary'
+import { CalendarContainer } from './CalendarContainer'
+import { dictionary } from './dictionary'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
@@ -88,7 +88,7 @@ const HiddenInputFieldContainer = styled.div`
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = React.forwardRef(
+export const DatePicker = React.forwardRef(
   (
     {
       copy = 'en',
@@ -321,14 +321,14 @@ const DatePicker = React.forwardRef(
             </HiddenInputFieldContainer>
             <CalendarContainer
               {...selectProps(rest)}
-              daySize={daySize}
+              $daySize={daySize}
               validation={validation}
-              remainingTokens={remainingTokens}
-              calendarDayDefaultHeight={circleSize}
-              calendarDayDefaultWidth={circleSize}
-              calendarMonthFontTokens={calendarMonthFontTokens}
-              calendarWeekFontTokens={calendarWeekFontTokens}
-              defaultFontTokens={defaultFontTokens}
+              $remainingTokens={remainingTokens}
+              $calendarDayDefaultHeight={circleSize}
+              $calendarDayDefaultWidth={circleSize}
+              $calendarMonthFontTokens={calendarMonthFontTokens}
+              $calendarWeekFontTokens={calendarWeekFontTokens}
+              $defaultFontTokens={defaultFontTokens}
             >
               <DayPickerSingleDateController
                 date={inputDate}
@@ -402,14 +402,14 @@ const DatePicker = React.forwardRef(
                 >
                   <CalendarContainer
                     {...selectProps(rest)}
-                    daySize={daySize}
+                    $daySize={daySize}
                     validation={validation}
-                    remainingTokens={remainingTokens}
-                    calendarDayDefaultHeight={circleSize}
-                    calendarDayDefaultWidth={circleSize}
-                    calendarMonthFontTokens={calendarMonthFontTokens}
-                    calendarWeekFontTokens={calendarWeekFontTokens}
-                    defaultFontTokens={defaultFontTokens}
+                    $remainingTokens={remainingTokens}
+                    $calendarDayDefaultHeight={circleSize}
+                    $calendarDayDefaultWidth={circleSize}
+                    $calendarMonthFontTokens={calendarMonthFontTokens}
+                    $calendarWeekFontTokens={calendarWeekFontTokens}
+                    $defaultFontTokens={defaultFontTokens}
                   >
                     <SingleDatePicker
                       date={inputDate}
@@ -539,5 +539,3 @@ DatePicker.propTypes = {
    */
   initialVisibleMonth: PropTypes.string
 }
-
-export default DatePicker

package/src/DatePicker/dictionary.js

@@ -48,7 +48,7 @@ const dateIsSelected = ({ date }) => `Choisie. ${date}`
 const dateIsSelectedAsStartDate = ({ date }) => `Choisie comme date de début. ${date}`
 const dateIsSelectedAsEndDate = ({ date }) => `Choisie comme date de fin. ${date}`
 
-const dictionary = {
+export const dictionary = {
   en: undefined, // uses react-dates defaults
   fr: {
     calendarLabel,
@@ -88,5 +88,3 @@ const dictionary = {
     keyboardBackwardNavigationInstructions
   }
 }
-
-export default dictionary

package/src/DatePicker/reactDatesCss.js

@@ -1,6 +1,6 @@
 import { css } from 'styled-components'
 
-const defaultReactDatesCss = css`
+export const defaultReactDatesCss = css`
   .PresetDateRangePicker_panel {
     padding: 0 22px 11px;
   }
@@ -825,5 +825,3 @@ const defaultReactDatesCss = css`
     fill: #cacccd;
   }
 `
-
-export default defaultReactDatesCss

package/src/Disclaimer/Disclaimer.jsx

@@ -11,12 +11,13 @@ import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
-const StyledDisclaimer = styled.p(({ fontName, fontWeight, fontSize, ...tokens }) => {
-  const { fontFamily } = applyTextStyles({ fontName, fontWeight })
+const StyledDisclaimer = styled.p(({ $fontName, $fontWeight, $fontSize, $lineHeight, $color }) => {
+  const { fontFamily } = applyTextStyles({ fontName: $fontName, fontWeight: $fontWeight })
   return {
-    fontSize: `${fontSize}px`,
+    fontSize: `${$fontSize}px`,
     fontFamily,
-    ...tokens
+    lineHeight: $lineHeight,
+    color: $color
   }
 })
 
@@ -24,10 +25,18 @@ const StyledDisclaimer = styled.p(({ fontName, fontWeight, fontSize, ...tokens }
  * Use Disclaimer to display singular legal statement and must be displayed
  * immediately adjacent to the related, originating content.
  */
-const Disclaimer = React.forwardRef(({ children, ...rest }, ref) => {
+export const Disclaimer = React.forwardRef(({ children, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Disclaimer')
+  const { fontName, fontWeight, fontSize, lineHeight, color } = themeTokens
+  const transientTokens = {
+    $fontName: fontName,
+    $fontWeight: fontWeight,
+    $fontSize: fontSize,
+    $lineHeight: lineHeight,
+    $color: color
+  }
   return (
-    <StyledDisclaimer ref={ref} {...selectProps(rest)} {...themeTokens}>
+    <StyledDisclaimer ref={ref} {...selectProps(rest)} {...transientTokens}>
       {children}
     </StyledDisclaimer>
   )
@@ -40,5 +49,3 @@ Disclaimer.propTypes = {
   tokens: getTokensPropType('Disclaimer'),
   children: PropTypes.node.isRequired
 }
-
-export default Disclaimer