@telus-uds/components-base 1.19.0 → 1.19.1

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,286 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
+import dictionary from './dictionary';
+import Box from '../Box';
+import { Button, ButtonDropdown } from '../Button';
+import { CheckboxGroup } from '../Checkbox';
+import Divider from '../Divider';
+import FlexGrid from '../FlexGrid';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import { TextButton } from '../Link';
+import ModalOverlay from './ModalOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  Col,
+  Row
+} = FlexGrid;
+
+const selectSubTitleTokens = _ref => {
+  let {
+    subtitleColor
+  } = _ref;
+  return {
+    color: subtitleColor
+  };
+};
+
+const selectDividerToknes = _ref2 => {
+  let {
+    dividerColor,
+    width,
+    decorative = true,
+    weight = 'thin'
+  } = _ref2;
+  return {
+    color: dividerColor,
+    width,
+    decorative,
+    weight
+  };
+};
+
+const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    label,
+    subtitle,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref3;
+  const {
+    currentValues,
+    setValues
+  } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
+  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [checkedIds, setCheckedIds] = useState(currentValues ?? []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
+  } // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = getPressHandlersWithArgs(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(!isOpen);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && /*#__PURE__*/_jsxs(ModalOverlay, {
+      variant: {
+        width: colSize > 1 ? 'size576' : 's'
+      },
+      onClose: () => setIsOpen(false),
+      children: [/*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Spacer, {
+          space: 5
+        }), /*#__PURE__*/_jsx(Row, {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h5'
+            },
+            tokens: selectSubTitleTokens(themeTokens),
+            children: subtitle
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Box, {
+        scroll: true,
+        children: /*#__PURE__*/_jsx(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
+              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/_jsx(Spacer, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/_jsx(Divider, {
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsxs(StackView, {
+          direction: "row",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    })]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * The text for the subtitle
+   */
+  subtitle: PropTypes.string,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: getTokensPropType('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: PropTypes.string
+  })),
+
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: PropTypes.number,
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: PropTypes.string,
+
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: PropTypes.string,
+
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: PropTypes.number
+};
+export default MultiSelectFilter;

package/lib-module/MultiSelectFilter/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};

package/lib-module/MultiSelectFilter/index.js

@@ -0,0 +1,2 @@
+import MultiSelectFilter from './MultiSelectFilter';
+export default MultiSelectFilter;

package/lib-module/Pagination/PageButton.js

@@ -33,8 +33,8 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     key: 'active-item'
   } : {};
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
-  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
   const {
     hrefAttrs,
     rest

package/lib-module/Pagination/Pagination.js

@@ -84,11 +84,9 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   }), ...items.map((_child, itemIndex) => {
-    var _itemProps$LinkRouter;
-
-    const buttonLabel = "".concat(itemIndex + 1);
+    const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = (_itemProps$LinkRouter = itemProps.LinkRouter) !== null && _itemProps$LinkRouter !== void 0 ? _itemProps$LinkRouter : LinkRouter;
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
     const itemLinkRouterProps = { ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
@@ -125,7 +123,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, "page-".concat(index + 1)]).filter(_ref3 => {
+    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
       let [element] = _ref3;
       return element !== null;
     }).map(_ref4 => {

package/lib-module/Pagination/usePagination.js

@@ -14,7 +14,7 @@ function usePagination(_ref) {
   );
 
   const getItemProps = index => {
-    var _items$index$props, _items$index;
+    var _items$index;
 
     const {
       onPress,
@@ -22,7 +22,7 @@ function usePagination(_ref) {
       hrefAttrs,
       variant,
       tokens
-    } = (_items$index$props = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) !== null && _items$index$props !== void 0 ? _items$index$props : {};
+    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
     return {
       onPress,
       href,

package/lib-module/Progress/ProgressBar.js

@@ -21,7 +21,7 @@ const selectBarStyles = (_ref, percentage) => {
     borderRadius,
     outlineWidth,
     outlineColor,
-    width: "".concat(percentage, "%")
+    width: `${percentage}%`
   };
 };
 /**
@@ -82,7 +82,7 @@ const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
       min: 0,
       max: 100,
       now: percentage,
-      text: "".concat(percentage, "%")
+      text: `${percentage}%`
     },
     ...rest
   });
@@ -90,7 +90,7 @@ const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children !== null && children !== void 0 ? children : /*#__PURE__*/_jsx(ProgressBarBackground, {
+    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant
     })
   }) : null;

package/lib-module/Progress/ProgressBarBackground.js

@@ -3,8 +3,8 @@ import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const inactiveBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E";
-const negativeBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E";
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
 const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant
@@ -22,7 +22,7 @@ const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsx(ImageBackground, {
     ref: ref,
     source: {
-      uri: "data:image/svg+xml,".concat(source)
+      uri: `data:image/svg+xml,${source}`
     },
     style: staticStyles.imageBackground
   });

package/lib-module/QuickLinksFeature/QuickLinksFeature.js

@@ -0,0 +1,69 @@
+import React, { forwardRef, Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { StackWrap } from '../StackView';
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'; // pass through and type relevant system props - add more sets for interactive components
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+const isQuickListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  return Boolean(elementName.match(/QuickLinksFeatureItem/));
+};
+/**
+ * QuickLinksFeature renders a list of interactive items.
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ */
+
+
+const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    tag = 'ul',
+    children,
+    ...rest
+  } = _ref;
+  const {
+    stackGap,
+    stackJustify,
+    stackSpace
+  } = useThemeTokens('QuickLinksFeature', tokens, variant);
+  const items = Children.map(children, child => {
+    if (isQuickListItem(child)) {
+      return /*#__PURE__*/cloneElement(child, child.props);
+    }
+
+    return null;
+  });
+  return /*#__PURE__*/_jsx(StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ref: ref,
+    ...selectProps(rest),
+    children: items
+  });
+});
+QuickLinksFeature.displayName = 'QuickLinksFeature';
+QuickLinksFeature.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('QuickLinksFeature'),
+  variant: variantProp.propType,
+
+  /**
+   * Default wrapper tag, by default it's "ul"
+   */
+  tag: PropTypes.string,
+
+  /**
+   * QuickLinksFeature.Item component
+   */
+  children: PropTypes.node
+};
+export default QuickLinksFeature;

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -0,0 +1,130 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import Image from "react-native-web/dist/exports/Image";
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { Link } from '../Link';
+import { StackWrap } from '../StackView'; // pass through and type relevant system props - add more sets for interactive components
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
+
+const selectImageStyle = imageDimension => ({
+  width: imageDimension,
+  height: imageDimension,
+  ...Platform.select({
+    // TODO: https://github.com/telus/universal-design-system/issues/487
+    web: {
+      transition: 'width 200ms, height 200ms'
+    }
+  })
+});
+
+const selectContainerStyle = _ref => {
+  let {
+    contentMaxDimension,
+    textAlign
+  } = _ref;
+  return {
+    textAlign,
+    width: contentMaxDimension,
+    overflow: 'hidden'
+  };
+};
+
+const selectImageContainerStyle = contentMaxDimension => ({
+  width: contentMaxDimension,
+  height: contentMaxDimension,
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+/**
+ * Component export along with QuickLinksFeature to be used as children
+ *
+ * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
+ */
+
+
+const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    imageAccessibilityLabel,
+    imageSource,
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant);
+  const [hover, setHover] = useState(false);
+  const {
+    contentDirection,
+    contentSpace,
+    contentAlignItems,
+    contentMaxDimension,
+    imageDimension,
+    textAlign
+  } = getTokens({
+    viewport,
+    hover
+  });
+  return /*#__PURE__*/_jsx(Link, {
+    ref: ref,
+    tokens: state => {
+      setHover(state.hover);
+      return getTokens(state);
+    },
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectContainerStyle({
+        contentMaxDimension,
+        textAlign
+      }),
+      children: /*#__PURE__*/_jsxs(StackWrap, {
+        direction: contentDirection,
+        space: contentSpace,
+        tokens: {
+          alignItems: contentAlignItems
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: selectImageContainerStyle(contentMaxDimension),
+          children: /*#__PURE__*/_jsx(Image, {
+            accessibilityIgnoresInvertColors: true,
+            imageAccessibilityLabel: imageAccessibilityLabel,
+            source: imageSource,
+            style: selectImageStyle(imageDimension)
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          children: children
+        })]
+      })
+    })
+  });
+});
+QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItem.propTypes = { ...withLinkRouter.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('QuickLinksFeatureItem'),
+  variant: variantProp.propType,
+
+  /**
+   * Text which will be rendered within the Link
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Image accessibility label
+   */
+  imageAccessibilityLabel: PropTypes.string.isRequired,
+
+  /**
+   * Image node or Image url
+   */
+  imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+};
+export default withLinkRouter(QuickLinksFeatureItem);

package/lib-module/QuickLinksFeature/index.js

@@ -0,0 +1,4 @@
+import QuickLinksFeature from './QuickLinksFeature';
+import QuickLinksFeatureItem from './QuickLinksFeatureItem';
+QuickLinksFeature.Item = QuickLinksFeatureItem;
+export default QuickLinksFeature;

package/lib-module/Radio/Radio.js

@@ -46,7 +46,7 @@ const selectDescriptionStyles = _ref2 => {
     labelMarginLeft = 0
   } = _ref2;
   return {
-    marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
     ...applyTextStyles({
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight
@@ -150,7 +150,7 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
   };
 
   const uniqueId = useUniqueId('radio');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const selectedProps = selectProps({
     accessibilityRole: 'radio',
     accessibilityState: {

package/lib-module/Radio/RadioGroup.js

@@ -99,7 +99,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("RadioGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const radios = items.map((_ref2, index) => {
@@ -110,7 +110,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const radioId = id || "Radio[".concat(index, "]");
+    const radioId = id || `Radio[${index}]`;
     const isChecked = currentValue === radioId;
 
     const handleChange = (newCheckedState, event) => {

package/lib-module/RadioCard/RadioCard.js

@@ -79,7 +79,7 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   const uniqueId = useUniqueId('RadioCard');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const getTokens = useThemeTokensCallback('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => selectPressableCardTokens(getTokens(cardState));

package/lib-module/RadioCard/RadioCardGroup.js

@@ -105,7 +105,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uniqueFields = ['id'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error("RadioCardGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -133,7 +133,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           onChange: itemOnChange,
           ...itemRest
         } = _ref2;
-        const cardId = id || "RadioCard[".concat(index, "]");
+        const cardId = id || `RadioCard[${index}]`;
 
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);