@telus-uds/components-web 1.2.0 → 1.4.0

package/lib/PreviewCard/PreviewCard.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _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); }
+
+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/require-default-props */
+// 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
+};
+/**
+ * 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__*/(0, _react.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',
+                colour: 'secondary'
+              },
+              children: tag
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 2
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              size: 'h4',
+              colour: 'secondary'
+            },
+            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',
+                colour: 'secondary'
+              },
+              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,
+
+  /**
+   * 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 = (0, _componentsBase.withLinkRouter)(PreviewCard);
+
+exports.default = _default;

package/lib/PreviewCard/index.js

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

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;