@telus-uds/components-web 1.8.0 → 1.9.0

package/lib/Video/index.js

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

package/lib/Video/videoText.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const videoText = {
+  en: {
+    videoPlayer: 'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
+    videoSelected: 'Video selected. Press Q to listen to controls.',
+    videoSelectedSimple: 'Video selected. Press the space bar or K to toggle play and pause.',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    watch: 'Watch the video',
+    replay: 'Replay the video',
+    itemSelected: 'This is the currently selected option.',
+    itemUnselected: 'Select to switch to this option.',
+    captionsToggle: 'Select captions',
+    captionsDialogue: 'Captions',
+    captionsNone: 'None',
+    qualityToggle: 'Change video quality',
+    qualityDialogue: 'Quality',
+    fullScreenToggle: 'Toggle fullscreen',
+    minute: 'minute',
+    minutes: 'minutes',
+    second: 'second',
+    seconds: 'seconds',
+    ariaLabel: 'Play video. Video length is {minutes} and {seconds}.',
+    volumeSliderLabel: 'Adjust the volume',
+    videoProgressBarLabel: 'Progress bar',
+    en: 'English',
+    fr: 'French'
+  },
+  fr: {
+    videoPlayer: 'Appuyer sur K pour basculer entre lecture et pause. Utiliser les flèches gauche et droite ou les touches virgule et point pour reculer ou faire une avance rapide dans la vidéo. Utiliser les flèches ascendante et descendante, les touches tiret et égal ou les touches plus et moins du clavier numérique pour contrôler le volume. Appuyer sur la touche M pour désactiver le son. Appuyer sur F pour basculer en mode plein écran. Appuyer sur la touche d’échappement pour quitter les instructions et retourner à la vidéo.',
+    videoSelected: 'Vidéo sélectionnée. Appuyer sur Q pour écouter les contrôles',
+    videoSelectedSimple: 'Vidéo sélectionnée. Appuyer sur K pour basculer entre lecture et pause.',
+    mute: 'Désactiver le son',
+    unmute: 'Activer le son',
+    watch: 'Voir la vidéo',
+    replay: 'Relire la vidéo',
+    itemSelected: 'Cette option est déjà sélectionnée.',
+    itemUnselected: 'Sélectionner pour basculer à cette option.',
+    captionsToggle: 'Sélectionner les sous-titres',
+    captionsDialogue: 'Sous-titres',
+    captionsNone: 'Aucun',
+    qualityToggle: 'Modifier la qualité de la vidéo',
+    qualityDialogue: 'Qualité',
+    fullScreenToggle: 'Basculer en mode plein écran',
+    minute: 'minute',
+    minutes: 'minutes',
+    second: 'seconde',
+    seconds: 'secondes',
+    ariaLabel: 'Lire la vidéo. La durée de la vidéo est de {minutes} et {seconds}.',
+    volumeSliderLabel: 'Réglez le volume',
+    videoProgressBarLabel: 'Barre de progression',
+    en: 'Anglais',
+    fr: 'Français'
+  }
+};
+var _default = videoText;
+exports.default = _default;

package/lib/WebVideo/WebVideo.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VideoProps = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactYoutube = _interopRequireDefault(require("react-youtube"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
+
+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]);
+
+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 = _ref => {
+  let {
+    videoId,
+    aspectRatio = '16:9',
+    posterSrc,
+    defaultVolume = 1,
+    beginMuted = false,
+    videoLength,
+    copy,
+    onStart = () => {},
+    ...rest
+  } = _ref;
+  const [started, setStarted] = (0, _react.useState)(false);
+
+  const initializeYoutubePlayer = event => {
+    onStart();
+
+    if (beginMuted) {
+      event.target.mute();
+    }
+
+    event.target.setVolume(defaultVolume);
+    event.target.playVideo(); // This plays the video after passing the splash screen on mobile.
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPlayerContainer, {
+    "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
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+        poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
+        videoLength: videoLength,
+        copy: copy,
+        onClick: () => {
+          setStarted(true);
+        }
+      })
+    })
+  });
+};
+
+const 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']).isRequired,
+
+  /**
+   * 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
+};
+exports.VideoProps = VideoProps;
+WebVideo.propTypes = VideoProps;
+var _default = WebVideo;
+exports.default = _default;

package/lib/WebVideo/index.js

@@ -0,0 +1,13 @@
+"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;

package/lib/baseExports.js

@@ -57,12 +57,6 @@ Object.defineProperty(exports, "ButtonLink", {
     return _componentsBase.ButtonLink;
   }
 });
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function () {
-    return _componentsBase.Card;
-  }
-});
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  Autocomplete: true,
   Badge: true,
   Modal: true,
   OrderedList: true,
   PreviewCard: true,
   ResponsiveImage: true,
   Ribbon: true,
+  Countdown: true,
   DatePicker: true,
   Paragraph: true,
   Span: true,
@@ -17,17 +19,31 @@ var _exportNames = {
   Callout: true,
   PriceLockup: true,
   Footnote: true,
+  QuantitySelector: true,
   IconButton: true,
   transformGradient: true,
   Breadcrumbs: true,
   BlockQuote: true,
+  OptimizeImage: true,
+  Testimonial: true,
   Toast: true,
   Table: true,
   Image: true,
+  WebVideo: true,
   WaffleGrid: true,
   Spinner: true,
-  Listbox: true
+  Listbox: true,
+  Video: true,
+  StoryCard: true,
+  Card: true,
+  TermsAndConditions: true
 };
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.default;
+  }
+});
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
   get: function () {
@@ -52,6 +68,18 @@ Object.defineProperty(exports, "Callout", {
     return _Callout.default;
   }
 });
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "Countdown", {
+  enumerable: true,
+  get: function () {
+    return _Countdown.default;
+  }
+});
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
@@ -94,6 +122,12 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.default;
   }
 });
+Object.defineProperty(exports, "OptimizeImage", {
+  enumerable: true,
+  get: function () {
+    return _OptimizeImage.default;
+  }
+});
 Object.defineProperty(exports, "OrderedList", {
   enumerable: true,
   get: function () {
@@ -118,6 +152,12 @@ Object.defineProperty(exports, "PriceLockup", {
     return _PriceLockup.default;
   }
 });
+Object.defineProperty(exports, "QuantitySelector", {
+  enumerable: true,
+  get: function () {
+    return _QuantitySelector.default;
+  }
+});
 Object.defineProperty(exports, "ResponsiveImage", {
   enumerable: true,
   get: function () {
@@ -142,24 +182,54 @@ Object.defineProperty(exports, "Spinner", {
     return _Spinner.default;
   }
 });
+Object.defineProperty(exports, "StoryCard", {
+  enumerable: true,
+  get: function () {
+    return _StoryCard.default;
+  }
+});
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function () {
     return _Table.default;
   }
 });
+Object.defineProperty(exports, "TermsAndConditions", {
+  enumerable: true,
+  get: function () {
+    return _TermsAndConditions.default;
+  }
+});
+Object.defineProperty(exports, "Testimonial", {
+  enumerable: true,
+  get: function () {
+    return _Testimonial.default;
+  }
+});
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
   get: function () {
     return _Toast.default;
   }
 });
+Object.defineProperty(exports, "Video", {
+  enumerable: true,
+  get: function () {
+    return _Video.default;
+  }
+});
 Object.defineProperty(exports, "WaffleGrid", {
   enumerable: true,
   get: function () {
     return _WaffleGrid.default;
   }
 });
+Object.defineProperty(exports, "WebVideo", {
+  enumerable: true,
+  get: function () {
+    return _WebVideo.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -167,6 +237,8 @@ Object.defineProperty(exports, "transformGradient", {
   }
 });
 
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
+
 var _Badge = _interopRequireDefault(require("./Badge"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
@@ -179,6 +251,8 @@ var _ResponsiveImage = _interopRequireDefault(require("./ResponsiveImage"));
 
 var _Ribbon = _interopRequireDefault(require("./Ribbon"));
 
+var _Countdown = _interopRequireDefault(require("./Countdown"));
+
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 
 var _Paragraph = _interopRequireDefault(require("./Paragraph"));
@@ -193,6 +267,8 @@ var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
 
 var _Footnote = _interopRequireDefault(require("./Footnote"));
 
+var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
+
 var _IconButton = _interopRequireDefault(require("./IconButton"));
 
 var _utils = require("./utils");
@@ -201,18 +277,32 @@ var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
 
 var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
 
+var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
+
+var _Testimonial = _interopRequireDefault(require("./Testimonial"));
+
 var _Toast = _interopRequireDefault(require("./Toast"));
 
 var _Table = _interopRequireDefault(require("./Table"));
 
 var _Image = _interopRequireDefault(require("./Image"));
 
+var _WebVideo = _interopRequireDefault(require("./WebVideo"));
+
 var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
 
 var _Spinner = _interopRequireDefault(require("./Spinner"));
 
 var _Listbox = _interopRequireDefault(require("./Listbox"));
 
+var _Video = _interopRequireDefault(require("./Video"));
+
+var _StoryCard = _interopRequireDefault(require("./StoryCard"));
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib/shared/VideoSplash/SplashButton/SplashButton.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _helpers = require("../helpers");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "SplashButton__ButtonContainer",
+  componentId: "components-web__sc-1oe22fk-0"
+})({
+  background: 'none',
+  border: 0,
+  padding: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer'
+});
+
+const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButton__ButtonContent",
+  componentId: "components-web__sc-1oe22fk-1"
+})({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 64,
+  height: 64,
+  background: _ref => {
+    let {
+      buttonContentBackground
+    } = _ref;
+    return buttonContentBackground ?? 'none';
+  },
+  borderRadius: '100%',
+  transition: 'background 0.2s ease-in-out',
+  [`${ButtonContainer}:hover &`]: {
+    background: _ref2 => {
+      let {
+        buttonContentChildrenBackground
+      } = _ref2;
+      return buttonContentChildrenBackground;
+    }
+  }
+});
+
+const SplashButton = _ref3 => {
+  let {
+    copy,
+    tokens,
+    variant,
+    videoLength
+  } = _ref3;
+  const {
+    buttonContentChildrenBackground
+  } = (0, _componentsBase.useThemeTokens)('SplashButton', tokens, variant, {
+    hover: true
+  });
+  const {
+    playIcon: PlayIcon,
+    playIconColor,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('SplashButton', tokens, variant);
+  const ariaLabel = (0, _helpers.getAriaLabel)((0, _helpers.getTimestamp)(videoLength), copy);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+    "aria-label": ariaLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContent, { ...themeTokens,
+      buttonContentChildrenBackground: buttonContentChildrenBackground,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
+        size: 27,
+        color: playIconColor
+      })
+    })
+  });
+};
+
+SplashButton.propTypes = {
+  videoLength: _propTypes.default.number,
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object,
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = SplashButton;
+exports.default = _default;