@redsift/design-system 9.0.0-alpha.1 → 9.0.0-alpha.3

package/index.d.ts

@@ -914,7 +914,7 @@ interface SideNavigationMenuProps extends ComponentProps<'div'> {
      */
     icon?: IconProps['icon'];
     /** Custom props to pass to the Icon component. */
-    iconProps?: Omit<IconProps, 'icon'>;
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
     /** Custom ref to pass to the Icon component. */
     iconRef?: MutableRefObject<HTMLElement>;
     /** Whether the component is disabled or not. */
@@ -989,7 +989,7 @@ interface SideNavigationMenuItemProps extends ComponentProps<'a'> {
      */
     icon?: IconProps['icon'];
     /** Custom props to pass to the Icon component. */
-    iconProps?: Omit<IconProps, 'icon'>;
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
     /** Custom ref to pass to the Icon component. */
     iconRef?: RefObject<HTMLElement>;
     /** Whether the component is active or not. */
@@ -1087,12 +1087,6 @@ type AppContainerState = {
     collapseSidePanel(): void;
     /** Expandes the side panel. */
     expandSidePanel(): void;
-    /** Whether the container contains an AppBar or not. */
-    hasAppBar: boolean;
-    /** Whether the container contains an AppSidePanel or not. */
-    hasAppSidePanel: boolean;
-    /** Whether the container contains an AppContent or not. */
-    hasAppContent: boolean;
     /** Product theme. */
     product?: AppContainerProps['product'];
     /** Set breadcrumbs of the page. */
@@ -1128,8 +1122,6 @@ declare const AppContainer: Comp<AppContainerProps, HTMLDivElement>;
  * Component props.
  */
 interface AppContentProps extends ComponentProps<'main'>, StylingProps, ContainerProps {
-    /** Product theme to apply to everything within. This overrides the CSS variables automatically. */
-    product?: Product;
 }
 type StyledAppContentProps = Omit<AppContentProps, 'product'> & {
     $isLoaded: boolean;
@@ -1372,11 +1364,11 @@ declare const Heading: Comp<HeadingProps, HTMLDivElement>;
 /**
  * Component props.
  */
-interface CardHeaderProps extends ComponentProps<'div'> {
+interface CardHeaderProps extends ComponentProps<'div'>, StylingProps, Omit<FlexLayoutProps, 'inline'> {
     /** Header. */
     header?: string;
     /** Heading props allowing to override the component rendered by the heading without changing its style. */
-    headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
+    headingProps?: Pick<HeadingProps, 'as' | 'noWrap' | 'variant'>;
     /** Subheader */
     subheader?: string;
     /**
@@ -1384,6 +1376,8 @@ interface CardHeaderProps extends ComponentProps<'div'> {
      * Can also be a ReactElement.
      */
     icon?: IconProps['icon'];
+    /** Custom props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
     /** Whether the card is loading or not. */
     isLoading?: boolean;
 }

package/index.js

@@ -1,9 +1,9 @@
 import { useLocalizedStringFormatter, I18nProvider, useNumberFormatter } from '@react-aria/i18n';
 export { I18nProvider, useCollator, useDateFormatter, useFilter, useListFormatter, useLocale, useLocalizedStringFormatter, useNumberFormatter } from '@react-aria/i18n';
 export { SSRProvider, useIsSSR } from '@react-aria/ssr';
-import { rsiAsmLong, rsiBrandTrustLong, rsiCertificatesLong, rsiOndmarcLong, rsiRadarLong, rsiRojoDsLong, rsiVendorSecureLong, rsiRedSiftLong, mdiClose as mdiClose$1, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiCircleMedium as mdiCircleMedium$1, mdiChevronDown, mdiMenuOpen, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
+import { rsiAsmHorizontal, rsiBrandTrustHorizontal, rsiCertificatesHorizontal, rsiOndmarcHorizontal, rsiRadarHorizontal, rsiRojoDsHorizontal, rsiVendorSecureHorizontal, rsiRedSiftHorizontal, mdiClose as mdiClose$1, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation, mdiMenu, mdiCircleMedium as mdiCircleMedium$1, mdiChevronDown, mdiMenuOpen, mdiChevronUp, mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline, mdiPageLast, mdiKeyboardCaps, mdiRadioboxMarked, mdiRadioboxBlank } from '@redsift/icons';
 import * as React from 'react';
-import React__default, { useState, useEffect, forwardRef, useRef, useCallback, useContext, useMemo, useReducer, useLayoutEffect } from 'react';
+import React__default, { useState, useEffect, forwardRef, useRef, useCallback, useContext, useReducer, useMemo, useLayoutEffect } from 'react';
 import classNames from 'classnames';
 import styled, { css, keyframes } from 'styled-components';
 import { useFocusRing } from '@react-aria/focus';
@@ -40,14 +40,14 @@ const ProductName = {
   website: 'Website'
 };
 const ProductLogo = {
-  asm: rsiAsmLong,
-  'brand-trust': rsiBrandTrustLong,
-  certificates: rsiCertificatesLong,
-  ondmarc: rsiOndmarcLong,
-  radar: rsiRadarLong,
-  'rojo-ds': rsiRojoDsLong,
-  'vendor-secure': rsiVendorSecureLong,
-  website: rsiRedSiftLong
+  asm: rsiAsmHorizontal,
+  'brand-trust': rsiBrandTrustHorizontal,
+  certificates: rsiCertificatesHorizontal,
+  ondmarc: rsiOndmarcHorizontal,
+  radar: rsiRadarHorizontal,
+  'rojo-ds': rsiRojoDsHorizontal,
+  'vendor-secure': rsiVendorSecureHorizontal,
+  website: rsiRedSiftHorizontal
 };
 
 /**
@@ -1976,7 +1976,7 @@ const StyledAppBar = styled.header`
   height: 92px;
   justify-content: space-between;
   left: 0;
-  position: fixed;
+  position: sticky;
   top: 0;
   z-index: var(--redsift-layout-z-index-header);
 
@@ -2386,7 +2386,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     size: {
       height: 41
     }
-  }) : null), appContainerState !== null && appContainerState !== void 0 && appContainerState.hasAppBar || onOpen ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
+  }) : null), /*#__PURE__*/React__default.createElement(IconButton, _extends$1({
     className: `${AppSidePanel.className}-header__expand-button`
   }, iconButtonProps, {
     "aria-label": stringFormatter.format('expand'),
@@ -2395,7 +2395,7 @@ const AppSidePanel = /*#__PURE__*/forwardRef((props, ref) => {
     ref: iconButtonRef,
     color: "question",
     isDisabled: computedVariant === 'standard'
-  })) : null), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
+  }))), featuredElements ? /*#__PURE__*/React__default.createElement("div", {
     className: `${AppSidePanel.className}__featured`
   }, featuredElements) : null, children);
 });
@@ -3037,21 +3037,6 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
       product
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$C);
-  const {
-    hasAppBar,
-    hasAppSidePanel,
-    hasAppContent
-  } = useMemo(() => {
-    const [[appBar], [appSidePanel], [appContent]] = partitionComponents(React__default.Children.toArray(children), [isComponent('AppBar'), isComponent('AppSidePanel'), isComponent('AppContent')]);
-    return {
-      hasAppBar: Boolean(appBar),
-      hasAppSidePanel: Boolean(appSidePanel),
-      hasAppContent: Boolean(appContent)
-    };
-  }, [children]);
-  if ((hasAppBar || hasAppSidePanel || hasAppContent) && !(hasAppBar && hasAppSidePanel && hasAppContent)) {
-    console.warn('Missing AppSidePanel, AppBar or AppContent inside AppContainer. These components are meant to work together.');
-  }
   const [sidePanelVariant, setSidePanelVariant] = useState(AppSidePanelVariant.standard);
   const [breadcrumbs, setBreadcrumbs] = useState();
   const state = {
@@ -3061,9 +3046,6 @@ const AppContainer = /*#__PURE__*/forwardRef((props, ref) => {
     expandSidePanel() {
       setSidePanelVariant(AppSidePanelVariant.standard);
     },
-    hasAppBar,
-    hasAppSidePanel,
-    hasAppContent,
     setBreadcrumbs(breadcrumbs) {
       setBreadcrumbs(breadcrumbs);
     },
@@ -3991,7 +3973,6 @@ const StyledAppContent = styled.main`
   ${baseContainer}
 
   box-sizing: border-box;
-  margin-top: 92px;
   min-height: calc(100vh - 92px);
   padding: 16px 64px;
 
@@ -4022,7 +4003,7 @@ const StyledAppContent = styled.main`
 }}
 `;
 
-const _excluded$v = ["children", "className", "product"];
+const _excluded$v = ["children", "className"];
 const COMPONENT_NAME$w = 'AppContent';
 const CLASSNAME$w = 'redsift-app-content';
 const DEFAULT_PROPS$w = {};
@@ -4033,8 +4014,7 @@ const DEFAULT_PROPS$w = {};
 const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
-      className,
-      product
+      className
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$v);
   const {
@@ -4044,7 +4024,6 @@ const AppContent = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledAppContent, _extends$1({}, forwardedProps, {
     $isLoaded: isLoaded,
     $isSidePanelCollapsed: appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.shrinked : true,
-    $product: product,
     className: classNames(AppContent.className, className),
     ref: ref
   }), children);
@@ -4183,6 +4162,12 @@ const StyledCard = styled.div`
  * Component style.
  */
 const StyledCardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  ${baseStyling}
+  ${baseFlexbox}
+
   color: var(--redsift-color-neutral-black);
 
   .redsift-card-header__header {
@@ -4194,10 +4179,6 @@ const StyledCardHeader = styled.div`
 
     .redsift-icon {
       color: var(--redsift-color-neutral-black);
-      padding-right: 8px;
-      font-size: 30px;
-      line-height: 30px;
-      height: 30px;
     }
   }
 
@@ -4438,7 +4419,7 @@ const Skeleton = Object.assign(BaseSkeleton, {
   Text: SkeletonText
 });
 
-const _excluded$q = ["children", "className", "header", "headingProps", "icon", "isLoading", "subheader"];
+const _excluded$q = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
 const COMPONENT_NAME$r = 'CardHeader';
 const CLASSNAME$r = 'redsift-card-header';
 const DEFAULT_PROPS$r = {};
@@ -4453,6 +4434,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
       header,
       headingProps,
       icon,
+      iconProps,
       isLoading,
       subheader
     } = props,
@@ -4466,7 +4448,7 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${CardHeader.className}__subheader`
   }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
-    variant: "h2",
+    variant: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.variant) || 'h2',
     isLoaded: !isLoading,
     marginTop: "10px",
     marginBottom: "10px"
@@ -4475,10 +4457,11 @@ const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
     color: "black",
     className: `${CardHeader.className}__header`,
     variant: "h2"
-  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, _extends$1({
     icon: icon,
-    "aria-hidden": "true"
-  }) : null, header)) : null, children);
+    "aria-hidden": "true",
+    size: "large"
+  }, iconProps)) : null, header)) : null, children);
 });
 CardHeader.className = CLASSNAME$r;
 CardHeader.defaultProps = DEFAULT_PROPS$r;