@telus-uds/components-web 1.3.0 → 1.5.0

package/lib/PriceLockup/PriceLockup.js

@@ -0,0 +1,237 @@
+"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 _FootnoteLink = _interopRequireDefault(require("../Footnote/FootnoteLink"));
+
+var _tokens = _interopRequireDefault(require("./tokens"));
+
+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 PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__PriceLockupContainer",
+  componentId: "components-web__sc-1x6duay-0"
+})(["display:flex;flex-direction:column;width:fit-content;"]);
+
+const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__PriceContainer",
+  componentId: "components-web__sc-1x6duay-1"
+})(["display:flex;margin-bottom:", ";"], _ref => {
+  let {
+    priceMarginBottom
+  } = _ref;
+  return priceMarginBottom;
+});
+
+const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__FootnoteContainer",
+  componentId: "components-web__sc-1x6duay-2"
+})(["display:flex;margin-top:", ";gap:", ";"], _ref2 => {
+  let {
+    footnoteMarginTop
+  } = _ref2;
+  return footnoteMarginTop;
+}, _ref3 => {
+  let {
+    footnoteGap
+  } = _ref3;
+  return footnoteGap;
+});
+
+const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__BottomTextContainer",
+  componentId: "components-web__sc-1x6duay-3"
+})(["margin-top:", ";"], _ref4 => {
+  let {
+    bottomTextMarginTop
+  } = _ref4;
+  return bottomTextMarginTop;
+});
+
+const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__BottomLinksContainer",
+  componentId: "components-web__sc-1x6duay-4"
+})(["align-self:center;margin-left:", ";"], _ref5 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref5;
+  return bottomLinksMarginLeft;
+});
+
+const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__TopTextContainer",
+  componentId: "components-web__sc-1x6duay-5"
+})(["margin-bottom:", ";"], _ref6 => {
+  let {
+    topTextMarginBottom
+  } = _ref6;
+  return topTextMarginBottom;
+});
+
+const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__RateTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["align-self:flex-end;"]);
+
+const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__StrikeThroughContainer",
+  componentId: "components-web__sc-1x6duay-7"
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;height:", ";background:", ";position:absolute;}"], _ref7 => {
+  let {
+    strikeThroughHeight
+  } = _ref7;
+  return strikeThroughHeight;
+}, _ref8 => {
+  let {
+    strikeThroughBackground
+  } = _ref8;
+  return strikeThroughBackground;
+});
+
+const PriceLockup = _ref9 => {
+  let {
+    size = 'medium',
+    signDirection = 'left',
+    footnoteLinks = [],
+    topText,
+    price,
+    currencySymbol = '$',
+    rateText,
+    bottomText,
+    onClickFootnote,
+    strikeThrough,
+    a11yText,
+    tokens: priceLockupTokens,
+    variant = {},
+    ...rest
+  } = _ref9;
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    strikeThroughHeight,
+    strikeThroughBackground,
+    fontColor,
+    dividerColor
+  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, variant);
+  const priceString = String(price);
+  const lastDotPosition = priceString.lastIndexOf('.');
+  const lastCommaPosition = priceString.lastIndexOf(',');
+  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]; // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
+
+  const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3;
+  const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
+  const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
+  const color = strikeThrough ? strikeThroughBackground : fontColor;
+
+  const renderTypography = (value, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    tokens: { ...tokens,
+      color
+    },
+    children: value
+  });
+
+  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, _tokens.default.dollarSign[size]);
+
+  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+    number: footnoteLinks,
+    onClick: onClickFootnote
+  }) : null;
+
+  const renderAmount = () => {
+    const amountComponent = renderTypography(amount, _tokens.default.amount[size]);
+
+    if (strikeThrough) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
+          text: a11yText
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
+          strikeThroughHeight: `${strikeThroughHeight}px`,
+          strikeThroughBackground: strikeThroughBackground,
+          children: amountComponent
+        })]
+      });
+    }
+
+    return amountComponent;
+  };
+
+  const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
+      priceMarginBottom: `${priceMarginBottom}px`,
+      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, _tokens.default.cents[size]), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: ["\xA0", renderCurrencySymbol()]
+      }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
+        children: renderTypography(rateText, _tokens.default.rate[size])
+      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
+        bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
+        children: renderFootnoteLinks()
+      })]
+    }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
+  });
+
+  const renderFootnoteContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FootnoteContainer, {
+      footnoteMarginTop: `${footnoteMarginTop}px`,
+      footnoteGap: `${footnoteGap}px`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
+        bottomTextMarginTop: `${bottomTextMarginTop}px`,
+        children: renderTypography(bottomText, _tokens.default.bottomText[size])
+      }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
+    }), footnoteLinks.length > 3 && renderFootnoteLinks()]
+  });
+
+  if (strikeThrough && !a11yText) {
+    (0, _utils.warn)('PriceLockup', 'a11yText must be provided with strikethrough pricing');
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, { ...selectProps(rest),
+    children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
+      topTextMarginBottom: `${topTextMarginBottom}px`,
+      children: renderTypography(topText, _tokens.default.topText[size])
+    }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+      testID: "price-lockup-divider",
+      role: "separator",
+      tokens: {
+        color: dividerColor
+      }
+    }), bottomText && renderFootnoteContent()]
+  });
+};
+
+PriceLockup.propTypes = { ...selectedSystemPropTypes,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  currencySymbol: _propTypes.default.string,
+  topText: _propTypes.default.string,
+  price: _propTypes.default.string.isRequired,
+  rateText: _propTypes.default.string,
+  bottomText: _propTypes.default.string,
+  signDirection: _propTypes.default.oneOf(['right', 'left']),
+  footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+  onClickFootnote: _propTypes.default.func,
+  strikeThrough: _propTypes.default.bool,
+  a11yText: _propTypes.default.string
+};
+var _default = PriceLockup;
+exports.default = _default;

package/lib/PriceLockup/index.js

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

package/lib/PriceLockup/tokens.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _palette = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/palette"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  fontSize: {
+    size14,
+    size16,
+    size20,
+    size28,
+    size36,
+    size40,
+    size64
+  },
+  lineHeight: {
+    ratio1to1,
+    ratio10to7,
+    ratio3to2,
+    ratio8to5,
+    ratio5to4,
+    ratio6to5,
+    ratio9to8,
+    ratio4to3,
+    ratio8to7
+  },
+  letterSpacing: {
+    condensed
+  }
+} = _palette.default;
+const typographyTokens = {
+  topText: {
+    small: {
+      fontSize: size14,
+      lineHeight: ratio10to7
+    },
+    medium: {
+      fontSize: size16,
+      lineHeight: ratio3to2
+    },
+    large: {
+      fontSize: size20,
+      lineHeight: ratio8to5
+    }
+  },
+  dollarSign: {
+    small: {
+      fontSize: size16,
+      lineHeight: ratio5to4
+    },
+    medium: {
+      fontSize: size20,
+      lineHeight: ratio6to5
+    },
+    large: {
+      fontSize: size36,
+      lineHeight: ratio9to8
+    }
+  },
+  // TODO - fontWeight should have its own const on palette
+  amount: {
+    small: {
+      fontSize: size28,
+      lineHeight: ratio1to1,
+      letterSpacing: condensed,
+      fontWeight: '300'
+    },
+    medium: {
+      fontSize: size40,
+      lineHeight: ratio1to1,
+      letterSpacing: condensed,
+      fontWeight: '300'
+    },
+    large: {
+      fontSize: size64,
+      lineHeight: ratio1to1,
+      letterSpacing: condensed,
+      fontWeight: '300'
+    }
+  },
+  cents: {
+    small: {
+      fontSize: size16,
+      lineHeight: ratio4to3
+    },
+    medium: {
+      fontSize: size20,
+      lineHeight: ratio6to5
+    },
+    large: {
+      fontSize: size36,
+      lineHeight: ratio9to8
+    }
+  },
+  rate: {
+    small: {
+      fontSize: size14,
+      lineHeight: ratio8to7
+    },
+    medium: {
+      fontSize: size16,
+      lineHeight: ratio5to4
+    },
+    large: {
+      fontSize: size20,
+      lineHeight: ratio8to5
+    }
+  },
+  bottomText: {
+    small: {
+      fontSize: size14,
+      lineHeight: ratio10to7
+    },
+    medium: {
+      fontSize: size16,
+      lineHeight: ratio3to2
+    },
+    large: {
+      fontSize: size20,
+      lineHeight: ratio8to5
+    }
+  }
+};
+var _default = typographyTokens;
+exports.default = _default;

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;