@telus-uds/components-web 1.2.0 → 1.4.0

package/lib/ResponsiveImage/ResponsiveImage.js

@@ -0,0 +1,115 @@
+"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 _systemConstants = require("@telus-uds/system-constants");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const staticStyles = {
+  image: {
+    display: 'block',
+    width: '100%'
+  }
+};
+/**
+ * Provide different image sources for different screen sizes.
+ */
+
+const ResponsiveImage = _ref => {
+  let {
+    xsSrc,
+    smSrc,
+    mdSrc,
+    lgSrc,
+    xlSrc,
+    fallbackSrc,
+    alt,
+    loading = 'eager',
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("picture", { ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: xlSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.xl)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: lgSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.lg)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: mdSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.md)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: smSrc,
+      media: `(min-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.sm)}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+      srcSet: xsSrc,
+      media: `(max-width: ${_systemConstants.viewports.map.get(_systemConstants.viewports.sm) - 1}px)`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: fallbackSrc,
+      alt: alt,
+      style: staticStyles.image,
+      loading: loading
+    })]
+  });
+};
+
+ResponsiveImage.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The src attribute used for screen widths up to 575px
+   */
+  xsSrc: _propTypes.default.string.isRequired,
+
+  /**
+   * The src attribute used for screen widths greater than 576px
+   */
+  smSrc: _propTypes.default.string.isRequired,
+
+  /**
+   * The src attribute used for screen widths greater than 768px
+   */
+  mdSrc: _propTypes.default.string,
+
+  /**
+   * The src attribute used for screen widths greater than 992px
+   */
+  lgSrc: _propTypes.default.string,
+
+  /**
+   * The src attribute used for screen widths greater than 1200px
+   */
+  xlSrc: _propTypes.default.string,
+
+  /**
+   * The src attribute used for browsers that don't support responsive images (InternetExplorer)
+   */
+  fallbackSrc: _propTypes.default.string.isRequired,
+
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: _propTypes.default.string.isRequired,
+
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: _propTypes.default.oneOf(['eager', 'lazy'])
+};
+var _default = ResponsiveImage;
+exports.default = _default;

package/lib/ResponsiveImage/index.js

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

package/lib/Ribbon/Ribbon.js

@@ -19,7 +19,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import palette from '@telus-uds/palette-allium/build/web/palette'
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 
 const RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({

package/lib/Span/Span.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
+  displayName: "Span__StyledSpan",
+  componentId: "components-web__sc-o7sihn-0"
+})(["", "};"], _ref => {
+  let {
+    flex
+  } = _ref;
+  return flex ? 'display: inline-flex' : '';
+});
+/**
+ * Text as an HTML ```<span>``` element.
+ *
+ * Span may be used in cases where an inline span or direct access to HTML attributes is required.
+ * In most cases, `Typography` should be used for text, or Paragraph for body text.
+ */
+
+
+const Span = _ref2 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    flex,
+    ...rest
+  } = _ref2;
+  const style = (0, _utils.useTypographyTheme)(variant, tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
+    "data-testid": testID,
+    flex: flex,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Span.propTypes = { ...selectedSystemPropTypes,
+  children: _propTypes.default.node.isRequired,
+  testID: _propTypes.default.string,
+
+  /**
+   * Sets display to inline-flex so that children are laid out using the flex model.
+   * Use this if the span contains children that expect to be inside a flex container.
+   */
+  flex: _propTypes.default.bool,
+
+  /**
+   * Span takes the same tokens overrides as Typography
+   */
+  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+
+  /**
+   * Span can take any of Typography's theme variants
+   */
+  variant: _propTypes.default.exact({
+    bold: _propTypes.default.bool,
+    colour: _propTypes.default.oneOf(['secondary', 'tertiary']),
+    compact: _propTypes.default.bool,
+    inverse: _propTypes.default.bool,
+    size: _propTypes.default.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
+    weight: _propTypes.default.oneOf(['semibold', 'bold'])
+  })
+};
+var _default = Span;
+exports.default = _default;

package/lib/Span/index.js

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

package/lib/index.js

@@ -5,8 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
+  OrderedList: true,
+  PreviewCard: true,
+  ResponsiveImage: true,
   Ribbon: true,
-  transformGradient: true
+  DatePicker: true,
+  Span: true,
+  ExpandCollapseMini: true,
+  Callout: true,
+  PriceLockup: true,
+  Footnote: true,
+  transformGradient: true,
+  Breadcrumbs: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -14,12 +24,72 @@ Object.defineProperty(exports, "Badge", {
     return _Badge.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, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.default;
+  }
+});
+Object.defineProperty(exports, "ExpandCollapseMini", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapseMini.default;
+  }
+});
+Object.defineProperty(exports, "Footnote", {
+  enumerable: true,
+  get: function () {
+    return _Footnote.default;
+  }
+});
+Object.defineProperty(exports, "OrderedList", {
+  enumerable: true,
+  get: function () {
+    return _OrderedList.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, "ResponsiveImage", {
+  enumerable: true,
+  get: function () {
+    return _ResponsiveImage.default;
+  }
+});
 Object.defineProperty(exports, "Ribbon", {
   enumerable: true,
   get: function () {
     return _Ribbon.default;
   }
 });
+Object.defineProperty(exports, "Span", {
+  enumerable: true,
+  get: function () {
+    return _Span.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
@@ -29,10 +99,30 @@ Object.defineProperty(exports, "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 _DatePicker = _interopRequireDefault(require("./DatePicker"));
+
+var _Span = _interopRequireDefault(require("./Span"));
+
+var _ExpandCollapseMini = _interopRequireDefault(require("./ExpandCollapseMini"));
+
+var _Callout = _interopRequireDefault(require("./Callout"));
+
+var _PriceLockup = _interopRequireDefault(require("./PriceLockup"));
+
+var _Footnote = _interopRequireDefault(require("./Footnote"));
+
 var _utils = require("./utils");
 
+var _Breadcrumbs = _interopRequireDefault(require("./Breadcrumbs"));
+
 var _baseExports = require("./baseExports");
 
 Object.keys(_baseExports).forEach(function (key) {

package/lib/shared/FullBleedContent/FullBleedContent.js

@@ -0,0 +1,121 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = FullBleedContent;
+exports.default = _default;

package/lib/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -0,0 +1,73 @@
+"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 = getFullBleedBorderRadius;
+exports.default = _default;

package/lib/shared/FullBleedContent/index.js

@@ -0,0 +1,29 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _FullBleedContent.default;
+exports.default = _default;

package/lib/shared/FullBleedContent/useFullBleedContentProps.js

@@ -0,0 +1,73 @@
+"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 = useFullBleedContentProps;
+exports.default = _default;