@pautena/react-design-system 0.11.1 → 0.12.0

package/dist/esm/types/components/data-display/header/header-title.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+export type HeaderTitleProps = PropsWithChildren<{
+    loading?: boolean;
+}>;
+export declare const HeaderTitle: ({ loading, children }: HeaderTitleProps) => JSX.Element;
+export type HeaderSubtitleProps = PropsWithChildren<{
+    loading?: boolean;
+}>;
+export declare const HeaderSubtitle: ({ loading, children }: HeaderSubtitleProps) => JSX.Element;

package/dist/esm/types/components/data-display/header/header.types.d.ts

@@ -38,11 +38,19 @@ export type HeaderProps = {
     /**
      * Title of the header
      */
-    title: string;
+    title?: string | ReactElement;
+    /**
+     * Show a loading indicator in the title position
+     */
+    loadingTitle?: boolean;
     /**
      * Subtitle of the header
      */
-    subtitle?: string;
+    subtitle?: string | ReactElement;
+    /**
+     * Show a loading indicator in the subtitle position
+     */
+    loadingSubtitle?: boolean;
     /**
      * Color palete used to render the component
      */

package/dist/esm/types/components/data-display/header/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./header";
 export * from "./header.types";
+export * from "./header-title";

package/dist/esm/types/components/inputs/action/action-header.d.ts

@@ -0,0 +1,9 @@
+import { Variant } from "@mui/material/styles/createTypography";
+type ActionVariant = "primary" | "error" | "warning" | "success";
+export interface ActionHeaderProps {
+    variant?: ActionVariant;
+    title: string;
+    titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
+}
+export declare const ActionHeader: ({ title, titleVariant, variant, }: ActionHeaderProps) => JSX.Element;
+export {};

package/dist/esm/types/components/inputs/action/action.d.ts

@@ -4,6 +4,7 @@ export type ActionVariant = "primary" | "error" | "warning" | "success";
 export interface ActionProps {
     variant: ActionVariant;
     title: string;
+    titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
     description?: string | ReactElement;
     descriptionVariant?: Variant;
     helperText?: string;
@@ -15,4 +16,4 @@ export interface ActionProps {
     passphrase?: string;
     onAction: () => void;
 }
-export declare const Action: ({ variant, title, description, descriptionVariant, buttonText, helperText, helperTextVariant, confirmable, passphrase, confirmTitle, confirmDescription, onAction, }: ActionProps) => JSX.Element;
+export declare const Action: ({ variant, title, titleVariant, description, descriptionVariant, buttonText, helperText, helperTextVariant, confirmable, passphrase, confirmTitle, confirmDescription, onAction, }: ActionProps) => JSX.Element;

package/dist/esm/types/components/inputs/action/index.d.ts

@@ -1 +1,2 @@
 export * from "./action";
+export * from "./action-header";

package/dist/index.d.ts

@@ -270,11 +270,19 @@ type HeaderProps = {
     /**
      * Title of the header
      */
-    title: string;
+    title?: string | ReactElement;
+    /**
+     * Show a loading indicator in the title position
+     */
+    loadingTitle?: boolean;
     /**
      * Subtitle of the header
      */
-    subtitle?: string;
+    subtitle?: string | ReactElement;
+    /**
+     * Show a loading indicator in the subtitle position
+     */
+    loadingSubtitle?: boolean;
     /**
      * Color palete used to render the component
      */
@@ -318,6 +326,15 @@ type HeaderElement = ReactElement<HeaderProps, HeaderComponent>;
  */
 declare const Header: HeaderComponent;
 
+type HeaderTitleProps = PropsWithChildren<{
+    loading?: boolean;
+}>;
+declare const HeaderTitle: ({ loading, children }: HeaderTitleProps) => JSX.Element;
+type HeaderSubtitleProps = PropsWithChildren<{
+    loading?: boolean;
+}>;
+declare const HeaderSubtitle: ({ loading, children }: HeaderSubtitleProps) => JSX.Element;
+
 type BoardProps = PropsWithChildren<{
     markdown?: string;
     content?: string | string[];
@@ -559,10 +576,11 @@ type TextFieldProps = TextFieldProps$1 & {
 };
 declare const TextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: TextFieldProps) => JSX.Element;
 
-type ActionVariant = "primary" | "error" | "warning" | "success";
+type ActionVariant$1 = "primary" | "error" | "warning" | "success";
 interface ActionProps {
-    variant: ActionVariant;
+    variant: ActionVariant$1;
     title: string;
+    titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
     description?: string | ReactElement;
     descriptionVariant?: Variant;
     helperText?: string;
@@ -574,7 +592,15 @@ interface ActionProps {
     passphrase?: string;
     onAction: () => void;
 }
-declare const Action: ({ variant, title, description, descriptionVariant, buttonText, helperText, helperTextVariant, confirmable, passphrase, confirmTitle, confirmDescription, onAction, }: ActionProps) => JSX.Element;
+declare const Action: ({ variant, title, titleVariant, description, descriptionVariant, buttonText, helperText, helperTextVariant, confirmable, passphrase, confirmTitle, confirmDescription, onAction, }: ActionProps) => JSX.Element;
+
+type ActionVariant = "primary" | "error" | "warning" | "success";
+interface ActionHeaderProps {
+    variant?: ActionVariant;
+    title: string;
+    titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
+}
+declare const ActionHeader: ({ title, titleVariant, variant, }: ActionHeaderProps) => JSX.Element;
 
 interface TabData {
     text: string;
@@ -1084,4 +1110,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { Action, ActionProps, ActionVariant, ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DateRangeCalendar, DateRangeCalendarProps, DateRangePicker, DateRangePickerProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, ListPanel, ListPanelContext, ListPanelContextProvider, ListPanelItem, ListPanelProps, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardPanel, TabCardPanelProps, TabCardProps, TabContext, TabContextProvider, TabData, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueLabel, ValueLabelProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useListPanel, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };
+export { Action, ActionHeader, ActionHeaderProps, ActionProps, ActionVariant$1 as ActionVariant, ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DateRangeCalendar, DateRangeCalendarProps, DateRangePicker, DateRangePickerProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderSubtitle, HeaderSubtitleProps, HeaderTab, HeaderTitle, HeaderTitleProps, IdleRequest, Label, LabelProps, LabelVariant, ListPanel, ListPanelContext, ListPanelContextProvider, ListPanelItem, ListPanelProps, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardPanel, TabCardPanelProps, TabCardProps, TabContext, TabContextProvider, TabData, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueLabel, ValueLabelProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useListPanel, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/data-display/header/header-title.tsx

@@ -0,0 +1,51 @@
+import { CircularProgress, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { PropsWithChildren } from "react";
+
+export type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;
+
+export const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {
+  const { typography } = useTheme();
+
+  if (loading) {
+    return (
+      <CircularProgress color="inherit" size={typography.h4.fontSize} aria-label="title loading" />
+    );
+  }
+
+  if (typeof children === "string") {
+    return (
+      <Typography variant="h4" role="heading" aria-level={1}>
+        {children}
+      </Typography>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;
+
+export const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {
+  const { typography } = useTheme();
+
+  if (loading) {
+    return (
+      <CircularProgress
+        color="inherit"
+        size={typography.body1.fontSize}
+        aria-label="subtitle loading"
+      />
+    );
+  }
+
+  if (typeof children === "string") {
+    return (
+      <Typography variant="body1" role="heading" aria-level={2}>
+        {children}
+      </Typography>
+    );
+  }
+
+  return <>{children}</>;
+};

package/src/components/data-display/header/header.stories.tsx

@@ -9,6 +9,7 @@ import { Content } from "~/components/containers";
 import { Box, Typography } from "@mui/material";
 import { TabPanel } from "~/components/navigation/tab-panel";
 import { Route, Routes, useLocation } from "react-router-dom";
+import { Label } from "../label";
 
 export default {
   title: "Components/Data Display/Header",
@@ -24,7 +25,7 @@ export const Default: Story = {
   args: {
     title: "Lorem ipsum",
     subtitle: "Dolor sit amet",
-    preset: "inherit",
+    preset: "default",
     breadcrumbs,
     actions,
   },
@@ -36,6 +37,44 @@ export const OnlyTitle: Story = {
   },
 };
 
+export const CustomTitle: Story = {
+  args: {
+    ...Default.args,
+    title: (
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <Typography variant="h6">Lorem ipsum</Typography>
+        <Label variant="primary" text="4 items" sx={{ ml: 1 }} />
+      </Box>
+    ),
+  },
+};
+
+export const TitleLoading: Story = {
+  args: {
+    ...Default.args,
+    loadingTitle: true,
+  },
+};
+
+export const CustomSubtitle: Story = {
+  args: {
+    ...Default.args,
+    subtitle: (
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <Typography variant="body2">Dolor sit amet</Typography>
+        <Label variant="error" text="since yesterday" sx={{ ml: 1 }} />
+      </Box>
+    ),
+  },
+};
+
+export const SubtitleLoading: Story = {
+  args: {
+    ...Default.args,
+    loadingSubtitle: true,
+  },
+};
+
 export const ColorInherit: Story = {
   args: {
     title: "Lorem ipsum",

package/src/components/data-display/header/header.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { Header } from "./header";
@@ -13,12 +13,17 @@ import {
 import { breadcrumbs, actions as actionsData, tabs, linkedTabs } from "./header.dummy";
 import { TabProvider } from "../../../providers";
 import { WithLinkedTabs, WithPanelTabs } from "./header.stories";
+import { Typography } from "@mui/material";
+import { Box } from "@mui/system";
+import { Label } from "../label";
 
 const actions = actionsData.map((a) => ({ ...a, onClick: a.onClick && vi.fn() }));
 
 const renderInstance = ({
   title = "Lorem ipsum",
+  loadingTitle,
   subtitle,
+  loadingSubtitle,
   preset = "default",
   breadcrumbs,
   actions,
@@ -27,8 +32,10 @@ const renderInstance = ({
   selectedTab,
   navigationButton,
 }: {
-  title?: string;
-  subtitle?: string | undefined;
+  title?: string | ReactElement;
+  subtitle?: string | ReactElement;
+  loadingTitle?: boolean;
+  loadingSubtitle?: boolean;
   preset?: HeaderPreset;
   breadcrumbs?: HeaderBreadcrumb[];
   actions?: HeaderAction[];
@@ -41,7 +48,9 @@ const renderInstance = ({
     <TabProvider initialValue={selectedTab}>
       <Header
         title={title}
+        loadingTitle={loadingTitle}
         subtitle={subtitle}
+        loadingSubtitle={loadingSubtitle}
         preset={preset}
         breadcrumbs={breadcrumbs}
         actions={actions}
@@ -56,14 +65,39 @@ const renderInstance = ({
 };
 
 describe("Header", () => {
-  it("renders the title", () => {
-    renderInstance({ title: "Lorem ipsum" });
+  describe("title", () => {
+    it("should render the title", () => {
+      renderInstance({ title: "Lorem ipsum" });
 
-    expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+      expect(screen.getByRole("heading", { level: 1, name: /lorem ipsum/i })).toBeInTheDocument();
+    });
+
+    it("should render the custom title", () => {
+      renderInstance({
+        title: (
+          <Box display="flex" flexDirection="row" alignItems="center">
+            <Typography variant="h6">custom title</Typography>
+            <Label variant="primary" text="4 items" sx={{ ml: 1 }} />
+          </Box>
+        ),
+      });
+
+      expect(screen.getByRole("heading", { level: 6, name: /custom title/i })).toBeVisible();
+      expect(screen.getByText(/4 items/i)).toBeVisible();
+    });
+
+    it("should render a loading indicator if title is loading", () => {
+      renderInstance({ title: "Lorem ipsum", loadingTitle: true });
+
+      expect(
+        screen.queryByRole("heading", { level: 1, name: /lorem ipsum/i }),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByRole("progressbar", { name: /title loading/i })).toBeInTheDocument();
+    });
   });
 
   describe("subtitle", () => {
-    it("should renders when is set", () => {
+    it("should render when is set", () => {
       renderInstance({ subtitle: "sit amet" });
 
       expect(screen.queryByRole("heading", { level: 2, name: /sit amet/i })).toBeInTheDocument();
@@ -74,6 +108,27 @@ describe("Header", () => {
 
       expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
     });
+
+    it("should render the custom title", () => {
+      renderInstance({
+        subtitle: (
+          <Box display="flex" flexDirection="row" alignItems="center">
+            <Typography variant="body2">Dolor sit amet</Typography>
+            <Label variant="error" text="since yesterday" sx={{ ml: 1 }} />
+          </Box>
+        ),
+      });
+
+      expect(screen.getByText(/dolor sit amet/i)).toBeVisible();
+      expect(screen.getByText(/since yesterday/i)).toBeVisible();
+    });
+
+    it("should render a loading indicator if title is loading", () => {
+      renderInstance({ subtitle: "sit amet", loadingSubtitle: true });
+
+      expect(screen.queryByRole("heading", { level: 2 })).not.toBeInTheDocument();
+      expect(screen.queryByRole("progressbar", { name: /subtitle loading/i })).toBeInTheDocument();
+    });
   });
 
   describe("breadcrumbs", () => {

package/src/components/data-display/header/header.tsx

@@ -14,14 +14,17 @@ import { useGetDefaultThemeColor } from "../../../utils";
 import { HeaderComponent, HeaderPreset, HeaderProps } from "./header.types";
 import { useTab } from "~/providers";
 import { useLocation } from "react-router-dom";
+import { HeaderSubtitle, HeaderTitle } from "./header-title";
 
 /**
  * Section used to explain give basic information about the page
  * and put the main actions
  */
 export const Header: HeaderComponent = ({
-  title,
+  title = "",
+  loadingTitle,
   subtitle,
+  loadingSubtitle,
   preset = "default",
   actionsVariant = "outlined",
   breadcrumbs,
@@ -93,13 +96,9 @@ export const Header: HeaderComponent = ({
                 ))}
               </Breadcrumbs>
             )}
-            <Typography variant="h4" role="heading" aria-level={1}>
-              {title}
-            </Typography>
-            {subtitle && (
-              <Typography variant="body1" role="heading" aria-level={2}>
-                {subtitle}
-              </Typography>
+            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>
+            {(subtitle || loadingSubtitle) && (
+              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>
             )}
           </Box>
           {actions && (

package/src/components/data-display/header/header.types.ts

@@ -44,11 +44,19 @@ export type HeaderProps = {
   /**
    * Title of the header
    */
-  title: string;
+  title?: string | ReactElement;
+  /**
+   * Show a loading indicator in the title position
+   */
+  loadingTitle?: boolean;
   /**
    * Subtitle of the header
    */
-  subtitle?: string;
+  subtitle?: string | ReactElement;
+  /**
+   * Show a loading indicator in the subtitle position
+   */
+  loadingSubtitle?: boolean;
   /**
    * Color palete used to render the component
    */

package/src/components/data-display/header/index.ts

@@ -1,2 +1,3 @@
 export * from "./header";
 export * from "./header.types";
+export * from "./header-title";

package/src/components/inputs/action/action-header.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+import { ActionHeader } from "./action-header";
+import React from "react";
+
+describe("ActionHeader", () => {
+  it("should render the title", () => {
+    render(<ActionHeader title="Lorem ipsum" />);
+
+    expect(screen.getByRole("heading", { name: /lorem ipsum/i, level: 4 }));
+  });
+});

package/src/components/inputs/action/action-header.tsx

@@ -0,0 +1,37 @@
+import { Typography, useTheme } from "@mui/material";
+import { Variant } from "@mui/material/styles/createTypography";
+import React from "react";
+
+type ActionVariant = "primary" | "error" | "warning" | "success";
+
+export interface ActionHeaderProps {
+  variant?: ActionVariant;
+  title: string;
+  titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
+}
+
+export const ActionHeader = ({
+  title,
+  titleVariant = "h4",
+  variant = "primary",
+}: ActionHeaderProps) => {
+  const { palette } = useTheme();
+
+  const titleColor: Record<ActionVariant, string | undefined> = {
+    primary: undefined,
+    error: "error",
+    warning: palette.warning.main,
+    success: palette.success.main,
+  };
+  return (
+    <Typography
+      color={titleColor[variant]}
+      variant={titleVariant}
+      pb={1}
+      borderBottom={1}
+      borderColor="grey.300"
+    >
+      {title}
+    </Typography>
+  );
+};

package/src/components/inputs/action/action.tsx

@@ -1,13 +1,15 @@
-import { Grid, Button, Typography, useTheme, DialogContentText } from "@mui/material";
+import { Grid, Button, Typography, DialogContentText } from "@mui/material";
 import { Variant } from "@mui/material/styles/createTypography";
 import React, { ReactElement } from "react";
 import { ConfirmDialog, useDialog } from "~/components/dialogs";
+import { ActionHeader } from "./action-header";
 
 export type ActionVariant = "primary" | "error" | "warning" | "success";
 
 export interface ActionProps {
   variant: ActionVariant;
   title: string;
+  titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
   description?: string | ReactElement;
   descriptionVariant?: Variant;
   helperText?: string;
@@ -23,6 +25,7 @@ export interface ActionProps {
 export const Action = ({
   variant = "primary",
   title,
+  titleVariant = "h4",
   description,
   descriptionVariant = "body2",
   buttonText,
@@ -35,7 +38,6 @@ export const Action = ({
   onAction,
 }: ActionProps) => {
   const { isOpen, open, close } = useDialog();
-  const { palette } = useTheme();
 
   const handleClickActionButton = () => {
     if (confirmable) {
@@ -50,26 +52,11 @@ export const Action = ({
     close;
   };
 
-  const titleColor: Record<ActionVariant, string | undefined> = {
-    primary: undefined,
-    error: "error",
-    warning: palette.warning.main,
-    success: palette.success.main,
-  };
-
   return (
     <>
       <Grid container spacing={1}>
         <Grid item xs={12} mb={2}>
-          <Typography
-            color={titleColor[variant]}
-            variant="h4"
-            pb={1}
-            borderBottom={1}
-            borderColor="grey.300"
-          >
-            {title}
-          </Typography>
+          <ActionHeader title={title} titleVariant={titleVariant} />
         </Grid>
         {description && (
           <Grid item xs={12}>

package/src/components/inputs/action/index.ts

@@ -1 +1,2 @@
 export * from "./action";
+export * from "./action-header";