@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/NavigationBar/collapseItems.js

@@ -2,30 +2,28 @@
  * Make a list of items into a one-item list where all items are nested under the first item
  */
 const collapseItems = (items, selectedId) => {
-  if (!(items !== null && items !== void 0 && items.length)) return items; // Give the root item the label of the current active link
-  // (or the first item if for some reason there's no match on the selectedId)
+  if (!(items !== null && items !== void 0 && items.length)) return items;
 
+  // Give the root item the label of the current active link
+  // (or the first item if for some reason there's no match on the selectedId)
   let rootLabel = items[0].label;
-
   const isSelected = _ref => {
     let {
       label,
       id
     } = _ref;
     return selectedId === id ?? label;
-  }; // Linter doesn't like for loops, simulate loop that breaks
-
+  };
 
+  // Linter doesn't like for loops, simulate loop that breaks
   items.some(item => {
     var _item$items;
-
     if (isSelected(item)) {
       rootLabel = item.label;
       return true; // break
     }
 
     const nestedMatch = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.find(isSelected);
-
     if (nestedMatch) {
       rootLabel = nestedMatch.label;
       return true; // break
@@ -33,11 +31,11 @@ const collapseItems = (items, selectedId) => {
 
     return false; // continue
   });
+
   return [{
     id: 'navigation-bar-root',
     label: rootLabel,
     items
   }];
 };
-
 export default collapseItems;

package/lib-module/NavigationBar/resolveItemSelection.js

@@ -4,13 +4,13 @@ const resolveItemSelection = (_ref, selectedId) => {
     label,
     items
   } = _ref;
-  const itemId = id ?? label; // Treat item as selected if it or any nested child matches the selected id
+  const itemId = id ?? label;
 
+  // Treat item as selected if it or any nested child matches the selected id
   const selected = Boolean(selectedId === itemId || (items === null || items === void 0 ? void 0 : items.some(item => resolveItemSelection(item, selectedId).selected)));
   return {
     itemId,
     selected
   };
 };
-
 export default resolveItemSelection;

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -6,7 +6,6 @@ import { hasWebpSupport, getOptimizedUrl, getFallbackUrl } from './utils';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
 const OptimizeImage = _ref => {
   let {
     contentfulAssetUrl,
@@ -21,8 +20,9 @@ const OptimizeImage = _ref => {
     disableRetina = false,
     ...rest
   } = _ref;
-  const [imgUrls, setImgUrls] = useState(); // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
+  const [imgUrls, setImgUrls] = useState();
 
+  // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
   const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
   useEffect(() => {
     // Currently not all browsers support webP
@@ -38,64 +38,54 @@ const OptimizeImage = _ref => {
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
   if (!imgUrls) return null;
-  return /*#__PURE__*/_jsx(ResponsiveImage, { ...imgUrls,
+  return /*#__PURE__*/_jsx(ResponsiveImage, {
+    ...imgUrls,
     alt: alt,
     ...selectProps(rest)
   });
 };
-
-OptimizeImage.propTypes = { ...selectedSystemPropTypes,
-
+OptimizeImage.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The source to load the image. Only contentful image urls are supported. See https://www.contentful.com/developers/docs/references/images-api/ for details.
    */
   contentfulAssetUrl: PropTypes.string.isRequired,
-
   /**
    * Alternative text to display if image cannot be loaded or a screen reader is used.
    */
   alt: PropTypes.string.isRequired,
-
   /**
    * Customize quality as a percentage between 1 and 100.
    */
   quality: PropTypes.number,
-
   /**
    * Customize width for xs screen size in px, this may affect the quality of the image.
    */
   xs: PropTypes.number,
-
   /**
    * Customize width for sm screen size in px, this may affect the quality of the image.
    */
   sm: PropTypes.number,
-
   /**
    * Customize width for md screen size in px, this may affect the quality of the image.
    */
   md: PropTypes.number,
-
   /**
    * Customize width for lg screen size in px, this may affect the quality of the image.
    */
   lg: PropTypes.number,
-
   /**
    * Customize width for xl screen size in px, this may affect the quality of the image.
    */
   xl: PropTypes.number,
-
   /**
    * Switches size dimension to height, default is false
    */
   sizeByHeight: PropTypes.bool,
-
   /**
    * Turns off retina display functionality
    */
   disableRetina: PropTypes.bool,
-
   /**
    * Loading strategy.
    * @default 'eager'

package/lib-module/OptimizeImage/utils/getFallbackUrl.js

@@ -3,6 +3,5 @@ export default function getFallbackUrl(url, width, quality) {
   if (!isSvgUrl(url)) {
     return `${url}?w=${width}&q=${quality}`;
   }
-
   return url;
 }

package/lib-module/OptimizeImage/utils/getOptimizedUrl.js

@@ -2,21 +2,16 @@ import isSvgUrl from './isSvgUrl';
 export default function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
   if (!isSvgUrl(url)) {
     let format = '';
-
     if (supportsWebp) {
       format = 'fm=webp';
     } else if (url.match(/\.jpe?g$/i)) {
       format = 'fm=jpg&fl=progressive';
     }
-
     let optimizedUrl = `${url}?${dimension}=${size}&q=${quality}&${format}`;
-
     if (!disableRetina) {
       optimizedUrl += `, ${url}?${dimension}=${size * 2}&q=${quality}&${format} 2x`;
     }
-
     return optimizedUrl;
   }
-
   return url;
 }

package/lib-module/OptimizeImage/utils/hasWebpSupport.js

@@ -1,11 +1,11 @@
 let promise;
+
 /**
  * Taken directly from Google developers guide on how to detect browser support for WebP.
  *
  * @see https://developers.google.com/speed/webp/faq#in_your_own_javascript
  * @return {Promise<boolean>}
  */
-
 export default function hasWebpSupport() {
   // cache the result, so that this function runs only once
   if (!promise) {
@@ -14,19 +14,15 @@ export default function hasWebpSupport() {
       // check google guide if data strings are needed
       const lossy = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
       const img = document.createElement('img');
-
       img.onload = function onLoad() {
         const result = img.width > 0 && img.height > 0;
         resolve(result);
       };
-
       img.onerror = function onError() {
         resolve(false);
       };
-
       img.src = `data:image/webp;base64,${lossy}`;
     });
   }
-
   return promise;
 }

package/lib-module/OrderedList/Item.js

@@ -8,7 +8,6 @@ import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
     itemFontWeight,
@@ -26,7 +25,6 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-
 const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
   displayName: "Item__StyledItemBase",
   componentId: "components-web__sc-7jzwcq-0"
@@ -112,25 +110,24 @@ const Item = /*#__PURE__*/forwardRef((_ref3, ref) => {
         },
         tokens: headingTokens,
         children: title
-      }), /*#__PURE__*/_jsx(ItemContent, { ...themeTokens,
+      }), /*#__PURE__*/_jsx(ItemContent, {
+        ...themeTokens,
         children: itemContent
       })]
     }) : itemContent
   });
 });
 Item.displayName = 'OrderedListItem';
-Item.propTypes = { ...selectedSystemPropTypes,
-
+Item.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Item content
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Defines the title of the `OrderedList.Item`
    */
   title: PropTypes.string,
-
   /**
    * Item tokens
    */

package/lib-module/OrderedList/ItemBase.js

@@ -8,17 +8,16 @@ const StyledItem = /*#__PURE__*/styled.li.withConfig({
 })({
   display: 'flex'
 });
-
 const Item = _ref => {
   let {
     children,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_jsx(StyledItem, { ...rest,
+  return /*#__PURE__*/_jsx(StyledItem, {
+    ...rest,
     children: children
   });
 };
-
 Item.propTypes = {
   /**
    * Item content

package/lib-module/OrderedList/OrderedList.js

@@ -21,10 +21,10 @@ const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
     counterReset: `${OL_COUNTER_NAME} ${start - 1}`
   };
 });
+
 /**
  * Themed semantic ordered list.
  */
-
 const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -35,31 +35,33 @@ const OrderedList = /*#__PURE__*/forwardRef((_ref2, ref) => {
   // Pass any variants "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = variant ? children.map(child => {
     var _child$props;
-
     const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return { ...child,
-      props: { ...child.props,
-        variant: { ...existingChildVariants,
+    return {
+      ...child,
+      props: {
+        ...child.props,
+        variant: {
+          ...existingChildVariants,
           ...variant
         }
       }
     };
   }) : children;
-  return /*#__PURE__*/_jsx(StyledOrderedListBase, { ...selectProps(rest),
+  return /*#__PURE__*/_jsx(StyledOrderedListBase, {
+    ...selectProps(rest),
     ref: ref,
     start: start,
     children: childrenWithParentVariants
   });
 });
 OrderedList.displayName = 'OrderedList';
-OrderedList.propTypes = { ...selectedSystemPropTypes,
+OrderedList.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('OrderedList'),
-
   /**
    * A list of ordered items wrapped in `OrderedList.Item`.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * The position to start the list with.
    */

package/lib-module/OrderedList/OrderedListBase.js

@@ -13,17 +13,18 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   margin: 0,
   padding: 0
 });
+
 /**
  * Semantic ordered list.
  */
-
 const OrderedListBase = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     start,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_jsx(StyledList, { ...rest,
+  return /*#__PURE__*/_jsx(StyledList, {
+    ...rest,
     ref: ref,
     start: start,
     children: children
@@ -35,7 +36,6 @@ OrderedListBase.propTypes = {
    * A list of ordered items wrapped in `OrderedListBase.Item`.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * The position to start the list with.
    */

package/lib-module/Paragraph/Paragraph.js

@@ -22,6 +22,7 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
     margin-block-end: ${linesBetween}em;
   `;
 });
+
 /**
 * Block text as an HTML ```<p>``` element.
 	*
@@ -32,7 +33,6 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-
 const Paragraph = _ref3 => {
   let {
     children,
@@ -53,33 +53,28 @@ const Paragraph = _ref3 => {
     children: children
   });
 };
-
-Paragraph.propTypes = { ...selectedSystemPropTypes,
+Paragraph.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
-
   /**
    * Adds a `data-testid` attribute to the element for testing purposes
    */
   testID: PropTypes.string,
-
   /**
    * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
    * 'justify' should be avoided as it usually reduces ease of reading.
    */
   align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
-
   /**
    * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
    * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
    * @default 1
    */
   linesBetween: PropTypes.number,
-
   /**
    * Paragraph takes the same tokens overrides as Typography
    */
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
-
   /**
    * Paragraph takes any of Typography's theme variants except for header sizes
    */

package/lib-module/PreviewCard/AuthorDate.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-base';
+
 /**
  * A footer for PreviewCard that composes author and date in a standard way
  *
@@ -8,10 +9,8 @@ import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-bas
  * Add same locale-based date formatting as StoryCard when ready.
  * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const AuthorDate = _ref => {
   let {
     author,
@@ -45,13 +44,11 @@ const AuthorDate = _ref => {
     })]
   });
 };
-
 AuthorDate.propTypes = {
   /**
    * Name of the author
    */
   author: PropTypes.string.isRequired,
-
   /**
    * Date of the post
    */

package/lib-module/PreviewCard/PreviewCard.js

@@ -5,14 +5,16 @@ import omit from 'lodash.omit';
 import { Box, getThemeTokens, hrefAttrsProp, PressableCardBase, selectSystemProps, Spacer, StackView, Typography, a11yProps, focusHandlerProps, viewProps, withLinkRouter, useTheme, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import FullBleedContent, { getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
-import AuthorDate from './AuthorDate'; // Passes React Native-oriented system props through UDS PressableCardBase
+import AuthorDate from './AuthorDate';
 
+// Passes React Native-oriented system props through UDS PressableCardBase
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]); // Stop changes to the card's inner border width causing the size and
-// apparent position of the full bleed image to change.
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
+// Stop changes to the card's inner border width causing the size and
+// apparent position of the full bleed image to change.
 const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
   displayName: "PreviewCard__FullBleedOffsetOuter",
   componentId: "components-web__sc-1yfz4de-0"
@@ -45,6 +47,7 @@ const defaultTokens = {
   contentFlexGrow: 0,
   contentFlexShrink: 0
 };
+
 /**
  * Showcase and guide users to another page, with a preview containing title and a footer.
  * Whole card is interactive, width expands based on column or container.
@@ -55,7 +58,6 @@ const defaultTokens = {
  * - Use `href` to set the target URL
  * - Use `fullBleedContent` to set the thumbnail image
  */
-
 const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tag,
@@ -71,7 +73,8 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
     fullBleedContentPosition,
     contentStackDirection,
     fullBleedContentProps
-  } = useFullBleedContentProps({ ...fullBleedContent,
+  } = useFullBleedContentProps({
+    ...fullBleedContent,
     position: 'bottom'
   });
   const {
@@ -79,11 +82,10 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
       PreviewCard: theme
     }
   } = useTheme();
-
-  const getPressableCardTokens = cardState => ({ ...omit(getThemeTokens(theme, {}, {}, cardState), 'separatorColor'),
+  const getPressableCardTokens = cardState => ({
+    ...omit(getThemeTokens(theme, {}, {}, cardState), 'separatorColor'),
     ...defaultTokens
   });
-
   const {
     hrefAttrs,
     rest: unusedRest
@@ -99,8 +101,8 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
       const {
         borderRadius,
         borderWidth
-      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
-
+      } = getPressableCardTokens(cardState);
+      // Stop content jumping around as border size changes
       const borderOffset = borderWidth - theme.tokens.borderWidth;
       const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius + borderOffset, fullBleedContentPosition);
       return /*#__PURE__*/_jsxs(StackView, {
@@ -162,12 +164,13 @@ const PreviewCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
     }
   });
 });
-PreviewCard.displayName = 'PreviewCard'; // Provide standard author/date footer as a preset with the export
+PreviewCard.displayName = 'PreviewCard';
 
+// Provide standard author/date footer as a preset with the export
 PreviewCard.AuthorDate = AuthorDate;
-PreviewCard.propTypes = { ...selectedSystemPropTypes,
+PreviewCard.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('PreviewCard'),
-
   /**
    * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
    * a `PreviewCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
@@ -176,35 +179,29 @@ PreviewCard.propTypes = { ...selectedSystemPropTypes,
    * @see https://github.com/telus/allium-design-system/issues/6
    */
   href: PropTypes.string,
-
   /**
    * Optional function to be called on press e.g. for within-page navigation.
    */
   onPress: PropTypes.func,
-
   /**
    * Text stating the category of the content.
    */
   tag: PropTypes.string,
-
   /**
    * Section containing additional information, such as author and date.
    * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
    */
   footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-
   /**
    * Text stating the title or headline of the story.
    */
   title: PropTypes.string.isRequired,
-
   /**
    * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
    *
    * @deprecated
    */
   fullBleedImage: PropTypes.exact(FullBleedContent.propTypes || {}),
-
   /**
    * Full bleed content to be placed on the card.
    */