@telus-uds/components-web 1.2.0 → 1.4.0

package/lib/Footnote/Footnote.js

@@ -0,0 +1,571 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _Close = _interopRequireDefault(require("../../__fixtures__/icons/Close"));
+
+var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
+
+var _utils = require("../utils");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+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 GlobalBodyScrollLock = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)({
+  'html, body': (0, _utils.media)().until('md').css({
+    overflow: 'hidden'
+  })
+});
+
+const StyledFootnote = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledFootnote",
+  componentId: "components-web__sc-1563bo5-0"
+})(_ref => {
+  let {
+    footnoteBackground,
+    isVisible,
+    footnoteBorderTop
+  } = _ref;
+  return {
+    position: 'fixed',
+    overflowY: 'scroll',
+    top: 0,
+    left: 0,
+    height: '100vh',
+    width: '100vw',
+    backgroundColor: footnoteBackground,
+    display: 'block',
+    boxShadow: '0 0 16px 0 rgba(0, 0, 0, 0.1)',
+    transform: 'translateY(100%)',
+    transition: 'transform 500ms ease-out',
+    '@media() (prefers-reduced-motion: reduce)': {
+      transition: 'none'
+    },
+    zIndex: 99999,
+    visibility: isVisible ? 'visible' : 'hidden',
+    ...(0, _utils.media)().from('md').css({
+      top: 'auto',
+      bottom: 0,
+      height: 'auto',
+      maxHeight: '50vh',
+      borderTop: footnoteBorderTop
+    })
+  };
+}, _ref2 => {
+  let {
+    isOpen
+  } = _ref2;
+
+  if (isOpen) {
+    return {
+      transform: 'translateY(0)'
+    };
+  }
+
+  return {};
+});
+
+const StyledFootnoteHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledFootnoteHeader",
+  componentId: "components-web__sc-1563bo5-1"
+})({
+  position: 'relative',
+  width: '100%'
+});
+
+const StyledHeader = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledHeader",
+  componentId: "components-web__sc-1563bo5-2"
+})(_ref3 => {
+  let {
+    headerMargin
+  } = _ref3;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    margin: headerMargin
+  };
+});
+
+const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledFootnoteBody",
+  componentId: "components-web__sc-1563bo5-3"
+})({
+  overflow: 'auto',
+  transition: 'height 300ms ease-out, opacity 200ms ease-out',
+  transform: 'translateZ(0)',
+  '@media() (prefers-reduced-motion: reduce)': {
+    transition: 'height 1ms ease-out, opacity 1ms ease-out'
+  }
+}, _ref4 => {
+  let {
+    footnoteBodyBackground,
+    footnoteBodyPadding
+  } = _ref4;
+  return {
+    backgroundColor: footnoteBodyBackground,
+    padding: footnoteBodyPadding
+  };
+}, _ref5 => {
+  let {
+    headerHeight
+  } = _ref5;
+  return {
+    maxHeight: `calc(100vh - ${headerHeight}px)`,
+    ...(0, _utils.media)().from('md').css({
+      maxHeight: `calc(50vh - ${headerHeight}px)`
+    })
+  };
+}, _ref6 => {
+  let {
+    bodyHeight,
+    isTextVisible
+  } = _ref6;
+  return {
+    height: bodyHeight,
+    opacity: isTextVisible ? 1 : 0
+  };
+});
+
+const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "Footnote__List",
+  componentId: "components-web__sc-1563bo5-4"
+})(_ref7 => {
+  let {
+    listPaddingLeft
+  } = _ref7;
+  return {
+    listStylePosition: 'outside',
+    paddingLeft: listPaddingLeft
+  };
+});
+const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
+  displayName: "Footnote__ListItem",
+  componentId: "components-web__sc-1563bo5-5"
+})(_ref8 => {
+  let {
+    listItemMarkerFontSize,
+    listItemMarkerLineHeight,
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
+  } = _ref8;
+  return {
+    display: 'list-item',
+    '&::marker': {
+      fontFamily: 'HelveticaNow400normal',
+      fontSize: listItemMarkerFontSize,
+      lineHeight: listItemMarkerLineHeight,
+      textAlign: 'end !important'
+    },
+    color: listItemColor,
+    fontFamily: 'HelveticaNow400normal',
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft
+  };
+});
+
+const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "Footnote__CloseButton",
+  componentId: "components-web__sc-1563bo5-6"
+})(_ref9 => {
+  let {
+    closeButtonBorder,
+    closeButtonHeight,
+    closeButtonMargin,
+    closeButtonWidth
+  } = _ref9;
+  return {
+    alignItems: 'center',
+    borderRadius: '50%',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    border: closeButtonBorder,
+    height: closeButtonHeight,
+    margin: closeButtonMargin,
+    width: closeButtonWidth
+  };
+});
+
+const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__ContentContainer",
+  componentId: "components-web__sc-1563bo5-7"
+})({
+  'margin-left': 'auto',
+  'margin-right': 'auto',
+  left: 0,
+  right: 0
+}, _ref10 => {
+  let {
+    maxWidth
+  } = _ref10;
+  return {
+    width: maxWidth
+  };
+});
+
+const usePrevious = value => {
+  const ref = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    ref.current = value;
+  });
+
+  if (ref.current) {
+    return ref.current;
+  }
+
+  return {};
+};
+/**
+ * Use `Footnote` to display a single legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Use `Footnote` to display a single legal statement
+ * - Display on top of all UI, including other sticky elements such as Cart Summary
+ * - Dismiss by clicking on the close button, clicking anywhere outside of the `Footnote`, or by pressing the ESC key
+ * - Responsive display based on breakpoints
+ * - Use copy to set language, ‘en’ for English or ‘fr’ for French
+ *
+ * ## Accessibility requirements
+ *
+ * - Only one instance of `Footnote` should display at a time
+ * - Place `Footnote` as the last element in the body or main
+ * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
+ * - When `Footnote` is closed, focus must return to the initiating element
+ */
+
+
+const Footnote = props => {
+  var _theme$themeOptions;
+
+  const {
+    copy,
+    number,
+    content,
+    onClose,
+    isOpen,
+    tokens,
+    variant = {},
+    ...rest
+  } = props;
+  const {
+    footnoteBackground,
+    footnoteBorderTopSizeMd,
+    footnoteBorderColorMd,
+    headerMargin,
+    footnoteBodyBackground,
+    footnoteBodyPaddingLeft,
+    footnoteBodyPaddingRight,
+    footnoteBodyPaddingTop,
+    footnoteBodyPaddingBottom,
+    listPaddingLeft,
+    listItemMarkerFontSize,
+    listItemMarkerLineHeight,
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft,
+    closeButtonBorderSize,
+    closeButtonBorderColor,
+    closeButtonHeight,
+    closeButtonMarginTop,
+    closeButtonMarginLeft,
+    closeButtonMarginRight,
+    closeButtonMarginBottom,
+    closeButtonWidth,
+    closeButtonIconSize
+  } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant);
+  const footnoteRef = (0, _react.useRef)(null);
+  const headerRef = (0, _react.useRef)(null);
+  const bodyRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
+  const headingRef = (0, _react.useRef)(null);
+  const [data, setData] = (0, _react.useState)({
+    content: null,
+    number: null
+  });
+  const [headerHeight, setHeaderHeight] = (0, _react.useState)('auto');
+  const [bodyHeight, setBodyHeight] = (0, _react.useState)('auto');
+  const [isVisible, setIsVisible] = (0, _react.useState)(false);
+  const [isTextVisible, setIsTextVisible] = (0, _react.useState)(true);
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const prevProps = usePrevious(props);
+  const theme = (0, _componentsBase.useTheme)();
+  const maxWidth = (0, _componentsBase.useResponsiveProp)((_theme$themeOptions = theme.themeOptions) === null || _theme$themeOptions === void 0 ? void 0 : _theme$themeOptions.contentMaxWidth);
+  const closeFootnote = (0, _react.useCallback)((event, options) => {
+    onClose(event, options);
+  }, [onClose]); // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
+
+  const handleClose = (0, _react.useCallback)(event => {
+    var _footnoteRef$current, _footnoteRef$current2;
+
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        closeFootnote(event, {
+          returnFocus: true
+        });
+      }
+    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current = footnoteRef.current) !== null && _footnoteRef$current !== void 0 && _footnoteRef$current.contains(event.target)) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
+      closeFootnote(event, {
+        returnFocus: false
+      });
+    } else if (event.type === 'touchstart' && footnoteRef !== null && footnoteRef !== void 0 && footnoteRef.current && event.touches[0].target && !(footnoteRef !== null && footnoteRef !== void 0 && (_footnoteRef$current2 = footnoteRef.current) !== null && _footnoteRef$current2 !== void 0 && _footnoteRef$current2.contains(event.touches[0].target)) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
+      closeFootnote(event, {
+        returnFocus: false
+      });
+    }
+  }, [closeFootnote]);
+
+  const saveCurrentHeight = () => {
+    const oldHeight = listRef.current.offsetHeight;
+    setBodyHeight(oldHeight);
+  };
+
+  const focusHeading = () => {
+    if (Boolean(content) && isVisible && headingRef && headingRef.current !== null) {
+      headingRef.current.focus();
+    }
+  };
+
+  const handleStyledFootnoteTransitionEnd = event => {
+    if (event.propertyName === 'transform' && !isOpen) {
+      setIsVisible(false);
+    } else {
+      focusHeading();
+    }
+  };
+
+  const handleTransitionEnd = event => {
+    event.persist();
+
+    if (event.propertyName === 'opacity' && !isTextVisible) {
+      setData({
+        content,
+        number
+      });
+
+      if (bodyHeight !== listRef.current.offsetHeight) {
+        // Set new height
+        setBodyHeight(listRef.current.offsetHeight);
+      } else {
+        setIsTextVisible(true);
+      }
+    } else {
+      setBodyHeight(listRef.current.offsetHeight);
+    }
+
+    if (event.propertyName === 'height' && !isTextVisible) {
+      setIsTextVisible(true);
+    }
+  };
+
+  const resetFootnote = () => {
+    // Reset footnote state if closed
+    if (!isOpen) {
+      setBodyHeight('auto');
+      setIsTextVisible(true);
+    }
+  }; // Set height of header on mount
+
+
+  (0, _react.useEffect)(() => {
+    var _headerRef$current;
+
+    setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
+  }, []);
+
+  const preventDefault = event => {
+    if (!bodyRef.current.contains(event.touches[0].target)) {
+      event.preventDefault();
+    }
+  }; // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
+
+
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      document.addEventListener('mousedown', handleClose);
+      window.addEventListener('click', handleClose);
+      window.addEventListener('keydown', handleClose);
+      window.addEventListener('touchstart', handleClose);
+      window.addEventListener('touchmove', preventDefault, {
+        passive: false
+      });
+    }
+
+    return () => {
+      if (isOpen) {
+        document.addEventListener('mousedown', handleClose);
+        window.removeEventListener('click', handleClose);
+        window.removeEventListener('keydown', handleClose);
+        window.removeEventListener('touchstart', handleClose);
+        window.removeEventListener('touchmove', preventDefault);
+      }
+    };
+  }, [handleClose, isOpen]); // Set data if opening a new footnote
+
+  (0, _react.useEffect)(() => {
+    if (isOpen && !prevProps.isOpen) {
+      setData({
+        content,
+        number
+      });
+    }
+  }, [isOpen, prevProps.isOpen, content, number]);
+  (0, _react.useEffect)(() => {
+    if (isOpen && prevProps.isOpen && number !== prevProps.number) {
+      saveCurrentHeight();
+      setIsTextVisible(false);
+    }
+  }, [number, isOpen, prevProps.isOpen, prevProps.number]); // Reset footnote on close
+
+  (0, _react.useEffect)(resetFootnote, [isOpen]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...selectProps(rest),
+      children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
+        ref: footnoteRef,
+        isOpen: isOpen,
+        isVisible: isVisible,
+        onTransitionEnd: handleStyledFootnoteTransitionEnd,
+        tabIndex: 0,
+        footnoteBackground: footnoteBackground,
+        footnoteBorderTop: `${footnoteBorderTopSizeMd}px solid ${footnoteBorderColorMd}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
+          maxWidth: maxWidth,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteHeader, {
+            ref: headerRef,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
+              ref: headingRef,
+              headerMargin: headerMargin,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+                block: true,
+                heading: true,
+                tabIndex: -1,
+                variant: {
+                  size: 'h4'
+                },
+                children: getCopy('heading')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+                closeButtonBorder: `${closeButtonBorderSize}px solid ${closeButtonBorderColor}`,
+                closeButtonWidth: `${closeButtonWidth}px`,
+                closeButtonHeight: `${closeButtonHeight}px`,
+                closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
+                onClick: event => {
+                  closeFootnote(event, {
+                    returnFocus: true
+                  });
+                },
+                "aria-label": getCopy('close'),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+                  icon: _Close.default,
+                  tokens: {
+                    size: `${closeButtonIconSize}px`
+                  }
+                })
+              })]
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteBody, {
+            ref: bodyRef,
+            bodyHeight: bodyHeight,
+            headerHeight: headerHeight,
+            isTextVisible: isTextVisible,
+            onTransitionEnd: handleTransitionEnd,
+            maxWidth: theme.contentMaxWidth,
+            footnoteBodyBackground: footnoteBodyBackground,
+            footnoteBodyPadding: `${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`,
+            children: data.number && data.content && /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+              start: data.number,
+              ref: listRef,
+              listPaddingLeft: listPaddingLeft,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+                listItemMarkerFontSize: listItemMarkerFontSize,
+                listItemMarkerLineHeight: listItemMarkerLineHeight,
+                listItemColor: listItemColor,
+                listItemFontSize: listItemFontSize,
+                listItemLineHeight: listItemLineHeight,
+                listItemPaddingLeft: listItemPaddingLeft,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+                  children: (0, _utils.renderStructuredContent)(data.content)
+                })
+              })
+            })
+          })]
+        })
+      })]
+    })
+  });
+};
+
+const copyShape = _propTypes.default.shape({
+  close: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.string.isRequired
+});
+
+Footnote.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The content.
+   */
+  content: _propTypes.default.string,
+
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   * To provide your own, pass a JSON object with the keys `heading` and `close`.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), copyShape]),
+
+  /**
+   * A boolean flag used hide or show the `Footnote`. Set to `true` to open the `Footnote`.
+   */
+  isOpen: _propTypes.default.bool,
+
+  /**
+   * The number, must match the number of the `FootnoteLink` that initiated the `Footnote`.
+   */
+  number: _propTypes.default.number,
+
+  /**
+   * A callback function to handle the closing of the footnote.
+   *
+   * @param {SyntheticEvent} event The React `SyntheticEvent`
+   * @param {Object} options Custom options
+   * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
+   */
+  onClose: _propTypes.default.func.isRequired
+};
+Footnote.defaultProps = {
+  isOpen: false,
+  number: undefined,
+  content: undefined,
+  copy: 'en'
+};
+var _default = Footnote;
+exports.default = _default;