@telus-uds/components-web 1.7.0 → 1.9.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 }; }

package/lib/utils/useOverlaidPosition.js

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TODO: add react-native as a peer dep and support native apps too.
+// That requires some fiddling with Allium repo storybook config, babel, etc,
+// unless ADS gets merged back into UDS monorepo.
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = (0, _react.useRef)(null);
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = (0, _react.useRef)(null);
+  const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
+  const onTargetLayout = (0, _react.useCallback)(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  (0, _react.useEffect)(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+        // React Native <0.65.0
+        _Dimensions.default.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: _Dimensions.default.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+var _default = useOverlaidPosition;
+exports.default = _default;