@telus-uds/components-web 2.21.2 → 2.23.0

package/lib/Card/Card.js

@@ -4,28 +4,18 @@ 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 _CardContent = _interopRequireDefault(require("./CardContent"));
-
 var _CardFooter = _interopRequireDefault(require("./CardFooter"));
-
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
-
 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; }
-
 /* eslint-disable react/require-default-props */
+
 const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
@@ -45,10 +35,11 @@ const selectCardBaseTokens = _ref => {
     shadow,
     minWidth
   };
-}; // Passes React Native-oriented system props through UDS Card
-
+};
 
+// Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -77,7 +68,6 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-
 const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
   let {
     children,
@@ -99,13 +89,15 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps
-  } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent); // If the card has rounded corners and a full bleed image, we need to apply
-  // those corners on the image as well, but partially
+  } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
 
+  // If the card has rounded corners and a full bleed image, we need to apply
+  // those corners on the image as well, but partially
   const cardTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter); // Make multiple cards in a row have equal heights with even space between content items
+  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(cardTokens === null || cardTokens === void 0 ? void 0 : cardTokens.borderRadius, fullBleedContentPosition, hasFooter);
 
+  // Make multiple cards in a row have equal heights with even space between content items
   const columnFlex = {
     flexGrow: 1,
     flexShrink: 1,
@@ -113,7 +105,8 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Card, {
     ref: ref,
-    variant: { ...variant,
+    variant: {
+      ...variant,
       padding: 'custom'
     },
     tokens: selectCardBaseTokens(cardTokens),
@@ -123,7 +116,8 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
       tokens: columnFlex,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
         direction: contentStackDirection,
-        tokens: { ...columnFlex,
+        tokens: {
+          ...columnFlex,
           alignItems: contentStackAlign
         },
         space: 0,
@@ -147,49 +141,41 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
 });
 const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
 const alignValues = ['start', 'end', 'center', 'stretch'];
-
 const PositionedFullBleedContentPropType = _propTypes.default.shape({
   position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,
   align: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
   // eslint-disable-next-line react/forbid-foreign-prop-types
   ..._FullBleedContent.default.propTypes
 });
-
 Card.displayName = 'Card';
-Card.propTypes = { ...selectedSystemPropTypes,
-
+Card.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Card content.
    */
   children: _propTypes.default.node,
-
   /**
    * Card footer.
    */
   footer: _propTypes.default.node,
-
   /**
    * Custom card footer padding.
    */
   footerPadding: _componentsBase.paddingProp.propType,
-
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *
    * @deprecated
    */
   fullBleedImage: PositionedFullBleedContentPropType,
-
   /**
    * Full bleed content to be placed on the card.
    */
   fullBleedContent: PositionedFullBleedContentPropType,
-
   /**
    * Card tokens.
    */
   tokens: (0, _componentsBase.getTokensPropType)('Card'),
-
   /**
    * Card variant.
    */

package/lib/Card/CardContent.js

@@ -4,23 +4,14 @@ 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 _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 CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "CardContent__CardContentContainer",
   componentId: "components-web__sc-1k2501q-0"
@@ -57,11 +48,10 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     justifyContent
   };
 });
+
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-
-
 const CardContent = _ref2 => {
   let {
     children,
@@ -75,31 +65,28 @@ const CardContent = _ref2 => {
   const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContentContainer, { ...themeTokens,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContentContainer, {
+    ...themeTokens,
     flexContent: flexContent,
     withFooter: withFooter,
     ...selectProps(rest),
     children: children
   });
 };
-
-CardContent.propTypes = { ...selectedSystemPropTypes,
-
+CardContent.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Card section content.
    */
   children: _propTypes.default.node,
-
   /**
    * Card tokens.
    */
   tokens: (0, _componentsBase.getTokensPropType)('Card'),
-
   /**
    * Card variant.
    */
   variant: _componentsBase.variantProp.propType,
-
   /**
    * Whether the card has a footer.
    */

package/lib/Card/CardFooter.js

@@ -4,23 +4,14 @@ 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 _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 CardFooterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "CardFooter__CardFooterContainer",
   componentId: "components-web__sc-pm6vns-0"
@@ -46,11 +37,10 @@ const CardFooterContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
     paddingTop
   };
 });
+
 /**
  * Card footer, applying the tokens as per the theme used.
  */
-
-
 const CardFooter = _ref2 => {
   let {
     children,
@@ -60,35 +50,33 @@ const CardFooter = _ref2 => {
     ...rest
   } = _ref2;
   const viewport = (0, _componentsBase.useViewport)();
-  const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, { ...variant,
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {
+    ...variant,
     background: 'alternative'
   }, {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardFooterContainer, { ...themeTokens,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardFooterContainer, {
+    ...themeTokens,
     ...padding,
     ...selectProps(rest),
     children: children
   });
 };
-
-CardFooter.propTypes = { ...selectedSystemPropTypes,
-
+CardFooter.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Card footer content.
    */
   children: _propTypes.default.node,
-
   /**
    * Card footer padding.
    */
   padding: _componentsBase.paddingProp.propType,
-
   /**
    * Card tokens.
    */
   tokens: (0, _componentsBase.getTokensPropType)('Card'),
-
   /**
    * Card variant.
    */

package/lib/Card/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Card = _interopRequireDefault(require("./Card"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Card.default;
 exports.default = _default;

package/lib/Countdown/Countdown.js

@@ -4,38 +4,24 @@ 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 _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 }; }
-
 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; }
-
 /* eslint-disable react/require-default-props */
+
 // 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({
   displayName: "Countdown__Container",
   componentId: "components-web__sc-18tqcb2-0"
@@ -49,7 +35,8 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     themeTokens,
     gradient
   } = _ref;
-  return { ...(large || feature ? {
+  return {
+    ...(large || feature ? {
       display: 'flex',
       flex: 0
     } : {}),
@@ -70,14 +57,12 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     })
   };
 });
-
 const getLabelTokens = themeTokens => ({
   color: themeTokens.labelBorderColor,
   fontSize: themeTokens.labelFontSize,
   fontWeight: themeTokens.labelFontWeight,
   lineHeight: themeTokens.labelLineHeight
 });
-
 const getMainTextTokens = _ref2 => {
   let {
     labelBorderColor,
@@ -94,7 +79,6 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-
 const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     copy = 'en',
@@ -111,11 +95,9 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     label,
     noDivider
   } = variant;
-
   if (noDivider && !label) {
     throw new Error('`noDivider` variant can only be used with `label` enabled!');
   }
-
   const themeTokens = (0, _componentsBase.useThemeTokens)('Countdown', tokens, variant, {
     viewport
   });
@@ -179,15 +161,14 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   );
 });
 Countdown.displayName = 'Countdown';
-Countdown.propTypes = { ...selectedSystemPropTypes,
+Countdown.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.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]),
-
   /**
    * An instance of JavaScript `Date` object or a string parseable via `Date.parse()`
    * representing a point in the future to count down to.

package/lib/Countdown/Segment.js

@@ -4,32 +4,22 @@ 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 }; }
-
 // !TODO: put this back
+
 // Pads with zeros on the left if it's a single digit number
 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({
   displayName: "Segment__Container",
   componentId: "components-web__sc-yrh35y-0"
@@ -50,11 +40,10 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
       display: 'flex'
     })
   };
-}); // A segment of the countdown string: we need to make sure it
+});
+// 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 = _ref2 => {
   let {
     copy = 'en',
@@ -95,7 +84,6 @@ const Segment = _ref2 => {
     })
   });
 };
-
 Segment.propTypes = {
   /**
    * Copy language identifier or a dictionary instance.

package/lib/Countdown/index.js

@@ -4,10 +4,7 @@ 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;

package/lib/Countdown/types.js

@@ -4,22 +4,18 @@ 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
-}); // If a language dictionary entry is provided, it must contain every key
-
+});
 
+// 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,
@@ -30,7 +26,6 @@ const dictionaryContentShape = _propTypes.default.shape({
   seconds: _propTypes.default.string.isRequired,
   second: _propTypes.default.string.isRequired
 });
-
 exports.dictionaryContentShape = dictionaryContentShape;
 var _default = {
   countdownVariantPropType,

package/lib/Countdown/useCountdown.js

@@ -4,28 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("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] = (0, _react.useState)(countdownTime - new Date().getTime());
   (0, _react.useEffect)(() => {
     const interval = setInterval(() => {
@@ -35,6 +29,5 @@ const useCountdown = targetTime => {
   }, [countdownTime]);
   return getTimeCounts(countdown);
 };
-
 var _default = useCountdown;
 exports.default = _default;

package/lib/DatePicker/CalendarContainer.js

@@ -4,13 +4,9 @@ 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({
@@ -214,6 +210,5 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   }
 `;
 });
-
 var _default = CalendarContainer;
 exports.default = _default;