Add Callout component

.eslintrc.cjs

@@ -33,7 +33,7 @@ module.exports = {
   'rules': {
     'react/display-name': 'off',
     'no-unused-vars': [0],
-    'indent': ['error', 2],
+    'indent': ['error', 2, {'SwitchCase': 1}],
     'react/prop-types': [0],
     'linebreak-style': ['error', 'unix'],
     'quotes': ['error', 'single'],

src/layers/Callout/Callout.story.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Stack } from '@/layout';
+import { Text } from '@/typography';
+
+import {
+  Callout,
+  SuccessCallout,
+  WarningCallout,
+  ErrorCallout,
+  InfoCallout
+} from '@/layers';
+
+import CalendarIcon from '@/assets/icons/calendar.svg?react';
+
+export default {
+  title: 'Components/Layers/Callout',
+  component: Callout
+};
+
+export const Simple = () => (
+  <div className="w-[80%]">
+    <Callout text="You will need admin privileges to install and access this application." />
+  </div>
+);
+
+export const Variants = () => (
+  <Stack direction="column" className="w-full">
+    <Callout text="You will need admin privileges to install and access this application." />
+    <SuccessCallout text="You will need admin privileges to install and access this application." />
+    <WarningCallout text="You will need admin privileges to install and access this application." />
+    <ErrorCallout text="You will need admin privileges to install and access this application." />
+    <InfoCallout text="You will need admin privileges to install and access this application." />
+  </Stack>
+);
+
+export const CustomIcon = () => (
+  <div className="w-[80%]">
+    <InfoCallout
+      icon={<CalendarIcon />}
+      text="You will need admin privileges to install and access this application."
+    />
+  </div>
+);
+
+export const CustomText = () => (
+  <div className="w-[80%]">
+    <InfoCallout
+      variant="info"
+      text={
+        <Text>
+          You will need{' '}
+          <Text fontStyle="bold" color="warning">
+            admin
+          </Text>{' '}
+          privileges to install and access this application.
+        </Text>
+      }
+    />
+  </div>
+);

src/layers/Callout/Callout.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode } from 'react';
+import { Stack } from '@/layout';
+import { cn, useComponentTheme } from '@/utils';
+import { CalloutTheme } from './CalloutTheme';
+
+export interface CalloutProps {
+  /**
+   * The text of the callout.
+   */
+  text: string | ReactNode;
+
+  /**
+   * The icon of the callout.
+   */
+  icon?: ReactNode;
+
+  /**
+   * The variant of the callout.
+   */
+  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+
+  /**
+   * The theme of the callout.
+   */
+  theme?: CalloutTheme;
+}
+
+export const Callout: FC<CalloutProps> = ({
+  text,
+  icon,
+  variant = 'default',
+  theme: customTheme
+}) => {
+  const theme = useComponentTheme('callout', customTheme);
+
+  return (
+    <Stack className={cn(theme.base.common, theme.base.variant[variant])}>
+      {icon && (
+        <div className={cn(theme.icon.common, theme.icon.variant[variant])}>
+          {icon}
+        </div>
+      )}
+      <div className={theme.text}>{text}</div>
+    </Stack>
+  );
+};

src/layers/Callout/CalloutTheme.ts

@@ -0,0 +1,51 @@
+export interface CalloutTheme {
+  base: {
+    common: string;
+    variant: {
+      default: string;
+      success: string;
+      error: string;
+      warning: string;
+      info: string;
+      [key: string]: string;
+    };
+  };
+  icon: {
+    common: string;
+    variant: {
+      default: string;
+      success: string;
+      error: string;
+      warning: string;
+      info: string;
+      [key: string]: string;
+    };
+  };
+  text: string;
+}
+
+export const calloutTheme: CalloutTheme = {
+  base: {
+    common: 'px-4 py-3 border-b',
+    variant: {
+      default: 'bg-panel-background border-panel-accent',
+      success: 'bg-success-background border-success',
+      error: 'bg-error-background border-error',
+      warning: 'bg-warning-background border-warning',
+      info: 'bg-info-background border-info'
+    }
+  },
+  icon: {
+    common: '',
+    variant: {
+      default: '',
+      success: 'text-success',
+      error: 'text-error',
+      warning: 'text-warning',
+      info: 'text-info'
+    }
+  },
+  text: 'text-base'
+};
+
+export const legacyCalloutTheme: CalloutTheme = calloutTheme;

src/layers/Callout/ErrorCallout.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { Callout, CalloutProps } from './Callout';
+
+import ErrorCircleIcon from '@/assets/icons/error_circle.svg?react';
+
+export const ErrorCallout: FC<CalloutProps> = ({ icon, text, theme }) => (
+  <Callout
+    icon={icon ?? <ErrorCircleIcon />}
+    text={text}
+    variant="error"
+    theme={theme}
+  />
+);

src/layers/Callout/InfoCallout.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { Callout, CalloutProps } from './Callout';
+
+import InfoIcon from '@/assets/icons/info.svg?react';
+
+export const InfoCallout: FC<CalloutProps> = ({ icon, text, theme }) => (
+  <Callout
+    icon={icon ?? <InfoIcon />}
+    text={text}
+    variant="info"
+    theme={theme}
+  />
+);

src/layers/Callout/SuccessCallout.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { Callout, CalloutProps } from './Callout';
+
+import CheckCircleIcon from '@/assets/icons/check_circle.svg?react';
+
+export const SuccessCallout: FC<CalloutProps> = ({ icon, text, theme }) => (
+  <Callout
+    icon={icon ?? <CheckCircleIcon />}
+    text={text}
+    variant="success"
+    theme={theme}
+  />
+);

src/layers/Callout/WarningCallout.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { Callout, CalloutProps } from './Callout';
+
+import WarningIcon from '@/assets/icons/warning.svg?react';
+
+export const WarningCallout: FC<CalloutProps> = ({ icon, text, theme }) => (
+  <Callout
+    icon={icon ?? <WarningIcon />}
+    text={text}
+    variant="warning"
+    theme={theme}
+  />
+);

src/layers/Callout/index.ts

@@ -0,0 +1,6 @@
+export * from './Callout';
+export * from './CalloutTheme';
+export * from './SuccessCallout';
+export * from './ErrorCallout';
+export * from './WarningCallout';
+export * from './InfoCallout';

src/layers/index.ts

@@ -6,3 +6,4 @@ export * from './Menu';
 export * from './ContextMenu';
 export * from './Notification';
 export * from './Backdrop';
+export * from './Callout';

src/utils/Theme/themes/theme.ts

@@ -79,7 +79,10 @@ import {
   MenuTheme,
   NotificationTheme,
   PopoverTheme,
-  TooltipTheme
+  TooltipTheme,
+  CalloutTheme,
+  calloutTheme,
+  legacyCalloutTheme
 } from '@/layers';
 
 import {
@@ -190,6 +193,7 @@ export interface ReablocksTheme {
     tabs: TabsTheme;
     breadcrumbs: BreadcrumbsTheme;
     stepper: StepperTheme;
+    callout: CalloutTheme;
   };
 }
 
@@ -237,7 +241,8 @@ export const theme: ReablocksTheme = {
     tabs: tabsTheme,
     jsonTree: jsonTreeTheme,
     breadcrumbs: breadcrumbsTheme,
-    stepper: stepperTheme
+    stepper: stepperTheme,
+    callout: calloutTheme
   }
 };
 
@@ -285,6 +290,7 @@ export const legacyThemeVars: ReablocksTheme = {
     tabs: legacyTabsTheme,
     jsonTree: legacyJsonTreeTheme,
     breadcrumbs: legacyBreadcrumbTheme,
-    stepper: legacyStepperTheme
+    stepper: legacyStepperTheme,
+    callout: legacyCalloutTheme
   }
 };