@telus-uds/components-web 2.43.0 → 3.0.0

package/lib/PriceLockup/PriceLockup.js

@@ -1,20 +1,13 @@
-"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({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import FootnoteLink from '../Footnote/FootnoteLink';
+import getTypographyTokens from './tokens';
+import { htmlAttrs, warn } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const PriceLockupContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceLockupContainer",
   componentId: "components-web__sc-1x6duay-0"
 })(["align-items:", ";display:flex;flex-direction:column;width:fit-content;"], _ref => {
@@ -23,7 +16,7 @@ const PriceLockupContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref;
   return alignItemsText;
 });
-const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const PriceContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceContainer",
   componentId: "components-web__sc-1x6duay-1"
 })(["display:flex;margin-bottom:", ";"], _ref2 => {
@@ -32,7 +25,7 @@ const PriceContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref2;
   return priceMarginBottom;
 });
-const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FootnoteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__FootnoteContainer",
   componentId: "components-web__sc-1x6duay-2"
 })(["display:flex;margin-top:", ";gap:", ";"], _ref3 => {
@@ -46,7 +39,7 @@ const FootnoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   } = _ref4;
   return footnoteGap;
 });
-const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const BottomTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomTextContainer",
   componentId: "components-web__sc-1x6duay-3"
 })(["margin-top:", ";"], _ref5 => {
@@ -55,7 +48,7 @@ const BottomTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfi
   } = _ref5;
   return bottomTextMarginTop;
 });
-const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const BottomLinksContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__BottomLinksContainer",
   componentId: "components-web__sc-1x6duay-4"
 })(["align-self:center;margin-left:", ";"], _ref6 => {
@@ -64,7 +57,7 @@ const BottomLinksContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   } = _ref6;
   return bottomLinksMarginLeft;
 });
-const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__TopTextContainer",
   componentId: "components-web__sc-1x6duay-5"
 })(["margin-bottom:", ";"], _ref7 => {
@@ -73,7 +66,7 @@ const TopTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref7;
   return topTextMarginBottom;
 });
-const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__PriceTextContainer",
   componentId: "components-web__sc-1x6duay-6"
 })(["display:flex;flex-direction:", ";"], _ref8 => {
@@ -82,11 +75,11 @@ const PriceTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig
   } = _ref8;
   return ratePosition === 'bottom' ? 'column' : 'row';
 });
-const RateContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const RateContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateContainer",
   componentId: "components-web__sc-1x6duay-7"
 })(["display:flex;"]);
-const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
   componentId: "components-web__sc-1x6duay-8"
 })(["align-self:", ";"], _ref9 => {
@@ -95,7 +88,7 @@ const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   } = _ref9;
   return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
 });
-const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const StrikeThroughContainer = /*#__PURE__*/styled.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 => {
@@ -140,7 +133,7 @@ const selectStrikeThroughTokens = _ref14 => {
     strikeThroughColor
   };
 };
-const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
+const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -158,7 +151,7 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
     variant = {},
     ...rest
   } = _ref15;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const {
     footnoteMarginTop,
     footnoteGap,
@@ -171,14 +164,14 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
     footnoteLinkFontSize,
     alignItemsText,
     ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, {
+  } = useThemeTokens('PriceLockup', priceLockupTokens, {
     ...variant,
     size
   }, {
     viewport,
     strikeThrough
   });
-  const typographyTokens = (0, _tokens.default)(themeTokens);
+  const typographyTokens = getTypographyTokens(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -203,13 +196,13 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
         color: fontColor
       }
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+    return /*#__PURE__*/_jsx(Typography, {
       ...customProps,
       children: value
     });
   };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
-  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
     fontSize: footnoteLinkFontSize,
     tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
@@ -218,10 +211,10 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
   const renderAmount = () => {
     const amountComponent = renderTypography(amount, typographyTokens.amount);
     if (strikeThrough) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(A11yText, {
           text: a11yText
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
+        }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
           ...selectStrikeThroughTokens(themeTokens),
           children: amountComponent
         })]
@@ -229,46 +222,46 @@ const PriceLockup = /*#__PURE__*/_react.default.forwardRef((_ref15, ref) => {
     }
     return amountComponent;
   };
-  const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
+  const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(PriceContainer, {
       priceMarginBottom: `${priceMarginBottom}px`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceTextContainer, {
+      children: [/*#__PURE__*/_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: [/*#__PURE__*/_jsxs(RateContainer, {
+          children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
             children: ["\xA0", renderCurrencySymbol()]
           })]
-        }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
+        }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
           ratePosition: ratePosition,
           children: renderTypography(rateText, typographyTokens.rate, ratePosition)
         })]
-      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
+      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/_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, {
+  const renderFootnoteContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
       footnoteMarginTop: `${footnoteMarginTop}px`,
       footnoteGap: `${footnoteGap}px`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
+      children: [/*#__PURE__*/_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');
+    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, {
+  return /*#__PURE__*/_jsxs(PriceLockupContainer, {
     ...selectProps(rest),
     alignItemsText: alignItemsText,
     ref: ref,
-    children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
+    children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
-    }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+    }), renderPrice(), bottomText && /*#__PURE__*/_jsx(Divider, {
       testID: "price-lockup-divider",
       role: "separator",
       tokens: {
@@ -285,57 +278,56 @@ PriceLockup.propTypes = {
    *
    * 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']),
+  size: PropTypes.oneOf(['micro', 'small', 'medium', 'large']),
   /**
    * If currency symbol other than `$` to be used
    */
-  currencySymbol: _propTypes.default.string,
+  currencySymbol: PropTypes.string,
   /**
    * Shows additional info above the price
    */
-  topText: _propTypes.default.string,
+  topText: PropTypes.string,
   /**
    * Monetary value (including decimals separated by ".")
    */
-  price: _propTypes.default.string.isRequired,
+  price: PropTypes.string.isRequired,
   /**
    * Shows month/year unit
    */
-  rateText: _propTypes.default.string,
+  rateText: PropTypes.string,
   /**
    * Shows additional info below the price with a `Divider`
    */
-  bottomText: _propTypes.default.string,
+  bottomText: PropTypes.string,
   /**
    * Displays which side the currency should apperar (left, right)
    */
-  signDirection: _propTypes.default.oneOf(['right', 'left']),
+  signDirection: PropTypes.oneOf(['right', 'left']),
   /**
    * Displays where the rate should apperar (bottom, right)
    */
-  ratePosition: _propTypes.default.oneOf(['right', 'bottom']),
+  ratePosition: PropTypes.oneOf(['right', 'bottom']),
   /**
    * Shows additional link for context
    */
-  footnoteLinks: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
   /**
    * Function to be called when a footnote link is clicked
    */
-  onClickFootnote: _propTypes.default.func,
+  onClickFootnote: PropTypes.func,
   /**
    * To show price savings comparison
    */
-  strikeThrough: _propTypes.default.bool,
+  strikeThrough: PropTypes.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,
+  a11yText: PropTypes.string,
   /**
    * `PriceLockup` tokens
    */
-  tokens: (0, _componentsBase.getTokensPropType)('PriceLockup')
+  tokens: getTokensPropType('PriceLockup')
 };
-var _default = PriceLockup;
-exports.default = _default;
+export default PriceLockup;

package/lib/PriceLockup/index.js

@@ -1,10 +1,2 @@
-"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;
+import PriceLockup from './PriceLockup';
+export default PriceLockup;

package/lib/PriceLockup/tokens.js

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 // map typography tokens accordenly
-var _default = _ref => {
+export default _ref => {
   let {
     topTextFontSize,
     fontColor,
@@ -58,5 +52,4 @@ var _default = _ref => {
       lineHeight: bottomTextLineHeight
     }
   };
-};
-exports.default = _default;
+};

package/lib/Progress/ProgressBar.js

@@ -1,21 +1,15 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp, applyShadowToken } from '@telus-uds/components-base';
+import styled from 'styled-components';
 
-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 _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS Progress
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
   Bar: ProgressBarBase
-} = _componentsBase.Progress;
-const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
+} = Progress;
+const Gradient = /*#__PURE__*/styled.div.attrs({
   'data-testid': 'ProgressBar-Gradient'
 }).withConfig({
   displayName: "ProgressBar__Gradient",
@@ -35,7 +29,7 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
     width: '100%',
     background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
     borderRadius,
-    ...(0, _componentsBase.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 });
 
@@ -50,22 +44,22 @@ const Gradient = /*#__PURE__*/_styledComponents.default.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
-const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     percentage,
     tokens,
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _componentsBase.useThemeTokens)('ProgressBar', tokens, variant);
+  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
   const selectedProps = selectProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBarBase, {
+  return /*#__PURE__*/_jsx(ProgressBarBase, {
     percentage: percentage,
     tokens: tokens,
     variant: variant,
     ref: ref,
     ...selectedProps,
-    children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, {
+    children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
       ...themeTokens
     })
   });
@@ -76,15 +70,14 @@ ProgressBar.propTypes = {
   /**
    * Percentage of completion.
    */
-  percentage: _propTypes.default.number,
+  percentage: PropTypes.number,
   /**
    * ProgressBar tokens.
    */
-  tokens: (0, _componentsBase.getTokensPropType)('ProgressBar'),
+  tokens: getTokensPropType('ProgressBar'),
   /**
    * ProgressBar variant.
    */
-  variant: _componentsBase.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = ProgressBar;
-exports.default = _default;
+export default ProgressBar;

package/lib/Progress/index.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _componentsBase = require("@telus-uds/components-base");
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_componentsBase.Progress.Bar = _ProgressBar.default;
-var _default = _componentsBase.Progress;
-exports.default = _default;
+import { Progress } from '@telus-uds/components-base';
+import ProgressBar from './ProgressBar';
+Progress.Bar = ProgressBar;
+export default Progress;