@telus-uds/components-web 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 21 Jul 2023 00:42:38 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jul 2023 18:10:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.16.0
+
+Fri, 28 Jul 2023 18:10:45 GMT
+
+### Minor changes
+
+- Update Modal story (wlsdud194@hotmail.com)
+- add ability to inherit results color in autocomplete from Search component (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.57.0
+- Bump @telus-uds/system-theme-tokens to v2.40.0
+
+### Patches
+
+- verification in type of typography (mauricio.batresmontejo@telus.com)
+
 ## 2.15.0
 
-Fri, 21 Jul 2023 00:42:38 GMT
+Fri, 21 Jul 2023 00:51:24 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -6445,7 +6445,8 @@
               "labelFontSize": "fontSize",
               "labelFontWeight": "fontWeight",
               "labelLineHeight": "lineHeight",
-              "labelMarginLeft": "size"
+              "labelMarginLeft": "size",
+              "inputOutlineOffset": "size"
             }
           },
           "required": false,
@@ -6541,7 +6542,14 @@
             "name": "custom",
             "raw": {
               "space": "integer",
-              "fieldSpace": "integer"
+              "fieldSpace": "integer",
+              "showIcon": "show",
+              "outlineWidth": "border",
+              "borderBottomLeftRadius": "radius",
+              "borderBottomRightRadius": "radius",
+              "borderTopLeftRadius": "radius",
+              "borderTopRightRadius": "radius",
+              "outlineOffset": "size"
             }
           },
           "required": false,
@@ -6573,7 +6581,8 @@
               "labelFontSize": "fontSize",
               "labelFontWeight": "fontWeight",
               "labelLineHeight": "lineHeight",
-              "labelMarginLeft": "size"
+              "labelMarginLeft": "size",
+              "inputOutlineOffset": "size"
             }
           },
           "required": false,
@@ -9259,6 +9268,7 @@
               "itemIconSize": "size",
               "itemLineHeight": "lineHeight",
               "listGutter": "size",
+              "itemUnderline": "textLine",
               "backgroundColor": "color",
               "paddingLeft": "size",
               "paddingRight": "size",
@@ -9342,6 +9352,7 @@
                 "itemIconSize": "size",
                 "itemLineHeight": "lineHeight",
                 "listGutter": "size",
+                "itemUnderline": "textLine",
                 "backgroundColor": "color",
                 "paddingLeft": "size",
                 "paddingRight": "size",

package/lib/Autocomplete/Autocomplete.js

@@ -40,6 +40,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
 const highlightAllMatches = function (str) {
   let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let resultsTextColor = arguments.length > 3 ? arguments[3] : undefined;
   return (
     /*#__PURE__*/
     // Wrapping all in bold
@@ -47,6 +48,9 @@ const highlightAllMatches = function (str) {
       variant: {
         bold: false
       },
+      tokens: {
+        color: resultsTextColor
+      },
       children: matchIndexes.reduce((acc, matchIndex, index) => [...acc, // Add a piece of the string up to the first occurrence of the substring
       index === 0 && (str.slice(0, matchIndex) ?? ''),
       /*#__PURE__*/
@@ -55,6 +59,9 @@ const highlightAllMatches = function (str) {
         variant: {
           bold: true
         },
+        tokens: {
+          color: resultsTextColor
+        },
         children: str.slice(matchIndex, matchIndex + substring.length)
       }, matchIndex), // Add the rest of the string until the next occurrence or the end of it
       str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
@@ -65,6 +72,7 @@ const highlightAllMatches = function (str) {
 const highlight = function () {
   let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let color = arguments.length > 2 ? arguments[2] : undefined;
   return items.reduce((acc, item) => {
     var _Array$from;
 
@@ -77,7 +85,7 @@ const highlight = function () {
 
     if (matches !== null && matches !== void 0 && matches.length) {
       return [...acc, { ...item,
-        label: highlightAllMatches(item.label, text, matches)
+        label: highlightAllMatches(item.label, text, matches, color)
       }];
     }
 
@@ -107,11 +115,16 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     value,
     ...rest
   } = _ref2;
-  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
+  const {
+    color: resultsTextColor
+  } = (0, _componentsBase.useThemeTokens)('Search', {}, {
+    focus: true
+  }); // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
   // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
   //   prop and the text entered
+
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
   const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
@@ -284,7 +297,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue)),
+          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)),
           noResults: noResults ?? getCopy('noResults'),
           onClose: handleClose,
           onSelect: handleSelect,

package/lib/Ribbon/Ribbon.js

@@ -156,7 +156,11 @@ const Ribbon = _ref18 => {
     gradient,
     fontColor,
     borderRadiusBottomLeft,
-    borderRadiusBottomRight
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
   } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, { ...variant,
     wrap: shouldWrap
   });
@@ -187,12 +191,15 @@ const Ribbon = _ref18 => {
       borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
-          size: 'micro',
           bold: true,
           inverse: true
         },
         tokens: {
-          color: fontColor
+          color: fontColor,
+          fontName,
+          fontWeight,
+          fontSize,
+          lineHeight
         },
         children: children
       })

package/lib-module/Autocomplete/Autocomplete.js

@@ -2,7 +2,7 @@
 import React, { forwardRef, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
-import { InputSupports, inputSupportsProps, selectSystemProps, TextInput, textInputProps, textInputHandlerProps, Typography, useCopy, useSafeLayoutEffect } from '@telus-uds/components-base';
+import { InputSupports, inputSupportsProps, selectSystemProps, TextInput, textInputProps, textInputHandlerProps, Typography, useCopy, useSafeLayoutEffect, useThemeTokens } from '@telus-uds/components-base';
 import Listbox from '../Listbox';
 import { htmlAttrs, useOverlaidPosition } from '../utils';
 import Loading from './Loading';
@@ -18,6 +18,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inp
 const highlightAllMatches = function (str) {
   let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let resultsTextColor = arguments.length > 3 ? arguments[3] : undefined;
   return (
     /*#__PURE__*/
     // Wrapping all in bold
@@ -25,6 +26,9 @@ const highlightAllMatches = function (str) {
       variant: {
         bold: false
       },
+      tokens: {
+        color: resultsTextColor
+      },
       children: matchIndexes.reduce((acc, matchIndex, index) => [...acc, // Add a piece of the string up to the first occurrence of the substring
       index === 0 && (str.slice(0, matchIndex) ?? ''),
       /*#__PURE__*/
@@ -33,6 +37,9 @@ const highlightAllMatches = function (str) {
         variant: {
           bold: true
         },
+        tokens: {
+          color: resultsTextColor
+        },
         children: str.slice(matchIndex, matchIndex + substring.length)
       }, matchIndex), // Add the rest of the string until the next occurrence or the end of it
       str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
@@ -43,6 +50,7 @@ const highlightAllMatches = function (str) {
 const highlight = function () {
   let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let color = arguments.length > 2 ? arguments[2] : undefined;
   return items.reduce((acc, item) => {
     var _Array$from;
 
@@ -55,7 +63,7 @@ const highlight = function () {
 
     if (matches !== null && matches !== void 0 && matches.length) {
       return [...acc, { ...item,
-        label: highlightAllMatches(item.label, text, matches)
+        label: highlightAllMatches(item.label, text, matches, color)
       }];
     }
 
@@ -85,11 +93,16 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     value,
     ...rest
   } = _ref2;
-  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
+  const {
+    color: resultsTextColor
+  } = useThemeTokens('Search', {}, {
+    focus: true
+  }); // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
   // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
   //   prop and the text entered
+
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
   const [currentItems, setCurrentItems] = useState(initialItems); // We need to store the current value as well to be able to highlight it
@@ -262,7 +275,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
         }) : /*#__PURE__*/_jsx(Suggestions, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue)),
+          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)),
           noResults: noResults ?? getCopy('noResults'),
           onClose: handleClose,
           onSelect: handleSelect,

package/lib-module/Ribbon/Ribbon.js

@@ -139,7 +139,11 @@ const Ribbon = _ref18 => {
     gradient,
     fontColor,
     borderRadiusBottomLeft,
-    borderRadiusBottomRight
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
   } = useThemeTokens('Ribbon', tokens, { ...variant,
     wrap: shouldWrap
   });
@@ -170,12 +174,15 @@ const Ribbon = _ref18 => {
       borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
-          size: 'micro',
           bold: true,
           inverse: true
         },
         tokens: {
-          color: fontColor
+          color: fontColor,
+          fontName,
+          fontWeight,
+          fontSize,
+          lineHeight
         },
         children: children
       })

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.56.0",
+    "@telus-uds/components-base": "1.57.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.39.0",
+    "@telus-uds/system-theme-tokens": "^2.40.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.15.0"
+  "version": "2.16.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -11,7 +11,8 @@ import {
   textInputHandlerProps,
   Typography,
   useCopy,
-  useSafeLayoutEffect
+  useSafeLayoutEffect,
+  useThemeTokens
 } from '@telus-uds/components-base'
 import Listbox from '../Listbox'
 import { htmlAttrs, useOverlaidPosition } from '../utils'
@@ -34,16 +35,16 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 
 // Returns JSX to display a bold string `str` with unbolded occurrences of the
 // `substring` based in the array of `matchIndexes` provided
-const highlightAllMatches = (str, substring = '', matchIndexes = []) => (
+const highlightAllMatches = (str, substring = '', matchIndexes = [], resultsTextColor) => (
   // Wrapping all in bold
-  <Typography variant={{ bold: false }}>
+  <Typography variant={{ bold: false }} tokens={{ color: resultsTextColor }}>
     {matchIndexes.reduce(
       (acc, matchIndex, index) => [
         ...acc,
         // Add a piece of the string up to the first occurrence of the substring
         index === 0 && (str.slice(0, matchIndex) ?? ''),
         // Unbold the occurrence of the substring (while keeping the original casing)
-        <Typography key={matchIndex} variant={{ bold: true }}>
+        <Typography key={matchIndex} variant={{ bold: true }} tokens={{ color: resultsTextColor }}>
           {str.slice(matchIndex, matchIndex + substring.length)}
         </Typography>,
         // Add the rest of the string until the next occurrence or the end of it
@@ -53,14 +54,14 @@ const highlightAllMatches = (str, substring = '', matchIndexes = []) => (
     )}
   </Typography>
 )
-const highlight = (items = [], text = '') =>
+const highlight = (items = [], text = '', color) =>
   items.reduce((acc, item) => {
     const matches = Array.from(item.label.toLowerCase().matchAll(text.toLowerCase()))?.map(
       ({ index }) => index
     )
 
     if (matches?.length) {
-      return [...acc, { ...item, label: highlightAllMatches(item.label, text, matches) }]
+      return [...acc, { ...item, label: highlightAllMatches(item.label, text, matches, color) }]
     }
 
     return [...acc, item]
@@ -89,6 +90,7 @@ const Autocomplete = forwardRef(
     },
     ref
   ) => {
+    const { color: resultsTextColor } = useThemeTokens('Search', {}, { focus: true })
     // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
     // but we also need to adjust suggestions based on the mode:
     // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
@@ -254,7 +256,7 @@ const Autocomplete = forwardRef(
                   hasResults={getCopy('hasResults')}
                   id="autocomplete"
                   items={itemsToSuggest(
-                    highlight(isControlled ? items : currentItems, currentValue)
+                    highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)
                   )}
                   noResults={noResults ?? getCopy('noResults')}
                   onClose={handleClose}

package/src/Ribbon/Ribbon.jsx

@@ -76,7 +76,11 @@ const Ribbon = ({
     gradient,
     fontColor,
     borderRadiusBottomLeft,
-    borderRadiusBottomRight
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
   } = useThemeTokens('Ribbon', tokens, { ...variant, wrap: shouldWrap })
 
   let background = backgroundColor
@@ -97,8 +101,14 @@ const Ribbon = ({
         borderRadiusBottomRight={`${borderRadiusBottomRight}px`}
       >
         <Typography
-          variant={{ size: 'micro', bold: true, inverse: true }}
-          tokens={{ color: fontColor }}
+          variant={{ bold: true, inverse: true }}
+          tokens={{
+            color: fontColor,
+            fontName,
+            fontWeight,
+            fontSize,
+            lineHeight
+          }}
         >
           {children}
         </Typography>