@telus-uds/components-web 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 19 Apr 2023 11:24:21 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Apr 2023 19:05:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.7.0
+
+Thu, 20 Apr 2023 19:05:54 GMT
+
+### Minor changes
+
+- web modal to accept children (srikanthkhari@gmail.com)
+- Added Spinner (wlsdud194@hotmail.com)
+- update snapshots (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.36.0
+- Bump @telus-uds/system-theme-tokens to v2.21.0
+
+## 1.6.1
+
+Wed, 19 Apr 2023 18:49:51 GMT
+
+### Patches
+
+- Update default token to Preview Card (carlos.jeronimo@telus.com)
+- Bump @telus-uds/components-base to v1.35.0
+- Bump @telus-uds/system-theme-tokens to v2.20.0
+
 ## 1.6.0
 
-Wed, 19 Apr 2023 11:24:21 GMT
+Wed, 19 Apr 2023 11:32:31 GMT
 
 ### Minor changes
 

package/lib/Modal/Modal.js

@@ -19,6 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const Modal = _ref => {
   let {
+    children,
     isOpen,
     onClose,
     maxWidth,
@@ -40,6 +41,7 @@ const Modal = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Modal, {
     isOpen: isOpen,
     onClose: onClose,
+    variant: variant,
     maxWidth: maxWidth,
     ...nonContentProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalContent.default, {
@@ -55,12 +57,14 @@ const Modal = _ref => {
       confirmButtonText: confirmButtonText,
       confirmButtonVariant: confirmButtonVariant,
       cancelButtonText: cancelButtonText,
-      cancelButtonType: cancelButtonType
+      cancelButtonType: cancelButtonType,
+      children: children
     })
   });
 };
 
 Modal.propTypes = {
+  children: _propTypes.default.node,
   tokens: _propTypes.default.object,
   variant: _propTypes.default.object,
 

package/lib/Modal/ModalContent.js

@@ -92,6 +92,7 @@ const ModalContent = _ref4 => {
     variant,
     cancelButtonText,
     cancelButtonType: CancelButton = _componentsBase.TextButton,
+    children,
     onCancel
   } = _ref4;
   const {
@@ -152,7 +153,7 @@ const ModalContent = _ref4 => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         children: bodyText
       })
-    }), (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFooter, { ...themeTokens,
+    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFooter, { ...themeTokens,
       hasBorder: isContentOverflowing,
       viewport: viewport,
       children: [hasConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
@@ -189,6 +190,7 @@ ModalContent.propTypes = {
   cancelButtonText: _propTypes.default.string,
   cancelButtonType: _propTypes.default.elementType,
   // TODO: figure out a way of passing an icon to the TextButton
+  children: _propTypes.default.node,
   onCancel: _propTypes.default.func
 };
 var _default = ModalContent;

package/lib/PreviewCard/PreviewCard.js

@@ -60,7 +60,11 @@ const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConf
 
 const defaultTokens = {
   minWidth: 0,
-  shadow: null
+  shadow: null,
+  contentAlignItems: 'stretch',
+  contentJustifyContent: 'flex-start',
+  contentFlexGrow: 0,
+  contentFlexShrink: 0
 };
 /**
  * Showcase and guide users to another page, with a preview containing title and a footer.

package/lib/Spinner/Spinner.js

@@ -0,0 +1,234 @@
+"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 _SpinnerContent = _interopRequireDefault(require("./SpinnerContent"));
+
+var _utils = require("../utils");
+
+var _constants = require("./constants");
+
+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 SpinnerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Spinner__SpinnerContainer",
+  componentId: "components-web__sc-116rqck-0"
+})(_ref => {
+  let {
+    inline,
+    fullScreen
+  } = _ref;
+  return {
+    position: 'relative',
+    ...(inline && {
+      display: 'block',
+      ...(0, _utils.media)().from('md').css({
+        display: 'inline-block'
+      })
+    }),
+    ...(fullScreen && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    })
+  };
+});
+
+const ContentOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Spinner__ContentOverlay",
+  componentId: "components-web__sc-116rqck-1"
+})({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  zIndex: _constants.BACKDROP_Z_INDEX
+});
+
+const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Spinner__FullscreenOverlay",
+  componentId: "components-web__sc-116rqck-2"
+})(_ref2 => {
+  let {
+    fullScreenOverLayBackground
+  } = _ref2;
+  return {
+    position: 'fixed',
+    width: '100vw',
+    height: '100vh',
+    top: 0,
+    left: 0,
+    zIndex: _constants.BACKDROP_Z_INDEX,
+    backgroundColor: fullScreenOverLayBackground
+  };
+});
+
+const OpaqueContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Spinner__OpaqueContainer",
+  componentId: "components-web__sc-116rqck-3"
+})({
+  opacity: _constants.BACKDROP_OPACITY
+});
+
+const recursiveMap = (children, fn) => _react.default.Children.map(children, child => {
+  if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+    return child;
+  }
+
+  if (child.props.children) {
+    return fn( /*#__PURE__*/_react.default.cloneElement(child, {
+      children: recursiveMap(child.props.children, fn)
+    }));
+  }
+
+  return fn(child);
+});
+/**
+ * Loading indicator.
+ */
+
+
+const Spinner = _ref3 => {
+  let {
+    children,
+    fullScreen = false,
+    inline = false,
+    label,
+    show = false,
+    isStatic = false,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    fullScreenOverLayBackground,
+    size,
+    thickness
+  } = (0, _componentsBase.useThemeTokens)('Spinner', tokens, variant);
+  const {
+    size: sizeVariant = 'large'
+  } = variant;
+  (0, _componentsBase.useScrollBlocking)([fullScreen, show]);
+
+  if (!show) {
+    return children ?? null;
+  } // Full screen spinner
+
+
+  if (fullScreen) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullscreenOverlay, {
+      fullScreenOverLayBackground: fullScreenOverLayBackground,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, {
+        inline: inline,
+        fullScreen: fullScreen,
+        "aria-live": "assertive",
+        ...selectProps(rest),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+          label: label,
+          overlay: true,
+          size: size,
+          thickness: thickness,
+          sizeVariant: sizeVariant,
+          isStatic: isStatic
+        })
+      })
+    });
+  } // Overlay spinner
+
+
+  if (children) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
+      inline: inline,
+      "aria-live": "assertive",
+      ...selectProps(rest),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+        label: label,
+        overlay: true,
+        size: size,
+        thickness: thickness,
+        sizeVariant: sizeVariant,
+        isStatic: isStatic
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(OpaqueContainer, {
+        inert: "true",
+        children: recursiveMap(children, c => {
+          if (c) {
+            return /*#__PURE__*/_react.default.cloneElement(c, {
+              tabIndex: '-1',
+              'aria-hidden': 'true'
+            });
+          }
+
+          return undefined;
+        })
+      })]
+    });
+  } // Standalone spinner
+
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, { ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+      label: label,
+      size: size,
+      thickness: thickness,
+      sizeVariant: sizeVariant,
+      isStatic: isStatic
+    })
+  });
+};
+
+Spinner.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Content to be overlaid while the spinner is active. Can be text, any HTML element,
+   * or any component.
+   */
+  children: _propTypes.default.node,
+
+  /**
+   * Enables body locking.
+   */
+  fullScreen: _propTypes.default.bool,
+
+  /**
+   * Set the inline prop to true if the Spinner should only cover its children; if
+   * the Spinner should cover the full width of its parent regardless of the size of
+   * its children, inline should be set to false
+   */
+  inline: _propTypes.default.bool,
+
+  /**
+   * Communicates a message to assistive technology while visible. This same message
+   * will appear underneath the spinner when its `size` is `large`.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * The size of the spinner
+   */
+  // size: PropTypes.oneOf(['large', 'small']),
+
+  /**
+   * Whether or not to render the spinner.
+   */
+  show: _propTypes.default.bool,
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: _propTypes.default.bool
+};
+var _default = Spinner;
+exports.default = _default;

package/lib/Spinner/SpinnerContent.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 _constants = require("./constants");
+
+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 Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SpinnerContent__Container",
+  componentId: "components-web__sc-1c8bd8e-0"
+})(_ref => {
+  let {
+    overlay
+  } = _ref;
+  return {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    ...(overlay && {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      zIndex: _constants.BACKDROP_Z_INDEX
+    })
+  };
+});
+
+const SpinnerContent = _ref2 => {
+  let {
+    label,
+    overlay = false,
+    sizeVariant,
+    size,
+    thickness,
+    isStatic,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    overlay: overlay,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 3,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
+        label: label,
+        tokens: {
+          size,
+          thickness
+        },
+        isStatic: isStatic,
+        ...selectProps(rest)
+      }), sizeVariant === _constants.LARGE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        children: label
+      })]
+    })
+  });
+};
+
+SpinnerContent.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * Whether the container has to have an overlay styling.
+   */
+  overlay: _propTypes.default.bool,
+
+  /**
+   * Size (width and height) of the spinner.
+   */
+  size: _propTypes.default.number,
+
+  /**
+   * The size of the spinner
+   */
+  sizeVariant: _propTypes.default.oneOf(['large', 'small']),
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: _propTypes.default.bool
+};
+var _default = SpinnerContent;
+exports.default = _default;

package/lib/Spinner/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SMALL = exports.LARGE = exports.BACKDROP_Z_INDEX = exports.BACKDROP_OPACITY = void 0;
+const BACKDROP_OPACITY = 0.06;
+exports.BACKDROP_OPACITY = BACKDROP_OPACITY;
+const BACKDROP_Z_INDEX = 1400;
+exports.BACKDROP_Z_INDEX = BACKDROP_Z_INDEX;
+const LARGE = 'large';
+exports.LARGE = LARGE;
+const SMALL = 'small';
+exports.SMALL = SMALL;

package/lib/Spinner/index.js

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

package/lib/index.js

@@ -22,7 +22,8 @@ var _exportNames = {
   Toast: true,
   Table: true,
   Image: true,
-  WaffleGrid: true
+  WaffleGrid: true,
+  Spinner: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -114,6 +115,12 @@ Object.defineProperty(exports, "Span", {
     return _Span.default;
   }
 });
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function () {
@@ -177,6 +184,8 @@ var _Image = _interopRequireDefault(require("./Image"));
 
 var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
 
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib-module/Modal/Modal.js

@@ -6,6 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 
 const Modal = _ref => {
   let {
+    children,
     isOpen,
     onClose,
     maxWidth,
@@ -27,6 +28,7 @@ const Modal = _ref => {
   return /*#__PURE__*/_jsx(BaseModal, {
     isOpen: isOpen,
     onClose: onClose,
+    variant: variant,
     maxWidth: maxWidth,
     ...nonContentProps,
     children: /*#__PURE__*/_jsx(ModalContent, {
@@ -42,12 +44,14 @@ const Modal = _ref => {
       confirmButtonText: confirmButtonText,
       confirmButtonVariant: confirmButtonVariant,
       cancelButtonText: cancelButtonText,
-      cancelButtonType: cancelButtonType
+      cancelButtonType: cancelButtonType,
+      children: children
     })
   });
 };
 
 Modal.propTypes = {
+  children: PropTypes.node,
   tokens: PropTypes.object,
   variant: PropTypes.object,
 

package/lib-module/Modal/ModalContent.js

@@ -72,6 +72,7 @@ const ModalContent = _ref4 => {
     variant,
     cancelButtonText,
     cancelButtonType: CancelButton = TextButton,
+    children,
     onCancel
   } = _ref4;
   const {
@@ -132,7 +133,7 @@ const ModalContent = _ref4 => {
       children: /*#__PURE__*/_jsx(Typography, {
         children: bodyText
       })
-    }), (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(StyledFooter, { ...themeTokens,
+    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(StyledFooter, { ...themeTokens,
       hasBorder: isContentOverflowing,
       viewport: viewport,
       children: [hasConfirmButton && /*#__PURE__*/_jsx(Button, {
@@ -169,6 +170,7 @@ ModalContent.propTypes = {
   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/lib-module/PreviewCard/PreviewCard.js

@@ -39,7 +39,11 @@ const FullBleedOffsetInner = /*#__PURE__*/styled.div.withConfig({
 });
 const defaultTokens = {
   minWidth: 0,
-  shadow: null
+  shadow: null,
+  contentAlignItems: 'stretch',
+  contentJustifyContent: 'flex-start',
+  contentFlexGrow: 0,
+  contentFlexShrink: 0
 };
 /**
  * Showcase and guide users to another page, with a preview containing title and a footer.

package/lib-module/Spinner/Spinner.js

@@ -0,0 +1,213 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, useScrollBlocking, useThemeTokens } from '@telus-uds/components-base';
+import SpinnerContent from './SpinnerContent';
+import { htmlAttrs, media } from '../utils';
+import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__SpinnerContainer",
+  componentId: "components-web__sc-116rqck-0"
+})(_ref => {
+  let {
+    inline,
+    fullScreen
+  } = _ref;
+  return {
+    position: 'relative',
+    ...(inline && {
+      display: 'block',
+      ...media().from('md').css({
+        display: 'inline-block'
+      })
+    }),
+    ...(fullScreen && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    })
+  };
+});
+const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__ContentOverlay",
+  componentId: "components-web__sc-116rqck-1"
+})({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  zIndex: BACKDROP_Z_INDEX
+});
+const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__FullscreenOverlay",
+  componentId: "components-web__sc-116rqck-2"
+})(_ref2 => {
+  let {
+    fullScreenOverLayBackground
+  } = _ref2;
+  return {
+    position: 'fixed',
+    width: '100vw',
+    height: '100vh',
+    top: 0,
+    left: 0,
+    zIndex: BACKDROP_Z_INDEX,
+    backgroundColor: fullScreenOverLayBackground
+  };
+});
+const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spinner__OpaqueContainer",
+  componentId: "components-web__sc-116rqck-3"
+})({
+  opacity: BACKDROP_OPACITY
+});
+
+const recursiveMap = (children, fn) => React.Children.map(children, child => {
+  if (! /*#__PURE__*/React.isValidElement(child)) {
+    return child;
+  }
+
+  if (child.props.children) {
+    return fn( /*#__PURE__*/React.cloneElement(child, {
+      children: recursiveMap(child.props.children, fn)
+    }));
+  }
+
+  return fn(child);
+});
+/**
+ * Loading indicator.
+ */
+
+
+const Spinner = _ref3 => {
+  let {
+    children,
+    fullScreen = false,
+    inline = false,
+    label,
+    show = false,
+    isStatic = false,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    fullScreenOverLayBackground,
+    size,
+    thickness
+  } = useThemeTokens('Spinner', tokens, variant);
+  const {
+    size: sizeVariant = 'large'
+  } = variant;
+  useScrollBlocking([fullScreen, show]);
+
+  if (!show) {
+    return children ?? null;
+  } // Full screen spinner
+
+
+  if (fullScreen) {
+    return /*#__PURE__*/_jsx(FullscreenOverlay, {
+      fullScreenOverLayBackground: fullScreenOverLayBackground,
+      children: /*#__PURE__*/_jsx(SpinnerContainer, {
+        inline: inline,
+        fullScreen: fullScreen,
+        "aria-live": "assertive",
+        ...selectProps(rest),
+        children: /*#__PURE__*/_jsx(SpinnerContent, {
+          label: label,
+          overlay: true,
+          size: size,
+          thickness: thickness,
+          sizeVariant: sizeVariant,
+          isStatic: isStatic
+        })
+      })
+    });
+  } // Overlay spinner
+
+
+  if (children) {
+    return /*#__PURE__*/_jsxs(SpinnerContainer, {
+      inline: inline,
+      "aria-live": "assertive",
+      ...selectProps(rest),
+      children: [/*#__PURE__*/_jsx(SpinnerContent, {
+        label: label,
+        overlay: true,
+        size: size,
+        thickness: thickness,
+        sizeVariant: sizeVariant,
+        isStatic: isStatic
+      }), /*#__PURE__*/_jsx(ContentOverlay, {}), /*#__PURE__*/_jsx(OpaqueContainer, {
+        inert: "true",
+        children: recursiveMap(children, c => {
+          if (c) {
+            return /*#__PURE__*/React.cloneElement(c, {
+              tabIndex: '-1',
+              'aria-hidden': 'true'
+            });
+          }
+
+          return undefined;
+        })
+      })]
+    });
+  } // Standalone spinner
+
+
+  return /*#__PURE__*/_jsx(SpinnerContainer, { ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(SpinnerContent, {
+      label: label,
+      size: size,
+      thickness: thickness,
+      sizeVariant: sizeVariant,
+      isStatic: isStatic
+    })
+  });
+};
+
+Spinner.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Content to be overlaid while the spinner is active. Can be text, any HTML element,
+   * or any component.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Enables body locking.
+   */
+  fullScreen: PropTypes.bool,
+
+  /**
+   * Set the inline prop to true if the Spinner should only cover its children; if
+   * the Spinner should cover the full width of its parent regardless of the size of
+   * its children, inline should be set to false
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Communicates a message to assistive technology while visible. This same message
+   * will appear underneath the spinner when its `size` is `large`.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * The size of the spinner
+   */
+  // size: PropTypes.oneOf(['large', 'small']),
+
+  /**
+   * Whether or not to render the spinner.
+   */
+  show: PropTypes.bool,
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
+};
+export default Spinner;

package/lib-module/Spinner/SpinnerContent.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { BACKDROP_Z_INDEX, LARGE } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SpinnerContent__Container",
+  componentId: "components-web__sc-1c8bd8e-0"
+})(_ref => {
+  let {
+    overlay
+  } = _ref;
+  return {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    ...(overlay && {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      zIndex: BACKDROP_Z_INDEX
+    })
+  };
+});
+
+const SpinnerContent = _ref2 => {
+  let {
+    label,
+    overlay = false,
+    sizeVariant,
+    size,
+    thickness,
+    isStatic,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Container, {
+    overlay: overlay,
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: 3,
+      tokens: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
+        label: label,
+        tokens: {
+          size,
+          thickness
+        },
+        isStatic: isStatic,
+        ...selectProps(rest)
+      }), sizeVariant === LARGE && /*#__PURE__*/_jsx(Typography, {
+        children: label
+      })]
+    })
+  });
+};
+
+SpinnerContent.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Whether the container has to have an overlay styling.
+   */
+  overlay: PropTypes.bool,
+
+  /**
+   * Size (width and height) of the spinner.
+   */
+  size: PropTypes.number,
+
+  /**
+   * The size of the spinner
+   */
+  sizeVariant: PropTypes.oneOf(['large', 'small']),
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
+};
+export default SpinnerContent;

package/lib-module/Spinner/constants.js

@@ -0,0 +1,4 @@
+export const BACKDROP_OPACITY = 0.06;
+export const BACKDROP_Z_INDEX = 1400;
+export const LARGE = 'large';
+export const SMALL = 'small';

package/lib-module/Spinner/index.js

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

package/lib-module/index.js

@@ -17,4 +17,5 @@ export { default as Toast } from './Toast';
 export { default as Table } from './Table';
 export { default as Image } from './Image';
 export { default as WaffleGrid } from './WaffleGrid';
+export { default as Spinner } from './Spinner';
 export * from './baseExports';

package/package.json

@@ -5,11 +5,11 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.34.2",
+    "@telus-uds/components-base": "1.36.0",
     "@telus-uds/system-constants": "^1.2.0",
     "react-dates": "^21.8.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.19.0",
+    "@telus-uds/system-theme-tokens": "^2.21.0",
     "prop-types": "^15.7.2",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -59,5 +59,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.6.0"
+  "version": "1.7.0"
 }

package/src/Modal/Modal.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import ModalContent from './ModalContent'
 
 const Modal = ({
+  children,
   isOpen,
   onClose,
   maxWidth,
@@ -23,7 +24,13 @@ const Modal = ({
   ...nonContentProps
 }) => {
   return (
-    <BaseModal isOpen={isOpen} onClose={onClose} maxWidth={maxWidth} {...nonContentProps}>
+    <BaseModal
+      isOpen={isOpen}
+      onClose={onClose}
+      variant={variant}
+      maxWidth={maxWidth}
+      {...nonContentProps}
+    >
       <ModalContent
         tokens={tokens}
         variant={variant}
@@ -38,12 +45,15 @@ const Modal = ({
         confirmButtonVariant={confirmButtonVariant}
         cancelButtonText={cancelButtonText}
         cancelButtonType={cancelButtonType}
-      />
+      >
+        {children}
+      </ModalContent>
     </BaseModal>
   )
 }
 
 Modal.propTypes = {
+  children: PropTypes.node,
   tokens: PropTypes.object,
   variant: PropTypes.object,
   /**

package/src/Modal/ModalContent.jsx

@@ -66,6 +66,7 @@ const ModalContent = ({
   variant,
   cancelButtonText,
   cancelButtonType: CancelButton = TextButton,
+  children,
   onCancel
 }) => {
   const { headingColor, cancelButtonColor, ...themeTokens } = useThemeTokens(
@@ -118,6 +119,7 @@ const ModalContent = ({
           <Typography>{bodyText}</Typography>
         </Box>
       )}
+      {children}
       {(hasConfirmButton || hasCancelButton) && (
         <StyledFooter {...themeTokens} hasBorder={isContentOverflowing} viewport={viewport}>
           {hasConfirmButton && (
@@ -155,6 +157,7 @@ ModalContent.propTypes = {
   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
 }
 

package/src/PreviewCard/PreviewCard.jsx

@@ -44,7 +44,11 @@ const FullBleedOffsetInner = styled.div(({ borderOffset }) => ({
 
 const defaultTokens = {
   minWidth: 0,
-  shadow: null
+  shadow: null,
+  contentAlignItems: 'stretch',
+  contentJustifyContent: 'flex-start',
+  contentFlexGrow: 0,
+  contentFlexShrink: 0
 }
 
 /**

package/src/Spinner/Spinner.jsx

@@ -0,0 +1,186 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { selectSystemProps, useScrollBlocking, useThemeTokens } from '@telus-uds/components-base'
+import SpinnerContent from './SpinnerContent'
+import { htmlAttrs, media } from '../utils'
+import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const SpinnerContainer = styled.div(({ inline, fullScreen }) => ({
+  position: 'relative',
+  ...(inline && {
+    display: 'block',
+    ...media().from('md').css({
+      display: 'inline-block'
+    })
+  }),
+  ...(fullScreen && { top: '50%', transform: 'translateY(-50%)' })
+}))
+
+const ContentOverlay = styled.div({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  zIndex: BACKDROP_Z_INDEX
+})
+
+const FullscreenOverlay = styled.div(({ fullScreenOverLayBackground }) => ({
+  position: 'fixed',
+  width: '100vw',
+  height: '100vh',
+  top: 0,
+  left: 0,
+  zIndex: BACKDROP_Z_INDEX,
+  backgroundColor: fullScreenOverLayBackground
+}))
+const OpaqueContainer = styled.div({
+  opacity: BACKDROP_OPACITY
+})
+
+const recursiveMap = (children, fn) =>
+  React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child
+    }
+    if (child.props.children) {
+      return fn(
+        React.cloneElement(child, {
+          children: recursiveMap(child.props.children, fn)
+        })
+      )
+    }
+
+    return fn(child)
+  })
+
+/**
+ * Loading indicator.
+ */
+const Spinner = ({
+  children,
+  fullScreen = false,
+  inline = false,
+  label,
+  show = false,
+  isStatic = false,
+  tokens,
+  variant = {},
+  ...rest
+}) => {
+  const { fullScreenOverLayBackground, size, thickness } = useThemeTokens(
+    'Spinner',
+    tokens,
+    variant
+  )
+
+  const { size: sizeVariant = 'large' } = variant
+
+  useScrollBlocking([fullScreen, show])
+
+  if (!show) {
+    return children ?? null
+  }
+
+  // Full screen spinner
+  if (fullScreen) {
+    return (
+      <FullscreenOverlay fullScreenOverLayBackground={fullScreenOverLayBackground}>
+        <SpinnerContainer
+          inline={inline}
+          fullScreen={fullScreen}
+          aria-live="assertive"
+          {...selectProps(rest)}
+        >
+          <SpinnerContent
+            label={label}
+            overlay={true}
+            size={size}
+            thickness={thickness}
+            sizeVariant={sizeVariant}
+            isStatic={isStatic}
+          />
+        </SpinnerContainer>
+      </FullscreenOverlay>
+    )
+  }
+
+  // Overlay spinner
+  if (children) {
+    return (
+      <SpinnerContainer inline={inline} aria-live="assertive" {...selectProps(rest)}>
+        <SpinnerContent
+          label={label}
+          overlay={true}
+          size={size}
+          thickness={thickness}
+          sizeVariant={sizeVariant}
+          isStatic={isStatic}
+        />
+
+        <ContentOverlay />
+
+        <OpaqueContainer inert="true">
+          {recursiveMap(children, (c) => {
+            if (c) {
+              return React.cloneElement(c, { tabIndex: '-1', 'aria-hidden': 'true' })
+            }
+            return undefined
+          })}
+        </OpaqueContainer>
+      </SpinnerContainer>
+    )
+  }
+
+  // Standalone spinner
+  return (
+    <SpinnerContainer {...selectProps(rest)}>
+      <SpinnerContent
+        label={label}
+        size={size}
+        thickness={thickness}
+        sizeVariant={sizeVariant}
+        isStatic={isStatic}
+      />
+    </SpinnerContainer>
+  )
+}
+
+Spinner.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content to be overlaid while the spinner is active. Can be text, any HTML element,
+   * or any component.
+   */
+  children: PropTypes.node,
+  /**
+   * Enables body locking.
+   */
+  fullScreen: PropTypes.bool,
+  /**
+   * Set the inline prop to true if the Spinner should only cover its children; if
+   * the Spinner should cover the full width of its parent regardless of the size of
+   * its children, inline should be set to false
+   */
+  inline: PropTypes.bool,
+  /**
+   * Communicates a message to assistive technology while visible. This same message
+   * will appear underneath the spinner when its `size` is `large`.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * The size of the spinner
+   */
+  // size: PropTypes.oneOf(['large', 'small']),
+  /**
+   * Whether or not to render the spinner.
+   */
+  show: PropTypes.bool,
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
+}
+
+export default Spinner

package/src/Spinner/SpinnerContent.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {
+  ActivityIndicator,
+  StackView,
+  Typography,
+  selectSystemProps
+} from '@telus-uds/components-base'
+import { htmlAttrs } from '../utils'
+import { BACKDROP_Z_INDEX, LARGE } from './constants'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const Container = styled.div(({ overlay }) => ({
+  display: 'inline-flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  ...(overlay && {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    zIndex: BACKDROP_Z_INDEX
+  })
+}))
+
+const SpinnerContent = ({
+  label,
+  overlay = false,
+  sizeVariant,
+  size,
+  thickness,
+  isStatic,
+  ...rest
+}) => {
+  return (
+    <Container overlay={overlay}>
+      <StackView space={3} tokens={{ alignItems: 'center' }}>
+        <ActivityIndicator
+          label={label}
+          tokens={{ size, thickness }}
+          isStatic={isStatic}
+          {...selectProps(rest)}
+        />
+        {sizeVariant === LARGE && <Typography>{label}</Typography>}
+      </StackView>
+    </Container>
+  )
+}
+
+SpinnerContent.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Whether the container has to have an overlay styling.
+   */
+  overlay: PropTypes.bool,
+  /**
+   * Size (width and height) of the spinner.
+   */
+  size: PropTypes.number,
+  /**
+   * The size of the spinner
+   */
+  sizeVariant: PropTypes.oneOf(['large', 'small']),
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
+}
+
+export default SpinnerContent

package/src/Spinner/constants.js

@@ -0,0 +1,4 @@
+export const BACKDROP_OPACITY = 0.06
+export const BACKDROP_Z_INDEX = 1400
+export const LARGE = 'large'
+export const SMALL = 'small'

package/src/Spinner/index.js

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

package/src/index.js

@@ -17,5 +17,6 @@ export { default as Toast } from './Toast'
 export { default as Table } from './Table'
 export { default as Image } from './Image'
 export { default as WaffleGrid } from './WaffleGrid'
+export { default as Spinner } from './Spinner'
 
 export * from './baseExports'

package/types/Spinner.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface SpinnerProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+  fullScreen?: boolean
+  inline?: boolean
+  label: string
+  show?: boolean
+  isStatic?: boolean
+}
+
+declare const Spinner: ComponentType<SpinnerProps>
+
+export default Spinner