@redsift/design-system 7.7.0-alpha.3 → 7.7.0

package/index.d.ts

@@ -1633,8 +1633,10 @@ declare const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement>;
 interface DetailedCardSectionProps extends ComponentProps<'div'> {
     /** Props to pass to the badge displayed next to the title. */
     badge?: Omit<BadgeProps, 'ref'>;
+    /** Color that will be used on the header line. */
+    color?: ColorPalette;
     /** Header. */
-    header?: string;
+    header?: string | ReactElement;
     /** Whether the section is collapsed or not. */
     readonly isCollapsed?: boolean;
     /** Whether the section can be collasped or not. */
@@ -1642,7 +1644,8 @@ interface DetailedCardSectionProps extends ComponentProps<'div'> {
     /** Whether the card is loading or not. */
     isLoading?: boolean;
 }
-type StyledDetailedCardSectionProps = Omit<DetailedCardSectionProps, 'isCollapsed'> & {
+type StyledDetailedCardSectionProps = Omit<DetailedCardSectionProps, 'color' | 'isCollapsed'> & {
+    $color: DetailedCardSectionProps['color'];
     $isCollapsed: DetailedCardSectionProps['isCollapsed'];
 };
 

package/index.js

@@ -2231,9 +2231,15 @@ const StyledSideNavigationMenuItem = styled.a`
     $isDisabled
   } = _ref;
   return !$isDisabled ? css`
-          color: var(--redsift-side-navigation-color-menu-item-text-resting);
+          &,
+          .redsift-icon.first {
+            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+          }
         ` : css`
-          color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+          &,
+          .redsift-icon.first {
+            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+          }
         `;
 }}
   align-items: center;
@@ -2256,7 +2262,10 @@ const StyledSideNavigationMenuItem = styled.a`
             background-color: var(
               --redsift-side-navigation-color-menu-item-background-hover
             );
-            color: var(--redsift-side-navigation-color-menu-item-text-hover);
+            &,
+            .redsift-icon.first {
+              color: var(--redsift-side-navigation-color-menu-item-text-hover);
+            }
           ` : '';
 }}
   }
@@ -2268,8 +2277,8 @@ const StyledSideNavigationMenuItem = styled.a`
   } = _ref3;
   return !$isSecondLevel ? css`
           /**
-     * First-level items
-     */
+           * First-level items
+           */
 
           background-color: var(--redsift-side-navigation-color-background);
           padding: 8px 16px;
@@ -2552,9 +2561,19 @@ const StyledSideNavigationMenu = styled.div`
     $isDisabled
   } = _ref;
   return !$isDisabled ? css`
-            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-resting
+              );
+            }
           ` : css`
-            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-disabled
+              );
+            }
           `;
 }}
     align-items: center;
@@ -2607,12 +2626,12 @@ const StyledSideNavigationMenu = styled.div`
             background-color: var(
               --redsift-side-navigation-color-menu-item-background-hover
             );
-            color: var(--redsift-side-navigation-color-menu-item-text-hover);
-            cursor: pointer;
-
+            &,
+            .redsift-icon.first,
             .redsift-side-navigation-menu__expand-icon {
               color: var(--redsift-side-navigation-color-menu-item-text-hover);
             }
+            cursor: pointer;
           ` : '';
 }}
   }
@@ -2623,9 +2642,19 @@ const StyledSideNavigationMenu = styled.div`
     $isDisabled
   } = _ref3;
   return !$isDisabled ? css`
-            color: var(--redsift-side-navigation-color-menu-item-text-resting);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-resting
+              );
+            }
           ` : css`
-            color: var(--redsift-side-navigation-color-menu-item-text-disabled);
+            &,
+            .redsift-icon.first {
+              color: var(
+                --redsift-side-navigation-color-menu-item-text-disabled
+              );
+            }
           `;
 }}
     margin-left: auto;
@@ -4741,12 +4770,20 @@ const StyledDetailedCardSection = styled.div`
   margin: 8px 0;
 
   .redsift-detailed-card-section__header {
-    border-bottom: 1px solid var(--redsift-color-neutral-midgrey);
+    border-bottom: 1px solid
+      ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return $color ? css`var(--redsift-color-${$color}-primary)` : 'var(--redsift-color-neutral-midgrey)';
+}};
     margin-bottom: 8px;
   }
 
   .redsift-detailed-card-section-header__title {
+    font-size: 18px;
     font-weight: 700;
+    lineheight: 22px;
     padding: 6px 0px;
   }
 
@@ -4755,28 +4792,28 @@ const StyledDetailedCardSection = styled.div`
   }
 
   .redsift-detailed-card-collapsible-section-items {
-    visibility: ${_ref => {
+    visibility: ${_ref2 => {
   let {
     $isCollapsed
-  } = _ref;
+  } = _ref2;
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
-    overflow: ${_ref2 => {
+    overflow: ${_ref3 => {
   let {
     $isCollapsed
-  } = _ref2;
+  } = _ref3;
   return !$isCollapsed ? 'visible' : 'hidden';
 }};
-    height: ${_ref3 => {
+    height: ${_ref4 => {
   let {
     $isCollapsed
-  } = _ref3;
+  } = _ref4;
   return !$isCollapsed ? 'auto' : '0px';
 }};
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $isCollapsed
-  } = _ref4;
+  } = _ref5;
   return $isCollapsed ? css`
             margin: unset;
             padding: unset;
@@ -4943,7 +4980,7 @@ Text.className = CLASSNAME$h;
 Text.defaultProps = DEFAULT_PROPS$h;
 Text.displayName = COMPONENT_NAME$h;
 
-const _excluded$d = ["badge", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const _excluded$d = ["badge", "color", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
 const COMPONENT_NAME$g = 'DetailedCardSection';
 const CLASSNAME$g = 'redsift-detailed-card-section';
 const DEFAULT_PROPS$g = {
@@ -4965,6 +5002,7 @@ const hasCollapsibleChildren = children => {
 const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       badge,
+      color,
       children,
       className,
       header,
@@ -4979,6 +5017,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardSection, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardSection.className, className),
     ref: ref,
+    $color: color,
     $isCollapsed: isCollapsed
   }), /*#__PURE__*/React__default.createElement(Flexbox, {
     justifyContent: "space-between",
@@ -4993,12 +5032,14 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement(Flexbox, {
     alignItems: "center",
     gap: "8px"
-  }, /*#__PURE__*/React__default.createElement(Text, {
+  }, typeof header === 'string' ? /*#__PURE__*/React__default.createElement(Text, {
     className: `${DetailedCardSection.className}-header__title`,
     color: "black",
     fontFamily: "raleway",
     fontSize: "18px",
     lineHeight: "22px"
+  }, header) : /*#__PURE__*/React__default.createElement("div", {
+    className: `${DetailedCardSection.className}-header__title`
   }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
     variant: BadgeVariant.standard
   }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {