@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/index.js

@@ -0,0 +1,317 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Badge: true,
+  OrderedList: true,
+  PreviewCard: true,
+  ResponsiveImage: true,
+  Ribbon: true,
+  Countdown: true,
+  DatePicker: true,
+  Paragraph: true,
+  Span: true,
+  Callout: true,
+  PriceLockup: true,
+  Footnote: true,
+  QuantitySelector: true,
+  IconButton: true,
+  Image: true,
+  DefaultImage: true,
+  transformGradient: true,
+  ssrStyles: true,
+  Breadcrumbs: true,
+  BlockQuote: true,
+  OptimizeImage: true,
+  Testimonial: true,
+  Toast: true,
+  Table: true,
+  WebVideo: true,
+  WaffleGrid: true,
+  Spinner: true,
+  VideoPicker: true,
+  Video: true,
+  StoryCard: true,
+  Disclaimer: true,
+  Card: true,
+  List: true,
+  TermsAndConditions: true,
+  NavigationBar: true,
+  Progress: true,
+  SkeletonProvider: true
+};
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.default;
+  }
+});
+Object.defineProperty(exports, "BlockQuote", {
+  enumerable: true,
+  get: function () {
+    return _BlockQuote.default;
+  }
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function () {
+    return _Breadcrumbs.default;
+  }
+});
+Object.defineProperty(exports, "Callout", {
+  enumerable: true,
+  get: function () {
+    return _Callout.default;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "Countdown", {
+  enumerable: true,
+  get: function () {
+    return _Countdown.default;
+  }
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.default;
+  }
+});
+Object.defineProperty(exports, "DefaultImage", {
+  enumerable: true,
+  get: function () {
+    return _Image.DefaultImage;
+  }
+});
+Object.defineProperty(exports, "Disclaimer", {
+  enumerable: true,
+  get: function () {
+    return _Disclaimer.default;
+  }
+});
+Object.defineProperty(exports, "Footnote", {
+  enumerable: true,
+  get: function () {
+    return _Footnote.default;
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _IconButton.default;
+  }
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _Image.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "NavigationBar", {
+  enumerable: true,
+  get: function () {
+    return _NavigationBar.default;
+  }
+});
+Object.defineProperty(exports, "OptimizeImage", {
+  enumerable: true,
+  get: function () {
+    return _OptimizeImage.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 () {
+    return _PreviewCard.default;
+  }
+});
+Object.defineProperty(exports, "PriceLockup", {
+  enumerable: true,
+  get: function () {
+    return _PriceLockup.default;
+  }
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
+Object.defineProperty(exports, "QuantitySelector", {
+  enumerable: true,
+  get: function () {
+    return _QuantitySelector.default;
+  }
+});
+Object.defineProperty(exports, "ResponsiveImage", {
+  enumerable: true,
+  get: function () {
+    return _ResponsiveImage.default;
+  }
+});
+Object.defineProperty(exports, "Ribbon", {
+  enumerable: true,
+  get: function () {
+    return _Ribbon.default;
+  }
+});
+Object.defineProperty(exports, "SkeletonProvider", {
+  enumerable: true,
+  get: function () {
+    return _SkeletonProvider.default;
+  }
+});
+Object.defineProperty(exports, "Span", {
+  enumerable: true,
+  get: function () {
+    return _Span.default;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
+Object.defineProperty(exports, "StoryCard", {
+  enumerable: true,
+  get: function () {
+    return _StoryCard.default;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.default;
+  }
+});
+Object.defineProperty(exports, "TermsAndConditions", {
+  enumerable: true,
+  get: function () {
+    return _TermsAndConditions.default;
+  }
+});
+Object.defineProperty(exports, "Testimonial", {
+  enumerable: true,
+  get: function () {
+    return _Testimonial.default;
+  }
+});
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
+Object.defineProperty(exports, "Video", {
+  enumerable: true,
+  get: function () {
+    return _Video.default;
+  }
+});
+Object.defineProperty(exports, "VideoPicker", {
+  enumerable: true,
+  get: function () {
+    return _VideoPicker.default;
+  }
+});
+Object.defineProperty(exports, "WaffleGrid", {
+  enumerable: true,
+  get: function () {
+    return _WaffleGrid.default;
+  }
+});
+Object.defineProperty(exports, "WebVideo", {
+  enumerable: true,
+  get: function () {
+    return _WebVideo.default;
+  }
+});
+Object.defineProperty(exports, "ssrStyles", {
+  enumerable: true,
+  get: function () {
+    return _utils.ssrStyles;
+  }
+});
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _utils.transformGradient;
+  }
+});
+var _Badge = _interopRequireDefault(require("./Badge"));
+var _OrderedList = _interopRequireDefault(require("./OrderedList"));
+var _PreviewCard = _interopRequireDefault(require("./PreviewCard"));
+var _ResponsiveImage = _interopRequireDefault(require("./ResponsiveImage"));
+var _Ribbon = _interopRequireDefault(require("./Ribbon"));
+var _Countdown = _interopRequireDefault(require("./Countdown"));
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _Paragraph = _interopRequireDefault(require("./Paragraph"));
+var _Span = _interopRequireDefault(require("./Span"));
+var _Callout = _interopRequireDefault(require("./Callout"));
+var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
+var _Footnote = _interopRequireDefault(require("./Footnote"));
+var _QuantitySelector = _interopRequireDefault(require("./QuantitySelector"));
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _Image = _interopRequireWildcard(require("./Image"));
+var _utils = require("./utils");
+var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
+var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
+var _OptimizeImage = _interopRequireDefault(require("./OptimizeImage"));
+var _Testimonial = _interopRequireDefault(require("./Testimonial"));
+var _Toast = _interopRequireDefault(require("./Toast"));
+var _Table = _interopRequireDefault(require("./Table"));
+var _WebVideo = _interopRequireDefault(require("./WebVideo"));
+var _WaffleGrid = _interopRequireDefault(require("./WaffleGrid"));
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+var _VideoPicker = _interopRequireDefault(require("./VideoPicker"));
+var _Video = _interopRequireDefault(require("./Video"));
+var _StoryCard = _interopRequireDefault(require("./StoryCard"));
+var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
+var _Card = _interopRequireDefault(require("./Card"));
+var _List = _interopRequireDefault(require("./List"));
+var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
+var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
+var _Progress = _interopRequireDefault(require("./Progress"));
+var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
+var _baseExports = require("./baseExports");
+Object.keys(_baseExports).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _baseExports[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _baseExports[key];
+    }
+  });
+});
+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 }; }

package/lib/cjs/server.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function () {
+    return _server.default;
+  }
+});
+var _server = _interopRequireDefault(require("./Image/server"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/shared/ConditionalWrapper/ConditionalWrapper.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(e) { return e && e.__esModule ? e : { default: e }; }
+const ConditionalWrapper = _ref => {
+  let {
+    children,
+    condition,
+    WrapperComponent,
+    wrapperProps
+  } = _ref;
+  return condition ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
+    ...wrapperProps,
+    children: children
+  }) : children;
+};
+ConditionalWrapper.propTypes = {
+  children: _propTypes.default.node,
+  condition: _propTypes.default.bool,
+  WrapperComponent: _propTypes.default.elementType,
+  wrapperProps: _propTypes.default.object
+};
+var _default = exports.default = ConditionalWrapper;

package/lib/cjs/shared/ConditionalWrapper/index.js

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

package/lib/cjs/shared/FullBleedContent/FullBleedContent.js

@@ -0,0 +1,108 @@
+"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 _ResponsiveImage = _interopRequireDefault(require("../../ResponsiveImage"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectFullBleedContentProps = _ref => {
+  let {
+    alt,
+    height,
+    loading,
+    src,
+    width,
+    fallbackSrc = src,
+    lgSrc = src,
+    mdSrc = src,
+    smSrc = src,
+    xlSrc = src,
+    xsSrc = src
+  } = _ref;
+  return {
+    alt,
+    height,
+    loading,
+    src,
+    width,
+    fallbackSrc,
+    lgSrc,
+    mdSrc,
+    smSrc,
+    xlSrc,
+    xsSrc
+  };
+};
+const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "FullBleedContent__FullBleedContentContainer",
+  componentId: "components-web__sc-1130ea5-0"
+})(_ref2 => {
+  let {
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+  } = _ref2;
+  return {
+    overflow: 'hidden',
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+  };
+});
+
+/**
+ * Full bleed content component can accept either a single source,
+ * a number of sources corresponding to the `ResponsiveImage` component API,
+ * or a custom component.
+ */
+const FullBleedContent = _ref3 => {
+  let {
+    borderRadius,
+    content,
+    ...rest
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, {
+    ...borderRadius,
+    children: content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+      ...selectFullBleedContentProps(rest)
+    })
+  });
+};
+FullBleedContent.propTypes = {
+  /**
+   * Content border radius matching the edge values on the parent card.
+   */
+  borderRadius: _propTypes.default.shape({
+    borderBottomLeftRadius: _propTypes.default.number,
+    borderBottomRightRadius: _propTypes.default.number,
+    borderTopLeftRadius: _propTypes.default.number,
+    borderTopRightRadius: _propTypes.default.number
+  }),
+  /**
+   * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
+   */
+  content: _propTypes.default.node,
+  /**
+   * Image source.
+   */
+  src: _propTypes.default.string,
+  /**
+   * Also accept props for `ResponsiveImage`...
+   */
+  ..._ResponsiveImage.default.propTypes,
+  /**
+   * ...but make the required ones optional.
+   */
+  alt: _propTypes.default.string,
+  xsSrc: _propTypes.default.string,
+  smSrc: _propTypes.default.string,
+  fallbackSrc: _propTypes.default.string
+};
+var _default = exports.default = FullBleedContent;

package/lib/cjs/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Gets the border radius values for an item of content that goes right up to
+ * the edges of its container, to the top, bottom, left or right of other content.
+ *
+ * Gives the full bleed item the same border radius as the container on the corners
+ * that are flush with the corners of the container.
+ *
+ * @param {number} borderRadius
+ * @param {'top'|'bottom'|'left'|'right'} position
+ * @param {boolean} hasFooter
+ * @returns
+ */
+const getFullBleedBorderRadius = function (borderRadius, position) {
+  let hasFooter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const innerBorderRadius = {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0
+  };
+  if (position && position !== 'none') {
+    if (borderRadius) {
+      // Depending on the position of the image, we need to round some
+      // corners, but not the others
+      switch (position) {
+        case 'bottom':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomLeftRadius = borderRadius;
+            innerBorderRadius.borderBottomRightRadius = borderRadius;
+          }
+          break;
+        case 'left':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomLeftRadius = borderRadius;
+          }
+          innerBorderRadius.borderTopLeftRadius = borderRadius;
+          break;
+        case 'right':
+          if (!hasFooter) {
+            innerBorderRadius.borderBottomRightRadius = borderRadius;
+          }
+          innerBorderRadius.borderTopRightRadius = borderRadius;
+          break;
+        case 'top':
+          innerBorderRadius.borderTopLeftRadius = borderRadius;
+          innerBorderRadius.borderTopRightRadius = borderRadius;
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  return innerBorderRadius;
+};
+var _default = exports.default = getFullBleedBorderRadius;

package/lib/cjs/shared/FullBleedContent/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "getFullBleedBorderRadius", {
+  enumerable: true,
+  get: function () {
+    return _getFullBleedBorderRadius.default;
+  }
+});
+Object.defineProperty(exports, "useFullBleedContentProps", {
+  enumerable: true,
+  get: function () {
+    return _useFullBleedContentProps.default;
+  }
+});
+var _FullBleedContent = _interopRequireDefault(require("./FullBleedContent"));
+var _getFullBleedBorderRadius = _interopRequireDefault(require("./getFullBleedBorderRadius"));
+var _useFullBleedContentProps = _interopRequireDefault(require("./useFullBleedContentProps"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _FullBleedContent.default;

package/lib/cjs/shared/FullBleedContent/useFullBleedContentProps.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _componentsBase = require("@telus-uds/components-base");
+const getContentStackDirection = fullBleedContentPosition => {
+  switch (fullBleedContentPosition) {
+    case 'left':
+      return 'row-reverse';
+    case 'right':
+      return 'row';
+    case 'top':
+      return 'column-reverse';
+    default:
+      return 'column';
+  }
+};
+const getContentStackAlign = fullBleedContentAlign => {
+  switch (fullBleedContentAlign) {
+    case 'center':
+      return 'center';
+    case 'end':
+    case 'flex-end':
+      return 'flex-end';
+    case 'start':
+    case 'flex-start':
+      return 'flex-start';
+    default:
+      return 'stretch';
+  }
+};
+
+/**
+ * Resolves a set of `FullBleedContent` props into the variables a container needs to
+ * correctly position a `FullBleedContent` component for the current viewport.
+ *
+ * @param {object} [fullBleedContent] - a set of valid proptypes for FullBleedContent
+ * @returns
+ */
+const useFullBleedContentProps = fullBleedContent => {
+  const {
+    align: fullBleedContentAlignProp,
+    position: fullBleedContentPositionProp,
+    ...fullBleedContentProps
+  } = fullBleedContent ?? {
+    position: 'none'
+  };
+  const fullBleedContentPosition = (0, _componentsBase.useResponsiveProp)(fullBleedContentPositionProp, 'none');
+  const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
+  const fullBleedContentAlign = (0, _componentsBase.useResponsiveProp)(fullBleedContentAlignProp, 'stretch');
+  const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
+  return {
+    contentStackAlign,
+    contentStackDirection,
+    fullBleedContentPosition,
+    fullBleedContentProps
+  };
+};
+var _default = exports.default = useFullBleedContentProps;