feat: layout props (#87)

- pass layout components as props to Main and Article components - rearrange where footer is displayed based on width - remove extra right padding from AnchorButton with external icon - prevent RadioSet options from wrapping
ninja · Dec 26, 2021 · 4f64a37 · 4f64a37
1 parent 257e1ab
commit 4f64a37
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 123 deletions.
diff --git a/src/docs/app.tsx b/src/docs/app.tsx
@@ -41,56 +41,70 @@ function App() {
 	const year = new Date().getFullYear();
 
 	return (
-		<Main>
-			<Header>
-				{home ? (
-					<section />
-				) : (
-					<AnchorButton appearance="text" href="/">
-						<Icon />
-						<Logo />
-					</AnchorButton>
-				)}
-				<section>
-					<AnchorButton
-						appearance="text"
-						href="https://www.npmjs.com/package/ninjakit"
-						target="_blank"
-					>
-						<SiNpm />
-						npm
-					</AnchorButton>
-					<AnchorButton
-						appearance="text"
-						href="https://github.com/ninja/ninjakit"
-						target="_blank"
-					>
-						<SiGithub />
-						git
-					</AnchorButton>
-				</section>
-			</Header>
-			<Nav>
-				<NavLink to="/">
-					<FaToriiGate />
-					Overview
-				</NavLink>
-				<NavLink to="/examples">
-					<GiKatana />
-					Examples
-				</NavLink>
-				<NavLink to="/sandbox">
-					<GiStarShuriken />
-					Sandbox
-				</NavLink>
-			</Nav>
-			<Article>
-				<Article>
-					<Routes>
-						<Route element={<Overview />} path="/" />
-						<Route element={<Examples />} path="examples" />
-						<Route element={<Sandbox />} path="sandbox" />
-					</Routes>
+		<Main
+			header={
+				<Header>
+					{home ? (
+						<section />
+					) : (
+						<AnchorButton appearance="text" href="/">
+							<Icon />
+							<Logo />
+						</AnchorButton>
+					)}
+					<section>
+						<AnchorButton
+							appearance="text"
+							href="https://www.npmjs.com/package/ninjakit"
+							target="_blank"
+						>
+							<SiNpm />
+							npm
+						</AnchorButton>
+						<AnchorButton
+							appearance="text"
+							href="https://github.com/ninja/ninjakit"
+							target="_blank"
+						>
+							<SiGithub />
+							git
+						</AnchorButton>
+					</section>
+				</Header>
+			}
+			navigation={
+				<Nav>
+					<NavLink to="/">
+						<FaToriiGate />
+						Overview
+					</NavLink>
+					<NavLink to="/examples">
+						<GiKatana />
+						Examples
+					</NavLink>
+					<NavLink to="/sandbox">
+						<GiStarShuriken />
+						Sandbox
+					</NavLink>
+				</Nav>
+			}
+		>
+			<Article
+				aside={
+					examples && (
+						<Aside>
+							<ColorSchemeExample />
+						</Aside>
+					)
+				}
+				floatingActionButton={
+					examples && (
+						<FloatingActionButton>
+							<MdEdit />
+						</FloatingActionButton>
+					)
+				}
+				footer={
 					<Footer>
 						<section>&copy; {year} Jamie Hoover</section>
 						{home ? (
@@ -112,17 +126,13 @@ function App() {
 							</AnchorButton>
 						)}
 					</Footer>
-					{examples && (
-						<FloatingActionButton>
-							<MdEdit />
-						</FloatingActionButton>
-					)}
-				</Article>
-				{examples && (
-					<Aside>
-						<ColorSchemeExample />
-					</Aside>
-				)}
+				}
+			>
+				<Routes>
+					<Route element={<Overview />} path="/" />
+					<Route element={<Examples />} path="examples" />
+					<Route element={<Sandbox />} path="sandbox" />
+				</Routes>
 			</Article>
 		</Main>
 	);

diff --git a/src/lib/components/article/article.module.css b/src/lib/components/article/article.module.css
@@ -1,85 +1,65 @@
 .article {
-	border-left-color: transparent;
 	composes: nk from global;
-	display: grid;
-	grid-template-areas: "header" "article" "aside" "footer";
-	grid-template-columns: 1fr;
-	grid-template-rows: auto 1fr auto auto;
-	grid-area: article;
-	overflow-y: auto;
-	position: relative;
-	scrollbar-gutter: auto;
-	scrollbar-width: thin;
-	transition: border-color 300ms;
+	display: contents;
 }
 
-.article:hover {
-	border-left-color: var(--md-color-secondary);
-}
-
-.article::-webkit-scrollbar {
-	height: 0.8rem;
-	width: 0.8rem;
-}
-
-.article::-webkit-scrollbar-thumb {
-	border-radius: 0.4rem;
-	border-left-color: inherit;
-	border-left-style: solid;
-	border-left-width: 0.8rem;
-	position: absolute;
-	right: 0;
-}
-
-.article > article,
-.article > section {
+.body {
+	composes: nk from global;
 	display: flex;
-	gap: 0.8rem;
+	flex-direction: column;
+	row-gap: 0.8rem;
 }
 
-.article > article {
-	flex-direction: column;
-	grid-area: article;
-	overflow-y: unset;
+.body > footer {
+	display: none;
 }
 
-.article > section {
+.body > section {
 	margin: 0 0.8rem;
 }
 
-.article > section:first-child {
+.body > section:first-child {
 	margin-top: 0.8rem;
 }
 
-.article > section:last-child {
+.body > section:last-child {
 	margin-bottom: 0.8rem;
 }
 
 @media screen and (min-width: 600px) {
 	.article {
-		border-left-color: transparent;
-		gap: unset;
-		grid-template-areas: "header header" "article aside" "footer footer";
+		display: grid;
+		grid-template-areas: "header header" "body aside";
 		grid-template-columns: 1fr auto;
-		grid-template-rows: auto 1fr auto;
+		grid-template-rows: auto 1fr;
+		inset: 0;
+		position: absolute;
+	}
+
+	.article > footer {
+		display: none;
+	}
+
+	.body {
+		border-left-color: transparent;
+		grid-area: body;
 		overflow-y: auto;
-		padding: 0.8rem;
-		padding: unset;
+		position: relative;
 		scrollbar-gutter: auto;
 		scrollbar-width: thin;
 		transition: border-color 300ms;
 	}
 
-	.article:hover {
+	.body:hover {
 		border-left-color: var(--md-color-secondary);
 	}
 
-	.article::-webkit-scrollbar {
+	.body::-webkit-scrollbar {
 		height: 0.8rem;
 		width: 0.8rem;
 	}
 
-	.article::-webkit-scrollbar-thumb {
+	.body::-webkit-scrollbar-thumb {
 		border-radius: 0.4rem;
 		border-left-color: inherit;
 		border-left-style: solid;
@@ -88,7 +68,7 @@
 		right: 0;
 	}
 
-	.article > article {
-		overflow-y: auto;
+	.body > footer {
+		display: flex;
 	}
 }
diff --git a/src/lib/components/article/index.tsx b/src/lib/components/article/index.tsx
@@ -1,14 +1,26 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 
 import typography from "../typography/typography.module.css";
 import styles from "./article.module.css";
 
-export const Article: FunctionComponent = ({ children, ...props }) => {
+export const Article: FunctionComponent<{
+	aside?: ReactNode;
+	footer?: ReactNode;
+	header?: ReactNode;
+	floatingActionButton?: ReactNode;
+}> = ({ aside, children, floatingActionButton, footer, header, ...props }) => {
 	const className = [styles.article, typography.bodyMedium].join(" ");
 
 	return (
 		<article className={className} {...props}>
-			{children}
+			{header}
+			<div className={styles.body} role="presentation">
+				{children}
+				{footer /* 600px and up */}
+				{floatingActionButton}
+			</div>
+			{aside}
+			{footer /* < 600px */}
 		</article>
 	);
 };
diff --git a/src/lib/components/button/anchor.tsx b/src/lib/components/button/anchor.tsx
@@ -10,7 +10,7 @@ export const AnchorButton = forwardRef<
 	{ appearance, children, className: override, target, ...props },
 	ref
 ) {
-	const className = useClassName({ appearance, children, override });
+	const className = useClassName({ appearance, children, override, target });
 
 	return (
 		<a className={className} ref={ref} target={target} {...props}>

diff --git a/src/lib/components/button/button.module.css b/src/lib/components/button/button.module.css
@@ -54,7 +54,7 @@
 	background-color: var(--md-color-primary);
 }
 
-.button.children:not(.icon) {
+.button.children {
 	padding-left: 2.4rem;
 	padding-right: 2.4rem;
 }
@@ -63,9 +63,12 @@
 	width: 4rem;
 }
 
-.button.children.icon {
+.button.icon {
 	padding-left: 1.6rem;
-	padding-right: 2.4rem;
+}
+
+.button.external {
+	padding-right: 1.6rem;
 }
 
 .elevated {

diff --git a/src/lib/components/button/index.tsx b/src/lib/components/button/index.tsx
@@ -14,18 +14,21 @@ export function useClassName({
 	appearance = "filled",
 	children,
 	override,
+	target,
 }: {
 	action?: boolean;
 	appearance?: Appearance;
 	children: ReactNode;
 	override?: string;
+	target?: string;
 }): string | undefined {
 	return [
 		styles.button,
 		styles[appearance],
 		typography.labelLarge,
 		children && styles.children,
 		Children.count(children) > 1 && styles.icon,
+		target === "_blank" && styles.external,
 		override,
 	].join(" ");
 }

diff --git a/src/lib/components/floating-action-button/floating-action-button.module.css b/src/lib/components/floating-action-button/floating-action-button.module.css
@@ -15,6 +15,7 @@
 	position: fixed;
 	white-space: nowrap;
 	width: fit-content;
+	z-index: 1;
 	-webkit-tap-highlight-color: transparent;
 }
 

diff --git a/src/lib/components/footer/footer.module.css b/src/lib/components/footer/footer.module.css
@@ -3,6 +3,7 @@
 	composes: nk from global;
 	display: flex;
 	gap: 0.8rem;
+	grid-area: footer;
 	justify-content: space-between;
 	padding: 0.8rem;
 }

diff --git a/src/lib/components/main/index.tsx b/src/lib/components/main/index.tsx
@@ -1,9 +1,18 @@
-import { FunctionComponent } from "react";
+import { FunctionComponent, ReactNode } from "react";
 
 import styles from "./main.module.css";
 
-export const Main: FunctionComponent = ({ children, ...props }) => (
+export const Main: FunctionComponent<{
+	aside?: ReactNode;
+	footer?: ReactNode;
+	header?: ReactNode;
+	navigation?: ReactNode;
+}> = ({ children, header, navigation, ...props }) => (
 	<main className={styles.main} {...props}>
-		{children}
+		{header}
+		{navigation}
+		<div className={styles.body} role="presentation">
+			{children}
+		</div>
 	</main>
 );