updating Panel

versini-org · Mar 5, 2024 · e17f2bd · e17f2bd
1 parent f5224ab
commit e17f2bd
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 47 deletions.
diff --git a/packages/documentation/src/Components/Panel.stories.tsx b/packages/documentation/src/Components/Panel.stories.tsx
@@ -1,5 +1,6 @@
 import type { Story } from "@ladle/react";
 import { Button, Panel } from "@versini/ui-components";
+import { Flexgrid, FlexgridItem } from "@versini/ui-system";
 import { useState } from "react";
 
 export default {
@@ -10,16 +11,15 @@ export default {
 	args: {
 		open: false,
 		title: "Panel Title",
-		children: "Panel Content",
-		borderKind: "light",
-		mode: "panel",
+		borderMode: "light",
+		kind: "panel",
 	},
 	argTypes: {
-		borderKind: {
+		borderMode: {
 			options: ["dark", "light"],
 			control: { type: "radio" },
 		},
-		mode: {
+		kind: {
 			options: ["panel", "messagebox"],
 			control: { type: "radio" },
 		},
@@ -41,13 +41,42 @@ export const Basic: Story<any> = (args) => {
 				open={open}
 				onOpenChange={onOpenChange}
 				footer={
-					<div className="flex flex-row-reverse gap-2">
-						<Button noBorder>Log out</Button>
-						<Button mode="light">Cancel</Button>
-					</div>
+					<Flexgrid alignHorizontal="flex-end" columnGap={2}>
+						<FlexgridItem>
+							<Button mode="light" focusMode="light">
+								Cancel
+							</Button>
+						</FlexgridItem>
+						<FlexgridItem>
+							<Button mode="dark" focusMode="light" noBorder>
+								Log out
+							</Button>
+						</FlexgridItem>
+					</Flexgrid>
 				}
 				{...args}
-			/>
+			>
+				<p>
+					What follows from here is just a bunch of absolute nonsense I have
+					written to dogfood the plugin itself. It includes every sensible
+					typographic element I could think of, like <strong>bold text</strong>,
+					unordered lists, ordered lists, code blocks, block quotes,{" "}
+					<em>and even italics</em>.
+				</p>
+				<p>
+					It is important to cover all of these use cases for a few reasons:
+				</p>
+				<ol>
+					<li>We want everything to look good out of the box.</li>
+					<li>
+						Really just the first reason, that is the whole point of the plugin.
+					</li>
+					<li>
+						Here is a third pretend reason though a list with three items looks
+						more realistic than a list with two items.
+					</li>
+				</ol>
+			</Panel>
 		</>
 	);
 };
diff --git a/packages/ui-components/src/components/Panel/Panel.tsx b/packages/ui-components/src/components/Panel/Panel.tsx
@@ -18,11 +18,11 @@ export const Panel = ({
 	title,
 	children,
 	footer,
-	borderKind = "light",
-	mode = TYPE_PANEL,
+	borderMode = "light",
+	kind = TYPE_PANEL,
 }: PanelProps) => {
 	const originalTitleRef = useRef("");
-	const panelClassName = getPanelClassName({ mode, borderKind });
+	const panelClassName = getPanelClassName({ kind, borderMode });
 
 	/**
 	 * If the panel is opened, set the document
@@ -44,16 +44,17 @@ export const Panel = ({
 	return (
 		<Modal open={open} onOpenChange={onOpenChange}>
 			<ModalContent className={panelClassName.main}>
-				<ModalHeading className={panelClassName.header}>
+				<div className="flex flex-row-reverse items-center justify-between">
 					<ModalClose
+						className={panelClassName.close}
 						trigger={
-							<ButtonIcon noBorder label="Close">
+							<ButtonIcon mode="dark" focusMode="light" noBorder label="Close">
 								<IconClose />
 							</ButtonIcon>
 						}
-					></ModalClose>
-					<div>{title}</div>
-				</ModalHeading>
+					/>
+					<ModalHeading className={panelClassName.header}>{title}</ModalHeading>
+				</div>
 
 				<ModalDescription className={panelClassName.content}>
 					{children}

diff --git a/packages/ui-components/src/components/Panel/PanelTypes.d.ts b/packages/ui-components/src/components/Panel/PanelTypes.d.ts
@@ -1,5 +1,3 @@
-import { TYPE_MESSAGEBOX, TYPE_PANEL } from "./utilities";
-
 export type PanelProps = {
 	/**
 	 * The children to render.
@@ -22,13 +20,13 @@ export type PanelProps = {
 	/**
 	 * The type of Panel border.
 	 */
-	borderKind?: "dark" | "light";
+	borderMode?: "dark" | "light";
 	/**
 	 * The content to render in the footer.
 	 */
 	footer?: React.ReactNode;
 	/**
 	 * The type of Panel. This will change the layout of the Panel.
 	 */
-	mode?: typeof TYPE_PANEL | typeof TYPE_MESSAGEBOX;
+	kind?: "panel" | "messagebox";
 };
diff --git a/packages/ui-components/src/components/Panel/__tests__/Panel.test.tsx b/packages/ui-components/src/components/Panel/__tests__/Panel.test.tsx
@@ -45,7 +45,7 @@ describe("Panel modifiers", () => {
 	});
 
 	it("should render a responsive panel with dark borders", async () => {
-		render(<SimplePanel borderKind="dark" />);
+		render(<SimplePanel borderMode="dark" />);
 		const panel = screen.getByRole("dialog");
 
 		expectToHaveClasses(panel, [
@@ -67,30 +67,42 @@ describe("Panel modifiers", () => {
 	});
 
 	it("should render a responsive messagebox", async () => {
-		render(<SimplePanel mode="messagebox" />);
+		render(<SimplePanel kind="messagebox" />);
 		const panel = screen.getByRole("dialog");
 
 		expectToHaveClasses(panel, [
 			MESSAGEBOX_CLASSNAME,
-			"w-[95%]",
-			"rounded-lg",
-			"sm:w-[50%]",
+			"bg-surface-medium",
 			"border-2",
 			"border-border-light",
+			"flex-col",
+			"flex",
+			"md:max-w-2xl",
+			"prose-lighter",
+			"prose",
+			"rounded-lg",
+			"sm:w-[50%]",
+			"w-[95%]",
 		]);
 	});
 
-	it("should render a responsive messagebox wit dark borders", async () => {
-		render(<SimplePanel mode="messagebox" borderKind="dark" />);
+	it("should render a responsive messagebox with dark borders", async () => {
+		render(<SimplePanel kind="messagebox" borderMode="dark" />);
 		const panel = screen.getByRole("dialog");
 
 		expectToHaveClasses(panel, [
 			MESSAGEBOX_CLASSNAME,
-			"w-[95%]",
-			"rounded-lg",
-			"sm:w-[50%]",
+			"bg-surface-medium",
 			"border-2",
 			"border-border-dark",
+			"flex-col",
+			"flex",
+			"md:max-w-2xl",
+			"prose-lighter",
+			"prose",
+			"rounded-lg",
+			"sm:w-[50%]",
+			"w-[95%]",
 		]);
 	});
 

diff --git a/packages/ui-components/src/components/Panel/utilities.ts b/packages/ui-components/src/components/Panel/utilities.ts
@@ -6,25 +6,30 @@ export const TYPE_PANEL = "panel";
 export const TYPE_MESSAGEBOX = "messagebox";
 
 export const getPanelClassName = ({
-	mode,
-	borderKind,
+	kind,
+	borderMode,
 }: {
-	borderKind: string;
-	mode: string;
+	borderMode: "light" | "dark";
+	kind: typeof TYPE_MESSAGEBOX | typeof TYPE_PANEL;
 }) => {
 	return {
-		main: clsx("flex flex-col bg-surface-medium md:max-w-2xl", {
-			[`${PANEL_CLASSNAME} h-full min-h-[95%] w-full sm:h-auto sm:min-h-[10rem] sm:w-[95%] sm:rounded-lg sm:border-2`]:
-				mode === TYPE_PANEL,
-			[`${MESSAGEBOX_CLASSNAME} w-[95%] rounded-lg border-2 sm:w-[50%]`]:
-				mode === TYPE_MESSAGEBOX,
-			"sm:border-border-dark": borderKind === "dark" && mode === TYPE_PANEL,
-			"sm:border-border-light": borderKind === "light" && mode === TYPE_PANEL,
-			"border-border-dark": borderKind === "dark" && mode === TYPE_MESSAGEBOX,
-			"border-border-light": borderKind === "light" && mode === TYPE_MESSAGEBOX,
-		}),
+		main: clsx(
+			"prose prose-lighter flex flex-col bg-surface-medium md:max-w-2xl",
+			{
+				[`${PANEL_CLASSNAME} h-full min-h-[95%] w-full sm:h-auto sm:min-h-[10rem] sm:w-[95%] sm:rounded-lg sm:border-2`]:
+					kind === TYPE_PANEL,
+				[`${MESSAGEBOX_CLASSNAME} w-[95%] rounded-lg border-2 sm:w-[50%]`]:
+					kind === TYPE_MESSAGEBOX,
+				"sm:border-border-dark": borderMode === "dark" && kind === TYPE_PANEL,
+				"sm:border-border-light": borderMode === "light" && kind === TYPE_PANEL,
+				"border-border-dark": borderMode === "dark" && kind === TYPE_MESSAGEBOX,
+				"border-border-light":
+					borderMode === "light" && kind === TYPE_MESSAGEBOX,
+			},
+		),
 		content: "flex flex-grow flex-col py-2 sm:py-4 px-4",
 		footer: "flex flex-grow flex-col p-4",
-		header: "flex flex-row-reverse justify-between p-4 text-xl font-bold",
+		header: "p-4 mb-0",
+		close: "p-4",
 	};
 };