@telus-uds/components-web 1.7.0 → 1.9.0

package/lib-module/Testimonial/Testimonial.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import Image from '../Image';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const TestimonialContainer = /*#__PURE__*/styled.figure.withConfig({
+  displayName: "Testimonial__TestimonialContainer",
+  componentId: "components-web__sc-1az53gr-0"
+})(_ref => {
+  let {
+    testimonialContainerGap
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: testimonialContainerGap,
+    margin: 0
+  };
+});
+const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Testimonial__QuoteContainer",
+  componentId: "components-web__sc-1az53gr-1"
+})(_ref2 => {
+  let {
+    quoteContainerGap
+  } = _ref2;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: quoteContainerGap
+  };
+});
+const Divider = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Testimonial__Divider",
+  componentId: "components-web__sc-1az53gr-2"
+})(_ref3 => {
+  let {
+    dividerBorder,
+    dividerBackgroundColor
+  } = _ref3;
+  return {
+    height: dividerBorder,
+    background: dividerBackgroundColor,
+    width: '100%'
+  };
+});
+const BlockQuote = /*#__PURE__*/styled.blockquote.withConfig({
+  displayName: "Testimonial__BlockQuote",
+  componentId: "components-web__sc-1az53gr-3"
+})({
+  margin: 0
+});
+const AuthorInfoContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Testimonial__AuthorInfoContainer",
+  componentId: "components-web__sc-1az53gr-4"
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
+  displayName: "Testimonial__Figcaption",
+  componentId: "components-web__sc-1az53gr-5"
+})(_ref4 => {
+  let {
+    figcaptionGap
+  } = _ref4;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: figcaptionGap
+  };
+});
+
+const Testimonial = _ref5 => {
+  let {
+    showDivider,
+    testimonial,
+    title,
+    imageSrc,
+    image = imageSrc,
+    additionalInfo,
+    testimonialStyle = 'heading',
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref5;
+  const {
+    testimonialContainerGap,
+    quoteContainerGap,
+    dividerBorder,
+    dividerBackgroundColor,
+    figcaptionGap,
+    textColor,
+    icon,
+    iconColor,
+    imageSize
+  } = useThemeTokens('Testimonial', tokens, variant);
+  return /*#__PURE__*/_jsxs(TestimonialContainer, {
+    testimonialContainerGap: testimonialContainerGap,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsxs(QuoteContainer, {
+      quoteContainerGap: quoteContainerGap,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        tokens: {
+          color: iconColor
+        },
+        variant: {
+          size: 'micro'
+        },
+        icon: icon
+      }), showDivider && /*#__PURE__*/_jsx(Divider, {
+        dividerBackgroundColor: dividerBackgroundColor,
+        dividerBorder: dividerBorder,
+        role: "separator"
+      })]
+    }), /*#__PURE__*/_jsx(BlockQuote, {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: testimonialStyle === 'large' ? 'large' : 'h3'
+        },
+        tokens: {
+          color: textColor,
+          fontWeight: '400'
+        },
+        children: `\u201C${testimonial}\u201D`
+      })
+    }), (image || title || additionalInfo) && /*#__PURE__*/_jsxs(Figcaption, {
+      figcaptionGap: figcaptionGap,
+      children: [image && (typeof image === 'string' ? /*#__PURE__*/_jsx(Image, {
+        rounded: "circle",
+        src: image,
+        alt: title,
+        width: imageSize,
+        height: imageSize
+      }) : image), (title || additionalInfo) && /*#__PURE__*/_jsxs(AuthorInfoContainer, {
+        children: [title && /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'small',
+            colour: 'secondary'
+          },
+          tokens: {
+            fontWeight: '500'
+          },
+          children: title
+        }), additionalInfo && /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'micro',
+            colour: 'secondary'
+          },
+          tokens: {
+            fontWeight: '400'
+          },
+          children: additionalInfo
+        })]
+      })]
+    }), showDivider && /*#__PURE__*/_jsx(Divider, {
+      dividerBackgroundColor: dividerBackgroundColor,
+      dividerBorder: dividerBorder,
+      role: "separator"
+    })]
+  });
+};
+
+Testimonial.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Testimonial content
+   */
+  testimonial: PropTypes.string.isRequired,
+
+  /**
+   * Testimonial author or source
+   */
+  title: PropTypes.string,
+
+  /**
+   * Additional information on the author or source
+   */
+  additionalInfo: PropTypes.string,
+
+  /**
+   * Testimonial style
+   */
+  testimonialStyle: PropTypes.oneOf(['large', 'heading']),
+
+  /**
+   * Whether to show or not dividers at the top and the bottom of the testimonial
+  showDivider: PropTypes.bool,
+  /**
+   * The src attribute for the Image component or custom JSX content to render instead
+   */
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+  /**
+   * The src attribute for the `Image` component to be displayed on the testimonial
+   * @deprecated please use the `image` prop instead
+   */
+  imageSrc: PropTypes.string
+};
+export default Testimonial;

package/lib-module/Testimonial/index.js

@@ -0,0 +1,2 @@
+import Testimonial from './Testimonial';
+export default Testimonial;

package/lib-module/Video/ControlBar/ControlBar.js

@@ -0,0 +1,292 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
+import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar';
+import VolumeSlider from './Controls/VolumeSlider/VolumeSlider';
+import VideoButton from './Controls/VideoButton/VideoButton';
+import VideoMenu from './Controls/VideoMenu/VideoMenu';
+import videoText from '../videoText';
+import { htmlAttrs } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const getIcon = icon => /*#__PURE__*/_jsx(Icon, {
+  icon: icon
+});
+
+const ControlBarContainer = /*#__PURE__*/styled.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__*/styled.div.withConfig({
+  displayName: "ControlBar__StyledControlBar",
+  componentId: "components-web__sc-13y61ky-1"
+})(_ref2 => {
+  let {
+    padding
+  } = _ref2;
+  return {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    width: '100%',
+    height: 56,
+    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__*/styled.div.withConfig({
+  displayName: "ControlBar__VideoProgressBarContainer",
+  componentId: "components-web__sc-13y61ky-2"
+})({
+  display: 'flex',
+  flexGrow: 1
+});
+const MenuContainer = /*#__PURE__*/styled.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 {
+    paddingTop,
+    paddingBottom,
+    paddingLeft: paddingLeftDefault,
+    paddingRight: paddingRightDefault,
+    paddingLeftCompactMode,
+    paddingRightCompactMode,
+    menuBottom,
+    menuRight,
+    menuMarginLeft,
+    captionsIcon,
+    settingsIcon,
+    minimizeIcon,
+    maximizeIcon
+  } = useThemeTokens('VideoControlBar', tokens, variant);
+
+  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[copy][track.language],
+        value: trackNumber
+      };
+    });
+    parsed.unshift({
+      name: videoText[copy].captionsNone,
+      value: -1
+    });
+    return parsed;
+  };
+
+  const paddingLeft = videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode;
+  const paddingRight = videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode;
+  const menuContainerStyleProps = {
+    menuBottom,
+    menuRight,
+    menuMarginLeft
+  };
+  return /*#__PURE__*/_jsx(ControlBarContainer, {
+    isHidden: isHidden,
+    isMobile: isMobile,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsxs(StyledControlBar, {
+      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      children: [/*#__PURE__*/_jsx(VideoProgressBarContainer, {
+        children: /*#__PURE__*/_jsx(VideoProgressBar, {
+          copy: copy,
+          videoPlayer: videoPlayer,
+          videoLength: videoLength,
+          videoCurrentTime: videoCurrentTime,
+          videoBufferEnd: videoBufferEnd,
+          setSeek: setSeek,
+          resetInactivityTimer: resetInactivityTimer
+        })
+      }), /*#__PURE__*/_jsx(VolumeSlider, {
+        videoPlayer: videoPlayer,
+        videoCurrentVolume: videoCurrentVolume,
+        setVolume: setVolume,
+        videoIsMuted: videoIsMuted,
+        toggleMute: toggleMute,
+        resetInactivityTimer: resetInactivityTimer,
+        copy: copy,
+        compactModeThreshold: compactModeThreshold,
+        videoPlayerWidth: videoPlayerWidth,
+        disableFocus: videoUnplayed
+      }), /*#__PURE__*/_jsxs(StackView, {
+        space: 3,
+        direction: "row",
+        children: [tracksAvailable && /*#__PURE__*/_jsx(VideoButton, {
+          disableFocus: videoUnplayed,
+          label: videoText[copy].captionsToggle,
+          icon: getIcon(captionsIcon),
+          onClick: () => {
+            setCaptionsMenuOpen(!captionsMenuOpen);
+            setQualityMenuOpen(false);
+            clearInactivityTimer();
+          },
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        }), /*#__PURE__*/_jsx(VideoButton, {
+          disableFocus: videoUnplayed,
+          label: videoText[copy].qualityToggle,
+          icon: getIcon(settingsIcon),
+          onClick: () => {
+            setQualityMenuOpen(!qualityMenuOpen);
+            setCaptionsMenuOpen(false);
+            clearInactivityTimer();
+          },
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        }), /*#__PURE__*/_jsx(VideoButton, {
+          disableFocus: videoUnplayed,
+          label: videoText[copy].fullScreenToggle,
+          icon: videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon),
+          onClick: toggleFullscreen,
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        })]
+      }), captionsMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
+        isOpen: captionsMenuOpen,
+        ...menuContainerStyleProps,
+        children: /*#__PURE__*/_jsx(VideoMenu, {
+          menuLabel: videoText[copy].captionsDialogue,
+          menuOptions: parseTracks(),
+          setSelection: setTextTracks,
+          selectedItem: selectedTextTrack,
+          copy: copy
+        })
+      }), qualityMenuOpen && /*#__PURE__*/_jsx(MenuContainer, {
+        isOpen: qualityMenuOpen,
+        ...menuContainerStyleProps,
+        children: /*#__PURE__*/_jsx(VideoMenu, {
+          menuLabel: videoText[copy].qualityDialogue,
+          menuOptions: parseVideoQuality(),
+          setSelection: setVideoQuality,
+          selectedItem: videoQuality,
+          copy: copy
+        })
+      })]
+    })
+  });
+};
+
+ControlBar.propTypes = { ...selectedSystemPropTypes,
+  videoPlayer: PropTypes.object.isRequired,
+  videoPlayerContainer: PropTypes.object.isRequired,
+  sources: PropTypes.array.isRequired,
+  tracks: PropTypes.array,
+  videoPlaying: PropTypes.bool.isRequired,
+  videoUnplayed: PropTypes.bool.isRequired,
+  videoBufferEnd: PropTypes.number.isRequired,
+  isHidden: PropTypes.bool,
+  videoLength: PropTypes.number.isRequired,
+  videoCurrentTime: PropTypes.number.isRequired,
+  videoCurrentVolume: PropTypes.number.isRequired,
+  videoIsMuted: PropTypes.bool.isRequired,
+  setVolume: PropTypes.func.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  tracksAvailable: PropTypes.bool.isRequired,
+  togglePlayPause: PropTypes.func.isRequired,
+  setSeek: PropTypes.func.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  toggleFullscreen: PropTypes.func.isRequired,
+  videoIsFullscreen: PropTypes.bool.isRequired,
+  setTextTracks: PropTypes.func.isRequired,
+  selectedTextTrack: PropTypes.number.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired,
+  videoQuality: PropTypes.number.isRequired,
+  setVideoQuality: PropTypes.func.isRequired,
+  captionsMenuOpen: PropTypes.bool.isRequired,
+  setCaptionsMenuOpen: PropTypes.func.isRequired,
+  qualityMenuOpen: PropTypes.bool.isRequired,
+  setQualityMenuOpen: PropTypes.func.isRequired,
+  clearInactivityTimer: PropTypes.func.isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: PropTypes.number.isRequired,
+  videoPlayerWidth: PropTypes.number.isRequired
+};
+export default ControlBar;

package/lib-module/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../../../../utils';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledButton = /*#__PURE__*/styled.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
+  } = 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 => {
+    var _rest$onClick;
+
+    event.preventDefault();
+    (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
+  };
+
+  return /*#__PURE__*/_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.element.isRequired,
+  label: PropTypes.string.isRequired,
+  disableFocus: PropTypes.bool.isRequired,
+  children: PropTypes.node
+};
+export default VideoButton;