@telus-uds/components-web 1.8.0 → 1.10.0

package/lib/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -0,0 +1,234 @@
+"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: "SplashButtonWithDetails__ButtonContainer",
+  componentId: "components-web__sc-1edwy9o-0"
+})({
+  background: 'none',
+  border: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  cursor: 'pointer'
+});
+
+const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContent",
+  componentId: "components-web__sc-1edwy9o-1"
+})({
+  background: _ref => {
+    let {
+      buttonBackground
+    } = _ref;
+    return buttonBackground;
+  },
+  border: _ref2 => {
+    let {
+      buttonBorderColor
+    } = _ref2;
+    return `1px solid ${buttonBorderColor}`;
+  },
+  borderRadius: _ref3 => {
+    let {
+      buttonRadius
+    } = _ref3;
+    return `${buttonRadius}px`;
+  },
+  position: 'absolute',
+  left: _ref4 => {
+    let {
+      buttonLeftPosition
+    } = _ref4;
+    return `${buttonLeftPosition}px`;
+  },
+  bottom: _ref5 => {
+    let {
+      buttonBottomPosition
+    } = _ref5;
+    return `${buttonBottomPosition}px`;
+  },
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: _ref6 => {
+    let {
+      buttonMinHeight
+    } = _ref6;
+    return `${buttonMinHeight}px`;
+  },
+  paddingRight: _ref7 => {
+    let {
+      buttonPaddingLeft
+    } = _ref7;
+    return `${buttonPaddingLeft}px`;
+  },
+  paddingLeft: _ref8 => {
+    let {
+      buttonPaddingRight
+    } = _ref8;
+    return `${buttonPaddingRight}px`;
+  },
+  transition: 'background 0.2s ease-in-out',
+  [`${ButtonContainer}:hover &`]: {
+    background: _ref9 => {
+      let {
+        buttonContentChildrenBackground
+      } = _ref9;
+      return buttonContentChildrenBackground;
+    }
+  }
+});
+
+const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButtonWithDetails__PlayIconContainer",
+  componentId: "components-web__sc-1edwy9o-2"
+})({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 32,
+  height: 32,
+  background: _ref10 => {
+    let {
+      playIconContainerBackground
+    } = _ref10;
+    return playIconContainerBackground ?? 'none';
+  },
+  borderRadius: '100%',
+  transition: 'background 0.2s ease-in-out'
+});
+
+const DetailsContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButtonWithDetails__DetailsContainer",
+  componentId: "components-web__sc-1edwy9o-3"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  paddingLeft: _ref11 => {
+    let {
+      detailsContainerPadding
+    } = _ref11;
+    return `${detailsContainerPadding}px`;
+  }
+});
+
+const selectPlayIconContainerTokens = _ref12 => {
+  let {
+    playIconContainerBackground
+  } = _ref12;
+  return {
+    playIconContainerBackground
+  };
+};
+
+const selectDetailsContainerTokens = _ref13 => {
+  let {
+    detailsContainerPadding
+  } = _ref13;
+  return {
+    detailsContainerPadding
+  };
+};
+
+const selectButtonContentTokens = _ref14 => {
+  let {
+    buttonBackground,
+    buttonBorderColor,
+    buttonRadius,
+    buttonLeftPosition,
+    buttonBottomPosition,
+    buttonMinHeight,
+    buttonPaddingLeft,
+    buttonPaddingRight
+  } = _ref14;
+  return {
+    buttonBackground,
+    buttonBorderColor,
+    buttonRadius,
+    buttonLeftPosition,
+    buttonBottomPosition,
+    buttonMinHeight,
+    buttonPaddingLeft,
+    buttonPaddingRight
+  };
+};
+
+const SplashButtonWithDetails = _ref15 => {
+  let {
+    label,
+    tokens,
+    variant,
+    copy,
+    videoLength
+  } = _ref15;
+  const {
+    buttonContentChildrenBackground
+  } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant, {
+    hover: true
+  });
+  const {
+    playIcon: PlayIcon,
+    playIconColor,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant);
+  const mappedVideoLength = (0, _helpers.getTimestamp)(videoLength, copy);
+  const ariaLabel = (0, _helpers.getAriaLabel)(mappedVideoLength, copy);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+    "aria-label": ariaLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonContent, { ...selectButtonContentTokens(themeTokens),
+      buttonContentChildrenBackground: buttonContentChildrenBackground,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIconContainer, { ...selectPlayIconContainerTokens(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
+          size: 13,
+          color: playIconColor
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DetailsContainer, { ...selectDetailsContainerTokens(themeTokens),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            bold: true
+          },
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            colour: 'secondary'
+            /* TODO: this is not the same color as in designs */
+            ,
+            size: 'micro'
+          },
+          children: mappedVideoLength.timestamp
+        })]
+      })]
+    })
+  });
+};
+
+SplashButtonWithDetails.propTypes = {
+  label: _propTypes.default.string,
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object,
+  videoLength: _propTypes.default.number,
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = SplashButtonWithDetails;
+exports.default = _default;

package/lib/shared/VideoSplash/VideoSplash.js

@@ -0,0 +1,86 @@
+"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 _systemConstants = require("@telus-uds/system-constants");
+
+var _SplashButton = _interopRequireDefault(require("./SplashButton/SplashButton"));
+
+var _SplashButtonWithDetails = _interopRequireDefault(require("./SplashButtonWithDetails/SplashButtonWithDetails"));
+
+var _videoText = _interopRequireDefault(require("../../Video/videoText"));
+
+var _utils = require("../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const SplashBackground = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoSplash__SplashBackground",
+  componentId: "components-web__sc-1ejxt6-0"
+})(_ref => {
+  let {
+    videoPoster
+  } = _ref;
+  return {
+    backgroundImage: `url(${videoPoster})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: '100%',
+    // fixes vertical alignment on IE 11
+    cursor: 'pointer'
+  };
+});
+
+const VideoSplash = _ref2 => {
+  let {
+    poster,
+    videoLength,
+    simpleMode,
+    copy = 'en',
+    onClick,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _componentsBase.useViewport)();
+  const showDetails = !simpleMode && viewport !== _systemConstants.viewports.xs;
+  const label = _videoText.default[copy].watch;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SplashBackground, { ...selectProps(rest),
+    onClick: onClick,
+    videoPoster: poster,
+    children: showDetails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButtonWithDetails.default, {
+      videoLength: videoLength,
+      copy: copy,
+      label: label
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButton.default, {
+      videoLength: videoLength,
+      copy: copy
+    })
+  });
+};
+
+VideoSplash.propTypes = { ...selectedSystemPropTypes,
+  onClick: _propTypes.default.func,
+  poster: _propTypes.default.string,
+  videoLength: _propTypes.default.number.isRequired,
+  simpleMode: _propTypes.default.bool,
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = VideoSplash;
+exports.default = _default;

package/lib/shared/VideoSplash/helpers.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTimestamp = exports.getAriaLabel = void 0;
+
+var _videoText = _interopRequireDefault(require("../../Video/videoText"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const getTimestamp = (videoLength, copy) => {
+  const minutes = Math.floor(videoLength / 60);
+  const seconds = Math.ceil(videoLength % 60);
+  const minutesText = minutes > 0 ? `${minutes}min ` : '';
+  const secondsText = `${seconds}${copy === 'fr' ? 's' : 'sec'}`;
+  const timestamp = `${minutesText}${secondsText}`;
+  return {
+    minutes,
+    seconds,
+    timestamp
+  };
+};
+
+exports.getTimestamp = getTimestamp;
+
+const getAriaLabel = (timestamp, copy) => {
+  const {
+    minutes,
+    seconds
+  } = timestamp;
+  const text = _videoText.default[copy];
+  const minutesText = `${minutes} ${minutes !== 1 ? text.minutes : text.minute}`;
+  const secondsText = `${seconds} ${seconds !== 1 ? text.seconds : text.second}`;
+  return text.ariaLabel.replace('{minutes}', minutesText).replace('{seconds}', secondsText);
+};
+
+exports.getAriaLabel = getAriaLabel;

package/lib/utils/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "transformGradient", {
     return _transforms.transformGradient;
   }
 });
+Object.defineProperty(exports, "useOverlaidPosition", {
+  enumerable: true,
+  get: function () {
+    return _useOverlaidPosition.default;
+  }
+});
 Object.defineProperty(exports, "useTypographyTheme", {
   enumerable: true,
   get: function () {
@@ -52,4 +58,6 @@ var _media = _interopRequireDefault(require("./media"));
 
 var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
 
+var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }