@telus-uds/components-web 2.44.0 → 3.0.0

package/lib/Countdown/Countdown.js

@@ -1,24 +1,17 @@
-"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 _systemConstants = require("@telus-uds/system-constants");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _utils = require("../utils");
-var _Segment = _interopRequireDefault(require("./Segment"));
-var _useCountdown = _interopRequireDefault(require("./useCountdown"));
-var _types = require("./types");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Spacer, StackView, Typography, selectSystemProps, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
+import { viewports } from '@telus-uds/system-constants';
+import styled from 'styled-components';
 // Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import { htmlAttrs, transformGradient } from '../utils';
+import Segment from './Segment';
+import useCountdown from './useCountdown';
+import { countdownVariantPropType, dictionaryContentShape } from './types';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Container = /*#__PURE__*/styled.div.withConfig({
   displayName: "Countdown__Container",
   componentId: "components-web__sc-18tqcb2-0"
 })(_ref => {
@@ -75,7 +68,7 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
@@ -83,8 +76,8 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     variant = {},
     ...rest
   } = _ref3;
-  const [days, hours, minutes, seconds] = (0, _useCountdown.default)(targetTime);
-  const viewport = (0, _componentsBase.useViewport)();
+  const [days, hours, minutes, seconds] = useCountdown(targetTime);
+  const viewport = useViewport();
   const {
     feature,
     large,
@@ -94,19 +87,19 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   if (noDivider && !label) {
     throw new Error('`noDivider` variant can only be used with `label` enabled!');
   }
-  const themeTokens = (0, _componentsBase.useThemeTokens)('Countdown', tokens, variant, {
+  const themeTokens = useThemeTokens('Countdown', tokens, variant, {
     viewport
   });
   const segmentFontSize = themeTokens.textFontSize;
-  const semanticGradient = themeTokens.containerGradient && (0, _utils.transformGradient)(themeTokens.containerGradient);
+  const semanticGradient = themeTokens.containerGradient && transformGradient(themeTokens.containerGradient);
   const mainTextTokens = getMainTextTokens(themeTokens);
   const divider = noDivider === true ?
   /*#__PURE__*/
   // StackView-based subcontainer adds a 1-step space on the each side of the divider
-  (0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+  _jsx(Spacer, {
     direction: "row",
-    space: (feature || large) && viewport !== _systemConstants.viewports.xs ? 4 : 1
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    space: (feature || large) && viewport !== viewports.xs ? 4 : 1
+  }) : /*#__PURE__*/_jsx(Typography, {
     tokens: mainTextTokens,
     children: ":"
   });
@@ -121,36 +114,36 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   return (
     /*#__PURE__*/
     // Making it focusable for accessibility purposes
-    (0, _jsxRuntime.jsx)(Container, {
+    _jsx(Container, {
       ref: ref,
       variant: variant,
       ...selectProps(rest),
       tabIndex: 0,
       themeTokens: themeTokens,
       gradient: semanticGradient,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      children: /*#__PURE__*/_jsxs(StackView, {
         direction: "row",
         space: 1,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
+        children: [/*#__PURE__*/_jsx(Segment, {
           labelKey: "day",
           number: days,
           segmentWidth: String(days).length,
           ...segmentProps
-        }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
+        }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "hour",
           number: hours,
           ...segmentProps,
-          ...(0, _componentsBase.applyTextStyles)(themeTokens)
-        }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
+          ...applyTextStyles(themeTokens)
+        }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "minute",
           number: minutes,
           ...segmentProps,
-          ...(0, _componentsBase.applyTextStyles)(themeTokens)
-        }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
+          ...applyTextStyles(themeTokens)
+        }), divider, /*#__PURE__*/_jsx(Segment, {
           labelKey: "second",
           number: seconds,
           ...segmentProps,
-          ...(0, _componentsBase.applyTextStyles)(themeTokens)
+          ...applyTextStyles(themeTokens)
         })]
       })
     })
@@ -159,18 +152,17 @@ const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 Countdown.displayName = 'Countdown';
 Countdown.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Countdown'),
+  tokens: getTokensPropType('Countdown'),
   /**
    * Copy language identifier (`'en'` or `'fr'`) or a dictionary instance (an object with
    * the following keys: days, day, hours, hour, minutes, minute, seconds, second)
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _types.dictionaryContentShape]),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
   /**
    * An instance of JavaScript `Date` object or a string parseable via `Date.parse()`
    * representing a point in the future to count down to.
    */
-  targetTime: _propTypes.default.instanceOf(Date),
-  variant: _types.countdownVariantPropType
+  targetTime: PropTypes.instanceOf(Date),
+  variant: countdownVariantPropType
 };
-var _default = Countdown;
-exports.default = _default;
+export default Countdown;

package/lib/Countdown/Segment.js

@@ -1,26 +1,19 @@
-"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 _styledComponents = _interopRequireDefault(require("styled-components"));
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _types = require("./types");
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StackView, Typography, useCopy } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import dictionary from './dictionary';
+import { countdownVariantPropType, dictionaryContentShape } from './types';
 // !TODO: put this back
+import { SEGMENT_WIDTH_TO_FONT_SIZE_RATIO } from './constants';
 
 // Pads with zeros on the left if it's a single digit number
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const pad = function (number) {
   let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return String(number).padStart(segmentWidth, '0');
 };
-const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const Container = /*#__PURE__*/styled.div.withConfig({
   displayName: "Segment__Container",
   componentId: "components-web__sc-yrh35y-0"
 })(_ref => {
@@ -36,7 +29,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     display: 'inline-flex',
     ...(feature && {
       // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
-      width: `${segmentFontSize * _constants.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
+      width: `${segmentFontSize * SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
       display: 'flex'
     })
   };
@@ -44,7 +37,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts
-const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Segment = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     segmentFontSize,
@@ -55,8 +48,8 @@ const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     segmentWidth = 2,
     variant = {}
   } = _ref2;
-  const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const {
@@ -64,21 +57,21 @@ const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     large,
     feature
   } = variant;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/_jsx(Container, {
     segmentFontSize: segmentFontSize,
     segmentWidth: segmentWidth,
     variant: variant,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: /*#__PURE__*/_jsxs(StackView, {
       direction: large || feature ? 'column' : 'row',
       space: large || feature ? 0 : 1,
       tokens: {
         alignItems: 'center'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      children: [/*#__PURE__*/_jsx(Typography, {
         tokens: numberTokens,
         children: pad(number, segmentWidth)
-      }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      }), label && /*#__PURE__*/_jsx(Typography, {
         tokens: labelTokens,
         children: getCopy(number === 1 ? labelKey : `${labelKey}s`)
       })]
@@ -90,14 +83,13 @@ Segment.propTypes = {
   /**
    * Copy language identifier or a dictionary instance.
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _types.dictionaryContentShape]),
-  segmentFontSize: _propTypes.default.number,
-  labelKey: _propTypes.default.oneOf(['day', 'hour', 'minute', 'second']),
-  labelTokens: _propTypes.default.object,
-  number: _propTypes.default.number,
-  numberTokens: _propTypes.default.object,
-  segmentWidth: _propTypes.default.number,
-  variant: _types.countdownVariantPropType
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
+  segmentFontSize: PropTypes.number,
+  labelKey: PropTypes.oneOf(['day', 'hour', 'minute', 'second']),
+  labelTokens: PropTypes.object,
+  number: PropTypes.number,
+  numberTokens: PropTypes.object,
+  segmentWidth: PropTypes.number,
+  variant: countdownVariantPropType
 };
-var _default = Segment;
-exports.default = _default;
+export default Segment;

package/lib/Countdown/constants.js

@@ -1,14 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.XS_FONT_SIZE = exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = exports.LARGE_FONT_SIZE = exports.DEFAULT_FONT_SIZE = void 0;
-const DEFAULT_FONT_SIZE = 16;
-exports.DEFAULT_FONT_SIZE = DEFAULT_FONT_SIZE;
-const LARGE_FONT_SIZE = 64;
-exports.LARGE_FONT_SIZE = LARGE_FONT_SIZE;
-const XS_FONT_SIZE = 28;
-exports.XS_FONT_SIZE = XS_FONT_SIZE;
-const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
-exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = SEGMENT_WIDTH_TO_FONT_SIZE_RATIO;
+export const DEFAULT_FONT_SIZE = 16;
+export const LARGE_FONT_SIZE = 64;
+export const XS_FONT_SIZE = 28;
+export const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;

package/lib/Countdown/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     days: 'Days',
     day: 'Day',
@@ -25,5 +19,4 @@ var _default = {
     seconds: 'Secondes',
     second: 'Seconde'
   }
-};
-exports.default = _default;
+};

package/lib/Countdown/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Countdown = _interopRequireDefault(require("./Countdown"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Countdown.default;
-exports.default = _default;
+import Countdown from './Countdown';
+export default Countdown;

package/lib/Countdown/types.js

@@ -1,34 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.dictionaryContentShape = exports.default = exports.countdownVariantPropType = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const countdownVariantPropType = _propTypes.default.shape({
-  feature: _propTypes.default.bool,
-  inverse: _propTypes.default.bool,
-  label: _propTypes.default.bool,
-  large: _propTypes.default.bool,
-  noDivider: _propTypes.default.bool
+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
-exports.countdownVariantPropType = countdownVariantPropType;
-const dictionaryContentShape = _propTypes.default.shape({
-  days: _propTypes.default.string.isRequired,
-  day: _propTypes.default.string.isRequired,
-  hours: _propTypes.default.string.isRequired,
-  hour: _propTypes.default.string.isRequired,
-  minutes: _propTypes.default.string.isRequired,
-  minute: _propTypes.default.string.isRequired,
-  seconds: _propTypes.default.string.isRequired,
-  second: _propTypes.default.string.isRequired
+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
 });
-exports.dictionaryContentShape = dictionaryContentShape;
-var _default = {
+export default {
   countdownVariantPropType,
   dictionaryContentShape
-};
-exports.default = _default;
+};

package/lib/Countdown/useCountdown.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
+import { useEffect, useState } from 'react';
 const getTimeCounts = countdown => {
   if (countdown <= 0) {
     return [0, 0, 0, 0];
@@ -20,8 +14,8 @@ const useCountdown = targetTime => {
   if (!countdownTime) {
     throw new Error('Invalid target time is provided!');
   }
-  const [countdown, setCountdown] = (0, _react.useState)(countdownTime - new Date().getTime());
-  (0, _react.useEffect)(() => {
+  const [countdown, setCountdown] = useState(countdownTime - new Date().getTime());
+  useEffect(() => {
     const interval = setInterval(() => {
       setCountdown(countdownTime - new Date().getTime());
     }, 1000);
@@ -29,5 +23,4 @@ const useCountdown = targetTime => {
   }, [countdownTime]);
   return getTimeCounts(countdown);
 };
-var _default = useCountdown;
-exports.default = _default;
+export default useCountdown;

package/lib/DatePicker/CalendarContainer.js

@@ -1,15 +1,10 @@
-"use strict";
+import styled from 'styled-components';
+import defaultReactDatesCss from './reactDatesCss';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-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({
+
+const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "CalendarContainer",
   componentId: "components-web__sc-qdc1tg-0"
 })(_ref => {
@@ -23,7 +18,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
     defaultFontTokens
   } = _ref;
   return `
-  ${_reactDatesCss.default}
+  ${defaultReactDatesCss}
   > div {
     z-index: 1000;
   }
@@ -210,5 +205,4 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   }
 `;
 });
-var _default = CalendarContainer;
-exports.default = _default;
+export default CalendarContainer;