@telus-uds/components-web 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 13 Apr 2023 05:51:59 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Apr 2023 11:24:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.6.0
+
+Wed, 19 Apr 2023 11:24:21 GMT
+
+### Minor changes
+
+- add Modal (kyle.king2@telus.com)
+- moved Image to components-web from ds-allium (kyle.king2@telus.com)
+- moved WaffleGrid from ds-allium to components-web (kyle.king2@telus.com)
+- Toast multi-brand (samuraix221@hotmail.com)
+- Added Table (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.34.2
+- Bump @telus-uds/system-theme-tokens to v2.19.0
+
+## 1.5.0
+
+Tue, 18 Apr 2023 11:48:05 GMT
+
+### Minor changes
+
+- Paragraph multibranded (akshay.pandey1@telus.com)
+- Bump @telus-uds/components-base to v1.34.1
+
 ## 1.4.0
 
-Thu, 13 Apr 2023 05:51:59 GMT
+Thu, 13 Apr 2023 05:59:09 GMT
 
 ### Minor changes
 

package/lib/Image/Image.js

@@ -0,0 +1,126 @@
+"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 _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledImage = /*#__PURE__*/_styledComponents.default.img.withConfig({
+  displayName: "Image__StyledImage",
+  componentId: "components-web__sc-blwu4l-0"
+})({
+  height: 'auto',
+  maxWidth: '100%'
+});
+
+const StyledRoundedImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
+  displayName: "Image__StyledRoundedImage",
+  componentId: "components-web__sc-blwu4l-1"
+})(["border-radius:", "px;"], _ref => {
+  let {
+    borderRadius
+  } = _ref;
+  return borderRadius;
+});
+const StyledCircularImage = /*#__PURE__*/(0, _styledComponents.default)(StyledImage).withConfig({
+  displayName: "Image__StyledCircularImage",
+  componentId: "components-web__sc-blwu4l-2"
+})({
+  borderRadius: '50%'
+});
+
+const Image = _ref2 => {
+  let {
+    src,
+    width,
+    height,
+    alt,
+    rounded,
+    loading = 'eager',
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const {
+    borderRadius
+  } = (0, _componentsBase.useThemeTokens)('Image', tokens, variant);
+  const isCircle = rounded === 'circle';
+  const isCorners = rounded === 'corners';
+  const isSquare = width === height;
+
+  if (isCircle && !isSquare) {
+    (0, _utils.warn)('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
+  }
+
+  let ImageComponent;
+
+  if (isCircle) {
+    ImageComponent = StyledCircularImage;
+  } else if (isCorners) {
+    ImageComponent = StyledRoundedImage;
+  } else {
+    ImageComponent = StyledImage;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageComponent, { ...selectProps(rest),
+    borderRadius: borderRadius,
+    src: src,
+    width: width,
+    height: height,
+    alt: alt,
+    loading: loading
+  });
+};
+
+Image.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The src attribute for the HTML img element.
+   */
+  src: _propTypes.default.string.isRequired,
+
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: _propTypes.default.string.isRequired,
+
+  /**
+   * The image's width.
+   */
+  width: _propTypes.default.number.isRequired,
+
+  /**
+   * The image's height.
+   */
+  height: _propTypes.default.number.isRequired,
+
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: _propTypes.default.oneOf(['eager', 'lazy']),
+
+  /**
+   * Make image render as a circle or with rounded corners.
+   */
+  rounded: _propTypes.default.oneOf(['circle', 'corners'])
+};
+var _default = Image;
+exports.default = _default;

package/lib/Image/index.js

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

package/lib/Modal/Modal.js

@@ -0,0 +1,142 @@
+"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 {
+    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,
+    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
+    })
+  });
+};
+
+Modal.propTypes = {
+  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

@@ -0,0 +1,195 @@
+"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; }
+
+/* eslint-disable react/jsx-filename-extension */
+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 StyledFooter = /*#__PURE__*/_styledComponents.default.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 = _componentsBase.TextButton,
+    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
+      })
+    }), (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
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: hasCancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(CancelButton, {
+          tokens: {
+            color: cancelButtonColor
+          },
+          onPress: onCancel,
+          children: cancelButtonText
+        })
+      })]
+    })]
+  });
+};
+
+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
+  onCancel: _propTypes.default.func
+};
+var _default = ModalContent;
+exports.default = _default;

package/lib/Modal/index.js

@@ -0,0 +1,13 @@
+"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/Paragraph/Paragraph.js

@@ -0,0 +1,107 @@
+"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 _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledParagraph = /*#__PURE__*/_styledComponents.default.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 = (0, _utils.useTypographyTheme)(variant, tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledParagraph, {
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Paragraph.propTypes = { ...selectedSystemPropTypes,
+  children: _propTypes.default.node.isRequired,
+  testID: _propTypes.default.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.default.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.default.number,
+
+  /**
+   * Paragraph takes the same tokens overrides as Typography
+   */
+  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+
+  /**
+   * Paragraph takes any of Typography's theme variants except for header sizes
+   */
+  variant: _propTypes.default.exact({
+    bold: _propTypes.default.bool,
+    colour: _propTypes.default.oneOf(['secondary', 'tertiary']),
+    inverse: _propTypes.default.bool,
+    size: _propTypes.default.oneOf(['micro', 'small', 'large'])
+  })
+};
+var _default = Paragraph;
+exports.default = _default;

package/lib/Paragraph/index.js

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

package/lib/Table/Body.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Body = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    children: children
+  });
+};
+
+Body.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = Body;
+exports.default = _default;