@telus-uds/components-base 1.12.1 → 1.14.1

package/lib-module/Carousel/CarouselContext.js

@@ -6,22 +6,26 @@ const CarouselContext = /*#__PURE__*/React.createContext();
 
 const CarouselProvider = _ref => {
   let {
-    children,
     activeIndex,
-    totalItems,
-    width,
+    children,
     goTo,
     getCopyWithPlaceholders,
-    themeTokens
+    itemLabel,
+    refocus = false,
+    themeTokens,
+    totalItems,
+    width
   } = _ref;
   const value = React.useMemo(() => ({
     activeIndex,
-    totalItems,
-    width,
     goTo,
     getCopyWithPlaceholders,
-    themeTokens
-  }), [activeIndex, totalItems, width, goTo, getCopyWithPlaceholders, themeTokens]);
+    itemLabel,
+    refocus,
+    themeTokens,
+    totalItems,
+    width
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
   return /*#__PURE__*/_jsx(CarouselContext.Provider, {
     value: value,
     children: children
@@ -41,10 +45,12 @@ function useCarousel() {
 CarouselProvider.propTypes = {
   children: PropTypes.arrayOf(PropTypes.element).isRequired,
   activeIndex: PropTypes.number.isRequired,
-  totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired,
   goTo: PropTypes.func.isRequired,
   getCopyWithPlaceholders: PropTypes.func.isRequired,
-  themeTokens: getTokensPropType('Carousel')
+  itemLabel: PropTypes.string.isRequired,
+  refocus: PropTypes.bool,
+  themeTokens: getTokensPropType('Carousel'),
+  totalItems: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired
 };
 export { CarouselProvider, useCarousel };

package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { PropTypes } from 'prop-types';
+import { useCarousel } from '../CarouselContext';
+/**
+ * Focus target so that when a new slide is shown, the user can tab into
+ * its content using the keyboard.
+ *
+ * @TODO rework this after integrating with SkipLink when available.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselFirstFocus = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title
+  } = _ref;
+  const {
+    getCopyWithPlaceholders
+  } = useCarousel(); // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
+
+  const accessibilityLabel = "".concat(title, ", ").concat(getCopyWithPlaceholders('stepTrackerLabel'));
+  const accessibilityRole = Platform.select({
+    web: 'link',
+    // The focused item will ultimately be a skip link.
+    default: 'button' // 'link' role usually denotes opening browser on Native.
+
+  });
+  return /*#__PURE__*/_jsx(Pressable // TODO: integrate skip link functionality, jump focus to after Carousel
+  , {
+    onPress: undefined,
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    style: StyleSheet.absoluteFill,
+    focusable: true
+  });
+});
+CarouselFirstFocus.displayName = 'CarouselFirstFocus';
+CarouselFirstFocus.propTypes = {
+  /**
+   * Simple description of this carousel for screenreaders, to be read before
+   * "{itemLabel} {index} of {count}.
+   *
+   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
+   */
+  title: PropTypes.string
+};
+export default CarouselFirstFocus;

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -0,0 +1,50 @@
+var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useResponsiveProp } from '../../utils';
+import Carousel from '../Carousel';
+import CarouselTabsPanel from './CarouselTabsPanel';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    items,
+    refocus = true,
+    ...carouselProps
+  } = _ref;
+  const panelNavigation = useResponsiveProp({
+    md: /*#__PURE__*/_jsx(CarouselTabsPanel, {
+      items: items
+    })
+  });
+  return /*#__PURE__*/_jsx(Carousel, {
+    refocus: refocus,
+    ...carouselProps,
+    ref: ref,
+    panelNavigation: panelNavigation,
+    children: items.map(_ref2 => {
+      let {
+        title,
+        content
+      } = _ref2;
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: content
+      }, title);
+    })
+  });
+});
+CarouselTabs.displayName = 'CarouselTabs';
+CarouselTabs.propTypes = {
+  /**
+   * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired
+  })),
+  ...Carousel.propTypes
+}; // CarouselTabs doesn't require `children` prop, it uses `items` instead.
+// eslint-disable-next-line react/forbid-foreign-prop-types
+
+if ((_CarouselTabs$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 ? true : delete _CarouselTabs$propTyp2.children;
+export default CarouselTabs;

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -0,0 +1,76 @@
+import React, { forwardRef, useRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import StackView from '../../StackView';
+import { useCarousel } from '../CarouselContext';
+import CarouselTabsPanelItem from './CarouselTabsPanelItem';
+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 CarouselTabsPanel = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    items
+  } = _ref;
+  const {
+    activeIndex,
+    goTo
+  } = useCarousel();
+  const nextFocusRef = useRef();
+  const firstTabRef = useRef(); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+
+  const dividerVariant = {
+    decorative: true
+  };
+  const lastTabSelected = activeIndex === items.length - 1;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(View, {
+      focusable: true,
+      accessible: true,
+      onFocus: event => {
+        // When user forward-tabs into this section, focus the next tab; if they backwards-tab
+        // (shift-tab) back into the carousel content, don't interfere.
+        const previousWebFocus = event.relatedTarget;
+        if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus();
+      }
+    }), /*#__PURE__*/_jsx(StackView, {
+      direction: "row",
+      space: 3,
+      divider: {
+        variant: dividerVariant
+      },
+      ref: ref,
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          onPress,
+          ...panelItemProps
+        } = _ref2;
+        const selected = index === activeIndex;
+        const isNext = index === activeIndex + 1; // Selected item should be always unfocusable and unpressable
+
+        const handlePress = selected ? undefined : event => {
+          if (typeof onPress === 'function') onPress(event, index);
+          goTo(index);
+        };
+        return /*#__PURE__*/_jsx(CarouselTabsPanelItem, {
+          ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
+          title: title,
+          selected: selected,
+          onPress: handlePress,
+          ...panelItemProps
+        }, title);
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      focusable: true,
+      accessible: true,
+      ref: lastTabSelected ? nextFocusRef : null
+    })]
+  });
+});
+CarouselTabsPanel.displayName = 'CarouselTabsPanel';
+CarouselTabsPanel.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {}))
+};
+export default CarouselTabsPanel;

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -0,0 +1,126 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import { applyTextStyles, useThemeTokensCallback } from '../../ThemeProvider';
+import { selectSystemProps, a11yProps, pressProps, viewProps, textProps, getTokensPropType, variantProp, resolvePressableState } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectTextProps, textPropTypes] = selectSystemProps([textProps]);
+
+const selectContainerStyles = _ref => {
+  let {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom = 0,
+    borderBottomColor,
+    borderBottomWidth = 0,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent
+  } = _ref;
+  return {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom: paddingBottom - borderBottomWidth,
+    borderBottomColor,
+    borderBottomWidth,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent,
+    ...Platform.select({
+      // Removes the default browser :focus outline
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const selectTextStyles = _ref2 => {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  } = _ref2;
+  return applyTextStyles({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  });
+};
+
+const CarouselTabsPanelItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    title,
+    selected,
+    inactive,
+    variant,
+    tokens,
+    accessibilityRole = 'tab',
+    ...rest
+  } = _ref3;
+  // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
+  // Don't allow disabled to be set while focus is true else focus state gets locked `true`
+  // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
+  const [isFocused, setIsFocused] = useState(false);
+  const disabled = (inactive || selected) && !isFocused;
+  const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant);
+
+  const resolveTokens = pressState => getTokens(resolvePressableState(pressState, {
+    selected
+  }));
+
+  const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
+
+  const getTextStyle = pressState => selectTextStyles(resolveTokens(pressState));
+
+  const {
+    onPress,
+    ...selectedPressProps
+  } = selectPressProps(rest);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') onPress(event);
+  };
+
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    style: getContainerStyle,
+    accessibilityRole: accessibilityRole,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    ...selectedPressProps,
+    children: pressState => /*#__PURE__*/_jsx(Text, {
+      style: getTextStyle(pressState),
+      ...selectTextProps(rest),
+      children: title
+    })
+  });
+});
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
+CarouselTabsPanelItem.propTypes = { ...pressPropTypes,
+  ...textPropTypes,
+  title: PropTypes.string.isRequired,
+  selected: PropTypes.bool,
+  tokens: getTokensPropType('CarouselTabsPanelItem'),
+  variant: variantProp.propType
+};
+export default CarouselTabsPanelItem;

package/lib-module/Carousel/CarouselTabs/index.js

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

package/lib-module/Carousel/CarouselThumbnail.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Image from "react-native-web/dist/exports/Image";
+import { useCarousel } from './CarouselContext';
+/**
+ * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const CarouselThumbnail = _ref => {
+  let {
+    accessibilityLabel,
+    alt,
+    index,
+    src
+  } = _ref;
+  const {
+    activeIndex,
+    itemLabel,
+    totalItems,
+    getCopyWithPlaceholders,
+    goTo,
+    themeTokens
+  } = useCarousel();
+  const thumbnailTitle = alt !== null && alt !== void 0 ? alt : getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+
+  const handlePress = () => goTo(index);
+
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') goTo(index);
+  };
+
+  const {
+    thumbnailBorderColor,
+    thumbnailBorderRadius,
+    thumbnailBorderWidth,
+    thumbnailMargin,
+    thumbnailPadding,
+    thumbnailSelectedBorderColor,
+    thumbnailSelectedBorderWidth,
+    thumbnailSize
+  } = themeTokens;
+  const styles = {
+    pressable: {
+      borderColor: thumbnailBorderColor,
+      borderRadius: thumbnailBorderRadius,
+      borderWidth: thumbnailBorderWidth,
+      margin: thumbnailMargin,
+      padding: thumbnailPadding
+    },
+    image: {
+      height: thumbnailSize,
+      width: thumbnailSize
+    },
+    selected: {
+      borderColor: thumbnailSelectedBorderColor,
+      borderWidth: thumbnailSelectedBorderWidth,
+      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+    }
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    onKeyDown: handleKeyDown,
+    onPress: handlePress,
+    style: [styles.pressable, index === activeIndex && styles.selected],
+    children: /*#__PURE__*/_jsx(Image, {
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      source: src,
+      style: styles.image,
+      title: thumbnailTitle
+    })
+  }, src);
+};
+
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: PropTypes.string,
+  alt: PropTypes.string,
+  index: PropTypes.number,
+  src: PropTypes.string
+};
+export default CarouselThumbnail;

package/lib-module/Carousel/CarouselThumbnailNavigation.js

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { useCarousel } from './CarouselContext';
+import CarouselThumbnail from './CarouselThumbnail';
+import { StackWrap } from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselThumbnailNavigation = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    thumbnails = []
+  } = _ref;
+  const {
+    totalItems,
+    themeTokens
+  } = useCarousel();
+
+  if (thumbnails.length !== totalItems) {
+    throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
+  }
+
+  const {
+    thumbnailContainerPaddingTop,
+    thumbnailMargin
+  } = themeTokens;
+  const stackWrapTokens = {
+    justifyContent: 'flex-start'
+  };
+  const containerStyles = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyles,
+    children: /*#__PURE__*/_jsx(StackWrap, {
+      direction: "row",
+      tokens: stackWrapTokens,
+      ref: ref,
+      children: thumbnails.map((_ref2, index) => {
+        let {
+          accessibilityLabel,
+          alt,
+          src
+        } = _ref2;
+        return /*#__PURE__*/_jsx(CarouselThumbnail, {
+          accessibilityLabel: accessibilityLabel,
+          alt: alt,
+          index: index,
+          src: src
+        }, src);
+      })
+    })
+  });
+});
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation';
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: PropTypes.arrayOf(PropTypes.shape({
+    accessibilityLabel: PropTypes.string,
+    alt: PropTypes.string,
+    src: PropTypes.string
+  })).isRequired
+};
+export default CarouselThumbnailNavigation;

package/lib-module/Carousel/dictionary.js

@@ -4,13 +4,15 @@ export default {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: 'Skip %{title}'
   },
   fr: {
     // TODO: French translations here
     carouselLabel: '(fr) %{stepCount} items',
     iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '(fr) %{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: '(fr) Skip %{title}'
   }
 };

package/lib-module/Carousel/index.js

@@ -1,2 +1,3 @@
 export * from './CarouselContext';
-export { default as Carousel } from './Carousel';
+export { default as Carousel } from './Carousel';
+export { default as CarouselTabs } from './CarouselTabs';

package/lib-module/Checkbox/CheckboxGroup.js

@@ -67,6 +67,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend,
     tooltip,
     hint,
+    hintPosition = 'inline',
     validation,
     feedback,
     initialCheckedIds,
@@ -133,6 +134,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     legend: legend,
     tooltip: tooltip,
     hint: hint,
+    hintPosition: hintPosition,
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
@@ -182,6 +184,11 @@ CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
    */
   hint: PropTypes.string,
 
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/lib-module/Icon/IconText.js

@@ -68,7 +68,7 @@ IconText.propTypes = {
   /**
    * A valid UDS icon component imported from a UDS palette.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * Props that will be passed to the icon component. By default the icon's `scalesWithText`

package/lib-module/Link/InlinePressable.js

@@ -9,8 +9,6 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
@@ -21,12 +19,11 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     style,
-    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
-    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -34,11 +31,7 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
 InlinePressable.displayName = 'InlinePressable';
 const staticStyles = StyleSheet.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 });
 export default InlinePressable;

package/lib-module/Link/LinkBase.js

@@ -12,7 +12,7 @@ import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 
-const selectOuterBorderStyles = _ref => {
+const selectOuterBorderStyles = (_ref, hasIcon) => {
   let {
     outerBorderColor,
     outerBorderWidth,
@@ -33,7 +33,8 @@ const selectOuterBorderStyles = _ref => {
       }),
       // Stops focus ring stretching horizontally if parent has display: block
       // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-      display: 'inline-flex'
+      display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
+
     } : {}
   );
 };
@@ -169,14 +170,12 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     themeOptions
   } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
-    inline: hasIcon // assuming links without icons should be inline (even if they are long)
-    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
-      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -218,7 +217,7 @@ LinkBase.propTypes = { ...selectedSystemPropTypes,
    * A function component for an SVG icon to render inside the link. Inherits size and color from
    * the link and any Typography the link is nested inside.
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.

package/lib-module/List/ListItem.js

@@ -225,7 +225,7 @@ ListItem.propTypes = { ...selectedSystemPropTypes,
   /**
    * Renders side item icon
    */
-  icon: PropTypes.func,
+  icon: PropTypes.elementType,
 
   /**
    * Will set display icon color