@telus-uds/components-base 1.75.0 → 1.76.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 29 Jan 2024 18:26:01 GMT and should not be manually modified.
+This log was last generated on Wed, 07 Feb 2024 19:09:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.76.0
+
+Wed, 07 Feb 2024 19:09:40 GMT
+
+### Minor changes
+
+- Changes to enable the key recogniztion in the press state (35577399+JoshHC@users.noreply.github.com)
+- carouselThumbnail component modified to match design intention (35577399+JoshHC@users.noreply.github.com)
+- refactor(PriceLockup): started the migration to component-base (chris.tafts@telus.com)
+- refactor(PriceLuckup): started the migration to component-base (chris.tafts@telus.com)
+
+### Patches
+
+- fix ordered-list component single child render (guillermo.peitzner@telus.com)
+
 ## 1.75.0
 
-Mon, 29 Jan 2024 18:26:01 GMT
+Mon, 29 Jan 2024 18:41:50 GMT
 
 ### Minor changes
 

package/lib/Carousel/CarouselThumbnail.js

@@ -61,7 +61,8 @@ const CarouselThumbnail = _ref2 => {
     padding,
     selectedBorderColor,
     selectedBorderWidth,
-    size
+    size,
+    margin
   } = getThumbnailTokens({
     viewport
   });
@@ -73,7 +74,12 @@ const CarouselThumbnail = _ref2 => {
     selected: {
       borderColor: selectedBorderColor,
       borderWidth: selectedBorderWidth,
-      padding: padding - selectedBorderWidth + borderWidth
+      padding: padding - selectedBorderWidth,
+      marginBottom: margin + selectedBorderWidth
+    },
+    nonSelected: {
+      padding: padding - borderWidth,
+      marginBottom: margin + selectedBorderWidth
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
@@ -90,9 +96,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected, {
+      return [pressableStyles, index === activeIndex ? [styles.selected, {
         outline: 'none'
-      }];
+      }] : styles.nonSelected];
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -33,8 +33,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
     throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
   }
   const {
-    containerPaddingTop: thumbnailContainerPaddingTop,
-    margin: thumbnailMargin
+    containerPaddingTop: thumbnailContainerPaddingTop
   } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
@@ -42,13 +41,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   const containerStyles = {
     justifyContent: 'center',
     alignItems,
-    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+    paddingTop: thumbnailContainerPaddingTop
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: containerStyles,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
       direction: "row",
       tokens: stackWrapTokens,
+      space: 2,
       ref: ref,
       children: thumbnails.map((_ref2, index) => {
         let {

package/lib/Footnote/Footnote.js

@@ -173,19 +173,15 @@ const Footnote = _ref6 => {
         children: content
       });
     }
-    return (
-      /*#__PURE__*/
-      // TODO: Extract the OrderedList.Item from the array when the issue #4361 is fixed
-      (0, _jsxRuntime.jsx)(_OrderedList.default, {
-        start: number,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default.Item, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-            style: selectCustomContentFontStyle(themeTokens),
-            children: content
-          })
-        }, number)]
-      })
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default, {
+      start: number,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedList.default.Item, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: selectCustomContentFontStyle(themeTokens),
+          children: content
+        })
+      }, number)
+    });
   }, [content, number, themeTokens]);
   (0, _react.useEffect)(() => {
     if (isOpen) {

package/lib/Link/ChevronLink.js

@@ -25,6 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens = {},
     variant,
     dataSet,
+    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
@@ -53,6 +54,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
+    onPress: onPress,
     children: children
   });
 });

package/lib/Link/InlinePressable.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -24,17 +25,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-// eslint-disable-next-line react/prop-types
-const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+/* eslint-disable react/prop-types */const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
+    onPress,
     ...props
   } = _ref;
+  const handlePress = (0, _react.useCallback)(() => {
+    if (onPress) {
+      onPress();
+    }
+  }, [onPress]);
+  const handleKeyPress = (0, _react.useCallback)(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      handlePress();
+    }
+  }, [handlePress]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
+    onPress: handlePress,
+    onKeyDown: _Platform.default.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib/Link/LinkBase.js

@@ -187,6 +187,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
+    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib/OrderedList/OrderedList.js

@@ -14,25 +14,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 const [selectProps, selectedSystemPropsTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
-const getChildrenWithParentVariants = (variant, children, start) => {
-  if (variant) return children.map((child, i) => {
-    var _child$props;
-    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-    return {
-      ...child,
-      props: {
-        ...child.props,
-        index: start + i,
-        isLastChild: i === children.length - 1,
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        }
-      }
-    };
-  });
-  return children;
-};
 const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
@@ -40,7 +21,27 @@ const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant,
     ...rest
   } = _ref;
-  const childrenWithParentVariants = (0, _react.useMemo)(() => getChildrenWithParentVariants(variant, children, start), [children, variant, start]);
+  const childrenWithParentVariants = (0, _react.useMemo)(() => {
+    const addVariantToProps = (child, i, isLastChild) => {
+      var _child$props;
+      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        index: start + i,
+        isLastChild,
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        }
+      });
+    };
+    if (variant) {
+      if (Array.isArray(children)) {
+        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+      }
+      return [addVariantToProps(children, 0, true)];
+    }
+    return children;
+  }, [children, variant, start]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
     ref: ref,
     ...selectProps(rest),

package/lib/PriceLockup/PriceLockup.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _renderFootnoteContent = _interopRequireDefault(require("./utils/renderFootnoteContent"));
+var _renderPrice = _interopRequireDefault(require("./utils/renderPrice"));
+var _renderTypography = _interopRequireDefault(require("./utils/renderTypography"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const selectTopTextTypographyTokens = _ref => {
+  let {
+    topTextFontSize,
+    topTextLineHeight
+  } = _ref;
+  return {
+    fontSize: topTextFontSize,
+    lineHeight: topTextLineHeight
+  };
+};
+const selectCurrencySymbolTypographyTokens = _ref2 => {
+  let {
+    currencySymbolFontSize,
+    currencySymbolLineHeight,
+    currencySymbolFontWeight
+  } = _ref2;
+  return {
+    fontSize: currencySymbolFontSize,
+    lineHeight: currencySymbolLineHeight,
+    fontWeight: currencySymbolFontWeight
+  };
+};
+const selectAmountTypographyTokens = _ref3 => {
+  let {
+    amountFontSize,
+    amountLineHeight,
+    amountLetterSpacing,
+    amountFontWeight,
+    fontColor
+  } = _ref3;
+  // This is used to apply the proper line height to the amount
+  const lineHeightMultiplier = 1.18;
+  return {
+    color: fontColor,
+    fontSize: amountFontSize,
+    lineHeight: amountLineHeight * lineHeightMultiplier,
+    letterSpacing: amountLetterSpacing,
+    fontWeight: amountFontWeight
+  };
+};
+const selectCentsTypographyTokens = _ref4 => {
+  let {
+    centsFontSize,
+    centsLineHeight,
+    centsFontWeight
+  } = _ref4;
+  return {
+    fontSize: centsFontSize,
+    lineHeight: centsLineHeight,
+    fontWeight: centsFontWeight
+  };
+};
+const selectRateTypographyTokens = _ref5 => {
+  let {
+    rateFontSize,
+    rateLineHeight,
+    rateFontWeight
+  } = _ref5;
+  return {
+    fontSize: rateFontSize,
+    lineHeight: rateLineHeight,
+    fontWeight: rateFontWeight
+  };
+};
+const selectBottomTextTypographyTokens = _ref6 => {
+  let {
+    bottomTextFontSize,
+    bottomTextLineHeight
+  } = _ref6;
+  return {
+    fontSize: bottomTextFontSize,
+    lineHeight: bottomTextLineHeight
+  };
+};
+const PriceLockup = _ref7 => {
+  let {
+    size = 'medium',
+    signDirection = 'left',
+    footnoteLinks,
+    topText,
+    price,
+    currencySymbol = '$',
+    rateText,
+    ratePosition = 'right',
+    bottomText,
+    onClickFootnote,
+    strikeThrough,
+    a11yText,
+    tokens: priceLockupTokens,
+    variant = {},
+    ...rest
+  } = _ref7;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    footnoteMarginTop,
+    footnoteGap,
+    bottomTextMarginTop,
+    priceMarginBottom,
+    bottomLinksMarginLeft,
+    topTextMarginBottom,
+    fontColor,
+    dividerColor,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('PriceLockup', priceLockupTokens, {
+    ...variant,
+    size
+  }, {
+    viewport,
+    strikeThrough
+  });
+  const currencySymbolTypographyTokens = selectCurrencySymbolTypographyTokens(themeTokens);
+  const amountTypographyTokens = selectAmountTypographyTokens(themeTokens);
+  const centsTypographyTokens = selectCentsTypographyTokens(themeTokens);
+  const rateTypographyTokens = selectRateTypographyTokens(themeTokens);
+  const topTextTypographyTokens = selectTopTextTypographyTokens(themeTokens);
+  const bottomTextTypographyTokens = selectBottomTextTypographyTokens(themeTokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.priceLockupContainer, {
+      ...selectProps(rest)
+    }],
+    children: [topText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: (0, _renderTypography.default)(topText, topTextTypographyTokens)
+    }) : null, (0, _renderPrice.default)(price, rateText, ratePosition, signDirection, currencySymbol, currencySymbolTypographyTokens, amountTypographyTokens, centsTypographyTokens, rateTypographyTokens, fontColor, strikeThrough, a11yText, bottomText, bottomLinksMarginLeft, footnoteLinks, onClickFootnote, themeTokens), bottomText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        testID: "price-lockup-divider",
+        role: "separator",
+        tokens: {
+          color: dividerColor
+        }
+      }), (0, _renderFootnoteContent.default)(footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens)]
+    }) : null]
+  });
+};
+PriceLockup.displayName = 'PriceLockup';
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Size of the component
+   *
+   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards.
+   */
+  size: _propTypes.default.oneOf(['small', 'medium']),
+  /**
+   * 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 appear (left, right)
+   */
+  signDirection: _propTypes.default.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should appear (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,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: (0, _utils.getTokensPropType)('PriceLockup')
+};
+var _default = PriceLockup;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  priceLockupContainer: {
+    alignSelf: 'flex-start'
+  }
+});

package/lib/PriceLockup/index.js

@@ -0,0 +1,10 @@
+"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/utils/renderFootnoteContent.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _renderTypography = _interopRequireDefault(require("./renderTypography"));
+var _renderFootnoteLinks = _interopRequireDefault(require("./renderFootnoteLinks"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectFootnoteContainer = _ref => {
+  let {
+    footnoteMarginTop
+  } = _ref;
+  return {
+    marginTop: footnoteMarginTop
+  };
+};
+const selectFootnoteBottomTextContainer = _ref2 => {
+  let {
+    bottomTextMarginTop
+  } = _ref2;
+  return {
+    marginTop: bottomTextMarginTop
+  };
+};
+const selectFootnoteLinksStyles = _ref3 => {
+  let {
+    bottomLinksMarginLeft
+  } = _ref3;
+  return {
+    marginLeft: bottomLinksMarginLeft
+  };
+};
+const renderFootnoteContent = (footnoteMarginTop, bottomTextMarginTop, bottomText, bottomTextTypographyTokens, fontColor, footnoteLinks, bottomLinksMarginLeft, onClickFootnote, themeTokens) => {
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.footnoteContainer, selectFootnoteContainer({
+        footnoteMarginTop
+      })],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+        style: selectFootnoteBottomTextContainer({
+          bottomTextMarginTop
+        }),
+        children: [(0, _renderTypography.default)(bottomText, bottomTextTypographyTokens, undefined, fontColor), ' ']
+      }), footnoteLinks.length <= MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.footnoteLinkContainer, selectFootnoteLinksStyles({
+          bottomLinksMarginLeft
+        })],
+        children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+      }) : null]
+    }), footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.verticalFootnoteLinkContainer,
+      children: (0, _renderFootnoteLinks.default)(footnoteLinks, themeTokens, onClickFootnote)
+    }) : null]
+  });
+};
+var _default = renderFootnoteContent;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  footnoteContainer: {
+    flexDirection: 'row'
+  },
+  footnoteLinkContainer: {
+    flexDirection: 'row',
+    ..._Platform.default.select({
+      ios: {
+        alignSelf: 'flex-end',
+        top: 2
+      },
+      android: {
+        alignSelf: 'center',
+        top: -8
+      }
+    })
+  },
+  verticalFootnoteLinkContainer: {
+    ..._Platform.default.select({
+      ios: {
+        top: 10
+      },
+      android: {
+        top: -2
+      }
+    })
+  }
+});

package/lib/PriceLockup/utils/renderFootnoteLinks.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FootnoteLink = _interopRequireDefault(require("../../Footnote/FootnoteLink"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const selectFootnoteLinkStyles = (_ref, footnoteLinks) => {
+  let {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight,
+    footnoteLinkLineHeight,
+    footnoteLinkFontSize
+  } = _ref;
+  // This is used to apply the proper line height when there is 4 or more footnote links
+  const MAX_FOOTNOTE_LINKS_ALLOWED = 3;
+  const lineHeight = footnoteLinks.length > MAX_FOOTNOTE_LINKS_ALLOWED ? footnoteLinkFontSize * footnoteLinkLineHeight : undefined;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight,
+    lineHeight,
+    fontSize: footnoteLinkFontSize
+  };
+};
+const renderFootnoteLinks = (footnoteLinks, themeTokens, onClickFootnote) => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+  tokens: selectFootnoteLinkStyles(themeTokens, footnoteLinks),
+  content: footnoteLinks,
+  onClick: onClickFootnote
+}) : null;
+var _default = renderFootnoteLinks;
+exports.default = _default;