@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/TermsAndConditions/TermsAndConditions.js

@@ -0,0 +1,283 @@
+"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 _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
+var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
+var _utils = require("../utils");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "TermsAndConditions__ContentContainer",
+  componentId: "components-web__sc-1199epn-0"
+})(_ref => {
+  let {
+    tokens
+  } = _ref;
+  return {
+    paddingBottom: tokens.contentPaddingBottom,
+    paddingLeft: tokens.contentPaddingLeft,
+    ...(0, _utils.media)().from('md').css({
+      paddingBottom: tokens.mdContentPaddingBottom,
+      paddingLeft: tokens.mdContentPaddingLeft
+    })
+  };
+});
+const Ordered = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "TermsAndConditions__Ordered",
+  componentId: "components-web__sc-1199epn-1"
+})(_ref2 => {
+  let {
+    tokens
+  } = _ref2;
+  return {
+    listStylePosition: 'outside',
+    padding: tokens.orderedPadding
+  };
+});
+const Unordered = /*#__PURE__*/_styledComponents.default.ul.withConfig({
+  displayName: "TermsAndConditions__Unordered",
+  componentId: "components-web__sc-1199epn-2"
+})(_ref3 => {
+  let {
+    tokens
+  } = _ref3;
+  return {
+    listStyleType: 'none',
+    margin: 0,
+    padding: 0,
+    paddingTop: tokens.unorderedPadding
+  };
+});
+const ListItem = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default.Item).withConfig({
+  displayName: "TermsAndConditions__ListItem",
+  componentId: "components-web__sc-1199epn-3"
+})(_ref4 => {
+  let {
+    tokens
+  } = _ref4;
+  return {
+    display: 'list-item',
+    '&::marker': {
+      fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+      fontSize: tokens.listFontSize,
+      lineHeight: tokens.listLineHeight,
+      textAlign: 'end !important'
+    },
+    color: tokens.listColor,
+    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+    fontSize: tokens.listFontSize,
+    lineHeight: tokens.listLineHeight,
+    marginBottom: tokens.listMarginBottom,
+    marginLeft: tokens.listMarginLeft,
+    wordBreak: 'break-word'
+  };
+});
+const NonIndexedContentTitle = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "TermsAndConditions__NonIndexedContentTitle",
+  componentId: "components-web__sc-1199epn-4"
+})(_ref5 => {
+  let {
+    tokens
+  } = _ref5;
+  return {
+    color: tokens.titleColor,
+    fontSize: tokens.titleFontSize,
+    lineHeight: tokens.titleLineHeight,
+    paddingLeft: tokens.titlePaddingLeft
+  };
+});
+
+/**
+ * Use `TermsAndConditions` to display important legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Display before the page footer, except for call-to-action callback cards
+ * - Responsive display based on breakpoints
+ * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
+ */
+const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    copy = 'en',
+    indexedContent = [],
+    nonIndexedContent = [],
+    tokens = {},
+    variant = {},
+    dictionary = _dictionary.default,
+    ...rest
+  } = _ref6;
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary,
+    copy
+  });
+  const hasIndexedContent = indexedContent.length > 0;
+  const hasNonIndexedContent = nonIndexedContent.length > 0;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _componentsBase.useResponsiveThemeTokens : _componentsBase.useThemeTokens;
+  const themeTokens = useTokens('TermsAndConditions', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  let listItemStyles;
+  let listItemMediaIds;
+  let nonIndexedContentStyles;
+  let nonIndexedContentMediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const {
+      transformedListItemThemeTokens,
+      transformedNonIndexedContentThemeTokens
+    } = Object.entries(themeTokens).reduce((acc, _ref7) => {
+      let [vp, viewportTokens] = _ref7;
+      acc.transformedListItemThemeTokens[vp] = {
+        marginLeft: viewportTokens.listMarginLeft
+      };
+      acc.transformedNonIndexedContentThemeTokens[vp] = {
+        paddingLeft: viewportTokens.titlePaddingLeft
+      };
+      return acc;
+    }, {
+      transformedListItemThemeTokens: {},
+      transformedNonIndexedContentThemeTokens: {}
+    });
+    const listItemMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedListItemThemeTokens);
+    const nonIndexedContentMediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(transformedNonIndexedContentThemeTokens);
+    const {
+      ids,
+      styles
+    } = _componentsBase.StyleSheet.create({
+      listItem: {
+        ...themeTokens[viewport],
+        ...listItemMediaQueryStyles
+      },
+      nonIndexedContent: {
+        ...themeTokens[viewport],
+        ...nonIndexedContentMediaQueryStyles
+      }
+    });
+    listItemStyles = styles.listItem;
+    listItemMediaIds = ids.listItem;
+    nonIndexedContentStyles = styles.nonIndexedContent;
+    nonIndexedContentMediaIds = ids.nonIndexedContent;
+  } else {
+    listItemStyles = themeTokens;
+    nonIndexedContentStyles = themeTokens;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+      collapseTitle: getCopy('headingView'),
+      expandTitle: getCopy('headingHide'),
+      collapseLabel: getCopy('collapseLabel'),
+      expandLabel: getCopy('expandLabel'),
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
+        tokens: themeTokens,
+        children: [hasIndexedContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(Ordered, {
+          tokens: themeTokens,
+          children: indexedContent.map((contentItem, idx) =>
+          /*#__PURE__*/
+          // eslint-disable-next-line react/no-array-index-key
+          (0, _jsxRuntime.jsx)(ListItem, {
+            tokens: listItemStyles,
+            media: listItemMediaIds,
+            children: (0, _utils.renderStructuredContent)(contentItem)
+          }, idx))
+        }), hasNonIndexedContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+          between: 3,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NonIndexedContentTitle, {
+            tokens: nonIndexedContentStyles,
+            media: nonIndexedContentMediaIds,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              block: true,
+              heading: true,
+              tokens: {
+                fontName: themeTokens.expandTitleFontName,
+                fontWeight: themeTokens.expandTitleFontWeight,
+                fontSize: themeTokens.titleFontSize,
+                lineHeight: themeTokens.titleLineHeight
+              },
+              children: getCopy('nonIndexedTitle')
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Unordered, {
+            tokens: themeTokens,
+            children: nonIndexedContent.map((contentItem, idx) =>
+            /*#__PURE__*/
+            // eslint-disable-next-line react/no-array-index-key
+            (0, _jsxRuntime.jsx)(ListItem, {
+              tokens: listItemStyles,
+              media: listItemMediaIds,
+              children: (0, _utils.renderStructuredContent)(contentItem)
+            }, idx))
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    })]
+  });
+});
+TermsAndConditions.displayName = 'TermsAndConditions';
+
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = _propTypes.default.shape({
+  headingHide: _propTypes.default.string.isRequired,
+  headingView: _propTypes.default.string.isRequired,
+  nonIndexedTitle: _propTypes.default.string.isRequired
+});
+TermsAndConditions.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   *
+   * To provide your own, pass a JSON object with the keys `headingView`, `headingHide`, and `nonIndexedTitle`.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    headingView: _propTypes.default.string,
+    headingHide: _propTypes.default.string,
+    nonIndexedTitle: _propTypes.default.string
+  })]),
+  /**
+   * Sets the tokens for TermsAndConditions element.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('TermsAndConditions'),
+  /**
+   * An array of nodes, strings, or a combination to be displayed in an ordered list.
+   *
+   * Each item in the array must have a corresponding superscript in the page.
+   */
+  indexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])),
+  /**
+   * An array of nodes, strings, or a combination to be displayed in an unordered list.
+   *
+   * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
+   */
+  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])),
+  /**
+   * Custom dictionary containing the labels to use for `TermsAndConditions`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
+};
+var _default = exports.default = TermsAndConditions;

package/lib/cjs/TermsAndConditions/dictionary.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    headingHide: 'Hide terms and conditions',
+    headingView: 'View terms and conditions',
+    nonIndexedTitle: 'The following applies to all terms and conditions above',
+    expandLabel: 'Expand',
+    collapseLabel: 'Collapse'
+  },
+  fr: {
+    headingHide: 'Masquer les modalités et conditions',
+    headingView: 'Voir les modalités et conditions',
+    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus',
+    expandLabel: 'Détailler',
+    collapseLabel: 'Réduire'
+  }
+};

package/lib/cjs/TermsAndConditions/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TermsAndConditions.default;
+  }
+});
+var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/Testimonial/Testimonial.js

@@ -0,0 +1,240 @@
+"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 _Image = _interopRequireDefault(require("../Image"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const TestimonialContainer = /*#__PURE__*/_styledComponents.default.figure.withConfig({
+  displayName: "Testimonial__TestimonialContainer",
+  componentId: "components-web__sc-1az53gr-0"
+})(_ref => {
+  let {
+    testimonialContainerGap
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: testimonialContainerGap,
+    margin: 0
+  };
+});
+const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Testimonial__QuoteContainer",
+  componentId: "components-web__sc-1az53gr-1"
+})(_ref2 => {
+  let {
+    quoteContainerGap
+  } = _ref2;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: quoteContainerGap
+  };
+});
+const Divider = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Testimonial__Divider",
+  componentId: "components-web__sc-1az53gr-2"
+})(_ref3 => {
+  let {
+    dividerBorder,
+    dividerBackgroundColor
+  } = _ref3;
+  return {
+    height: dividerBorder,
+    background: dividerBackgroundColor,
+    width: '100%'
+  };
+});
+const BlockQuote = /*#__PURE__*/_styledComponents.default.blockquote.withConfig({
+  displayName: "Testimonial__BlockQuote",
+  componentId: "components-web__sc-1az53gr-3"
+})({
+  margin: 0
+});
+const AuthorInfoContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Testimonial__AuthorInfoContainer",
+  componentId: "components-web__sc-1az53gr-4"
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const Figcaption = /*#__PURE__*/_styledComponents.default.figcaption.withConfig({
+  displayName: "Testimonial__Figcaption",
+  componentId: "components-web__sc-1az53gr-5"
+})(_ref4 => {
+  let {
+    figcaptionGap
+  } = _ref4;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: figcaptionGap
+  };
+});
+const Testimonial = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    showDivider,
+    testimonial,
+    title,
+    imageSrc,
+    image = imageSrc,
+    additionalInfo,
+    testimonialStyle = 'large',
+    tokens,
+    copy = 'en',
+    variant = {},
+    ...rest
+  } = _ref5;
+  const viewport = (0, _componentsBase.useViewport)();
+  const {
+    testimonialContainerGap,
+    quoteContainerGap,
+    dividerBorder,
+    dividerBackgroundColor,
+    figcaptionGap,
+    textColor,
+    icon,
+    iconFr,
+    iconColor,
+    imageSize,
+    testimonialFontSizeLarge,
+    testimonialLineHeightLarge,
+    testimonialFontWeightLarge,
+    testimonialFontSizeHeading,
+    testimonialLineHeightHeading,
+    testimonialFontNameHeading,
+    testimonialFontWeightHeading,
+    authorFontSize,
+    authorLineHeight,
+    authorFontName,
+    authorFontWeight,
+    additionalFontSize,
+    additionalLineHeight,
+    additionalFontName,
+    additionalFontWeight
+  } = (0, _componentsBase.useThemeTokens)('Testimonial', tokens, variant, {
+    viewport
+  });
+  const getQuoteTestimonial = open => {
+    let quote = '';
+    if (copy === 'en') quote = open ? '\u201C' : '\u201D';else quote = open ? '\u00AB ' : ' \u00BB';
+    return quote;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TestimonialContainer, {
+    testimonialContainerGap: testimonialContainerGap,
+    ref: ref,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(QuoteContainer, {
+      quoteContainerGap: quoteContainerGap,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+        tokens: {
+          color: iconColor
+        },
+        variant: {
+          size: 'micro'
+        },
+        icon: copy === 'en' ? icon : iconFr
+      }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+        dividerBackgroundColor: dividerBackgroundColor,
+        dividerBorder: dividerBorder,
+        role: "separator"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockQuote, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: testimonialStyle === 'large' ? 'large' : 'h3'
+        },
+        tokens: {
+          color: textColor,
+          fontSize: testimonialStyle === 'heading' ? testimonialFontSizeHeading : testimonialFontSizeLarge,
+          lineHeight: testimonialStyle === 'heading' ? testimonialLineHeightHeading : testimonialLineHeightLarge,
+          fontName: testimonialFontNameHeading,
+          fontWeight: testimonialStyle === 'heading' ? testimonialFontWeightHeading : testimonialFontWeightLarge
+        },
+        children: `${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`
+      })
+    }), (image || title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Figcaption, {
+      figcaptionGap: figcaptionGap,
+      children: [image && (typeof image === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        rounded: "circle",
+        src: image,
+        alt: title,
+        width: imageSize,
+        height: imageSize
+      }) : image), (title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorInfoContainer, {
+        children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            size: 'small'
+          },
+          tokens: {
+            color: textColor,
+            fontSize: authorFontSize,
+            lineHeight: authorLineHeight,
+            fontName: authorFontName,
+            fontWeight: authorFontWeight
+          },
+          children: title
+        }), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            size: 'small'
+          },
+          tokens: {
+            color: textColor,
+            fontSize: additionalFontSize,
+            lineHeight: additionalLineHeight,
+            fontName: additionalFontName,
+            fontWeight: additionalFontWeight
+          },
+          children: additionalInfo
+        })]
+      })]
+    }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+      dividerBackgroundColor: dividerBackgroundColor,
+      dividerBorder: dividerBorder,
+      role: "separator"
+    })]
+  });
+});
+Testimonial.displayName = 'Testimonial';
+Testimonial.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('Testimonial'),
+  /**
+   * Testimonial content
+   */
+  testimonial: _propTypes.default.string.isRequired,
+  /**
+   * Testimonial author or source
+   */
+  title: _propTypes.default.string,
+  /**
+   * Additional information on the author or source
+   */
+  additionalInfo: _propTypes.default.string,
+  /**
+   * Testimonial style
+   */
+  testimonialStyle: _propTypes.default.oneOf(['large', 'heading']),
+  /**
+   * Whether to show or not dividers at the top and the bottom of the testimonial
+  showDivider: PropTypes.bool,
+  /**
+   * The src attribute for the Image component or custom JSX content to render instead
+   */
+  image: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  /**
+   * The src attribute for the `Image` component to be displayed on the testimonial
+   * @deprecated please use the `image` prop instead
+   */
+  imageSrc: _propTypes.default.string
+};
+var _default = exports.default = Testimonial;

package/lib/cjs/Testimonial/index.js

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