@telus-uds/components-web 1.7.0 → 1.9.0

package/lib/StoryCard/StoryCard.js

@@ -0,0 +1,244 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+
+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: "StoryCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-yhvivu-0"
+})(_ref => {
+  let {
+    borderOffset
+  } = _ref;
+  return {
+    overflow: 'hidden',
+    marginTop: borderOffset * 2
+  };
+});
+
+const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "StoryCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-yhvivu-1"
+})(_ref2 => {
+  let {
+    borderOffset
+  } = _ref2;
+  return {
+    position: 'relative',
+    margin: 0 - borderOffset
+  };
+});
+/**
+ * Showcase and guide users to another page, offering a description of that page's story.
+ * Whole card is interactive, width expands based on column or container.
+ *
+ * - Use `tag` to show category of content
+ * - Use `date` to show when the story was published
+ * - Use `title` to show title of the story
+ * - Use `description` to show description of the story
+ * - Use `href` to set the target URL
+ * - Use `fullBleedContent` to set the thumbnail image
+ */
+
+
+const StoryCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    tag,
+    date,
+    title,
+    description,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    onPress,
+    href,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref3;
+  const {
+    fullBleedContentPosition,
+    contentStackDirection,
+    fullBleedContentProps
+  } = (0, _FullBleedContent.useFullBleedContentProps)({ ...fullBleedContent,
+    position: 'bottom'
+  });
+  const generalTokens = (0, _componentsBase.useThemeTokens)('StoryCard', tokens, variant);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('StoryCard', tokens, variant);
+
+  const getPressableCardTokens = cardState => getTokens(cardState);
+
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    ref: ref,
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderRadius,
+        borderWidth
+      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
+
+      const borderOffset = borderWidth - generalTokens.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: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackWrap, {
+            space: 1,
+            tokens: {
+              justifyContent: 'space-between',
+              alignItems: 'baseline'
+            },
+            children: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'eyebrow',
+                colour: 'secondary'
+              },
+              children: tag
+            }), Boolean(date) &&
+            /*#__PURE__*/
+            // TODO: get user locale and apply date formatting: "MMM DD, YYYY" for `en` and "YYYY-MM-DD" for `fr`
+            // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
+            (0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'small',
+                colour: 'secondary'
+              },
+              children: date
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+            variant: {
+              decorative: true
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 3
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              size: 'h3',
+              colour: 'secondary'
+            },
+            children: title
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            space: 2
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            children: description
+          })]
+        }), 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
+            })
+          })
+        })]
+      });
+    }
+  });
+});
+StoryCard.displayName = 'StoryCard';
+StoryCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
+   * a `StoryCard` 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,
+
+  /**
+   * Text stating the date a story was published.
+   */
+  date: _propTypes.default.string.isRequired,
+
+  /**
+   * Text stating the title or headline of the story.
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * Text giving a short description of the story. One paragraph of plain text.
+   */
+  description: _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 image to be placed on the card.
+   */
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(StoryCard);
+
+exports.default = _default;

package/lib/StoryCard/index.js

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

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 }; }
+
+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; }
+
+const ExpandCollapseControl = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseControl",
+  componentId: "components-web__sc-1l2mmq7-0"
+})({
+  alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start'
+});
+
+const ExpandCollapseIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseIconContainer",
+  componentId: "components-web__sc-1l2mmq7-1"
+})(_ref => {
+  let {
+    tokens
+  } = _ref;
+  return {
+    alignItems: tokens.expandIconContainerAlignItems,
+    border: `${tokens.expandIconContainerBorder}px solid ${tokens.expandIconContainerBorderColor}`,
+    borderRadius: '50%',
+    display: 'flex',
+    height: tokens.expandIconContainerHeight,
+    justifyContent: tokens.expandIconContainerJustifyContent,
+    margin: `${tokens.expandIconContainerMarginX}px ${tokens.expandIconContainerMarginY}px`,
+    width: tokens.expandIconContainerWidth
+  };
+});
+
+const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.h4.withConfig({
+  displayName: "ExpandCollapse__ExpandCollapseTitle",
+  componentId: "components-web__sc-1l2mmq7-2"
+})(_ref2 => {
+  let {
+    tokens
+  } = _ref2;
+  return {
+    color: tokens.expandTitleColor,
+    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+    fontSize: tokens.expandTitleFontSize,
+    lineHeight: tokens.expandTitleLineHeight,
+    margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
+  };
+});
+
+const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    collapseTitle,
+    expandTitle = collapseTitle
+  } = _ref3;
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('TermsAndConditions', {}, {});
+  const {
+    expandBaseBorderWidth,
+    expandContentPaddingBottom,
+    expandContentPaddingLeft,
+    expandContentPaddingRight,
+    expandContentPaddingTop
+  } = getTokens();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
+    tokens: {
+      borderWidth: expandBaseBorderWidth
+    },
+    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, { ...expandProps,
+      panelId: "ExpandCollapsePanel",
+      controlTokens: {
+        icon: null
+      } // TODO refactor
+      // eslint-disable-next-line react/no-unstable-nested-components
+      ,
+      control: pressableState => {
+        const {
+          expanded
+        } = pressableState || {};
+        const {
+          icon
+        } = getTokens({
+          expanded
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
+          onClick: event => expandProps.onToggle('ExpandCollapsePanel', event),
+          ref: ref,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
+            tokens: getTokens(),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+              icon: icon,
+              variant: {
+                size: 'small'
+              }
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
+            tokens: getTokens(),
+            children: expanded ? expandTitle : collapseTitle
+          })]
+        });
+      },
+      tokens: {
+        contentPaddingBottom: expandContentPaddingBottom,
+        contentPaddingLeft: expandContentPaddingLeft,
+        contentPaddingRight: expandContentPaddingRight,
+        contentPaddingTop: expandContentPaddingTop
+      },
+      children: children
+    })
+  });
+});
+ExpandCollapse.displayName = 'ExpandCollapse';
+ExpandCollapse.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  collapseTitle: _propTypes.default.string.isRequired,
+  expandTitle: _propTypes.default.string
+};
+ExpandCollapse.defaultProps = {
+  expandTitle: undefined
+};
+var _default = ExpandCollapse;
+exports.default = _default;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+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(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; }
+
+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: 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__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    copy = 'en',
+    indexedContent,
+    nonIndexedContent,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const hasIndexedContent = indexedContent.length > 0;
+  const hasNonIndexedContent = nonIndexedContent.length > 0;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('TermsAndConditions', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+      collapseTitle: getCopy('headingView'),
+      expandTitle: getCopy('headingHide'),
+      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: themeTokens,
+            children: (0, _utils.renderStructuredContent)(contentItem)
+          }, idx))
+        }), hasNonIndexedContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Box, {
+          between: 3,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NonIndexedContentTitle, {
+            tokens: themeTokens,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              block: true,
+              heading: true,
+              variant: {
+                size: 'h4'
+              },
+              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: themeTokens,
+              children: (0, _utils.renderStructuredContent)(contentItem)
+            }, idx))
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {})]
+  });
+});
+TermsAndConditions.displayName = 'TermsAndConditions';
+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
+  })]),
+
+  /**
+   * 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]))
+};
+TermsAndConditions.defaultProps = {
+  copy: 'en',
+  indexedContent: [],
+  nonIndexedContent: []
+};
+var _default = TermsAndConditions;
+exports.default = _default;

package/lib/TermsAndConditions/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    headingHide: 'Hide terms and conditions',
+    headingView: 'View terms and conditions',
+    nonIndexedTitle: 'The following applies to all terms and conditions above'
+  },
+  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'
+  }
+};
+exports.default = _default;

package/lib/TermsAndConditions/index.js

@@ -0,0 +1,15 @@
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }