@telus-uds/components-base 1.39.0 → 1.40.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Mon, 01 May 2023 22:02:12 GMT and should not be manually modified.
+This log was last generated on Tue, 09 May 2023 00:20:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.40.0
+
+Tue, 09 May 2023 00:20:29 GMT
+
+### Minor changes
+
+- Added 'strikeThrough' property (kyle.king2@telus.com)
+- remove screenReaderChanged event from A11yInfoProvider and event tracking (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.25.0
+
 ## 1.39.0
 
-Mon, 01 May 2023 22:02:12 GMT
+Mon, 01 May 2023 22:09:07 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -23,6 +23,39 @@
         "detailsContainerPadding": "size",
         "playIconContainerBackground": "color"
       },
+      "VideoPickerThumbnail": {
+        "splashButtonRadius": "radius",
+        "borderWidth": "border",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "pressablePaddingVertical": "size",
+        "pressablePaddingHorizontal": "size",
+        "pressableBorderTopWidth": "border",
+        "pressableBorderTopColor": "color",
+        "pressablePaddingBottom": "size",
+        "titleColor": "color",
+        "subTitleColor": "color"
+      },
+      "VideoPickerSlider": {
+        "previousIcon": "icon",
+        "nextIcon": "icon"
+      },
+      "VideoPicker": {
+        "framedMaxHeight": "size",
+        "framedContainerBackgroundColor": "color",
+        "framedContainerBorderWidth": "border",
+        "framedContainerBorderColor": "color",
+        "framedContainerBorderRadius": "radius",
+        "framedContainerPadding": "size",
+        "stackViewDividerColor": "color"
+      },
+      "Disclaimer": {
+        "color": "color",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
+      },
       "Table": {
         "tablePaddingBottom": "size",
         "cellHeadingBackground": "color",
@@ -35,7 +68,10 @@
         "cellPaddingTop": "size",
         "cellPaddingRight": "size",
         "cellPaddingLeft": "size",
-        "cellPaddingBottom": "size"
+        "cellPaddingBottom": "size",
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "fontSize": "fontSize"
       },
       "Image": {
         "borderRadius": "radius"
@@ -121,7 +157,10 @@
       "FootnoteLink": {
         "lineHeight": "lineHeight",
         "paddingLeft": "size",
-        "paddingRight": "size"
+        "paddingRight": "size",
+        "color": "color",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight"
       },
       "WaffleGrid": {
         "rowBorderWidth": "border",
@@ -166,9 +205,12 @@
         "closeButtonMarginRight": "size",
         "closeButtonMarginBottom": "size",
         "closeButtonWidth": "size",
-        "closeButtonIconSize": "size"
+        "closeButtonIconSize": "size",
+        "closeIcon": "icon"
       },
       "PriceLockup": {
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
         "footnoteMarginTop": "size",
         "footnoteGap": "size",
         "bottomTextMarginTop": "size",
@@ -176,9 +218,36 @@
         "bottomLinksMarginLeft": "size",
         "topTextMarginBottom": "size",
         "strikeThroughHeight": "size",
-        "strikeThroughBackground": "color",
+        "strikeThroughColor": "color",
         "fontColor": "color",
-        "dividerColor": "color"
+        "dividerColor": "color",
+        "topTextFontSize": "fontSize",
+        "topTextLineHeight": "lineHeight",
+        "currencySymbolFontSize": "fontSize",
+        "currencySymbolLineHeight": "lineHeight",
+        "currencySymbolFontName": "fontName",
+        "currencySymbolFontWeight": "fontWeight",
+        "amountFontSize": "fontSize",
+        "amountLineHeight": "lineHeight",
+        "amountLetterSpacing": "letterSpacing",
+        "amountFontWeight": "fontWeight",
+        "amountFontName": "fontName",
+        "centsFontSize": "fontSize",
+        "centsLineHeight": "lineHeight",
+        "centsFontName": "fontName",
+        "centsFontWeight": "fontWeight",
+        "topTextFontName": "fontName",
+        "topTextFontWeight": "fontWeight",
+        "rateFontSize": "fontSize",
+        "rateLineHeight": "lineHeight",
+        "rateFontName": "fontName",
+        "rateFontWeight": "fontWeight",
+        "bottomTextFontSize": "fontSize",
+        "bottomTextLineHeight": "lineHeight",
+        "footnoteLinkColor": "color",
+        "footnoteLinkFontName": "fontName",
+        "footnoteLinkFontWeight": "fontWeight",
+        "footnoteLinkFontSize": "fontSize"
       },
       "ActivityIndicator": {
         "size": "size",
@@ -718,6 +787,32 @@
         "closeIconSize": "size",
         "closePadding": "size"
       },
+      "NavigationBar": {
+        "alignSelf": "flexAlign",
+        "backgroundColor": "color",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "color": "color",
+        "fontName": "fontName",
+        "fontSize": "fontSize",
+        "fontWeight": "fontWeight",
+        "lineHeight": "lineHeight",
+        "minWidth": "size",
+        "opacity": "opacity",
+        "outerBackgroundColor": "color",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderWidth": "border",
+        "paddingBottom": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "shadow": "shadow",
+        "textAlign": "flexJustifyContent",
+        "width": "size",
+        "icoMenu": "icon"
+      },
       "Notification": {
         "backgroundColor": "color",
         "borderBottomWidth": "border",
@@ -1001,7 +1096,10 @@
         "curveWidth": "size",
         "curveAfterBackgroundColor": "color",
         "curveAfterHeight": "size",
-        "gradient": "gradient"
+        "gradient": "gradient",
+        "fontColor": "color",
+        "borderRadiusBottomLeft": "size",
+        "borderRadiusBottomRight": "size"
       },
       "Search": {
         "backgroundColor": "color",
@@ -1408,8 +1506,14 @@
         "flexShrink": "integer"
       },
       "Breadcrumbs": {
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "fontSize": "fontSize",
+        "color": "color",
+        "currentColor": "color",
         "icon": "icon",
         "iconColor": "color",
+        "iconSize": "size",
         "iconPadding": "size",
         "listItemPadding": "size"
       },
@@ -2019,6 +2123,60 @@
           "type": "state"
         }
       },
+      "NavigationBar": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "viewport": {
+          "description": "The size label for the current screen viewport based on the current screen width",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "type": "state"
+        }
+      },
       "Notification": {
         "system": {
           "values": [
@@ -10298,6 +10456,17 @@
             "required": false,
             "description": "Works the same as css text-align, note that RN doesn't support \"start\" or \"end\" (see https://reactnative.dev/docs/text-style-props#textalign)\nJustify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)"
           },
+          "strikeThrough": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Renders the text with \"text-decoration: 'line-through'\" applied."
+          },
           "tokens": {
             "type": {
               "name": "custom",

package/lib/A11yInfoProvider/index.js

@@ -39,8 +39,6 @@ const A11yInfoProvider = _ref => {
 
     const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
 
-    const screenReaderSubscription = _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
-
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
       // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
@@ -61,12 +59,6 @@ const A11yInfoProvider = _ref => {
       } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
         _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
-        _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-      }
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {

package/lib/Typography/Typography.js

@@ -71,6 +71,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     align = undefined,
     tokens,
     dataSet,
+    strikeThrough = false,
     ...rest
   } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -117,16 +118,24 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     return resetTagStyling(children);
   };
 
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const textStyles = resolvedTextProps.style ? { ...resolvedTextProps.style,
+    textDecorationLine
+  } : {
+    textDecorationLine
+  };
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
+      style: textStyles,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
+    style: textStyles,
     children: sanitizeChildren(children)
   });
 });
@@ -136,6 +145,11 @@ Typography.propTypes = { ...selectedContainerPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: _propTypes.default.bool,
+
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *

package/lib-module/A11yInfoProvider/index.js

@@ -20,7 +20,6 @@ const A11yInfoProvider = _ref => {
     }
 
     const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    const screenReaderSubscription = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
@@ -42,12 +41,6 @@ const A11yInfoProvider = _ref => {
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-      }
     };
   }, []);
   return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {

package/lib-module/Typography/Typography.js

@@ -50,6 +50,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     align = undefined,
     tokens,
     dataSet,
+    strikeThrough = false,
     ...rest
   } = _ref2;
   const viewport = useViewport();
@@ -95,16 +96,24 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     return resetTagStyling(children);
   };
 
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const textStyles = resolvedTextProps.style ? { ...resolvedTextProps.style,
+    textDecorationLine
+  } : {
+    textDecorationLine
+  };
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
+      style: textStyles,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
+    style: textStyles,
     children: sanitizeChildren(children)
   });
 });
@@ -114,6 +123,11 @@ Typography.propTypes = { ...selectedContainerPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
 
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
+
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.24.0",
+    "@telus-uds/system-theme-tokens": "^2.25.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.39.0"
+  "version": "1.40.0"
 }

package/src/A11yInfoProvider/index.jsx

@@ -20,10 +20,6 @@ const A11yInfoProvider = ({ children }) => {
       'reduceMotionChanged',
       setReduceMotionEnabled
     )
-    const screenReaderSubscription = AccessibilityInfo.addEventListener(
-      'screenReaderChanged',
-      setScreenReaderEnabled
-    )
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([
@@ -50,12 +46,6 @@ const A11yInfoProvider = ({ children }) => {
       } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
         AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled)
       }
-
-      if (typeof screenReaderSubscription?.remove === 'function') {
-        screenReaderSubscription?.remove()
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled)
-      }
     }
   }, [])
 

package/src/Typography/Typography.jsx

@@ -53,6 +53,7 @@ const Typography = forwardRef(
       align = undefined,
       tokens,
       dataSet,
+      strikeThrough = false,
       ...rest
     },
     ref
@@ -100,12 +101,18 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
+    const textDecorationLine = strikeThrough ? 'line-through' : 'none'
+    const textStyles = resolvedTextProps.style
+      ? { ...resolvedTextProps.style, textDecorationLine }
+      : { textDecorationLine }
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps}>{sanitizeChildren(children)}</Text>
+        <Text {...resolvedTextProps} style={textStyles}>
+          {sanitizeChildren(children)}
+        </Text>
       </View>
     ) : (
-      <Text ref={ref} {...containerProps} {...resolvedTextProps}>
+      <Text ref={ref} {...containerProps} {...resolvedTextProps} style={textStyles}>
         {sanitizeChildren(children)}
       </Text>
     )
@@ -118,6 +125,10 @@ Typography.propTypes = {
   ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *