@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Footnote/Footnote.js

@@ -0,0 +1,637 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
+var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const viewportBreakpoint = 1440;
+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,
+    isScrollable,
+    isMobileFullScreen
+  } = _ref;
+  return {
+    position: 'fixed',
+    overflowY: isVisible && isScrollable ? 'scroll' : 'hidden',
+    top: 0,
+    left: window.innerWidth >= viewportBreakpoint ? '50%' : 0,
+    height: '100vh',
+    width: '100vw',
+    backgroundColor: footnoteBackground,
+    display: 'block',
+    transform: 'translateY(100%)',
+    translate: window.innerWidth >= viewportBreakpoint ? '-50%' : '',
+    transition: 'transform 500ms ease-out',
+    '@media() (prefers-reduced-motion: reduce)': {
+      transition: 'none'
+    },
+    zIndex: 99999,
+    visibility: isVisible ? 'visible' : 'hidden',
+    ...(0, _utils.media)().from(isMobileFullScreen ? 'md' : 'xs').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 {
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom
+  } = _ref3;
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingTop: footnoteHeaderPaddingTop,
+    paddingBottom: footnoteHeaderPaddingBottom,
+    paddingRight: footnoteHeaderPaddingRight,
+    paddingLeft: footnoteHeaderPaddingLeft
+  };
+});
+const StyledFootnoteBody = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledFootnoteBody",
+  componentId: "components-web__sc-1563bo5-3"
+})(_ref4 => {
+  let {
+    footnoteBodyBackground,
+    footnoteBodyPadding,
+    headerHeight,
+    bodyHeight,
+    isTextVisible
+  } = _ref4;
+  return {
+    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'
+    },
+    backgroundColor: footnoteBodyBackground,
+    padding: footnoteBodyPadding,
+    maxHeight: `calc(100vh - ${headerHeight}px)`,
+    ...(0, _utils.media)().from('md').css({
+      maxHeight: `calc(50vh - ${headerHeight}px)`
+    }),
+    height: bodyHeight,
+    opacity: isTextVisible ? 1 : 0
+  };
+});
+const List = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "Footnote__List",
+  componentId: "components-web__sc-1563bo5-4"
+})(_ref5 => {
+  let {
+    listPaddingLeft
+  } = _ref5;
+  return {
+    listStylePosition: 'outside',
+    paddingLeft: listPaddingLeft
+  };
+});
+const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
+  displayName: "Footnote__ListItem",
+  componentId: "components-web__sc-1563bo5-5"
+})(_ref6 => {
+  let {
+    listItemMarkerFontSize,
+    listItemMarkerLineHeight,
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
+  } = _ref6;
+  return {
+    display: 'list-item',
+    '&::marker': {
+      fontFamily: 'HNforTELUSSA400normal',
+      fontSize: listItemMarkerFontSize,
+      lineHeight: listItemMarkerLineHeight,
+      textAlign: 'end !important'
+    },
+    color: listItemColor,
+    fontFamily: 'HNforTELUSSA400normal',
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft
+  };
+});
+const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "Footnote__CloseButton",
+  componentId: "components-web__sc-1563bo5-6"
+})(_ref7 => {
+  let {
+    closeButtonBorder,
+    closeButtonHeight,
+    closeButtonBackgroundColor,
+    closeButtonMargin,
+    closeButtonWidth
+  } = _ref7;
+  return {
+    alignItems: 'center',
+    borderRadius: '50%',
+    cursor: 'pointer',
+    display: 'flex',
+    justifyContent: 'center',
+    backgroundColor: closeButtonBackgroundColor,
+    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,
+  maxWidth: '1200px'
+}, _ref8 => {
+  let {
+    maxWidth
+  } = _ref8;
+  return {
+    width: maxWidth
+  };
+});
+const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledCustomContentContainer",
+  componentId: "components-web__sc-1563bo5-8"
+})(_ref9 => {
+  let {
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
+  } = _ref9;
+  return {
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
+    fontFamily: 'HNforTELUSSA400normal'
+  };
+});
+const usePrevious = value => {
+  const ref = _react.default.useRef();
+  _react.default.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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    copy = 'en',
+    number,
+    content,
+    onClose,
+    isOpen = false,
+    tokens,
+    variant = {},
+    isMobileFullScreen = true,
+    dictionary = _dictionary.default,
+    ...rest
+  } = props;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    footnoteBackground,
+    footnoteBorderTopSizeMd,
+    footnoteBorderColorMd,
+    headerMargin,
+    footnoteBodyBackground,
+    footnoteBodyPaddingLeft,
+    footnoteBodyPaddingRight,
+    footnoteBodyPaddingTop,
+    footnoteBodyPaddingBottom,
+    footnoteHeaderPaddingLeft,
+    footnoteHeaderPaddingRight,
+    footnoteHeaderPaddingTop,
+    footnoteHeaderPaddingBottom,
+    headerLineHeight,
+    headerFontSize,
+    listPaddingLeft,
+    listItemMarkerFontSize,
+    listItemMarkerLineHeight,
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft,
+    closeButtonBorderSize,
+    closeButtonBorderColor,
+    closeButtonBackgroundColor,
+    closeButtonHeight,
+    closeButtonMarginTop,
+    closeButtonMarginLeft,
+    closeButtonMarginRight,
+    closeButtonMarginBottom,
+    closeButtonWidth,
+    closeButtonIconSize,
+    closeIcon
+  } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant, {
+    viewport
+  });
+  const footnoteRef = _react.default.useRef(null);
+  const headerRef = _react.default.useRef(null);
+  const bodyRef = _react.default.useRef(null);
+  const contentRef = _react.default.useRef(null);
+  const closeButtonRef = _react.default.useRef(null);
+  const [data, setData] = _react.default.useState({
+    content: null,
+    number: null
+  });
+  const [headerHeight, setHeaderHeight] = _react.default.useState('auto');
+  const [bodyHeight, setBodyHeight] = _react.default.useState('auto');
+  const [isVisible, setIsVisible] = _react.default.useState(false);
+  const [isTextVisible, setIsTextVisible] = _react.default.useState(true);
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary,
+    copy
+  });
+  const prevProps = usePrevious(props);
+  const theme = (0, _componentsBase.useTheme)();
+  const maxWidth = (0, _componentsBase.useResponsiveProp)(theme.themeOptions?.contentMaxWidth);
+  const [isScrollable, setIsScrollable] = _react.default.useState(false);
+  const closeFootnote = _react.default.useCallback((event, options) => {
+    onClose(event, options);
+  }, [onClose]);
+
+  /**
+   * When listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
+   * When the event type is a 'keydonw' and the event key is a 'Tab', using a 'querySelectorAll we obtain all
+   * the interactive elements within the footnote, we order and save the first and the last,
+   * if the footnote is active the focus will be inside the footnote until it is closed,
+   * if there are no interactive elements the focus will remain inside the close button.
+   */
+  const manageFootnoteFocusAndClose = _react.default.useCallback(event => {
+    if (!isVisible) {
+      return;
+    }
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        closeFootnote(event, {
+          returnFocus: true
+        });
+      } else if (event.key === 'Tab') {
+        const focusableElements = Array.from(footnoteRef.current.querySelectorAll('*')).filter(_utils.isElementFocusable);
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey && document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        } else if (!event.shiftKey && document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    } else if ((event.type === 'click' || event.type === 'mousedown') && footnoteRef?.current && event.target && !footnoteRef?.current?.contains(event.target) && event.target.getAttribute('data-tds-id') !== 'footnote-link') {
+      closeFootnote(event, {
+        returnFocus: false
+      });
+    } else if (event.type === 'touchstart' && footnoteRef?.current && event.touches[0].target && !footnoteRef?.current?.contains(event.touches[0].target) && event.touches[0].target.getAttribute('data-tds-id') !== 'footnote-link') {
+      closeFootnote(event, {
+        returnFocus: false
+      });
+    }
+  }, [closeFootnote, isVisible]);
+  const saveCurrentHeight = () => {
+    const oldHeight = contentRef.current.offsetHeight;
+    setBodyHeight(oldHeight);
+  };
+  const focusHeading = () => {
+    if (Boolean(content) && isVisible && closeButtonRef && closeButtonRef.current !== null) {
+      closeButtonRef.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 !== contentRef.current.offsetHeight) {
+        // Set new height
+        setBodyHeight(contentRef.current.offsetHeight);
+      } else {
+        setIsTextVisible(true);
+      }
+    } else {
+      setBodyHeight(contentRef.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
+  _react.default.useEffect(() => {
+    setHeaderHeight(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
+  _react.default.useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      document.addEventListener('mousedown', manageFootnoteFocusAndClose);
+      window.addEventListener('click', manageFootnoteFocusAndClose);
+      window.addEventListener('keydown', manageFootnoteFocusAndClose);
+      window.addEventListener('touchstart', manageFootnoteFocusAndClose);
+      window.addEventListener('touchmove', preventDefault, {
+        passive: false
+      });
+    }
+    return () => {
+      if (isOpen) {
+        document.removeEventListener('mousedown', manageFootnoteFocusAndClose);
+        window.removeEventListener('click', manageFootnoteFocusAndClose);
+        window.removeEventListener('keydown', manageFootnoteFocusAndClose);
+        window.removeEventListener('touchstart', manageFootnoteFocusAndClose);
+        window.removeEventListener('touchmove', preventDefault);
+      }
+    };
+  }, [manageFootnoteFocusAndClose, isOpen]);
+
+  // Set data if opening a new footnote
+  _react.default.useEffect(() => {
+    if (isOpen && !prevProps.isOpen) {
+      setData({
+        content,
+        number
+      });
+    }
+  }, [isOpen, prevProps.isOpen, content, number]);
+  _react.default.useEffect(() => {
+    if (isOpen && prevProps.isOpen && number !== prevProps.number) {
+      saveCurrentHeight();
+      setIsTextVisible(false);
+    }
+  }, [number, isOpen, prevProps.isOpen, prevProps.number]);
+
+  // Reset footnote on close
+  _react.default.useEffect(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = _react.default.useCallback(() => {
+    if (!data.number || !data.content) {
+      return null;
+    }
+    if (/*#__PURE__*/_react.default.isValidElement(data.content)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
+        ref: contentRef,
+        children: data.content
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+      start: data.number,
+      ref: contentRef,
+      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, {
+          tokens: {
+            fontSize: listItemFontSize,
+            lineHeight: listItemLineHeight
+          },
+          children: (0, _utils.renderStructuredContent)(data.content)
+        })
+      })
+    });
+  }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
+  const checkIfScrollable = _react.default.useCallback(() => {
+    const footnoteElement = footnoteRef.current;
+    if (footnoteElement) {
+      const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
+      const contentHeight = contentRef.current ? contentRef.current.offsetHeight : 0;
+      setIsScrollable(contentHeight > footnoteViewportHeight * 0.5);
+    }
+  }, [contentRef, setIsScrollable]);
+  _react.default.useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        checkIfScrollable();
+      }, 100);
+    }
+  }, [isOpen, checkIfScrollable]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ...selectProps(rest),
+      ref: ref,
+      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}`,
+        isScrollable: isScrollable,
+        isMobileFullScreen: isMobileFullScreen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
+          maxWidth: maxWidth,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnoteHeader, {
+            ref: headerRef,
+            viewport: viewport,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeader, {
+              footnoteHeaderPaddingLeft: footnoteHeaderPaddingLeft,
+              footnoteHeaderPaddingRight: footnoteHeaderPaddingRight,
+              footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
+              footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
+              headerMargin: headerMargin,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+                tokens: {
+                  fontSize: headerFontSize,
+                  lineHeight: headerLineHeight
+                },
+                variant: {
+                  size: 'h4'
+                },
+                children: getCopy('heading')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+                ref: closeButtonRef,
+                closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
+                closeButtonWidth: `${closeButtonWidth}px`,
+                closeButtonHeight: `${closeButtonHeight}px`,
+                closeButtonBackgroundColor: closeButtonBackgroundColor,
+                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: closeIcon,
+                  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: getFootnoteBodyContent()
+          })]
+        })
+      })]
+    })
+  });
+});
+Footnote.displayName = 'Footnote';
+const copyShape = _propTypes.default.shape({
+  close: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.string.isRequired
+});
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  a11yLabel: _propTypes.default.string.isRequired,
+  close: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.string.isRequired
+});
+Footnote.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Footnote'),
+  /**
+   * The content.
+   */
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  /**
+   * 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,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * A boolean flag used to disable isMobileFullScreen of Footnote for mobile view
+   */
+  isMobileFullScreen: _propTypes.default.bool
+};
+var _default = exports.default = Footnote;