@lumx/react 3.12.1-alpha.5 → 3.12.1-alpha.7

package/index.d.ts

@@ -1926,17 +1926,11 @@ interface LinkProps extends GenericProps {
     href?: HTMLAnchorProps['href'];
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
-    /**
-     * Left icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the children
-     */
+    /** Left icon (SVG path). */
     leftIcon?: string;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
-    /**
-     * Right icon (SVG path).
-     * @deprecated Instead, simply nest `<Icon />` in the children
-     */
+    /** Right icon (SVG path). */
     rightIcon?: string;
     /** Link target. */
     target?: HTMLAnchorProps['target'];

package/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, createContext, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
 import kebabCase from 'lodash/kebabCase';
@@ -7457,20 +7457,6 @@ const useOverflowTooltipLabel = () => {
   };
 };
 
-/** Force wrap spaces around icons to make sure they are never stuck against text. */
-function wrapChildrenIconWithSpaces(children) {
-  if (children === null || children === undefined) return undefined;
-  return Children.toArray(children).flatMap(child => {
-    if (isComponentType(Icon)(child)) {
-      return [' ', child, ' '];
-    }
-    if (/*#__PURE__*/React__default.isValidElement(child) && child.props && typeof child.props === 'object' && 'children' in child.props) {
-      return /*#__PURE__*/React__default.cloneElement(child, undefined, wrapChildrenIconWithSpaces(child.props.children));
-    }
-    return child;
-  });
-}
-
 const _excluded$_ = ["as", "children", "className", "color", "colorVariant", "noWrap", "typography", "truncate", "whiteSpace", "style"];
 
 /**
@@ -7544,7 +7530,15 @@ const Text = forwardRef((props, ref) => {
     }), typographyClass, colorClass, noWrap && `${CLASSNAME$V}--no-wrap`),
     title: tooltipLabel,
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
-  }, forwardedProps), wrapChildrenIconWithSpaces(children));
+  }, forwardedProps), children && Children.toArray(children).map((child, index) => {
+    // Force wrap spaces around icons to make sure they are never stuck against text.
+    if (isComponent(Icon)(child)) {
+      return /*#__PURE__*/React__default.createElement(Fragment, {
+        key: child.key || index
+      }, " ", child, " ");
+    }
+    return child;
+  }));
 });
 Text.displayName = COMPONENT_NAME$V;
 Text.className = CLASSNAME$V;
@@ -9089,6 +9083,31 @@ const COMPONENT_NAME$K = 'Link';
  * Component default class name and class prefix.
  */
 const CLASSNAME$K = getRootClassName(COMPONENT_NAME$K);
+const getIconSize = typography => {
+  switch (typography) {
+    case Typography.display1:
+      return Size.m;
+    case Typography.headline:
+    case Typography.title:
+    case Typography.custom.title1:
+    case Typography.custom.title2:
+    case Typography.custom.title3:
+    case Typography.custom.title4:
+    case Typography.custom.title5:
+    case Typography.custom.title6:
+    case Typography.body2:
+    case Typography.subtitle2:
+      return Size.s;
+    case Typography.body1:
+    case Typography.subtitle1:
+      return Size.xs;
+    case Typography.caption:
+    case Typography.overline:
+      return Size.xxs;
+    default:
+      return Size.s;
+  }
+};
 
 /**
  * Link component.
@@ -9113,34 +9132,49 @@ const Link = forwardRef((props, ref) => {
       typography
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$O);
-  const isLink = linkAs || href;
-  const Component = isLink && !isDisabled ? linkAs || 'a' : 'button';
-  const baseProps = {};
-  if (Component === 'button') {
-    baseProps.type = 'button';
-    baseProps.disabled = isDisabled;
-  } else if (isLink) {
-    baseProps.href = href;
-    baseProps.target = target;
+  const renderedChildren = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: leftIcon,
+    className: `${CLASSNAME$K}__left-icon`,
+    size: getIconSize(typography)
+  }), children && /*#__PURE__*/React__default.createElement("span", {
+    className: classNames(`${CLASSNAME$K}__content`, {
+      [`lumx-typography-${typography}`]: typography
+    })
+  }, children), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: rightIcon,
+    className: `${CLASSNAME$K}__right-icon`,
+    size: getIconSize(typography)
+  })), [leftIcon, typography, children, rightIcon]);
+
+  /**
+   * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
+   * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
+   */
+  if (!linkAs && isEmpty(href) || isDisabled) {
+    return /*#__PURE__*/React__default.createElement("button", _extends({
+      type: "button"
+    }, forwardedProps, {
+      ref: ref,
+      disabled: isDisabled,
+      className: classNames(className, handleBasicClasses({
+        prefix: CLASSNAME$K,
+        color,
+        colorVariant
+      }))
+    }), renderedChildren);
   }
-  return /*#__PURE__*/React__default.createElement(Component, _extends({
-    ref: ref
-  }, forwardedProps, baseProps, {
+  return renderLink(_objectSpread2(_objectSpread2({
+    linkAs
+  }, forwardedProps), {}, {
+    href,
+    target,
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$K,
       color,
-      colorVariant,
-      hasTypography: !!typography
-    }), typography && getTypographyClassName(typography))
-  }), wrapChildrenIconWithSpaces(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && /*#__PURE__*/React__default.createElement(Icon, {
-    icon: leftIcon,
-    className: `${CLASSNAME$K}__left-icon`
-  }), children && /*#__PURE__*/React__default.createElement("span", {
-    className: `${CLASSNAME$K}__content`
-  }, children), rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
-    icon: rightIcon,
-    className: `${CLASSNAME$K}__right-icon`
-  }))));
+      colorVariant
+    })),
+    ref: ref
+  }), renderedChildren);
 });
 Link.displayName = COMPONENT_NAME$K;
 Link.className = CLASSNAME$K;