@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/WaffleGrid/WaffleGrid.js

@@ -1,22 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
-var _ItemBase = _interopRequireDefault(require("../OrderedList/ItemBase"));
-var _Image = _interopRequireDefault(require("../Image"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+import React, { createElement as _createElement } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Link, responsiveProps, selectSystemProps, useResponsiveProp, useThemeTokens, withLinkRouter, useViewport, Typography, getTokensPropType } from '@telus-uds/components-base';
+import OrderedListBase from '../OrderedList/OrderedListBase';
+import ItemBase from '../OrderedList/ItemBase';
+import Image from '../Image';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const row = (rowSize, rowBorderWidth) => ({
   flexBasis: `calc(100% / ${rowSize})`,
   [`:not(:nth-of-type(${rowSize}n + 1))`]: {
@@ -26,7 +17,7 @@ const row = (rowSize, rowBorderWidth) => ({
     borderTopWidth: `${rowBorderWidth}px`
   }
 });
-const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+const Container = /*#__PURE__*/styled(OrderedListBase).withConfig({
   displayName: "WaffleGrid__Container",
   componentId: "components-web__sc-ec8g0a-0"
 })({
@@ -35,7 +26,7 @@ const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.d
   flexWrap: 'wrap',
   justifyContent: 'flex-start'
 });
-const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+const Item = /*#__PURE__*/styled(ItemBase).withConfig({
   displayName: "WaffleGrid__Item",
   componentId: "components-web__sc-ec8g0a-1"
 })(_ref => {
@@ -63,7 +54,7 @@ const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).with
     ...row(rowSize, rowBorderWidth)
   };
 });
-const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
+const Center = /*#__PURE__*/styled('div').withConfig({
   displayName: "WaffleGrid__Center",
   componentId: "components-web__sc-ec8g0a-2"
 })({
@@ -76,7 +67,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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     items,
     rowSize = null,
@@ -86,36 +77,36 @@ const WaffleGrid = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     linkRouterProps,
     ...rest
   } = _ref2;
-  const viewport = (0, _componentsBase.useViewport)();
-  const themeTokens = (0, _componentsBase.useThemeTokens)('WaffleGrid', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, {
     viewport
   });
-  const currentRowSize = (0, _componentsBase.useResponsiveProp)(rowSize);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  const currentRowSize = useResponsiveProp(rowSize);
+  return /*#__PURE__*/_jsx(Container, {
     ref: ref,
     ...selectProps(rest),
-    children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, {
+    children: items.map(child => /*#__PURE__*/_createElement(Item, {
       ...themeTokens,
       key: child.href,
       rowSize: rowSize ? currentRowSize : themeTokens.rowSize
-    }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+    }, /*#__PURE__*/_jsx(Link, {
       href: child.href,
       LinkRouter: child.LinkRouter || LinkRouter,
       linkRouterProps: {
         ...linkRouterProps,
         ...child.linkRouterProps
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Center, {
+      children: /*#__PURE__*/_jsxs(Center, {
         children: [typeof child.image === 'string' ?
         /*#__PURE__*/
         // Assuming that string passed is the image URL
-        (0, _jsxRuntime.jsx)(_Image.default, {
+        _jsx(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, {
+        child.image, /*#__PURE__*/_jsx(Typography, {
           variant: {
             weight: 'semibold'
           },
@@ -131,35 +122,34 @@ WaffleGrid.propTypes = {
   /**
    * The image and the link to display. `items` should be an array of objects with the following keys:
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({
     /**
      * The src attribute for the HTML img element or custom JSX content to render instead
      */
-    image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     /**
      * The alt attribute for the HTML img element (note that this is ignored if a custom
      * JSX content is used instead of an image URL)
      */
-    imageAltText: _propTypes.default.string,
+    imageAltText: PropTypes.string,
     /**
      * The text displayed under the image
      */
-    text: _propTypes.default.string,
+    text: PropTypes.string,
     /**
      * Target URL
      */
-    href: _propTypes.default.string,
-    ..._componentsBase.withLinkRouter.propTypes
+    href: PropTypes.string,
+    ...withLinkRouter.propTypes
   })).isRequired,
   /**
    * Sets the tokens for WaffleGrid element.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('WaffleGrid'),
+  tokens: getTokensPropType('WaffleGrid'),
   /**
    * Row size, optionally depending on the viewport
    */
-  rowSize: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
-  ..._componentsBase.withLinkRouter.propTypes
+  rowSize: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+  ...withLinkRouter.propTypes
 };
-var _default = WaffleGrid;
-exports.default = _default;
+export default WaffleGrid;

package/lib/WaffleGrid/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _WaffleGrid.default;
-exports.default = _default;
+import WaffleGrid from './WaffleGrid';
+export default WaffleGrid;

package/lib/WebVideo/WebVideo.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _utils = require("../utils");
-var _utils2 = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import { selectSystemProps } from '@telus-uds/components-base';
+import PropTypes from 'prop-types';
+import React from 'react';
+import YouTube from 'react-youtube';
+import styled from 'styled-components';
+import VideoSplash from '../shared/VideoSplash/VideoSplash';
+import { htmlAttrs } from '../utils';
+import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledPlayerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "WebVideo__StyledPlayerContainer",
   componentId: "components-web__sc-327a6k-0"
 })({
@@ -23,7 +16,7 @@ const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withCon
   minWidth: 288,
   outline: 'none'
 });
-const StyledYoutubePlayer = /*#__PURE__*/(0, _styledComponents.default)(_reactYoutube.default).withConfig({
+const StyledYoutubePlayer = /*#__PURE__*/styled(YouTube).withConfig({
   displayName: "WebVideo__StyledYoutubePlayer",
   componentId: "components-web__sc-327a6k-1"
 })({
@@ -44,14 +37,14 @@ const aspectRatios = {
     paddingTop: '100%'
   }
 };
-const AspectLimiter = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
   displayName: "WebVideo__AspectLimiter",
   componentId: "components-web__sc-327a6k-2"
 })(props => ({
   ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));
-const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const WebVideo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     videoId,
     aspectRatio = '16:9',
@@ -67,17 +60,17 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onStart = () => {},
     ...rest
   } = _ref;
-  const [started, setStarted] = _react.default.useState(false);
-  const videoStateData = _react.default.useRef({
+  const [started, setStarted] = React.useState(false);
+  const videoStateData = React.useRef({
     requestAnimationIds: [],
-    state: _utils2.YoutubePlayerState.UNSTARTED
+    state: YoutubePlayerState.UNSTARTED
   });
-  const playerRef = _react.default.useRef(null);
+  const playerRef = React.useRef(null);
   const onPlayCallback = event => {
-    onPlay(event, videoStateData.current.state === _utils2.YoutubePlayerState.PAUSED);
-    videoStateData.current.state = _utils2.YoutubePlayerState.PLAYING;
+    onPlay(event, videoStateData.current.state === YoutubePlayerState.PAUSED);
+    videoStateData.current.state = YoutubePlayerState.PLAYING;
     if (onProgress) {
-      videoStateData.current.requestAnimationIds = (0, _utils2.triggerInProgressVideoIntervals)(onProgress, playerRef, event);
+      videoStateData.current.requestAnimationIds = triggerInProgressVideoIntervals(onProgress, playerRef, event);
     }
   };
   const initializeYoutubePlayer = event => {
@@ -89,12 +82,11 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     event.target.setVolume(defaultVolume);
     event.target.playVideo(); // This plays the video after passing the splash screen on mobile.
   };
-
   const onEndVideoCallback = event => {
     onEnd(event);
     videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
     videoStateData.current.requestAnimationIds = [];
-    videoStateData.current.state = _utils2.YoutubePlayerState.ENDED;
+    videoStateData.current.state = YoutubePlayerState.ENDED;
     if (onProgress) {
       onProgress(event, 100);
     }
@@ -102,16 +94,16 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const onPauseVideoCallback = event => {
     videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
     onPause(event);
-    videoStateData.current.state = _utils2.YoutubePlayerState.PAUSED;
+    videoStateData.current.state = YoutubePlayerState.PAUSED;
     videoStateData.current.requestAnimationIds = [];
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPlayerContainer, {
+  return /*#__PURE__*/_jsx(StyledPlayerContainer, {
     ref: ref,
     "data-testid": "web-video-container",
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectLimiter, {
+    children: /*#__PURE__*/_jsx(AspectLimiter, {
       aspectRatio: aspectRatio,
-      children: started ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledYoutubePlayer, {
+      children: started ? /*#__PURE__*/_jsx(StyledYoutubePlayer, {
         videoId: videoId,
         opts: {
           width: '100%',
@@ -127,7 +119,7 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         onPlay: onPlayCallback,
         onPause: onPauseVideoCallback,
         onEnd: onEndVideoCallback
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+      }) : /*#__PURE__*/_jsx(VideoSplash, {
         poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
         videoLength: videoLength,
         copy: copy,
@@ -139,62 +131,60 @@ const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 WebVideo.displayName = 'WebVideo';
-const VideoProps = {
+export const VideoProps = {
   ...selectedSystemPropTypes,
   /**
    * The video's ID, typically available via the video's URL.
    */
-  videoId: _propTypes.default.string.isRequired,
+  videoId: PropTypes.string.isRequired,
   /**
    * The aspect ratio of the player.
    */
-  aspectRatio: _propTypes.default.oneOf(['16:9', '4:3', '1:1']),
+  aspectRatio: PropTypes.oneOf(['16:9', '4:3', '1:1']),
   /**
    * A path of the image that will be displayed on the video's splash screen. If this is undefined, it will pull an image from the defined web video if available.
    */
-  posterSrc: _propTypes.default.string,
+  posterSrc: PropTypes.string,
   /**
    * The video's default volume, defined from 1 to 100. Please use the `beginMuted` prop to have the video start silenced.
    */
-  defaultVolume: _propTypes.default.number,
+  defaultVolume: PropTypes.number,
   /**
    * Defines if the video should start muted.
    */
-  beginMuted: _propTypes.default.bool,
+  beginMuted: PropTypes.bool,
   /**
    * The video's length, which will be displayed on the splash screen. This is defined in seconds.
    */
-  videoLength: _propTypes.default.number.isRequired,
+  videoLength: PropTypes.number.isRequired,
   /**
    * The splash screen UI's language as an ISO language code. It currently supports English and French.
    */
-  copy: _propTypes.default.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */
-  onStart: _propTypes.default.func,
+  onStart: PropTypes.func,
   /**
    * A function to be run when the video is played.
    */
-  onPlay: _propTypes.default.func,
+  onPlay: PropTypes.func,
   /**
    * A function to be run when the video is paused.
    */
-  onPause: _propTypes.default.func,
+  onPause: PropTypes.func,
   /**
    * A function to be run when the video ends.
    */
-  onEnd: _propTypes.default.func,
+  onEnd: PropTypes.func,
   /**
    * A function to be run when the video resumes.
    */
-  onResume: _propTypes.default.func,
+  onResume: PropTypes.func,
   /**
    * A function to be run when the video progresses. This function will be run at 10%, 25%, 50%, 75% and 100%.
    */
-  onProgress: _propTypes.default.func
+  onProgress: PropTypes.func
 };
-exports.VideoProps = VideoProps;
 WebVideo.propTypes = VideoProps;
-var _default = WebVideo;
-exports.default = _default;
+export default WebVideo;

package/lib/WebVideo/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _WebVideo = _interopRequireDefault(require("./WebVideo"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _WebVideo.default;
-exports.default = _default;
+import WebVideo from './WebVideo';
+export default WebVideo;

package/lib/WebVideo/utils/index.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.triggerInProgressVideoIntervals = exports.YoutubePlayerState = void 0;
 /**
  * Fires analytics events for inProgress analytics
  * @param {current progress} progress
@@ -16,7 +10,7 @@ const fireVideoProgressEvents = (progress, onProgress, event) => {
     onProgress(event, progress);
   }
 };
-const YoutubePlayerState = {
+export const YoutubePlayerState = {
   UNSTARTED: -1,
   ENDED: 0,
   PLAYING: 1,
@@ -24,7 +18,6 @@ const YoutubePlayerState = {
   BUFFERING: 3,
   CUED: 5
 };
-exports.YoutubePlayerState = YoutubePlayerState;
 const PERCENTAGE_MULTIPLIER = 100;
 /**
  * Run an interval to check the progress of the video and fire events at 10%, 25%, 50% and 75%
@@ -32,7 +25,7 @@ const PERCENTAGE_MULTIPLIER = 100;
  * @param {player reference} playerRef
  * @param {YouTube video event} event
  */
-const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
+export const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
   const duration = playerRef.current.getDuration();
   let lastProgress = null;
   const requestAnimationFrameIds = [];
@@ -54,5 +47,4 @@ const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
   // Start a new animation frame
   requestAnimationFrameIds.push(requestAnimationFrame(frame));
   return requestAnimationFrameIds;
-};
-exports.triggerInProgressVideoIntervals = triggerInProgressVideoIntervals;
+};