@telus-uds/components-web 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 20 Jun 2023 16:00:54 GMT and should not be manually modified.
+This log was last generated on Wed, 28 Jun 2023 23:16:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.12.0
+
+Wed, 28 Jun 2023 23:16:56 GMT
+
+### Minor changes
+
+- Fixed an issue where FootnoteLink had a default property value which was being applied as 'smallerpx' instead of the intended 'smaller' (kyle.king2@telus.com)
+- Gradient token added to Card component (35577399+JoshHC@users.noreply.github.com)
+- added function to select link tokens from themeTokens (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.53.0
+- Bump @telus-uds/system-theme-tokens to v2.36.0
+
+### Patches
+
+- May not be able to focus `ChevronLink` for `theme-allium` (shahzaibkhalidmalik@outlook.com)
+
+## 2.11.0
+
+Wed, 21 Jun 2023 20:40:42 GMT
+
+### Minor changes
+
+- Adjusted component implementations for 'Video' components to allow for custom height, playing appearance state and custom fontWeight for SplashButtonWithDetails (kyle.king2@telus.com)
+- Standardized Listbox (wlsdud194@hotmail.com)
+- Bump @telus-uds/components-base to v1.52.0
+- Bump @telus-uds/system-theme-tokens to v2.35.0
+
+### Patches
+
+- Fixes where `frame` mode in `VideoPicker` is used, render short video titles for `md` viewport. (shahzaibkhalidmalik@outlook.com)
+
 ## 2.10.0
 
-Tue, 20 Jun 2023 16:00:54 GMT
+Tue, 20 Jun 2023 16:09:24 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -522,6 +522,7 @@
               "flex": "integer",
               "backgroundColor": "color",
               "borderColor": "color",
+              "gradient": "gradient",
               "borderRadius": "radius",
               "borderWidth": "border",
               "paddingBottom": "size",
@@ -793,6 +794,17 @@
           "required": false,
           "description": "Use to visually mark an input as valid or invalid."
         },
+        "disabled": {
+          "defaultValue": {
+            "value": "false",
+            "computed": false
+          },
+          "type": {
+            "name": "bool"
+          },
+          "required": false,
+          "description": "Disable the input which will not open the calendar picker"
+        },
         "id": {
           "type": {
             "name": "string"
@@ -1056,11 +1068,14 @@
             },
             "required": false
           },
-          "fontSize": {
-            "defaultValue": {
-              "value": "'smaller'",
-              "computed": false
+          "onClick": {
+            "type": {
+              "name": "func"
             },
+            "required": true,
+            "description": "A callback function to handle the click of a FootnoteLink."
+          },
+          "fontSize": {
             "type": {
               "name": "union",
               "value": [
@@ -1074,13 +1089,6 @@
             },
             "required": false,
             "description": "Override default `fontSize` to set specific font size value"
-          },
-          "onClick": {
-            "type": {
-              "name": "func"
-            },
-            "required": true,
-            "description": "A callback function to handle the click of a FootnoteLink."
           }
         },
         "attributes": {}
@@ -2351,6 +2359,55 @@
           },
           "required": false,
           "description": "To provide a11y text for `PriceLockup` component\n\n**Note:** a11yText will override strikethrough price, so it must include price (ie. \"was 50 dollars per month\")"
+        },
+        "tokens": {
+          "type": {
+            "name": "custom",
+            "raw": {
+              "fontName": "fontName",
+              "fontWeight": "fontWeight",
+              "footnoteMarginTop": "size",
+              "footnoteGap": "size",
+              "bottomTextMarginTop": "size",
+              "priceMarginBottom": "size",
+              "bottomLinksMarginLeft": "size",
+              "topTextMarginBottom": "size",
+              "strikeThroughHeight": "size",
+              "strikeThroughColor": "color",
+              "fontColor": "color",
+              "dividerColor": "color",
+              "topTextFontSize": "fontSize",
+              "strikeThroughPosition": "size",
+              "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"
+            }
+          },
+          "required": false,
+          "description": "`PriceLockup` tokens"
         }
       },
       "attributes": {}
@@ -9107,6 +9164,7 @@
               "flex": "integer",
               "backgroundColor": "color",
               "borderColor": "color",
+              "gradient": "gradient",
               "borderRadius": "radius",
               "borderWidth": "border",
               "paddingBottom": "size",
@@ -12632,6 +12690,7 @@
               "dotWidth": "size",
               "dotBorderWidth": "border",
               "timelineContainerDirection": "direction",
+              "timelineConnectorColor": "color",
               "timelineColor": "color",
               "connectorWidth": "size",
               "connectorHeight": "size",
@@ -12730,7 +12789,10 @@
               "paddingBottom": "size",
               "shadow": "shadow",
               "alignSelf": "flexAlign",
+              "space": "integer",
               "icon": "icon",
+              "trackHeight": "size",
+              "outerBorderGapButton": "size",
               "width": "size",
               "trackBorderWidth": "border",
               "trackBorderColor": "color",
@@ -13056,7 +13118,10 @@
               "paddingBottom": "size",
               "shadow": "shadow",
               "alignSelf": "flexAlign",
+              "space": "integer",
               "icon": "icon",
+              "trackHeight": "size",
+              "outerBorderGapButton": "size",
               "width": "size",
               "trackBorderWidth": "border",
               "trackBorderColor": "color",

package/lib/BlockQuote/BlockQuote.js

@@ -140,7 +140,10 @@ const BlockQuote = _ref8 => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
         color,
-        fontWeight: '500'
+        fontName: linkFontName,
+        fontSize: linkFontSize,
+        fontWeight: linkFontWeight,
+        lineHeight: linkLineHeight
       },
       children: link
     });

package/lib/Card/Card.js

@@ -30,6 +30,7 @@ const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,
@@ -38,6 +39,7 @@ const selectCardBaseTokens = _ref => {
   return {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,

package/lib/DatePicker/DatePicker.js

@@ -125,6 +125,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     variant = {},
     validation,
+    disabled,
     ...rest
   } = _ref;
   const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
@@ -149,21 +150,23 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   const handleFocus = event => {
-    if (event.target.tagName === 'INPUT') {
+    if (event.target.tagName === 'INPUT' && !disabled) {
       setIsFocused(true);
     }
   };
 
   const handleMouseDown = event => {
-    if (event.target.tagName === 'INPUT') {
-      setIsClickedInside(true);
-      setIsFocused(true);
-    } else if (event.target.tagName === 'path') {
-      // needed to handle the case where the user clicks on the tooltip icon
-      setIsClickedInside(true);
-      event.stopPropagation();
-    } else {
-      event.stopPropagation();
+    if (!disabled) {
+      if (event.target.tagName === 'INPUT') {
+        setIsClickedInside(true);
+        setIsFocused(true);
+      } else if (event.target.tagName === 'path') {
+        // needed to handle the case where the user clicks on the tooltip icon
+        setIsClickedInside(true);
+        event.stopPropagation();
+      } else {
+        event.stopPropagation();
+      }
     }
   };
 
@@ -308,8 +311,10 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
         value: inputText,
         validation: validation,
+        inactive: disabled,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
           date: inputDate,
+          disabled: disabled,
           onDateChange: onChange,
           focused: isFocused,
           onFocusChange: onFocusChange,
@@ -406,7 +411,12 @@ DatePicker.propTypes = { ...selectedSystemPropTypes,
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: _propTypes.default.oneOf(['error', 'success'])
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * Disable the input which will not open the calendar picker
+   */
+  disabled: _propTypes.default.bool
 };
 DatePicker.defaultProps = {
   copy: 'en',
@@ -419,7 +429,8 @@ DatePicker.defaultProps = {
   hintPosition: 'inline',
   tooltip: undefined,
   onDateChange: () => {},
-  validation: undefined
+  validation: undefined,
+  disabled: false
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -28,12 +28,6 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const {
-    variant
-  } = rest;
-  const {
-    borderWidth
-  } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMini', tokens, variant);
 
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
@@ -43,9 +37,6 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
-    tokens: {
-      borderWidth
-    },
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -53,7 +44,11 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         mini: true
       },
       controlTokens: {
-        icon: null
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -29,7 +29,22 @@ const presentationOnly = {
 
 };
 
-const ExpandCollapseMiniControl = _ref => {
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+
+const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
     collapseTitle,
@@ -38,16 +53,25 @@ const ExpandCollapseMiniControl = _ref => {
     tokens,
     variant = {},
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     expanded,
-    hover
-  } = pressableState || {};
+    hover,
+    focus
+  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
+
+  const {
+    outerBorderColor
+  } = (0, _componentsBase.useThemeTokens)('Link', {}, {}, {
+    focus
+  });
   const {
     size,
-    icon
+    icon,
+    ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
-    expanded
+    expanded,
+    focus
   }); // Choose hover styles when any part of Control is hoverred
 
   const appearance = { ...variant,
@@ -75,7 +99,8 @@ const ExpandCollapseMiniControl = _ref => {
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({ ...getTokens(linkState),
-      outerBorderWidth: 0
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
     }),
     ...presentationOnly,
     ...selectProps(rest),

package/lib/Footnote/FootnoteLink.js

@@ -140,8 +140,7 @@ FootnoteLink.propTypes = { ...selectedSystemPropTypes,
   fontSize: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
 };
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 };
 var _default = FootnoteLink;
 exports.default = _default;

package/lib/Listbox/GroupControl.js

@@ -22,32 +22,41 @@ const StyledControlWrapper = /*#__PURE__*/_styledComponents.default.div.withConf
   componentId: "components-web__sc-1r7ts3q-0"
 })(_ref => {
   let {
-    focus,
-    tokens
+    groupFontName,
+    groupFontWeight,
+    groupFontSize,
+    groupColor,
+    groupBackgroundColor,
+    groupBorderColor,
+    groupBorderWidth,
+    groupBorderRadius,
+    groupPaddingLeft,
+    groupPaddingRight,
+    groupPaddingTop,
+    groupPaddingBottom,
+    itemTextDecoration,
+    itemOutline,
+    groupHeight
   } = _ref;
   return {
-    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-    fontSize: tokens.groupFontSize,
-    color: tokens.groupColor,
-    textDecoration: tokens.itemTextDecoration,
-    backgroundColor: tokens.groupBackgroundColor,
-    outline: tokens.itemOutline,
+    fontFamily: `${groupFontName}${groupFontWeight}normal`,
+    fontSize: groupFontSize,
+    color: groupColor,
+    textDecoration: itemTextDecoration,
+    backgroundColor: groupBackgroundColor,
+    outline: itemOutline,
     width: '100%',
+    height: groupHeight,
     display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
-    ...(focus ? {
-      border: `${tokens.groupBorderWidth} solid ${tokens.groupBorderColor}`,
-      borderRadius: tokens.groupBorderRadius,
-      paddingLeft: `calc(${tokens.groupPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-      paddingRight: `calc(${tokens.groupPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-      paddingTop: `calc(${tokens.groupPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-      paddingBottom: `calc(${tokens.groupPaddingBottom}px - ${tokens.groupBorderWidth}px)`
-    } : {
-      paddingLeft: tokens.groupPaddingLeft,
-      paddingRight: tokens.groupPaddingRight,
-      paddingTop: tokens.groupPaddingTop,
-      paddingBottom: tokens.groupPaddingBottom
-    })
+    boxSizing: 'border-box',
+    border: `${groupBorderWidth}px solid ${groupBorderColor}`,
+    borderRadius: groupBorderRadius,
+    paddingLeft: groupPaddingLeft - groupBorderWidth,
+    paddingRight: groupPaddingRight - groupBorderWidth,
+    paddingTop: groupPaddingTop - groupBorderWidth,
+    paddingBottom: groupPaddingBottom - groupBorderWidth
   };
 });
 
@@ -57,24 +66,31 @@ const GroupControl = _ref2 => {
     pressed,
     hover,
     focus,
-    current,
-    label
+    label,
+    id
   } = _ref2;
-  const tokens = (0, _componentsBase.useThemeTokens)('ListBox', {}, {}, {
+  const {
+    selectedId,
+    setSelectedId
+  } = (0, _componentsBase.useListboxContext)();
+  const tokens = (0, _componentsBase.useThemeTokens)('Listbox', {}, {}, {
     expanded,
     pressed,
     hover,
-    current,
+    current: selectedId === id && id !== undefined,
     focus
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlWrapper, {
-    focus,
-    tokens,
+    onClick: () => setSelectedId(id),
+    ...tokens,
     children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
       space: 1,
       direction: "row"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
       icon: tokens.groupIcon,
+      tokens: {
+        color: tokens.groupColor
+      },
       variant: {
         size: 'micro'
       }
@@ -83,11 +99,11 @@ const GroupControl = _ref2 => {
 };
 
 GroupControl.propTypes = {
+  id: _propTypes.default.string,
   expanded: _propTypes.default.bool,
   pressed: _propTypes.default.bool,
   hover: _propTypes.default.bool,
   focus: _propTypes.default.bool,
-  current: _propTypes.default.bool,
   label: _propTypes.default.string
 };
 var _default = GroupControl;

package/lib/Listbox/Listbox.js

@@ -19,8 +19,6 @@ var _ListboxItem = _interopRequireDefault(require("./ListboxItem"));
 
 var _ListboxOverlay = _interopRequireDefault(require("./ListboxOverlay"));
 
-var _resolveItemSelection = _interopRequireDefault(require("../NavigationBar/resolveItemSelection"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,12 +45,19 @@ const Listbox = _ref => {
     // focus will be moved to this one once within the menu
     parentRef = null,
     // to return focus to after leaving the last menu item
-    selectedId,
+    selectedId: defaultSelectedId,
     LinkRouter,
     itemRouterProps,
-    onClose
+    onClose,
+    variant,
+    tokens
   } = _ref;
-  const initialOpen = getInitialOpen(items, selectedId); // We need to keep track of each item's ref in order to be able to
+  const initialOpen = getInitialOpen(items, defaultSelectedId);
+  const [selectedId, setSelectedId] = (0, _react.useState)(defaultSelectedId);
+  const {
+    minHeight,
+    minWidth
+  } = (0, _componentsBase.useThemeTokens)('Listbox', variant, tokens); // We need to keep track of each item's ref in order to be able to
   // focus on a specific item via keyboard navigation
 
   const itemRefs = (0, _react.useRef)([]);
@@ -97,48 +102,50 @@ const Listbox = _ref => {
       window.removeEventListener('touchstart', onClose);
     };
   }, [onClose, handleKeydown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
-    initialOpen: initialOpen,
-    maxOpen: 1,
-    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
-      role: "listbox",
-      children: items.map((item, index) => {
-        const {
-          id,
-          label,
-          items: nestedItems
-        } = item;
-        const {
-          itemId,
-          selected
-        } = (0, _resolveItemSelection.default)({
-          id,
-          label,
-          items: nestedItems
-        }, selectedId); // Give `firstItemRef` to the first focusable item
-
-        const itemRef = index === 0 && !itemId !== selectedId || index === 1 && items[0].id === selectedId ? firstItemRef : ref => {
-          itemRefs.current[index] = ref;
-          return ref;
-        };
-        return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, { ...item,
-          selectedId: selectedId,
-          key: itemId,
-          expandProps: expandProps,
-          LinkRouter: LinkRouter,
-          itemRouterProps: itemRouterProps,
-          prevItemRef: itemRefs.current[index - 1] ?? null,
-          nextItemRef: itemRefs.current[index + 1] ?? null,
-          ref: itemRef
-        }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, { ...item,
-          selected: selected,
-          key: itemId,
-          LinkRouter: LinkRouter,
-          itemRouterProps: itemRouterProps,
-          prevItemRef: itemRefs.current[index - 1] ?? null,
-          nextItemRef: itemRefs.current[index + 1] ?? null,
-          ref: itemRef
-        });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ListboxContext.Provider, {
+    value: {
+      selectedId,
+      setSelectedId
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
+      initialOpen: initialOpen,
+      maxOpen: 1,
+      children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
+        role: "listbox",
+        style: {
+          minHeight,
+          minWidth
+        },
+        children: items.map((item, index) => {
+          const {
+            id,
+            label,
+            items: nestedItems
+          } = item;
+          const itemId = id ?? label; // Give `firstItemRef` to the first focusable item
+
+          const itemRef = index === 0 && !itemId !== selectedId || index === 1 && items[0].id === selectedId ? firstItemRef : ref => {
+            itemRefs.current[index] = ref;
+            return ref;
+          };
+          return nestedItems ? /*#__PURE__*/(0, _react.createElement)(_ListboxGroup.default, { ...item,
+            expandProps: expandProps,
+            LinkRouter: LinkRouter,
+            itemRouterProps: itemRouterProps,
+            prevItemRef: itemRefs.current[index - 1] ?? null,
+            nextItemRef: itemRefs.current[index + 1] ?? null,
+            ref: itemRef,
+            key: itemId
+          }) : /*#__PURE__*/(0, _react.createElement)(_ListboxItem.default, { ...item,
+            key: itemId,
+            id: itemId,
+            LinkRouter: LinkRouter,
+            itemRouterProps: itemRouterProps,
+            prevItemRef: itemRefs.current[index - 1] ?? null,
+            nextItemRef: itemRefs.current[index + 1] ?? null,
+            ref: itemRef
+          });
+        })
       })
     })
   });