@telus-uds/components-web 4.19.2 → 5.0.0-alpha.1

package/lib/esm/Badge/Badge.js

@@ -10,35 +10,35 @@ const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-tsiuo2-0"
 })(["background:", ";border:", ";display:inline-flex;justify-content:center;align-items:center;height:fit-content;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
   let {
-    background
+    $background
   } = _ref;
-  return background;
+  return $background;
 }, _ref2 => {
   let {
-    border
+    $border
   } = _ref2;
-  return border;
+  return $border;
 }, _ref3 => {
   let {
-    padding
+    $padding
   } = _ref3;
-  return padding;
+  return $padding;
 }, _ref4 => {
   let {
-    radius
+    $radius
   } = _ref4;
-  return radius;
+  return $radius;
 }, _ref5 => {
   let {
-    isOutlineOffer,
-    isAlternative,
-    gradient
+    $isOutlineOffer,
+    $isAlternative,
+    $gradient
   } = _ref5;
-  return (isOutlineOffer || isAlternative) && `
+  return ($isOutlineOffer || $isAlternative) && `
     > div {
-      background: ${gradient};
+      background: ${$gradient};
 	    -webkit-background-clip: text;
-	    ${gradient && '-webkit-text-fill-color: transparent;'}
+	    ${$gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
 const fontSizeMapping = {
@@ -46,7 +46,7 @@ const fontSizeMapping = {
   14: 'small',
   16: 'h6'
 };
-const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+export const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -82,15 +82,15 @@ const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     background = semanticGradient;
   }
   return /*#__PURE__*/_jsx(BadgeContainer, {
-    isOutlineOffer: isOutlineOffer,
-    isAlternative: alternative,
-    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-    radius: `${borderRadius}px`,
-    background: background,
-    fontName: fontName,
-    fontWeight: fontWeight,
-    gradient: semanticGradient,
-    border: `${borderWidth}px solid ${borderColor}`,
+    $isOutlineOffer: isOutlineOffer,
+    $isAlternative: alternative,
+    $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    $radius: `${borderRadius}px`,
+    $background: background,
+    $fontName: fontName,
+    $fontWeight: fontWeight,
+    $gradient: semanticGradient,
+    $border: `${borderWidth}px solid ${borderColor}`,
     ref: ref,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(Typography, {
@@ -117,5 +117,4 @@ Badge.propTypes = {
     alternative: PropTypes.bool,
     inverse: PropTypes.bool
   })
-};
-export default Badge;
+};

package/lib/esm/BlockQuote/BlockQuote.js

@@ -10,43 +10,43 @@ const BlockQuoteContainer = /*#__PURE__*/styled.blockquote.withConfig({
   componentId: "components-web__sc-vals3u-0"
 })(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
   let {
-    paddingLeft
+    $paddingLeft
   } = _ref;
-  return `${paddingLeft}px`;
+  return `${$paddingLeft}px`;
 }, _ref2 => {
   let {
-    paddingRight
+    $paddingRight
   } = _ref2;
-  return `${paddingRight}px`;
+  return `${$paddingRight}px`;
 }, _ref3 => {
   let {
-    paddingBottom
+    $paddingBottom
   } = _ref3;
-  return `${paddingBottom}px`;
+  return `${$paddingBottom}px`;
 }, _ref4 => {
   let {
-    paddingTop
+    $paddingTop
   } = _ref4;
-  return `${paddingTop}px`;
+  return `${$paddingTop}px`;
 }, _ref5 => {
   let {
-    width
+    $width
   } = _ref5;
-  return `${width}px`;
+  return `${$width}px`;
 }, _ref6 => {
   let {
-    backgroundGradient
+    $backgroundGradient
   } = _ref6;
-  return backgroundGradient && transformGradient(backgroundGradient);
+  return $backgroundGradient && transformGradient($backgroundGradient);
 });
 const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "BlockQuote__QuoteContainer",
   componentId: "components-web__sc-vals3u-1"
 })(["margin-bottom:", ";"], _ref7 => {
   let {
-    marginBottom
+    $marginBottom
   } = _ref7;
-  return `${marginBottom}px`;
+  return `${$marginBottom}px`;
 });
 const selectTitleHeadingTokens = themeTokens => ({
   fontSize: themeTokens.titleHeadingFontSize,
@@ -54,7 +54,7 @@ const selectTitleHeadingTokens = themeTokens => ({
   fontWeight: themeTokens.titleHeadingFontWeight,
   lineHeight: themeTokens.titleHeadingLineHeight
 });
-const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     children,
     link,
@@ -156,7 +156,7 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
           color
         },
         variant: {
-          alternative: true
+          style: 'subtle'
         },
         LinkRouter: LinkRouter,
         linkRouterProps: linkRouterProps,
@@ -188,7 +188,7 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     });
     if (additionalInfo || link) {
       return /*#__PURE__*/_jsx(QuoteContainer, {
-        marginBottom: marginBottom,
+        $marginBottom: marginBottom,
         children: quote
       });
     }
@@ -196,12 +196,12 @@ const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   };
   return /*#__PURE__*/_jsxs(BlockQuoteContainer, {
     ...selectProps(rest),
-    paddingTop: paddingTop,
-    paddingBottom: paddingBottom,
-    paddingLeft: paddingLeft,
-    paddingRight: paddingRight,
-    width: width,
-    backgroundGradient: backgroundGradient,
+    $paddingTop: paddingTop,
+    $paddingBottom: paddingBottom,
+    $paddingLeft: paddingLeft,
+    $paddingRight: paddingRight,
+    $width: width,
+    $backgroundGradient: backgroundGradient,
     ref: ref,
     children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/_jsxs(StackView, {
       space: 0,
@@ -223,7 +223,7 @@ BlockQuote.propTypes = {
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('BlockQuote'),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool,
+    style: PropTypes.oneOf(['inline', 'subtle', 'feature', 'danger', 'inverse']),
     size: PropTypes.string
   }),
   /**
@@ -246,5 +246,4 @@ BlockQuote.propTypes = {
    * Whether to render BlockQuote as a heading size of `h3` or large text size
    */
   textStyle: PropTypes.oneOf(['large', 'heading'])
-};
-export default BlockQuote;
+};

package/lib/esm/Breadcrumbs/{Item/Item.js → BreadcrumbItem.js}

@@ -2,72 +2,72 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
 import styled from 'styled-components';
-import { htmlAttrs } from '../../utils';
+import { htmlAttrs } from '../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
-  displayName: "Item__StyledItemContainer",
-  componentId: "components-web__sc-1rfdaul-0"
+  displayName: "BreadcrumbItem__StyledItemContainer",
+  componentId: "components-web__sc-oye1s7-0"
 })({
   display: 'inline-block',
   paddingLeft: _ref => {
     let {
-      listItemPadding
+      $listItemPadding
     } = _ref;
-    return `${listItemPadding}px`;
+    return `${$listItemPadding}px`;
   },
   lineHeight: _ref2 => {
     let {
-      lineHeight,
-      fontSize
+      $lineHeight,
+      $fontSize
     } = _ref2;
-    return `${Math.ceil(lineHeight * fontSize)}px`;
+    return `${Math.ceil($lineHeight * $fontSize)}px`;
   },
   marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/styled.span.withConfig({
-  displayName: "Item__IconContainer",
-  componentId: "components-web__sc-1rfdaul-1"
+  displayName: "BreadcrumbItem__IconContainer",
+  componentId: "components-web__sc-oye1s7-1"
 })({
   display: 'inline-block',
   paddingLeft: _ref3 => {
     let {
-      iconPadding
+      $iconPadding
     } = _ref3;
-    return `${iconPadding}px`;
+    return `${$iconPadding}px`;
   },
   paddingRight: _ref4 => {
     let {
-      iconPadding
+      $iconPadding
     } = _ref4;
-    return `${iconPadding}px`;
+    return `${$iconPadding}px`;
   },
   fontFamily: _ref5 => {
     let {
-      fontName,
-      fontWeight
+      $fontName,
+      $fontWeight
     } = _ref5;
     return applyTextStyles({
-      fontName,
-      fontWeight
+      fontName: $fontName,
+      fontWeight: $fontWeight
     }).fontFamily;
   },
   height: _ref6 => {
     let {
-      iconContainerSize
+      $iconContainerSize
     } = _ref6;
-    return `${iconContainerSize}px`;
+    return `${$iconContainerSize}px`;
   },
   width: _ref7 => {
     let {
-      iconContainerSize,
-      iconPadding
+      $iconContainerSize,
+      $iconPadding
     } = _ref7;
-    return `${iconContainerSize + iconPadding * 2}px`;
+    return `${$iconContainerSize + $iconPadding * 2}px`;
   },
   verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+export const BreadcrumbItem = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -101,10 +101,10 @@ const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     href
   };
   return /*#__PURE__*/_jsx(StyledItemContainer, {
-    listItemPadding: listItemPadding,
-    lineHeight: lineHeight,
-    fontSize: fontSize,
-    iconContainerSize: iconContainerSize,
+    $listItemPadding: listItemPadding,
+    $lineHeight: lineHeight,
+    $fontSize: fontSize,
+    $iconContainerSize: iconContainerSize,
     children: current ? /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color: currentColor,
@@ -129,10 +129,10 @@ const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
         onPress: onPress,
         children: children
       }), /*#__PURE__*/_jsx(IconContainer, {
-        iconPadding: iconPadding,
-        fontName: fontName,
-        fontWeight: fontWeight,
-        iconContainerSize: iconContainerSize,
+        $iconPadding: iconPadding,
+        $fontName: fontName,
+        $fontWeight: fontWeight,
+        $iconContainerSize: iconContainerSize,
         children: /*#__PURE__*/_jsx(ChevronRightIcon, {
           size: iconSize,
           color: iconColor
@@ -141,8 +141,8 @@ const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     })
   });
 });
-Item.displayName = 'Item';
-Item.propTypes = {
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Breadcrumb text
@@ -169,5 +169,4 @@ Item.propTypes = {
    * Function to be called when the Item is clicked.
    */
   onPress: PropTypes.func
-};
-export default Item;
+};

package/lib/esm/Breadcrumbs/Breadcrumbs.js

@@ -5,7 +5,7 @@ import { isEqual } from 'lodash';
 import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
-import Item from './Item/Item';
+import { BreadcrumbItem } from './BreadcrumbItem';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const StyledList = /*#__PURE__*/styled.ol.withConfig({
@@ -15,6 +15,7 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
+  alignContent: 'stretch',
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
@@ -95,7 +96,7 @@ const MAX_ITEMS_ON_XS_VIEWPORT = 4;
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     baseUrl,
     children,
@@ -187,7 +188,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledList, {
-      iconContainerSize: themeTokens.iconContainerSize,
+      $iconContainerSize: themeTokens.iconContainerSize,
       children: items.map(_ref4 => {
         let {
           href,
@@ -198,7 +199,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
           onPress,
           ...itemRest
         } = _ref4;
-        return /*#__PURE__*/_createElement(Item, {
+        return /*#__PURE__*/_createElement(BreadcrumbItem, {
           ...itemRest,
           current: current,
           href: href,
@@ -250,6 +251,4 @@ Breadcrumbs.propTypes = {
     inverse: PropTypes.bool,
     light: PropTypes.bool
   })
-};
-Breadcrumbs.Item = Item;
-export default Breadcrumbs;
+};

package/lib/esm/Callout/Callout.js

@@ -35,25 +35,25 @@ const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "components-web__sc-1a7ptx-0"
 })(_ref => {
   let {
-    rounded,
-    verticalAlign,
-    textAlignToFlex,
-    background,
-    gap,
-    borderRadius,
-    padding
+    $rounded,
+    $verticalAlign,
+    $textAlignToFlex,
+    $background,
+    $gap,
+    $borderRadius,
+    $padding
   } = _ref;
   return {
-    background,
+    background: $background,
     display: 'flex',
-    gap,
-    borderRadius,
-    padding,
-    justifyContent: getAlignment(rounded, textAlignToFlex),
-    alignItems: verticalAlignToFlex(verticalAlign)
+    gap: $gap,
+    borderRadius: $borderRadius,
+    padding: $padding,
+    justifyContent: getAlignment($rounded, $textAlignToFlex),
+    alignItems: verticalAlignToFlex($verticalAlign)
   };
 });
-const Callout = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Callout = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     icon,
     children,
@@ -78,15 +78,15 @@ const Callout = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     size = 'medium'
   } = variant;
   return /*#__PURE__*/_jsxs(CalloutContainer, {
-    size: size,
-    rounded: rounded,
+    $size: size,
+    $rounded: rounded,
     "data-testid": "callout-container",
-    verticalAlign: verticalAlign,
-    textAlignToFlex: textAlignToFlex,
-    background: background,
-    gap: gap,
-    borderRadius: borderRadius,
-    padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    $verticalAlign: verticalAlign,
+    $textAlignToFlex: textAlignToFlex,
+    $background: background,
+    $gap: gap,
+    $borderRadius: borderRadius,
+    $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     ref: ref,
     ...selectProps(rest),
     children: [icon && /*#__PURE__*/_jsx(Icon, {
@@ -130,5 +130,4 @@ Callout.propTypes = {
    * To change the vertical alignment of the Callout's icon
    */
   verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom'])
-};
-export default Callout;
+};