@pushwoosh/dumb-components 2.3.0 → 2.4.0

package/Banner/Banner.d.ts

@@ -3,8 +3,11 @@ import type { BannerPropsWithButton, RequiredBannerProps } from './types';
 /**
  * Prominent page-level message with severity styling, an optional action button,
  * a loading state and a dismiss button. Hides itself once closed.
+ * Needs a non-empty `title`, body content (`children`), or both; with neither it renders nothing.
  *
  * @example
  * <Banner type="success" title="Saved" canBeClosed action={{ buttonText: 'Undo', onClick: undo }} />
+ * @example
+ * <Banner type="warning" view="ghost">Only a description, no title</Banner>
  */
 export declare function Banner(props: RequiredBannerProps | BannerPropsWithButton): ReactElement | null;

package/Banner/Banner.js

@@ -9,9 +9,12 @@ import { ActionButton, BannerContent, BannerSpinner, CloseButton, IconContainer
 /**
  * Prominent page-level message with severity styling, an optional action button,
  * a loading state and a dismiss button. Hides itself once closed.
+ * Needs a non-empty `title`, body content (`children`), or both; with neither it renders nothing.
  *
  * @example
  * <Banner type="success" title="Saved" canBeClosed action={{ buttonText: 'Undo', onClick: undo }} />
+ * @example
+ * <Banner type="warning" view="ghost">Only a description, no title</Banner>
  */
 export function Banner(props) {
   const [isOpen, setIsOpen] = useState(true);
@@ -48,6 +51,12 @@ export function Banner(props) {
     console.error(`[Banner]: required prop type "${type}" is not set`);
     return null;
   }
+  const hasTitle = title !== undefined && title !== '';
+  const hasChildren = children !== undefined && children !== null && typeof children !== 'boolean';
+  if (!hasTitle && !hasChildren) {
+    console.error('[Banner]: neither title nor children is set');
+    return null;
+  }
   const BannerBox = BannerPropsToBannerBoxMap[view];
   if (!BannerBox) {
     console.error(`[Banner]: cannot render with type "${type}" and view "${view}"`);
@@ -71,10 +80,10 @@ export function Banner(props) {
         view: "filled"
       })
     }), _jsxs(BannerContent, {
-      "$hasChildren": !!children,
-      children: [_jsx(H4, {
+      "$hasTitleAndChildren": hasTitle && hasChildren,
+      children: [hasTitle && _jsx(H4, {
         children: title
-      }), children && _jsx("div", {
+      }), hasChildren && _jsx("div", {
         children: children
       })]
     }), action && _jsx(Vertical, {

package/Banner/__tests__/Banner.test.d.ts

@@ -0,0 +1 @@
+export {};

package/Banner/__tests__/Banner.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { Banner } from '../Banner';
+describe('Banner', () => {
+  let consoleError;
+  beforeEach(() => {
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleError.mockRestore();
+  });
+  it('renders a title without children', () => {
+    render(_jsx(Banner, {
+      type: "info",
+      title: "Heading"
+    }));
+    expect(screen.getByText('Heading')).toBeInTheDocument();
+  });
+  it('renders children without a title', () => {
+    const {
+      container
+    } = render(_jsx(Banner, {
+      type: "info",
+      children: "Description"
+    }));
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(container.querySelector('h4')).toBeNull();
+  });
+  it('renders numeric zero children', () => {
+    render(_jsx(Banner, {
+      type: "info",
+      children: 0
+    }));
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+  it('skips an empty title but keeps the children', () => {
+    const {
+      container
+    } = render(_jsx(Banner, {
+      type: "info",
+      title: "",
+      children: "Description"
+    }));
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(container.querySelector('h4')).toBeNull();
+  });
+  it('renders nothing and reports when there is neither title nor children', () => {
+    const {
+      container
+    } = render(_jsx(Banner, {
+      type: "info",
+      title: ""
+    }));
+    expect(container).toBeEmptyDOMElement();
+    expect(consoleError).toHaveBeenCalledWith('[Banner]: neither title nor children is set');
+  });
+});

package/Banner/styles.d.ts

@@ -12,7 +12,7 @@ export declare const BannerBox: import("styled-components").StyledComponent<"div
     $isLoading: boolean;
 }, never>;
 export declare const BannerContent: import("styled-components").StyledComponent<"div", any, {
-    $hasChildren?: boolean;
+    $hasTitleAndChildren?: boolean;
 }, never>;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const BannerShape: import("styled-components").StyledComponent<"div", any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {

package/Banner/styles.js

@@ -28,8 +28,8 @@ export const BannerContent = styled.div.withConfig({
   displayName: "BannerContent",
   componentId: "sc-9uu4ap-4"
 })(["flex-grow:1;padding:", ";color:", ";"], ({
-  $hasChildren
-}) => $hasChildren ? '16px' : '8px 16px', colors.error.shape.base.color);
+  $hasTitleAndChildren
+}) => $hasTitleAndChildren ? '16px' : '8px 16px', colors.error.shape.base.color);
 export const IconContainer = styled.div.withConfig({
   displayName: "IconContainer",
   componentId: "sc-9uu4ap-5"

package/Banner/types.d.ts

@@ -1,14 +1,11 @@
 import type { ReactElement, ReactNode } from 'react';
 /** Severity of a {@link Banner}, driving its icon and colors. */
 export type BannerType = 'error' | 'warning' | 'info' | 'success';
-/** Base props of {@link Banner}. */
-export type RequiredBannerProps = {
+type BannerBaseProps = {
     /** Ref to the banner root element. */
     readonly boxRef?: any;
     /** Severity — sets the default icon and colors. */
     readonly type: BannerType;
-    /** Banner heading. */
-    readonly title: string;
     /** Surface style: `shape` (filled, default) or `ghost`. */
     readonly view?: 'shape' | 'ghost';
     /** Custom icon; falls back to the type's default icon. */
@@ -21,9 +18,20 @@ export type RequiredBannerProps = {
     readonly canBeClosed?: boolean;
     /** Fires when the close button is clicked. */
     readonly onClose?: () => void;
+};
+type BannerContentProps = {
+    /** Banner heading; an empty string counts as no title. */
+    readonly title: string;
     /** Body content under the title. */
     readonly children?: ReactNode;
+} | {
+    /** Banner heading; may be omitted when the body content is set. */
+    readonly title?: string;
+    /** Body content, shown alone when there is no title. */
+    readonly children: Exclude<ReactNode, null | undefined | boolean>;
 };
+/** Base props of {@link Banner}: a title, body content, or both. */
+export type RequiredBannerProps = BannerBaseProps & BannerContentProps;
 /** {@link Banner} props with an optional action button. */
 export type BannerPropsWithButton = RequiredBannerProps & {
     /** Action button shown on the right. */
@@ -34,3 +42,4 @@ export type BannerPropsWithButton = RequiredBannerProps & {
         readonly buttonText: string;
     };
 };
+export {};

package/Tooltip/styles.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import { Color, FontSize, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { DEFAULT_MAX_WIDTH } from './constants';
-const clearBox = css(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";"], Color.MAIN, Color.CLEAR, Color.FORM, Shadow.REGULAR);
+const clearBox = css(["padding:16px;color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ";"], Color.MAIN, Color.CLEAR, Color.FORM, Shadow.LARGE);
 export const TooltipBox = styled.div.withConfig({
   displayName: "TooltipBox",
   componentId: "sc-1hariht-0"

package/Tooltip/types.d.ts

@@ -7,7 +7,7 @@ export type TooltipColor = 'main' | 'clear';
 export type TooltipProps = {
     /** Tooltip content. */
     readonly content: ReactNode;
-    /** Background color (default `main`); `clear` is a card on the page background, with border and shadow. */
+    /** Background color (default `main`); `clear` is a card on the page background: 16px padding, border and large shadow. */
     readonly color?: TooltipColor;
     /** Placement relative to the anchor (default `top-start`). */
     readonly position?: TooltipPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -40,8 +40,8 @@
     "@codemirror/view": "^6.43.11",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
-    "@pushwoosh/kit-constants": "^2.0.0",
-    "@pushwoosh/kit-helpers": "^4.12.5",
+    "@pushwoosh/kit-constants": "^2.1.0",
+    "@pushwoosh/kit-helpers": "^4.12.7",
     "@pushwoosh/kit-icons": "^2.3.3",
     "@pushwoosh/kit-typography": "^1.8.5",
     "@tippyjs/react": "^4.2.6",