@telus-uds/components-web 1.4.0 → 1.6.0

package/lib-module/Modal/ModalContent.js

@@ -0,0 +1,174 @@
+/* eslint-disable react/jsx-filename-extension */
+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 StyledFooter = /*#__PURE__*/styled.footer.withConfig({
+  displayName: "ModalContent__StyledFooter",
+  componentId: "components-web__sc-k40cwb-3"
+})(_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,
+    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
+      })
+    }), (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
+      }), /*#__PURE__*/_jsx("div", {
+        children: hasCancelButton && /*#__PURE__*/_jsx(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
+      })]
+    })]
+  });
+};
+
+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
+  onCancel: PropTypes.func
+};
+export default ModalContent;

package/lib-module/Modal/index.js

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

package/lib-module/Paragraph/Paragraph.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs, useTypographyTheme } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Paragraph__StyledParagraph",
+  componentId: "components-web__sc-1bg9r8p-0"
+})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
+  let {
+    align
+  } = _ref;
+  return align ? `text-align: ${align};` : '';
+}, _ref2 => {
+  let {
+    linesBetween
+  } = _ref2;
+  return `
+    margin-block-start: ${linesBetween}em;
+    margin-block-end: ${linesBetween}em;
+  `;
+});
+/**
+* Block text as an HTML ```<p>``` element.
+	*
+	* ##Usage criteria
+	*
+	* - All body text should be contained in a **Paragraph**, regardless of length.
+	* - If the Paragraph is on a dark background, variant **{ invert: true }** must be used to maintain sufficient colour
+	contrast.
+	* - All Allium Typography variants other than header size variants are supported.
+	*/
+
+const Paragraph = _ref3 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    align,
+    linesBetween = 1,
+    ...rest
+  } = _ref3;
+  const style = useTypographyTheme(variant, tokens);
+  return /*#__PURE__*/_jsx(StyledParagraph, {
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Paragraph.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  testID: PropTypes.string,
+
+  /**
+   * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
+   * 'justify' should be avoided as it usually reduces ease of reading.
+   */
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+
+  /**
+   * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
+   * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
+   * @default 1
+   */
+  linesBetween: PropTypes.number,
+
+  /**
+   * Paragraph takes the same tokens overrides as Typography
+   */
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+
+  /**
+   * Paragraph takes any of Typography's theme variants except for header sizes
+   */
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf(['micro', 'small', 'large'])
+  })
+};
+export default Paragraph;

package/lib-module/Paragraph/index.js

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

package/lib-module/Table/Body.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Body = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("tbody", {
+    children: children
+  });
+};
+
+Body.propTypes = {
+  children: PropTypes.node
+};
+export default Body;

package/lib-module/Table/Cell.js

@@ -0,0 +1,176 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { Typography, useThemeTokens } from '@telus-uds/components-base';
+import { useTableContext } from './Table';
+import { jsx as _jsx } from "react/jsx-runtime";
+const stickyStyles = /*#__PURE__*/css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);&::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], _ref => {
+  let {
+    cellStickyShadow
+  } = _ref;
+  return cellStickyShadow;
+});
+const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
+  let {
+    isSticky,
+    cellBoxShadowColor,
+    align,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingBottom,
+    cellPaddingLeft
+  } = _ref2;
+  return css(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+});
+const StyledHeading = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Cell__StyledHeading",
+  componentId: "components-web__sc-ltgfic-0"
+})(["", ";", ""], sharedStyles, _ref3 => {
+  let {
+    cellHeadingBackground,
+    cellHeadingBoxShadowColor
+  } = _ref3;
+  return `
+  background-color: ${cellHeadingBackground};
+  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
+});
+const StyledSubHeading = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Cell__StyledSubHeading",
+  componentId: "components-web__sc-ltgfic-1"
+})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
+  let {
+    cellSubheadingBackground
+  } = _ref4;
+  return cellSubheadingBackground;
+});
+const StyledCell = /*#__PURE__*/styled.td.withConfig({
+  displayName: "Cell__StyledCell",
+  componentId: "components-web__sc-ltgfic-2"
+})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
+  let {
+    cellBackground
+  } = _ref5;
+  return cellBackground;
+});
+const StyledRowHeading = /*#__PURE__*/styled.th.withConfig({
+  displayName: "Cell__StyledRowHeading",
+  componentId: "components-web__sc-ltgfic-3"
+})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
+  let {
+    cellRowHeadingBackground
+  } = _ref6;
+  return cellRowHeadingBackground;
+});
+
+const Cell = _ref7 => {
+  let {
+    children,
+    type = 'default',
+    isFirstInRow,
+    align = 'left'
+  } = _ref7;
+  const {
+    text,
+    isScrollable: isTableScrollable,
+    variant,
+    tokens
+  } = useTableContext();
+  const {
+    cellHeadingBackground,
+    cellHeadingBoxShadowColor,
+    cellBoxShadowColor,
+    cellSubheadingBackground,
+    cellBackground,
+    cellRowHeadingBackground,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom
+  } = useThemeTokens('Table', tokens, variant);
+  const sharedProps = {
+    align,
+    isSticky: isTableScrollable && isFirstInRow,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom,
+    cellBoxShadowColor
+  };
+
+  switch (type) {
+    case 'heading':
+      return /*#__PURE__*/_jsx(StyledHeading, {
+        scope: "col",
+        cellHeadingBackground: cellHeadingBackground,
+        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          children: children
+        })
+      });
+
+    case 'subHeading':
+      return /*#__PURE__*/_jsx(StyledSubHeading, {
+        scope: "col",
+        cellSubheadingBackground: cellSubheadingBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h5'
+          },
+          children: children
+        })
+      });
+
+    case 'rowHeading':
+      return /*#__PURE__*/_jsx(StyledRowHeading, {
+        scope: "row",
+        cellRowHeadingBackground: cellRowHeadingBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: text === 'small' ? 'h5' : 'h4'
+          },
+          children: children
+        })
+      });
+
+    default:
+      return /*#__PURE__*/_jsx(StyledCell, {
+        cellBackground: cellBackground,
+        ...sharedProps,
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: text
+          },
+          children: children
+        })
+      });
+  }
+};
+
+Cell.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
+   */
+  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+
+  /**
+   * @ignore
+   * Used internally for making the first column sticky
+   */
+  isFirstInRow: PropTypes.bool,
+
+  /**
+   * Defines the text alignment within the cell
+   */
+  align: PropTypes.oneOf(['left', 'center', 'right'])
+};
+export default Cell;

package/lib-module/Table/Header.js

@@ -0,0 +1,22 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Header = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("thead", {
+    children: /*#__PURE__*/_jsx(Row, {
+      children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+        type: 'heading'
+      }))
+    })
+  });
+};
+
+Header.propTypes = {
+  children: PropTypes.node
+};
+export default Header;

package/lib-module/Table/Row.js

@@ -0,0 +1,19 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Row = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("tr", {
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/cloneElement(child, {
+      isFirstInRow: index === 0
+    }))
+  });
+};
+
+Row.propTypes = {
+  children: PropTypes.node
+};
+export default Row;

package/lib-module/Table/SubHeading.js

@@ -0,0 +1,20 @@
+import React, { cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import Row from './Row';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Header = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Row, {
+    children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      type: 'subHeading'
+    }))
+  });
+};
+
+Header.propTypes = {
+  children: PropTypes.node
+};
+export default Header;

package/lib-module/Table/Table.js

@@ -0,0 +1,93 @@
+import React, { useContext, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, useSafeLayoutEffect, useThemeTokens } from '@telus-uds/components-base';
+import throttle from 'lodash.throttle';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Table__StyledContainer",
+  componentId: "components-web__sc-10d9q3m-0"
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? props.tablePaddingBottom : 0);
+const StyledTable = /*#__PURE__*/styled.table.withConfig({
+  displayName: "Table__StyledTable",
+  componentId: "components-web__sc-10d9q3m-1"
+})(["margin:0;padding:0;"]);
+const TableContext = /*#__PURE__*/React.createContext({});
+export const useTableContext = () => useContext(TableContext);
+/**
+ * Use `Table` to display tabular data.
+ *
+ * - Takes an optional `spacing` variant (compact)
+ * - Available in 2 text styles (medium, small)
+ * - When `Table` exceeds viewport, the first column becomes sticky, enabling horizontal scrolling
+ * - Right-align prices and numbers that display decimal points
+ *
+ * ### Building up a `Table`
+ * - Use `Table.Header` and `Table.Body` as direct children of `Table`
+ * - Use `Table.SubHeading` to render an intermediate data heading row
+ * - Use `Table.Row` and `Table.Cell` to build up the tabular data
+ * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
+ */
+
+const Table = _ref => {
+  let {
+    children,
+    text = 'medium',
+    tokens,
+    variant,
+    ...rest
+  } = _ref;
+  const {
+    tablePaddingBottom
+  } = useThemeTokens('Table', tokens, variant);
+  const containerRef = useRef();
+  const tableRef = useRef();
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [tableWidth, setTableWidth] = useState(0);
+  useSafeLayoutEffect(() => {
+    const updateDimensions = () => {
+      setContainerWidth(containerRef.current.clientWidth);
+      setTableWidth(tableRef.current.clientWidth);
+    };
+
+    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions(); // a pretty naive way of repeating the measurement after the fonts are loaded
+
+    window.addEventListener('load', updateDimensions);
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => {
+      window.removeEventListener('load', updateDimensions);
+      window.removeEventListener('resize', throttledUpdateDimensions);
+    };
+  }, []);
+  const isScrollable = tableWidth > containerWidth;
+  return /*#__PURE__*/_jsx(StyledContainer, {
+    ref: containerRef,
+    isScrollable: isScrollable,
+    tablePaddingBottom: `${tablePaddingBottom}px`,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(TableContext.Provider, {
+      value: {
+        text,
+        isScrollable,
+        tokens,
+        variant
+      },
+      children: /*#__PURE__*/_jsx(StyledTable, {
+        cellSpacing: 0,
+        ref: tableRef,
+        children: children
+      })
+    })
+  });
+};
+
+Table.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  text: PropTypes.oneOf(['medium', 'small'])
+};
+export default Table;

package/lib-module/Table/index.js

@@ -0,0 +1,12 @@
+import Table from './Table';
+import Header from './Header';
+import Body from './Body';
+import Row from './Row';
+import SubHeading from './SubHeading';
+import Cell from './Cell';
+Table.Header = Header;
+Table.Body = Body;
+Table.Row = Row;
+Table.SubHeading = SubHeading;
+Table.Cell = Cell;
+export default Table;