@telus-uds/components-base 1.78.1 → 1.79.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 28 Feb 2024 23:55:55 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Mar 2024 00:02:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.79.0
+
+Wed, 06 Mar 2024 00:02:37 GMT
+
+### Minor changes
+
+- adjusting Typography to use the new token gradient (hoss.agina@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.53.0
+
+### Patches
+
+- prevent onchange event from being fired twice on select component (guillermo.peitzner@telus.com)
+- fix step-tracker component visual states (guillermo.peitzner@telus.com)
+
 ## 1.78.1
 
-Wed, 28 Feb 2024 23:55:55 GMT
+Thu, 29 Feb 2024 00:05:08 GMT
 
 ### Patches
 

package/lib/Select/Select.js

@@ -255,7 +255,7 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
-          onChange: setValue,
+          onChange: e => setValue(e, null),
           value: currentValue,
           inactive: inactive,
           placeholder: placeholder !== undefined ? {

package/lib/StepTracker/Step.js

@@ -209,11 +209,11 @@ const Step = _ref8 => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectCurrentInnerStyles(themeTokens)
-        }), isCurrent && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
+        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]

package/lib/Typography/Typography.js

@@ -30,7 +30,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   } = _ref;
   return (0, _utils.applyTextStyles)({
     fontWeight,
@@ -42,7 +43,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   });
 };
 
@@ -74,6 +76,36 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
   const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? (0, _utils2.getMaxFontMultiplier)(themeTokens[viewport]) : (0, _utils2.getMaxFontMultiplier)(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
@@ -144,7 +176,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       ...resolvedTextProps,
-      style: textStyles,
+      style: getStyleWithGradient(textStyles),
       dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
@@ -152,7 +184,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    style: textStyles,
+    style: getStyleWithGradient(textStyles),
     dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });

package/lib-module/Select/Select.js

@@ -247,7 +247,7 @@ const Select = /*#__PURE__*/forwardRef((_ref8, ref) => {
           onBlur: handleBlur,
           onMouseOver: handleMouseOver,
           onMouseOut: handleMouseOut,
-          onChange: setValue,
+          onChange: e => setValue(e, null),
           value: currentValue,
           inactive: inactive,
           placeholder: placeholder !== undefined ? {

package/lib-module/StepTracker/Step.js

@@ -203,11 +203,11 @@ const Step = _ref8 => {
       }), /*#__PURE__*/_jsxs(View, {
         style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
         testID: getStepTestID(isCompleted, isCurrent),
-        children: [(isCompleted && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
-          style: selectCurrentInnerStyles(themeTokens)
-        }), isCurrent && completedIcon && /*#__PURE__*/_jsx(Icon, {
+        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
           icon: completedIcon,
           tokens: selectCompletedIconTokens(themeTokens)
+        }), (isCurrent && completedIcon || isCurrent && !completedIcon) && /*#__PURE__*/_jsx(View, {
+          style: selectCurrentInnerStyles(themeTokens)
         })]
       }), /*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]

package/lib-module/Typography/Typography.js

@@ -22,7 +22,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   } = _ref;
   return applyTextStyles({
     fontWeight,
@@ -34,7 +35,8 @@ const selectTextStyles = (_ref, themeOptions) => {
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   });
 };
 
@@ -66,6 +68,36 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
   const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
   const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
   let textStyles;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
@@ -136,7 +168,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
-      style: textStyles,
+      style: getStyleWithGradient(textStyles),
       dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
@@ -144,7 +176,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    style: textStyles,
+    style: getStyleWithGradient(textStyles),
     dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.52.1",
+    "@telus-uds/system-theme-tokens": "^2.53.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.78.1",
+  "version": "1.79.0",
   "types": "types/index.d.ts"
 }

package/src/Select/Select.jsx

@@ -241,7 +241,7 @@ const Select = forwardRef(
               onBlur={handleBlur}
               onMouseOver={handleMouseOver}
               onMouseOut={handleMouseOut}
-              onChange={setValue}
+              onChange={(e) => setValue(e, null)}
               value={currentValue}
               inactive={inactive}
               placeholder={

package/src/StepTracker/Step.jsx

@@ -172,12 +172,12 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, .
           style={[staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)]}
           testID={getStepTestID(isCompleted, isCurrent)}
         >
-          {((isCompleted && completedIcon) || (isCurrent && !completedIcon)) && (
-            <View style={selectCurrentInnerStyles(themeTokens)} />
-          )}
-          {isCurrent && completedIcon && (
+          {isCompleted && completedIcon && (
             <Icon icon={completedIcon} tokens={selectCompletedIconTokens(themeTokens)} />
           )}
+          {((isCurrent && completedIcon) || (isCurrent && !completedIcon)) && (
+            <View style={selectCurrentInnerStyles(themeTokens)} />
+          )}
         </View>
         <View
           style={[

package/src/Typography/Typography.jsx

@@ -35,7 +35,8 @@ const selectTextStyles = (
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   },
   themeOptions
 ) =>
@@ -49,7 +50,8 @@ const selectTextStyles = (
     textAlign,
     textTransform,
     letterSpacing,
-    textDecorationLine
+    textDecorationLine,
+    gradient
   })
 
 // General-purpose flexible theme-neutral base component for text
@@ -87,6 +89,45 @@ const Typography = forwardRef(
       : getMaxFontMultiplier(themeTokens)
     const textDecorationLine = strikeThrough ? 'line-through' : 'none'
 
+    const generateGradientString = (gradientObj) => {
+      let gradientStr = ''
+
+      const {
+        type,
+        angle,
+        stops: [stopOne, stopTwo],
+        specification
+      } = gradientObj
+
+      if (type === 'radial') {
+        gradientStr = `radial-gradient(${specification}`
+        gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${
+          stopTwo.stop * 100
+        }%`
+      } else if (type === 'linear') {
+        gradientStr = `linear-gradient(${angle}deg`
+        if (angle === 135) {
+          gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`
+        } else {
+          gradientStr += `, ${stopOne.color}, ${stopTwo.color}`
+        }
+      }
+
+      gradientStr += ')'
+      return gradientStr
+    }
+
+    const getStyleWithGradient = (styles) => {
+      return styles.gradient
+        ? {
+            ...styles,
+            color: 'transparent',
+            backgroundImage: generateGradientString(styles.gradient),
+            backgroundClip: 'text'
+          }
+        : styles
+    }
+
     let textStyles
     let mediaIds
 
@@ -161,7 +202,11 @@ const Typography = forwardRef(
 
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles} dataSet={dataSetValue}>
+        <Text
+          {...resolvedTextProps}
+          style={getStyleWithGradient(textStyles)}
+          dataSet={dataSetValue}
+        >
           {sanitizeChildren(children)}
         </Text>
       </View>
@@ -170,7 +215,7 @@ const Typography = forwardRef(
         ref={ref}
         {...containerProps}
         {...resolvedTextProps}
-        style={textStyles}
+        style={getStyleWithGradient(textStyles)}
         dataSet={dataSetValue}
       >
         {sanitizeChildren(children)}