@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Spinner/Spinner.js

@@ -0,0 +1,221 @@
+"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 _portal = require("@gorhom/portal");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _SpinnerContent = _interopRequireDefault(require("./SpinnerContent"));
+var _utils = require("../utils");
+var _constants = require("./constants");
+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 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 = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    fullScreen = false,
+    inline = false,
+    label,
+    labelPosition,
+    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)(_portal.Portal, {
+      children: /*#__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,
+            labelPosition: labelPosition,
+            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,
+        labelPosition: labelPosition,
+        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, {
+    ref: ref,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+      label: label,
+      labelPosition: labelPosition,
+      size: size,
+      thickness: thickness,
+      sizeVariant: sizeVariant,
+      isStatic: isStatic
+    })
+  });
+});
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Spinner'),
+  /**
+   * 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,
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: _propTypes.default.string
+};
+var _default = exports.default = Spinner;

package/lib/cjs/Spinner/SpinnerContent.js

@@ -0,0 +1,100 @@
+"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 _utils = require("../utils");
+var _constants = require("./constants");
+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 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 = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    label,
+    labelPosition,
+    overlay = false,
+    sizeVariant,
+    size,
+    thickness,
+    isStatic,
+    ...rest
+  } = _ref2;
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    overlay: overlay,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 3,
+      tokens: {
+        alignItems: 'center'
+      },
+      direction: labelMapping[labelPosition],
+      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.displayName = 'SpinnerContent';
+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 = exports.default = SpinnerContent;

package/lib/cjs/Spinner/constants.js

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

package/lib/cjs/Spinner/index.js

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

package/lib/cjs/StoryCard/StoryCard.js

@@ -0,0 +1,219 @@
+"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 _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+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 }; }
+// Passes React Native-oriented system props through UDS PressableCardBase
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
+
+// Stop changes to the card's inner border width causing the size and
+// apparent position of the full bleed image to change.
+const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-yhvivu-0"
+})(_ref => {
+  let {
+    borderOffset
+  } = _ref;
+  return {
+    overflow: 'hidden',
+    marginTop: borderOffset * 2
+  };
+});
+const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-yhvivu-1"
+})(_ref2 => {
+  let {
+    borderOffset
+  } = _ref2;
+  return {
+    position: 'relative',
+    margin: 0 - borderOffset
+  };
+});
+
+/**
+ * Showcase and guide users to another page, offering a description of that page's story.
+ * Whole card is interactive, width expands based on column or container.
+ *
+ * - Use `tag` to show category of content
+ * - Use `date` to show when the story was published
+ * - Use `title` to show title of the story
+ * - Use `description` to show description of the story
+ * - Use `href` to set the target URL
+ * - Use `fullBleedContent` to set the thumbnail image
+ */
+const StoryCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    tag,
+    date,
+    title,
+    description,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    onPress,
+    href,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    fullBleedContentPosition,
+    contentStackDirection,
+    fullBleedContentProps
+  } = (0, _FullBleedContent.useFullBleedContentProps)({
+    ...fullBleedContent,
+    position: 'bottom'
+  });
+  const generalTokens = (0, _componentsBase.useThemeTokens)('StoryCard', tokens, variant);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('StoryCard', tokens, variant);
+  const getPressableCardTokens = cardState => getTokens(cardState);
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    ref: ref,
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderRadius,
+        borderWidth
+      } = getPressableCardTokens(cardState);
+
+      // Stop content jumping around as border size changes
+      const borderOffset = borderWidth - generalTokens.borderWidth;
+      const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius + borderOffset, fullBleedContentPosition);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        direction: contentStackDirection,
+        tokens: {
+          justifyContent: 'space-between',
+          flexGrow: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+          horizontal: {
+            xs: 4,
+            lg: 5,
+            options: {
+              subtract: borderOffset
+            }
+          },
+          vertical: {
+            xs: 5,
+            lg: 7,
+            options: {
+              subtract: borderOffset
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackWrap, {
+            space: 1,
+            tokens: {
+              justifyContent: 'space-between',
+              alignItems: 'baseline'
+            },
+            children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'eyebrow'
+              },
+              children: tag
+            }), Boolean(date) &&
+            /*#__PURE__*/
+            // TODO: get user locale and apply date formatting: "MMM DD, YYYY" for `en` and "YYYY-MM-DD" for `fr`
+            // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
+            (0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'small'
+              },
+              children: date
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+            variant: {
+              decorative: true
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 3
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              size: 'h3'
+            },
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            children: description
+          })]
+        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
+          borderOffset: borderOffset,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
+            borderOffset: borderOffset,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+              borderRadius: fullBleedBorderRadius,
+              ...fullBleedContentProps
+            })
+          })
+        })]
+      });
+    }
+  });
+});
+StoryCard.displayName = 'StoryCard';
+StoryCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('StoryCard'),
+  /**
+   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
+   * a `StoryCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
+   * Please use `onPress` prop instead `href` to organize navigation in cases like this.
+   *
+   * @see https://github.com/telus/allium-design-system/issues/6
+   */
+  href: _propTypes.default.string,
+  /**
+   * Optional function to be called on press e.g. for within-page navigation.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Text stating the category of the content.
+   */
+  tag: _propTypes.default.string,
+  /**
+   * Text stating the date a story was published.
+   */
+  date: _propTypes.default.string.isRequired,
+  /**
+   * Text stating the title or headline of the story.
+   */
+  title: _propTypes.default.string.isRequired,
+  /**
+   * Text giving a short description of the story. One paragraph of plain text.
+   */
+  description: _propTypes.default.string.isRequired,
+  /**
+   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
+   *
+   * @deprecated
+   */
+  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
+  /**
+   * Full bleed image to be placed on the card.
+   */
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+};
+var _default = exports.default = (0, _componentsBase.withLinkRouter)(StoryCard);

package/lib/cjs/StoryCard/index.js

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

package/lib/cjs/Table/Body.js

@@ -0,0 +1,24 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+const Body = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    ref: ref,
+    children: children
+  });
+});
+Body.displayName = 'Body';
+Body.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = Body;