@telus-uds/components-web 1.2.0 → 1.4.0

package/lib-module/PriceLockup/PriceLockup.js

@@ -0,0 +1,213 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import FootnoteLink from '../Footnote/FootnoteLink';
+import typographyTokens 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"
+})(["display:flex;flex-direction:column;width:fit-content;"]);
+const PriceContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceContainer",
+  componentId: "components-web__sc-1x6duay-1"
+})(["display:flex;margin-bottom:", ";"], _ref => {
+  let {
+    priceMarginBottom
+  } = _ref;
+  return priceMarginBottom;
+});
+const FootnoteContainer = /*#__PURE__*/styled.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__*/styled.div.withConfig({
+  displayName: "PriceLockup__BottomTextContainer",
+  componentId: "components-web__sc-1x6duay-3"
+})(["margin-top:", ";"], _ref4 => {
+  let {
+    bottomTextMarginTop
+  } = _ref4;
+  return bottomTextMarginTop;
+});
+const BottomLinksContainer = /*#__PURE__*/styled.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__*/styled.div.withConfig({
+  displayName: "PriceLockup__TopTextContainer",
+  componentId: "components-web__sc-1x6duay-5"
+})(["margin-bottom:", ";"], _ref6 => {
+  let {
+    topTextMarginBottom
+  } = _ref6;
+  return topTextMarginBottom;
+});
+const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__RateTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["align-self:flex-end;"]);
+const StrikeThroughContainer = /*#__PURE__*/styled.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
+  } = 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__*/_jsx(Typography, {
+    tokens: { ...tokens,
+      color
+    },
+    children: value
+  });
+
+  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign[size]);
+
+  const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
+    number: footnoteLinks,
+    onClick: onClickFootnote
+  }) : null;
+
+  const renderAmount = () => {
+    const amountComponent = renderTypography(amount, typographyTokens.amount[size]);
+
+    if (strikeThrough) {
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(A11yText, {
+          text: a11yText
+        }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
+          strikeThroughHeight: `${strikeThroughHeight}px`,
+          strikeThroughBackground: strikeThroughBackground,
+          children: amountComponent
+        })]
+      });
+    }
+
+    return amountComponent;
+  };
+
+  const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(PriceContainer, {
+      priceMarginBottom: `${priceMarginBottom}px`,
+      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents[size]), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: ["\xA0", renderCurrencySymbol()]
+      }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
+        children: renderTypography(rateText, typographyTokens.rate[size])
+      }), !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[size])
+      }), 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),
+    children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
+      topTextMarginBottom: `${topTextMarginBottom}px`,
+      children: renderTypography(topText, typographyTokens.topText[size])
+    }), renderPrice(), bottomText && /*#__PURE__*/_jsx(Divider, {
+      testID: "price-lockup-divider",
+      role: "separator",
+      tokens: {
+        color: dividerColor
+      }
+    }), bottomText && renderFootnoteContent()]
+  });
+};
+
+PriceLockup.propTypes = { ...selectedSystemPropTypes,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  currencySymbol: PropTypes.string,
+  topText: PropTypes.string,
+  price: PropTypes.string.isRequired,
+  rateText: PropTypes.string,
+  bottomText: PropTypes.string,
+  signDirection: PropTypes.oneOf(['right', 'left']),
+  footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  onClickFootnote: PropTypes.func,
+  strikeThrough: PropTypes.bool,
+  a11yText: PropTypes.string
+};
+export default PriceLockup;

package/lib-module/PriceLockup/index.js

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

package/lib-module/PriceLockup/tokens.js

@@ -0,0 +1,120 @@
+import palette from '@telus-uds/palette-allium/build/rn/palette';
+const {
+  fontSize: {
+    size14,
+    size16,
+    size20,
+    size28,
+    size36,
+    size40,
+    size64
+  },
+  lineHeight: {
+    ratio1to1,
+    ratio10to7,
+    ratio3to2,
+    ratio8to5,
+    ratio5to4,
+    ratio6to5,
+    ratio9to8,
+    ratio4to3,
+    ratio8to7
+  },
+  letterSpacing: {
+    condensed
+  }
+} = palette;
+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
+    }
+  }
+};
+export default typographyTokens;

package/lib-module/ResponsiveImage/ResponsiveImage.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { viewports } from '@telus-uds/system-constants';
+import { htmlAttrs } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const staticStyles = {
+  image: {
+    display: 'block',
+    width: '100%'
+  }
+};
+/**
+ * Provide different image sources for different screen sizes.
+ */
+
+const ResponsiveImage = _ref => {
+  let {
+    xsSrc,
+    smSrc,
+    mdSrc,
+    lgSrc,
+    xlSrc,
+    fallbackSrc,
+    alt,
+    loading = 'eager',
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsxs("picture", { ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx("source", {
+      srcSet: xlSrc,
+      media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: lgSrc,
+      media: `(min-width: ${viewports.map.get(viewports.lg)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: mdSrc,
+      media: `(min-width: ${viewports.map.get(viewports.md)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: smSrc,
+      media: `(min-width: ${viewports.map.get(viewports.sm)}px)`
+    }), /*#__PURE__*/_jsx("source", {
+      srcSet: xsSrc,
+      media: `(max-width: ${viewports.map.get(viewports.sm) - 1}px)`
+    }), /*#__PURE__*/_jsx("img", {
+      src: fallbackSrc,
+      alt: alt,
+      style: staticStyles.image,
+      loading: loading
+    })]
+  });
+};
+
+ResponsiveImage.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The src attribute used for screen widths up to 575px
+   */
+  xsSrc: PropTypes.string.isRequired,
+
+  /**
+   * The src attribute used for screen widths greater than 576px
+   */
+  smSrc: PropTypes.string.isRequired,
+
+  /**
+   * The src attribute used for screen widths greater than 768px
+   */
+  mdSrc: PropTypes.string,
+
+  /**
+   * The src attribute used for screen widths greater than 992px
+   */
+  lgSrc: PropTypes.string,
+
+  /**
+   * The src attribute used for screen widths greater than 1200px
+   */
+  xlSrc: PropTypes.string,
+
+  /**
+   * The src attribute used for browsers that don't support responsive images (InternetExplorer)
+   */
+  fallbackSrc: PropTypes.string.isRequired,
+
+  /**
+   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
+   */
+  alt: PropTypes.string.isRequired,
+
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: PropTypes.oneOf(['eager', 'lazy'])
+};
+export default ResponsiveImage;

package/lib-module/ResponsiveImage/index.js

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

package/lib-module/Ribbon/Ribbon.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'; // import palette from '@telus-uds/palette-allium/build/web/palette'
-
+import { selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib-module/Span/Span.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs, useTypographyTheme } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledSpan = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Span__StyledSpan",
+  componentId: "components-web__sc-o7sihn-0"
+})(["", "};"], _ref => {
+  let {
+    flex
+  } = _ref;
+  return flex ? 'display: inline-flex' : '';
+});
+/**
+ * Text as an HTML ```<span>``` element.
+ *
+ * Span may be used in cases where an inline span or direct access to HTML attributes is required.
+ * In most cases, `Typography` should be used for text, or Paragraph for body text.
+ */
+
+const Span = _ref2 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    flex,
+    ...rest
+  } = _ref2;
+  const style = useTypographyTheme(variant, tokens);
+  return /*#__PURE__*/_jsx(StyledSpan, {
+    "data-testid": testID,
+    flex: flex,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Span.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  testID: PropTypes.string,
+
+  /**
+   * Sets display to inline-flex so that children are laid out using the flex model.
+   * Use this if the span contains children that expect to be inside a flex container.
+   */
+  flex: PropTypes.bool,
+
+  /**
+   * Span takes the same tokens overrides as Typography
+   */
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+
+  /**
+   * Span can take any of Typography's theme variants
+   */
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    compact: PropTypes.bool,
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
+    weight: PropTypes.oneOf(['semibold', 'bold'])
+  })
+};
+export default Span;

package/lib-module/Span/index.js

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

package/lib-module/index.js

@@ -1,4 +1,14 @@
 export { default as Badge } from './Badge';
+export { default as OrderedList } from './OrderedList';
+export { default as PreviewCard } from './PreviewCard';
+export { default as ResponsiveImage } from './ResponsiveImage';
 export { default as Ribbon } from './Ribbon';
+export { default as DatePicker } from './DatePicker';
+export { default as Span } from './Span';
+export { default as ExpandCollapseMini } from './ExpandCollapseMini';
+export { default as Callout } from './Callout';
+export { default as PriceLockup } from './PriceLockup';
+export { default as Footnote } from './Footnote';
 export { transformGradient } from './utils';
+export { default as Breadcrumbs } from './Breadcrumbs';
 export * from './baseExports';

package/lib-module/shared/FullBleedContent/FullBleedContent.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ResponsiveImage from '../../ResponsiveImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const selectFullBleedContentProps = _ref => {
+  let {
+    alt,
+    height,
+    loading,
+    src,
+    width,
+    fallbackSrc = src,
+    lgSrc = src,
+    mdSrc = src,
+    smSrc = src,
+    xlSrc = src,
+    xsSrc = src
+  } = _ref;
+  return {
+    alt,
+    height,
+    loading,
+    src,
+    width,
+    fallbackSrc,
+    lgSrc,
+    mdSrc,
+    smSrc,
+    xlSrc,
+    xsSrc
+  };
+};
+
+const FullBleedContentContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "FullBleedContent__FullBleedContentContainer",
+  componentId: "components-web__sc-1130ea5-0"
+})(_ref2 => {
+  let {
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+  } = _ref2;
+  return {
+    overflow: 'hidden',
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius
+  };
+});
+/**
+ * Full bleed content component can accept either a single source,
+ * a number of sources corresponding to the `ResponsiveImage` component API,
+ * or a custom component.
+ */
+
+const FullBleedContent = _ref3 => {
+  let {
+    borderRadius,
+    content,
+    ...rest
+  } = _ref3;
+  return /*#__PURE__*/_jsx(FullBleedContentContainer, { ...borderRadius,
+    children: content ?? /*#__PURE__*/_jsx(ResponsiveImage, { ...selectFullBleedContentProps(rest)
+    })
+  });
+};
+
+FullBleedContent.propTypes = {
+  /**
+   * Content border radius matching the edge values on the parent card.
+   */
+  borderRadius: PropTypes.shape({
+    borderBottomLeftRadius: PropTypes.number,
+    borderBottomRightRadius: PropTypes.number,
+    borderTopLeftRadius: PropTypes.number,
+    borderTopRightRadius: PropTypes.number
+  }),
+
+  /**
+   * Custom JSX to be used for rendering the content (defaults to `ResponsiveImage` receiving other props).
+   */
+  content: PropTypes.node,
+
+  /**
+   * Image source.
+   */
+  src: PropTypes.string,
+
+  /**
+   * Also accept props for `ResponsiveImage`...
+   */
+  ...ResponsiveImage.propTypes,
+
+  /**
+   * ...but make the required ones optional.
+   */
+  alt: PropTypes.string,
+  xsSrc: PropTypes.string,
+  smSrc: PropTypes.string,
+  fallbackSrc: PropTypes.string
+};
+export default FullBleedContent;