feat: add Callout component (#240)

src/alert/alert.tsx

@@ -14,9 +14,9 @@ const variantClasses = {
 };
 
 /**
- * `Alert` is used to display a short, important message that does not interrupt the user's workflow.
- *
+ * `Alert` is used to communicate high-priority or time-sensitive information.
  * `Alert` is not dismissable.
+ * Use `Callout` instead of `Alert` if you want to communicate information specific to a page.
  */
 export const Alert = ({
 	children,

src/callout/callout.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Callout } from "./callout";
+
+const story = {
+	title: "Components/Callout",
+	component: Callout,
+} satisfies Meta<typeof Callout>;
+
+type Story = StoryObj<typeof Callout>;
+
+export const Success: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "success",
+	},
+};
+
+export const Info: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "info",
+	},
+};
+
+export const Warning: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "warning",
+	},
+};
+
+export const Danger: Story = {
+	args: {
+		children:
+			"Eaque non tempore porro quod voluptates rerum ipsam. Consequatur ea voluptate quo tempora autem quod. Voluptatem perspiciatis non mollitia. Dicta non necessitatibus laboriosam est aut cum eos et. Animi pariatur aliquid sint ipsum nam occaecati nisi sit.",
+		variant: "danger",
+	},
+};
+
+export default story;

src/callout/callout.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { Callout } from "./callout";
+
+describe("<Callout />", () => {
+	it("should render children correctly", () => {
+		render(<Callout variant="info">Hello World</Callout>);
+
+		expect(screen.getByText("Hello World")).toBeInTheDocument();
+	});
+});
+
+// ------------------------------
+// Type tests
+// ------------------------------
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="success" role="alert">
+	Hello World
+</Callout>;
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="info" role="alert">
+	Hello World
+</Callout>;
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="warning" role="alert">
+	Hello World
+</Callout>;
+
+// @ts-expect-error - Callout does not accept `role`
+<Callout variant="danger" role="alert">
+	Hello World
+</Callout>;

src/callout/callout.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { CalloutProps } from "./types";
+
+const variantClasses = {
+	success: "text-green-700 bg-green-50 border-green-700",
+	info: "text-blue-700 bg-blue-50 border-blue-700",
+	warning: "text-yellow-700 bg-yellow-50 border-yellow-700",
+	danger: "text-red-700 bg-red-50 border-red-700",
+};
+
+/**
+ * A `Callout` is used to emphasize an important snippet of information within the flow of a page.
+ * Content in a callout should be something on the page that you want to highlight, but that is not critical information.
+ * Use `Alert` instead of `Callout` if you want to communicate system-level information.
+ */
+export const Callout = ({
+	children,
+	className,
+	variant,
+	...others
+}: CalloutProps): JSX.Element => {
+	const variantClass = variantClasses[variant];
+
+	const classes = [
+		"p-4 mb-6 border border-solid border-1 break-words",
+		variantClass,
+		className,
+	].join(" ");
+
+	return (
+		<div className={classes} {...others}>
+			{children}
+		</div>
+	);
+};

src/callout/index.ts

@@ -0,0 +1 @@
+export { Callout } from "./callout";

src/callout/types.ts

@@ -0,0 +1,6 @@
+type CalloutVariant = "success" | "info" | "warning" | "danger";
+
+export interface CalloutProps
+	extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+	variant: CalloutVariant;
+}

src/index.ts

@@ -1,24 +1,25 @@
 // Use this file as the entry point for component export
 export { Alert, type AlertProps } from "./alert";
 export { Button, type ButtonProps } from "./button";
+export { Callout } from "./callout";
 export { CloseButton } from "./close-button";
-export { Image } from "./image";
-export { Table } from "./table";
-export { Panel } from "./panel";
-// export { ToggleButton } from './toggle-button';
-export { Dropdown } from "./drop-down";
-export { MenuItem } from "./drop-down/menu-item";
-export { Container } from "./container";
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
 export { Col } from "./col";
+export { Container } from "./container";
 export { ControlLabel } from "./control-label";
-export { FormGroup, type FormGroupProps } from "./form-group";
+export { Dropdown } from "./drop-down";
 export { FormControl } from "./form-control";
+export { FormGroup, type FormGroupProps } from "./form-group";
 export { HelpBlock } from "./help-block";
-export { Row } from "./row";
+export { Image } from "./image";
+export { MenuItem } from "./drop-down/menu-item";
 export { Modal, type ModalProps, type HeaderProps } from "./modal";
-export { getThemingClass } from "./utils";
-export { Spacer } from "./spacer";
+export { Panel } from "./panel";
 export { PrismFormatted } from "./prism-formatted";
-export { QuizQuestion } from "./quiz-question";
+export { Row } from "./row";
+export { Spacer } from "./spacer";
+export { Table } from "./table";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
 export { Quiz, useQuiz } from "./quiz";
+export { QuizQuestion } from "./quiz-question";
+
+export { getThemingClass } from "./utils";