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

package/lib/cjs/VideoPicker/VideoPickerThumbnail.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoPickerThumbnail = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -13,7 +13,7 @@ var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _helpers = require("../shared/VideoSplash/helpers");
 var _videoPropType = require("./videoPropType");
-var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
+var _VideoSplash = require("../shared/VideoSplash/VideoSplash");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
@@ -51,41 +51,41 @@ const createReactNativeStyles = _ref => {
 const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPickerThumbnail__ImageContainer",
   componentId: "components-web__sc-1glxurq-0"
-})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.$outerBorderGap}px`, props => `${props.$outerBorderWidth}px solid ${props.$outerBorderColor}`, _ref2 => {
   let {
-    outerBorderRadius
+    $outerBorderRadius
   } = _ref2;
-  return outerBorderRadius;
+  return $outerBorderRadius;
 });
 const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPickerThumbnail__VideoThumbnail",
   componentId: "components-web__sc-1glxurq-1"
-})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.$layout === 'vertical' ? '100%' : '144px', _ref3 => {
   let {
-    borderWidth
+    $borderWidth
   } = _ref3;
-  return borderWidth;
+  return $borderWidth;
 }, _ref4 => {
   let {
-    borderColor
+    $borderColor
   } = _ref4;
-  return borderColor;
+  return $borderColor;
 }, _ref5 => {
   let {
-    borderRadius
+    $borderRadius
   } = _ref5;
-  return borderRadius;
+  return $borderRadius;
 }, _ref6 => {
   let {
-    borderRadius
+    $borderRadius
   } = _ref6;
-  return borderRadius;
+  return $borderRadius;
 });
 const ThumbnailTitleContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
   componentId: "components-web__sc-1glxurq-2"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
-const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
+const VideoPickerThumbnail = exports.VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -105,10 +105,12 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
   const isPlaying = selectedVideoId === video.videoId;
   const renderThumbnailImage = themeTokens => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, {
-      ...themeTokens,
-      isPlaying: isPlaying,
-      layout: layout,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+      $borderWidth: themeTokens.borderWidth,
+      $borderColor: themeTokens.borderColor,
+      $borderRadius: themeTokens.borderRadius,
+      $isPlaying: isPlaying,
+      $layout: layout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.VideoSplash, {
         simpleMode: true,
         poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
         videoLength: video.videoLength,
@@ -127,7 +129,6 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
         flexShrink: 1
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailTitleContainer, {
-        viewport: viewport,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
           variant: {
             bold: true
@@ -201,7 +202,10 @@ const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref)
         space: layout === 'vertical' ? 2 : 3,
         direction: layout === 'vertical' ? 'column' : 'row',
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
-          ...themeTokens,
+          $outerBorderGap: themeTokens.outerBorderGap,
+          $outerBorderWidth: themeTokens.outerBorderWidth,
+          $outerBorderColor: themeTokens.outerBorderColor,
+          $outerBorderRadius: themeTokens.outerBorderRadius,
           children: renderThumbnailImage(themeTokens)
         }), renderThumbnailInfo(themeTokens)]
       });
@@ -219,5 +223,4 @@ VideoPickerThumbnail.propTypes = {
   itemPositions: itemPositionsPropType,
   index: _propTypes.default.number,
   width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
-};
-var _default = exports.default = VideoPickerThumbnail;
+};

package/lib/cjs/VideoPicker/VideoSlider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.VideoSlider = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _componentsBase = require("@telus-uds/components-base");
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const {
   useItemPositions
 } = _componentsBase.horizontalScrollUtils;
-const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const VideoSlider = exports.VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
@@ -84,5 +84,4 @@ const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 VideoSlider.displayName = 'VideoSlider';
 VideoSlider.propTypes = {
   children: _propTypes.default.node
-};
-var _default = exports.default = VideoSlider;
+};

package/lib/cjs/WaffleGrid/WaffleGrid.js

@@ -3,46 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+exports.WaffleGrid = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
-var _ItemBase = _interopRequireDefault(require("../OrderedList/ItemBase"));
-var _Image = _interopRequireDefault(require("../Image"));
+var _OrderedListBase = require("../OrderedList/OrderedListBase");
+var _OrderedListItemBase = require("../OrderedList/OrderedListItemBase");
+var _Image = require("../Image/Image");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
-  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+  [`&:not(:nth-of-type(${rowSize}n + 1))`]: {
     borderLeftWidth: `${rowBorderWidth}px`
   },
-  [`:nth-of-type(n+${rowSize + 1})`]: {
+  [`&:nth-of-type(n+${rowSize + 1})`]: {
     borderTopWidth: `${rowBorderWidth}px`
   }
 });
-const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.OrderedListBase).withConfig({
   displayName: "WaffleGrid__Container",
   componentId: "components-web__sc-ec8g0a-0"
 })({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
+  alignContent: 'stretch',
   justifyContent: 'flex-start'
 });
-const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+const Item = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListItemBase.OrderedListItemBase).withConfig({
   displayName: "WaffleGrid__Item",
   componentId: "components-web__sc-ec8g0a-1"
 })(_ref => {
   let {
-    rowSize,
-    itemPadding,
-    itemBorderColor,
-    rowBorderWidth
+    $rowSize,
+    $itemPadding,
+    $itemBorderColor,
+    $rowBorderWidth
   } = _ref;
   return {
     display: 'flex',
@@ -51,15 +51,16 @@ const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).with
     justifyContent: 'center',
     flexGrow: 1,
     flexShrink: 1,
-    padding: `${itemPadding}px`,
+    padding: `${$itemPadding}px`,
     boxSizing: 'border-box',
     borderStyle: 'solid',
-    borderColor: itemBorderColor,
+    borderColor: $itemBorderColor,
     borderWidth: 0,
     '& > a': {
-      alignSelf: 'center'
+      alignSelf: 'center',
+      width: '100%'
     },
-    ...row(rowSize, rowBorderWidth)
+    ...row($rowSize, $rowBorderWidth)
   };
 });
 const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
@@ -75,7 +76,7 @@ const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-const WaffleGrid = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const WaffleGrid = exports.WaffleGrid = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     items,
     rowSize = null,
@@ -93,35 +94,37 @@ const WaffleGrid = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     ref: ref,
     ...selectProps(rest),
-    children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, {
-      ...themeTokens,
-      key: child.href,
-      rowSize: rowSize ? currentRowSize : themeTokens.rowSize
-    }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
-      href: child.href,
-      LinkRouter: child.LinkRouter || LinkRouter,
-      linkRouterProps: {
-        ...linkRouterProps,
-        ...child.linkRouterProps
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Center, {
-        children: [typeof child.image === 'string' ?
-        /*#__PURE__*/
-        // Assuming that string passed is the image URL
-        (0, _jsxRuntime.jsx)(_Image.default, {
-          src: child.image,
-          alt: child.imageAltText,
-          width: 96
-        }) :
-        // Otherwise it must be an arbitrary content, which we just display by itself
-        child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-          variant: {
-            weight: 'semibold'
-          },
-          children: child.text
-        })]
+    children: items.map(child => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
+      $rowSize: rowSize ? currentRowSize : themeTokens.rowSize,
+      $itemPadding: themeTokens.itemPadding,
+      $itemBorderColor: themeTokens.itemBorderColor,
+      $rowBorderWidth: themeTokens.rowBorderWidth,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+        href: child.href,
+        LinkRouter: child.LinkRouter || LinkRouter,
+        linkRouterProps: {
+          ...linkRouterProps,
+          ...child.linkRouterProps
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Center, {
+          children: [typeof child.image === 'string' ?
+          /*#__PURE__*/
+          // Assuming that string passed is the image URL
+          (0, _jsxRuntime.jsx)(_Image.Image, {
+            src: child.image,
+            alt: child.imageAltText,
+            width: 96
+          }) :
+          // Otherwise it must be an arbitrary content, which we just display by itself
+          child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              weight: 'semibold'
+            },
+            children: child.text
+          })]
+        })
       })
-    })))
+    }, child.href))
   });
 });
 WaffleGrid.displayName = 'WaffleGrid';
@@ -159,5 +162,4 @@ WaffleGrid.propTypes = {
    */
   rowSize: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
   ..._componentsBase.withLinkRouter.propTypes
-};
-var _default = exports.default = WaffleGrid;
+};

package/lib/cjs/WebVideo/WebVideo.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VideoProps = void 0;
+exports.WebVideo = exports.VideoProps = void 0;
 var _componentsBase = require("@telus-uds/components-base");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _reactYoutube = _interopRequireDefault(require("react-youtube"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
+var _VideoSplash = require("../shared/VideoSplash/VideoSplash");
 var _utils = require("../utils");
 var _utils2 = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -48,10 +48,10 @@ const AspectLimiter = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "WebVideo__AspectLimiter",
   componentId: "components-web__sc-327a6k-2"
 })(props => ({
-  ...aspectRatios[props.aspectRatio],
+  ...aspectRatios[props.$aspectRatio],
   position: 'relative'
 }));
-const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const WebVideo = exports.WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     videoId,
     aspectRatio = '16:9',
@@ -109,7 +109,7 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "data-testid": "web-video-container",
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectLimiter, {
-      aspectRatio: aspectRatio,
+      $aspectRatio: aspectRatio,
       children: started ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledYoutubePlayer, {
         videoId: videoId,
         opts: {
@@ -126,7 +126,7 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         onPlay: onPlayCallback,
         onPause: onPauseVideoCallback,
         onEnd: onEndVideoCallback
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.VideoSplash, {
         poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
         videoLength: videoLength,
         copy: copy,
@@ -193,5 +193,4 @@ const VideoProps = exports.VideoProps = {
    */
   onProgress: _propTypes.default.func
 };
-WebVideo.propTypes = VideoProps;
-var _default = exports.default = WebVideo;
+WebVideo.propTypes = VideoProps;

package/lib/cjs/baseExports.js

@@ -93,12 +93,6 @@ Object.defineProperty(exports, "CarouselProvider", {
     return _componentsBase.CarouselProvider;
   }
 });
-Object.defineProperty(exports, "CarouselTabs", {
-  enumerable: true,
-  get: function () {
-    return _componentsBase.CarouselTabs;
-  }
-});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -141,12 +135,24 @@ Object.defineProperty(exports, "ExpandCollapse", {
     return _componentsBase.ExpandCollapse;
   }
 });
+Object.defineProperty(exports, "ExpandCollapseAccordion", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ExpandCollapseAccordion;
+  }
+});
 Object.defineProperty(exports, "ExpandCollapseMini", {
   enumerable: true,
   get: function () {
     return _componentsBase.ExpandCollapseMini;
   }
 });
+Object.defineProperty(exports, "ExpandCollapsePanel", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ExpandCollapsePanel;
+  }
+});
 Object.defineProperty(exports, "Feedback", {
   enumerable: true,
   get: function () {
@@ -207,6 +213,12 @@ Object.defineProperty(exports, "Listbox", {
     return _componentsBase.Listbox;
   }
 });
+Object.defineProperty(exports, "ListboxOverlay", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ListboxOverlay;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -231,6 +243,18 @@ Object.defineProperty(exports, "Pagination", {
     return _componentsBase.Pagination;
   }
 });
+Object.defineProperty(exports, "PaginationPageButton", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.PaginationPageButton;
+  }
+});
+Object.defineProperty(exports, "PaginationPageButtonBase", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.PaginationPageButtonBase;
+  }
+});
 Object.defineProperty(exports, "Portal", {
   enumerable: true,
   get: function () {
@@ -249,6 +273,18 @@ Object.defineProperty(exports, "QuickLinksFeature", {
     return _componentsBase.QuickLinksFeature;
   }
 });
+Object.defineProperty(exports, "QuickLinksFeatureItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.QuickLinksFeatureItem;
+  }
+});
+Object.defineProperty(exports, "QuickLinksItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.QuickLinksItem;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -291,12 +327,48 @@ Object.defineProperty(exports, "Select", {
     return _componentsBase.Select;
   }
 });
+Object.defineProperty(exports, "SelectGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.SelectGroup;
+  }
+});
+Object.defineProperty(exports, "SelectItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.SelectItem;
+  }
+});
+Object.defineProperty(exports, "Shortcuts", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Shortcuts;
+  }
+});
+Object.defineProperty(exports, "ShortcutsItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ShortcutsItem;
+  }
+});
 Object.defineProperty(exports, "SideNav", {
   enumerable: true,
   get: function () {
     return _componentsBase.SideNav;
   }
 });
+Object.defineProperty(exports, "SideNavItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.SideNavItem;
+  }
+});
+Object.defineProperty(exports, "SideNavItemsGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.SideNavItemsGroup;
+  }
+});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function () {
@@ -345,6 +417,12 @@ Object.defineProperty(exports, "TabBar", {
     return _componentsBase.TabBar;
   }
 });
+Object.defineProperty(exports, "TabBarItem", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.TabBarItem;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {