@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/lib/esm/NavigationBar/collapseItems.js

@@ -1,7 +1,7 @@
 /**
  * Make a list of items into a one-item list where all items are nested under the first item
  */
-const collapseItems = (items, selectedId) => {
+export const collapseItems = (items, selectedId) => {
   if (!items?.length) return items;
 
   // Give the root item the label of the current active link
@@ -33,5 +33,4 @@ const collapseItems = (items, selectedId) => {
     label: rootLabel,
     items
   }];
-};
-export default collapseItems;
+};

package/lib/esm/NavigationBar/resolveItemSelection.js

@@ -1,4 +1,4 @@
-const resolveItemSelection = (_ref, selectedId) => {
+export const resolveItemSelection = (_ref, selectedId) => {
   let {
     id,
     label,
@@ -12,5 +12,4 @@ const resolveItemSelection = (_ref, selectedId) => {
     itemId,
     selected
   };
-};
-export default resolveItemSelection;
+};

package/lib/esm/OptimizeImage/OptimizeImage.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps } from '@telus-uds/components-base';
-import ResponsiveImage from '../ResponsiveImage';
+import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage';
 import { hasWebpSupport, getImageUrls } from './utils';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const OptimizeImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const OptimizeImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     contentfulAssetUrl,
     alt,
@@ -20,8 +20,7 @@ const OptimizeImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disableRetina = false,
     ...rest
   } = _ref;
-  // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
-  const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
+  const dimension = sizeByHeight ? 'h' : 'w';
   // by default assuming webP support for SSR
   const [imgUrls, setImgUrls] = React.useState(getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
   React.useEffect(() => {
@@ -88,5 +87,4 @@ OptimizeImage.propTypes = {
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
   loading: PropTypes.oneOf(['eager', 'lazy'])
-};
-export default OptimizeImage;
+};

package/lib/esm/OptimizeImage/utils/getFallbackUrl.js

@@ -1,5 +1,5 @@
-import isSvgUrl from './isSvgUrl';
-export default function getFallbackUrl(url, dimension, size, quality) {
+import { isSvgUrl } from './isSvgUrl';
+export function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
     return `${url}?${dimension}=${size}&q=${quality}`;
   }

package/lib/esm/OptimizeImage/utils/getImageUrls.js

@@ -1,6 +1,6 @@
-import getOptimizedUrl from './getOptimizedUrl';
-import getFallbackUrl from './getFallbackUrl';
-export default function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
+import { getOptimizedUrl } from './getOptimizedUrl';
+import { getFallbackUrl } from './getFallbackUrl';
+export function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
   return {
     xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
     smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),

package/lib/esm/OptimizeImage/utils/getOptimizedUrl.js

@@ -1,5 +1,5 @@
-import isSvgUrl from './isSvgUrl';
-export default function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
+import { isSvgUrl } from './isSvgUrl';
+export function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
   if (!isSvgUrl(url)) {
     let format = '';
     if (supportsWebp) {

package/lib/esm/OptimizeImage/utils/hasWebpSupport.js

@@ -6,7 +6,7 @@ let promise;
  * @see https://developers.google.com/speed/webp/faq#in_your_own_javascript
  * @return {Promise<boolean>}
  */
-export default function hasWebpSupport() {
+export function hasWebpSupport() {
   // cache the result, so that this function runs only once
   if (!promise) {
     promise = new Promise(resolve => {

package/lib/esm/OptimizeImage/utils/index.js

@@ -1,5 +1,5 @@
-import getOptimizedUrl from './getOptimizedUrl';
-import getFallbackUrl from './getFallbackUrl';
-import hasWebpSupport from './hasWebpSupport';
-import getImageUrls from './getImageUrls';
+import { getOptimizedUrl } from './getOptimizedUrl';
+import { getFallbackUrl } from './getFallbackUrl';
+import { hasWebpSupport } from './hasWebpSupport';
+import { getImageUrls } from './getImageUrls';
 export { getOptimizedUrl, getFallbackUrl, hasWebpSupport, getImageUrls };

package/lib/esm/OptimizeImage/utils/isSvgUrl.js

@@ -1,3 +1,3 @@
-export default function isSvgUrl(url) {
+export function isSvgUrl(url) {
   return !!url.match(/\.svg$/i);
 }

package/lib/esm/OrderedList/OrderedList.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
-import OrderedListBase from './OrderedListBase';
-import Item from './Item';
+import { OrderedListBase } from './OrderedListBase';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -25,7 +24,7 @@ const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     start = 1,
@@ -71,7 +70,7 @@ OrderedList.displayName = 'OrderedList';
 OrderedList.propTypes = {
   ...selectedSystemPropTypes,
   /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
+   * A list of ordered items wrapped in `OrderedListItem`.
    */
   children: PropTypes.node.isRequired,
   /**
@@ -80,6 +79,4 @@ OrderedList.propTypes = {
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   variant: variantProp.propType,
   tokens: getTokensPropType('OrderedList')
-};
-OrderedList.Item = Item;
-export default OrderedList;
+};

package/lib/esm/OrderedList/OrderedListBase.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import ItemBase from './ItemBase';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledList = /*#__PURE__*/styled.ol.withConfig({
   displayName: "OrderedListBase__StyledList",
@@ -17,7 +16,7 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
 /**
  * Semantic ordered list.
  */
-const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     start = 1,
@@ -30,7 +29,7 @@ const OrderedListBase = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children: children
   });
 });
-OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.displayName = 'OrderedListBase';
 OrderedListBase.propTypes = {
   /**
    * A list of ordered items wrapped in `OrderedListBase.Item`.
@@ -40,6 +39,4 @@ OrderedListBase.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-OrderedListBase.Item = ItemBase;
-export default OrderedListBase;
+};

package/lib/esm/OrderedList/{Item.js → OrderedListItem.js}

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import ItemBase from './ItemBase';
+import { OrderedListItemBase } from './OrderedListItemBase';
 import { htmlAttrs } from '../utils';
 import { OL_COUNTER_NAME } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,57 +25,57 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     lineHeight: itemLineHeight
   });
 };
-const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
-  displayName: "Item__StyledItemBase",
-  componentId: "components-web__sc-7jzwcq-0"
+const StyledItemBase = /*#__PURE__*/styled(OrderedListItemBase).withConfig({
+  displayName: "OrderedListItem__StyledItemBase",
+  componentId: "components-web__sc-o9eecv-0"
 })(_ref2 => {
   let {
-    interItemMargin,
-    itemBulletContainerWidth,
-    itemBulletTextAlign,
-    itemFontWeight,
-    itemFontSize,
-    itemFontName,
-    itemLineHeight,
-    themeOptions,
-    listGutter,
-    itemColor,
-    itemTextColor
+    $interItemMargin,
+    $itemBulletContainerWidth,
+    $itemBulletTextAlign,
+    $itemFontWeight,
+    $itemFontSize,
+    $itemFontName,
+    $itemLineHeight,
+    $themeOptions,
+    $listGutter,
+    $itemColor,
+    $itemTextColor
   } = _ref2;
   return {
     counterIncrement: OL_COUNTER_NAME,
-    '::before': {
+    '&::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
       display: 'inline-block',
-      color: itemColor || itemTextColor,
-      width: itemBulletContainerWidth,
-      paddingRight: listGutter,
-      textAlign: itemBulletTextAlign,
+      color: $itemColor || $itemTextColor,
+      width: $itemBulletContainerWidth,
+      paddingRight: $listGutter,
+      textAlign: $itemBulletTextAlign,
       flexShrink: 0,
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       ...applyTextStyles({
-        fontWeight: itemFontWeight,
-        fontSize: itemFontSize,
-        fontName: itemFontName,
-        themeOptions
+        fontWeight: $itemFontWeight,
+        fontSize: $itemFontSize,
+        fontName: $itemFontName,
+        themeOptions: $themeOptions
       }),
-      lineHeight: `${itemLineHeight * itemFontSize}px`
+      lineHeight: `${$itemLineHeight * $itemFontSize}px`
     },
-    ':not(:last-child)': {
-      marginBottom: interItemMargin
+    '&:not(:last-child)': {
+      marginBottom: $interItemMargin
     }
   };
 });
 const ItemContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Item__ItemContent",
-  componentId: "components-web__sc-7jzwcq-1"
+  displayName: "OrderedListItem__ItemContent",
+  componentId: "components-web__sc-o9eecv-1"
 })({
   display: 'flex',
   flexDirection: 'column',
   gap: 0
 });
-const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const OrderedListItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     counterName,
@@ -102,8 +102,17 @@ const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
   return /*#__PURE__*/_jsx(StyledItemBase, {
     ref: ref,
-    themeOptions: themeOptions,
-    ...themeTokens,
+    $themeOptions: themeOptions,
+    $interItemMargin: themeTokens.interItemMargin,
+    $itemBulletContainerWidth: themeTokens.itemBulletContainerWidth,
+    $itemBulletTextAlign: themeTokens.itemBulletTextAlign,
+    $itemFontWeight: themeTokens.itemFontWeight,
+    $itemFontSize: themeTokens.itemFontSize,
+    $itemFontName: themeTokens.itemFontName,
+    $itemLineHeight: themeTokens.itemLineHeight,
+    $listGutter: themeTokens.listGutter,
+    $itemColor: themeTokens.itemColor,
+    $itemTextColor: themeTokens.itemTextColor,
     ...selectProps(rest),
     children: title ? /*#__PURE__*/_jsxs(StackView, {
       tokens: {
@@ -117,7 +126,6 @@ const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         tokens: headingTokens,
         children: title
       }), /*#__PURE__*/_jsx(ItemContent, {
-        ...themeTokens,
         children: itemContent
       })]
     }) : /*#__PURE__*/_jsx(ItemContent, {
@@ -125,20 +133,19 @@ const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     })
   });
 });
-Item.displayName = 'OrderedListItem';
-Item.propTypes = {
+OrderedListItem.displayName = 'OrderedListItem';
+OrderedListItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Item content
    */
   children: PropTypes.node.isRequired,
   /**
-   * Defines the title of the `OrderedList.Item`
+   * Defines the title of the `OrderedListItem`
    */
   title: PropTypes.string,
   /**
    * Item tokens
    */
   tokens: getTokensPropType('OrderedList')
-};
-export default Item;
+};

package/lib/esm/OrderedList/{ItemBase.js → OrderedListItemBase.js}

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledItem = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ItemBase__StyledItem",
-  componentId: "components-web__sc-o0oiv5-0"
+  displayName: "OrderedListItemBase__StyledItem",
+  componentId: "components-web__sc-qnynme-0"
 })({
   display: 'flex'
 });
-const Item = _ref => {
+export const OrderedListItemBase = _ref => {
   let {
     children,
     ...rest
@@ -18,10 +18,9 @@ const Item = _ref => {
     children: children
   });
 };
-Item.propTypes = {
+OrderedListItemBase.propTypes = {
   /**
    * Item content
    */
   children: PropTypes.node.isRequired
-};
-export default Item;
+};

package/lib/esm/OrderedList/constants.js

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export const OL_COUNTER_NAME = 'allium-ordered-list-counter';

package/lib/esm/Paragraph/Paragraph.js

@@ -10,16 +10,16 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
   componentId: "components-web__sc-1bg9r8p-0"
 })(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
   let {
-    align
+    $align
   } = _ref;
-  return align ? `text-align: ${align};` : '';
+  return $align ? `text-align: ${$align};` : '';
 }, _ref2 => {
   let {
-    linesBetween
+    $linesBetween
   } = _ref2;
   return `
-    margin-block-start: ${linesBetween}em;
-    margin-block-end: ${linesBetween}em;
+    margin-block-start: ${$linesBetween}em;
+    margin-block-end: ${$linesBetween}em;
   `;
 });
 
@@ -33,7 +33,7 @@ const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
 	contrast.
 	* - All Allium Typography variants other than header size variants are supported.
 	*/
-const Paragraph = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+export const Paragraph = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -46,9 +46,9 @@ const Paragraph = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const style = useTypographyTheme(variant, tokens);
   return /*#__PURE__*/_jsx(StyledParagraph, {
     ref: ref,
-    linesBetween: linesBetween,
+    $linesBetween: linesBetween,
     "data-testid": testID,
-    align: align,
+    $align: align,
     style: style,
     ...selectProps(rest),
     children: children
@@ -86,5 +86,4 @@ Paragraph.propTypes = {
     inverse: PropTypes.bool,
     size: PropTypes.oneOf(['micro', 'small', 'large'])
   })
-};
-export default Paragraph;
+};

package/lib/esm/PreviewCard/PreviewCard.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 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';
+import { FullBleedContent, getFullBleedBorderRadius, useFullBleedContentProps } from '../shared/FullBleedContent';
 
 // Passes React Native-oriented system props through UDS PressableCardBase
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,11 +16,11 @@ const FullBleedOffsetOuter = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1yfz4de-0"
 })(_ref => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref;
   return {
     overflow: 'hidden',
-    marginTop: borderOffset * 2
+    marginTop: $borderOffset * 2
   };
 });
 const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
@@ -29,11 +28,11 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1yfz4de-1"
 })(_ref2 => {
   let {
-    borderOffset
+    $borderOffset
   } = _ref2;
   return {
     position: 'relative',
-    margin: 0 - borderOffset
+    margin: 0 - $borderOffset
   };
 });
 const defaultTokens = {
@@ -60,8 +59,7 @@ const PreviewCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     tag,
     title,
     footer,
-    fullBleedImage,
-    fullBleedContent = fullBleedImage,
+    fullBleedContent,
     onPress,
     href,
     ...rest
@@ -148,9 +146,9 @@ const PreviewCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
             }) : footer]
           })]
         }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/_jsx(FullBleedOffsetOuter, {
-          borderOffset: borderOffset,
+          $borderOffset: borderOffset,
           children: /*#__PURE__*/_jsx(FullBleedOffsetInner, {
-            borderOffset: borderOffset,
+            $borderOffset: borderOffset,
             children: /*#__PURE__*/_jsx(FullBleedContent, {
               borderRadius: fullBleedBorderRadius,
               ...fullBleedContentProps
@@ -162,9 +160,6 @@ const PreviewCard = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
 });
 PreviewCard.displayName = 'PreviewCard';
-
-// Provide standard author/date footer as a preset with the export
-PreviewCard.AuthorDate = AuthorDate;
 PreviewCard.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('PreviewCard'),
@@ -186,22 +181,22 @@ PreviewCard.propTypes = {
   tag: PropTypes.string,
   /**
    * Section containing additional information, such as author and date.
-   * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
+   * Use `<PreviewCardAuthorDate 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.
    */
   fullBleedContent: PropTypes.exact(FullBleedContent.propTypes || {})
 };
-export default withLinkRouter(PreviewCard);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+export { PreviewCard as PreviewCardBase };
+
+// Export wrapped component as main PreviewCard export
+const PreviewCardWithRouter = withLinkRouter(PreviewCard);
+export { PreviewCardWithRouter as PreviewCard };

package/lib/esm/PreviewCard/{AuthorDate.js → PreviewCardAuthorDate.js}

@@ -10,7 +10,7 @@ import { StackWrap, Typography, useThemeTokens } from '@telus-uds/components-bas
  * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AuthorDate = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const PreviewCardAuthorDate = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     author,
     date
@@ -44,8 +44,8 @@ const AuthorDate = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-AuthorDate.displayName = 'AuthorDate';
-AuthorDate.propTypes = {
+PreviewCardAuthorDate.displayName = 'PreviewCardAuthorDate';
+PreviewCardAuthorDate.propTypes = {
   /**
    * Name of the author
    */
@@ -54,5 +54,4 @@ AuthorDate.propTypes = {
    * Date of the post
    */
   date: PropTypes.string.isRequired
-};
-export default AuthorDate;
+};