@telus-uds/components-web 2.37.0 → 2.38.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 26 Jul 2024 21:17:56 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Aug 2024 06:26:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.38.0
+
+Mon, 12 Aug 2024 06:26:58 GMT
+
+### Minor changes
+
+- `ExpandCollapseMini`: Add `initialOpen` prop to control the expand behavior on first render (jaime.tuyuc@telus.com)
+- OrderedList: add itemTextColor token and pass tokens down to children (jacqui.koroll@telus.com)
+- Bump @telus-uds/components-base to v1.91.0
+- Bump @telus-uds/system-theme-tokens to v2.61.0
+
+### Patches
+
+- Ribbon: add overflow hidden to fix sharp ribbon curve (jacqui.koroll@telus.com)
+- QuantitySelector: update default dictionary values (jacqui.koroll@telus.com)
+
 ## 2.37.0
 
-Fri, 26 Jul 2024 21:17:56 GMT
+Fri, 26 Jul 2024 21:24:32 GMT
 
 ### Minor changes
 

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -16,8 +16,10 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     onToggle = () => {},
     tokens = {},
     nativeID,
+    initialOpen = false,
     ...rest
   } = _ref;
+  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;
@@ -27,9 +29,10 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
     onChange: handleChange,
     tokens: tokens,
+    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
       ...expandProps,
-      panelId: "ExpandCollapseMiniPanel",
+      panelId: expandCollapeMiniPanelId,
       variant: {
         mini: true
       },
@@ -68,6 +71,10 @@ ExpandCollapseMini.propTypes = {
    * Children nodes that can be added
    */
   children: _propTypes.default.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: _propTypes.default.bool,
   tokens: (0, _componentsBase.getTokensPropType)('ExpandCollapseMini')
 };
 var _default = ExpandCollapseMini;

package/lib/OrderedList/Item.js

@@ -20,13 +20,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return (0, _componentsBase.applyTextStyles)({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -45,14 +46,15 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
     itemLineHeight,
     themeOptions,
     listGutter,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
     counterIncrement: _constants.OL_COUNTER_NAME,
     '::before': {
       content: `counter(${_constants.OL_COUNTER_NAME})'.'`,
       display: 'inline-flex',
-      color: itemColor,
+      color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
       justifyContent: itemBulletTextAlign,
@@ -90,7 +92,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };
@@ -137,7 +139,7 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: (0, _componentsBase.getTokensPropType)('List')
+  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
 };
 var _default = Item;
 exports.default = _default;

package/lib/OrderedList/OrderedList.js

@@ -37,36 +37,42 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref2;
   // Check if children is an array
   const isChildrenArray = Array.isArray(children);
 
-  // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = _react.default.useMemo(() => {
-    const addVariantToProps = child => {
-      var _child$props;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariantsAndTokens = _react.default.useMemo(() => {
+    const addVariantAndTokensToProps = child => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/_react.default.cloneElement(child, {
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (isChildrenArray) {
-        return children.map(addVariantToProps);
+        return children.map(addVariantAndTokensToProps);
       }
-      return [addVariantToProps(children)];
+      return [addVariantAndTokensToProps(children)];
     }
     return children;
-  }, [children, variant, isChildrenArray]);
+  }, [children, variant, isChildrenArray, tokens]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedListBase, {
     ...selectProps(rest),
     ref: ref,
     start: start,
-    children: childrenWithParentVariants
+    children: childrenWithParentVariantsAndTokens
   });
 });
 OrderedList.displayName = 'OrderedList';
@@ -80,7 +86,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  variant: _componentsBase.variantProp.propType
+  variant: _componentsBase.variantProp.propType,
+  tokens: (0, _componentsBase.getTokensPropType)('OrderedList')
 };
 OrderedList.Item = _Item.default;
 var _default = OrderedList;

package/lib/QuantitySelector/dictionary.js

@@ -7,26 +7,26 @@ exports.default = void 0;
 var _default = {
   en: {
     accessibility: {
-      a11yLabel: 'Quantity Selector control',
-      increaseButton: 'Increase quantity button',
-      decreaseButton: 'Decrease quantity button'
+      a11yLabel: 'Quantity selector',
+      increaseButton: 'Increase quantity',
+      decreaseButton: 'Decrease quantity'
     },
     errors: {
-      numberIsTooSmall: minNumber => `Number must be equal or greater than ${minNumber}`,
-      numberIsTooBig: maxNumber => `Number must be equal or less than ${maxNumber}`,
-      invalidCharacters: 'This control does not allow alphabetical or symbol characters. Try using numbers only'
+      numberIsTooSmall: minNumber => `You can enter a number equal or greater than ${minNumber}.`,
+      numberIsTooBig: maxNumber => `You can enter a number equal or less than ${maxNumber}.`,
+      invalidCharacters: 'Try using numbers only. Alphabetical or symbols characters are not allowed.'
     }
   },
   fr: {
     accessibility: {
-      a11yLabel: 'Contrôleur de sélection de nombre',
-      increaseButton: `Bouton d'augmentation de quantité`,
-      decreaseButton: `Bouton de diminution de quantité`
+      a11yLabel: 'Sélecteur de quantité',
+      increaseButton: `Augmenter la quantité`,
+      decreaseButton: `Réduire la quantité`
     },
     errors: {
-      numberIsTooSmall: minNumber => `Le nombre doit être plus grand ou égal que ${minNumber}`,
-      numberIsTooBig: maxNumber => `Le nombre doit être plus petit ou égal que ${maxNumber}`,
-      invalidCharacters: `Ce champ ne supporte pas les caractères alphabétiques ni les symboles. Essayez d'utiliser des chiffres uniquement`
+      numberIsTooSmall: minNumber => `Vous pouvez saisir un nombre égal ou supérieur à ${minNumber}.`,
+      numberIsTooBig: maxNumber => `Vous pouvez saisir un nombre égal ou inférieur à ${maxNumber}.`,
+      invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
     }
   }
 };

package/lib/Ribbon/Ribbon.js

@@ -70,7 +70,7 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
   let {
     curveBackgroundColor
   } = _ref10;

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -9,8 +9,10 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onToggle = () => {},
     tokens = {},
     nativeID,
+    initialOpen = false,
     ...rest
   } = _ref;
+  const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;
@@ -20,9 +22,10 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(ExpandCollapse, {
     onChange: handleChange,
     tokens: tokens,
+    initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       ...expandProps,
-      panelId: "ExpandCollapseMiniPanel",
+      panelId: expandCollapeMiniPanelId,
       variant: {
         mini: true
       },
@@ -61,6 +64,10 @@ ExpandCollapseMini.propTypes = {
    * Children nodes that can be added
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
   tokens: getTokensPropType('ExpandCollapseMini')
 };
 export default ExpandCollapseMini;

package/lib-module/OrderedList/Item.js

@@ -14,13 +14,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -39,14 +40,15 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
     itemLineHeight,
     themeOptions,
     listGutter,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
     counterIncrement: OL_COUNTER_NAME,
     '::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
       display: 'inline-flex',
-      color: itemColor,
+      color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
       justifyContent: itemBulletTextAlign,
@@ -84,7 +86,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };
@@ -131,6 +133,6 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: getTokensPropType('List')
+  tokens: getTokensPropType('OrderedList')
 };
 export default Item;

package/lib-module/OrderedList/OrderedList.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { selectSystemProps, variantProp } from '@telus-uds/components-base';
+import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
@@ -30,36 +30,42 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref2;
   // Check if children is an array
   const isChildrenArray = Array.isArray(children);
 
-  // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = child => {
-      var _child$props;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+  const childrenWithParentVariantsAndTokens = React.useMemo(() => {
+    const addVariantAndTokensToProps = child => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (isChildrenArray) {
-        return children.map(addVariantToProps);
+        return children.map(addVariantAndTokensToProps);
       }
-      return [addVariantToProps(children)];
+      return [addVariantAndTokensToProps(children)];
     }
     return children;
-  }, [children, variant, isChildrenArray]);
+  }, [children, variant, isChildrenArray, tokens]);
   return /*#__PURE__*/_jsx(StyledOrderedListBase, {
     ...selectProps(rest),
     ref: ref,
     start: start,
-    children: childrenWithParentVariants
+    children: childrenWithParentVariantsAndTokens
   });
 });
 OrderedList.displayName = 'OrderedList';
@@ -73,7 +79,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 };
 OrderedList.Item = Item;
 export default OrderedList;

package/lib-module/QuantitySelector/dictionary.js

@@ -1,26 +1,26 @@
 export default {
   en: {
     accessibility: {
-      a11yLabel: 'Quantity Selector control',
-      increaseButton: 'Increase quantity button',
-      decreaseButton: 'Decrease quantity button'
+      a11yLabel: 'Quantity selector',
+      increaseButton: 'Increase quantity',
+      decreaseButton: 'Decrease quantity'
     },
     errors: {
-      numberIsTooSmall: minNumber => `Number must be equal or greater than ${minNumber}`,
-      numberIsTooBig: maxNumber => `Number must be equal or less than ${maxNumber}`,
-      invalidCharacters: 'This control does not allow alphabetical or symbol characters. Try using numbers only'
+      numberIsTooSmall: minNumber => `You can enter a number equal or greater than ${minNumber}.`,
+      numberIsTooBig: maxNumber => `You can enter a number equal or less than ${maxNumber}.`,
+      invalidCharacters: 'Try using numbers only. Alphabetical or symbols characters are not allowed.'
     }
   },
   fr: {
     accessibility: {
-      a11yLabel: 'Contrôleur de sélection de nombre',
-      increaseButton: `Bouton d'augmentation de quantité`,
-      decreaseButton: `Bouton de diminution de quantité`
+      a11yLabel: 'Sélecteur de quantité',
+      increaseButton: `Augmenter la quantité`,
+      decreaseButton: `Réduire la quantité`
     },
     errors: {
-      numberIsTooSmall: minNumber => `Le nombre doit être plus grand ou égal que ${minNumber}`,
-      numberIsTooBig: maxNumber => `Le nombre doit être plus petit ou égal que ${maxNumber}`,
-      invalidCharacters: `Ce champ ne supporte pas les caractères alphabétiques ni les symboles. Essayez d'utiliser des chiffres uniquement`
+      numberIsTooSmall: minNumber => `Vous pouvez saisir un nombre égal ou supérieur à ${minNumber}.`,
+      numberIsTooBig: maxNumber => `Vous pouvez saisir un nombre égal ou inférieur à ${maxNumber}.`,
+      invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
     }
   }
 };

package/lib-module/Ribbon/Ribbon.js

@@ -64,7 +64,7 @@ const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
 const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
   let {
     curveBackgroundColor
   } = _ref10;

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.90.0",
+    "@telus-uds/components-base": "1.91.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.60.0",
+    "@telus-uds/system-theme-tokens": "^2.61.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.37.0"
+  "version": "2.38.0"
 }

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -4,7 +4,8 @@ import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const ExpandCollapseMini = React.forwardRef(
-  ({ children, onToggle = () => {}, tokens = {}, nativeID, ...rest }, ref) => {
+  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
+    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
     const handleChange = (openPanels, event) => {
       if (typeof onToggle === 'function') {
         const isOpen = openPanels.length > 0
@@ -13,11 +14,15 @@ const ExpandCollapseMini = React.forwardRef(
     }
 
     return (
-      <ExpandCollapse onChange={handleChange} tokens={tokens}>
+      <ExpandCollapse
+        onChange={handleChange}
+        tokens={tokens}
+        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
+      >
         {(expandProps) => (
           <ExpandCollapse.Panel
             {...expandProps}
-            panelId="ExpandCollapseMiniPanel"
+            panelId={expandCollapeMiniPanelId}
             variant={{ mini: true }}
             controlTokens={{
               // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
@@ -57,6 +62,10 @@ ExpandCollapseMini.propTypes = {
    * Children nodes that can be added
    */
   children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
   tokens: getTokensPropType('ExpandCollapseMini')
 }
 

package/src/OrderedList/Item.jsx

@@ -18,14 +18,14 @@ import { OL_COUNTER_NAME } from './constants'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const selectItemTextStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   })
@@ -41,13 +41,14 @@ const StyledItemBase = styled(ItemBase)(
     itemLineHeight,
     themeOptions,
     listGutter,
-    itemColor
+    itemColor,
+    itemTextColor
   }) => ({
     counterIncrement: OL_COUNTER_NAME,
     '::before': {
       content: `counter(${OL_COUNTER_NAME})'.'`,
       display: 'inline-flex',
-      color: itemColor,
+      color: itemColor || itemTextColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
       justifyContent: itemBulletTextAlign,
@@ -75,7 +76,7 @@ const Item = React.forwardRef(
     const headingTokens = title && {
       lineHeight: themeTokens.itemLineHeight,
       fontSize: themeTokens.itemFontSize,
-      color: themeTokens.itemColor,
+      color: themeTokens.itemColor || themeTokens.itemTextColor,
       fontName: themeTokens.headerFontName,
       fontWeight: themeTokens.headerFontWeight
     }
@@ -117,7 +118,7 @@ Item.propTypes = {
   /**
    * Item tokens
    */
-  tokens: getTokensPropType('List')
+  tokens: getTokensPropType('OrderedList')
 }
 
 export default Item

package/src/OrderedList/OrderedList.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, variantProp } from '@telus-uds/components-base'
+import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
@@ -18,38 +18,40 @@ const StyledOrderedListBase = styled(OrderedListBase)(({ start }) => ({
 /**
  * Themed semantic ordered list.
  */
-const OrderedList = React.forwardRef(({ children, start = 1, variant = {}, ...rest }, ref) => {
-  // Check if children is an array
-  const isChildrenArray = Array.isArray(children)
+const OrderedList = React.forwardRef(
+  ({ children, start = 1, variant = {}, tokens = {}, ...rest }, ref) => {
+    // Check if children is an array
+    const isChildrenArray = Array.isArray(children)
 
-  // Pass any variants "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child) => {
-      const existingChildVariants = child.props?.variant ?? {}
-      return React.cloneElement(child, {
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        }
-      })
-    }
+    // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+    const childrenWithParentVariantsAndTokens = React.useMemo(() => {
+      const addVariantAndTokensToProps = (child) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        const existingChildTokens = child.props?.tokens ?? {}
+
+        return React.cloneElement(child, {
+          variant: { ...existingChildVariants, ...variant },
+          tokens: { ...existingChildTokens, ...tokens }
+        })
+      }
 
-    if (variant) {
-      if (isChildrenArray) {
-        return children.map(addVariantToProps)
+      if (variant || tokens) {
+        if (isChildrenArray) {
+          return children.map(addVariantAndTokensToProps)
+        }
+        return [addVariantAndTokensToProps(children)]
       }
-      return [addVariantToProps(children)]
-    }
 
-    return children
-  }, [children, variant, isChildrenArray])
+      return children
+    }, [children, variant, isChildrenArray, tokens])
 
-  return (
-    <StyledOrderedListBase {...selectProps(rest)} ref={ref} start={start}>
-      {childrenWithParentVariants}
-    </StyledOrderedListBase>
-  )
-})
+    return (
+      <StyledOrderedListBase {...selectProps(rest)} ref={ref} start={start}>
+        {childrenWithParentVariantsAndTokens}
+      </StyledOrderedListBase>
+    )
+  }
+)
 OrderedList.displayName = 'OrderedList'
 
 OrderedList.propTypes = {
@@ -62,7 +64,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 }
 
 OrderedList.Item = Item

package/src/QuantitySelector/dictionary.js

@@ -1,27 +1,29 @@
 export default {
   en: {
     accessibility: {
-      a11yLabel: 'Quantity Selector control',
-      increaseButton: 'Increase quantity button',
-      decreaseButton: 'Decrease quantity button'
+      a11yLabel: 'Quantity selector',
+      increaseButton: 'Increase quantity',
+      decreaseButton: 'Decrease quantity'
     },
     errors: {
-      numberIsTooSmall: (minNumber) => `Number must be equal or greater than ${minNumber}`,
-      numberIsTooBig: (maxNumber) => `Number must be equal or less than ${maxNumber}`,
+      numberIsTooSmall: (minNumber) => `You can enter a number equal or greater than ${minNumber}.`,
+      numberIsTooBig: (maxNumber) => `You can enter a number equal or less than ${maxNumber}.`,
       invalidCharacters:
-        'This control does not allow alphabetical or symbol characters. Try using numbers only'
+        'Try using numbers only. Alphabetical or symbols characters are not allowed.'
     }
   },
   fr: {
     accessibility: {
-      a11yLabel: 'Contrôleur de sélection de nombre',
-      increaseButton: `Bouton d'augmentation de quantité`,
-      decreaseButton: `Bouton de diminution de quantité`
+      a11yLabel: 'Sélecteur de quantité',
+      increaseButton: `Augmenter la quantité`,
+      decreaseButton: `Réduire la quantité`
     },
     errors: {
-      numberIsTooSmall: (minNumber) => `Le nombre doit être plus grand ou égal que ${minNumber}`,
-      numberIsTooBig: (maxNumber) => `Le nombre doit être plus petit ou égal que ${maxNumber}`,
-      invalidCharacters: `Ce champ ne supporte pas les caractères alphabétiques ni les symboles. Essayez d'utiliser des chiffres uniquement`
+      numberIsTooSmall: (minNumber) =>
+        `Vous pouvez saisir un nombre égal ou supérieur à ${minNumber}.`,
+      numberIsTooBig: (maxNumber) =>
+        `Vous pouvez saisir un nombre égal ou inférieur à ${maxNumber}.`,
+      invalidCharacters: `Essayez d'utiliser seulement des chiffres. Les caractères alphabétiques ou les symboles ne sont pas permis.`
     }
   }
 }

package/src/Ribbon/Ribbon.jsx

@@ -39,6 +39,7 @@ const RibbonCurve = styled.div`
   border-radius: 0 0 0 100%;
   position: relative;
   z-index: -1;
+  overflow: hidden;
   &::after {
     content: '';
     border-bottom-left-radius: ${({ curveAfterRadius }) => curveAfterRadius};