@redsift/design-system 10.4.0 → 10.5.0-alpha.0

package/index.d.ts

@@ -473,7 +473,7 @@ declare function partitionComponents<T>(components: T[], predicates: Array<(t: T
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 19:17:14 GMT
+ * Generated on Fri, 20 Sep 2024 07:42:41 GMT
  */
 declare const RedsiftColorDarkComponentsPageBackground = "#333333";
 declare const RedsiftColorDarkComponentsTextPrimary = "#ffffff";
@@ -1793,7 +1793,7 @@ declare const RedsiftTypographyH2LineHeight = "30px";
 declare const RedsiftTypographyH2TextTransform = "unset";
 declare const RedsiftTypographyH3FontFamily = "'Poppins', sans-serif";
 declare const RedsiftTypographyH3FontSize = "20px";
-declare const RedsiftTypographyH3FontWeight = "600";
+declare const RedsiftTypographyH3FontWeight = "500";
 declare const RedsiftTypographyH3LineHeight = "30px";
 declare const RedsiftTypographyH3TextTransform = "unset";
 declare const RedsiftTypographyH4FontFamily = "'Poppins', sans-serif";
@@ -2589,6 +2589,20 @@ interface LinkProps extends ComponentProps<'a'>, StylingProps {
     color?: NotificationsColorPalette | NeutralColorPalette | 'radar' | (string & {});
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    leftIcon?: IconProps['icon'];
+    /** Props to add to the left icon. */
+    leftIconProps?: Omit<IconProps, 'icon' | 'ref'>;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    rightIcon?: IconProps['icon'];
+    /** Props to add to the right icon. */
+    rightIconProps?: Omit<IconProps, 'icon' | 'ref'>;
     /** Theme. */
     theme?: Theme;
 }
@@ -2596,6 +2610,7 @@ type StyledLinkProps = Omit<LinkProps, 'isDisabled'> & {
     $isDisabled: LinkProps['isDisabled'];
     $color: LinkProps['color'];
     $theme: LinkProps['theme'];
+    $hasIcons: boolean;
 };
 
 /**
@@ -2605,6 +2620,7 @@ declare const StyledLink: styled_components.StyledComponent<"a", any, Omit<LinkP
     $isDisabled: boolean | undefined;
     $color: (string & {}) | "radar" | NotificationsColorPalette | NeutralColorPalette | undefined;
     $theme: Theme | undefined;
+    $hasIcons: boolean;
 }, never>;
 
 /**
@@ -2620,7 +2636,7 @@ declare const Link: Comp<LinkProps, HTMLAnchorElement>;
 /**
  * Component props.
  */
-interface ButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<ButtonProps, 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'leftIcon' | 'rightIcon' | 'variant' | 'theme'> {
+interface ButtonLinkProps extends Omit<LinkProps, 'color'>, Pick<ButtonProps, 'color' | 'isActive' | 'isDisabled' | 'isHovered' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon' | 'variant' | 'theme'> {
 }
 type StyledButtonLinkProps = ButtonLinkProps & {
     $isActive: ButtonLinkProps['isActive'];
@@ -3739,7 +3755,7 @@ declare const Item: Comp<ItemProps, HTMLElement>;
 /**
  * Component props.
  */
-interface LinkButtonProps extends Omit<ButtonProps, 'color' | 'fullWidth' | 'leftIcon' | 'rightIcon' | 'size' | 'variant'> {
+interface LinkButtonProps extends Pick<LinkProps, 'color' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon'>, Omit<ButtonProps, 'color' | 'fullWidth' | 'leftIcon' | 'leftIconProps' | 'rightIconProps' | 'rightIcon' | 'size' | 'variant'> {
 }
 type StyledLinkButtonProps = Omit<LinkButtonProps, 'isDisabled'> & {
     $isDisabled: LinkButtonProps['isDisabled'];

package/index.js

@@ -483,7 +483,7 @@ function partitionComponents(components, predicates) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Jul 2024 19:17:14 GMT
+ * Generated on Fri, 20 Sep 2024 07:42:41 GMT
  */
 
 const RedsiftColorDarkComponentsPageBackground = '#333333';
@@ -1804,7 +1804,7 @@ const RedsiftTypographyH2LineHeight = '30px';
 const RedsiftTypographyH2TextTransform = 'unset';
 const RedsiftTypographyH3FontFamily = "'Poppins', sans-serif";
 const RedsiftTypographyH3FontSize = '20px';
-const RedsiftTypographyH3FontWeight = '600';
+const RedsiftTypographyH3FontWeight = '500';
 const RedsiftTypographyH3LineHeight = '30px';
 const RedsiftTypographyH3TextTransform = 'unset';
 const RedsiftTypographyH4FontFamily = "'Poppins', sans-serif";
@@ -5338,7 +5338,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(Button.className, className),
     disabled: isDisabled,
     ref: buttonRef
-  }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
@@ -5349,7 +5349,7 @@ const Button = /*#__PURE__*/forwardRef((props, ref) => {
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }, rightIconProps)) : null)));
+  }, rightIconProps)) : null));
 });
 Button.className = CLASSNAME$Q;
 Button.displayName = COMPONENT_NAME$Q;
@@ -8353,7 +8353,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((props, ref) => {
 ButtonGroup.className = CLASSNAME$A;
 ButtonGroup.displayName = COMPONENT_NAME$A;
 
-const _excluded$C = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "rightIcon", "target", "theme", "variant"];
+const _excluded$C = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "target", "theme", "variant"];
 const COMPONENT_NAME$z = 'ButtonLink';
 const CLASSNAME$z = 'redsift-button-link';
 
@@ -8375,7 +8375,9 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
       isDisabled,
       isHovered,
       leftIcon,
+      leftIconProps,
       rightIcon,
+      rightIconProps,
       target,
       theme: propsTheme,
       variant: propsVariant
@@ -8410,15 +8412,15 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
     href: !isDisabled ? href : undefined,
     ref: ref,
     target: target
-  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: leftIcon,
     "aria-hidden": "true",
     className: "left"
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", null, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: rightIcon,
     "aria-hidden": "true",
     className: "right"
-  }) : null));
+  }, rightIconProps)) : null));
 });
 ButtonLink.className = CLASSNAME$z;
 ButtonLink.displayName = COMPONENT_NAME$z;
@@ -17484,43 +17486,73 @@ Item.displayName = COMPONENT_NAME$b;
  * Component style.
  */
 const StyledLink = styled.a`
-  width: fit-content;
-  height: var(--redsift-typography-link-line-height);
-  ${baseStyling}
-
   background: none;
   border: none;
   color: unset;
   cursor: text !important;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
   font-family: var(--redsift-typography-link-font-family);
   font-size: var(--redsift-typography-link-font-size);
   font-weight: var(--redsift-typography-link-font-weight);
+  height: var(--redsift-typography-link-line-height);
   line-height: var(--redsift-typography-link-line-height);
   padding: unset;
+  position: relative;
   text-decoration: none;
+  width: fit-content;
 
   ${_ref => {
+  let {
+    $hasIcons
+  } = _ref;
+  return $hasIcons ? css`
+          bottom: -2px;
+        ` : '';
+}}
+
+  ${baseStyling}
+
+  ${_ref2 => {
   let {
     $isDisabled,
     $color,
-    $theme
-  } = _ref;
+    $theme,
+    $hasIcons
+  } = _ref2;
   return !$isDisabled ? css`
           ${$color && $color === 'radar' ? css`
                   background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
                   background-clip: text;
                   color: transparent;
+
+                  path {
+                    fill: url(#${$color}-gradient-default);
+                  }
                 ` : Object.keys(NotificationsColorPalette).indexOf($color) !== -1 ? css`
-                  color: var(--redsift-color-notifications-${$color}-primary);
+                  &,
+                  .redsift-icon:not(.colored) {
+                    color: var(--redsift-color-notifications-${$color}-primary);
+                  }
                 ` : Object.keys(NeutralColorPalette).indexOf($color) !== -1 ? css`
-                  color: var(--redsift-color-neutral-${$color});
+                  &,
+                  .redsift-icon:not(.colored) {
+                    color: var(--redsift-color-neutral-${$color});
+                  }
                 ` : Object.keys(ProductColorPalette).indexOf($color) !== -1 ? css`
-                  color: var(--redsift-color-product-${$color});
+                  &,
+                  .redsift-icon:not(.colored) {
+                    color: var(--redsift-color-product-${$color});
+                  }
                 ` : css`
-                  color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
+                  &,
+                  .redsift-icon:not(.colored) {
+                    color: ${$color || css`var(--redsift-color-${$theme}-components-text-primary)`};
+                  }
                 `}}
 
-          ${$color && $color === 'radar' ? css`
+          ${$color && $color === 'radar' && !$hasIcons ? css`
                   position: relative;
 
                   &:hover,
@@ -17538,6 +17570,30 @@ const StyledLink = styled.a`
                     height: 1px;
                     background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
                   }
+                ` : $color && $color === 'radar' && $hasIcons ? css`
+                  position: relative;
+
+                  &:hover,
+                  &:focus-visible {
+                    cursor: pointer !important;
+                  }
+
+                  .text::before {
+                    content: '';
+                    position: absolute;
+                    bottom: 3px;
+                    width: 100%;
+                    left: 0;
+                    height: 1px;
+                    background: linear-gradient(90deg, #51b78e 0%, #0081c3 100%);
+                    transform: scaleX(0);
+                  }
+
+                  &:hover .text::before,
+                  .icon:hover + .text::before,
+                  .text:hover::before {
+                    transform: scaleX(1);
+                  }
                 ` : css`
                   text-decoration: underline;
                   text-decoration-color: transparent;
@@ -17565,7 +17621,7 @@ const StyledLink = styled.a`
   }
 `;
 
-const _excluded$e = ["as", "children", "className", "color", "href", "isDisabled", "theme"];
+const _excluded$e = ["as", "children", "className", "color", "href", "isDisabled", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme"];
 const COMPONENT_NAME$a = 'Link';
 const CLASSNAME$a = 'redsift-link';
 
@@ -17585,6 +17641,10 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
       color = 'primary',
       href,
       isDisabled,
+      leftIcon,
+      leftIconProps,
+      rightIcon,
+      rightIconProps,
       theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$e);
@@ -17598,15 +17658,28 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
     $color: color,
     $isDisabled: isDisabled,
     $theme: theme,
+    $hasIcons: leftIcon || rightIcon,
     className: classNames(Link.className, className),
     href: !isDisabled ? href : undefined,
     ref: ref
-  }), children);
+  }), leftIcon || rightIcon ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left",
+    size: "xsmall"
+  }, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "text"
+  }, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+    icon: rightIcon,
+    "aria-hidden": "true",
+    className: "right",
+    size: "xsmall"
+  }, rightIconProps)) : null) : children);
 });
 Link.className = CLASSNAME$a;
 Link.displayName = COMPONENT_NAME$a;
 
-const _excluded$d = ["children", "className", "disabled", "isDisabled", "theme"];
+const _excluded$d = ["children", "className", "color", "disabled", "isDisabled", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme"];
 const COMPONENT_NAME$9 = 'LinkButton';
 const CLASSNAME$9 = 'redsift-link-button';
 
@@ -17622,8 +17695,13 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
       className,
+      color = 'primary',
       disabled,
       isDisabled: propsIsDisabled,
+      leftIcon,
+      leftIconProps,
+      rightIcon,
+      rightIconProps,
       theme: propsTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$d);
@@ -17632,6 +17710,7 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledLink, _extends$1({
     as: "button"
   }, forwardedProps, {
+    $color: color,
     $isDisabled: isDisabled || disabled,
     $theme: theme,
     "aria-disabled": isDisabled || disabled,
@@ -17640,7 +17719,19 @@ const LinkButton = /*#__PURE__*/forwardRef((props, ref) => {
     // @ts-ignore
     ,
     ref: buttonRef
-  }), children);
+  }), leftIcon || rightIcon ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+    icon: leftIcon,
+    "aria-hidden": "true",
+    className: "left",
+    size: "xsmall"
+  }, leftIconProps)) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "text"
+  }, children), rightIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
+    icon: rightIcon,
+    "aria-hidden": "true",
+    className: "right",
+    size: "xsmall"
+  }, rightIconProps)) : null) : children);
 });
 LinkButton.className = CLASSNAME$9;
 LinkButton.displayName = COMPONENT_NAME$9;