@telus-uds/components-web 2.43.0 → 3.0.0

package/lib-module/Countdown/dictionary.js

@@ -1,22 +0,0 @@
-export default {
-  en: {
-    days: 'Days',
-    day: 'Day',
-    hours: 'Hours',
-    hour: 'Hour',
-    minutes: 'Minutes',
-    minute: 'Minute',
-    seconds: 'Seconds',
-    second: 'Second'
-  },
-  fr: {
-    days: 'Jours',
-    day: 'Jour',
-    hours: 'Heures',
-    hour: 'Heure',
-    minutes: 'Minutes',
-    minute: 'Minute',
-    seconds: 'Secondes',
-    second: 'Seconde'
-  }
-};

package/lib-module/Countdown/index.js

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

package/lib-module/Countdown/types.js

@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types';
-export const countdownVariantPropType = PropTypes.shape({
-  feature: PropTypes.bool,
-  inverse: PropTypes.bool,
-  label: PropTypes.bool,
-  large: PropTypes.bool,
-  noDivider: PropTypes.bool
-});
-
-// If a language dictionary entry is provided, it must contain every key
-export const dictionaryContentShape = PropTypes.shape({
-  days: PropTypes.string.isRequired,
-  day: PropTypes.string.isRequired,
-  hours: PropTypes.string.isRequired,
-  hour: PropTypes.string.isRequired,
-  minutes: PropTypes.string.isRequired,
-  minute: PropTypes.string.isRequired,
-  seconds: PropTypes.string.isRequired,
-  second: PropTypes.string.isRequired
-});
-export default {
-  countdownVariantPropType,
-  dictionaryContentShape
-};

package/lib-module/Countdown/useCountdown.js

@@ -1,26 +0,0 @@
-import { useEffect, useState } from 'react';
-const getTimeCounts = countdown => {
-  if (countdown <= 0) {
-    return [0, 0, 0, 0];
-  }
-  const days = Math.floor(countdown / (1000 * 60 * 60 * 24));
-  const hours = Math.floor(countdown % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
-  const minutes = Math.floor(countdown % (1000 * 60 * 60) / (1000 * 60));
-  const seconds = Math.floor(countdown % (1000 * 60) / 1000);
-  return [days, hours, minutes, seconds];
-};
-const useCountdown = targetTime => {
-  const countdownTime = new Date(targetTime).getTime();
-  if (!countdownTime) {
-    throw new Error('Invalid target time is provided!');
-  }
-  const [countdown, setCountdown] = useState(countdownTime - new Date().getTime());
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCountdown(countdownTime - new Date().getTime());
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [countdownTime]);
-  return getTimeCounts(countdown);
-};
-export default useCountdown;

package/lib-module/DatePicker/CalendarContainer.js

@@ -1,208 +0,0 @@
-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 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "CalendarContainer",
-  componentId: "components-web__sc-qdc1tg-0"
-})(_ref => {
-  let {
-    daySize,
-    remainingTokens,
-    calendarMonthFontTokens,
-    calendarDayDefaultHeight,
-    calendarDayDefaultWidth,
-    calendarWeekFontTokens,
-    defaultFontTokens
-  } = _ref;
-  return `
-  ${defaultReactDatesCss}
-  > div {
-    z-index: 1000;
-  }
-  .SingleDatePicker,
-  .SingleDatePickerInput {
-    display: block;
-  }
-  .SingleDatePicker_picker {
-    background-color: ${remainingTokens.calendarBackgroundColor};
-    box-shadow: none;
-    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
-    border-radius: ${remainingTokens.singleDatePickerRadius}px;
-    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
-    z-index: 1000;
-  }
-  .DateInput {
-    width: 100%;
-  }
-  .SingleDatePickerInput__withBorder {
-    border: 0 !important;
-  }
-  .DateInput_fang {
-    transform: translateY(2px);
-    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}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 {  
-    display: flex;
-    justify-content: space-between;
-    align-self: center;
-    top: 23px;
-    padding: 0px ${remainingTokens.dayPickerNavigationButtonPadding}px;
-  }
-  .DayPickerNavigation_button__default:focus,
-  .DayPickerNavigation_button:hover,
-  .DayPickerNavigation_svg__horizontal,
-  .DayPicker_weekHeader {
-    color: ${remainingTokens.dayPickerWeekHeaderColor};
-    font-family: ${calendarWeekFontTokens.fontFamily};
-    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
-    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
-    & 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}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}px;
-    line-height: ${daySize - 3}px !important;
-    color: ${remainingTokens.calendarDayDefaultColor};
-    text-decoration: none;
-    transition: all 0.3s;
-    &:before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      height: ${calendarDayDefaultHeight}px;
-      width: ${calendarDayDefaultWidth}px;
-      border-radius: 50%;
-      background: transparent;
-      transition: all 0.3s;
-      z-index: -1;
-    }
-  }
-  .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__default.CalendarDay__selected,
-  .CalendarDay__default.CalendarDay__selected:active{
-    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
-    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
-    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
-    text-decoration: none;
-    z-index: 0;
-    &:before {
-      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
-  }
-}
-
-
-.CalendarDay__selected:hover
-  .CalendarDay__default.CalendarDay__selected:hover{
-  &:before {
-    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
-  }
-}
-
-.CalendarDay
-.CalendarDay__default
-.CalendarDay__selected
-.CalendarDay__blocked_out_of_range{
-  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
-  color: ${remainingTokens.calendarDaySelectedDisabledColor};
-  text-decoration: none;
-  z-index: 0;
-  &:before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    height: ${calendarDayDefaultHeight}px;
-    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
-    width: ${calendarDayDefaultWidth}px;
-    border-radius: 50%;
-    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
-    transition: all 0.3s;
-    z-index: -1;
-  }
-}
-
-  .CalendarDay__blocked_out_of_range,
-  .CalendarDay__blocked_out_of_range:active,
-  .CalendarDay__blocked_out_of_range:hover,
-  .CalendarDay__blocked_calendar,
-  .CalendarDay__blocked_calendar:active,
-  .CalendarDay__blocked_calendar:hover {
-    font-weight: 300;
-    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
-    background-clip: padding-box;
-    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
-    text-decoration: none;
-    &:before {
-      content: none;
-    }
-  }
-`;
-});
-export default CalendarContainer;