@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/WaffleGrid/WaffleGrid.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(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 _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const row = (rowSize, rowBorderWidth) => ({
+  flexBasis: `calc(100% / ${rowSize})`,
+  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+    borderLeftWidth: `${rowBorderWidth}px`
+  },
+  [`:nth-of-type(n+${rowSize + 1})`]: {
+    borderTopWidth: `${rowBorderWidth}px`
+  }
+});
+const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "WaffleGrid__Container",
+  componentId: "components-web__sc-ec8g0a-0"
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-start'
+});
+const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+  displayName: "WaffleGrid__Item",
+  componentId: "components-web__sc-ec8g0a-1"
+})(_ref => {
+  let {
+    rowSize,
+    itemPadding,
+    itemBorderColor,
+    rowBorderWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 1,
+    flexShrink: 1,
+    padding: `${itemPadding}px`,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: itemBorderColor,
+    borderWidth: 0,
+    '& > a': {
+      alignSelf: 'center'
+    },
+    ...row(rowSize, rowBorderWidth)
+  };
+});
+const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
+  displayName: "WaffleGrid__Center",
+  componentId: "components-web__sc-ec8g0a-2"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center'
+});
+
+/**
+ * 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) => {
+  let {
+    items,
+    rowSize = null,
+    LinkRouter,
+    tokens,
+    variant,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('WaffleGrid', tokens, variant, {
+    viewport
+  });
+  const currentRowSize = (0, _componentsBase.useResponsiveProp)(rowSize);
+  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
+        })]
+      })
+    })))
+  });
+});
+WaffleGrid.displayName = 'WaffleGrid';
+WaffleGrid.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * 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({
+    /**
+     * 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]),
+    /**
+     * 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,
+    /**
+     * The text displayed under the image
+     */
+    text: _propTypes.default.string,
+    /**
+     * Target URL
+     */
+    href: _propTypes.default.string,
+    ..._componentsBase.withLinkRouter.propTypes
+  })).isRequired,
+  /**
+   * Sets the tokens for WaffleGrid element.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('WaffleGrid'),
+  /**
+   * Row size, optionally depending on the viewport
+   */
+  rowSize: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+  ..._componentsBase.withLinkRouter.propTypes
+};
+var _default = exports.default = WaffleGrid;

package/lib/cjs/WaffleGrid/index.js

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

package/lib/cjs/WebVideo/WebVideo.js

@@ -0,0 +1,197 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "WebVideo__StyledPlayerContainer",
+  componentId: "components-web__sc-327a6k-0"
+})({
+  width: '100%',
+  minWidth: 288,
+  outline: 'none'
+});
+const StyledYoutubePlayer = /*#__PURE__*/(0, _styledComponents.default)(_reactYoutube.default).withConfig({
+  displayName: "WebVideo__StyledYoutubePlayer",
+  componentId: "components-web__sc-327a6k-1"
+})({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+});
+const aspectRatios = {
+  '16:9': {
+    paddingTop: '56.25%'
+  },
+  '4:3': {
+    paddingTop: '75%'
+  },
+  '1:1': {
+    paddingTop: '100%'
+  }
+};
+const AspectLimiter = /*#__PURE__*/_styledComponents.default.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) => {
+  let {
+    videoId,
+    aspectRatio = '16:9',
+    posterSrc,
+    defaultVolume = 1,
+    beginMuted = false,
+    videoLength,
+    copy,
+    onPlay = () => {},
+    onPause = () => {},
+    onEnd = () => {},
+    onProgress = () => {},
+    onStart = () => {},
+    ...rest
+  } = _ref;
+  const [started, setStarted] = _react.default.useState(false);
+  const videoStateData = _react.default.useRef({
+    requestAnimationIds: [],
+    state: _utils2.YoutubePlayerState.UNSTARTED
+  });
+  const playerRef = _react.default.useRef(null);
+  const onPlayCallback = event => {
+    onPlay(event, videoStateData.current.state === _utils2.YoutubePlayerState.PAUSED);
+    videoStateData.current.state = _utils2.YoutubePlayerState.PLAYING;
+    if (onProgress) {
+      videoStateData.current.requestAnimationIds = (0, _utils2.triggerInProgressVideoIntervals)(onProgress, playerRef, event);
+    }
+  };
+  const initializeYoutubePlayer = event => {
+    onStart();
+    playerRef.current = event.target;
+    if (beginMuted) {
+      event.target.mute();
+    }
+    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;
+    if (onProgress) {
+      onProgress(event, 100);
+    }
+  };
+  const onPauseVideoCallback = event => {
+    videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
+    onPause(event);
+    videoStateData.current.state = _utils2.YoutubePlayerState.PAUSED;
+    videoStateData.current.requestAnimationIds = [];
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPlayerContainer, {
+    ref: ref,
+    "data-testid": "web-video-container",
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectLimiter, {
+      aspectRatio: aspectRatio,
+      children: started ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledYoutubePlayer, {
+        videoId: videoId,
+        opts: {
+          width: '100%',
+          height: '100%',
+          playerVars: {
+            autoplay: 1,
+            modestbranding: 1,
+            playsinline: 1,
+            rel: 0
+          }
+        },
+        onReady: initializeYoutubePlayer,
+        onPlay: onPlayCallback,
+        onPause: onPauseVideoCallback,
+        onEnd: onEndVideoCallback
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+        poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
+        videoLength: videoLength,
+        copy: copy,
+        onClick: () => {
+          setStarted(true);
+        }
+      })
+    })
+  });
+});
+WebVideo.displayName = 'WebVideo';
+const VideoProps = exports.VideoProps = {
+  ...selectedSystemPropTypes,
+  /**
+   * The video's ID, typically available via the video's URL.
+   */
+  videoId: _propTypes.default.string.isRequired,
+  /**
+   * The aspect ratio of the player.
+   */
+  aspectRatio: _propTypes.default.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,
+  /**
+   * 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,
+  /**
+   * Defines if the video should start muted.
+   */
+  beginMuted: _propTypes.default.bool,
+  /**
+   * The video's length, which will be displayed on the splash screen. This is defined in seconds.
+   */
+  videoLength: _propTypes.default.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']),
+  /**
+   * 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,
+  /**
+   * A function to be run when the video is played.
+   */
+  onPlay: _propTypes.default.func,
+  /**
+   * A function to be run when the video is paused.
+   */
+  onPause: _propTypes.default.func,
+  /**
+   * A function to be run when the video ends.
+   */
+  onEnd: _propTypes.default.func,
+  /**
+   * A function to be run when the video resumes.
+   */
+  onResume: _propTypes.default.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
+};
+WebVideo.propTypes = VideoProps;
+var _default = exports.default = WebVideo;

package/lib/cjs/WebVideo/index.js

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

package/lib/cjs/WebVideo/utils/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.triggerInProgressVideoIntervals = exports.YoutubePlayerState = void 0;
+/**
+ * Fires analytics events for inProgress analytics
+ * @param {current progress} progress
+ * @param {callback to run on defined milestones} onProgress
+ * @param {YouTube Video Event} event
+ */
+const fireVideoProgressEvents = (progress, onProgress, event) => {
+  const validProgressValues = [10, 25, 50, 75];
+  if (validProgressValues.includes(progress)) {
+    onProgress(event, progress);
+  }
+};
+const YoutubePlayerState = exports.YoutubePlayerState = {
+  UNSTARTED: -1,
+  ENDED: 0,
+  PLAYING: 1,
+  PAUSED: 2,
+  BUFFERING: 3,
+  CUED: 5
+};
+const PERCENTAGE_MULTIPLIER = 100;
+/**
+ * Run an interval to check the progress of the video and fire events at 10%, 25%, 50% and 75%
+ * @param {callback to run on defined milestones} onProgress
+ * @param {player reference} playerRef
+ * @param {YouTube video event} event
+ */
+const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
+  const duration = playerRef.current.getDuration();
+  let lastProgress = null;
+  const requestAnimationFrameIds = [];
+  const frame = () => {
+    const currentTime = playerRef.current.getCurrentTime();
+    const progress = Math.round(currentTime / duration * PERCENTAGE_MULTIPLIER);
+    if (progress !== lastProgress) {
+      fireVideoProgressEvents(progress, onProgress, event);
+      lastProgress = progress;
+    }
+    if (currentTime < duration) {
+      requestAnimationFrameIds.push(requestAnimationFrame(frame));
+    }
+  };
+
+  // Cancel any previous animation frames
+  requestAnimationFrameIds.forEach(id => cancelAnimationFrame(id));
+
+  // Start a new animation frame
+  requestAnimationFrameIds.push(requestAnimationFrame(frame));
+  return requestAnimationFrameIds;
+};
+exports.triggerInProgressVideoIntervals = triggerInProgressVideoIntervals;