@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/OrderedList/Item.js

@@ -0,0 +1,151 @@
+"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 _ItemBase = _interopRequireDefault(require("./ItemBase"));
+var _utils = require("../utils");
+var _constants = require("./constants");
+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 selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor,
+    itemTextColor
+  } = _ref;
+  return (0, _componentsBase.applyTextStyles)({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor || itemTextColor,
+    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,
+    itemBulletTextAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor,
+    itemTextColor
+  } = _ref2;
+  return {
+    counterIncrement: _constants.OL_COUNTER_NAME,
+    '::before': {
+      content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
+      display: 'inline-block',
+      color: itemColor || itemTextColor,
+      width: itemBulletContainerWidth,
+      paddingRight: listGutter,
+      textAlign: itemBulletTextAlign,
+      flexShrink: 0,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      ...(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"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 0
+});
+const Item = /*#__PURE__*/_react.default.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 || themeTokens.itemTextColor,
+    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
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContent, {
+      children: itemContent
+    })
+  });
+});
+Item.displayName = 'OrderedListItem';
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Defines the title of the `OrderedList.Item`
+   */
+  title: _propTypes.default.string,
+  /**
+   * Item tokens
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
+};
+var _default = exports.default = Item;

package/lib/cjs/OrderedList/ItemBase.js

@@ -0,0 +1,34 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+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 = exports.default = Item;

package/lib/cjs/OrderedList/OrderedList.js

@@ -0,0 +1,92 @@
+"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 _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(e) { return e && e.__esModule ? e : { default: e }; }
+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__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    start = 1,
+    variant = {},
+    tokens = {},
+    ...rest
+  } = _ref2;
+  // Check if children is an array
+  const isChildrenArray = Array.isArray(children);
+
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariantsAndTokens = _react.default.useMemo(() => {
+    const addVariantAndTokensToProps = child => {
+      const existingChildVariants = child.props?.variant ?? {};
+      const existingChildTokens = child.props?.tokens ?? {};
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        variant: {
+          ...existingChildVariants,
+          ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
+        }
+      });
+    };
+    if (variant || tokens) {
+      if (isChildrenArray) {
+        return children.map(addVariantAndTokensToProps);
+      }
+      return [addVariantAndTokensToProps(children)];
+    }
+    return children;
+  }, [children, variant, isChildrenArray, tokens]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedListBase, {
+    ...selectProps(rest),
+    ref: ref,
+    start: start,
+    children: childrenWithParentVariantsAndTokens
+  });
+});
+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]),
+  variant: _componentsBase.variantProp.propType,
+  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
+};
+OrderedList.Item = _Item.default;
+var _default = exports.default = OrderedList;

package/lib/cjs/OrderedList/OrderedListBase.js

@@ -0,0 +1,52 @@
+"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 _ItemBase = _interopRequireDefault(require("./ItemBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    start = 1,
+    ...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.Item = _ItemBase.default;
+var _default = exports.default = OrderedListBase;

package/lib/cjs/OrderedList/constants.js

@@ -0,0 +1,8 @@
+"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 = exports.OL_COUNTER_NAME = 'allium-ordered-list-counter';

package/lib/cjs/OrderedList/index.js

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

package/lib/cjs/Paragraph/Paragraph.js

@@ -0,0 +1,97 @@
+"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 _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 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 = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    align,
+    linesBetween = 1,
+    ...rest
+  } = _ref3;
+  const style = (0, _utils.useTypographyTheme)(variant, tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledParagraph, {
+    ref: ref,
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+});
+Paragraph.displayName = 'Paragraph';
+Paragraph.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Adds a `data-testid` attribute to the element for testing purposes
+   */
+  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: (0, _componentsBase.getTokensPropType)('Typography'),
+  /**
+   * 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 = exports.default = Paragraph;

package/lib/cjs/Paragraph/index.js

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

package/lib/cjs/PreviewCard/AuthorDate.js

@@ -0,0 +1,63 @@
+"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(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    author,
+    date
+  } = _ref;
+  const {
+    separatorColor: color
+  } = (0, _componentsBase.useThemeTokens)('PreviewCard', {}, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackWrap, {
+    space: 2,
+    ref: ref,
+    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.displayName = 'AuthorDate';
+AuthorDate.propTypes = {
+  /**
+   * Name of the author
+   */
+  author: _propTypes.default.string.isRequired,
+  /**
+   * Date of the post
+   */
+  date: _propTypes.default.string.isRequired
+};
+var _default = exports.default = AuthorDate;