@redsift/design-system 7.6.0 → 7.7.0-alpha.0

package/index.d.ts

@@ -925,7 +925,7 @@ interface BadgeProps extends ComponentProps<'div'>, LayoutProps, SpacingProps, P
     /** Whether the badge should automatically break content. */
     autoBreak?: boolean;
     /** Color variant. The product colors are available but should only be used to display the Badge in the color of another product. To display a Badge with a color of the current product, use `default`. */
-    color?: ColorPalette | ProductColorPalette;
+    color?: ColorPalette | DataVizColorPalette | ProductColorPalette;
     /** Whether the Badge has its colors reversed or not. */
     isReversed?: boolean;
     /** Badge variant. */
@@ -1597,8 +1597,12 @@ declare const DetailedCardSectionItem: Comp<DetailedCardSectionItemProps, HTMLDi
 interface DetailedCardCollapsibleSectionItemsProps extends ComponentProps<'div'> {
     /** Small caption at the bottom right corner of the collapsible area. */
     caption?: string;
+    /** Whether the background should be hidden or not. */
+    hideBackground?: boolean;
 }
-type StyledDetailedCardCollapsibleSectionItemsProps = DetailedCardCollapsibleSectionItemsProps & {};
+type StyledDetailedCardCollapsibleSectionItemsProps = Omit<DetailedCardCollapsibleSectionItemsProps, 'hideBackground'> & {
+    $hideBackground: DetailedCardCollapsibleSectionItemsProps['hideBackground'];
+};
 
 /**
  * The DetailedCardCollapsibleSectionItems Section component.
@@ -1627,6 +1631,8 @@ declare const DetailedCardHeader: Comp<DetailedCardHeaderProps, HTMLDivElement>;
  * Component props.
  */
 interface DetailedCardSectionProps extends ComponentProps<'div'> {
+    /** Props to pass to the badge displayed next to the title. */
+    badge?: Omit<BadgeProps, 'ref'>;
     /** Header. */
     header?: string;
     /** Whether the section is collapsed or not. */

package/index.js

@@ -2362,15 +2362,14 @@ const StyledBadge = styled.div`
 
         &,
         .redsift-icon {
-          color: var(--redsift-color-${$color}-primary);
+          color: ${Object.keys(DataVizColorPalette).includes($color) ? `var(--redsift-data-viz-color-${$color}-darker);` : `var(--redsift-color-${$color}-primary);`};
         }
       `;
   } else {
     return css`
-        background-color: var(--redsift-color-${$color}-primary);
-
-        &,
-        .redsift-icon {
+        background-color: ${Object.keys(DataVizColorPalette).includes($color) ? `var(--redsift-data-viz-color-${$color}-darker);` : `var(--redsift-color-${$color}-primary);`}
+            &,
+          .redsift-icon {
           color: var(--redsift-color-neutral-white);
         }
       `;
@@ -4682,9 +4681,18 @@ var intlMessages = {
  * Component style.
  */
 const StyledDetailedCardCollapsibleSectionItems = styled.div`
-  background-color: var(--redsift-color-neutral-xlightgrey);
-  margin: 8px -16px;
-  padding: 8px 16px;
+  ${_ref => {
+  let {
+    $hideBackground
+  } = _ref;
+  return $hideBackground ? css`
+          background: none;
+        ` : css`
+          background-color: var(--redsift-color-neutral-xlightgrey);
+          margin: 8px -16px;
+          padding: 8px 16px;
+        `;
+}}
 
   .redsift-detailed-card-collapsible-section-items__caption {
     color: var(--redsift-color-neutral-black);
@@ -4698,7 +4706,7 @@ const StyledDetailedCardCollapsibleSectionItems = styled.div`
   }
 `;
 
-const _excluded$f = ["caption", "children", "className"];
+const _excluded$f = ["caption", "children", "className", "hideBackground"];
 const COMPONENT_NAME$i = 'DetailedCardCollapsibleSectionItems';
 const CLASSNAME$i = 'redsift-detailed-card-collapsible-section-items';
 const DEFAULT_PROPS$i = {};
@@ -4710,12 +4718,14 @@ const DetailedCardCollapsibleSectionItems = /*#__PURE__*/forwardRef((props, ref)
   const {
       caption,
       children,
-      className
+      className,
+      hideBackground
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React__default.createElement(StyledDetailedCardCollapsibleSectionItems, _extends$1({}, forwardedProps, {
     className: classNames(DetailedCardCollapsibleSectionItems.className, className),
-    ref: ref
+    ref: ref,
+    $hideBackground: hideBackground
   }), children, caption ? /*#__PURE__*/React__default.createElement("div", {
     className: `${DetailedCardCollapsibleSectionItems.className}__caption`
   }, caption) : null);
@@ -4763,17 +4773,14 @@ const StyledDetailedCardSection = styled.div`
   } = _ref3;
   return !$isCollapsed ? 'auto' : '0px';
 }};
-    margin: ${_ref4 => {
+    ${_ref4 => {
   let {
     $isCollapsed
   } = _ref4;
-  return !$isCollapsed ? '8px -16px' : 'unset';
-}};
-    padding: ${_ref5 => {
-  let {
-    $isCollapsed
-  } = _ref5;
-  return !$isCollapsed ? '8px 16px' : 'unset';
+  return $isCollapsed ? css`
+            margin: unset;
+            padding: unset;
+          ` : '';
 }};
   }
 `;
@@ -4936,7 +4943,7 @@ Text.className = CLASSNAME$h;
 Text.defaultProps = DEFAULT_PROPS$h;
 Text.displayName = COMPONENT_NAME$h;
 
-const _excluded$d = ["children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
+const _excluded$d = ["badge", "children", "className", "header", "isCollapsed", "isCollapsible", "isLoading"];
 const COMPONENT_NAME$g = 'DetailedCardSection';
 const CLASSNAME$g = 'redsift-detailed-card-section';
 const DEFAULT_PROPS$g = {
@@ -4957,6 +4964,7 @@ const hasCollapsibleChildren = children => {
  */
 const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
   const {
+      badge,
       children,
       className,
       header,
@@ -4982,13 +4990,18 @@ const DetailedCardSection = /*#__PURE__*/forwardRef((props, ref) => {
     lineHeight: "22px",
     marginTop: "6px",
     marginBottom: "12px"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    alignItems: "center",
+    gap: "8px"
   }, /*#__PURE__*/React__default.createElement(Text, {
     className: `${DetailedCardSection.className}-header__title`,
     color: "black",
     fontFamily: "raleway",
     fontSize: "18px",
     lineHeight: "22px"
-  }, header)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
+  }, header), badge ? /*#__PURE__*/React__default.createElement(Badge, _extends$1({
+    variant: BadgeVariant.standard
+  }, badge)) : null)) : null, isCollapsible && !isLoading ? /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": stringFormatter.format(isCollapsed ? 'expand' : 'collapse'),
     className: `${DetailedCardSection.className}-header__collapse-button`,
     color: "question",
@@ -9314,11 +9327,7 @@ const DEFAULT_PROPS$4 = {
   unitDisplay: 'short',
   roundingMode: 'halfExpand',
   roundingPriority: 'auto',
-  trailingZeroDisplay: 'auto',
-  minimumIntegerDigits: 1,
-  minimumFractionDigits: 0,
-  minimumSignificantDigits: 1,
-  maximumSignificantDigits: 21
+  trailingZeroDisplay: 'auto'
 };
 
 /**
@@ -9357,17 +9366,23 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
-  const formatter = useNumberFormatter({
+  const formatter = useNumberFormatter(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     compactDisplay,
     currency,
     currencyDisplay,
     currencySign,
-    localeMatcher,
-    maximumFractionDigits,
-    maximumSignificantDigits,
-    minimumFractionDigits,
-    minimumIntegerDigits,
-    minimumSignificantDigits,
+    localeMatcher
+  }, maximumFractionDigits !== undefined && {
+    maximumFractionDigits
+  }), maximumSignificantDigits !== undefined && {
+    maximumSignificantDigits
+  }), minimumFractionDigits !== undefined && {
+    minimumFractionDigits
+  }), minimumIntegerDigits !== undefined && {
+    minimumIntegerDigits
+  }), minimumSignificantDigits !== undefined && {
+    minimumSignificantDigits
+  }), {}, {
     notation,
     numberingSystem,
     // @ts-ignore
@@ -9383,7 +9398,7 @@ const Number$1 = /*#__PURE__*/forwardRef((props, ref) => {
     unit,
     unitDisplay,
     useGrouping
-  });
+  }));
   return /*#__PURE__*/React__default.createElement(StyledNumber, _extends$1({
     as: as
   }, forwardedProps, {