@telus-uds/components-web 2.8.1 → 2.10.0

package/lib/BlockQuote/BlockQuote.js

@@ -79,6 +79,7 @@ const BlockQuote = _ref8 => {
     variant,
     ...rest
   } = _ref8;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     color,
     paddingTop,
@@ -87,16 +88,44 @@ const BlockQuote = _ref8 => {
     paddingRight,
     marginBottom,
     width,
-    backgroundGradient
-  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant);
+    backgroundGradient,
+    titleHeadingFontSize,
+    titleHeadingFontName,
+    titleHeadingFontWeight,
+    titleHeadingLineHeight,
+    titleFontSize,
+    titleFontName,
+    titleFontWeight,
+    titleLineHeight,
+    linkFontSize,
+    linkFontName,
+    linkFontWeight,
+    linkLineHeight
+  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant, {
+    viewport
+  });
   const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+  const titleTokens = textStyle === 'heading' ? {
+    fontSize: titleHeadingFontSize,
+    fontName: titleHeadingFontName,
+    fontWeight: titleHeadingFontWeight,
+    lineHeight: titleHeadingLineHeight
+  } : {
+    fontSize: titleFontSize,
+    fontName: titleFontName,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  };
 
   const renderLink = () => {
     if (linkHref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
         href: linkHref,
         tokens: {
-          blockFontWeight: '500',
+          blockFontSize: linkFontSize,
+          blockFontName: linkFontName,
+          blockFontWeight: linkFontWeight,
+          blockLineHeight: linkLineHeight,
           color
         },
         variant: {
@@ -121,7 +150,7 @@ const BlockQuote = _ref8 => {
     const quote = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
         color,
-        fontWeight: '400'
+        ...titleTokens
       },
       variant: {
         size: mappedTextSize
@@ -164,9 +193,25 @@ const BlockQuote = _ref8 => {
 BlockQuote.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.withLinkRouter.propTypes,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * External source's identifier (e.g. author's name)
+   */
   link: _propTypes.default.string,
+
+  /**
+   * External source's URL
+   */
   linkHref: _propTypes.default.string,
+
+  /**
+   * To provide additional information about the source, rendered underneath `link`
+   */
   additionalInfo: _propTypes.default.string,
+
+  /**
+   * Whether to render BlockQuote as a heading size of `h3` or large text size
+   */
   textStyle: _propTypes.default.oneOf(['large', 'heading'])
 };
 var _default = BlockQuote;

package/lib/Callout/Callout.js

@@ -136,9 +136,21 @@ const Callout = _ref2 => {
 };
 
 Callout.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Icon to display on the left side of the Callout
+   */
   icon: _propTypes.default.elementType,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * To change the horizontal alignment of the Callout's text
+   */
   textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
+
+  /**
+   * To change the vertical alignment of the Callout's icon
+   */
   verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
 };
 var _default = Callout;

package/lib/Countdown/Countdown.js

@@ -49,12 +49,15 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     themeTokens,
     gradient
   } = _ref;
-  return { ...(large || feature && {
+  return { ...(large || feature ? {
       display: 'flex',
       flex: 0
-    }),
+    } : {}),
     ...(feature && {
       borderRadius: themeTokens.containerBorderRadius,
+      borderColor: themeTokens.containerBorderColor,
+      borderStyle: 'solid',
+      borderWidth: `${themeTokens.containerBorderWidth}px`,
       justifyContent: 'center',
       paddingBottom: `${themeTokens.containerPaddingBottomTop}px`,
       paddingLeft: `${themeTokens.containerPaddingLeftRight}px`,
@@ -62,38 +65,44 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
       paddingTop: `${themeTokens.containerPaddingBottomTop}px`,
       width: 'fit-content'
     }),
-    ...(feature && !inverse && {
-      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`,
-      border: `${themeTokens.containerInverseBorder}px solid transparent`
-    }),
-    ...(feature && inverse && {
-      border: `${themeTokens.containerInverseBorder}px solid ${themeTokens.inverseBorderColor}`
+    ...(feature && !inverse && gradient && {
+      background: `linear-gradient(#fff 0 0) padding-box, ${gradient} border-box`
     })
   };
 });
 
 const getLabelTokens = themeTokens => ({
   color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: `${themeTokens.labelFontSize}`,
-  lineHeight: `${themeTokens.labelLineHeight}`
+  fontSize: themeTokens.labelFontSize,
+  fontWeight: themeTokens.labelFontWeight,
+  lineHeight: themeTokens.labelLineHeight
 });
 
-const getMainTextTokens = themeTokens => ({
-  color: themeTokens.labelBorderColor,
-  fontWeight: themeTokens.textTimerFontWeight,
-  fontSize: themeTokens.textFontSize,
-  lineHeight: themeTokens.textLineHeight
-});
+const getMainTextTokens = _ref2 => {
+  let {
+    labelBorderColor,
+    textTimerFontWeight,
+    textFontSize,
+    textLineHeight,
+    textTimerFontName
+  } = _ref2;
+  return {
+    color: labelBorderColor,
+    lineHeight: textLineHeight,
+    fontWeight: textTimerFontWeight,
+    fontSize: textFontSize,
+    fontName: textTimerFontName
+  };
+};
 
-const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,
     tokens,
     variant = {},
     ...rest
-  } = _ref2;
+  } = _ref3;
   const [days, hours, minutes, seconds] = (0, _useCountdown.default)(targetTime);
   const viewport = (0, _componentsBase.useViewport)();
   const {
@@ -118,13 +127,13 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   // StackView-based subcontainer adds a 1-step space on the each side of the divider
   (0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
     direction: "row",
-    space: (feature || large) && viewport !== _systemConstants.viewports.xs ? 7 : 2
+    space: (feature || large) && viewport !== _systemConstants.viewports.xs ? 4 : 1
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
     tokens: mainTextTokens,
     children: ":"
   });
   const labelTokens = getLabelTokens(themeTokens);
-  const commonProps = {
+  const segmentProps = {
     copy,
     labelTokens,
     numberTokens: mainTextTokens,
@@ -148,21 +157,21 @@ const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
           labelKey: "day",
           number: days,
           segmentWidth: String(days).length,
-          ...commonProps
+          ...segmentProps
         }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
           labelKey: "hour",
           number: hours,
-          ...commonProps,
+          ...segmentProps,
           ...(0, _componentsBase.applyTextStyles)(themeTokens)
         }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
           labelKey: "minute",
           number: minutes,
-          ...commonProps,
+          ...segmentProps,
           ...(0, _componentsBase.applyTextStyles)(themeTokens)
         }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Segment.default, {
           labelKey: "second",
           number: seconds,
-          ...commonProps,
+          ...segmentProps,
           ...(0, _componentsBase.applyTextStyles)(themeTokens)
         })]
       })

package/lib/Countdown/Segment.js

@@ -23,6 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// !TODO: put this back
 // Pads with zeros on the left if it's a single digit number
 const pad = function (number) {
   let segmentWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
@@ -44,6 +45,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
     justifyContent: 'space-evenly',
     display: 'inline-flex',
     ...(feature && {
+      // This is required because when the numbers for Countdown change, the character widths will change and thereby effecting the container demensions.
       width: `${segmentFontSize * _constants.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO * segmentWidth}px`,
       display: 'flex'
     })

package/lib/Countdown/constants.js

@@ -8,7 +8,7 @@ const DEFAULT_FONT_SIZE = 16;
 exports.DEFAULT_FONT_SIZE = DEFAULT_FONT_SIZE;
 const LARGE_FONT_SIZE = 64;
 exports.LARGE_FONT_SIZE = LARGE_FONT_SIZE;
-const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
-exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = SEGMENT_WIDTH_TO_FONT_SIZE_RATIO;
 const XS_FONT_SIZE = 28;
-exports.XS_FONT_SIZE = XS_FONT_SIZE;
+exports.XS_FONT_SIZE = XS_FONT_SIZE;
+const SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = 0.8;
+exports.SEGMENT_WIDTH_TO_FONT_SIZE_RATIO = SEGMENT_WIDTH_TO_FONT_SIZE_RATIO;

package/lib/DatePicker/CalendarContainer.js

@@ -173,6 +173,30 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   }
 }
 
+.CalendarDay
+.CalendarDay__default
+.CalendarDay__selected
+.CalendarDay__blocked_out_of_range{
+  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
+  color: ${remainingTokens.calendarDaySelectedDisabledColor};
+  text-decoration: none;
+  z-index: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: ${calendarDayDefaultHeight}px;
+    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    width: ${calendarDayDefaultWidth}px;
+    border-radius: 50%;
+    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    transition: all 0.3s;
+    z-index: -1;
+  }
+}
+
   .CalendarDay__blocked_out_of_range,
   .CalendarDay__blocked_out_of_range:active,
   .CalendarDay__blocked_out_of_range:hover,

package/lib/DatePicker/DatePicker.js

@@ -148,14 +148,20 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setIsClickedInside(false);
   };
 
-  const handleFocus = () => {
-    setIsFocused(true);
+  const handleFocus = event => {
+    if (event.target.tagName === 'INPUT') {
+      setIsFocused(true);
+    }
   };
 
   const handleMouseDown = event => {
     if (event.target.tagName === 'INPUT') {
       setIsClickedInside(true);
       setIsFocused(true);
+    } else if (event.target.tagName === 'path') {
+      // needed to handle the case where the user clicks on the tooltip icon
+      setIsClickedInside(true);
+      event.stopPropagation();
     } else {
       event.stopPropagation();
     }

package/lib/Disclaimer/Disclaimer.js

@@ -62,10 +62,6 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The content
-   */
   children: _propTypes.default.node.isRequired
 };
 var _default = Disclaimer;

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -68,6 +68,10 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = { ..._ExpandCollapseMiniControl.default.propTypes,
+
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
   onToggle: _propTypes.default.func,
   children: _propTypes.default.node.isRequired
 };

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -85,9 +85,25 @@ const ExpandCollapseMiniControl = _ref => {
 
 ExpandCollapseMiniControl.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.Link.propTypes,
+
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
   onPress: _propTypes.default.func,
+
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
   expandTitle: _propTypes.default.string.isRequired,
+
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
   collapseTitle: _propTypes.default.string.isRequired,
+
+  /**
+   * React Native's `Pressable`'s state object
+   */
   pressableState: _propTypes.default.object,
   variant: _propTypes.default.object
 };

package/lib/Footnote/Footnote.js

@@ -198,6 +198,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   let {
     closeButtonBorder,
     closeButtonHeight,
+    closeButtonBackgroundColor,
     closeButtonMargin,
     closeButtonWidth
   } = _ref9;
@@ -207,7 +208,7 @@ const CloseButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     cursor: 'pointer',
     display: 'flex',
     justifyContent: 'center',
-    backgroundColor: 'white',
+    backgroundColor: closeButtonBackgroundColor,
     border: closeButtonBorder,
     height: closeButtonHeight,
     margin: closeButtonMargin,
@@ -237,10 +238,16 @@ const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.
   componentId: "components-web__sc-1563bo5-8"
 })(_ref11 => {
   let {
-    color
+    listItemColor,
+    listItemFontSize,
+    listItemLineHeight,
+    listItemPaddingLeft
   } = _ref11;
   return {
-    color,
+    fontSize: listItemFontSize,
+    lineHeight: listItemLineHeight,
+    paddingLeft: listItemPaddingLeft,
+    color: listItemColor,
     fontFamily: 'HelveticaNow400normal'
   };
 });
@@ -307,8 +314,6 @@ const Footnote = props => {
     footnoteHeaderPaddingBottom,
     headerLineHeight,
     headerFontSize,
-    headerFontName,
-    headerFontWeight,
     listPaddingLeft,
     listItemMarkerFontSize,
     listItemMarkerLineHeight,
@@ -318,6 +323,7 @@ const Footnote = props => {
     listItemPaddingLeft,
     closeButtonBorderSize,
     closeButtonBorderColor,
+    closeButtonBackgroundColor,
     closeButtonHeight,
     closeButtonMarginTop,
     closeButtonMarginLeft,
@@ -486,6 +492,10 @@ const Footnote = props => {
 
     if ( /*#__PURE__*/_react.default.isValidElement(data.content)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
         ref: contentRef,
         children: data.content
       });
@@ -503,6 +513,10 @@ const Footnote = props => {
         listItemLineHeight: listItemLineHeight,
         listItemPaddingLeft: listItemPaddingLeft,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          tokens: {
+            fontSize: listItemFontSize,
+            lineHeight: listItemLineHeight
+          },
           children: (0, _utils.renderStructuredContent)(data.content)
         })
       })
@@ -529,17 +543,20 @@ const Footnote = props => {
               footnoteHeaderPaddingTop: footnoteHeaderPaddingTop,
               footnoteHeaderPaddingBottom: footnoteHeaderPaddingBottom,
               headerMargin: headerMargin,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-                style: {
-                  fontSize: `${headerFontSize}px`,
-                  lineHeight: `${headerLineHeight}px`,
-                  fontFamily: `${headerFontName}${headerFontWeight}normal`
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+                tokens: {
+                  fontSize: headerFontSize,
+                  lineHeight: headerLineHeight
+                },
+                variant: {
+                  size: 'h4'
                 },
                 children: getCopy('heading')
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
-                closeButtonBorder: `${closeButtonBorderSize}px solid ${closeButtonBorderColor}`,
+                closeButtonBorder: `${closeButtonBorderSize} solid ${closeButtonBorderColor}`,
                 closeButtonWidth: `${closeButtonWidth}px`,
                 closeButtonHeight: `${closeButtonHeight}px`,
+                closeButtonBackgroundColor: closeButtonBackgroundColor,
                 closeButtonMargin: `${closeButtonMarginTop}px ${closeButtonMarginRight}px ${closeButtonMarginBottom}px ${closeButtonMarginLeft}px`,
                 onClick: event => {
                   closeFootnote(event, {

package/lib/IconButton/IconButton.js

@@ -59,8 +59,16 @@ const propsWithoutIcon = _ref2 => {
 };
 
 IconButton.propTypes = { ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
+
+  /**
+   * To set the icon to a multi-brand compatabile icon
+   */
   // eslint-disable-next-line react/require-default-props
   action: _propTypes.default.oneOf(multiBrandIconNames),
+
+  /**
+   * To set a custom icon
+   */
   icon: _propTypes.default.func
 };
 IconButton.defaultProps = {

package/lib/Listbox/Listbox.js

@@ -156,7 +156,15 @@ Listbox.propTypes = { ..._componentsBase.withLinkRouter.propTypes,
    * the last menu item.
    */
   parentRef: _propTypes.default.object,
+
+  /**
+   * `Listbox` items
+   */
   items: _propTypes.default.array,
+
+  /**
+   * To select an item by default
+   */
   selectedId: _propTypes.default.string
 };
 Listbox.Overlay = _ListboxOverlay.default;

package/lib/Modal/ModalContent.js

@@ -21,7 +21,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-/* eslint-disable react/jsx-filename-extension */
 const StyledModalContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "ModalContent__StyledModalContent",
   componentId: "components-web__sc-k40cwb-0"

package/lib/NavigationBar/NavigationBar.js

@@ -210,6 +210,10 @@ NavigationBar.propTypes = { ...selectedSystemPropTypes,
    * Common navigation bar heading.
    */
   heading: _propTypes.default.string,
+
+  /**
+   * Sets the `headingLevel` of the `heading`
+   */
   headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
 
   /**

package/lib/OrderedList/Item.js

@@ -147,6 +147,10 @@ Item.propTypes = { ...selectedSystemPropTypes,
    * Item content
    */
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
   title: _propTypes.default.string,
 
   /**

package/lib/Paragraph/Paragraph.js

@@ -73,6 +73,10 @@ const Paragraph = _ref3 => {
 
 Paragraph.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * Adds a `data-testid` attribute to the element for testing purposes
+   */
   testID: _propTypes.default.string,
 
   /**

package/lib/PreviewCard/AuthorDate.js

@@ -57,7 +57,14 @@ const AuthorDate = _ref => {
 };
 
 AuthorDate.propTypes = {
+  /**
+   * Name of the author
+   */
   author: _propTypes.default.string.isRequired,
+
+  /**
+   * Date of the post
+   */
   date: _propTypes.default.string.isRequired
 };
 var _default = AuthorDate;

package/lib/PreviewCard/PreviewCard.js

@@ -149,8 +149,7 @@ const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
           children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               variant: {
-                size: 'eyebrow',
-                colour: 'secondary'
+                size: 'eyebrow'
               },
               children: tag
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
@@ -158,8 +157,7 @@ const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
             variant: {
-              size: 'h4',
-              colour: 'secondary'
+              size: 'h4'
             },
             children: title
           }), Boolean(footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -167,8 +165,7 @@ const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
               space: 2
             }), typeof footer === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               variant: {
-                size: 'small',
-                colour: 'secondary'
+                size: 'small'
               },
               children: footer
             }) : footer]

package/lib/PriceLockup/PriceLockup.js

@@ -258,16 +258,64 @@ const PriceLockup = _ref12 => {
 };
 
 PriceLockup.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Size of the component
+   *
+   * 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(['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']),
+
+  /**
+   * 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
 };
 var _default = PriceLockup;