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

package/lib/cjs/index.js

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
+  OrderedListItem: true,
   OrderedList: true,
   PreviewCard: true,
+  PreviewCardBase: true,
+  PreviewCardAuthorDate: true,
   ResponsiveImage: true,
   Ribbon: true,
   Countdown: true,
@@ -17,6 +20,7 @@ var _exportNames = {
   Callout: true,
   PriceLockup: true,
   Footnote: true,
+  FootnoteLink: true,
   QuantitySelector: true,
   IconButton: true,
   Image: true,
@@ -24,65 +28,81 @@ var _exportNames = {
   transformGradient: true,
   ssrStyles: true,
   Breadcrumbs: true,
+  BreadcrumbItem: true,
   BlockQuote: true,
   OptimizeImage: true,
   Testimonial: true,
   Toast: true,
   Table: true,
+  TableRow: true,
+  TableCell: true,
+  TableSubHeading: true,
+  TableHeader: true,
+  TableBody: true,
   WebVideo: true,
   WaffleGrid: true,
   Spinner: true,
   VideoPicker: true,
   Video: true,
   StoryCard: true,
+  StoryCardBase: true,
   Disclaimer: true,
   Card: true,
   List: true,
+  ListItem: true,
   TermsAndConditions: true,
   NavigationBar: true,
+  NavigationItem: true,
   Progress: true,
+  ProgressBar: true,
   SkeletonProvider: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
   get: function () {
-    return _Badge.default;
+    return _Badge.Badge;
   }
 });
 Object.defineProperty(exports, "BlockQuote", {
   enumerable: true,
   get: function () {
-    return _BlockQuote.default;
+    return _BlockQuote.BlockQuote;
+  }
+});
+Object.defineProperty(exports, "BreadcrumbItem", {
+  enumerable: true,
+  get: function () {
+    return _BreadcrumbItem.BreadcrumbItem;
   }
 });
 Object.defineProperty(exports, "Breadcrumbs", {
   enumerable: true,
   get: function () {
-    return _Breadcrumbs.default;
+    return _Breadcrumbs.Breadcrumbs;
   }
 });
 Object.defineProperty(exports, "Callout", {
   enumerable: true,
   get: function () {
-    return _Callout.default;
+    return _Callout.Callout;
   }
 });
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
-    return _Card.default;
+    return _Card.Card;
   }
 });
 Object.defineProperty(exports, "Countdown", {
   enumerable: true,
   get: function () {
-    return _Countdown.default;
+    return _Countdown.Countdown;
   }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
-    return _DatePicker.default;
+    return _DatePicker.DatePicker;
   }
 });
 Object.defineProperty(exports, "DefaultImage", {
@@ -94,163 +114,241 @@ Object.defineProperty(exports, "DefaultImage", {
 Object.defineProperty(exports, "Disclaimer", {
   enumerable: true,
   get: function () {
-    return _Disclaimer.default;
+    return _Disclaimer.Disclaimer;
   }
 });
 Object.defineProperty(exports, "Footnote", {
   enumerable: true,
   get: function () {
-    return _Footnote.default;
+    return _Footnote.Footnote;
+  }
+});
+Object.defineProperty(exports, "FootnoteLink", {
+  enumerable: true,
+  get: function () {
+    return _FootnoteLink.FootnoteLink;
   }
 });
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
-    return _IconButton.default;
+    return _IconButton.IconButton;
   }
 });
 Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function () {
-    return _Image.default;
+    return _Image.Image;
   }
 });
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
-    return _List.default;
+    return _List.List;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.ListItem;
   }
 });
 Object.defineProperty(exports, "NavigationBar", {
   enumerable: true,
   get: function () {
-    return _NavigationBar.default;
+    return _NavigationBar.NavigationBar;
+  }
+});
+Object.defineProperty(exports, "NavigationItem", {
+  enumerable: true,
+  get: function () {
+    return _NavigationItem.NavigationItem;
   }
 });
 Object.defineProperty(exports, "OptimizeImage", {
   enumerable: true,
   get: function () {
-    return _OptimizeImage.default;
+    return _OptimizeImage.OptimizeImage;
   }
 });
 Object.defineProperty(exports, "OrderedList", {
   enumerable: true,
   get: function () {
-    return _OrderedList.default;
+    return _OrderedList.OrderedList;
+  }
+});
+Object.defineProperty(exports, "OrderedListItem", {
+  enumerable: true,
+  get: function () {
+    return _OrderedListItem.OrderedListItem;
   }
 });
 Object.defineProperty(exports, "Paragraph", {
   enumerable: true,
   get: function () {
-    return _Paragraph.default;
+    return _Paragraph.Paragraph;
   }
 });
 Object.defineProperty(exports, "PreviewCard", {
   enumerable: true,
   get: function () {
-    return _PreviewCard.default;
+    return _PreviewCard.PreviewCard;
+  }
+});
+Object.defineProperty(exports, "PreviewCardAuthorDate", {
+  enumerable: true,
+  get: function () {
+    return _PreviewCardAuthorDate.PreviewCardAuthorDate;
+  }
+});
+Object.defineProperty(exports, "PreviewCardBase", {
+  enumerable: true,
+  get: function () {
+    return _PreviewCard.PreviewCardBase;
   }
 });
 Object.defineProperty(exports, "PriceLockup", {
   enumerable: true,
   get: function () {
-    return _PriceLockup.default;
+    return _PriceLockup.PriceLockup;
   }
 });
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
-    return _Progress.default;
+    return _componentsBase.Progress;
+  }
+});
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function () {
+    return _ProgressBar.ProgressBar;
   }
 });
 Object.defineProperty(exports, "QuantitySelector", {
   enumerable: true,
   get: function () {
-    return _QuantitySelector.default;
+    return _QuantitySelector.QuantitySelector;
   }
 });
 Object.defineProperty(exports, "ResponsiveImage", {
   enumerable: true,
   get: function () {
-    return _ResponsiveImage.default;
+    return _ResponsiveImage.ResponsiveImage;
   }
 });
 Object.defineProperty(exports, "Ribbon", {
   enumerable: true,
   get: function () {
-    return _Ribbon.default;
+    return _Ribbon.Ribbon;
   }
 });
 Object.defineProperty(exports, "SkeletonProvider", {
   enumerable: true,
   get: function () {
-    return _SkeletonProvider.default;
+    return _SkeletonProvider.SkeletonProvider;
   }
 });
 Object.defineProperty(exports, "Span", {
   enumerable: true,
   get: function () {
-    return _Span.default;
+    return _Span.Span;
   }
 });
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function () {
-    return _Spinner.default;
+    return _Spinner.Spinner;
   }
 });
 Object.defineProperty(exports, "StoryCard", {
   enumerable: true,
   get: function () {
-    return _StoryCard.default;
+    return _StoryCard.StoryCard;
+  }
+});
+Object.defineProperty(exports, "StoryCardBase", {
+  enumerable: true,
+  get: function () {
+    return _StoryCard.StoryCardBase;
   }
 });
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function () {
-    return _Table.default;
+    return _Table.Table;
+  }
+});
+Object.defineProperty(exports, "TableBody", {
+  enumerable: true,
+  get: function () {
+    return _TableBody.TableBody;
+  }
+});
+Object.defineProperty(exports, "TableCell", {
+  enumerable: true,
+  get: function () {
+    return _TableCell.TableCell;
+  }
+});
+Object.defineProperty(exports, "TableHeader", {
+  enumerable: true,
+  get: function () {
+    return _TableHeader.TableHeader;
+  }
+});
+Object.defineProperty(exports, "TableRow", {
+  enumerable: true,
+  get: function () {
+    return _TableRow.TableRow;
+  }
+});
+Object.defineProperty(exports, "TableSubHeading", {
+  enumerable: true,
+  get: function () {
+    return _TableSubHeading.TableSubHeading;
   }
 });
 Object.defineProperty(exports, "TermsAndConditions", {
   enumerable: true,
   get: function () {
-    return _TermsAndConditions.default;
+    return _TermsAndConditions.TermsAndConditions;
   }
 });
 Object.defineProperty(exports, "Testimonial", {
   enumerable: true,
   get: function () {
-    return _Testimonial.default;
+    return _Testimonial.Testimonial;
   }
 });
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
   get: function () {
-    return _Toast.default;
+    return _Toast.Toast;
   }
 });
 Object.defineProperty(exports, "Video", {
   enumerable: true,
   get: function () {
-    return _Video.default;
+    return _Video.Video;
   }
 });
 Object.defineProperty(exports, "VideoPicker", {
   enumerable: true,
   get: function () {
-    return _VideoPicker.default;
+    return _VideoPicker.VideoPicker;
   }
 });
 Object.defineProperty(exports, "WaffleGrid", {
   enumerable: true,
   get: function () {
-    return _WaffleGrid.default;
+    return _WaffleGrid.WaffleGrid;
   }
 });
 Object.defineProperty(exports, "WebVideo", {
   enumerable: true,
   get: function () {
-    return _WebVideo.default;
+    return _WebVideo.WebVideo;
   }
 });
 Object.defineProperty(exports, "ssrStyles", {
@@ -265,74 +363,53 @@ Object.defineProperty(exports, "transformGradient", {
     return _utils.transformGradient;
   }
 });
-var _Badge = _interopRequireDefault(require("./Badge"));
-var _OrderedList = _interopRequireWildcard(require("./OrderedList"));
-Object.keys(_OrderedList).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _OrderedList[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _OrderedList[key];
-    }
-  });
-});
-var _PreviewCard = _interopRequireDefault(require("./PreviewCard"));
-var _ResponsiveImage = _interopRequireDefault(require("./ResponsiveImage"));
-var _Ribbon = _interopRequireDefault(require("./Ribbon"));
-var _Countdown = _interopRequireDefault(require("./Countdown"));
-var _DatePicker = _interopRequireDefault(require("./DatePicker"));
-var _Paragraph = _interopRequireDefault(require("./Paragraph"));
-var _Span = _interopRequireDefault(require("./Span"));
-var _Callout = _interopRequireDefault(require("./Callout"));
-var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
-var _Footnote = _interopRequireDefault(require("./Footnote"));
-var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
-var _IconButton = _interopRequireDefault(require("./IconButton"));
-var _Image = _interopRequireWildcard(require("./Image"));
+var _Badge = require("./Badge/Badge");
+var _OrderedListItem = require("./OrderedList/OrderedListItem");
+var _OrderedList = require("./OrderedList/OrderedList");
+var _PreviewCard = require("./PreviewCard/PreviewCard");
+var _PreviewCardAuthorDate = require("./PreviewCard/PreviewCardAuthorDate");
+var _ResponsiveImage = require("./ResponsiveImage/ResponsiveImage");
+var _Ribbon = require("./Ribbon/Ribbon");
+var _Countdown = require("./Countdown/Countdown");
+var _DatePicker = require("./DatePicker/DatePicker");
+var _Paragraph = require("./Paragraph/Paragraph");
+var _Span = require("./Span/Span");
+var _Callout = require("./Callout/Callout");
+var _PriceLockup = require("./PriceLockup/PriceLockup");
+var _Footnote = require("./Footnote/Footnote");
+var _FootnoteLink = require("./Footnote/FootnoteLink");
+var _QuantitySelector = require("./QuantitySelector/QuantitySelector");
+var _IconButton = require("./IconButton/IconButton");
+var _Image = require("./Image/Image");
 var _utils = require("./utils");
-var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
-var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
-var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
-var _Testimonial = _interopRequireDefault(require("./Testimonial"));
-var _Toast = _interopRequireDefault(require("./Toast"));
-var _Table = _interopRequireWildcard(require("./Table"));
-Object.keys(_Table).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Table[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Table[key];
-    }
-  });
-});
-var _WebVideo = _interopRequireDefault(require("./WebVideo"));
-var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-var _VideoPicker = _interopRequireDefault(require("./VideoPicker"));
-var _Video = _interopRequireDefault(require("./Video"));
-var _StoryCard = _interopRequireDefault(require("./StoryCard"));
-var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
-var _Card = _interopRequireDefault(require("./Card"));
-var _List = _interopRequireWildcard(require("./List"));
-Object.keys(_List).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _List[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _List[key];
-    }
-  });
-});
-var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
-var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
-var _Progress = _interopRequireDefault(require("./Progress"));
-var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+var _Breadcrumbs = require("./Breadcrumbs/Breadcrumbs");
+var _BreadcrumbItem = require("./Breadcrumbs/BreadcrumbItem");
+var _BlockQuote = require("./BlockQuote/BlockQuote");
+var _OptimizeImage = require("./OptimizeImage/OptimizeImage");
+var _Testimonial = require("./Testimonial/Testimonial");
+var _Toast = require("./Toast/Toast");
+var _Table = require("./Table/Table");
+var _TableRow = require("./Table/TableRow");
+var _TableCell = require("./Table/TableCell");
+var _TableSubHeading = require("./Table/TableSubHeading");
+var _TableHeader = require("./Table/TableHeader");
+var _TableBody = require("./Table/TableBody");
+var _WebVideo = require("./WebVideo/WebVideo");
+var _WaffleGrid = require("./WaffleGrid/WaffleGrid");
+var _Spinner = require("./Spinner/Spinner");
+var _VideoPicker = require("./VideoPicker/VideoPicker");
+var _Video = require("./Video/Video");
+var _StoryCard = require("./StoryCard/StoryCard");
+var _Disclaimer = require("./Disclaimer/Disclaimer");
+var _Card = require("./Card/Card");
+var _List = require("./List/List");
+var _ListItem = require("./List/ListItem");
+var _TermsAndConditions = require("./TermsAndConditions/TermsAndConditions");
+var _NavigationBar = require("./NavigationBar/NavigationBar");
+var _NavigationItem = require("./NavigationBar/NavigationItem");
+var _componentsBase = require("@telus-uds/components-base");
+var _ProgressBar = require("./Progress/ProgressBar");
+var _SkeletonProvider = require("./SkeletonProvider/SkeletonProvider");
 var _baseExports = require("./baseExports");
 Object.keys(_baseExports).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -344,7 +421,4 @@ Object.keys(_baseExports).forEach(function (key) {
       return _baseExports[key];
     }
   });
-});
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+});

package/lib/cjs/server.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Image", {
   enumerable: true,
   get: function () {
-    return _server.default;
+    return _server.ServerThemedImage;
   }
 });
-var _server = _interopRequireDefault(require("./Image/server"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _server = require("./Image/server");

package/lib/cjs/shared/ConditionalWrapper/ConditionalWrapper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ConditionalWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,10 +20,10 @@ const ConditionalWrapper = _ref => {
     children: children
   }) : children;
 };
+exports.ConditionalWrapper = ConditionalWrapper;
 ConditionalWrapper.propTypes = {
   children: _propTypes.default.node,
   condition: _propTypes.default.bool,
   WrapperComponent: _propTypes.default.elementType,
   wrapperProps: _propTypes.default.object
-};
-var _default = exports.default = ConditionalWrapper;
+};

package/lib/cjs/shared/FullBleedContent/FullBleedContent.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.FullBleedContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _ResponsiveImage = _interopRequireDefault(require("../../ResponsiveImage"));
+var _ResponsiveImage = require("../../ResponsiveImage/ResponsiveImage");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // Interactive overlay opacity constants
@@ -47,23 +47,23 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
   componentId: "components-web__sc-1130ea5-0"
 })(_ref2 => {
   let {
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    opacity,
-    transform,
-    hasCardState
+    $borderBottomLeftRadius,
+    $borderBottomRightRadius,
+    $borderTopLeftRadius,
+    $borderTopRightRadius,
+    $opacity,
+    $transform,
+    $hasCardState
   } = _ref2;
   return {
-    position: hasCardState ? 'relative' : 'static',
+    position: $hasCardState ? 'relative' : 'static',
     overflow: 'hidden',
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    opacity,
-    transform,
+    borderBottomLeftRadius: $borderBottomLeftRadius,
+    borderBottomRightRadius: $borderBottomRightRadius,
+    borderTopLeftRadius: $borderTopLeftRadius,
+    borderTopRightRadius: $borderTopRightRadius,
+    opacity: $opacity,
+    transform: $transform,
     transition: 'opacity 0.2s ease, transform 0.2s ease'
   };
 });
@@ -109,16 +109,23 @@ const FullBleedContent = _ref4 => {
       overlayOpacity = OVERLAY_OPACITY_HOVER;
     }
   }
+  const borderRadiusStyles = borderRadius ? {
+    $borderBottomLeftRadius: borderRadius.borderBottomLeftRadius,
+    $borderBottomRightRadius: borderRadius.borderBottomRightRadius,
+    $borderTopLeftRadius: borderRadius.borderTopLeftRadius,
+    $borderTopRightRadius: borderRadius.borderTopRightRadius
+  } : {};
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FullBleedContentContainer, {
-    ...borderRadius,
-    hasCardState: !!cardState,
-    children: [content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+    ...borderRadiusStyles,
+    $hasCardState: !!cardState,
+    children: [content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.ResponsiveImage, {
       ...selectFullBleedContentProps(rest)
     }), cardState && /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
       overlayOpacity: overlayOpacity
     })]
   });
 };
+exports.FullBleedContent = FullBleedContent;
 FullBleedContent.propTypes = {
   /**
    * Content border radius matching the edge values on the parent card.
@@ -148,7 +155,7 @@ FullBleedContent.propTypes = {
   /**
    * Also accept props for `ResponsiveImage`...
    */
-  ..._ResponsiveImage.default.propTypes,
+  ..._ResponsiveImage.ResponsiveImage.propTypes,
   /**
    * ...but make the required ones optional.
    */
@@ -156,5 +163,4 @@ FullBleedContent.propTypes = {
   xsSrc: _propTypes.default.string,
   smSrc: _propTypes.default.string,
   fallbackSrc: _propTypes.default.string
-};
-var _default = exports.default = FullBleedContent;
+};

package/lib/cjs/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getFullBleedBorderRadius = void 0;
 /**
  * Gets the border radius values for an item of content that goes right up to
  * the edges of its container, to the top, bottom, left or right of other content.
@@ -58,4 +58,4 @@ const getFullBleedBorderRadius = function (borderRadius, position) {
   }
   return innerBorderRadius;
 };
-var _default = exports.default = getFullBleedBorderRadius;
+exports.getFullBleedBorderRadius = getFullBleedBorderRadius;