@telus-uds/components-web 1.3.0 → 1.5.0

package/lib/index.js

@@ -6,8 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   Badge: true,
   OrderedList: true,
+  PreviewCard: true,
+  ResponsiveImage: true,
   Ribbon: true,
-  transformGradient: true
+  DatePicker: true,
+  Paragraph: true,
+  Span: true,
+  ExpandCollapseMini: true,
+  Callout: true,
+  PriceLockup: true,
+  Footnote: true,
+  transformGradient: true,
+  Breadcrumbs: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -15,18 +25,78 @@ 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, "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, "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 () {
@@ -38,10 +108,30 @@ 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 _Paragraph = _interopRequireDefault(require("./Paragraph"));
+
+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;

package/lib/utils/index.js

@@ -9,15 +9,47 @@ Object.defineProperty(exports, "htmlAttrs", {
     return _htmlAttrs.default;
   }
 });
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function () {
+    return _media.default;
+  }
+});
+Object.defineProperty(exports, "renderStructuredContent", {
+  enumerable: true,
+  get: function () {
+    return _renderStructuredContent.default;
+  }
+});
 Object.defineProperty(exports, "transformGradient", {
   enumerable: true,
   get: function () {
     return _transforms.transformGradient;
   }
 });
+Object.defineProperty(exports, "useTypographyTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTypographyTheme.default;
+  }
+});
+Object.defineProperty(exports, "warn", {
+  enumerable: true,
+  get: function () {
+    return _logger.warn;
+  }
+});
 
 var _transforms = require("./transforms");
 
+var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
+
 var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
 
+var _logger = require("./logger");
+
+var _media = _interopRequireDefault(require("./media"));
+
+var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/logger.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warn = exports.deprecate = exports.default = void 0;
+
+const deprecate = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+
+exports.deprecate = deprecate;
+
+const warn = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+
+exports.warn = warn;
+var _default = {
+  deprecate,
+  warn
+};
+exports.default = _default;

package/lib/utils/media.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = media;
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+function media() {
+  return {
+    query: {},
+
+    from(breakpoint) {
+      if (breakpoint !== _systemConstants.viewports.xs) {
+        this.query.minWidth = breakpoint;
+      }
+
+      return this;
+    },
+
+    until(breakpoint) {
+      this.query.maxWidth = breakpoint;
+      return this;
+    },
+
+    and(custom) {
+      this.query.and = custom;
+      return this;
+    },
+
+    css(style) {
+      const {
+        minWidth,
+        maxWidth,
+        and
+      } = this.query;
+      const min = minWidth ? `(min-width: ${_systemConstants.viewports.map.get(minWidth)}px)` : undefined;
+      const max = maxWidth ? `(max-width: ${_systemConstants.viewports.map.get(maxWidth) - 1}px)` : undefined;
+
+      if (typeof min !== 'undefined' || typeof max !== 'undefined' || typeof and !== 'undefined') {
+        const mediaQuery = `@media ${[min, max, and].filter(a => a).join(' and ')}`;
+        this.query = {};
+        return {
+          [mediaQuery]: { ...(typeof style === 'function' ? style() : style)
+          }
+        };
+      }
+
+      return typeof style === 'function' ? style() : style;
+    }
+
+  };
+}

package/lib/utils/renderStructuredContent.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Takes a string content and marks up all the links in it by wrapping them
+ * in `Link` component.
+ */
+const generateLinks = content => {
+  const linkRegex = /<\s*a([^>]*)>(.*?)<\s*\/\s*a>/g;
+  const attributeRegex = /(\w+)\s*=\s*((["'])(.*?)\3|(?=\s|\/>))/g;
+  const parts = content.split(linkRegex);
+
+  if (parts.length === 1) {
+    return parts;
+  } // Start with first anchor text, attributes will be in the previous part
+
+
+  for (let i = 2; i < parts.length; i += 3) {
+    const o = {}; // Get attributes from previous part
+
+    const attributes = parts[i - 1].trim(); // Create object from attributes
+
+    const matchedAttributes = attributes.match(attributeRegex);
+
+    if (matchedAttributes) {
+      matchedAttributes.forEach(attribute => {
+        const split = attribute.split('=');
+        o[split[0]] = split[1].substr(1, split[1].length - 2);
+      });
+    } // Remove anchor attributes from parts
+
+
+    parts[i - 1] = undefined; // Replace anchor text with Link in parts
+
+    parts[i] = /*#__PURE__*/(0, _react.createElement)(_componentsBase.Link, { ...o,
+      key: i
+    }, parts[i]);
+  }
+
+  return parts;
+};
+/**
+ * Takes an array of strings and in each element replaces the breaks with `<br>` tags.
+ */
+
+
+const generateBreaks = parts => {
+  const breakRegex = /<br\s?\/*>/g;
+  const partsWithBreaks = parts;
+
+  for (let i = 0; i < partsWithBreaks.length; i += 1) {
+    if (typeof partsWithBreaks[i] === 'string' && partsWithBreaks[i].search(breakRegex) !== -1) {
+      const toSplit = partsWithBreaks[i].split(breakRegex);
+
+      for (let x = 1; x < toSplit.length; x += 2) {
+        toSplit.splice(x, 0, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, `break-${i}-${x}`));
+      }
+
+      partsWithBreaks[i] = toSplit;
+    }
+  }
+
+  return partsWithBreaks;
+};
+
+const renderStructuredContent = content => {
+  if (typeof content !== 'string') {
+    return content;
+  }
+
+  return generateBreaks(generateLinks(content));
+};
+
+var _default = renderStructuredContent;
+exports.default = _default;

package/lib/utils/useTypographyTheme.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _componentsBase = require("@telus-uds/components-base");
+
+const useTypographyTheme = (variant, tokens) => {
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Typography', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const {
+    fontSize,
+    lineHeight,
+    ...rnStyles
+  } = (0, _componentsBase.applyTextStyles)({ ...themeTokens,
+    themeOptions
+  });
+  return { ...rnStyles,
+    fontSize: `${fontSize}px`,
+    lineHeight: `${lineHeight}px`
+  };
+};
+
+var _default = useTypographyTheme;
+exports.default = _default;