@telus-uds/components-web 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 04 Apr 2023 14:45:59 GMT and should not be manually modified.
+This log was last generated on Tue, 04 Apr 2023 19:53:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.3.0
+
+Tue, 04 Apr 2023 19:53:51 GMT
+
+### Minor changes
+
+- feat: move 'OrderedList' into components-web & pass variants to children(list items) (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.33.0
+- Bump @telus-uds/system-theme-tokens to v2.17.0
+- Bump @telus-uds/palette-allium to v2.12.3
+
 ## 1.2.0
 
-Tue, 04 Apr 2023 14:45:59 GMT
+Tue, 04 Apr 2023 14:52:45 GMT
 
 ### Minor changes
 

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/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Badge: true,
+  OrderedList: true,
   Ribbon: true,
   transformGradient: true
 };
@@ -14,6 +15,12 @@ Object.defineProperty(exports, "Badge", {
     return _Badge.default;
   }
 });
+Object.defineProperty(exports, "OrderedList", {
+  enumerable: true,
+  get: function () {
+    return _OrderedList.default;
+  }
+});
 Object.defineProperty(exports, "Ribbon", {
   enumerable: true,
   get: function () {
@@ -29,6 +36,8 @@ Object.defineProperty(exports, "transformGradient", {
 
 var _Badge = _interopRequireDefault(require("./Badge"));
 
+var _OrderedList = _interopRequireDefault(require("./OrderedList"));
+
 var _Ribbon = _interopRequireDefault(require("./Ribbon"));
 
 var _utils = require("./utils");

package/lib-module/OrderedList/Item.js

@@ -0,0 +1,139 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
+import ItemBase from './ItemBase';
+import { htmlAttrs } from '../utils';
+import { OL_COUNTER_NAME } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName,
+    itemColor
+  } = _ref;
+  return applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  });
+};
+
+const StyledItemBase = /*#__PURE__*/styled(ItemBase).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: OL_COUNTER_NAME,
+    '::before': {
+      content: `counter(${OL_COUNTER_NAME})'.'`,
+      display: 'inline-flex',
+      color: itemColor,
+      width: itemBulletContainerWidth,
+      paddingRight: listGutter,
+      textAlign: itemBulletContainerAlign,
+      ...applyTextStyles({
+        fontWeight: itemFontWeight,
+        fontSize: itemFontSize,
+        fontName: itemFontName,
+        themeOptions
+      }),
+      lineHeight: `${itemLineHeight * itemFontSize}px`
+    },
+    ':not(:last-child)': {
+      marginBottom: interItemMargin
+    }
+  };
+});
+const ItemContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Item__ItemContent",
+  componentId: "components-web__sc-7jzwcq-1"
+})({
+  flex: 1
+});
+const Item = /*#__PURE__*/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 = useThemeTokens('OrderedList', tokens, variant);
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  };
+  const {
+    themeOptions
+  } = useTheme();
+  const itemContent = wrapStringsInText(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  });
+  return /*#__PURE__*/_jsx(StyledItemBase, {
+    ref: ref,
+    themeOptions: themeOptions,
+    ...themeTokens,
+    ...selectProps(rest),
+    children: title ? /*#__PURE__*/_jsxs(StackView, {
+      tokens: {
+        flexShrink: 1
+      },
+      space: 0,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: {
+          size: 'h4'
+        },
+        tokens: headingTokens,
+        children: title
+      }), /*#__PURE__*/_jsx(ItemContent, { ...themeTokens,
+        children: itemContent
+      })]
+    }) : itemContent
+  });
+});
+Item.displayName = 'OrderedListItem';
+Item.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('List')
+};
+Item.defaultProps = {
+  title: undefined,
+  tokens: {}
+};
+export default Item;

package/lib-module/OrderedList/ItemBase.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ItemBase__StyledItem",
+  componentId: "components-web__sc-o0oiv5-0"
+})({
+  display: 'flex'
+});
+
+const Item = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledItem, { ...rest,
+    children: children
+  });
+};
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired
+};
+export default Item;

package/lib-module/OrderedList/OrderedList.js

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import OrderedListBase from './OrderedListBase';
+import Item from './Item';
+import { OL_COUNTER_NAME } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).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: `${OL_COUNTER_NAME} ${start - 1}`
+  };
+});
+/**
+ * Themed semantic ordered list.
+ */
+
+const OrderedList = /*#__PURE__*/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__*/_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.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+OrderedList.defaultProps = {
+  start: 1
+};
+OrderedList.Item = Item;
+export default OrderedList;

package/lib-module/OrderedList/OrderedListBase.js

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ItemBase from './ItemBase';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledList = /*#__PURE__*/styled.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__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    start,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_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.node.isRequired,
+
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
+OrderedListBase.defaultProps = {
+  start: 1
+};
+OrderedListBase.Item = ItemBase;
+export default OrderedListBase;

package/lib-module/OrderedList/constants.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const OL_COUNTER_NAME = 'allium-ordered-list-counter';

package/lib-module/OrderedList/index.js

@@ -0,0 +1,4 @@
+import OrderedList from './OrderedList';
+import Item from './Item';
+OrderedList.Item = Item;
+export default OrderedList;

package/lib-module/index.js

@@ -1,4 +1,5 @@
 export { default as Badge } from './Badge';
+export { default as OrderedList } from './OrderedList';
 export { default as Ribbon } from './Ribbon';
 export { transformGradient } from './utils';
 export * from './baseExports';

package/package.json

@@ -4,13 +4,14 @@
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "1.32.0",
+    "@telus-uds/components-base": "1.33.0",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.16.0",
+    "@telus-uds/system-theme-tokens": "^2.17.0",
     "prop-types": "^15.7.2"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
+    "@telus-uds/palette-allium": "^2.12.3",
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.3.0",
@@ -53,5 +54,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.2.0"
+  "version": "1.3.0"
 }

package/src/OrderedList/Item.jsx

@@ -0,0 +1,121 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {
+  applyTextStyles,
+  getTokensPropType,
+  selectSystemProps,
+  StackView,
+  Typography,
+  useTheme,
+  useThemeTokens,
+  wrapStringsInText
+} from '@telus-uds/components-base'
+import ItemBase from './ItemBase'
+import { htmlAttrs } from '../utils'
+import { OL_COUNTER_NAME } from './constants'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const selectItemTextStyles = (
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  themeOptions
+) =>
+  applyTextStyles({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    fontName: itemFontName,
+    color: itemColor,
+    themeOptions,
+    lineHeight: itemLineHeight
+  })
+
+const StyledItemBase = styled(ItemBase)(
+  ({
+    interItemMargin,
+    itemBulletContainerWidth,
+    itemBulletContainerAlign,
+    itemFontWeight,
+    itemFontSize,
+    itemFontName,
+    itemLineHeight,
+    themeOptions,
+    listGutter,
+    itemColor
+  }) => ({
+    counterIncrement: OL_COUNTER_NAME,
+    '::before': {
+      content: `counter(${OL_COUNTER_NAME})'.'`,
+      display: 'inline-flex',
+      color: itemColor,
+      width: itemBulletContainerWidth,
+      paddingRight: listGutter,
+      textAlign: itemBulletContainerAlign,
+      ...applyTextStyles({
+        fontWeight: itemFontWeight,
+        fontSize: itemFontSize,
+        fontName: itemFontName,
+        themeOptions
+      }),
+      lineHeight: `${itemLineHeight * itemFontSize}px`
+    },
+    ':not(:last-child)': { marginBottom: interItemMargin }
+  })
+)
+
+const ItemContent = styled.div({
+  flex: 1
+})
+
+const Item = forwardRef(({ children, counterName, title, tokens, variant, ...rest }, ref) => {
+  // We are reusing some tokens from the list component here in order to provide a unified
+  // experience
+  const themeTokens = useThemeTokens('OrderedList', tokens, variant)
+  const headingTokens = title && {
+    lineHeight: themeTokens.itemLineHeight,
+    fontSize: themeTokens.itemFontSize,
+    color: themeTokens.itemColor,
+    fontName: themeTokens.headerFontName,
+    fontWeight: themeTokens.headerFontWeight
+  }
+
+  const { themeOptions } = useTheme()
+  const itemContent = wrapStringsInText(children, {
+    style: selectItemTextStyles(themeTokens, themeOptions)
+  })
+
+  return (
+    <StyledItemBase ref={ref} themeOptions={themeOptions} {...themeTokens} {...selectProps(rest)}>
+      {title ? (
+        <StackView tokens={{ flexShrink: 1 }} space={0}>
+          <Typography variant={{ size: 'h4' }} tokens={headingTokens}>
+            {title}
+          </Typography>
+          <ItemContent {...themeTokens}>{itemContent}</ItemContent>
+        </StackView>
+      ) : (
+        itemContent
+      )}
+    </StyledItemBase>
+  )
+})
+Item.displayName = 'OrderedListItem'
+
+Item.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string,
+  /**
+   * Item tokens
+   */
+  tokens: getTokensPropType('List')
+}
+Item.defaultProps = {
+  title: undefined,
+  tokens: {}
+}
+
+export default Item

package/src/OrderedList/ItemBase.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+const StyledItem = styled.li({
+  display: 'flex'
+})
+
+const Item = ({ children, ...rest }) => <StyledItem {...rest}>{children}</StyledItem>
+
+Item.propTypes = {
+  /**
+   * Item content
+   */
+  children: PropTypes.node.isRequired
+}
+
+export default Item

package/src/OrderedList/OrderedList.jsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { selectSystemProps } from '@telus-uds/components-base'
+import { htmlAttrs } from '../utils'
+import OrderedListBase from './OrderedListBase'
+import Item from './Item'
+import { OL_COUNTER_NAME } from './constants'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
+  // Using CSS counters here to have better control over the number styling
+  listStyle: 'none',
+  counterReset: `${OL_COUNTER_NAME} ${start - 1}`
+}))
+
+/**
+ * Themed semantic ordered list.
+ */
+const OrderedList = forwardRef(({ children, start, variant, ...rest }, ref) => {
+  // Pass any variants "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariants = variant
+    ? children.map((child) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        return {
+          ...child,
+          props: {
+            ...child.props,
+            variant: {
+              ...existingChildVariants,
+              ...variant
+            }
+          }
+        }
+      })
+    : children
+  return (
+    <StyledOrderedListBase {...selectProps(rest)} ref={ref} start={start}>
+      {childrenWithParentVariants}
+    </StyledOrderedListBase>
+  )
+})
+OrderedList.displayName = 'OrderedList'
+
+OrderedList.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * A list of ordered items wrapped in `OrderedList.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+OrderedList.defaultProps = { start: 1 }
+
+OrderedList.Item = Item
+
+export default OrderedList

package/src/OrderedList/OrderedListBase.jsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import ItemBase from './ItemBase'
+
+const StyledList = styled.ol({
+  display: 'flex',
+  flexDirection: 'column',
+  listStylePosition: 'inside',
+  margin: 0,
+  padding: 0
+})
+
+/**
+ * Semantic ordered list.
+ */
+const OrderedListBase = forwardRef(({ children, start, ...rest }, ref) => (
+  <StyledList {...rest} ref={ref} start={start}>
+    {children}
+  </StyledList>
+))
+OrderedListBase.displayName = 'OrderedList'
+
+OrderedListBase.propTypes = {
+  /**
+   * A list of ordered items wrapped in `OrderedListBase.Item`.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The position to start the list with.
+   */
+  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+OrderedListBase.defaultProps = { start: 1 }
+
+OrderedListBase.Item = ItemBase
+
+export default OrderedListBase

package/src/OrderedList/constants.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const OL_COUNTER_NAME = 'allium-ordered-list-counter'

package/src/OrderedList/index.js

@@ -0,0 +1,6 @@
+import OrderedList from './OrderedList'
+import Item from './Item'
+
+OrderedList.Item = Item
+
+export default OrderedList

package/src/index.js

@@ -1,4 +1,5 @@
 export { default as Badge } from './Badge'
+export { default as OrderedList } from './OrderedList'
 export { default as Ribbon } from './Ribbon'
 export { transformGradient } from './utils'