@telus-uds/components-web 2.35.1 → 2.36.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 04 Jul 2024 19:28:59 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:28:59 GMT
+Thu, 04 Jul 2024 19:35:15 GMT
 
 ### Patches
 

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/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.88.0",
+    "@telus-uds/components-base": "1.89.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.35.1"
+  "version": "2.36.0"
 }

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