@digital-ai/dot-components 4.7.0 → 4.8.0

package/index.esm.js

@@ -12791,6 +12791,12 @@ function DotDashboardHeader({
 }
 
 const rootClassName$C = 'dot-empty-state';
+const emptyStateImageSizing = {
+  xsmall: 9,
+  dense: 15,
+  normal: 31,
+  large: 49
+};
 const StyledEmptyState = styled.div`
   ${({
   theme
@@ -12806,8 +12812,10 @@ const StyledEmptyState = styled.div`
       }
 
       .empty-state-image {
+        display: inline-flex;
+        justify-content: center;
         min-height: ${theme.spacing(10)};
-        margin-bottom: ${theme.spacing(5)};
+        margin-bottom: ${theme.spacing(3)};
       }
 
       h2 {
@@ -12821,6 +12829,34 @@ const StyledEmptyState = styled.div`
       .dot-button {
         margin-top: ${theme.spacing(4)};
       }
+
+      &.xsmall {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.xsmall)};
+          width: ${theme.spacing(emptyStateImageSizing.xsmall)};
+        }
+      }
+
+      &.dense {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.dense)};
+          width: ${theme.spacing(emptyStateImageSizing.dense)};
+        }
+      }
+
+      &.normal {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.normal)};
+          width: ${theme.spacing(emptyStateImageSizing.normal)};
+        }
+      }
+
+      &.large {
+        .empty-state-image {
+          height: ${theme.spacing(emptyStateImageSizing.large)};
+          width: ${theme.spacing(emptyStateImageSizing.large)};
+        }
+      }
     }
   `}
 `;
@@ -12875,13 +12911,14 @@ const DotEmptyState = ({
   illustrationId,
   imageAltText,
   imageSrc,
+  size = 'normal',
   subtitle,
   title
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$C, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
-    className: rootClasses,
+    className: `${rootClasses} ${size}`,
     "data-testid": dataTestId,
     children: [jsxs("div", {
       className: "empty-state-image-container",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/empty-state/EmptyState.d.ts

@@ -1,5 +1,6 @@
 import { ButtonProps } from '../button';
 import { CommonProps } from '../CommonProps';
+export type EmptyStateSize = 'xsmall' | 'dense' | 'normal' | 'large';
 export interface EmptyStateProps extends CommonProps {
     /** primary button properties */
     buttonProps?: ButtonProps;
@@ -9,9 +10,11 @@ export interface EmptyStateProps extends CommonProps {
     imageAltText?: string;
     /** location of image */
     imageSrc?: string;
+    /** sizing of the empty state (illustration, img) */
+    size?: EmptyStateSize;
     /** subtitle text displayed */
     subtitle?: string;
     /** title text displayed */
     title: string;
 }
-export declare const DotEmptyState: ({ ariaLabel, buttonProps, className, "data-testid": dataTestId, illustrationId, imageAltText, imageSrc, subtitle, title, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotEmptyState: ({ ariaLabel, buttonProps, className, "data-testid": dataTestId, illustrationId, imageAltText, imageSrc, size, subtitle, title, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;