@telus-uds/components-web 2.21.2 → 2.22.0

package/lib/Modal/Modal.js

@@ -1,146 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _componentsBase = require("@telus-uds/components-base");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ModalContent = _interopRequireDefault(require("./ModalContent"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Modal = _ref => {
-  let {
-    children,
-    isOpen,
-    onClose,
-    maxWidth,
-    onCancel = onClose,
-    onConfirm,
-    heading,
-    headingLevel,
-    subHeading,
-    subHeadingSize,
-    bodyText,
-    tokens,
-    variant = {},
-    confirmButtonText,
-    confirmButtonVariant,
-    cancelButtonText,
-    cancelButtonType,
-    ...nonContentProps
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Modal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    variant: variant,
-    maxWidth: maxWidth,
-    ...nonContentProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
-      tokens: tokens,
-      variant: variant,
-      onCancel: onCancel,
-      onConfirm: onConfirm,
-      heading: heading,
-      headingLevel: headingLevel,
-      subHeading: subHeading,
-      subHeadingSize: subHeadingSize,
-      bodyText: bodyText,
-      confirmButtonText: confirmButtonText,
-      confirmButtonVariant: confirmButtonVariant,
-      cancelButtonText: cancelButtonText,
-      cancelButtonType: cancelButtonType,
-      children: children
-    })
-  });
-};
-
-Modal.propTypes = {
-  children: _propTypes.default.node,
-  tokens: _propTypes.default.object,
-  variant: _propTypes.default.object,
-
-  /**
-   * If true, the modal overlay covers the page and the modal content is shown
-   */
-  isOpen: _propTypes.default.bool,
-
-  /**
-   * Function called on pressing the Modal close "x" button
-   */
-  onClose: _propTypes.default.func,
-
-  /**
-   * If true, Modal is rendered with the 'maxWidth' appearance applied.
-   * Use this for wider content, such as content with long headers.
-   */
-  maxWidth: _propTypes.default.bool,
-
-  /**
-   * Heading text shown prominently with heading semantic tags.
-   */
-  heading: _propTypes.default.string,
-
-  /**
-   * Stylistic size and semantic level of the modal heading
-   */
-  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
-
-  /**
-   * Short content rendered below the heading. If there is long body content that is scrollable,
-   * the subHeading sits above the scrollable area.
-   */
-  subHeading: _propTypes.default.string,
-
-  /**
-   * Short content rendered below the heading. If there is long body content that is scrollable,
-   * the subHeading sits above the scrollable area.
-   */
-  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * If the modal requires longer text, include it here. This text will become scrollable if it
-   * is too long for the allowed height of the modal.
-   */
-  bodyText: _propTypes.default.string,
-
-  /**
-   * Text for the button controlling the primary action of the modal.
-   */
-  confirmButtonText: _propTypes.default.string,
-
-  /**
-   * Button variant object to be passed through to Button to choose its visual style.
-   */
-  confirmButtonVariant: _propTypes.default.object,
-
-  /**
-   * Action on pressing the confirm button.
-   */
-  onConfirm: _propTypes.default.func,
-
-  /**
-   * Text for the optional cancel button provided if the user does not want to do the confirm action.
-   */
-  cancelButtonText: _propTypes.default.string,
-
-  /**
-   * Component to use for the cancel button (default: `TextButton`). Should accept similar props to `TextButton`.
-   */
-  cancelButtonType: _propTypes.default.elementType,
-
-  /**
-   * Action to perform on pressing the cancel button. Defaults to `onClose` action if undefined.
-   */
-  onCancel: _propTypes.default.func
-};
-var _default = Modal;
-exports.default = _default;

package/lib/Modal/ModalContent.js

@@ -1,203 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _componentsBase = require("@telus-uds/components-base");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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 StyledModalContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "ModalContent__StyledModalContent",
-  componentId: "components-web__sc-k40cwb-0"
-})(["display:flex;flex-direction:column;min-height:100%;"]);
-
-const StyledHeading = /*#__PURE__*/_styledComponents.default.header.withConfig({
-  displayName: "ModalContent__StyledHeading",
-  componentId: "components-web__sc-k40cwb-1"
-})(["display:flex;flex-direction:column;padding-right:", "px;"], _ref => {
-  let {
-    paddingRight
-  } = _ref;
-  return paddingRight;
-});
-
-const StyledSubHeading = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "ModalContent__StyledSubHeading",
-  componentId: "components-web__sc-k40cwb-2"
-})(["margin-top:", "px;"], _ref2 => {
-  let {
-    marginTop
-  } = _ref2;
-  return marginTop;
-});
-
-const StyledTextButtonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "ModalContent__StyledTextButtonContainer",
-  componentId: "components-web__sc-k40cwb-3"
-})({
-  display: 'flex'
-});
-
-const StyledFooter = /*#__PURE__*/_styledComponents.default.footer.withConfig({
-  displayName: "ModalContent__StyledFooter",
-  componentId: "components-web__sc-k40cwb-4"
-})(_ref3 => {
-  let {
-    hasBorder,
-    viewport,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    marginLeft,
-    marginRight,
-    borderColor,
-    gap
-  } = _ref3;
-  return {
-    display: 'flex',
-    flexDirection: viewport === 'xs' || viewport === 'sm' ? 'column' : 'row',
-    alignItems: 'center',
-    gap: `${gap}px`,
-    marginLeft: `calc(-1 * ${marginLeft}px)`,
-    marginRight: `calc(-1 * ${marginRight}px)`,
-    paddingLeft: `${paddingLeft}px`,
-    paddingRight: `${paddingRight}px`,
-    paddingTop: `${paddingTop}px`,
-    borderTop: hasBorder ? `1px solid ${borderColor}` : 'none'
-  };
-});
-
-const ModalContent = _ref4 => {
-  let {
-    heading,
-    headingLevel = 'h3',
-    subHeading,
-    subHeadingSize = 'medium',
-    bodyText,
-    confirmButtonText,
-    confirmButtonVariant = {
-      priority: 'high'
-    },
-    onConfirm,
-    tokens,
-    variant,
-    cancelButtonText,
-    cancelButtonType: CancelButton = _componentsBase.TextButton,
-    children,
-    onCancel
-  } = _ref4;
-  const {
-    headingColor,
-    cancelButtonColor,
-    ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('Modal', tokens, variant);
-  const [scrollContainerHeight, setScrollContainerHeight] = (0, _react.useState)(0);
-  const [scrollContentHeight, setScrollContentHeight] = (0, _react.useState)(0);
-  const viewport = (0, _componentsBase.useViewport)();
-
-  const handleContainerLayout = _ref5 => {
-    let {
-      nativeEvent: {
-        layout: {
-          height
-        }
-      }
-    } = _ref5;
-    return setScrollContainerHeight(height);
-  };
-
-  const onContentSizeChange = (_, height) => setScrollContentHeight(height);
-
-  const isContentOverflowing = scrollContentHeight > scrollContainerHeight;
-  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
-  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
-  const hasHeadingSection = Boolean(heading || subHeading);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledModalContent, {
-    children: [hasHeadingSection && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHeading, {
-      paddingRight: themeTokens.headingPaddingRight,
-      children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-        variant: {
-          size: headingLevel
-        },
-        tokens: {
-          color: headingColor
-        },
-        heading: headingLevel,
-        children: heading
-      }), subHeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSubHeading, {
-        marginTop: themeTokens.subHeadingMarginTop,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-          variant: {
-            size: subHeadingSize
-          },
-          children: subHeading
-        })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
-        space: 3
-      })]
-    }), bodyText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
-      scroll: {
-        onContentSizeChange,
-        showsVerticalScrollIndicator: true
-      },
-      onLayout: handleContainerLayout,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-        children: bodyText
-      })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFooter, { ...themeTokens,
-      hasBorder: isContentOverflowing,
-      viewport: viewport,
-      children: [hasConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
-        variant: confirmButtonVariant,
-        tokens: {
-          width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
-        },
-        onPress: onConfirm,
-        children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTextButtonContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
-          tokens: {
-            color: cancelButtonColor
-          },
-          onPress: onCancel,
-          children: cancelButtonText
-        })
-      }) : null]
-    })]
-  });
-};
-
-ModalContent.propTypes = {
-  tokens: _propTypes.default.object,
-  variant: _propTypes.default.object,
-  heading: _propTypes.default.string,
-  headingLevel: _propTypes.default.oneOf(['h3', 'h4']),
-  subHeading: _propTypes.default.string,
-  subHeadingSize: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  bodyText: _propTypes.default.string,
-  confirmButtonText: _propTypes.default.string,
-  confirmButtonVariant: _propTypes.default.object,
-  onConfirm: _propTypes.default.func,
-  cancelButtonText: _propTypes.default.string,
-  cancelButtonType: _propTypes.default.elementType,
-  // TODO: figure out a way of passing an icon to the TextButton
-  children: _propTypes.default.node,
-  onCancel: _propTypes.default.func
-};
-var _default = ModalContent;
-exports.default = _default;

package/lib/Modal/index.js

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

package/lib-module/Modal/Modal.js

@@ -1,132 +0,0 @@
-import React from 'react';
-import { Modal as BaseModal } from '@telus-uds/components-base';
-import PropTypes from 'prop-types';
-import ModalContent from './ModalContent';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Modal = _ref => {
-  let {
-    children,
-    isOpen,
-    onClose,
-    maxWidth,
-    onCancel = onClose,
-    onConfirm,
-    heading,
-    headingLevel,
-    subHeading,
-    subHeadingSize,
-    bodyText,
-    tokens,
-    variant = {},
-    confirmButtonText,
-    confirmButtonVariant,
-    cancelButtonText,
-    cancelButtonType,
-    ...nonContentProps
-  } = _ref;
-  return /*#__PURE__*/_jsx(BaseModal, {
-    isOpen: isOpen,
-    onClose: onClose,
-    variant: variant,
-    maxWidth: maxWidth,
-    ...nonContentProps,
-    children: /*#__PURE__*/_jsx(ModalContent, {
-      tokens: tokens,
-      variant: variant,
-      onCancel: onCancel,
-      onConfirm: onConfirm,
-      heading: heading,
-      headingLevel: headingLevel,
-      subHeading: subHeading,
-      subHeadingSize: subHeadingSize,
-      bodyText: bodyText,
-      confirmButtonText: confirmButtonText,
-      confirmButtonVariant: confirmButtonVariant,
-      cancelButtonText: cancelButtonText,
-      cancelButtonType: cancelButtonType,
-      children: children
-    })
-  });
-};
-
-Modal.propTypes = {
-  children: PropTypes.node,
-  tokens: PropTypes.object,
-  variant: PropTypes.object,
-
-  /**
-   * If true, the modal overlay covers the page and the modal content is shown
-   */
-  isOpen: PropTypes.bool,
-
-  /**
-   * Function called on pressing the Modal close "x" button
-   */
-  onClose: PropTypes.func,
-
-  /**
-   * If true, Modal is rendered with the 'maxWidth' appearance applied.
-   * Use this for wider content, such as content with long headers.
-   */
-  maxWidth: PropTypes.bool,
-
-  /**
-   * Heading text shown prominently with heading semantic tags.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * Stylistic size and semantic level of the modal heading
-   */
-  headingLevel: PropTypes.oneOf(['h3', 'h4']),
-
-  /**
-   * Short content rendered below the heading. If there is long body content that is scrollable,
-   * the subHeading sits above the scrollable area.
-   */
-  subHeading: PropTypes.string,
-
-  /**
-   * Short content rendered below the heading. If there is long body content that is scrollable,
-   * the subHeading sits above the scrollable area.
-   */
-  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-
-  /**
-   * If the modal requires longer text, include it here. This text will become scrollable if it
-   * is too long for the allowed height of the modal.
-   */
-  bodyText: PropTypes.string,
-
-  /**
-   * Text for the button controlling the primary action of the modal.
-   */
-  confirmButtonText: PropTypes.string,
-
-  /**
-   * Button variant object to be passed through to Button to choose its visual style.
-   */
-  confirmButtonVariant: PropTypes.object,
-
-  /**
-   * Action on pressing the confirm button.
-   */
-  onConfirm: PropTypes.func,
-
-  /**
-   * Text for the optional cancel button provided if the user does not want to do the confirm action.
-   */
-  cancelButtonText: PropTypes.string,
-
-  /**
-   * Component to use for the cancel button (default: `TextButton`). Should accept similar props to `TextButton`.
-   */
-  cancelButtonType: PropTypes.elementType,
-
-  /**
-   * Action to perform on pressing the cancel button. Defaults to `onClose` action if undefined.
-   */
-  onCancel: PropTypes.func
-};
-export default Modal;

package/lib-module/Modal/ModalContent.js

@@ -1,181 +0,0 @@
-import React, { useState } from 'react';
-import { Box, Button, Spacer, TextButton, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const StyledModalContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ModalContent__StyledModalContent",
-  componentId: "components-web__sc-k40cwb-0"
-})(["display:flex;flex-direction:column;min-height:100%;"]);
-const StyledHeading = /*#__PURE__*/styled.header.withConfig({
-  displayName: "ModalContent__StyledHeading",
-  componentId: "components-web__sc-k40cwb-1"
-})(["display:flex;flex-direction:column;padding-right:", "px;"], _ref => {
-  let {
-    paddingRight
-  } = _ref;
-  return paddingRight;
-});
-const StyledSubHeading = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ModalContent__StyledSubHeading",
-  componentId: "components-web__sc-k40cwb-2"
-})(["margin-top:", "px;"], _ref2 => {
-  let {
-    marginTop
-  } = _ref2;
-  return marginTop;
-});
-const StyledTextButtonContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ModalContent__StyledTextButtonContainer",
-  componentId: "components-web__sc-k40cwb-3"
-})({
-  display: 'flex'
-});
-const StyledFooter = /*#__PURE__*/styled.footer.withConfig({
-  displayName: "ModalContent__StyledFooter",
-  componentId: "components-web__sc-k40cwb-4"
-})(_ref3 => {
-  let {
-    hasBorder,
-    viewport,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    marginLeft,
-    marginRight,
-    borderColor,
-    gap
-  } = _ref3;
-  return {
-    display: 'flex',
-    flexDirection: viewport === 'xs' || viewport === 'sm' ? 'column' : 'row',
-    alignItems: 'center',
-    gap: `${gap}px`,
-    marginLeft: `calc(-1 * ${marginLeft}px)`,
-    marginRight: `calc(-1 * ${marginRight}px)`,
-    paddingLeft: `${paddingLeft}px`,
-    paddingRight: `${paddingRight}px`,
-    paddingTop: `${paddingTop}px`,
-    borderTop: hasBorder ? `1px solid ${borderColor}` : 'none'
-  };
-});
-
-const ModalContent = _ref4 => {
-  let {
-    heading,
-    headingLevel = 'h3',
-    subHeading,
-    subHeadingSize = 'medium',
-    bodyText,
-    confirmButtonText,
-    confirmButtonVariant = {
-      priority: 'high'
-    },
-    onConfirm,
-    tokens,
-    variant,
-    cancelButtonText,
-    cancelButtonType: CancelButton = TextButton,
-    children,
-    onCancel
-  } = _ref4;
-  const {
-    headingColor,
-    cancelButtonColor,
-    ...themeTokens
-  } = useThemeTokens('Modal', tokens, variant);
-  const [scrollContainerHeight, setScrollContainerHeight] = useState(0);
-  const [scrollContentHeight, setScrollContentHeight] = useState(0);
-  const viewport = useViewport();
-
-  const handleContainerLayout = _ref5 => {
-    let {
-      nativeEvent: {
-        layout: {
-          height
-        }
-      }
-    } = _ref5;
-    return setScrollContainerHeight(height);
-  };
-
-  const onContentSizeChange = (_, height) => setScrollContentHeight(height);
-
-  const isContentOverflowing = scrollContentHeight > scrollContainerHeight;
-  const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
-  const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
-  const hasHeadingSection = Boolean(heading || subHeading);
-  return /*#__PURE__*/_jsxs(StyledModalContent, {
-    children: [hasHeadingSection && /*#__PURE__*/_jsxs(StyledHeading, {
-      paddingRight: themeTokens.headingPaddingRight,
-      children: [heading && /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: headingLevel
-        },
-        tokens: {
-          color: headingColor
-        },
-        heading: headingLevel,
-        children: heading
-      }), subHeading && /*#__PURE__*/_jsx(StyledSubHeading, {
-        marginTop: themeTokens.subHeadingMarginTop,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: subHeadingSize
-          },
-          children: subHeading
-        })
-      }), Boolean(bodyText && hasHeadingSection) && /*#__PURE__*/_jsx(Spacer, {
-        space: 3
-      })]
-    }), bodyText && /*#__PURE__*/_jsx(Box, {
-      scroll: {
-        onContentSizeChange,
-        showsVerticalScrollIndicator: true
-      },
-      onLayout: handleContainerLayout,
-      children: /*#__PURE__*/_jsx(Typography, {
-        children: bodyText
-      })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(StyledFooter, { ...themeTokens,
-      hasBorder: isContentOverflowing,
-      viewport: viewport,
-      children: [hasConfirmButton && /*#__PURE__*/_jsx(Button, {
-        variant: confirmButtonVariant,
-        tokens: {
-          width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined
-        },
-        onPress: onConfirm,
-        children: confirmButtonText
-      }), hasCancelButton ? /*#__PURE__*/_jsx(StyledTextButtonContainer, {
-        children: /*#__PURE__*/_jsx(CancelButton, {
-          tokens: {
-            color: cancelButtonColor
-          },
-          onPress: onCancel,
-          children: cancelButtonText
-        })
-      }) : null]
-    })]
-  });
-};
-
-ModalContent.propTypes = {
-  tokens: PropTypes.object,
-  variant: PropTypes.object,
-  heading: PropTypes.string,
-  headingLevel: PropTypes.oneOf(['h3', 'h4']),
-  subHeading: PropTypes.string,
-  subHeadingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  bodyText: PropTypes.string,
-  confirmButtonText: PropTypes.string,
-  confirmButtonVariant: PropTypes.object,
-  onConfirm: PropTypes.func,
-  cancelButtonText: PropTypes.string,
-  cancelButtonType: PropTypes.elementType,
-  // TODO: figure out a way of passing an icon to the TextButton
-  children: PropTypes.node,
-  onCancel: PropTypes.func
-};
-export default ModalContent;

package/lib-module/Modal/index.js

@@ -1,2 +0,0 @@
-import Modal from './Modal';
-export default Modal;