@redsift/design-system 8.0.1 → 8.0.3

package/index.d.ts

@@ -1556,6 +1556,8 @@ declare const Shield: Comp<ShieldProps, HTMLDivElement>;
 interface DetailedCardProps extends ComponentProps<'div'>, StylingProps {
     /** Whether the component is collapsed or not. Used for controlled version. */
     areAllCollapsed?: boolean;
+    /** Banner variant. */
+    bannerVariant?: 'standard' | 'condensed';
     /** Banner color. */
     color?: ColorPalette;
     /** Default collapse status. Used for uncontrolled version. */
@@ -1675,7 +1677,7 @@ 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;
+    color?: ColorPalette | DataVizColorPalette | string;
     /** Header. */
     header?: string | ReactElement;
     /** Whether the section is collapsed or not. */

package/index.js

@@ -5880,6 +5880,8 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
     justify-content: flex-end;
     line-height: 14px;
     margin: 8px 0px;
+    padding-top: 8px;
+    border-top: 1px solid var(--redsift-color-neutral-midgrey);
   }
 `;
 
@@ -5918,13 +5920,16 @@ const StyledDetailedCardSection = styled.div`
   margin: 8px 0;
 
   .redsift-detailed-card-section__header {
-    border-bottom: 1px solid
-      ${_ref => {
+    ${_ref => {
   let {
     $color
   } = _ref;
-  return $color ? css`var(--redsift-color-${$color}-primary)` : 'var(--redsift-color-neutral-midgrey)';
-}};
+  return $color && [...Object.keys(ColorPalette), ...Object.keys(ProductColorPalette)].indexOf($color) !== -1 ? css`
+            border-bottom: 1px solid var(--redsift-color-${$color}-primary);
+          ` : css`
+            border-bottom: 1px solid ${$color || css`var(--redsift-color-neutral-midgrey)`};
+          `;
+}}
     margin-bottom: 8px;
   }
 
@@ -6195,6 +6200,7 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
     variant: BadgeVariant.standard
   }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
+    marginLeft: "auto",
     "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
     className: `${DetailedCardSection.className}-header__collapse-button`,
     color: "question",
@@ -6306,13 +6312,11 @@ const StyledPill = styled.div`
     ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? css`
           background-color: var(--redsift-color-neutral-white);
           border: 1px solid #d6d6d6;
-        ` : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-brown-default);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-purple-default);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-aqua-default);' : `background-color: var(--redsift-data-viz-color-${$color}-default);`}
+        ` : $color === 'error' ? 'background-color: var(--redsift-data-viz-color-red-light);' : $color === 'warning' ? 'background-color: var(--redsift-data-viz-color-orange-light);' : $color === 'success' ? 'background-color: var(--redsift-data-viz-color-green-light);' : `background-color: var(--redsift-data-viz-color-${$color}-light);`}
 
     &,
     .redsift-icon {
-      color: var(
-        --redsift-color-neutral-${$color === 'black' ? 'white' : 'black'}
-      );
+      color: var(--redsift-color-neutral-${$color === 'black' ? 'white' : 'black'});
     }
   `;
 }}}
@@ -10225,7 +10229,7 @@ const useTooltipContext = () => {
   return context;
 };
 
-const _excluded$a = ["areAllCollapsed", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
+const _excluded$a = ["areAllCollapsed", "bannerVariant", "children", "className", "color", "defaultAllCollapsed", "icon", "isCollapsible", "isLoading", "onCollapseAll", "shield"];
 const COMPONENT_NAME$a = 'DetailedCard';
 const CLASSNAME$a = 'redsift-detailed-card';
 const DEFAULT_PROPS$a = {
@@ -10257,6 +10261,7 @@ const hasMultipleCollapsibleChildren = children => {
 const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areAllCollapsed: propsAreAllCollapsed,
+      bannerVariant,
       children,
       className,
       color,
@@ -10294,17 +10299,17 @@ const BaseDetailedCard = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     $color: color
   }), color ? isLoading ? /*#__PURE__*/React__default.createElement(Skeleton, {
-    height: "80px",
+    height: bannerVariant === 'condensed' ? '8px' : '80px',
     width: "calc(100% + 32px)",
     margin: "-16px -16px 16px -16px"
   }) : /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${BaseDetailedCard.className}__banner`,
     alignItems: "center",
-    height: "80px",
+    height: bannerVariant === 'condensed' ? '8px' : '80px',
     justifyContent: "center",
     margin: "-16px -16px 16px -16px",
     width: "calc(100% + 32px)"
-  }, shield ? /*#__PURE__*/React__default.createElement(Shield, {
+  }, bannerVariant === 'condensed' ? null : shield ? /*#__PURE__*/React__default.createElement(Shield, {
     variant: shield,
     isOutlined: true,
     isReversed: true,