@telus-uds/components-web 2.33.2 → 2.34.0

package/lib-module/WebVideo/WebVideo.js

@@ -1,10 +1,11 @@
 import { selectSystemProps } from '@telus-uds/components-base';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+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({
@@ -43,7 +44,7 @@ const AspectLimiter = /*#__PURE__*/styled.div.withConfig({
   ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));
-const WebVideo = _ref => {
+const WebVideo = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     videoId,
     aspectRatio = '16:9',
@@ -52,15 +53,29 @@ const WebVideo = _ref => {
     beginMuted = false,
     videoLength,
     copy,
-    onPlay,
-    onPause,
-    onEnd,
+    onPlay = () => {},
+    onPause = () => {},
+    onEnd = () => {},
+    onProgress = () => {},
     onStart = () => {},
     ...rest
   } = _ref;
-  const [started, setStarted] = useState(false);
+  const [started, setStarted] = React.useState(false);
+  const videoStateData = React.useRef({
+    requestAnimationIds: [],
+    state: YoutubePlayerState.UNSTARTED
+  });
+  const playerRef = React.useRef(null);
+  const onPlayCallback = event => {
+    onPlay(event, videoStateData.current.state === YoutubePlayerState.PAUSED);
+    videoStateData.current.state = YoutubePlayerState.PLAYING;
+    if (onProgress) {
+      videoStateData.current.requestAnimationIds = triggerInProgressVideoIntervals(onProgress, playerRef, event);
+    }
+  };
   const initializeYoutubePlayer = event => {
     onStart();
+    playerRef.current = event.target;
     if (beginMuted) {
       event.target.mute();
     }
@@ -68,7 +83,23 @@ const WebVideo = _ref => {
     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 = YoutubePlayerState.ENDED;
+    if (onProgress) {
+      onProgress(event, 100);
+    }
+  };
+  const onPauseVideoCallback = event => {
+    videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
+    onPause(event);
+    videoStateData.current.state = YoutubePlayerState.PAUSED;
+    videoStateData.current.requestAnimationIds = [];
+  };
   return /*#__PURE__*/_jsx(StyledPlayerContainer, {
+    ref: ref,
     "data-testid": "web-video-container",
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(AspectLimiter, {
@@ -86,9 +117,9 @@ const WebVideo = _ref => {
           }
         },
         onReady: initializeYoutubePlayer,
-        onPlay: onPlay,
-        onPause: onPause,
-        onEnd: onEnd
+        onPlay: onPlayCallback,
+        onPause: onPauseVideoCallback,
+        onEnd: onEndVideoCallback
       }) : /*#__PURE__*/_jsx(VideoSplash, {
         poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
         videoLength: videoLength,
@@ -99,7 +130,8 @@ const WebVideo = _ref => {
       })
     })
   });
-};
+});
+WebVideo.displayName = 'WebVideo';
 export const VideoProps = {
   ...selectedSystemPropTypes,
   /**
@@ -145,7 +177,15 @@ export const VideoProps = {
   /**
    * A function to be run when the video ends.
    */
-  onEnd: PropTypes.func
+  onEnd: PropTypes.func,
+  /**
+   * A function to be run when the video resumes.
+   */
+  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.func
 };
 WebVideo.propTypes = VideoProps;
 export default WebVideo;

package/lib-module/WebVideo/utils/index.js

@@ -0,0 +1,50 @@
+/**
+ * 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);
+  }
+};
+export const 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
+ */
+export 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;
+};

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/lib-module/utils/theming/with-client-theme.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokens } from '@telus-uds/components-base';
+import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
 import { jsx as _jsx } from "react/jsx-runtime";
 const withClientTheme = Component => {
   const UdsStyledComponent = _ref => {
@@ -16,7 +16,7 @@ const withClientTheme = Component => {
     });
   };
   UdsStyledComponent.propTypes = {
-    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tokens: getTokensPropType(Component.displayName),
     variant: PropTypes.string
   };
   return UdsStyledComponent;

package/lib-module/utils/theming/with-server-theme.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getThemeTokens } from '@telus-uds/components-base/server';
+import { getThemeTokens, getTokensPropType } from '@telus-uds/components-base/server';
 import getTheme from './get-theme-from-server';
 import { jsx as _jsx } from "react/jsx-runtime";
 const withServerTheme = (Component, componentName) => {
@@ -18,7 +18,7 @@ const withServerTheme = (Component, componentName) => {
     });
   };
   UdsStyledComponent.propTypes = {
-    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tokens: getTokensPropType(componentName),
     variant: PropTypes.string
   };
   return UdsStyledComponent;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.84.0",
+    "@telus-uds/components-base": "1.85.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.55.0",
+    "@telus-uds/system-theme-tokens": "^2.56.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.33.2"
+  "version": "2.34.0"
 }

package/src/Badge/Badge.jsx

@@ -35,7 +35,7 @@ const fontSizeMapping = {
   16: 'h6'
 }
 
-const Badge = ({ children, tokens, variant = {}, ...rest }) => {
+const Badge = React.forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
   const {
     backgroundColor,
     gradient,
@@ -74,6 +74,7 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
       fontWeight={fontWeight}
       gradient={semanticGradient}
       border={`${borderWidth}px solid ${borderColor}`}
+      ref={ref}
       {...selectProps(rest)}
     >
       <Typography
@@ -84,7 +85,9 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
       </Typography>
     </BadgeContainer>
   )
-}
+})
+
+Badge.displayName = 'Badge'
 
 Badge.propTypes = {
   ...selectedSystemPropTypes,

package/src/BlockQuote/BlockQuote.jsx

@@ -38,132 +38,140 @@ const QuoteContainer = styled.div`
   margin-bottom: ${({ marginBottom }) => `${marginBottom}px`};
 `
 
-const BlockQuote = ({
-  children,
-  link,
-  additionalInfo,
-  linkHref,
-  textStyle = 'large',
-  LinkRouter,
-  linkRouterProps,
-  tokens,
-  variant,
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const {
-    color,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    marginBottom,
-    width,
-    backgroundGradient,
-    titleHeadingFontSize,
-    titleHeadingFontName,
-    titleHeadingFontWeight,
-    titleHeadingLineHeight,
-    titleFontSize,
-    titleFontName,
-    titleFontWeight,
-    titleLineHeight,
-    linkFontSize,
-    linkFontName,
-    linkFontWeight,
-    linkLineHeight
-  } = useThemeTokens('BlockQuote', tokens, variant, {
-    viewport
-  })
-  const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle
-  const titleTokens =
-    textStyle === 'heading'
-      ? {
-          fontSize: titleHeadingFontSize,
-          fontName: titleHeadingFontName,
-          fontWeight: titleHeadingFontWeight,
-          lineHeight: titleHeadingLineHeight
-        }
-      : {
-          fontSize: titleFontSize,
-          fontName: titleFontName,
-          fontWeight: titleFontWeight,
-          lineHeight: titleLineHeight
-        }
-  const renderLink = () => {
-    if (linkHref) {
+const BlockQuote = React.forwardRef(
+  (
+    {
+      children,
+      link,
+      additionalInfo,
+      linkHref,
+      textStyle = 'large',
+      LinkRouter,
+      linkRouterProps,
+      tokens,
+      variant,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const {
+      color,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      marginBottom,
+      width,
+      backgroundGradient,
+      titleHeadingFontSize,
+      titleHeadingFontName,
+      titleHeadingFontWeight,
+      titleHeadingLineHeight,
+      titleFontSize,
+      titleFontName,
+      titleFontWeight,
+      titleLineHeight,
+      linkFontSize,
+      linkFontName,
+      linkFontWeight,
+      linkLineHeight
+    } = useThemeTokens('BlockQuote', tokens, variant, {
+      viewport
+    })
+    const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle
+    const titleTokens =
+      textStyle === 'heading'
+        ? {
+            fontSize: titleHeadingFontSize,
+            fontName: titleHeadingFontName,
+            fontWeight: titleHeadingFontWeight,
+            lineHeight: titleHeadingLineHeight
+          }
+        : {
+            fontSize: titleFontSize,
+            fontName: titleFontName,
+            fontWeight: titleFontWeight,
+            lineHeight: titleLineHeight
+          }
+    const renderLink = () => {
+      if (linkHref) {
+        return (
+          <Link
+            href={linkHref}
+            tokens={{
+              blockFontSize: linkFontSize,
+              blockFontName: linkFontName,
+              blockFontWeight: linkFontWeight,
+              blockLineHeight: linkLineHeight,
+              color
+            }}
+            variant={{ alternative: true }}
+            LinkRouter={LinkRouter}
+            linkRouterProps={linkRouterProps}
+          >
+            {link}
+          </Link>
+        )
+      }
+
       return (
-        <Link
-          href={linkHref}
+        <Typography
           tokens={{
-            blockFontSize: linkFontSize,
-            blockFontName: linkFontName,
-            blockFontWeight: linkFontWeight,
-            blockLineHeight: linkLineHeight,
-            color
+            color,
+            fontName: linkFontName,
+            fontSize: linkFontSize,
+            fontWeight: linkFontWeight,
+            lineHeight: linkLineHeight
           }}
-          variant={{ alternative: true }}
-          LinkRouter={LinkRouter}
-          linkRouterProps={linkRouterProps}
         >
           {link}
-        </Link>
+        </Typography>
       )
     }
 
-    return (
-      <Typography
-        tokens={{
-          color,
-          fontName: linkFontName,
-          fontSize: linkFontSize,
-          fontWeight: linkFontWeight,
-          lineHeight: linkLineHeight
-        }}
-      >
-        {link}
-      </Typography>
-    )
-  }
+    const renderQuote = () => {
+      const quote = (
+        <Typography tokens={{ color, ...titleTokens }} variant={{ size: mappedTextSize }}>
+          {children}
+        </Typography>
+      )
 
-  const renderQuote = () => {
-    const quote = (
-      <Typography tokens={{ color, ...titleTokens }} variant={{ size: mappedTextSize }}>
-        {children}
-      </Typography>
-    )
+      if (additionalInfo || link) {
+        return <QuoteContainer marginBottom={marginBottom}>{quote}</QuoteContainer>
+      }
 
-    if (additionalInfo || link) {
-      return <QuoteContainer marginBottom={marginBottom}>{quote}</QuoteContainer>
+      return quote
     }
 
-    return quote
+    return (
+      <BlockQuoteContainer
+        {...selectProps(rest)}
+        paddingTop={paddingTop}
+        paddingBottom={paddingBottom}
+        paddingLeft={paddingLeft}
+        paddingRight={paddingRight}
+        width={width}
+        backgroundGradient={backgroundGradient}
+        ref={ref}
+      >
+        {renderQuote()}
+        {(additionalInfo || link) && (
+          <StackView space={0}>
+            {link && renderLink()}
+            {additionalInfo && (
+              <Typography tokens={{ color }} variant={{ size: 'small' }}>
+                {additionalInfo}
+              </Typography>
+            )}
+          </StackView>
+        )}
+      </BlockQuoteContainer>
+    )
   }
+)
 
-  return (
-    <BlockQuoteContainer
-      {...selectProps(rest)}
-      paddingTop={paddingTop}
-      paddingBottom={paddingBottom}
-      paddingLeft={paddingLeft}
-      paddingRight={paddingRight}
-      width={width}
-      backgroundGradient={backgroundGradient}
-    >
-      {renderQuote()}
-      {(additionalInfo || link) && (
-        <StackView space={0}>
-          {link && renderLink()}
-          {additionalInfo && (
-            <Typography tokens={{ color }} variant={{ size: 'small' }}>
-              {additionalInfo}
-            </Typography>
-          )}
-        </StackView>
-      )}
-    </BlockQuoteContainer>
-  )
-}
+BlockQuote.displayName = 'BlockQuote'
 
 BlockQuote.propTypes = {
   ...selectedSystemPropTypes,