@telus-uds/components-web 1.7.0 → 1.8.0

package/.eslintignore

@@ -0,0 +1,2 @@
+__fixtures__
+git

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#2C3007",
+    "titleBar.activeBackground": "#3D440A",
+    "titleBar.activeForeground": "#F9FBE6"
+  }
+}

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 20 Apr 2023 19:05:54 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Apr 2023 21:33:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.8.0
+
+Mon, 24 Apr 2023 21:33:59 GMT
+
+### Minor changes
+
+- move 'IconButton' to components-web (kyle.king2@telus.com)
+- makes listbox component to multibrand (mauricio.batresmontejo@telus.com)
+- move blockquote to components web (evander.owusu@telus.com)
+- Bump @telus-uds/components-base to v1.37.0
+- Bump @telus-uds/system-theme-tokens to v2.22.0
+
 ## 1.7.0
 
-Thu, 20 Apr 2023 19:05:54 GMT
+Thu, 20 Apr 2023 19:13:33 GMT
 
 ### Minor changes
 

package/lib/BlockQuote/BlockQuote.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const BlockQuoteContainer = /*#__PURE__*/_styledComponents.default.blockquote.withConfig({
+  displayName: "BlockQuote__BlockQuoteContainer",
+  componentId: "components-web__sc-vals3u-0"
+})(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
+  let {
+    paddingLeft
+  } = _ref;
+  return `${paddingLeft}px`;
+}, _ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
+  return `${paddingRight}px`;
+}, _ref3 => {
+  let {
+    paddingBottom
+  } = _ref3;
+  return `${paddingBottom}px`;
+}, _ref4 => {
+  let {
+    paddingTop
+  } = _ref4;
+  return `${paddingTop}px`;
+}, _ref5 => {
+  let {
+    width
+  } = _ref5;
+  return `${width}px`;
+}, _ref6 => {
+  let {
+    backgroundGradient
+  } = _ref6;
+  return backgroundGradient && (0, _utils.transformGradient)(backgroundGradient);
+});
+
+const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "BlockQuote__QuoteContainer",
+  componentId: "components-web__sc-vals3u-1"
+})(["margin-bottom:", ";"], _ref7 => {
+  let {
+    marginBottom
+  } = _ref7;
+  return `${marginBottom}px`;
+});
+
+const BlockQuote = _ref8 => {
+  let {
+    children,
+    link,
+    additionalInfo,
+    linkHref,
+    textStyle = 'large',
+    LinkRouter,
+    linkRouterProps,
+    tokens,
+    variant,
+    ...rest
+  } = _ref8;
+  const {
+    color,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginBottom,
+    width,
+    backgroundGradient
+  } = (0, _componentsBase.useThemeTokens)('BlockQuote', tokens, variant);
+  const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+
+  const renderLink = () => {
+    if (linkHref) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, {
+        href: linkHref,
+        tokens: {
+          blockFontWeight: '500',
+          color
+        },
+        variant: {
+          alternative: true
+        },
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
+        children: link
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        color,
+        fontWeight: '500'
+      },
+      children: link
+    });
+  };
+
+  const renderQuote = () => {
+    const quote = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        color,
+        fontWeight: '400'
+      },
+      variant: {
+        size: mappedTextSize
+      },
+      children: children
+    });
+
+    if (additionalInfo || link) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(QuoteContainer, {
+        marginBottom: marginBottom,
+        children: quote
+      });
+    }
+
+    return quote;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BlockQuoteContainer, { ...selectProps(rest),
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
+    width: width,
+    backgroundGradient: backgroundGradient,
+    children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 0,
+      children: [link && renderLink(), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        tokens: {
+          color
+        },
+        variant: {
+          size: 'small'
+        },
+        children: additionalInfo
+      })]
+    })]
+  });
+};
+
+BlockQuote.propTypes = { ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+  children: _propTypes.default.node.isRequired,
+  link: _propTypes.default.string,
+  linkHref: _propTypes.default.string,
+  additionalInfo: _propTypes.default.string,
+  textStyle: _propTypes.default.oneOf(['large', 'heading'])
+};
+var _default = BlockQuote;
+exports.default = _default;

package/lib/BlockQuote/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BlockQuote = _interopRequireDefault(require("./BlockQuote"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _BlockQuote.default;
+exports.default = _default;

package/lib/IconButton/IconButton.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    icon,
+    action,
+    tokens,
+    variant = {},
+    ...iconButtonProps
+  } = _ref;
+  const variantWithAction = action && !variant.action ? { ...variant,
+    action
+  } : variant;
+  const {
+    icon: themeIcon
+  } = (0, _componentsBase.useThemeTokens)('IconButton', tokens, variantWithAction);
+  return (
+    /*#__PURE__*/
+    // If we want the arrow icons to have directional animation instead of scale, we can pass
+    // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
+    // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
+    (0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+      ref: ref,
+      ...iconButtonProps,
+      tokens: tokens,
+      variant: variant,
+      icon: icon ?? themeIcon
+    })
+  );
+});
+const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
+IconButton.displayName = 'IconButton';
+
+const propsWithoutIcon = _ref2 => {
+  let {
+    icon,
+    ...props
+  } = _ref2;
+  return props;
+};
+
+IconButton.propTypes = { ...propsWithoutIcon(_componentsBase.IconButton.propTypes),
+  // eslint-disable-next-line react/require-default-props
+  action: _propTypes.default.oneOf(multiBrandIconNames),
+  icon: _propTypes.default.func
+};
+IconButton.defaultProps = {
+  icon: null
+};
+var _default = IconButton;
+exports.default = _default;

package/lib/IconButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _IconButton.default;
+exports.default = _default;

package/lib/Listbox/GroupControl.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledControlWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "GroupControl__StyledControlWrapper",
+  componentId: "components-web__sc-1r7ts3q-0"
+})(_ref => {
+  let {
+    focus,
+    tokens
+  } = _ref;
+  return {
+    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+    fontSize: tokens.groupFontSize,
+    color: tokens.groupColor,
+    textDecoration: tokens.itemTextDecoration,
+    backgroundColor: tokens.groupBackgroundColor,
+    outline: tokens.itemOutline,
+    width: '100%',
+    display: 'flex',
+    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
+    })
+  };
+});
+
+const GroupControl = _ref2 => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    current,
+    label
+  } = _ref2;
+  const tokens = (0, _componentsBase.useThemeTokens)('ListBox', {}, {}, {
+    expanded,
+    pressed,
+    hover,
+    current,
+    focus
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlWrapper, {
+    focus,
+    tokens,
+    children: [label, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+      icon: tokens.groupIcon,
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+};
+
+GroupControl.propTypes = {
+  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;
+exports.default = _default;

package/lib/Listbox/Listbox.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _ListboxGroup = _interopRequireDefault(require("./ListboxGroup"));
+
+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 }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const StyledList = /*#__PURE__*/_styledComponents.default.ul.withConfig({
+  displayName: "Listbox__StyledList",
+  componentId: "components-web__sc-1564thh-0"
+})({
+  margin: 0,
+  padding: 0,
+  listStyle: 'none'
+});
+
+const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
+
+const Listbox = _ref => {
+  let {
+    items = [],
+    firstItemRef = null,
+    // focus will be moved to this one once within the menu
+    parentRef = null,
+    // to return focus to after leaving the last menu item
+    selectedId,
+    LinkRouter,
+    itemRouterProps,
+    onClose
+  } = _ref;
+  const initialOpen = getInitialOpen(items, selectedId); // 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)([]);
+  if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const handleKeydown = (0, _react.useCallback)(event => {
+    const nextItemRef = itemRefs.current[focusedIndex + 1];
+    const prevItemRef = itemRefs.current[focusedIndex - 1];
+
+    if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
+      var _parentRef$current;
+
+      // Move the focus to the previous item or to the parent one if on the first
+      if (prevItemRef) {
+        event.preventDefault();
+        prevItemRef.focus();
+      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.focus();
+
+      setFocusedIndex(focusedIndex - 1);
+    } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
+      event.preventDefault();
+      setFocusedIndex(focusedIndex + 1);
+      nextItemRef.focus();
+    } else if (event.key === 'Escape') {
+      var _parentRef$current2, _parentRef$current3;
+
+      // Close the dropdown
+      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 ? void 0 : _parentRef$current2.click(); // Return focus to the dropdown control after leaving the last item
+
+      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
+      if (onClose) onClose(event);
+    }
+  }, [focusedIndex, onClose, parentRef]); // Add listeners for mouse clicks outside and for key presses
+
+  (0, _react.useEffect)(() => {
+    window.addEventListener('click', onClose);
+    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('touchstart', onClose);
+    return () => {
+      window.removeEventListener('click', onClose);
+      window.removeEventListener('keydown', handleKeydown);
+      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
+        });
+      })
+    })
+  });
+};
+
+Listbox.propTypes = { ..._componentsBase.withLinkRouter.propTypes,
+
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: _propTypes.default.object,
+
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: _propTypes.default.object,
+  items: _propTypes.default.array,
+  selectedId: _propTypes.default.string
+};
+Listbox.Overlay = _ListboxOverlay.default;
+var _default = Listbox;
+exports.default = _default;