@telus-uds/components-web 1.2.0 → 1.4.0

package/lib/Footnote/FootnoteLink.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+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 StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
+  displayName: "FootnoteLink__StyledSup",
+  componentId: "components-web__sc-17nd7xo-0"
+})(_ref => {
+  let {
+    fontSize = 'smaller',
+    lineHeight,
+    paddingLeft,
+    paddingRight
+  } = _ref;
+  return {
+    border: 0,
+    color: 'inherit',
+    cursor: 'pointer',
+    fontSize,
+    lineHeight,
+    margin: 0,
+    paddingVertical: 0,
+    paddingLeft,
+    paddingRight,
+    textDecoration: 'underline'
+  };
+});
+/**
+ * Use `FootnoteLink` to open `Footnote` component and display related legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Use FootnoteLink to open a Footnote component and display related legal content.
+ * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
+ *   the annotation as part of the content whenever possible.
+ */
+
+
+const FootnoteLink = _ref2 => {
+  let {
+    copy = 'en',
+    number = [],
+    onClick,
+    fontSize,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref2;
+  const {
+    lineHeight,
+    paddingLeft,
+    paddingRight
+  } = (0, _componentsBase.useThemeTokens)('FootnoteLink', tokens, variant);
+  const numbers = Array.isArray(number) ? number : [number];
+  const refs = numbers.map(() => /*#__PURE__*/_react.default.createRef());
+
+  const handleClick = index => {
+    onClick(numbers[index], refs[index]);
+  };
+
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
+  const handleOnClick = (event, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleClick(index);
+  };
+
+  const handleOnKeyDown = (event, index) => {
+    if (event.key === 'Enter' || event.key === 13) {
+      handleClick(index);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: numbers.map((num, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSup, {
+      onKeyDown: event => handleOnKeyDown(event, index),
+      role: "button",
+      "aria-label": getCopy('a11yLabel'),
+      ref: refs[index],
+      onClick: event => handleOnClick(event, index),
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      paddingLeft: paddingLeft,
+      paddingRight: paddingRight,
+      ...selectProps(rest),
+      children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
+    }, num))
+  });
+};
+
+const copyShape = _propTypes.default.shape({
+  a11yLabel: _propTypes.default.string.isRequired
+});
+
+FootnoteLink.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 key `a11yLabel`.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), copyShape]),
+
+  /**
+   * The footnote number, or multiple numbers if passed as an array.
+   * If using an array, a comma-separated group of numbers will be rendered as superscript.
+   */
+  number: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]).isRequired,
+
+  /**
+   * A callback function to handle the click of a FootnoteLink.
+   */
+  onClick: _propTypes.default.func.isRequired,
+
+  /**
+   * Override default `fontSize` to set specific font size value
+   */
+  fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+FootnoteLink.defaultProps = {
+  copy: 'en',
+  fontSize: 'smaller'
+};
+var _default = FootnoteLink;
+exports.default = _default;

package/lib/Footnote/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    a11yLabel: 'Read legal footnote',
+    close: 'close',
+    heading: 'Terms and conditions'
+  },
+  fr: {
+    a11yLabel: 'Lire la note de bas de page légale',
+    close: 'fermer',
+    heading: 'Modalités et conditions'
+  }
+};
+exports.default = _default;

package/lib/Footnote/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Footnote = _interopRequireDefault(require("./Footnote"));
+
+var _FootnoteLink = _interopRequireDefault(require("./FootnoteLink"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Footnote.default.Link = _FootnoteLink.default;
+var _default = _Footnote.default;
+exports.default = _default;

package/lib/OrderedList/Item.js

@@ -0,0 +1,162 @@
+"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 _ItemBase = _interopRequireDefault(require("./ItemBase"));
+
+var _utils = require("../utils");
+
+var _constants = require("./constants");
+
+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 selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor
+  } = _ref;
+  return (0, _componentsBase.applyTextStyles)({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+
+const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.default).withConfig({
+  displayName: "Item__StyledItemBase",
+  componentId: "components-web__sc-7jzwcq-0"
+})(_ref2 => {
+  let {
+    interItemMargin,
+    itemBulletContainerWidth,
+    itemBulletContainerAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor
+  } = _ref2;
+  return {
+    counterIncrement: _constants.OL_COUNTER_NAME,
+    '::before': {
+      content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
+      display: 'inline-flex',
+      color: itemColor,
+      width: itemBulletContainerWidth,
+      paddingRight: listGutter,
+      textAlign: itemBulletContainerAlign,
+      ...(0, _componentsBase.applyTextStyles)({
+        fontWeight: itemFontWeight,
+        fontSize: itemFontSize,
+        fontName: itemFontName,
+        themeOptions
+      }),
+      lineHeight: `${itemLineHeight * itemFontSize}px`
+    },
+    ':not(:last-child)': {
+      marginBottom: interItemMargin
+    }
+  };
+});
+
+const ItemContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Item__ItemContent",
+  componentId: "components-web__sc-7jzwcq-1"
+})({
+  flex: 1
+});
+
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    counterName,
+    title,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  // We are reusing some tokens from the list component here in order to provide a unified
+  // experience
+  const themeTokens = (0, _componentsBase.useThemeTokens)('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const itemContent = (0, _componentsBase.wrapStringsInText)(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemBase, {
+    ref: ref,
+    themeOptions: themeOptions,
+    ...themeTokens,
+    ...selectProps(rest),
+    children: title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      tokens: {
+        flexShrink: 1
+      },
+      space: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: headingTokens,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, { ...themeTokens,
+        children: itemContent
+      })]
+    }) : itemContent
+  });
+});
+Item.displayName = 'OrderedListItem';
+Item.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired,
+  title: _propTypes.default.string,
+
+  /**
+   * Item tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('List')
+};
+Item.defaultProps = {
+  title: undefined,
+  tokens: {}
+};
+var _default = Item;
+exports.default = _default;

package/lib/OrderedList/ItemBase.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledItem = /*#__PURE__*/_styledComponents.default.li.withConfig({
+  displayName: "ItemBase__StyledItem",
+  componentId: "components-web__sc-o0oiv5-0"
+})({
+  display: 'flex'
+});
+
+const Item = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItem, { ...rest,
+    children: children
+  });
+};
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired
+};
+var _default = Item;
+exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -0,0 +1,94 @@
+"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 _utils = require("../utils");
+
+var _OrderedListBase = _interopRequireDefault(require("./OrderedListBase"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _constants = require("./constants");
+
+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 StyledOrderedListBase = /*#__PURE__*/(0, _styledComponents.default)(_OrderedListBase.default).withConfig({
+  displayName: "OrderedList__StyledOrderedListBase",
+  componentId: "components-web__sc-t5az8z-0"
+})(_ref => {
+  let {
+    start
+  } = _ref;
+  return {
+    // Using CSS counters here to have better control over the number styling
+    listStyle: 'none',
+    counterReset: `${_constants.OL_COUNTER_NAME} ${start - 1}`
+  };
+});
+/**
+ * Themed semantic ordered list.
+ */
+
+const OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    start,
+    variant,
+    ...rest
+  } = _ref2;
+  // Pass any variants "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = variant ? children.map(child => {
+    var _child$props;
+
+    const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+    return { ...child,
+      props: { ...child.props,
+        variant: { ...existingChildVariants,
+          ...variant
+        }
+      }
+    };
+  }) : children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedListBase, { ...selectProps(rest),
+    ref: ref,
+    start: start,
+    children: childrenWithParentVariants
+  });
+});
+OrderedList.displayName = 'OrderedList';
+OrderedList.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+OrderedList.defaultProps = {
+  start: 1
+};
+OrderedList.Item = _Item.default;
+var _default = OrderedList;
+exports.default = _default;

package/lib/OrderedList/OrderedListBase.js

@@ -0,0 +1,68 @@
+"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 _ItemBase = _interopRequireDefault(require("./ItemBase"));
+
+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 StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
+  displayName: "OrderedListBase__StyledList",
+  componentId: "components-web__sc-4m9lgj-0"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  listStylePosition: 'inside',
+  margin: 0,
+  padding: 0
+});
+/**
+ * Semantic ordered list.
+ */
+
+
+const OrderedListBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, { ...rest,
+    ref: ref,
+    start: start,
+    children: children
+  });
+});
+OrderedListBase.displayName = 'OrderedList';
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+};
+OrderedListBase.defaultProps = {
+  start: 1
+};
+OrderedListBase.Item = _ItemBase.default;
+var _default = OrderedListBase;
+exports.default = _default;

package/lib/OrderedList/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OL_COUNTER_NAME = void 0;
+// eslint-disable-next-line import/prefer-default-export
+const OL_COUNTER_NAME = 'allium-ordered-list-counter';
+exports.OL_COUNTER_NAME = OL_COUNTER_NAME;

package/lib/OrderedList/index.js

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

package/lib/PreviewCard/AuthorDate.js

@@ -0,0 +1,64 @@
+"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 _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * A footer for PreviewCard that composes author and date in a standard way
+ *
+ * @TODO
+ * Add same locale-based date formatting as StoryCard when ready.
+ * Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
+ */
+const AuthorDate = _ref => {
+  let {
+    author,
+    date
+  } = _ref;
+  const {
+    separatorColor: color
+  } = (0, _componentsBase.useThemeTokens)('PreviewCard', {}, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackWrap, {
+    space: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size: 'small',
+        colour: 'secondary'
+      },
+      children: author
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size: 'small'
+      },
+      tokens: {
+        color
+      },
+      children: "\xB7"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      variant: {
+        size: 'small',
+        colour: 'secondary'
+      },
+      children: date
+    })]
+  });
+};
+
+AuthorDate.propTypes = {
+  author: _propTypes.default.string.isRequired,
+  date: _propTypes.default.string.isRequired
+};
+var _default = AuthorDate;
+exports.default = _default;