@telus-uds/components-web 1.3.0 → 1.5.0

package/lib-module/ResponsiveImage/ResponsiveImage.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { viewports } from '@telus-uds/system-constants';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([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__*/_jsxs("picture", { ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx("source", {
+      srcSet: xlSrc,
+      media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: lgSrc,
+      media: `(min-width: ${viewports.map.get(viewports.lg)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: mdSrc,
+      media: `(min-width: ${viewports.map.get(viewports.md)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: smSrc,
+      media: `(min-width: ${viewports.map.get(viewports.sm)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: xsSrc,
+      media: `(max-width: ${viewports.map.get(viewports.sm) - 1}px)`
+    }), /*#__PURE__*/_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.string.isRequired,
+
+  /**
+   * The src attribute used for screen widths greater than 576px
+   */
+  smSrc: PropTypes.string.isRequired,
+
+  /**
+   * The src attribute used for screen widths greater than 768px
+   */
+  mdSrc: PropTypes.string,
+
+  /**
+   * The src attribute used for screen widths greater than 992px
+   */
+  lgSrc: PropTypes.string,
+
+  /**
+   * The src attribute used for screen widths greater than 1200px
+   */
+  xlSrc: PropTypes.string,
+
+  /**
+   * The src attribute used for browsers that don't support responsive images (InternetExplorer)
+   */
+  fallbackSrc: PropTypes.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.string.isRequired,
+
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: PropTypes.oneOf(['eager', 'lazy'])
+};
+export default ResponsiveImage;

package/lib-module/ResponsiveImage/index.js

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

package/lib-module/Ribbon/Ribbon.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'; // import palette from '@telus-uds/palette-allium/build/web/palette'
-
+import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib-module/Span/Span.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs, useTypographyTheme } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledSpan = /*#__PURE__*/styled.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 = useTypographyTheme(variant, tokens);
+  return /*#__PURE__*/_jsx(StyledSpan, {
+    "data-testid": testID,
+    flex: flex,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Span.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  testID: PropTypes.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.bool,
+
+  /**
+   * Span takes the same tokens overrides as Typography
+   */
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+
+  /**
+   * Span can take any of Typography's theme variants
+   */
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    compact: PropTypes.bool,
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
+    weight: PropTypes.oneOf(['semibold', 'bold'])
+  })
+};
+export default Span;

package/lib-module/Span/index.js

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

package/lib-module/index.js

@@ -1,5 +1,15 @@
 export { default as Badge } from './Badge';
 export { default as OrderedList } from './OrderedList';
+export { default as PreviewCard } from './PreviewCard';
+export { default as ResponsiveImage } from './ResponsiveImage';
 export { default as Ribbon } from './Ribbon';
+export { default as DatePicker } from './DatePicker';
+export { default as Paragraph } from './Paragraph';
+export { default as Span } from './Span';
+export { default as ExpandCollapseMini } from './ExpandCollapseMini';
+export { default as Callout } from './Callout';
+export { default as PriceLockup } from './PriceLockup';
+export { default as Footnote } from './Footnote';
 export { transformGradient } from './utils';
+export { default as Breadcrumbs } from './Breadcrumbs';
 export * from './baseExports';

package/lib-module/shared/FullBleedContent/FullBleedContent.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ResponsiveImage from '../../ResponsiveImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+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__*/styled.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__*/_jsx(FullBleedContentContainer, { ...borderRadius,
+    children: content ?? /*#__PURE__*/_jsx(ResponsiveImage, { ...selectFullBleedContentProps(rest)
+    })
+  });
+};
+
+FullBleedContent.propTypes = {
+  /**
+   * Content border radius matching the edge values on the parent card.
+   */
+  borderRadius: PropTypes.shape({
+    borderBottomLeftRadius: PropTypes.number,
+    borderBottomRightRadius: PropTypes.number,
+    borderTopLeftRadius: PropTypes.number,
+    borderTopRightRadius: PropTypes.number
+  }),
+
+  /**
+   * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
+   */
+  content: PropTypes.node,
+
+  /**
+   * Image source.
+   */
+  src: PropTypes.string,
+
+  /**
+   * Also accept props for `ResponsiveImage`...
+   */
+  ...ResponsiveImage.propTypes,
+
+  /**
+   * ...but make the required ones optional.
+   */
+  alt: PropTypes.string,
+  xsSrc: PropTypes.string,
+  smSrc: PropTypes.string,
+  fallbackSrc: PropTypes.string
+};
+export default FullBleedContent;

package/lib-module/shared/FullBleedContent/getFullBleedBorderRadius.js

@@ -0,0 +1,65 @@
+/**
+ * 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;
+};
+
+export default getFullBleedBorderRadius;

package/lib-module/shared/FullBleedContent/index.js

@@ -0,0 +1,4 @@
+import FullBleedContent from './FullBleedContent';
+export default FullBleedContent;
+export { default as getFullBleedBorderRadius } from './getFullBleedBorderRadius';
+export { default as useFullBleedContentProps } from './useFullBleedContentProps';

package/lib-module/shared/FullBleedContent/useFullBleedContentProps.js

@@ -0,0 +1,65 @@
+import { useResponsiveProp } from '@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 = useResponsiveProp(fullBleedContentPositionProp, 'none');
+  const contentStackDirection = getContentStackDirection(fullBleedContentPosition);
+  const fullBleedContentAlign = useResponsiveProp(fullBleedContentAlignProp, 'stretch');
+  const contentStackAlign = getContentStackAlign(fullBleedContentAlign);
+  return {
+    contentStackAlign,
+    contentStackDirection,
+    fullBleedContentPosition,
+    fullBleedContentProps
+  };
+};
+
+export default useFullBleedContentProps;

package/lib-module/utils/index.js

@@ -1,3 +1,7 @@
 import { transformGradient } from './transforms';
+import useTypographyTheme from './useTypographyTheme';
 import htmlAttrs from './htmlAttrs';
-export { htmlAttrs, transformGradient };
+import { warn } from './logger';
+import media from './media';
+import renderStructuredContent from './renderStructuredContent';
+export { htmlAttrs, transformGradient, useTypographyTheme, warn, media, renderStructuredContent };

package/lib-module/utils/logger.js

@@ -0,0 +1,18 @@
+export const deprecate = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+export const warn = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+
+  console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
+};
+export default {
+  deprecate,
+  warn
+};

package/lib-module/utils/media.js

@@ -0,0 +1,46 @@
+import { viewports } from '@telus-uds/system-constants';
+export default function media() {
+  return {
+    query: {},
+
+    from(breakpoint) {
+      if (breakpoint !== 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: ${viewports.map.get(minWidth)}px)` : undefined;
+      const max = maxWidth ? `(max-width: ${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-module/utils/renderStructuredContent.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from '@telus-uds/components-base';
+/**
+ * Takes a string content and marks up all the links in it by wrapping them
+ * in `Link` component.
+ */
+
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+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__*/_createElement(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__*/_jsx("br", {}, `break-${i}-${x}`));
+      }
+
+      partsWithBreaks[i] = toSplit;
+    }
+  }
+
+  return partsWithBreaks;
+};
+
+const renderStructuredContent = content => {
+  if (typeof content !== 'string') {
+    return content;
+  }
+
+  return generateBreaks(generateLinks(content));
+};
+
+export default renderStructuredContent;

package/lib-module/utils/useTypographyTheme.js

@@ -0,0 +1,24 @@
+import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base';
+
+const useTypographyTheme = (variant, tokens) => {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+    viewport
+  });
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    fontSize,
+    lineHeight,
+    ...rnStyles
+  } = applyTextStyles({ ...themeTokens,
+    themeOptions
+  });
+  return { ...rnStyles,
+    fontSize: `${fontSize}px`,
+    lineHeight: `${lineHeight}px`
+  };
+};
+
+export default useTypographyTheme;

package/package.json

@@ -4,14 +4,18 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.33.0",
+    "@gorhom/portal": "^1.0.14",
+    "@telus-uds/components-base": "1.34.1",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.17.0",
-    "prop-types": "^15.7.2"
+    "react-dates": "^21.8.0",
+    "react-moment-proptypes": "^1.8.1",
+    "@telus-uds/system-theme-tokens": "^2.18.0",
+    "prop-types": "^15.7.2",
+    "lodash.omit": "^4.5.0",
+    "react-helmet-async": "^1.3.0"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.12.3",
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -54,5 +58,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.3.0"
+  "version": "1.5.0"
 }