@telus-uds/components-base 2.0.2 → 2.2.0

package/lib/Tooltip/Tooltip.native.js

@@ -43,30 +43,40 @@ const selectTooltipShadowStyles = _ref2 => {
     ...applyShadowToken(shadow)
   };
 };
-const selectTooltipPositionStyles = _ref3 => {
+const selectToolTipSizeStyles = _ref3 => {
+  let {
+    maxWidth,
+    minWidth
+  } = _ref3;
+  return {
+    maxWidth,
+    minWidth
+  };
+};
+const selectTooltipPositionStyles = _ref4 => {
   let {
     top,
     left,
     width
-  } = _ref3;
+  } = _ref4;
   return {
     top,
     left,
     width
   };
 };
-const selectArrowStyles = (_ref4, _ref5) => {
+const selectArrowStyles = (_ref5, _ref6) => {
   let {
     backgroundColor,
     arrowWidth,
     arrowBorderRadius,
     shadow
-  } = _ref4;
+  } = _ref5;
   let {
     position,
     width: tooltipWidth,
     height: tooltipHeight
-  } = _ref5;
+  } = _ref6;
   // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
   const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2);
 
@@ -139,7 +149,7 @@ const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(To
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     children,
     content,
@@ -153,7 +163,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     activateOnHover = false,
     tooltipButtonTokens,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const [isOpen, setIsOpen] = React.useState(false);
   const controlRef = React.useRef();
   const [controlLayout, setControlLayout] = React.useState(null);
@@ -170,10 +180,10 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     arrowOffset
   } = themeTokens;
   React.useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', _ref7 => {
+    const subscription = Dimensions.addEventListener('change', _ref8 => {
       let {
         window
-      } = _ref7;
+      } = _ref8;
       setWindowDimensions(window);
     });
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
@@ -183,19 +193,19 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     setIsOpen(!isOpen);
   };
   const close = () => setIsOpen(false);
-  const getPressableState = _ref8 => {
+  const getPressableState = _ref9 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref8;
+    } = _ref9;
     return {
       pressed,
       hover: hovered,
       focus: focused
     };
   };
-  const onTooltipLayout = _ref9 => {
+  const onTooltipLayout = _ref10 => {
     let {
       nativeEvent: {
         layout: {
@@ -203,7 +213,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
           height
         }
       }
-    } = _ref9;
+    } = _ref10;
     if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
       setTooltipDimensions({
         width: Platform.select({
@@ -312,7 +322,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
         ref: ref,
         style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens),
         // applied separately so that it doesn't cover the arrow
-        tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        selectToolTipSizeStyles(themeTokens), tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
         ],
         onLayout: onTooltipLayout,
         accessibilityRole: "alert",
@@ -341,7 +351,6 @@ const staticStyles = StyleSheet.create({
   },
   tooltip: {
     position: 'absolute',
-    maxWidth: 240,
     top: 0,
     left: 0
   },

package/lib/Typography/Typography.js

@@ -122,6 +122,18 @@ const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         textDecorationLine,
         ...viewportTokens
       }, themeOptions);
+      if (themeTokens[vp].gradient) {
+        const tokensWithGradient = {
+          ...acc[vp],
+          color: 'transparent',
+          backgroundImage: generateGradientString(themeTokens[vp].gradient),
+          backgroundClip: 'text'
+        };
+        return {
+          ...acc,
+          [vp]: tokensWithGradient
+        };
+      }
       return acc;
     }, {});
     const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);

package/lib/Validator/Validator.js

@@ -186,6 +186,10 @@ const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }, []);
   return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
+    feedbackProps: {
+      ...(rest === null || rest === void 0 ? void 0 : rest.feedbackProps),
+      showFeedbackIcon: true
+    },
     children: /*#__PURE__*/_jsx(StackView, {
       space: 2,
       direction: "row",

package/lib/utils/props/contentfulProps.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import getPropSelector from './getPropSelector';
+const contentfulPropsTypes = {
+  ...Platform.select({
+    web: {
+      'data-contentful-field-id': PropTypes.string,
+      'data-contentful-entry-id': PropTypes.string
+    },
+    default: {}
+  })
+};
+export default {
+  /**
+   * Set of contentful properties used for the content preview inspector.
+   */
+  types: contentfulPropsTypes,
+  /**
+   * Filters a props object, returning only contentful props.
+   */
+  select: getPropSelector(contentfulPropsTypes)
+};

package/lib/utils/props/index.js

@@ -16,4 +16,5 @@ export { default as selectSystemProps } from './selectSystemProps';
 export { default as textInputProps } from './textInputProps';
 export { default as textProps } from './textProps';
 export { default as variantProp } from './variantProp';
-export { default as viewProps } from './viewProps';
+export { default as viewProps } from './viewProps';
+export { default as contentfulProps } from './contentfulProps';

package/package.json

@@ -13,7 +13,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^2.0.0",
-    "@telus-uds/system-theme-tokens": "^3.0.0",
+    "@telus-uds/system-theme-tokens": "^3.1.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "~10.3.0",
@@ -81,6 +81,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "2.0.2",
+  "version": "2.2.0",
   "types": "types/index.d.ts"
 }

package/src/Card/PressableCardBase.jsx

@@ -82,7 +82,7 @@ const PressableCardBase = React.forwardRef(
     const getTokens = (pressableState) =>
       validateThemeTokens(
         resolvePressableTokens(tokens, pressableState, additionalState),
-        getTokensSetPropType(tokenKeys, { requireAll: true }),
+        getTokensSetPropType(tokenKeys, { partial: true, allowFunction: true }),
         'PressableCard'
       )