@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/PriceLockup/PriceLockup.js

@@ -1,335 +0,0 @@
-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 } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { 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 => {
-  let {
-    alignItemsText
-  } = _ref;
-  return alignItemsText;
-});
-const PriceContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "PriceLockup__PriceContainer",
-  componentId: "components-web__sc-1x6duay-1"
-})(["display:flex;margin-bottom:", ";"], _ref2 => {
-  let {
-    priceMarginBottom
-  } = _ref2;
-  return priceMarginBottom;
-});
-const FootnoteContainer = /*#__PURE__*/styled.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__*/styled.div.withConfig({
-  displayName: "PriceLockup__BottomTextContainer",
-  componentId: "components-web__sc-1x6duay-3"
-})(["margin-top:", ";"], _ref5 => {
-  let {
-    bottomTextMarginTop
-  } = _ref5;
-  return bottomTextMarginTop;
-});
-const BottomLinksContainer = /*#__PURE__*/styled.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__*/styled.div.withConfig({
-  displayName: "PriceLockup__TopTextContainer",
-  componentId: "components-web__sc-1x6duay-5"
-})(["margin-bottom:", ";"], _ref7 => {
-  let {
-    topTextMarginBottom
-  } = _ref7;
-  return topTextMarginBottom;
-});
-const PriceTextContainer = /*#__PURE__*/styled.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__*/styled.div.withConfig({
-  displayName: "PriceLockup__RateContainer",
-  componentId: "components-web__sc-1x6duay-7"
-})(["display:flex;"]);
-const RateTextContainer = /*#__PURE__*/styled.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__*/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 => {
-  let {
-    strikeThroughPosition
-  } = _ref10;
-  return `${strikeThroughPosition}px`;
-}, _ref11 => {
-  let {
-    strikeThroughHeight
-  } = _ref11;
-  return `${strikeThroughHeight}px`;
-}, _ref12 => {
-  let {
-    strikeThroughColor
-  } = _ref12;
-  return strikeThroughColor;
-});
-const selectFootnoteLinkStyles = _ref13 => {
-  let {
-    footnoteLinkColor,
-    footnoteLinkFontName,
-    footnoteLinkFontWeight,
-    footnoteLinkLineHeight
-  } = _ref13;
-  return {
-    color: footnoteLinkColor,
-    fontName: footnoteLinkFontName,
-    fontWeight: footnoteLinkFontWeight,
-    lineHeight: footnoteLinkLineHeight
-  };
-};
-const selectStrikeThroughTokens = _ref14 => {
-  let {
-    strikeThroughPosition,
-    strikeThroughHeight,
-    strikeThroughColor
-  } = _ref14;
-  return {
-    strikeThroughHeight,
-    strikeThroughPosition,
-    strikeThroughColor
-  };
-};
-const PriceLockup = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
-  let {
-    size = 'medium',
-    signDirection = 'left',
-    footnoteLinks = [],
-    topText,
-    price,
-    currencySymbol = '$',
-    rateText,
-    ratePosition = 'right',
-    bottomText,
-    onClickFootnote,
-    strikeThrough,
-    a11yText,
-    tokens: priceLockupTokens,
-    variant = {},
-    ...rest
-  } = _ref15;
-  const viewport = useViewport();
-  const {
-    footnoteMarginTop,
-    footnoteGap,
-    bottomTextMarginTop,
-    priceMarginBottom,
-    bottomLinksMarginLeft,
-    topTextMarginBottom,
-    fontColor,
-    dividerColor,
-    footnoteLinkFontSize,
-    alignItemsText,
-    ...themeTokens
-  } = useThemeTokens('PriceLockup', priceLockupTokens, {
-    ...variant,
-    size
-  }, {
-    viewport,
-    strikeThrough
-  });
-  const typographyTokens = getTypographyTokens(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 customProps = position === 'bottom' ? {
-      variant: {
-        size: 'micro'
-      },
-      tokens: {
-        color: fontColor
-      }
-    } : {
-      tokens: {
-        ...tokens,
-        color: fontColor
-      }
-    };
-    return /*#__PURE__*/_jsx(Typography, {
-      ...customProps,
-      children: value
-    });
-  };
-  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
-  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
-    fontSize: footnoteLinkFontSize,
-    tokens: selectFootnoteLinkStyles(themeTokens),
-    number: footnoteLinks,
-    onClick: onClickFootnote
-  }) : null;
-  const renderAmount = () => {
-    const amountComponent = renderTypography(amount, typographyTokens.amount);
-    if (strikeThrough) {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(A11yText, {
-          text: a11yText
-        }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
-          ...selectStrikeThroughTokens(themeTokens),
-          children: amountComponent
-        })]
-      });
-    }
-    return amountComponent;
-  };
-  const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(PriceContainer, {
-      priceMarginBottom: `${priceMarginBottom}px`,
-      children: [/*#__PURE__*/_jsxs(PriceTextContainer, {
-        ratePosition: ratePosition,
-        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__*/_jsx(RateTextContainer, {
-          ratePosition: ratePosition,
-          children: renderTypography(rateText, typographyTokens.rate, ratePosition)
-        })]
-      }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/_jsx(BottomLinksContainer, {
-        bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
-        children: renderFootnoteLinks()
-      })]
-    }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
-  });
-  const renderFootnoteContent = () => /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
-      footnoteMarginTop: `${footnoteMarginTop}px`,
-      footnoteGap: `${footnoteGap}px`,
-      children: [/*#__PURE__*/_jsx(BottomTextContainer, {
-        bottomTextMarginTop: `${bottomTextMarginTop}px`,
-        children: renderTypography(bottomText, typographyTokens.bottomText)
-      }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
-    }), footnoteLinks.length > 3 && renderFootnoteLinks()]
-  });
-  if (strikeThrough && !a11yText) {
-    warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
-  }
-  return /*#__PURE__*/_jsxs(PriceLockupContainer, {
-    ...selectProps(rest),
-    alignItemsText: alignItemsText,
-    ref: ref,
-    children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
-      topTextMarginBottom: `${topTextMarginBottom}px`,
-      children: renderTypography(topText, typographyTokens.topText)
-    }), renderPrice(), bottomText && /*#__PURE__*/_jsx(Divider, {
-      testID: "price-lockup-divider",
-      role: "separator",
-      tokens: {
-        color: dividerColor ?? 'rgba(0, 0, 0, 0)'
-      }
-    }), bottomText && renderFootnoteContent()]
-  });
-});
-PriceLockup.displayName = 'PriceLockup';
-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.oneOf(['micro', 'small', 'medium', 'large']),
-  /**
-   * If currency symbol other than `$` to be used
-   */
-  currencySymbol: PropTypes.string,
-  /**
-   * Shows additional info above the price
-   */
-  topText: PropTypes.string,
-  /**
-   * Monetary value (including decimals separated by ".")
-   */
-  price: PropTypes.string.isRequired,
-  /**
-   * Shows month/year unit
-   */
-  rateText: PropTypes.string,
-  /**
-   * Shows additional info below the price with a `Divider`
-   */
-  bottomText: PropTypes.string,
-  /**
-   * Displays which side the currency should apperar (left, right)
-   */
-  signDirection: PropTypes.oneOf(['right', 'left']),
-  /**
-   * Displays where the rate should apperar (bottom, right)
-   */
-  ratePosition: PropTypes.oneOf(['right', 'bottom']),
-  /**
-   * Shows additional link for context
-   */
-  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-  /**
-   * Function to be called when a footnote link is clicked
-   */
-  onClickFootnote: PropTypes.func,
-  /**
-   * To show price savings comparison
-   */
-  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.string,
-  /**
-   * `PriceLockup` tokens
-   */
-  tokens: getTokensPropType('PriceLockup')
-};
-export default PriceLockup;

package/lib-module/PriceLockup/index.js

@@ -1,2 +0,0 @@
-import PriceLockup from './PriceLockup';
-export default PriceLockup;

package/lib-module/PriceLockup/tokens.js

@@ -1,55 +0,0 @@
-// map typography tokens accordenly
-export default (_ref => {
-  let {
-    topTextFontSize,
-    fontColor,
-    topTextLineHeight,
-    currencySymbolFontSize,
-    currencySymbolLineHeight,
-    currencySymbolFontWeight,
-    amountFontSize,
-    amountLineHeight,
-    amountLetterSpacing,
-    amountFontWeight,
-    centsFontSize,
-    centsLineHeight,
-    rateFontSize,
-    rateLineHeight,
-    bottomTextFontSize,
-    bottomTextLineHeight,
-    rateFontWeight,
-    centsFontWeight
-  } = _ref;
-  return {
-    topText: {
-      fontSize: topTextFontSize,
-      lineHeight: topTextLineHeight
-    },
-    dollarSign: {
-      fontSize: currencySymbolFontSize,
-      lineHeight: currencySymbolLineHeight,
-      fontWeight: currencySymbolFontWeight
-    },
-    amount: {
-      color: fontColor,
-      fontSize: amountFontSize,
-      lineHeight: amountLineHeight,
-      letterSpacing: amountLetterSpacing,
-      fontWeight: amountFontWeight
-    },
-    cents: {
-      fontSize: centsFontSize,
-      lineHeight: centsLineHeight,
-      fontWeight: centsFontWeight
-    },
-    rate: {
-      fontSize: rateFontSize,
-      lineHeight: rateLineHeight,
-      fontWeight: rateFontWeight
-    },
-    bottomText: {
-      fontSize: bottomTextFontSize,
-      lineHeight: bottomTextLineHeight
-    }
-  };
-});

package/lib-module/Progress/ProgressBar.js

@@ -1,83 +0,0 @@
-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';
-
-// Passes React Native-oriented system props through UDS Progress
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const {
-  Bar: ProgressBarBase
-} = Progress;
-const Gradient = /*#__PURE__*/styled.div.attrs({
-  'data-testid': 'ProgressBar-Gradient'
-}).withConfig({
-  displayName: "ProgressBar__Gradient",
-  componentId: "components-web__sc-1vmzyq5-0"
-})(_ref => {
-  let {
-    gradient: {
-      angle,
-      stops,
-      type
-    },
-    borderRadius,
-    shadow
-  } = _ref;
-  return {
-    height: '100%',
-    width: '100%',
-    background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`,
-    borderRadius,
-    ...applyShadowToken(shadow)
-  };
-});
-
-/**
- * The `ProgressBar` is a visual representation of linear progression.
- * It provides simple but important information at a quick glance.
- * This is a  Web-specific progress bar.
- *
- * ## Component API
- *
- * Use props and tokens from the base ProgressBar component. The difference is that the
- * `gradient` is being used here to provide gradient filling.
- *
- */
-const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    percentage,
-    tokens,
-    variant,
-    ...rest
-  } = _ref2;
-  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
-  const selectedProps = selectProps(rest);
-  return /*#__PURE__*/_jsx(ProgressBarBase, {
-    percentage: percentage,
-    tokens: tokens,
-    variant: variant,
-    ref: ref,
-    ...selectedProps,
-    children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
-      ...themeTokens
-    })
-  });
-});
-ProgressBar.displayName = 'ProgressBar';
-ProgressBar.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Percentage of completion.
-   */
-  percentage: PropTypes.number,
-  /**
-   * ProgressBar tokens.
-   */
-  tokens: getTokensPropType('ProgressBar'),
-  /**
-   * ProgressBar variant.
-   */
-  variant: variantProp.propType
-};
-export default ProgressBar;

package/lib-module/Progress/index.js

@@ -1,4 +0,0 @@
-import { Progress } from '@telus-uds/components-base';
-import ProgressBar from './ProgressBar';
-Progress.Bar = ProgressBar;
-export default Progress;