From 7ae5ca20a2b3471a4beb39c5bca948b1f18ab982 Mon Sep 17 00:00:00 2001
From: Maggie Negm <maggienegm02@gmail.com>
Date: Mon, 25 Nov 2024 15:33:45 -0800
Subject: [PATCH 1/2] feat: make filter options collapsible

---
 src/components/OptionsForm.module.css |  13 +++
 src/components/OptionsForm.tsx        | 110 +++++++++++++++++---------
 2 files changed, 87 insertions(+), 36 deletions(-)

diff --git a/src/components/OptionsForm.module.css b/src/components/OptionsForm.module.css
index bbf5760f..db23b6a1 100644
--- a/src/components/OptionsForm.module.css
+++ b/src/components/OptionsForm.module.css
@@ -138,3 +138,16 @@
 	height: 2rem;
 	padding: 0.5rem;
 }
+
+.toggleButton {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+	font: inherit;
+	color: inherit;
+	cursor: pointer;
+}
diff --git a/src/components/OptionsForm.tsx b/src/components/OptionsForm.tsx
index 26ce9e56..f0ebd40f 100644
--- a/src/components/OptionsForm.tsx
+++ b/src/components/OptionsForm.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from "react";
 import { PackageOwnership } from "tidelift-me-up";
 
 import { CallToAction } from "./CallToAction";
@@ -16,6 +19,14 @@ export interface OptionsFormProps {
 export function OptionsForm({ options }: OptionsFormProps) {
 	const ownerships = new Set(options.ownership);
 
+	const [isSecondaryOptionsVisible, setIsSecondaryOptionsVisible] = useState(
+		!options.username,
+	);
+
+	const toggleSecondaryOptions = () => {
+		setIsSecondaryOptionsVisible(!isSecondaryOptionsVisible);
+	};
+
 	return (
 		<form className={styles.optionsForm}>
 			<div className={styles.primaryOptions}>
@@ -39,44 +50,71 @@ export function OptionsForm({ options }: OptionsFormProps) {
 			</div>
 
 			<div className={styles.secondaryOptionsArea}>
-				<h2 className={styles.h2}>optionally, filter by:</h2>
-				<div className={styles.secondaryOptions}>
-					<div className={styles.secondaryOptionArea}>
-						<label className={styles.labelSecondary} htmlFor="since">
-							Updated Since
-						</label>
-						<input
-							className={styles.inputSecondary}
-							defaultValue={options.since && options.since.toString()}
-							id="since"
-							name="since"
-							type="date"
-						></input>
-					</div>
+				<button
+					className={styles.toggleButton}
+					onClick={toggleSecondaryOptions}
+					type="button"
+				>
+					optionally, filter by
+					<svg
+						fill="none"
+						height="24"
+						stroke="currentColor"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth="2"
+						style={{
+							transform: isSecondaryOptionsVisible
+								? "rotate(180deg)"
+								: "rotate(0deg)",
+						}}
+						viewBox="0 0 24 24"
+						width="24"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path d="M6 9l6 6 6-6" />
+					</svg>
+				</button>
 
-					<fieldset className={styles.secondaryOptionArea} name="ownership">
-						<legend className={styles.legendSecondary}>
-							Relationship to Project
-						</legend>
-						<div className={styles.fieldsetOptions}>
-							{(["author", "maintainer", "publisher"] as const).map(
-								(ownershipForm) => (
-									<div className={styles.secondaryOption} key={ownershipForm}>
-										<input
-											defaultChecked={ownerships.has(ownershipForm)}
-											id={ownershipForm}
-											name={ownershipForm}
-											type="checkbox"
-										/>
-										<label htmlFor={ownershipForm}>
-											{upperFirst(ownershipForm)}
-										</label>
-									</div>
-								),
-							)}
+				{isSecondaryOptionsVisible && (
+					<div className={styles.secondaryOptions}>
+						<div className={styles.secondaryOptionArea}>
+							<label className={styles.labelSecondary} htmlFor="since">
+								Updated Since
+							</label>
+							<input
+								className={styles.inputSecondary}
+								defaultValue={options.since && options.since.toString()}
+								id="since"
+								name="since"
+								type="date"
+							></input>
 						</div>
-					</fieldset>
-				</div>
+
+						<fieldset className={styles.secondaryOptionArea} name="ownership">
+							<legend className={styles.legendSecondary}>
+								Relationship to Project
+							</legend>
+							<div className={styles.fieldsetOptions}>
+								{(["author", "maintainer", "publisher"] as const).map(
+									(ownershipForm) => (
+										<div className={styles.secondaryOption} key={ownershipForm}>
+											<input
+												defaultChecked={ownerships.has(ownershipForm)}
+												id={ownershipForm}
+												name={ownershipForm}
+												type="checkbox"
+											/>
+											<label htmlFor={ownershipForm}>
+												{upperFirst(ownershipForm)}
+											</label>
+										</div>
+									),
+								)}
+							</div>
+						</fieldset>
+					</div>
+				)}
 			</div>
 		</form>
 	);

From d7d6a7772df685f3a91b3161f1ebc21ae4567514 Mon Sep 17 00:00:00 2001
From: Maggie Negm <maggienegm02@gmail.com>
Date: Tue, 26 Nov 2024 12:08:52 -0800
Subject: [PATCH 2/2] refactor: replace toggle button with <details> element

---
 src/components/OptionsForm.module.css | 20 +++++-----
 src/components/OptionsForm.tsx        | 56 ++++++++++-----------------
 2 files changed, 31 insertions(+), 45 deletions(-)

diff --git a/src/components/OptionsForm.module.css b/src/components/OptionsForm.module.css
index db23b6a1..a7a3c7d5 100644
--- a/src/components/OptionsForm.module.css
+++ b/src/components/OptionsForm.module.css
@@ -106,6 +106,7 @@
 .secondaryOptions {
 	flex-direction: column;
 	gap: 3rem;
+	margin-top: 1.25rem;
 }
 
 @media screen and (width >= 700px) {
@@ -139,15 +140,16 @@
 	padding: 0.5rem;
 }
 
-.toggleButton {
-	display: flex;
-	justify-content: center;
+.optionsSummary {
 	align-items: center;
-	background: none;
-	border: none;
-	padding: 0;
-	margin: 0;
-	font: inherit;
-	color: inherit;
 	cursor: pointer;
+	display: flex;
+	font-style: italic;
+	gap: 4px;
+	justify-content: center;
+	list-style: none;
+}
+
+.optionsDetails[open] .chevronIcon {
+	transform: rotate(180deg);
 }
diff --git a/src/components/OptionsForm.tsx b/src/components/OptionsForm.tsx
index f0ebd40f..4c75629d 100644
--- a/src/components/OptionsForm.tsx
+++ b/src/components/OptionsForm.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useState } from "react";
 import { PackageOwnership } from "tidelift-me-up";
 
 import { CallToAction } from "./CallToAction";
@@ -19,13 +18,7 @@ export interface OptionsFormProps {
 export function OptionsForm({ options }: OptionsFormProps) {
 	const ownerships = new Set(options.ownership);
 
-	const [isSecondaryOptionsVisible, setIsSecondaryOptionsVisible] = useState(
-		!options.username,
-	);
-
-	const toggleSecondaryOptions = () => {
-		setIsSecondaryOptionsVisible(!isSecondaryOptionsVisible);
-	};
+	const optionsExpanded = !options.username;
 
 	return (
 		<form className={styles.optionsForm}>
@@ -50,33 +43,24 @@ export function OptionsForm({ options }: OptionsFormProps) {
 			</div>
 
 			<div className={styles.secondaryOptionsArea}>
-				<button
-					className={styles.toggleButton}
-					onClick={toggleSecondaryOptions}
-					type="button"
-				>
-					optionally, filter by
-					<svg
-						fill="none"
-						height="24"
-						stroke="currentColor"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeWidth="2"
-						style={{
-							transform: isSecondaryOptionsVisible
-								? "rotate(180deg)"
-								: "rotate(0deg)",
-						}}
-						viewBox="0 0 24 24"
-						width="24"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path d="M6 9l6 6 6-6" />
-					</svg>
-				</button>
-
-				{isSecondaryOptionsVisible && (
+				<details className={styles.optionsDetails} open={optionsExpanded}>
+					<summary className={styles.optionsSummary}>
+						optionally, filter by{" "}
+						<svg
+							className={styles.chevronIcon}
+							fill="none"
+							height="24"
+							stroke="currentColor"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							viewBox="0 0 24 24"
+							width="24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path d="M6 9l6 6 6-6" />
+						</svg>
+					</summary>
 					<div className={styles.secondaryOptions}>
 						<div className={styles.secondaryOptionArea}>
 							<label className={styles.labelSecondary} htmlFor="since">
@@ -114,7 +98,7 @@ export function OptionsForm({ options }: OptionsFormProps) {
 							</div>
 						</fieldset>
 					</div>
-				)}
+				</details>
 			</div>
 		</form>
 	);