@sonardigital/carbon-ui 1.1.40 → 1.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonardigital/carbon-ui",
-  "version": "1.1.40",
+  "version": "1.1.41",
   "description": "",
   "main": "src/index.ts",
   "files": [

package/src/components/layout/delay/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export const Delay: React.FC<{
+  time: number;
+  children?: React.ReactNode;
+  fallback: React.ReactNode;
+}> = ({ time, children, fallback }) => {
+  const [shouldRender, setShouldRender] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShouldRender(true);
+    }, time);
+
+    return () => clearTimeout(timer);
+  }, [time]);
+
+  return shouldRender ? children : fallback;
+};

package/src/components/layout/error-boundary/index.tsx

@@ -0,0 +1,51 @@
+import React, { Component, Suspense } from 'react';
+import { Delay } from '../delay';
+
+interface Props {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  time?: number;
+  delay?: boolean;
+  isLoading?: boolean | (undefined | null | boolean)[];
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(): void {
+    this.setState({ hasError: true });
+  }
+
+  render(): React.ReactElement | React.ReactNode {
+    const { isLoading, fallback, children, delay, time } = this.props;
+
+    // eslint-disable-next-line
+    // @ts-ignore
+    if ([isLoading]?.flat()?.includes(true)) {
+      return fallback;
+    }
+
+    if (this.state.hasError) {
+      return 'Error while rendering the section';
+    }
+
+    return (
+      <Suspense fallback={fallback}>
+        {delay && time !== 0 ? (
+          <Delay time={time ?? 0} fallback={fallback}>
+            {children}
+          </Delay>
+        ) : (
+          children
+        )}
+      </Suspense>
+    );
+  }
+}

package/src/components/layout/index.ts

@@ -1,3 +1,5 @@
 export * from './Drawer_';
 export * from './Dropdown';
 export * from './ScrollToTop/ScrollToTop';
+export * from './error-boundary';
+export * from './delay';

package/src/theme/constants/typography.ts

@@ -14,7 +14,7 @@ export const typography = {
     fontWeight: 500,
   },
   h4: {
-    fontSize: '2.5rem',
+    fontSize: '2.2rem',
     fontWeight: 500,
   },
   h5: {
@@ -27,7 +27,7 @@ export const typography = {
     fontWeight: 350,
   },
   body2: {
-    fontSize: '1.8rem',
+    fontSize: '1.7rem',
     fontWeight: 350,
     lineHeight: 1.5,
   },