@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/Table/Cell.js

@@ -0,0 +1,187 @@
+"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 _Table = require("./Table");
+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 HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+};
+const stickyStyles = _ref => {
+  let {
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
+  } = _ref;
+  return (0, _styledComponents.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;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+};
+const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 => {
+  let {
+    isSticky,
+    align,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingBottom,
+    cellPaddingLeft,
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
+  } = _ref2;
+  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+    type,
+    cellStickyShadow,
+    stickyBackgroundColor
+  }));
+});
+const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
+  componentId: "components-web__sc-ltgfic-0"
+})(["", ";box-shadow:", ";", ""], sharedStyles, _ref3 => {
+  let {
+    cellBoxShadowColor,
+    type
+  } = _ref3;
+  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
+}, _ref4 => {
+  let {
+    display
+  } = _ref4;
+  return display && `*:not(:empty) {
+    display: ${display};
+  }`;
+});
+const StyledHeaderCell = createStyledCell('th');
+const StyledDataCell = createStyledCell('td');
+const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    children,
+    isFirstInRow,
+    align = 'left',
+    tokens: cellTokens,
+    type = 'default'
+  } = _ref5;
+  const {
+    text,
+    isScrollable: isTableScrollable,
+    tokens: tableTokens,
+    spacing,
+    variant
+  } = (0, _Table.useTableContext)();
+  const themeTokens = {
+    ...tableTokens,
+    ...cellTokens
+  };
+  const {
+    cellMinWidth,
+    cellBoxShadowColor,
+    cellBackground,
+    cellStickyShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    stickyBackgroundColor,
+    fontColor,
+    display
+  } = (0, _componentsBase.useThemeTokens)('Table', themeTokens, {
+    spacing,
+    type,
+    text,
+    ...variant
+  });
+  const sharedProps = {
+    align,
+    isSticky: isTableScrollable && isFirstInRow,
+    cellBackground,
+    cellMinWidth,
+    cellStickyShadow: (0, _componentsBase.applyShadowToken)(cellStickyShadow).boxShadow,
+    cellPaddingTop,
+    cellPaddingRight,
+    cellPaddingLeft,
+    cellPaddingBottom,
+    stickyBackgroundColor,
+    cellBoxShadowColor,
+    display,
+    ref
+  };
+  const typographyTokens = {
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight,
+    color: fontColor
+  };
+  switch (type) {
+    case HEADER_TYPE.HEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+        scope: "col",
+        ...sharedProps,
+        type: type,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          tokens: typographyTokens,
+          children: children
+        })
+      });
+    case HEADER_TYPE.SUBHEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+        scope: "col",
+        ...sharedProps,
+        type: type,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          tokens: typographyTokens,
+          children: children
+        })
+      });
+    case HEADER_TYPE.ROWHEADING:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledHeaderCell, {
+        scope: "row",
+        ...sharedProps,
+        type: type,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          tokens: typographyTokens,
+          children: children
+        })
+      });
+    default:
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDataCell, {
+        ...sharedProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          tokens: typographyTokens,
+          children: children
+        })
+      });
+  }
+});
+Cell.displayName = 'Cell';
+Cell.propTypes = {
+  type: _propTypes.default.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
+  tokens: _propTypes.default.object,
+  children: _propTypes.default.node,
+  /**
+   * @ignore
+   * Used internally for making the first column sticky
+   */
+  isFirstInRow: _propTypes.default.bool,
+  /**
+   * Defines the text alignment within the cell
+   */
+  align: _propTypes.default.oneOf(['left', 'center', 'right'])
+};
+var _default = exports.default = Cell;

package/lib/cjs/Table/Header.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Row = _interopRequireDefault(require("./Row"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+      children: _react.default.Children.map(children, child =>
+      /*#__PURE__*/
+      // TO DO: pass type as a variant instead of prop
+      _react.default.cloneElement(child, {
+        type: 'heading'
+      }))
+    })
+  });
+});
+Header.displayName = 'Header';
+Header.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = Header;

package/lib/cjs/Table/Row.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Table = require("./Table");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledTR = /*#__PURE__*/_styledComponents.default.tr.withConfig({
+  displayName: "Row__StyledTR",
+  componentId: "components-web__sc-6pbb9a-0"
+})(["&:hover{background-color:", " !important;}"], _ref => {
+  let {
+    rowHoverBackgroundColor
+  } = _ref;
+  return rowHoverBackgroundColor;
+});
+const Row = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children
+  } = _ref2;
+  const {
+    themeTokens
+  } = (0, _Table.useTableContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTR, {
+    ref: ref,
+    rowHoverBackgroundColor: themeTokens?.rowHoverBackgroundColor,
+    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
+      isFirstInRow: index === 0
+    }))
+  });
+});
+Row.displayName = 'Row';
+Row.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = Row;

package/lib/cjs/Table/SubHeading.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Row = _interopRequireDefault(require("./Row"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+    ref: ref,
+    children: _react.default.Children.map(children, child =>
+    /*#__PURE__*/
+    // TO DO: pass type as a variant instead of prop
+    _react.default.cloneElement(child, {
+      type: 'subHeading'
+    }))
+  });
+});
+Header.displayName = 'Header';
+Header.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = Header;

package/lib/cjs/Table/Table.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableContext = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Table__StyledContainer",
+  componentId: "components-web__sc-10d9q3m-0"
+})(["overflow:auto;padding-bottom:", ";"], props => props.isScrollable ? `${props.tablePaddingBottom}px` : 0);
+const StyledTable = /*#__PURE__*/_styledComponents.default.table.withConfig({
+  displayName: "Table__StyledTable",
+  componentId: "components-web__sc-10d9q3m-1"
+})(["margin:0;padding:0;width:", ";border:", ";"], _ref => {
+  let {
+    fullWidth,
+    tableWidth
+  } = _ref;
+  return fullWidth ? '100%' : `${tableWidth}px`;
+}, props => `${props.borderWidth}px solid ${props.borderColor}`);
+const TableContext = /*#__PURE__*/_react.default.createContext({});
+const useTableContext = () => _react.default.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"`)
+ */
+exports.useTableContext = useTableContext;
+const Table = _ref2 => {
+  let {
+    children,
+    spacing = 'default',
+    fullWidth = true,
+    text = 'medium',
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Table', tokens, variant);
+  const {
+    tablePaddingBottom,
+    borderColor,
+    borderWidth
+  } = themeTokens;
+  const containerRef = _react.default.useRef();
+  const tableRef = _react.default.useRef();
+  const [containerWidth, setContainerWidth] = _react.default.useState(0);
+  const [tableWidth, setTableWidth] = _react.default.useState(0);
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateDimensions = () => {
+      const containerClientWidth = containerRef.current?.clientWidth;
+      const responsiveTableWidth = fullWidth ? containerClientWidth : tableRef.current?.clientWidth;
+      setContainerWidth(containerClientWidth);
+      setTableWidth(responsiveTableWidth);
+    };
+    const throttledUpdateDimensions = (0, _lodash.default)(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__*/(0, _jsxRuntime.jsx)(StyledContainer, {
+    ref: containerRef,
+    isScrollable: isScrollable,
+    tablePaddingBottom: tablePaddingBottom,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TableContext.Provider, {
+      value: {
+        text,
+        isScrollable,
+        tokens,
+        spacing,
+        variant,
+        themeTokens
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
+        borderColor: borderColor,
+        borderWidth: borderWidth,
+        tableWidth: tableWidth,
+        cellSpacing: 0,
+        ref: tableRef,
+        fullWidth: fullWidth,
+        ...selectProps(rest),
+        children: children
+      })
+    })
+  });
+};
+Table.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Table'),
+  children: _propTypes.default.node,
+  /**
+   * Sets text style
+   */
+  text: _propTypes.default.oneOf(['medium', 'small'])
+};
+var _default = exports.default = Table;

package/lib/cjs/Table/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Table = _interopRequireDefault(require("./Table"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _Body = _interopRequireDefault(require("./Body"));
+var _Row = _interopRequireDefault(require("./Row"));
+var _SubHeading = _interopRequireDefault(require("./SubHeading"));
+var _Cell = _interopRequireDefault(require("./Cell"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_Table.default.Header = _Header.default;
+_Table.default.Body = _Body.default;
+_Table.default.Row = _Row.default;
+_Table.default.SubHeading = _SubHeading.default;
+_Table.default.Cell = _Cell.default;
+var _default = exports.default = _Table.default;

package/lib/cjs/TermsAndConditions/ExpandCollapse.js

@@ -0,0 +1,160 @@
+"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 = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ExpandCollapseControl = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseControl",
+  componentId: "components-web__sc-1l2mmq7-0"
+})({
+  alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start'
+});
+const ExpandCollapseIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseIconContainer",
+  componentId: "components-web__sc-1l2mmq7-1"
+})(_ref => {
+  let {
+    tokens
+  } = _ref;
+  return {
+    alignItems: tokens.expandIconContainerAlignItems,
+    justifyContent: tokens.expandIconContainerJustifyContent,
+    marginLeft: `${tokens.expandIconContainerMarginY}px`,
+    marginRight: `${tokens.expandIconContainerMarginY}px`,
+    width: tokens.expandIconContainerWidth
+  };
+});
+const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.h4.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseTitle",
+  componentId: "components-web__sc-1l2mmq7-2"
+})(_ref2 => {
+  let {
+    tokens
+  } = _ref2;
+  return {
+    color: tokens.expandTitleColor,
+    fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
+    fontSize: tokens.expandTitleFontSize,
+    lineHeight: tokens.expandTitleLineHeight,
+    margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
+  };
+});
+const getIconButtonTokens = _ref3 => {
+  let {
+    icon,
+    iconBackgroundColor,
+    iconBorderColor,
+    iconColor,
+    iconOuterBorderColor,
+    iconOuterBorderGap,
+    iconOuterBorderWidth
+  } = _ref3;
+  return {
+    icon,
+    backgroundColor: iconBackgroundColor,
+    borderColor: iconBorderColor,
+    iconColor,
+    outerBorderColor: iconOuterBorderColor,
+    outerBorderGap: iconOuterBorderGap,
+    outerBorderWidth: iconOuterBorderWidth
+  };
+};
+const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    children,
+    collapseTitle,
+    expandTitle = collapseTitle,
+    expandLabel,
+    collapseLabel
+  } = _ref4;
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('TermsAndConditions', {}, {});
+  const {
+    expandBaseBorderWidth,
+    expandContentPaddingBottom,
+    expandContentPaddingLeft,
+    expandContentPaddingRight,
+    expandContentPaddingTop,
+    contentBorderColor,
+    contentMarginBottom,
+    headerBackgroundColor,
+    expandTitlePaddingLeft,
+    expandTitleBorder,
+    expandTitleBorderColor,
+    expandTitleUnderline
+  } = getTokens();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
+    tokens: {
+      borderWidth: expandBaseBorderWidth
+    },
+    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
+      ...expandProps,
+      panelId: "ExpandCollapsePanel",
+      controlTokens: {
+        icon: null,
+        backgroundColor: 'transparent',
+        paddingLeft: expandTitlePaddingLeft,
+        borderColor: expandTitleBorderColor,
+        borderWidth: expandTitleBorder,
+        textLine: expandTitleUnderline
+      }
+      // TODO refactor
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ,
+      control: pressableState => {
+        const {
+          expanded
+        } = pressableState || {};
+        const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
+        const label = expanded ? collapseLabel : expandLabel;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
+          ref: ref,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
+            tokens: getTokens(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+              variant: {
+                size: 'small'
+              },
+              tokens: iconTokens,
+              focusable: false,
+              accessibilityLabel: label,
+              accessibilityRole: "none"
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
+            tokens: getTokens(),
+            children: expanded ? expandTitle : collapseTitle
+          })]
+        });
+      },
+      tokens: {
+        contentPaddingBottom: expandContentPaddingBottom,
+        contentPaddingLeft: expandContentPaddingLeft,
+        contentPaddingRight: expandContentPaddingRight,
+        contentPaddingTop: expandContentPaddingTop,
+        contentPanelBackgroundColor: headerBackgroundColor,
+        borderColor: contentBorderColor,
+        marginBottom: contentMarginBottom
+      },
+      children: children
+    })
+  });
+});
+ExpandCollapse.displayName = 'ExpandCollapse';
+ExpandCollapse.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  collapseTitle: _propTypes.default.string.isRequired,
+  expandTitle: _propTypes.default.string,
+  collapseLabel: _propTypes.default.string,
+  expandLabel: _propTypes.default.string
+};
+var _default = exports.default = ExpandCollapse;