@telus-uds/components-web 2.35.0 → 2.36.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 24 Jun 2024 16:19:29 GMT and should not be manually modified.
+This log was last generated on Fri, 19 Jul 2024 18:14:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.36.0
+
+Fri, 19 Jul 2024 18:14:09 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add `micro` option to `size` variant (tim.hysniu@telus.com)
+- Bump @telus-uds/components-base to v1.89.0
+
+### Patches
+
+- `TermsAndConditions`: add accessibilityLabel to resolve accessibility issue (<tony.eng@telus.com>)
+- `TermsAndConditions`: remove main container (guillermo.peitzner@telus.com)
+
+## 2.35.1
+
+Thu, 04 Jul 2024 19:35:15 GMT
+
+### Patches
+
+- `Breadcrumbs`: fix line break (guillermo.peitzner@telus.com)
+- `OrderedList`: fix numbered text alignment (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.88.0
+- Bump @telus-uds/system-theme-tokens to v2.59.0
+
 ## 2.35.0
 
-Mon, 24 Jun 2024 16:19:29 GMT
+Mon, 24 Jun 2024 16:28:34 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Item/Item.js

@@ -16,7 +16,7 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
   displayName: "Item__StyledItemContainer",
   componentId: "components-web__sc-1rfdaul-0"
 })({
-  display: 'flex',
+  display: 'inline-block',
   paddingLeft: _ref => {
     let {
       listItemPadding
@@ -30,58 +30,51 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
     } = _ref2;
     return `${Math.ceil(lineHeight * fontSize)}px`;
   },
-  height: _ref3 => {
-    let {
-      iconContainerSize
-    } = _ref3;
-    return `${iconContainerSize}px`;
-  },
   marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingLeft: _ref4 => {
+  display: 'inline-block',
+  paddingLeft: _ref3 => {
     let {
       iconPadding
-    } = _ref4;
+    } = _ref3;
     return `${iconPadding}px`;
   },
-  paddingRight: _ref5 => {
+  paddingRight: _ref4 => {
     let {
       iconPadding
-    } = _ref5;
+    } = _ref4;
     return `${iconPadding}px`;
   },
-  fontFamily: _ref6 => {
+  fontFamily: _ref5 => {
     let {
       fontName,
       fontWeight
-    } = _ref6;
+    } = _ref5;
     return (0, _componentsBase.applyTextStyles)({
       fontName,
       fontWeight
     }).fontFamily;
   },
-  height: _ref7 => {
+  height: _ref6 => {
     let {
       iconContainerSize
-    } = _ref7;
+    } = _ref6;
     return `${iconContainerSize}px`;
   },
-  width: _ref8 => {
+  width: _ref7 => {
     let {
       iconContainerSize,
       iconPadding
-    } = _ref8;
+    } = _ref7;
     return `${iconContainerSize + iconPadding * 2}px`;
-  }
+  },
+  verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -94,7 +87,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     LinkRouter,
     linkRouterProps,
     ...rest
-  } = _ref9;
+  } = _ref8;
   const {
     iconColor,
     icon: ChevronRightIcon,

package/lib/OrderedList/Item.js

@@ -38,7 +38,7 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
   let {
     interItemMargin,
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
@@ -55,7 +55,7 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
       color: itemColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      textAlign: itemBulletContainerAlign,
+      justifyContent: itemBulletTextAlign,
       ...(0, _componentsBase.applyTextStyles)({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,

package/lib/PriceLockup/PriceLockup.js

@@ -276,9 +276,9 @@ PriceLockup.propTypes = {
   /**
    * Size of the component
    *
-   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   * Micro for mini cart pricing, small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
    */
-  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  size: _propTypes.default.oneOf(['micro', 'small', 'medium', 'large']),
   /**
    * If currency symbol other than `$` to be used
    */

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -74,7 +74,9 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
-    expandTitle = collapseTitle
+    expandTitle = collapseTitle,
+    expandLabel,
+    collapseLabel
   } = _ref4;
   const getTokens = (0, _componentsBase.useThemeTokensCallback)('TermsAndConditions', {}, {});
   const {
@@ -114,6 +116,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
           expanded
         } = pressableState || {};
         const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
+        const label = expanded ? collapseLabel : expandLabel;
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
@@ -123,7 +126,8 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
                 size: 'small'
               },
               tokens: iconTokens,
-              focusable: false
+              focusable: false,
+              accessibilityLabel: label
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
             tokens: getTokens(),
@@ -148,7 +152,9 @@ ExpandCollapse.displayName = 'ExpandCollapse';
 ExpandCollapse.propTypes = {
   children: _propTypes.default.node.isRequired,
   collapseTitle: _propTypes.default.string.isRequired,
-  expandTitle: _propTypes.default.string
+  expandTitle: _propTypes.default.string,
+  collapseLabel: _propTypes.default.string,
+  expandLabel: _propTypes.default.string
 };
 var _default = ExpandCollapse;
 exports.default = _default;

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -95,10 +95,6 @@ const NonIndexedContentTitle = /*#__PURE__*/_styledComponents.default.div.withCo
     paddingLeft: tokens.titlePaddingLeft
   };
 });
-const MainContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "TermsAndConditions__MainContainer",
-  componentId: "components-web__sc-1199epn-5"
-})(["overflow:hidden;"]);
 
 /**
  * Use `TermsAndConditions` to display important legal content.
@@ -129,7 +125,7 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
   const themeTokens = (0, _componentsBase.useThemeTokens)('TermsAndConditions', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MainContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
       tokens: {
@@ -138,6 +134,8 @@ const TermsAndConditions = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) =
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
       collapseTitle: getCopy('headingView'),
       expandTitle: getCopy('headingHide'),
+      collapseLabel: getCopy('collapseLabel'),
+      expandLabel: getCopy('expandLabel'),
       ref: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentContainer, {
         tokens: themeTokens,

package/lib/TermsAndConditions/dictionary.js

@@ -8,12 +8,16 @@ var _default = {
   en: {
     headingHide: 'Hide terms and conditions',
     headingView: 'View terms and conditions',
-    nonIndexedTitle: 'The following applies to all terms and conditions above'
+    nonIndexedTitle: 'The following applies to all terms and conditions above',
+    expandLabel: 'Expand',
+    collapseLabel: 'Collapse'
   },
   fr: {
     headingHide: 'Masquer les modalités et conditions',
     headingView: 'Voir les modalités et conditions',
-    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus'
+    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus',
+    expandLabel: 'Détailler',
+    collapseLabel: 'Réduire'
   }
 };
 exports.default = _default;

package/lib-module/Breadcrumbs/Item/Item.js

@@ -11,7 +11,7 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
   displayName: "Item__StyledItemContainer",
   componentId: "components-web__sc-1rfdaul-0"
 })({
-  display: 'flex',
+  display: 'inline-block',
   paddingLeft: _ref => {
     let {
       listItemPadding
@@ -25,58 +25,51 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
     } = _ref2;
     return `${Math.ceil(lineHeight * fontSize)}px`;
   },
-  height: _ref3 => {
-    let {
-      iconContainerSize
-    } = _ref3;
-    return `${iconContainerSize}px`;
-  },
   marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingLeft: _ref4 => {
+  display: 'inline-block',
+  paddingLeft: _ref3 => {
     let {
       iconPadding
-    } = _ref4;
+    } = _ref3;
     return `${iconPadding}px`;
   },
-  paddingRight: _ref5 => {
+  paddingRight: _ref4 => {
     let {
       iconPadding
-    } = _ref5;
+    } = _ref4;
     return `${iconPadding}px`;
   },
-  fontFamily: _ref6 => {
+  fontFamily: _ref5 => {
     let {
       fontName,
       fontWeight
-    } = _ref6;
+    } = _ref5;
     return applyTextStyles({
       fontName,
       fontWeight
     }).fontFamily;
   },
-  height: _ref7 => {
+  height: _ref6 => {
     let {
       iconContainerSize
-    } = _ref7;
+    } = _ref6;
     return `${iconContainerSize}px`;
   },
-  width: _ref8 => {
+  width: _ref7 => {
     let {
       iconContainerSize,
       iconPadding
-    } = _ref8;
+    } = _ref7;
     return `${iconContainerSize + iconPadding * 2}px`;
-  }
+  },
+  verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -89,7 +82,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     LinkRouter,
     linkRouterProps,
     ...rest
-  } = _ref9;
+  } = _ref8;
   const {
     iconColor,
     icon: ChevronRightIcon,

package/lib-module/OrderedList/Item.js

@@ -32,7 +32,7 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
   let {
     interItemMargin,
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
@@ -49,7 +49,7 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
       color: itemColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      textAlign: itemBulletContainerAlign,
+      justifyContent: itemBulletTextAlign,
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,

package/lib-module/PriceLockup/PriceLockup.js

@@ -271,9 +271,9 @@ PriceLockup.propTypes = {
   /**
    * Size of the component
    *
-   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   * Micro for mini cart pricing, small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['micro', 'small', 'medium', 'large']),
   /**
    * If currency symbol other than `$` to be used
    */

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -68,7 +68,9 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     collapseTitle,
-    expandTitle = collapseTitle
+    expandTitle = collapseTitle,
+    expandLabel,
+    collapseLabel
   } = _ref4;
   const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {});
   const {
@@ -108,6 +110,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
           expanded
         } = pressableState || {};
         const iconTokens = getIconButtonTokens(getTokens(pressableState || {}));
+        const label = expanded ? collapseLabel : expandLabel;
         return /*#__PURE__*/_jsxs(ExpandCollapseControl, {
           ref: ref,
           children: [/*#__PURE__*/_jsx(ExpandCollapseIconContainer, {
@@ -117,7 +120,8 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
                 size: 'small'
               },
               tokens: iconTokens,
-              focusable: false
+              focusable: false,
+              accessibilityLabel: label
             })
           }), /*#__PURE__*/_jsx(ExpandCollapseTitle, {
             tokens: getTokens(),
@@ -142,6 +146,8 @@ ExpandCollapse.displayName = 'ExpandCollapse';
 ExpandCollapse.propTypes = {
   children: PropTypes.node.isRequired,
   collapseTitle: PropTypes.string.isRequired,
-  expandTitle: PropTypes.string
+  expandTitle: PropTypes.string,
+  collapseLabel: PropTypes.string,
+  expandLabel: PropTypes.string
 };
 export default ExpandCollapse;

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -89,10 +89,6 @@ const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
     paddingLeft: tokens.titlePaddingLeft
   };
 });
-const MainContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TermsAndConditions__MainContainer",
-  componentId: "components-web__sc-1199epn-5"
-})(["overflow:hidden;"]);
 
 /**
  * Use `TermsAndConditions` to display important legal content.
@@ -123,7 +119,7 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/_jsxs(MainContainer, {
+  return /*#__PURE__*/_jsxs("div", {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Divider, {
       tokens: {
@@ -132,6 +128,8 @@ const TermsAndConditions = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     }), /*#__PURE__*/_jsx(ExpandCollapse, {
       collapseTitle: getCopy('headingView'),
       expandTitle: getCopy('headingHide'),
+      collapseLabel: getCopy('collapseLabel'),
+      expandLabel: getCopy('expandLabel'),
       ref: ref,
       children: /*#__PURE__*/_jsxs(ContentContainer, {
         tokens: themeTokens,

package/lib-module/TermsAndConditions/dictionary.js

@@ -2,11 +2,15 @@ export default {
   en: {
     headingHide: 'Hide terms and conditions',
     headingView: 'View terms and conditions',
-    nonIndexedTitle: 'The following applies to all terms and conditions above'
+    nonIndexedTitle: 'The following applies to all terms and conditions above',
+    expandLabel: 'Expand',
+    collapseLabel: 'Collapse'
   },
   fr: {
     headingHide: 'Masquer les modalités et conditions',
     headingView: 'Voir les modalités et conditions',
-    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus'
+    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus',
+    expandLabel: 'Détailler',
+    collapseLabel: 'Réduire'
   }
 };

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.87.0",
+    "@telus-uds/components-base": "1.89.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.58.0",
+    "@telus-uds/system-theme-tokens": "^2.59.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.35.0"
+  "version": "2.36.0"
 }

package/src/Breadcrumbs/Item/Item.jsx

@@ -14,22 +14,20 @@ import { htmlAttrs } from '../../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledItemContainer = styled.li({
-  display: 'flex',
+  display: 'inline-block',
   paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
   lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
   marginBottom: '8px'
 })
 
 const IconContainer = styled.span({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  display: 'inline-block',
   paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
   paddingRight: ({ iconPadding }) => `${iconPadding}px`,
   fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily,
   height: ({ iconContainerSize }) => `${iconContainerSize}px`,
-  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`
+  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`,
+  verticalAlign: 'bottom'
 })
 
 const Item = React.forwardRef(

package/src/OrderedList/Item.jsx

@@ -34,7 +34,7 @@ const StyledItemBase = styled(ItemBase)(
   ({
     interItemMargin,
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
@@ -50,7 +50,7 @@ const StyledItemBase = styled(ItemBase)(
       color: itemColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      textAlign: itemBulletContainerAlign,
+      justifyContent: itemBulletTextAlign,
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,

package/src/PriceLockup/PriceLockup.jsx

@@ -136,6 +136,7 @@ const PriceLockup = React.forwardRef(
       { ...variant, size },
       { viewport, strikeThrough }
     )
+
     const typographyTokens = getTypographyTokens(themeTokens)
     const priceString = String(price)
     const lastDotPosition = priceString.lastIndexOf('.')
@@ -260,9 +261,9 @@ PriceLockup.propTypes = {
   /**
    * Size of the component
    *
-   * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
+   * Micro for mini cart pricing, small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['micro', 'small', 'medium', 'large']),
   /**
    * If currency symbol other than `$` to be used
    */

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -50,7 +50,7 @@ const getIconButtonTokens = ({
 })
 
 const ExpandCollapse = React.forwardRef(
-  ({ children, collapseTitle, expandTitle = collapseTitle }, ref) => {
+  ({ children, collapseTitle, expandTitle = collapseTitle, expandLabel, collapseLabel }, ref) => {
     const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
     const {
       expandBaseBorderWidth,
@@ -89,12 +89,18 @@ const ExpandCollapse = React.forwardRef(
             control={(pressableState) => {
               const { expanded } = pressableState || {}
               const iconTokens = getIconButtonTokens(getTokens(pressableState || {}))
+              const label = expanded ? collapseLabel : expandLabel
 
               return (
                 <ExpandCollapseControl ref={ref}>
                   <ExpandCollapseIconContainer tokens={getTokens()}>
                     {/* Can use `Icon` instead of `IconButton` but `Icon` does not have required stylistic variants */}
-                    <IconButton variant={{ size: 'small' }} tokens={iconTokens} focusable={false} />
+                    <IconButton
+                      variant={{ size: 'small' }}
+                      tokens={iconTokens}
+                      focusable={false}
+                      accessibilityLabel={label}
+                    />
                   </ExpandCollapseIconContainer>
                   <ExpandCollapseTitle tokens={getTokens()}>
                     {expanded ? expandTitle : collapseTitle}
@@ -125,7 +131,9 @@ ExpandCollapse.displayName = 'ExpandCollapse'
 ExpandCollapse.propTypes = {
   children: PropTypes.node.isRequired,
   collapseTitle: PropTypes.string.isRequired,
-  expandTitle: PropTypes.string
+  expandTitle: PropTypes.string,
+  collapseLabel: PropTypes.string,
+  expandLabel: PropTypes.string
 }
 
 export default ExpandCollapse

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -63,10 +63,6 @@ const NonIndexedContentTitle = styled.div(({ tokens }) => ({
   paddingLeft: tokens.titlePaddingLeft
 }))
 
-const MainContainer = styled.div`
-  overflow: hidden;
-`
-
 /**
  * Use `TermsAndConditions` to display important legal content.
  *
@@ -97,11 +93,13 @@ const TermsAndConditions = React.forwardRef(
     const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, { viewport })
 
     return (
-      <MainContainer {...selectProps(rest)}>
+      <div {...selectProps(rest)}>
         <Divider tokens={{ color: themeTokens.dividerColor }} />
         <ExpandCollapse
           collapseTitle={getCopy('headingView')}
           expandTitle={getCopy('headingHide')}
+          collapseLabel={getCopy('collapseLabel')}
+          expandLabel={getCopy('expandLabel')}
           ref={ref}
         >
           <ContentContainer tokens={themeTokens}>
@@ -144,7 +142,7 @@ const TermsAndConditions = React.forwardRef(
           </ContentContainer>
         </ExpandCollapse>
         <Divider tokens={{ color: themeTokens.dividerColor }} />
-      </MainContainer>
+      </div>
     )
   }
 )

package/src/TermsAndConditions/dictionary.js

@@ -2,11 +2,15 @@ export default {
   en: {
     headingHide: 'Hide terms and conditions',
     headingView: 'View terms and conditions',
-    nonIndexedTitle: 'The following applies to all terms and conditions above'
+    nonIndexedTitle: 'The following applies to all terms and conditions above',
+    expandLabel: 'Expand',
+    collapseLabel: 'Collapse'
   },
   fr: {
     headingHide: 'Masquer les modalités et conditions',
     headingView: 'Voir les modalités et conditions',
-    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus'
+    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus',
+    expandLabel: 'Détailler',
+    collapseLabel: 'Réduire'
   }
 }

package/types/PriceLockup.d.ts

@@ -4,7 +4,7 @@ import type { HTMLAttrs, Variant } from './common'
 export interface PriceLockupProps extends HTMLAttrs {
   children: ReactNode
   variant?: Variant
-  size?: 'small' | 'medium' | 'large'
+  size?: 'micro' | 'small' | 'medium' | 'large'
   signDirection?: 'left' | 'right'
   footnoteLinks?: [number] | [string]
   topText?: string