@telus-uds/components-web 2.9.0 → 2.11.0

package/lib/BlockQuote/BlockQuote.js

@@ -79,6 +79,7 @@ const BlockQuote = _ref8 => {
     variant,
     ...rest
   } = _ref8;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     color,
     paddingTop,
@@ -87,16 +88,44 @@ const BlockQuote = _ref8 => {
     paddingRight,
     marginBottom,
     width,
-    backgroundGradient
-  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant);
+    backgroundGradient,
+    titleHeadingFontSize,
+    titleHeadingFontName,
+    titleHeadingFontWeight,
+    titleHeadingLineHeight,
+    titleFontSize,
+    titleFontName,
+    titleFontWeight,
+    titleLineHeight,
+    linkFontSize,
+    linkFontName,
+    linkFontWeight,
+    linkLineHeight
+  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant, {
+    viewport
+  });
   const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+  const titleTokens = textStyle === 'heading' ? {
+    fontSize: titleHeadingFontSize,
+    fontName: titleHeadingFontName,
+    fontWeight: titleHeadingFontWeight,
+    lineHeight: titleHeadingLineHeight
+  } : {
+    fontSize: titleFontSize,
+    fontName: titleFontName,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight
+  };
 
   const renderLink = () => {
     if (linkHref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
         href: linkHref,
         tokens: {
-          blockFontWeight: '500',
+          blockFontSize: linkFontSize,
+          blockFontName: linkFontName,
+          blockFontWeight: linkFontWeight,
+          blockLineHeight: linkLineHeight,
           color
         },
         variant: {
@@ -111,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
     });
@@ -121,7 +153,7 @@ const BlockQuote = _ref8 => {
     const quote = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
         color,
-        fontWeight: '400'
+        ...titleTokens
       },
       variant: {
         size: mappedTextSize
@@ -164,9 +196,25 @@ const BlockQuote = _ref8 => {
 BlockQuote.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.withLinkRouter.propTypes,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * External source's identifier (e.g. author's name)
+   */
   link: _propTypes.default.string,
+
+  /**
+   * External source's URL
+   */
   linkHref: _propTypes.default.string,
+
+  /**
+   * To provide additional information about the source, rendered underneath `link`
+   */
   additionalInfo: _propTypes.default.string,
+
+  /**
+   * Whether to render BlockQuote as a heading size of `h3` or large text size
+   */
   textStyle: _propTypes.default.oneOf(['large', 'heading'])
 };
 var _default = BlockQuote;

package/lib/Callout/Callout.js

@@ -136,9 +136,21 @@ const Callout = _ref2 => {
 };
 
 Callout.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Icon to display on the left side of the Callout
+   */
   icon: _propTypes.default.elementType,
   children: _propTypes.default.node.isRequired,
+
+  /**
+   * To change the horizontal alignment of the Callout's text
+   */
   textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
+
+  /**
+   * To change the vertical alignment of the Callout's icon
+   */
   verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
 };
 var _default = Callout;

package/lib/DatePicker/CalendarContainer.js

@@ -173,6 +173,30 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   }
 }
 
+.CalendarDay
+.CalendarDay__default
+.CalendarDay__selected
+.CalendarDay__blocked_out_of_range{
+  background: ${remainingTokens.calendarDaySelectedDisabledBackground};
+  color: ${remainingTokens.calendarDaySelectedDisabledColor};
+  text-decoration: none;
+  z-index: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: ${calendarDayDefaultHeight}px;
+    border: 1px solid ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    width: ${calendarDayDefaultWidth}px;
+    border-radius: 50%;
+    background: ${remainingTokens.calendarDaySelectedDisabledContentBackgroundColor};
+    transition: all 0.3s;
+    z-index: -1;
+  }
+}
+
   .CalendarDay__blocked_out_of_range,
   .CalendarDay__blocked_out_of_range:active,
   .CalendarDay__blocked_out_of_range:hover,

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);
@@ -148,16 +149,24 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     setIsClickedInside(false);
   };
 
-  const handleFocus = () => {
-    setIsFocused(true);
+  const handleFocus = event => {
+    if (event.target.tagName === 'INPUT' && !disabled) {
+      setIsFocused(true);
+    }
   };
 
   const handleMouseDown = event => {
-    if (event.target.tagName === 'INPUT') {
-      setIsClickedInside(true);
-      setIsFocused(true);
-    } 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();
+      }
     }
   };
 
@@ -302,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,
@@ -400,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',
@@ -413,7 +429,8 @@ DatePicker.defaultProps = {
   hintPosition: 'inline',
   tooltip: undefined,
   onDateChange: () => {},
-  validation: undefined
+  validation: undefined,
+  disabled: false
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/Disclaimer/Disclaimer.js

@@ -62,10 +62,6 @@ const Disclaimer = _ref2 => {
 };
 
 Disclaimer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The content
-   */
   children: _propTypes.default.node.isRequired
 };
 var _default = Disclaimer;

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -68,6 +68,10 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 });
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = { ..._ExpandCollapseMiniControl.default.propTypes,
+
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
   onToggle: _propTypes.default.func,
   children: _propTypes.default.node.isRequired
 };

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -85,9 +85,25 @@ const ExpandCollapseMiniControl = _ref => {
 
 ExpandCollapseMiniControl.propTypes = { ...selectedSystemPropTypes,
   ..._componentsBase.Link.propTypes,
+
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
   onPress: _propTypes.default.func,
+
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
   expandTitle: _propTypes.default.string.isRequired,
+
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
   collapseTitle: _propTypes.default.string.isRequired,
+
+  /**
+   * React Native's `Pressable`'s state object
+   */
   pressableState: _propTypes.default.object,
   variant: _propTypes.default.object
 };

package/lib/IconButton/IconButton.js

@@ -59,8 +59,16 @@ const propsWithoutIcon = _ref2 => {
 };
 
 IconButton.propTypes = { ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
+
+  /**
+   * To set the icon to a multi-brand compatabile icon
+   */
   // eslint-disable-next-line react/require-default-props
   action: _propTypes.default.oneOf(multiBrandIconNames),
+
+  /**
+   * To set a custom icon
+   */
   icon: _propTypes.default.func
 };
 IconButton.defaultProps = {

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
+          });
+        })
       })
     })
   });
@@ -156,7 +163,15 @@ Listbox.propTypes = { ..._componentsBase.withLinkRouter.propTypes,
    * the last menu item.
    */
   parentRef: _propTypes.default.object,
+
+  /**
+   * `Listbox` items
+   */
   items: _propTypes.default.array,
+
+  /**
+   * To select an item by default
+   */
   selectedId: _propTypes.default.string
 };
 Listbox.Overlay = _ListboxOverlay.default;

package/lib/Listbox/ListboxGroup.js

@@ -55,7 +55,6 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     id,
     label,
     items,
-    selectedId,
     LinkRouter,
     linkRouterProps,
     expandProps,
@@ -63,7 +62,10 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     nextItemRef,
     prevItemRef
   } = _ref;
-  // TODO: implement keyboard navigation via refs for grouped items separately here
+  const {
+    selectedId
+  } = (0, _componentsBase.useListboxContext)(); // TODO: implement keyboard navigation via refs for grouped items separately here
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGroupWrapper, {
     role: "option",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
@@ -73,11 +75,17 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         paddingLeft: 'none',
         paddingRight: 'none',
         paddingTop: 'none',
-        paddingBottom: 'none'
+        paddingBottom: 'none',
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        textLine: 'none',
+        borderWidth: 0
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, { ...controlProps,
+      control: controlProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupControl.default, {
+        id: id ?? label,
+        ...controlProps,
         label: label
       }),
       ...expandProps,
@@ -85,25 +93,33 @@ const ListboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         contentPaddingLeft: 'none',
         contentPaddingRight: 'none',
         contentPaddingTop: 'none',
-        contentPaddingBottom: 'none'
+        contentPaddingBottom: 'none',
+        borderColor: 'transparent',
+        borderRadius: 0,
+        borderWidth: 0,
+        marginBottom: 0
       },
       controlRef: ref,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
-        children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, { ...item,
-          selected: item.id === selectedId,
-          isChild: true,
-          LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps,
-          ...(index === 0 && {
-            prevItemRef
-          }),
-          ...(index === items.length - 1 && {
-            nextItemRef
-          }),
-          ...(index === items.length - 1 && {
-            onBlur: onLastItemBlur
-          })
-        }, item.label))
+        children: items.map((item, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListboxItem.default, {
+            id: item.id ?? item.label,
+            ...item,
+            selected: item.id && item.id === selectedId || item.label && item.label === selectedId,
+            isChild: true,
+            LinkRouter: LinkRouter,
+            linkRouterProps: linkRouterProps,
+            ...(index === 0 && {
+              prevItemRef
+            }),
+            ...(index === items.length - 1 && {
+              nextItemRef
+            }),
+            ...(index === items.length - 1 && {
+              onBlur: onLastItemBlur
+            })
+          }, item.label);
+        })
       })
     })
   });