@telus-uds/components-web 1.4.0 → 1.6.0

package/lib/WaffleGrid/WaffleGrid.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
+
+var _ItemBase = _interopRequireDefault(require("../OrderedList/ItemBase"));
+
+var _Image = _interopRequireDefault(require("../Image"));
+
+var _utils = require("../utils");
+
+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 [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const DEFAULT_ROW_SIZE = {
+  sm: 2,
+  lg: 3,
+  xl: 6
+};
+
+const row = (rowSize, rowBorderSize) => ({
+  flexBasis: `calc(100% / ${rowSize})`,
+  [`:not(:nth-of-type(${rowSize}n + 1))`]: {
+    borderLeftWidth: `${rowBorderSize}px`
+  },
+  [`:nth-of-type(n+${rowSize + 1})`]: {
+    borderTopWidth: `${rowBorderSize}px`
+  }
+});
+
+const Container = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "WaffleGrid__Container",
+  componentId: "components-web__sc-ec8g0a-0"
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-start'
+});
+const Item = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+  displayName: "WaffleGrid__Item",
+  componentId: "components-web__sc-ec8g0a-1"
+})(_ref => {
+  let {
+    rowSize,
+    itemPadding,
+    itemBorderColor,
+    rowBorderWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 0,
+    flexShrink: 0,
+    padding: `${itemPadding}px`,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: itemBorderColor,
+    borderWidth: 0,
+    '& > a': {
+      alignSelf: 'center'
+    },
+    ...row(rowSize, rowBorderWidth)
+  };
+});
+const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
+  displayName: "WaffleGrid__Center",
+  componentId: "components-web__sc-ec8g0a-2"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center'
+});
+/**
+ * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
+ */
+
+const WaffleGrid = _ref2 => {
+  let {
+    items,
+    rowSize = DEFAULT_ROW_SIZE,
+    LinkRouter,
+    tokens,
+    variant,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('WaffleGrid', tokens, variant);
+  const currentRowSize = (0, _componentsBase.useResponsiveProp)(rowSize);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, { ...selectProps(rest),
+    children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, { ...themeTokens,
+      key: child.href,
+      rowSize: currentRowSize
+    }, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+      href: child.href,
+      variant: {
+        alternative: true
+      },
+      LinkRouter: child.LinkRouter || LinkRouter,
+      linkRouterProps: { ...linkRouterProps,
+        ...child.linkRouterProps
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Center, {
+        children: [typeof child.image === 'string' ?
+        /*#__PURE__*/
+        // Assuming that string passed is the image URL
+        (0, _jsxRuntime.jsx)(_Image.default, {
+          src: child.image,
+          alt: child.imageAltText,
+          width: 64,
+          height: 64
+        }) : // Otherwise it must be an arbitrary content, which we just display by itself
+        child.image, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: child.text
+        })]
+      })
+    })))
+  });
+};
+
+WaffleGrid.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The image and the link to display. `items` should be an array of objects with the following keys:
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The src attribute for the HTML img element or custom JSX content to render instead
+     */
+    image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+
+    /**
+     * The alt attribute for the HTML img element (note that this is ignored if a custom
+     * JSX content is used instead of an image URL)
+     */
+    imageAltText: _propTypes.default.string,
+
+    /**
+     * The text displayed under the image
+     */
+    text: _propTypes.default.string,
+
+    /**
+     * Target URL
+     */
+    href: _propTypes.default.string,
+    ..._componentsBase.withLinkRouter.propTypes
+  })).isRequired,
+
+  /**
+   * Row size, optionally depending on the viewport
+   */
+  rowSize: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+  ..._componentsBase.withLinkRouter.propTypes
+};
+var _default = WaffleGrid;
+exports.default = _default;

package/lib/WaffleGrid/index.js

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

package/lib/baseExports.js

@@ -147,12 +147,6 @@ Object.defineProperty(exports, "Link", {
     return _componentsBase.Link;
   }
 });
-Object.defineProperty(exports, "Modal", {
-  enumerable: true,
-  get: function () {
-    return _componentsBase.Modal;
-  }
-});
 Object.defineProperty(exports, "MultiSelectFilter", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -5,18 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
+  Modal: true,
   OrderedList: true,
   PreviewCard: true,
   ResponsiveImage: true,
   Ribbon: true,
   DatePicker: true,
+  Paragraph: true,
   Span: true,
   ExpandCollapseMini: true,
   Callout: true,
   PriceLockup: true,
   Footnote: true,
   transformGradient: true,
-  Breadcrumbs: true
+  Breadcrumbs: true,
+  Toast: true,
+  Table: true,
+  Image: true,
+  WaffleGrid: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -54,12 +60,30 @@ Object.defineProperty(exports, "Footnote", {
     return _Footnote.default;
   }
 });
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _Image.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "OrderedList", {
   enumerable: true,
   get: function () {
     return _OrderedList.default;
   }
 });
+Object.defineProperty(exports, "Paragraph", {
+  enumerable: true,
+  get: function () {
+    return _Paragraph.default;
+  }
+});
 Object.defineProperty(exports, "PreviewCard", {
   enumerable: true,
   get: function () {
@@ -90,6 +114,24 @@ Object.defineProperty(exports, "Span", {
     return _Span.default;
   }
 });
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.default;
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "WaffleGrid", {
+  enumerable: true,
+  get: function () {
+    return _WaffleGrid.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -99,6 +141,8 @@ Object.defineProperty(exports, "transformGradient", {
 
 var _Badge = _interopRequireDefault(require("./Badge"));
 
+var _Modal = _interopRequireDefault(require("./Modal"));
+
 var _OrderedList = _interopRequireDefault(require("./OrderedList"));
 
 var _PreviewCard = _interopRequireDefault(require("./PreviewCard"));
@@ -109,6 +153,8 @@ var _Ribbon = _interopRequireDefault(require("./Ribbon"));
 
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 
+var _Paragraph = _interopRequireDefault(require("./Paragraph"));
+
 var _Span = _interopRequireDefault(require("./Span"));
 
 var _ExpandCollapseMini = _interopRequireDefault(require("./ExpandCollapseMini"));
@@ -123,6 +169,14 @@ var _utils = require("./utils");
 
 var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
 
+var _Toast = _interopRequireDefault(require("./Toast"));
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _Image = _interopRequireDefault(require("./Image"));
+
+var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib-module/Image/Image.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
+import { htmlAttrs, warn } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledImage = /*#__PURE__*/styled.img.withConfig({
+  displayName: "Image__StyledImage",
+  componentId: "components-web__sc-blwu4l-0"
+})({
+  height: 'auto',
+  maxWidth: '100%'
+});
+const StyledRoundedImage = /*#__PURE__*/styled(StyledImage).withConfig({
+  displayName: "Image__StyledRoundedImage",
+  componentId: "components-web__sc-blwu4l-1"
+})(["border-radius:", "px;"], _ref => {
+  let {
+    borderRadius
+  } = _ref;
+  return borderRadius;
+});
+const StyledCircularImage = /*#__PURE__*/styled(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
+  } = useThemeTokens('Image', tokens, variant);
+  const isCircle = rounded === 'circle';
+  const isCorners = rounded === 'corners';
+  const isSquare = width === height;
+
+  if (isCircle && !isSquare) {
+    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__*/_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.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.string.isRequired,
+
+  /**
+   * The image's width.
+   */
+  width: PropTypes.number.isRequired,
+
+  /**
+   * The image's height.
+   */
+  height: PropTypes.number.isRequired,
+
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+
+  /**
+   * Make image render as a circle or with rounded corners.
+   */
+  rounded: PropTypes.oneOf(['circle', 'corners'])
+};
+export default Image;

package/lib-module/Image/index.js

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

package/lib-module/Modal/Modal.js

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