Adding docs for Alert
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,168 @@
|
||||
'use client';
|
||||
|
||||
import { Alert } from '../../../../../packages/ui/src/components/Alert/Alert';
|
||||
import { Flex } from '../../../../../packages/ui/src/components/Flex/Flex';
|
||||
import { Button } from '../../../../../packages/ui/src/components/Button/Button';
|
||||
import { ButtonIcon } from '../../../../../packages/ui/src/components/ButtonIcon/ButtonIcon';
|
||||
import { RiCloseLine, RiCloudLine } from '@remixicon/react';
|
||||
|
||||
export const Default = () => {
|
||||
return <Alert status="info" icon={true} title="This is an alert message" />;
|
||||
};
|
||||
|
||||
export const StatusVariants = () => {
|
||||
return (
|
||||
<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
title="This is an informational alert with helpful information."
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={true}
|
||||
title="Your changes have been saved successfully."
|
||||
/>
|
||||
<Alert
|
||||
status="warning"
|
||||
icon={true}
|
||||
title="This action may have unintended consequences."
|
||||
/>
|
||||
<Alert
|
||||
status="danger"
|
||||
icon={true}
|
||||
title="An error occurred while processing your request."
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithDescription = () => {
|
||||
return (
|
||||
<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
title="New Feature Available"
|
||||
description="We've added support for custom table columns. Check the documentation to learn more."
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={true}
|
||||
title="Deployment Successful"
|
||||
description="Your application has been deployed to production. All health checks passed."
|
||||
/>
|
||||
<Alert
|
||||
status="warning"
|
||||
icon={true}
|
||||
title="Pending Review"
|
||||
description="Please review the following items before proceeding with the deployment."
|
||||
/>
|
||||
<Alert
|
||||
status="danger"
|
||||
icon={true}
|
||||
title="Authentication Failed"
|
||||
description="Unable to verify your credentials. Please check your username and password and try again."
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithActions = () => {
|
||||
return (
|
||||
<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
title="This alert has a dismiss action on the right."
|
||||
customActions={
|
||||
<Button size="small" variant="tertiary">
|
||||
Dismiss
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={true}
|
||||
title="Your changes have been saved. Would you like to continue?"
|
||||
customActions={
|
||||
<ButtonIcon
|
||||
size="small"
|
||||
variant="tertiary"
|
||||
icon={<RiCloseLine />}
|
||||
aria-label="Close"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithActionsAndDescriptions = () => {
|
||||
return (
|
||||
<Alert
|
||||
status="warning"
|
||||
icon={true}
|
||||
title="Update Available"
|
||||
description="A new version of the application is ready to install. This will require a brief restart."
|
||||
customActions={
|
||||
<>
|
||||
<Button size="small" variant="tertiary">
|
||||
Later
|
||||
</Button>
|
||||
<Button size="small" variant="primary">
|
||||
Update Now
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LoadingStates = () => {
|
||||
return (
|
||||
<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
loading
|
||||
title="Processing your request..."
|
||||
/>
|
||||
<Alert status="success" icon={true} loading title="Saving changes..." />
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
loading
|
||||
title="Processing your request"
|
||||
description="This may take a few moments. Please do not close this window."
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithoutIcons = () => {
|
||||
return (
|
||||
<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={false}
|
||||
title="This is an informational alert without an icon."
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={false}
|
||||
title="Your changes have been saved successfully."
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomIcon = () => {
|
||||
return (
|
||||
<Alert
|
||||
status="info"
|
||||
icon={<RiCloudLine />}
|
||||
title="This alert uses a custom cloud icon instead of the default info icon."
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,120 @@
|
||||
import { PropsTable } from '@/components/PropsTable';
|
||||
import { Snippet } from '@/components/Snippet';
|
||||
import { CodeBlock } from '@/components/CodeBlock';
|
||||
import { alertPropDefs } from './props-definition';
|
||||
import {
|
||||
alertUsageSnippet,
|
||||
defaultSnippet,
|
||||
statusVariantsSnippet,
|
||||
withDescriptionSnippet,
|
||||
withActionsSnippet,
|
||||
loadingStatesSnippet,
|
||||
withoutIconsSnippet,
|
||||
customIconSnippet,
|
||||
} from './snippets';
|
||||
import {
|
||||
Default,
|
||||
StatusVariants,
|
||||
WithDescription,
|
||||
WithActions,
|
||||
LoadingStates,
|
||||
WithoutIcons,
|
||||
CustomIcon,
|
||||
} from './components';
|
||||
import { ChangelogComponent } from '@/components/ChangelogComponent';
|
||||
import { PageTitle } from '@/components/PageTitle';
|
||||
import { Theming } from '@/components/Theming';
|
||||
import { AlertDefinition } from '../../../utils/definitions';
|
||||
|
||||
<PageTitle
|
||||
title="Alert"
|
||||
description="A component for displaying alert messages with different status levels and optional actions."
|
||||
/>
|
||||
|
||||
<Snippet align="center" py={4} preview={<Default />} code={defaultSnippet} />
|
||||
|
||||
## Usage
|
||||
|
||||
<CodeBlock code={alertUsageSnippet} />
|
||||
|
||||
## API reference
|
||||
|
||||
<PropsTable data={alertPropDefs} />
|
||||
|
||||
## Examples
|
||||
|
||||
### Status Variants
|
||||
|
||||
The Alert component supports four status variants, each with its own color theme.
|
||||
|
||||
<Snippet
|
||||
align="center"
|
||||
py={4}
|
||||
open
|
||||
preview={<StatusVariants />}
|
||||
code={statusVariantsSnippet}
|
||||
/>
|
||||
|
||||
### With Description
|
||||
|
||||
Add a description to provide additional context or details.
|
||||
|
||||
<Snippet
|
||||
align="center"
|
||||
py={4}
|
||||
open
|
||||
preview={<WithDescription />}
|
||||
code={withDescriptionSnippet}
|
||||
/>
|
||||
|
||||
### With Actions
|
||||
|
||||
Include custom actions like buttons for interactive alerts.
|
||||
|
||||
<Snippet
|
||||
align="center"
|
||||
py={4}
|
||||
open
|
||||
preview={<WithActions />}
|
||||
code={withActionsSnippet}
|
||||
/>
|
||||
|
||||
### Loading States
|
||||
|
||||
The loading spinner replaces the icon to indicate an ongoing process.
|
||||
|
||||
<Snippet
|
||||
align="center"
|
||||
py={4}
|
||||
open
|
||||
preview={<LoadingStates />}
|
||||
code={loadingStatesSnippet}
|
||||
/>
|
||||
|
||||
### Without Icons
|
||||
|
||||
Disable icons for a simpler appearance.
|
||||
|
||||
<Snippet
|
||||
align="center"
|
||||
py={4}
|
||||
open
|
||||
preview={<WithoutIcons />}
|
||||
code={withoutIconsSnippet}
|
||||
/>
|
||||
|
||||
### Custom Icon
|
||||
|
||||
Provide a custom icon element instead of the default status icon.
|
||||
|
||||
<Snippet
|
||||
align="center"
|
||||
py={4}
|
||||
open
|
||||
preview={<CustomIcon />}
|
||||
code={customIconSnippet}
|
||||
/>
|
||||
|
||||
<Theming definition={AlertDefinition} />
|
||||
|
||||
<ChangelogComponent component="alert" />
|
||||
@@ -0,0 +1,76 @@
|
||||
import {
|
||||
classNamePropDefs,
|
||||
stylePropDefs,
|
||||
type PropDef,
|
||||
} from '@/utils/propDefs';
|
||||
|
||||
export const alertPropDefs: Record<string, PropDef> = {
|
||||
status: {
|
||||
type: 'enum',
|
||||
values: ['info', 'success', 'warning', 'danger'],
|
||||
responsive: true,
|
||||
default: 'info',
|
||||
},
|
||||
icon: {
|
||||
type: 'enum',
|
||||
values: ['boolean', 'React.ReactElement'],
|
||||
responsive: false,
|
||||
},
|
||||
loading: {
|
||||
type: 'enum',
|
||||
values: ['boolean'],
|
||||
responsive: false,
|
||||
},
|
||||
title: {
|
||||
type: 'enum',
|
||||
values: ['React.ReactNode'],
|
||||
responsive: false,
|
||||
},
|
||||
description: {
|
||||
type: 'enum',
|
||||
values: ['React.ReactNode'],
|
||||
responsive: false,
|
||||
},
|
||||
customActions: {
|
||||
type: 'enum',
|
||||
values: ['React.ReactNode'],
|
||||
responsive: false,
|
||||
},
|
||||
m: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
mx: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
my: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
mt: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
mb: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
ml: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
mr: {
|
||||
type: 'enum',
|
||||
values: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
|
||||
responsive: true,
|
||||
},
|
||||
...classNamePropDefs,
|
||||
...stylePropDefs,
|
||||
};
|
||||
@@ -0,0 +1,131 @@
|
||||
export const alertUsageSnippet = `import { Alert } from '@backstage/ui';
|
||||
|
||||
<Alert status="info" title="This is an informational message" />`;
|
||||
|
||||
export const defaultSnippet = `<Alert status="info" icon={true} title="This is an alert message" />`;
|
||||
|
||||
export const statusVariantsSnippet = `<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
title="This is an informational alert with helpful information."
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={true}
|
||||
title="Your changes have been saved successfully."
|
||||
/>
|
||||
<Alert
|
||||
status="warning"
|
||||
icon={true}
|
||||
title="This action may have unintended consequences."
|
||||
/>
|
||||
<Alert
|
||||
status="danger"
|
||||
icon={true}
|
||||
title="An error occurred while processing your request."
|
||||
/>
|
||||
</Flex>`;
|
||||
|
||||
export const withDescriptionSnippet = `<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
title="New Feature Available"
|
||||
description="We've added support for custom table columns. Check the documentation to learn more."
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={true}
|
||||
title="Deployment Successful"
|
||||
description="Your application has been deployed to production. All health checks passed."
|
||||
/>
|
||||
<Alert
|
||||
status="warning"
|
||||
icon={true}
|
||||
title="Pending Review"
|
||||
description="Please review the following items before proceeding with the deployment."
|
||||
/>
|
||||
<Alert
|
||||
status="danger"
|
||||
icon={true}
|
||||
title="Authentication Failed"
|
||||
description="Unable to verify your credentials. Please check your username and password and try again."
|
||||
/>
|
||||
</Flex>`;
|
||||
|
||||
export const withActionsSnippet = `<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
title="This alert has a dismiss action on the right."
|
||||
customActions={
|
||||
<Button size="small" variant="tertiary">
|
||||
Dismiss
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={true}
|
||||
title="Your changes have been saved. Would you like to continue?"
|
||||
customActions={
|
||||
<ButtonIcon
|
||||
size="small"
|
||||
variant="tertiary"
|
||||
icon={<RiCloseLine />}
|
||||
aria-label="Close"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Flex>`;
|
||||
|
||||
export const withActionsAndDescriptionsSnippet = `<Alert
|
||||
status="warning"
|
||||
icon={true}
|
||||
title="Update Available"
|
||||
description="A new version of the application is ready to install. This will require a brief restart."
|
||||
customActions={
|
||||
<>
|
||||
<Button size="small" variant="tertiary">
|
||||
Later
|
||||
</Button>
|
||||
<Button size="small" variant="primary">
|
||||
Update Now
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>`;
|
||||
|
||||
export const loadingStatesSnippet = `<Flex direction="column" gap="4">
|
||||
<Alert status="info" icon={true} loading title="Processing your request..." />
|
||||
<Alert status="success" icon={true} loading title="Saving changes..." />
|
||||
<Alert
|
||||
status="info"
|
||||
icon={true}
|
||||
loading
|
||||
title="Processing your request"
|
||||
description="This may take a few moments. Please do not close this window."
|
||||
/>
|
||||
</Flex>`;
|
||||
|
||||
export const withoutIconsSnippet = `<Flex direction="column" gap="4">
|
||||
<Alert
|
||||
status="info"
|
||||
icon={false}
|
||||
title="This is an informational alert without an icon."
|
||||
/>
|
||||
<Alert
|
||||
status="success"
|
||||
icon={false}
|
||||
title="Your changes have been saved successfully."
|
||||
/>
|
||||
</Flex>`;
|
||||
|
||||
export const customIconSnippet = `import { RiCloudLine } from '@remixicon/react';
|
||||
|
||||
<Alert
|
||||
status="info"
|
||||
icon={<RiCloudLine />}
|
||||
title="This alert uses a custom cloud icon instead of the default info icon."
|
||||
/>`;
|
||||
Reference in New Issue
Block a user