@telus-uds/components-web 3.4.0 → 4.1.0

package/lib/cjs/PreviewCard/PreviewCard.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodash = _interopRequireDefault(require("lodash.omit"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+var _AuthorDate = _interopRequireDefault(require("./AuthorDate"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 }; }
+// Passes React Native-oriented system props through UDS PressableCardBase
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
+
+// Stop changes to the card's inner border width causing the size and
+// apparent position of the full bleed image to change.
+const FullBleedOffsetOuter = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PreviewCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-1yfz4de-0"
+})(_ref => {
+  let {
+    borderOffset
+  } = _ref;
+  return {
+    overflow: 'hidden',
+    marginTop: borderOffset * 2
+  };
+});
+const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PreviewCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-1yfz4de-1"
+})(_ref2 => {
+  let {
+    borderOffset
+  } = _ref2;
+  return {
+    position: 'relative',
+    margin: 0 - borderOffset
+  };
+});
+const defaultTokens = {
+  minWidth: 0,
+  shadow: null,
+  contentAlignItems: 'stretch',
+  contentJustifyContent: 'flex-start',
+  contentFlexGrow: 0,
+  contentFlexShrink: 0
+};
+
+/**
+ * Showcase and guide users to another page, with a preview containing title and a footer.
+ * Whole card is interactive, width expands based on column or container.
+ *
+ * - Use `tag` to show category of content
+ * - Use `title` to show title of the story
+ * - Use `footer` to show text such as the author / date
+ * - Use `href` to set the target URL
+ * - Use `fullBleedContent` to set the thumbnail image
+ */
+const PreviewCard = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    tag,
+    title,
+    footer,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    onPress,
+    href,
+    ...rest
+  } = _ref3;
+  const {
+    fullBleedContentPosition,
+    contentStackDirection,
+    fullBleedContentProps
+  } = (0, _FullBleedContent.useFullBleedContentProps)({
+    ...fullBleedContent,
+    position: 'bottom'
+  });
+  const {
+    components: {
+      PreviewCard: theme
+    }
+  } = (0, _componentsBase.useTheme)();
+  const getPressableCardTokens = cardState => ({
+    ...(0, _lodash.default)((0, _componentsBase.getThemeTokens)(theme, {}, {}, cardState), 'separatorColor'),
+    ...defaultTokens
+  });
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ref: ref,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderRadius,
+        borderWidth
+      } = getPressableCardTokens(cardState);
+      // Stop content jumping around as border size changes
+      const borderOffset = borderWidth - theme.tokens.borderWidth;
+      const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius + borderOffset, fullBleedContentPosition);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        direction: contentStackDirection,
+        tokens: {
+          justifyContent: 'space-between',
+          flexGrow: 1
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+          horizontal: {
+            xs: 4,
+            lg: 5,
+            options: {
+              subtract: borderOffset
+            }
+          },
+          vertical: {
+            xs: 5,
+            lg: 7,
+            options: {
+              subtract: borderOffset
+            }
+          },
+          children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'eyebrow'
+              },
+              children: tag
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 2
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              size: 'h4'
+            },
+            children: title
+          }), Boolean(footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 2
+            }), typeof footer === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'small'
+              },
+              children: footer
+            }) : footer]
+          })]
+        }), Boolean(fullBleedContentProps.src || fullBleedContentProps.content) && /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetOuter, {
+          borderOffset: borderOffset,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedOffsetInner, {
+            borderOffset: borderOffset,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+              borderRadius: fullBleedBorderRadius,
+              ...fullBleedContentProps
+            })
+          })
+        })]
+      });
+    }
+  });
+});
+PreviewCard.displayName = 'PreviewCard';
+
+// Provide standard author/date footer as a preset with the export
+PreviewCard.AuthorDate = _AuthorDate.default;
+PreviewCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('PreviewCard'),
+  /**
+   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
+   * a `PreviewCard` with `href` prop set (the volume and progress sliders can be clicked but are not draggable).
+   * Please use `onPress` prop instead `href` to organize navigation in cases like this.
+   *
+   * @see https://github.com/telus/allium-design-system/issues/6
+   */
+  href: _propTypes.default.string,
+  /**
+   * Optional function to be called on press e.g. for within-page navigation.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Text stating the category of the content.
+   */
+  tag: _propTypes.default.string,
+  /**
+   * Section containing additional information, such as author and date.
+   * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
+   */
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
+  /**
+   * Text stating the title or headline of the story.
+   */
+  title: _propTypes.default.string.isRequired,
+  /**
+   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
+   *
+   * @deprecated
+   */
+  fullBleedImage: _propTypes.default.exact(_FullBleedContent.default.propTypes || {}),
+  /**
+   * Full bleed content to be placed on the card.
+   */
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+};
+var _default = exports.default = (0, _componentsBase.withLinkRouter)(PreviewCard);

package/lib/cjs/PreviewCard/index.js

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

package/lib/cjs/PriceLockup/PriceLockup.js

@@ -0,0 +1,398 @@
+"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 _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs, _componentsBase.a11yProps]);
+const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__PriceLockupContainer",
+  componentId: "components-web__sc-1x6duay-0"
+})(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
+  let {
+    alignItemsText
+  } = _ref;
+  return alignItemsText;
+});
+const PriceContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
+  displayName: "PriceLockup__PriceContainer",
+  componentId: "components-web__sc-1x6duay-1"
+})(["display:flex;margin-bottom:", ";"], _ref2 => {
+  let {
+    priceMarginBottom
+  } = _ref2;
+  return priceMarginBottom;
+});
+const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__FootnoteContainer",
+  componentId: "components-web__sc-1x6duay-2"
+})(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
+  let {
+    footnoteMarginTop
+  } = _ref3;
+  return footnoteMarginTop;
+}, _ref4 => {
+  let {
+    footnoteGap
+  } = _ref4;
+  return footnoteGap;
+});
+const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__BottomTextContainer",
+  componentId: "components-web__sc-1x6duay-3"
+})(["margin-top:", ";"], _ref5 => {
+  let {
+    bottomTextMarginTop
+  } = _ref5;
+  return bottomTextMarginTop;
+});
+const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__BottomLinksContainer",
+  componentId: "components-web__sc-1x6duay-4"
+})(["align-self:center;margin-left:", ";"], _ref6 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref6;
+  return bottomLinksMarginLeft;
+});
+const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.attrs({
+  'aria-hidden': 'true'
+}).withConfig({
+  displayName: "PriceLockup__TopTextContainer",
+  componentId: "components-web__sc-1x6duay-5"
+})(["margin-bottom:", ";"], _ref7 => {
+  let {
+    topTextMarginBottom
+  } = _ref7;
+  return topTextMarginBottom;
+});
+const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__PriceTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["display:flex;flex-direction:", ";"], _ref8 => {
+  let {
+    ratePosition
+  } = _ref8;
+  return ratePosition === 'bottom' ? 'column' : 'row';
+});
+const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__RateContainer",
+  componentId: "components-web__sc-1x6duay-7"
+})(["display:flex;"]);
+const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__RateTextContainer",
+  componentId: "components-web__sc-1x6duay-8"
+})(["align-self:", ";"], _ref9 => {
+  let {
+    ratePosition
+  } = _ref9;
+  return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
+});
+const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__StrikeThroughContainer",
+  componentId: "components-web__sc-1x6duay-9"
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref10 => {
+  let {
+    strikeThroughPosition
+  } = _ref10;
+  return `${strikeThroughPosition}px`;
+}, _ref11 => {
+  let {
+    strikeThroughHeight
+  } = _ref11;
+  return `${strikeThroughHeight}px`;
+}, _ref12 => {
+  let {
+    strikeThroughColor
+  } = _ref12;
+  return strikeThroughColor;
+});
+const TypographyContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PriceLockup__TypographyContainer",
+  componentId: "components-web__sc-1x6duay-10"
+})(["display:flex;padding-top:", ";"], _ref13 => {
+  let {
+    paddingTop
+  } = _ref13;
+  return `${paddingTop || 0}px`;
+});
+const selectFootnoteLinkStyles = _ref14 => {
+  let {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight
+  } = _ref14;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight: footnoteLinkLineHeight
+  };
+};
+const selectStrikeThroughTokens = _ref15 => {
+  let {
+    strikeThroughPosition,
+    strikeThroughHeight,
+    strikeThroughColor
+  } = _ref15;
+  return {
+    strikeThroughHeight,
+    strikeThroughPosition,
+    strikeThroughColor
+  };
+};
+const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
+  let {
+    size = 'medium',
+    signDirection = 'left',
+    footnoteLinks = [],
+    topText,
+    price,
+    currencySymbol = '$',
+    rateText,
+    ratePosition = 'right',
+    bottomText,
+    onClickFootnote,
+    strikeThrough,
+    a11yText,
+    tokens: priceLockupTokens,
+    variant = {},
+    copy = 'en',
+    dictionary = _dictionary.default,
+    ...rest
+  } = _ref16;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    fontColor,
+    dividerColor,
+    footnoteLinkFontSize,
+    alignItemsText,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, {
+    ...variant,
+    size
+  }, {
+    viewport,
+    strikeThrough
+  });
+  const typographyTokens = (0, _tokens.default)(themeTokens);
+  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 renderTypography = (value, tokens, position) => {
+    const {
+      paddingTop,
+      ...restOfTokens
+    } = tokens;
+    const customProps = position === 'bottom' ? {
+      variant: {
+        size: 'micro'
+      },
+      tokens: {
+        color: fontColor
+      }
+    } : {
+      tokens: {
+        ...restOfTokens,
+        color: fontColor
+      }
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographyContainer, {
+      paddingTop: paddingTop,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        ...customProps,
+        children: value
+      })
+    });
+  };
+  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
+  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+    fontSize: footnoteLinkFontSize,
+    tokens: selectFootnoteLinkStyles(themeTokens),
+    number: footnoteLinks,
+    onClick: onClickFootnote
+  }) : null;
+  const renderAmount = () => {
+    const amountComponent = renderTypography(amount, typographyTokens.amount);
+    if (strikeThrough) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
+          text: a11yText
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
+          ...selectStrikeThroughTokens(themeTokens),
+          children: amountComponent
+        })]
+      });
+    }
+    return amountComponent;
+  };
+  const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
+      priceMarginBottom: `${priceMarginBottom}px`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceTextContainer, {
+        ratePosition: ratePosition,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RateContainer, {
+          children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["\xA0", renderCurrencySymbol()]
+          })]
+        }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
+          ratePosition: ratePosition,
+          children: renderTypography(rateText, typographyTokens.rate, ratePosition)
+        })]
+      }), !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, typographyTokens.bottomText)
+      }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
+    }), footnoteLinks.length > 3 && renderFootnoteLinks()]
+  });
+  if (strikeThrough && !a11yText) {
+    (0, _utils.warn)('PriceLockup', 'a11yText must be provided with strikethrough pricing');
+  }
+  const getAriaContent = () => {
+    const {
+      dictionaryPrice = price,
+      priceWithCents,
+      rate
+    } = dictionary[copy];
+    let ariaLabel = hasCents ? priceWithCents.replace('%{amount}', amount).replace('%{cents}', cents).replace('%{currency}', currencySymbol) : dictionaryPrice.replace('%{amount}', amount).replace('%{currency}', currencySymbol);
+    if (!ariaLabel.includes(currencySymbol)) {
+      ariaLabel = `${ariaLabel} ${currencySymbol}`;
+    }
+    if (rateText) {
+      ariaLabel += ` ${rate.replace('%{rateText}', rateText.replace('/', ''))}`;
+    }
+    return ariaLabel;
+  };
+  const ariaLabel = selectProps(rest)['aria-label'] ?? getAriaContent();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
+    ...selectProps(rest),
+    alignItemsText: alignItemsText,
+    ref: ref,
+    role: "group",
+    "aria-label": ariaLabel,
+    children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
+      topTextMarginBottom: `${topTextMarginBottom}px`,
+      children: renderTypography(topText, typographyTokens.topText)
+    }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+      testID: "price-lockup-divider",
+      role: "separator",
+      tokens: {
+        color: dividerColor ?? 'rgba(0, 0, 0, 0)'
+      }
+    }), bottomText && renderFootnoteContent()]
+  });
+});
+PriceLockup.displayName = 'PriceLockup';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  price: _propTypes.default.string.isRequired,
+  priceWithCents: _propTypes.default.string.isRequired,
+  rate: _propTypes.default.string.isRequired
+});
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Micro for mini cart pricing, small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   */
+  size: _propTypes.default.oneOf(['micro', 'small', 'medium', 'large']),
+  /**
+   * If currency symbol other than `$` to be used
+   */
+  currencySymbol: _propTypes.default.string,
+  /**
+   * Shows additional info above the price
+   */
+  topText: _propTypes.default.string,
+  /**
+   * Monetary value (including decimals separated by ".")
+   */
+  price: _propTypes.default.string.isRequired,
+  /**
+   * Shows month/year unit
+   */
+  rateText: _propTypes.default.string,
+  /**
+   * Shows additional info below the price with a `Divider`
+   */
+  bottomText: _propTypes.default.string,
+  /**
+   * Displays which side the currency should apperar (left, right)
+   */
+  signDirection: _propTypes.default.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should apperar (bottom, right)
+   */
+  ratePosition: _propTypes.default.oneOf(['right', 'bottom']),
+  /**
+   * Shows additional link for context
+   */
+  footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+  /**
+   * Function to be called when a footnote link is clicked
+   */
+  onClickFootnote: _propTypes.default.func,
+  /**
+   * To show price savings comparison
+   */
+  strikeThrough: _propTypes.default.bool,
+  /**
+   * To provide a11y text for `PriceLockup` component
+   *
+   * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
+   */
+  a11yText: _propTypes.default.string,
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /* Custom dictionary containing the labels
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
+};
+var _default = exports.default = PriceLockup;

package/lib/cjs/PriceLockup/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} and %{cents} cents',
+    rate: 'per %{rateText}'
+  },
+  fr: {
+    price: '%{amount} %{currency}',
+    priceWithCents: '%{amount} %{currency} et %{cents} centimes',
+    rate: 'par %{rateText}'
+  }
+};

package/lib/cjs/PriceLockup/index.js

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