@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -22,7 +22,6 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   padding: 0,
   alignItems: 'baseline'
 });
-
 const omitProps = _ref => {
   let {
     current,
@@ -35,12 +34,10 @@ const omitProps = _ref => {
   } = _ref;
   return props;
 };
-
 const getBreadcrumbName = (item, params) => {
   if (!item.breadcrumbName) {
     return null;
   }
-
   let {
     breadcrumbName
   } = item;
@@ -49,26 +46,20 @@ const getBreadcrumbName = (item, params) => {
   });
   return breadcrumbName;
 };
-
 const getPath = (path, params, concatenatePaths, paths) => {
   let p = path;
-
   if (concatenatePaths) {
     p = p.replace(/^\//, '');
     Object.keys(params).forEach(key => {
       p = p.replace(`:${key}`, params[key]);
     });
-
     if (p) {
       paths.push(p);
     }
-
     return `/${paths.join('/')}`;
   }
-
   return p;
 };
-
 const getItems = (items, params, concatenatePaths) => {
   const paths = [];
   return items.filter(item => item.path).map((item, i, filteredItems) => {
@@ -89,7 +80,6 @@ const getItems = (items, params, concatenatePaths) => {
     };
   });
 };
-
 const getStructuredData = (items, baseUrl) => {
   return items.map((item, index) => ({
     '@type': 'ListItem',
@@ -100,11 +90,10 @@ const getStructuredData = (items, baseUrl) => {
     }
   }));
 };
+
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-
-
 const Breadcrumbs = _ref2 => {
   let {
     baseUrl,
@@ -119,7 +108,6 @@ const Breadcrumbs = _ref2 => {
   } = _ref2;
   // React Helmet can cause a memory leak in SSR if not properly configured.
   // Only run it in SSR if theme options tells us to.
-
   /* const {
     themeOptions: { enableHelmetSSR }
   } = useTheme() */
@@ -144,7 +132,6 @@ const Breadcrumbs = _ref2 => {
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
   const items = getItems(activeRoutes, params, !children);
-
   const metadata = /*#__PURE__*/_jsx(HelmetProvider, {
     context: helmetContext,
     children: /*#__PURE__*/_jsx(Helmet, {
@@ -160,7 +147,6 @@ const Breadcrumbs = _ref2 => {
       })
     })
   });
-
   return /*#__PURE__*/_jsxs("nav", {
     "aria-label": "Breadcrumb",
     ...selectProps(rest),
@@ -174,15 +160,18 @@ const Breadcrumbs = _ref2 => {
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
         } = _ref4;
-        return /*#__PURE__*/_createElement(Item, { ...itemRest,
+        return /*#__PURE__*/_createElement(Item, {
+          ...itemRest,
           current: current,
           href: href,
           tokens: tokens,
           key: href,
-          linkRouterProps: { ...linkRouterProps,
+          linkRouterProps: {
+            ...linkRouterProps,
             ...itemLinkRouterProps
           },
-          variant: { ...variant,
+          variant: {
+            ...variant,
             size: 'micro'
           },
           LinkRouter: ItemLinkRouter
@@ -191,26 +180,22 @@ const Breadcrumbs = _ref2 => {
     }), metadata]
   });
 };
-
-Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
+Breadcrumbs.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Breadcrumbs'),
   ...withLinkRouter.propTypes,
-
   /**
    * Base URL used to build structured data.
    */
   baseUrl: PropTypes.string,
-
   /**
    * A list of Items to be used as an alternative to the `routes` prop.
    */
   children: componentPropType('Item'),
-
   /**
    * React Router params.
    */
   params: PropTypes.object,
-
   /**
    * An array of routes to be displayed as breadcrumbs.
    */
@@ -218,7 +203,6 @@ Breadcrumbs.propTypes = { ...selectedSystemPropTypes,
     path: PropTypes.string,
     breadcrumbName: PropTypes.string
   })),
-
   /**
    * Variant to render.
    */

package/lib-module/Breadcrumbs/Item/Item.js

@@ -71,20 +71,24 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
     fontSize,
     ...themeTokens
   } = useThemeTokens('Breadcrumbs', tokens, variant);
-  const linkOptions = { ...clickProps.toPressProps(selectProps(rest)),
+  const linkOptions = {
+    ...clickProps.toPressProps(selectProps(rest)),
     href
   };
-  return /*#__PURE__*/_jsx(StyledItemContainer, { ...themeTokens,
+  return /*#__PURE__*/_jsx(StyledItemContainer, {
+    ...themeTokens,
     children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color: currentColor,
         fontSize
       },
-      variant: { ...variant
+      variant: {
+        ...variant
       },
       children: children
     }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Link, { ...linkOptions,
+      children: [/*#__PURE__*/_jsx(Link, {
+        ...linkOptions,
         ref: ref,
         tokens: {
           color,
@@ -94,7 +98,8 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
         linkRouterProps: linkRouterProps,
         variant: variant,
         children: children
-      }), /*#__PURE__*/_jsx(IconContainer, { ...themeTokens,
+      }), /*#__PURE__*/_jsx(IconContainer, {
+        ...themeTokens,
         children: /*#__PURE__*/_jsx(ChevronRightIcon, {
           size: iconSize,
           color: iconColor
@@ -104,35 +109,33 @@ const Item = /*#__PURE__*/forwardRef((_ref5, ref) => {
   });
 });
 Item.displayName = 'Item';
-Item.propTypes = { ...selectedSystemPropTypes,
-
+Item.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Breadcrumb text
    */
   children: PropTypes.node.isRequired,
-
   /**
    * @ignore
    *
    * Indicates whether or not the Item should be as current/active
    */
   current: PropTypes.bool,
-
   /**
    * Target URL. This will be converted to `to` if the `LinkRouter`
    * prop is provided to the `Item` or parent `Breadcrumbs` element.
    */
   href: PropTypes.string.isRequired,
-
   /**
    * Variant to render.
    */
   variant: PropTypes.shape({
     inverse: PropTypes.bool
   })
-}; // Since react/require-default-props eslint rule doesn't pick up default arguments as default props when combined with `forwardRef`
-// - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
+};
 
+// Since react/require-default-props eslint rule doesn't pick up default arguments as default props when combined with `forwardRef`
+// - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
 Item.defaultProps = {
   current: false,
   variant: {

package/lib-module/Callout/Callout.js

@@ -6,40 +6,31 @@ import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([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':
       return 'flex-start';
-
     case 'middle':
       return 'center';
-
     case 'bottom':
       return 'flex-end';
-
     default:
       return 'top';
   }
 };
-
 const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Callout__CalloutContainer",
   componentId: "components-web__sc-1a7ptx-0"
@@ -63,7 +54,6 @@ const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
     alignItems: verticalAlignToFlex(verticalAlign)
   };
 });
-
 const Callout = _ref2 => {
   let {
     icon,
@@ -120,25 +110,21 @@ const Callout = _ref2 => {
     })]
   });
 };
-
-Callout.propTypes = { ...selectedSystemPropTypes,
+Callout.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Callout'),
-
   /**
    * Icon to display on the left side of the Callout
    */
   icon: PropTypes.elementType,
-
   /**
    * Children nodes that can be added
    */
   children: PropTypes.node.isRequired,
-
   /**
    * To change the horizontal alignment of the Callout's text
    */
   textAlignToFlex: PropTypes.oneOf(['center', 'left']),
-
   /**
    * To change the vertical alignment of the Callout's icon
    */

package/lib-module/Card/Card.js

@@ -7,7 +7,6 @@ import CardFooter from './CardFooter';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
@@ -27,10 +26,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] = selectSystemProps([a11yProps, viewProps]);
+
 /**
  * A basic card component, unstyled by default.
  *
@@ -59,7 +59,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-
 const Card = /*#__PURE__*/forwardRef(function () {
   let {
     children,
@@ -81,13 +80,15 @@ const Card = /*#__PURE__*/forwardRef(function () {
     contentStackDirection,
     fullBleedContentPosition,
     fullBleedContentProps
-  } = 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
+  } = 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 = useThemeTokens('Card', tokens, variant);
   const hasFooter = Boolean(footer);
-  const fullBleedBorderRadius = 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 = 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,
@@ -95,7 +96,8 @@ const Card = /*#__PURE__*/forwardRef(function () {
   };
   return /*#__PURE__*/_jsx(CardBase, {
     ref: ref,
-    variant: { ...variant,
+    variant: {
+      ...variant,
       padding: 'custom'
     },
     tokens: selectCardBaseTokens(cardTokens),
@@ -105,7 +107,8 @@ const Card = /*#__PURE__*/forwardRef(function () {
       tokens: columnFlex,
       children: [/*#__PURE__*/_jsxs(StackView, {
         direction: contentStackDirection,
-        tokens: { ...columnFlex,
+        tokens: {
+          ...columnFlex,
           alignItems: contentStackAlign
         },
         space: 0,
@@ -136,40 +139,34 @@ const PositionedFullBleedContentPropType = PropTypes.shape({
   ...FullBleedContent.propTypes
 });
 Card.displayName = 'Card';
-Card.propTypes = { ...selectedSystemPropTypes,
-
+Card.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Card content.
    */
   children: PropTypes.node,
-
   /**
    * Card footer.
    */
   footer: PropTypes.node,
-
   /**
    * Custom card footer padding.
    */
   footerPadding: 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: getTokensPropType('Card'),
-
   /**
    * Card variant.
    */

package/lib-module/Card/CardContent.js

@@ -41,10 +41,10 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     justifyContent
   };
 });
+
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-
 const CardContent = _ref2 => {
   let {
     children,
@@ -58,31 +58,28 @@ const CardContent = _ref2 => {
   const themeTokens = useThemeTokens('Card', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/_jsx(CardContentContainer, { ...themeTokens,
+  return /*#__PURE__*/_jsx(CardContentContainer, {
+    ...themeTokens,
     flexContent: flexContent,
     withFooter: withFooter,
     ...selectProps(rest),
     children: children
   });
 };
-
-CardContent.propTypes = { ...selectedSystemPropTypes,
-
+CardContent.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Card section content.
    */
   children: PropTypes.node,
-
   /**
    * Card tokens.
    */
   tokens: getTokensPropType('Card'),
-
   /**
    * Card variant.
    */
   variant: variantProp.propType,
-
   /**
    * Whether the card has a footer.
    */

package/lib-module/Card/CardFooter.js

@@ -30,10 +30,10 @@ const CardFooterContainer = /*#__PURE__*/styled.div.withConfig({
     paddingTop
   };
 });
+
 /**
  * Card footer, applying the tokens as per the theme used.
  */
-
 const CardFooter = _ref2 => {
   let {
     children,
@@ -43,35 +43,33 @@ const CardFooter = _ref2 => {
     ...rest
   } = _ref2;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Card', tokens, { ...variant,
+  const themeTokens = useThemeTokens('Card', tokens, {
+    ...variant,
     background: 'alternative'
   }, {
     viewport
   });
-  return /*#__PURE__*/_jsx(CardFooterContainer, { ...themeTokens,
+  return /*#__PURE__*/_jsx(CardFooterContainer, {
+    ...themeTokens,
     ...padding,
     ...selectProps(rest),
     children: children
   });
 };
-
-CardFooter.propTypes = { ...selectedSystemPropTypes,
-
+CardFooter.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Card footer content.
    */
   children: PropTypes.node,
-
   /**
    * Card footer padding.
    */
   padding: paddingProp.propType,
-
   /**
    * Card tokens.
    */
   tokens: getTokensPropType('Card'),
-
   /**
    * Card variant.
    */

package/lib-module/Countdown/Countdown.js

@@ -3,9 +3,9 @@ import React, { forwardRef } 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
+import styled from 'styled-components';
+// Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
-
 import { htmlAttrs, transformGradient } from '../utils';
 import Segment from './Segment';
 import useCountdown from './useCountdown';
@@ -26,7 +26,8 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     themeTokens,
     gradient
   } = _ref;
-  return { ...(large || feature ? {
+  return {
+    ...(large || feature ? {
       display: 'flex',
       flex: 0
     } : {}),
@@ -47,14 +48,12 @@ const Container = /*#__PURE__*/styled.div.withConfig({
     })
   };
 });
-
 const getLabelTokens = themeTokens => ({
   color: themeTokens.labelBorderColor,
   fontSize: themeTokens.labelFontSize,
   fontWeight: themeTokens.labelFontWeight,
   lineHeight: themeTokens.labelLineHeight
 });
-
 const getMainTextTokens = _ref2 => {
   let {
     labelBorderColor,
@@ -71,7 +70,6 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-
 const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
@@ -88,11 +86,9 @@ const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
     label,
     noDivider
   } = variant;
-
   if (noDivider && !label) {
     throw new Error('`noDivider` variant can only be used with `label` enabled!');
   }
-
   const themeTokens = useThemeTokens('Countdown', tokens, variant, {
     viewport
   });
@@ -156,15 +152,14 @@ const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
   );
 });
 Countdown.displayName = 'Countdown';
-Countdown.propTypes = { ...selectedSystemPropTypes,
+Countdown.propTypes = {
+  ...selectedSystemPropTypes,
   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.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.

package/lib-module/Countdown/Segment.js

@@ -3,18 +3,17 @@ 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 { 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 } from "react/jsx-runtime";
 import { 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__*/styled.div.withConfig({
   displayName: "Segment__Container",
   componentId: "components-web__sc-yrh35y-0"
@@ -35,10 +34,10 @@ const Container = /*#__PURE__*/styled.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',
@@ -79,7 +78,6 @@ const Segment = _ref2 => {
     })
   });
 };
-
 Segment.propTypes = {
   /**
    * Copy language identifier or a dictionary instance.

package/lib-module/Countdown/types.js

@@ -5,8 +5,9 @@ export const countdownVariantPropType = PropTypes.shape({
   label: PropTypes.bool,
   large: PropTypes.bool,
   noDivider: PropTypes.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
 export const dictionaryContentShape = PropTypes.shape({
   days: PropTypes.string.isRequired,
   day: PropTypes.string.isRequired,

package/lib-module/Countdown/useCountdown.js

@@ -1,24 +1,19 @@
 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(() => {
@@ -28,5 +23,4 @@ const useCountdown = targetTime => {
   }, [countdownTime]);
   return getTimeCounts(countdown);
 };
-
 export default useCountdown;

package/lib-module/DatePicker/CalendarContainer.js

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
-import defaultReactDatesCss from './reactDatesCss'; // calendarDayDefaultHeight and calendarDayDefaultWidth
+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({