@telus-uds/components-web 1.3.0 → 1.5.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/Paragraph/Paragraph.js

@@ -0,0 +1,107 @@
+"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 _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 StyledParagraph = /*#__PURE__*/_styledComponents.default.p.withConfig({
+  displayName: "Paragraph__StyledParagraph",
+  componentId: "components-web__sc-1bg9r8p-0"
+})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
+  let {
+    align
+  } = _ref;
+  return align ? `text-align: ${align};` : '';
+}, _ref2 => {
+  let {
+    linesBetween
+  } = _ref2;
+  return `
+    margin-block-start: ${linesBetween}em;
+    margin-block-end: ${linesBetween}em;
+  `;
+});
+/**
+* Block text as an HTML ```<p>``` element.
+	*
+	* ##Usage criteria
+	*
+	* - All body text should be contained in a **Paragraph**, regardless of length.
+	* - If the Paragraph is on a dark background, variant **{ invert: true }** must be used to maintain sufficient colour
+	contrast.
+	* - All Allium Typography variants other than header size variants are supported.
+	*/
+
+
+const Paragraph = _ref3 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    align,
+    linesBetween = 1,
+    ...rest
+  } = _ref3;
+  const style = (0, _utils.useTypographyTheme)(variant, tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledParagraph, {
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Paragraph.propTypes = { ...selectedSystemPropTypes,
+  children: _propTypes.default.node.isRequired,
+  testID: _propTypes.default.string,
+
+  /**
+   * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
+   * 'justify' should be avoided as it usually reduces ease of reading.
+   */
+  align: _propTypes.default.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+
+  /**
+   * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
+   * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
+   * @default 1
+   */
+  linesBetween: _propTypes.default.number,
+
+  /**
+   * Paragraph takes the same tokens overrides as Typography
+   */
+  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+
+  /**
+   * Paragraph takes any of Typography's theme variants except for header sizes
+   */
+  variant: _propTypes.default.exact({
+    bold: _propTypes.default.bool,
+    colour: _propTypes.default.oneOf(['secondary', 'tertiary']),
+    inverse: _propTypes.default.bool,
+    size: _propTypes.default.oneOf(['micro', 'small', 'large'])
+  })
+};
+var _default = Paragraph;
+exports.default = _default;

package/lib/Paragraph/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Paragraph = _interopRequireDefault(require("./Paragraph"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Paragraph.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;

package/lib/PreviewCard/PreviewCard.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = _interopRequireDefault(require("lodash.omit"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+
+var _AuthorDate = _interopRequireDefault(require("./AuthorDate"));
+
+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: "PreviewCard__FullBleedOffsetOuter",
+  componentId: "components-web__sc-1yfz4de-0"
+})(_ref => {
+  let {
+    borderOffset
+  } = _ref;
+  return {
+    overflow: 'hidden',
+    marginTop: borderOffset * 2
+  };
+});
+
+const FullBleedOffsetInner = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "PreviewCard__FullBleedOffsetInner",
+  componentId: "components-web__sc-1yfz4de-1"
+})(_ref2 => {
+  let {
+    borderOffset
+  } = _ref2;
+  return {
+    position: 'relative',
+    margin: 0 - borderOffset
+  };
+});
+
+const defaultTokens = {
+  minWidth: 0,
+  shadow: null
+};
+/**
+ * Showcase and guide users to another page, with a preview containing title and a footer.
+ * Whole card is interactive, width expands based on column or container.
+ *
+ * - Use `tag` to show category of content
+ * - Use `title` to show title of the story
+ * - Use `footer` to show text such as the author / date
+ * - Use `href` to set the target URL
+ * - Use `fullBleedContent` to set the thumbnail image
+ */
+
+const PreviewCard = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    tag,
+    title,
+    footer,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    onPress,
+    href,
+    ...rest
+  } = _ref3;
+  const {
+    fullBleedContentPosition,
+    contentStackDirection,
+    fullBleedContentProps
+  } = (0, _FullBleedContent.useFullBleedContentProps)({ ...fullBleedContent,
+    position: 'bottom'
+  });
+  const {
+    components: {
+      PreviewCard: theme
+    }
+  } = (0, _componentsBase.useTheme)();
+
+  const getPressableCardTokens = cardState => ({ ...(0, _lodash.default)((0, _componentsBase.getThemeTokens)(theme, {}, {}, cardState), 'separatorColor'),
+    ...defaultTokens
+  });
+
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ref: ref,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderRadius,
+        borderWidth
+      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
+
+      const borderOffset = borderWidth - theme.tokens.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: [Boolean(tag) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'eyebrow',
+                colour: 'secondary'
+              },
+              children: tag
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 2
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              size: 'h4',
+              colour: 'secondary'
+            },
+            children: title
+          }), Boolean(footer) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 2
+            }), typeof footer === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'small',
+                colour: 'secondary'
+              },
+              children: footer
+            }) : footer]
+          })]
+        }), 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
+            })
+          })
+        })]
+      });
+    }
+  });
+});
+PreviewCard.displayName = 'PreviewCard'; // Provide standard author/date footer as a preset with the export
+
+PreviewCard.AuthorDate = _AuthorDate.default;
+PreviewCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The URL of the story to be navigated to. Note that `Video` component does not play well when used within
+   * a `PreviewCard` 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,
+
+  /**
+   * Section containing additional information, such as author and date.
+   * Use `<PreviewCard.AuthorDate author={...} date={...} />` here for author and date.
+   */
+  footer: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
+
+  /**
+   * Text stating the title or headline of the story.
+   */
+  title: _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 content to be placed on the card.
+   */
+  fullBleedContent: _propTypes.default.exact(_FullBleedContent.default.propTypes || {})
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(PreviewCard);
+
+exports.default = _default;

package/lib/PreviewCard/index.js

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