@telus-uds/components-web 2.21.1 → 2.22.0

package/src/Modal/Modal.jsx

@@ -1,121 +0,0 @@
-import React from 'react'
-import { Modal as BaseModal } from '@telus-uds/components-base'
-import PropTypes from 'prop-types'
-import ModalContent from './ModalContent'
-
-const Modal = ({
-  children,
-  isOpen,
-  onClose,
-  maxWidth,
-  onCancel = onClose,
-  onConfirm,
-  heading,
-  headingLevel,
-  subHeading,
-  subHeadingSize,
-  bodyText,
-  tokens,
-  variant = {},
-  confirmButtonText,
-  confirmButtonVariant,
-  cancelButtonText,
-  cancelButtonType,
-  ...nonContentProps
-}) => {
-  return (
-    <BaseModal
-      isOpen={isOpen}
-      onClose={onClose}
-      variant={variant}
-      maxWidth={maxWidth}
-      {...nonContentProps}
-    >
-      <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}
-      </ModalContent>
-    </BaseModal>
-  )
-}
-
-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/src/Modal/ModalContent.jsx

@@ -1,167 +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'
-
-const StyledModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-`
-
-const StyledHeading = styled.header`
-  display: flex;
-  flex-direction: column;
-  padding-right: ${({ paddingRight }) => paddingRight}px;
-`
-
-const StyledSubHeading = styled.div`
-  margin-top: ${({ marginTop }) => marginTop}px;
-`
-
-const StyledTextButtonContainer = styled.div({
-  display: 'flex'
-})
-
-const StyledFooter = styled.footer(
-  ({
-    hasBorder,
-    viewport,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    marginLeft,
-    marginRight,
-    borderColor,
-    gap
-  }) => ({
-    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 = ({
-  heading,
-  headingLevel = 'h3',
-  subHeading,
-  subHeadingSize = 'medium',
-  bodyText,
-  confirmButtonText,
-  confirmButtonVariant = { priority: 'high' },
-  onConfirm,
-  tokens,
-  variant,
-  cancelButtonText,
-  cancelButtonType: CancelButton = TextButton,
-  children,
-  onCancel
-}) => {
-  const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
-    'Modal',
-    tokens,
-    variant
-  )
-  const [scrollContainerHeight, setScrollContainerHeight] = useState(0)
-  const [scrollContentHeight, setScrollContentHeight] = useState(0)
-  const viewport = useViewport()
-
-  const handleContainerLayout = ({
-    nativeEvent: {
-      layout: { height }
-    }
-  }) => 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 (
-    <StyledModalContent>
-      {hasHeadingSection && (
-        <StyledHeading paddingRight={themeTokens.headingPaddingRight}>
-          {heading && (
-            <Typography
-              variant={{ size: headingLevel }}
-              tokens={{ color: headingColor }}
-              heading={headingLevel}
-            >
-              {heading}
-            </Typography>
-          )}
-          {subHeading && (
-            <StyledSubHeading marginTop={themeTokens.subHeadingMarginTop}>
-              <Typography variant={{ size: subHeadingSize }}>{subHeading}</Typography>
-            </StyledSubHeading>
-          )}
-          {Boolean(bodyText && hasHeadingSection) && <Spacer space={3} />}
-        </StyledHeading>
-      )}
-      {bodyText && (
-        <Box
-          scroll={{ onContentSizeChange, showsVerticalScrollIndicator: true }}
-          onLayout={handleContainerLayout}
-        >
-          <Typography>{bodyText}</Typography>
-        </Box>
-      )}
-      {children}
-      {(hasConfirmButton || hasCancelButton) && (
-        <StyledFooter {...themeTokens} hasBorder={isContentOverflowing} viewport={viewport}>
-          {hasConfirmButton && (
-            <Button
-              variant={confirmButtonVariant}
-              tokens={{ width: viewport === 'xs' || viewport === 'sm' ? '100%' : undefined }}
-              onPress={onConfirm}
-            >
-              {confirmButtonText}
-            </Button>
-          )}
-          {hasCancelButton ? (
-            <StyledTextButtonContainer>
-              <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
-                {cancelButtonText}
-              </CancelButton>
-            </StyledTextButtonContainer>
-          ) : null}
-        </StyledFooter>
-      )}
-    </StyledModalContent>
-  )
-}
-
-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/src/Modal/index.js

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