@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/Toast/Toast.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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 }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const transform = property => (from, to) => (0, _styledComponents.keyframes)(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
+const slideDown = property => function (from, to) {
+  let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
+  return (0, _styledComponents.keyframes)(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
+};
+const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
+const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Toast__ToastContainer",
+  componentId: "components-web__sc-p78jdh-0"
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+  let {
+    padding
+  } = _ref;
+  return padding;
+}, _ref2 => {
+  let {
+    padding
+  } = _ref2;
+  return padding;
+}, _ref3 => {
+  let {
+    containerBackgroundColor
+  } = _ref3;
+  return containerBackgroundColor;
+}, _ref4 => {
+  let {
+    containerGap
+  } = _ref4;
+  return containerGap;
+}, animation);
+const Toast = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    toast,
+    copy,
+    headline,
+    link,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref5;
+  // viewport hook added to work adjust the padding to different sizes
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    containerBackgroundColor,
+    containerGap,
+    animationHeightBefore,
+    animationHeightAfter,
+    animationPaddingBottomBefore,
+    animationPaddingBottomAfter,
+    animationPaddingTopBefore,
+    animationPaddingTopAfter,
+    animationBackgroundColorBefore,
+    animationBackgroundColorAfter,
+    animationColorBefore,
+    animationColorAfter,
+    chevronlinkFontWeight,
+    ...extraTokens
+  } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
+    viewport
+  });
+
+  // inherit ChevronLink tokens for animation colors
+  const {
+    color: chevronDefaultColor
+  } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {});
+  const {
+    color: chevronInverseColor
+  } = (0, _componentsBase.useThemeTokens)('ChevronLink', {}, {
+    inverse: true
+  });
+  if (!toast) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ToastContainer, {
+    containerBackgroundColor: containerBackgroundColor,
+    containerGap: containerGap,
+    animationHeightBefore: animationHeightBefore,
+    animationHeightAfter: animationHeightAfter,
+    animationPaddingBottomBefore: animationPaddingBottomBefore,
+    animationPaddingBottomAfter: animationPaddingBottomAfter,
+    animationPaddingTopBefore: animationPaddingTopBefore,
+    animationPaddingTopAfter: animationPaddingTopAfter,
+    animationBackgroundColorBefore: animationBackgroundColorBefore,
+    animationBackgroundColorAfter: animationBackgroundColorAfter,
+    animationColorBefore: animationColorBefore,
+    animationColorAfter: animationColorAfter,
+    animationFillColorBefore: chevronInverseColor,
+    animationFillColorAfter: chevronDefaultColor,
+    ref: ref,
+    ...extraTokens,
+    ...selectProps(rest),
+    children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        bold: true,
+        inverse: true
+      },
+      children: headline
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2,
+      direction: "row"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        inverse: true
+      },
+      children: copy
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 2,
+      direction: "row"
+    }), link && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
+      variant: {
+        inverse: true
+      },
+      tokens: {
+        blockFontWeight: chevronlinkFontWeight
+      },
+      href: link.href,
+      LinkRouter: link.LinkRouter,
+      linkRouterProps: link.linkRouterProps,
+      children: link.text
+    })]
+  });
+});
+Toast.displayName = 'Toast';
+Toast.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Toast'),
+  /**
+   * If true, the toast will be displayed
+   */
+  toast: _propTypes.default.bool,
+  /**
+   * The copy to display in the toast
+   */
+  copy: _propTypes.default.string.isRequired,
+  /**
+   * The headline to display in the toast (before copy)
+   */
+  headline: _propTypes.default.string,
+  /**
+   * The link to display in the toast (after copy)
+   */
+  link: _propTypes.default.shape({
+    href: _propTypes.default.string.isRequired,
+    text: _propTypes.default.string.isRequired,
+    LinkRouter: _componentsBase.withLinkRouter.propTypes?.LinkRouter,
+    linkRouterProps: _componentsBase.withLinkRouter.propTypes?.linkRouterProps
+  })
+};
+var _default = exports.default = Toast;

package/lib/cjs/Toast/index.js

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

package/lib/cjs/Video/ControlBar/ControlBar.js

@@ -0,0 +1,294 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _VideoProgressBar = _interopRequireDefault(require("./Controls/VideoProgressBar/VideoProgressBar"));
+var _VolumeSlider = _interopRequireDefault(require("./Controls/VolumeSlider/VolumeSlider"));
+var _VideoButton = _interopRequireDefault(require("./Controls/VideoButton/VideoButton"));
+var _VideoMenu = _interopRequireDefault(require("./Controls/VideoMenu/VideoMenu"));
+var _videoText = _interopRequireDefault(require("../videoText"));
+var _utils = 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 getIcon = icon => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+  icon: icon
+});
+const ControlBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__ControlBarContainer",
+  componentId: "components-web__sc-13y61ky-0"
+})(_ref => {
+  let {
+    isHidden,
+    isMobile
+  } = _ref;
+  return {
+    width: '100%',
+    position: 'relative',
+    transition: 'opacity 0.4s',
+    opacity: isHidden ? 0 : 1,
+    display: isMobile ? 'none' : undefined
+  };
+});
+const StyledControlBar = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__StyledControlBar",
+  componentId: "components-web__sc-13y61ky-1"
+})(_ref2 => {
+  let {
+    padding,
+    height
+  } = _ref2;
+  return {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    width: '100%',
+    height,
+    padding,
+    bottom: 0,
+    backgroundColor: 'rgba(42, 44, 46, 0.85)',
+    // TODO: replace with opaque greyThunder
+    margin: 'auto',
+    display: 'flex',
+    justifyContent: 'space-between',
+    zIndex: 9
+  };
+});
+const VideoProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__VideoProgressBarContainer",
+  componentId: "components-web__sc-13y61ky-2"
+})({
+  display: 'flex',
+  flexGrow: 1
+});
+const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__MenuContainer",
+  componentId: "components-web__sc-13y61ky-3"
+})(_ref3 => {
+  let {
+    isOpen,
+    menuBottom,
+    menuRight,
+    menuMarginLeft
+  } = _ref3;
+  return {
+    position: 'absolute',
+    bottom: menuBottom,
+    right: menuRight,
+    display: isOpen ? 'block' : 'none',
+    marginLeft: menuMarginLeft
+  };
+});
+const ControlBar = _ref4 => {
+  let {
+    videoPlayer,
+    videoPlayerContainer,
+    sources,
+    tracks,
+    videoPlaying,
+    videoUnplayed,
+    videoBufferEnd,
+    isHidden = false,
+    videoLength,
+    videoCurrentTime,
+    videoCurrentVolume,
+    videoIsMuted,
+    setVolume,
+    isMobile,
+    tracksAvailable,
+    togglePlayPause,
+    setSeek,
+    toggleMute,
+    toggleFullscreen,
+    videoIsFullscreen,
+    setTextTracks,
+    selectedTextTrack,
+    resetInactivityTimer,
+    videoQuality,
+    setVideoQuality,
+    captionsMenuOpen,
+    setCaptionsMenuOpen,
+    qualityMenuOpen,
+    setQualityMenuOpen,
+    clearInactivityTimer,
+    copy,
+    compactModeThreshold,
+    videoPlayerWidth,
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    menuBottom,
+    menuRight,
+    menuMarginLeft,
+    captionsIcon,
+    settingsIcon,
+    minimizeIcon,
+    maximizeIcon,
+    height
+  } = (0, _componentsBase.useThemeTokens)('VideoControlBar', tokens, variant, {
+    viewport
+  });
+  const parseVideoQuality = () => {
+    return sources.map(source => {
+      if (!source.isFallback) {
+        return {
+          name: source.qualityName,
+          value: source.qualityRank
+        };
+      }
+      return {};
+    });
+  };
+  const parseTracks = () => {
+    const parsed = tracks.map((track, trackNumber) => {
+      return {
+        name: _videoText.default[copy][track.language],
+        value: trackNumber
+      };
+    });
+    parsed.unshift({
+      name: _videoText.default[copy].captionsNone,
+      value: -1
+    });
+    return parsed;
+  };
+  const menuContainerStyleProps = {
+    menuBottom,
+    menuRight,
+    menuMarginLeft
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContainer, {
+    isHidden: isHidden,
+    isMobile: isMobile,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlBar, {
+      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      height: `${height}px`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoProgressBarContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoProgressBar.default, {
+          copy: copy,
+          videoPlayer: videoPlayer,
+          playing: videoPlaying,
+          videoLength: videoLength,
+          videoCurrentTime: videoCurrentTime,
+          videoBufferEnd: videoBufferEnd,
+          setSeek: setSeek,
+          resetInactivityTimer: resetInactivityTimer
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VolumeSlider.default, {
+        videoPlayer: videoPlayer,
+        videoCurrentVolume: videoCurrentVolume,
+        setVolume: setVolume,
+        videoIsMuted: videoIsMuted,
+        toggleMute: toggleMute,
+        resetInactivityTimer: resetInactivityTimer,
+        copy: copy,
+        compactModeThreshold: compactModeThreshold,
+        videoPlayerWidth: videoPlayerWidth,
+        disableFocus: videoUnplayed
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        space: 3,
+        direction: "row",
+        children: [tracksAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+          disableFocus: videoUnplayed,
+          label: _videoText.default[copy].captionsToggle,
+          icon: getIcon(captionsIcon),
+          onClick: () => {
+            setCaptionsMenuOpen(!captionsMenuOpen);
+            setQualityMenuOpen(false);
+            clearInactivityTimer();
+          },
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+          disableFocus: videoUnplayed,
+          label: _videoText.default[copy].qualityToggle,
+          icon: getIcon(settingsIcon),
+          onClick: () => {
+            setQualityMenuOpen(!qualityMenuOpen);
+            setCaptionsMenuOpen(false);
+            clearInactivityTimer();
+          },
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+          disableFocus: videoUnplayed,
+          label: _videoText.default[copy].fullScreenToggle,
+          icon: videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon),
+          onClick: toggleFullscreen,
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        })]
+      }), captionsMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+        isOpen: captionsMenuOpen,
+        ...menuContainerStyleProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
+          menuLabel: _videoText.default[copy].captionsDialogue,
+          menuOptions: parseTracks(),
+          setSelection: setTextTracks,
+          selectedItem: selectedTextTrack,
+          copy: copy
+        })
+      }), qualityMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+        isOpen: qualityMenuOpen,
+        ...menuContainerStyleProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
+          menuLabel: _videoText.default[copy].qualityDialogue,
+          menuOptions: parseVideoQuality(),
+          setSelection: setVideoQuality,
+          selectedItem: videoQuality,
+          copy: copy
+        })
+      })]
+    })
+  });
+};
+ControlBar.propTypes = {
+  ...selectedSystemPropTypes,
+  videoPlayer: _propTypes.default.object.isRequired,
+  videoPlayerContainer: _propTypes.default.object.isRequired,
+  sources: _propTypes.default.array.isRequired,
+  tracks: _propTypes.default.array,
+  videoPlaying: _propTypes.default.bool.isRequired,
+  videoUnplayed: _propTypes.default.bool.isRequired,
+  videoBufferEnd: _propTypes.default.number.isRequired,
+  isHidden: _propTypes.default.bool,
+  videoLength: _propTypes.default.number.isRequired,
+  videoCurrentTime: _propTypes.default.number.isRequired,
+  videoCurrentVolume: _propTypes.default.number.isRequired,
+  videoIsMuted: _propTypes.default.bool.isRequired,
+  setVolume: _propTypes.default.func.isRequired,
+  isMobile: _propTypes.default.bool.isRequired,
+  tracksAvailable: _propTypes.default.bool.isRequired,
+  togglePlayPause: _propTypes.default.func.isRequired,
+  setSeek: _propTypes.default.func.isRequired,
+  toggleMute: _propTypes.default.func.isRequired,
+  toggleFullscreen: _propTypes.default.func.isRequired,
+  videoIsFullscreen: _propTypes.default.bool.isRequired,
+  setTextTracks: _propTypes.default.func.isRequired,
+  selectedTextTrack: _propTypes.default.number.isRequired,
+  resetInactivityTimer: _propTypes.default.func.isRequired,
+  videoQuality: _propTypes.default.number.isRequired,
+  setVideoQuality: _propTypes.default.func.isRequired,
+  captionsMenuOpen: _propTypes.default.bool.isRequired,
+  setCaptionsMenuOpen: _propTypes.default.func.isRequired,
+  qualityMenuOpen: _propTypes.default.bool.isRequired,
+  setQualityMenuOpen: _propTypes.default.func.isRequired,
+  clearInactivityTimer: _propTypes.default.func.isRequired,
+  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: _propTypes.default.number.isRequired,
+  videoPlayerWidth: _propTypes.default.number.isRequired
+};
+var _default = exports.default = ControlBar;

package/lib/cjs/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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 _utils = 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 StyledButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "VideoButton__StyledButton",
+  componentId: "components-web__sc-kfw0tr-0"
+})(_ref => {
+  let {
+    color
+  } = _ref;
+  return {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'stretch',
+    'svg path': {
+      fill: color
+    }
+  };
+});
+const VideoButton = _ref2 => {
+  let {
+    icon,
+    label,
+    disableFocus,
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const {
+    color
+  } = (0, _componentsBase.useThemeTokens)('VideoButton', tokens, variant);
+  const handleOnKeyDown = event => {
+    const key = event.key || event.keyCode;
+
+    // Disables playing by space bar, as that can be used to click a button
+    if (key === ' ' || key === 32) {
+      event.stopPropagation();
+    }
+  };
+  const handleClick = event => {
+    event.preventDefault();
+    rest.onClick?.(event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
+    "aria-label": label,
+    onKeyDown: handleOnKeyDown,
+    tabIndex: disableFocus ? '-1' : undefined,
+    color: color,
+    ...selectProps(rest),
+    onClick: handleClick,
+    children: [icon, children]
+  });
+};
+VideoButton.propTypes = {
+  ...selectedSystemPropTypes,
+  icon: _propTypes.default.element.isRequired,
+  label: _propTypes.default.string.isRequired,
+  disableFocus: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node
+};
+var _default = exports.default = VideoButton;