Various documentation refinements (#80)

* Document buttons * Let's try a background gradient You know, for fun! * Create an Example component and simplify examples * fixins --------- Co-authored-by: Cody A Price <cody@ngrok.com>
ngrok-oss · Dec 2, 2023 · bfd6845 · bfd6845 · vercel · Dec 2, 2023
1 parent 8d17907
commit bfd6845
Show file tree

Hide file tree

Showing 14 changed files with 512 additions and 439 deletions.
diff --git a/app/components/example.tsx b/app/components/example.tsx
@@ -0,0 +1,19 @@
+import { cx } from "@/cx";
+import { WithStyleProps } from "@/types/with-style-props";
+import { PropsWithChildren } from "react";
+
+type Props = PropsWithChildren & WithStyleProps;
+
+export function Example({ children, className, style }: Props) {
+	return (
+		<div
+			className={cx(
+				"rounded-lg border to-gray-200 from-gray-50 bg-gradient-to-br dark:bg-gradient-to-tl flex items-center justify-center p-4 md:p-16 border-b-0 border-gray-300 rounded-b-none",
+				className,
+			)}
+			style={style}
+		>
+			{children}
+		</div>
+	);
+}
diff --git a/app/routes/base.colors.tsx b/app/routes/base.colors.tsx
@@ -1,4 +1,5 @@
 import { cx } from "@/cx";
+import { InlineCode } from "@/inline-code";
 import { WithStyleProps } from "@/types/with-style-props";
 import type { MetaFunction } from "@vercel/remix";
 import { HashNavLink } from "~/components/hash-nav-link";
@@ -97,24 +98,10 @@ export default function Page() {
 				</h2>
 				<p className="mt-3 text-gray-600">
 					Mantle&apos;s colors are delivered as CSS variables via Tailwind&apos;s API eg.{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						.text-blue-500
-					</code>
-					. They can be directly accessed via{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						var(--primary-500)
-					</code>{" "}
-					but do note that you&apos;ll need to wrap everything in{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">hsl()</code>{" "}
-					like so:{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						hsl(var(--primary-500))
-					</code>
-					. This allows for Tailwind operations like{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						text-blue-500/25
-					</code>
-					.
+					<InlineCode>.text-blue-500</InlineCode>. They can be directly accessed via{" "}
+					<InlineCode>var(--primary-500)</InlineCode> but do note that you&apos;ll need to wrap everything in{" "}
+					<InlineCode>hsl()</InlineCode> like so: <InlineCode>hsl(var(--primary-500))</InlineCode>. This allows for
+					Tailwind operations like <InlineCode>text-blue-500/25</InlineCode>.
 				</p>
 				<h3 id="blue" className="mt-6 text-xl font-medium">
 					Blue (primary)

diff --git a/app/routes/components.anchor.tsx b/app/routes/components.anchor.tsx
@@ -1,7 +1,9 @@
 import { Anchor } from "@/anchor";
 import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
 import { code } from "@/code-block/code";
+import { InlineCode } from "@/inline-code";
 import type { MetaFunction } from "@vercel/remix";
+import { Example } from "~/components/example";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -14,30 +16,17 @@ export default function Page() {
 	return (
 		<div>
 			<h1 className="text-5xl font-medium">Anchor</h1>
-			<h2 className="my-4 text-xl text-gray-600">Fundamental component for rendering links to external addresses.</h2>
+			<p className="my-4 text-xl text-gray-600">Fundamental component for rendering links to external addresses.</p>
 			<div className="mt-8 space-y-4 text-gray-600">
 				<p>
-					The{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						&lt;Anchor&gt;
-					</code>{" "}
-					element, with its{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">href</code>{" "}
-					attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything
-					else a URL can address.
+					The <InlineCode>&lt;Anchor&gt;</InlineCode> element, with its <InlineCode>href</InlineCode> attribute, creates
+					a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can
+					address.
 				</p>
 				<p>
-					Content within each{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						&lt;Anchor&gt;
-					</code>{" "}
-					should indicate the link&apos;s destination. If the{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">href</code>{" "}
-					attribute is present, pressing the enter key while focused on the{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						&lt;Anchor&gt;
-					</code>{" "}
-					element will activate it.
+					Content within each <InlineCode>&lt;Anchor&gt;</InlineCode> should indicate the link&apos;s destination. If
+					the <InlineCode>href</InlineCode> attribute is present, pressing the enter key while focused on the{" "}
+					<InlineCode>&lt;Anchor&gt;</InlineCode> element will activate it.
 				</p>
 				<p>
 					See the <Anchor href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">MDN docs</Anchor> for more
@@ -46,44 +35,32 @@ export default function Page() {
 				<p>
 					If you need to link to an internal application route, prefer using the{" "}
 					<Anchor href="https://reactrouter.com/en/main/components/link">
-						<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-							react-router-dom
-						</code>{" "}
-						<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-							&lt;Link&gt;
-						</code>
+						<InlineCode>react-router-dom</InlineCode> <InlineCode>&lt;Link&gt;</InlineCode>
 					</Anchor>{" "}
 					or the{" "}
 					<Anchor href="https://remix.run/docs/en/main/components/link">
-						<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-							@remix-run/react
-						</code>{" "}
-						<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-							&lt;Link&gt;
-						</code>
+						<InlineCode>@remix-run/react</InlineCode> <InlineCode>&lt;Link&gt;</InlineCode>
 					</Anchor>
 					.
 				</p>
 			</div>
-			<div className="my-4 rounded-lg border border-gray-300 bg-background">
-				<div className="flex items-center justify-center p-4 md:p-9 border-b border-gray-300">
-					<p>
-						This link will go to <Anchor href="https://ngrok.com/">ngrok.com</Anchor>!
-					</p>
-				</div>
-				<CodeBlock className="border-none">
-					<CodeBlockBody>
-						<CodeBlockCopyButton />
-						<CodeBlockCode language="tsx">
-							{code`
-								<p>
-									This link will go to <Anchor href="https://ngrok.com/">ngrok.com</Anchor>!
-								</p>
-							`}
-						</CodeBlockCode>
-					</CodeBlockBody>
-				</CodeBlock>
-			</div>
+			<Example className="mt-4">
+				<p>
+					This link will go to <Anchor href="https://ngrok.com/">ngrok.com</Anchor>!
+				</p>
+			</Example>
+			<CodeBlock className="rounded-t-none rounded-b-lg">
+				<CodeBlockBody>
+					<CodeBlockCopyButton />
+					<CodeBlockCode language="tsx">
+						{code`
+							<p>
+								This link will go to <Anchor href="https://ngrok.com/">ngrok.com</Anchor>!
+							</p>
+						`}
+					</CodeBlockCode>
+				</CodeBlockBody>
+			</CodeBlock>
 		</div>
 	);
 }
diff --git a/app/routes/components.button.tsx b/app/routes/components.button.tsx
@@ -1,8 +1,9 @@
-import { Anchor } from "@/anchor";
 import { Button } from "@/button";
 import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
 import { code } from "@/code-block/code";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
 import type { MetaFunction } from "@vercel/remix";
+import { Example } from "~/components/example";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -15,34 +16,64 @@ export default function Page() {
 	return (
 		<div>
 			<h1 className="text-5xl font-medium">Button</h1>
-			<h2 className="my-4 text-xl text-gray-600">Displays a button or a component that looks like a button.</h2>
-			<div className="mt-8 space-y-4 text-gray-600">
-				<p>
-					The{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">
-						&lt;Button&gt;
-					</code>{" "}
-					element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other
-					assistive technology. Once activated, it then performs an action, such as submitting a{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">form</code> or
-					opening a{" "}
-					<code className="font-mono bg-gray-100 border border-gray-300 text-sm rounded-md px-1 py-0.5">dialog</code>.
-				</p>
-				<p>
-					See the <Anchor href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">MDN docs</Anchor> for
-					more information.
-				</p>
-			</div>
-			<div className="my-4 rounded-lg border border-gray-300 bg-background">
-				<div className="flex items-center justify-center p-4 md:p-9 border-b border-gray-300">
-					<Button>Click me!</Button>
-				</div>
-				<CodeBlock className="border-none">
-					<CodeBlockBody>
-						<CodeBlockCopyButton />
-						<CodeBlockCode language="tsx">{code`<Button>Click me!</Button>`}</CodeBlockCode>
-					</CodeBlockBody>
-				</CodeBlock>
+			<p className="mt-4 text-xl text-gray-600">
+				Initiates an action, such as completing a task or submitting information
+			</p>
+			<Example className="mt-4 gap-2">
+				<Button>Default</Button>
+				<Button priority="primary">Primary</Button>
+				<Button priority="secondary">Secondary</Button>
+			</Example>
+			<CodeBlock className="rounded-t-none rounded-b-lg">
+				<CodeBlockBody>
+					<CodeBlockCopyButton />
+					<CodeBlockCode language="tsx">{code`<Button>Click me!</Button>`}</CodeBlockCode>
+				</CodeBlockBody>
+			</CodeBlock>
+			<h2 className="mt-16 text-3xl font-medium">API Reference</h2>
+			<div className="mt-4 rounded-lg border border-gray-300 overflow-hidden z-10">
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Prop</TableHead>
+							<TableHead>Type</TableHead>
+							<TableHead>Default</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody className="font-mono text-xs text-gray-600">
+						<TableRow>
+							<TableCell className="align-top font-medium">priority</TableCell>
+							<TableCell className="align-top text-xs space-y-2">
+								<p>default</p>
+								<p>primary</p>
+								<p>secondary</p>
+							</TableCell>
+							<TableCell className="align-top">default</TableCell>
+						</TableRow>
+						<TableRow>
+							<TableCell className="align-top font-medium">size</TableCell>
+							<TableCell className="align-top text-xs space-y-2">
+								<p>default</p>
+								<p>sm</p>
+								<p>lg</p>
+							</TableCell>
+							<TableCell className="align-top">default</TableCell>
+						</TableRow>
+						<TableRow>
+							<TableCell className="align-top font-medium">state</TableCell>
+							<TableCell className="align-top text-xs space-y-2">
+								<p>default</p>
+								<p>danger</p>
+							</TableCell>
+							<TableCell className="align-top">default</TableCell>
+						</TableRow>
+						<TableRow>
+							<TableCell className="font-medium">asChild</TableCell>
+							<TableCell>boolean</TableCell>
+							<TableCell>false</TableCell>
+						</TableRow>
+					</TableBody>
+				</Table>
 			</div>
 		</div>
 	);

diff --git a/app/routes/components.card.tsx b/app/routes/components.card.tsx
@@ -2,6 +2,7 @@ import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "@/card";
 import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
 import { code } from "@/code-block/code";
 import type { MetaFunction } from "@vercel/remix";
+import { Example } from "~/components/example";
 
 export const meta: MetaFunction = () => {
 	return [
@@ -14,45 +15,43 @@ export default function Page() {
 	return (
 		<div>
 			<h1 className="text-5xl font-medium">Card</h1>
-			<h2 className="my-4 text-xl text-gray-600">
+			<p className="mt-4 text-xl text-gray-600">
 				A container used to display content in a box, resembling a physical card.
-			</h2>
+			</p>
 
-			<div className="my-4 rounded-lg border border-gray-300 bg-background">
-				<div className="flex items-center justify-center p-4 md:p-9 border-b border-gray-300">
-					<Card>
-						<CardHeader>
-							<CardTitle>Card Title Here</CardTitle>
-						</CardHeader>
-						<CardBody>
-							<p>Laborum in aute officia adipisicing elit velit.</p>
-						</CardBody>
-						<CardFooter>
-							<p>Card footer</p>
-						</CardFooter>
-					</Card>
-				</div>
-				<CodeBlock className="border-none">
-					<CodeBlockBody>
-						<CodeBlockCopyButton />
-						<CodeBlockCode language="tsx">
-							{code`
-								<Card>
-									<CardHeader>
-										<CardTitle>Card Title Here</CardTitle>
-									</CardHeader>
-									<CardBody>
-										<p>Laborum in aute officia adipisicing elit velit.</p>
-									</CardBody>
-									<CardFooter>
-										<p>Card footer</p>
-									</CardFooter>
-								</Card>
-							`}
-						</CodeBlockCode>
-					</CodeBlockBody>
-				</CodeBlock>
-			</div>
+			<Example className="mt-4">
+				<Card>
+					<CardHeader>
+						<CardTitle>Card Title Here</CardTitle>
+					</CardHeader>
+					<CardBody>
+						<p>Laborum in aute officia adipisicing elit velit.</p>
+					</CardBody>
+					<CardFooter>
+						<p>Card footer</p>
+					</CardFooter>
+				</Card>
+			</Example>
+			<CodeBlock className="rounded-t-none rounded-b-lg">
+				<CodeBlockBody>
+					<CodeBlockCopyButton />
+					<CodeBlockCode language="tsx">
+						{code`
+							<Card>
+								<CardHeader>
+									<CardTitle>Card Title Here</CardTitle>
+								</CardHeader>
+								<CardBody>
+									<p>Laborum in aute officia adipisicing elit velit.</p>
+								</CardBody>
+								<CardFooter>
+									<p>Card footer</p>
+								</CardFooter>
+							</Card>
+						`}
+					</CodeBlockCode>
+				</CodeBlockBody>
+			</CodeBlock>
 		</div>
 	);
 }