feat: fix styling

refactor comment clear property feat: deconstruct context feat: restore styling feat: add safety check for deconstructing the context fix padding in collapsible fix js doc comment fix margin fix collapsable
Yoast · Sep 19, 2024 · 476ff2e · 476ff2e
1 parent 1d3f78d
commit 476ff2e
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 88 deletions.
diff --git a/packages/js/src/dashboard/components/alert-title.js b/packages/js/src/dashboard/components/alert-title.js
@@ -0,0 +1,32 @@
+import { useContext } from "@wordpress/element";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { ExclamationCircleIcon } from "@heroicons/react/outline";
+import { Title } from "@yoast/ui-library";
+import { AlertsContext } from "../routes/alert-center";
+
+/**
+ *
+ * @param {string} title The title of alerts.
+ * @param {number} counts The count of the alerts.
+ *
+ * @returns {JSX.Element} The alert title element.
+ */
+export const AlertTitle = ( {
+	title,
+	counts = 0,
+} ) => {
+	const { Icon = ExclamationCircleIcon, iconClass = "" } = useContext( AlertsContext );
+
+	return (
+		<div className="yst-flex yst-justify-between yst-gap-2 yst-items-center">
+			<Icon className={ classNames( "yst-w-6 yst-h-6", iconClass ) } />
+			<Title className="yst-grow" as="h3" size="2">{ title } { counts > 0 && `(${counts})` }</Title>
+		</div>
+	);
+};
+
+AlertTitle.propTypes = {
+	title: PropTypes.string,
+	counts: PropTypes.number,
+};
diff --git a/packages/js/src/dashboard/components/list.js → ...s/src/dashboard/components/alerts-list.js b/packages/js/src/dashboard/components/list.js → ...s/src/dashboard/components/alerts-list.js
@@ -1,36 +1,35 @@
+import { useContext } from "@wordpress/element";
 import PropTypes from "prop-types";
 import { Button } from "@yoast/ui-library";
 import { EyeOffIcon, EyeIcon } from "@heroicons/react/outline";
 import classNames from "classnames";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  *
- * @param {string} bulletColor The color of the bullet.
- * @param {Array} items The list of items.
+ * @param {Object[]} items The list of items.
  * @param {boolean} hidden Whether the items are hidden or not.
  *
  * @returns {JSX.Element} The list component.
  */
-export const List = ( { bulletColor = "red", items = [], hidden = false } ) => {
-	const colors = {
-		red: "yst-fill-red-500",
-		blue: "yst-fill-blue-500",
-	};
+export const AlertsList = ( { items = [], hidden = false } ) => {
+	const { bulletClass = "" } = useContext( AlertsContext );
+
 	const Eye = hidden ? EyeIcon : EyeOffIcon;
 	return (
-		<ul className="yst-mt-2">
+		<ul>
 			{ items.map( ( item, index ) => (
 				<li key={ index } className="yst-border-b yst-border-slate-200 last:yst-border-b-0">
 					<div className="yst-flex yst-justify-between yst-gap-5 yst-items-start yst-py-6">
 						<div className={ classNames( "yst-mt-1",  hidden && "yst-opacity-50" ) }>
-							<svg width="11" height="11" className={ colors[ bulletColor ] }>
+							<svg width="11" height="11" className={ bulletClass }>
 								<circle cx="5.5" cy="5.5" r="5.5" />
 							</svg>
 						</div>
 						<p
 							className={ classNames(
-								"yst-text-sm yst-text-slate-600 yst-grow"
-								, hidden && "yst-opacity-50" ) }
+								"yst-text-sm yst-text-slate-600 yst-grow",
+								hidden && "yst-opacity-50" ) }
 						>{ item.message }</p>
 						<Button variant="secondary" size="small" className="yst-self-center yst-h-8">
 							<Eye className="yst-w-4 yst-h-4 yst-text-neutral-700" />
@@ -42,8 +41,7 @@ export const List = ( { bulletColor = "red", items = [], hidden = false } ) => {
 	);
 };
 
-List.propTypes = {
-	bulletColor: PropTypes.string,
+AlertsList.propTypes = {
 	items: PropTypes.arrayOf( PropTypes.shape( {
 		message: PropTypes.string,
 	} ) ),

diff --git a/packages/js/src/dashboard/components/box-title.js b/packages/js/src/dashboard/components/box-title.js
diff --git a/...d/components/hidden-alerts-collapsible.js → ...s/src/dashboard/components/collapsible.js b/...d/components/hidden-alerts-collapsible.js → ...s/src/dashboard/components/collapsible.js
@@ -1,27 +1,27 @@
-
 import PropTypes from "prop-types";
 import { Disclosure } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/outline";
+import classNames from "classnames";
 
 /**
  * @param {string} label The label of the collapsible.
  * @param {ReactNode} children The children of the collapsible.
  * @returns {JSX.Element} The hidden alerts collapsible component.
  */
-export const HiddenAlertsCollapsible = ( { label, children } ) => {
+export const Collapsible = ( { label, children } ) => {
 	return (
 		<Disclosure>
 			{ ( { open } ) => (
-				<div className="yst-p-4 yst-shadow-sm yst-border-slate-200 yst-rounded-md yst-border">
-					<Disclosure.Button className="yst-w-full yst-flex yst-justify-between">
-						<div>{ label }</div>
+				<div className="yst-shadow-sm yst-border-slate-200 yst-rounded-md yst-border">
+					<Disclosure.Button className="yst-w-full yst-flex yst-justify-between yst-py-4 yst-pr-4 yst-pl-6 yst-items-center">
+						<div className="yst-font-medium">{ label }</div>
 						<ChevronDownIcon
-							className={ `${
-								open ? "yst-rotate-180 yst-transform" : ""
-							} yst-h-5 yst-w-5` }
+							className={ classNames( "yst-h-5 yst-w-5 flex-shrink-0",
+								open ? "yst-rotate-180" : ""
+							) }
 						/>
 					</Disclosure.Button>
-					<Disclosure.Panel>
+					<Disclosure.Panel className="yst-px-6">
 						{ children }
 					</Disclosure.Panel>
 				</div>
@@ -30,7 +30,7 @@ export const HiddenAlertsCollapsible = ( { label, children } ) => {
 	);
 };
 
-HiddenAlertsCollapsible.propTypes = {
+Collapsible.propTypes = {
 	label: PropTypes.string,
 	children: PropTypes.node,
 };

diff --git a/packages/js/src/dashboard/components/index.js b/packages/js/src/dashboard/components/index.js
@@ -1,6 +1,6 @@
 export { default as RouteLayout } from "./route-layout";
 export { Notifications } from "./notifications";
 export { Problems } from "./problems";
-export { List } from "./list";
-export { BoxTitle } from "./box-title";
-export { HiddenAlertsCollapsible } from "./hidden-alerts-collapsible";
+export { AlertsList } from "./alerts-list";
+export { AlertTitle } from "./alert-title";
+export { Collapsible } from "./collapsible";
diff --git a/packages/js/src/dashboard/components/notifications.js b/packages/js/src/dashboard/components/notifications.js
@@ -1,15 +1,16 @@
 import { __, _n } from "@wordpress/i18n";
 import { BellIcon } from "@heroicons/react/outline";
 import { Paper } from "@yoast/ui-library";
-import { List } from "./list";
-import { BoxTitle } from "./box-title";
-import { HiddenAlertsCollapsible } from "./hidden-alerts-collapsible";
+import { AlertsList } from "./alerts-list";
+import { AlertTitle } from "./alert-title";
+import { Collapsible } from "./collapsible";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  * @returns {JSX.Element} The notifications component.
  */
 export const Notifications = () => {
-	const notificationsList = [
+	const notificationsAlertsList = [
 		{
 			message: __( "Your site is not connected to your MyYoast account. Connect your site to get access to all the features.", "wordpress-seo" ),
 		},
@@ -18,23 +19,31 @@ export const Notifications = () => {
 		},
 	];
 
-	const hiddenNotificatins = 1;
+	const hiddenNotifications = 1;
 
 	const hiddenNotificationLabel = _n(
-		"hidden notification.",
-		"hidden notifications.",
-		hiddenNotificatins,
+		"hidden notification",
+		"hidden notifications",
+		hiddenNotifications,
 		"wordpress-seo"
 	);
 
+	const notificationsTheme = {
+		Icon: BellIcon,
+		bulletClass: "yst-fill-blue-500",
+		iconClass: "yst-text-blue-500",
+	};
+
 	return (
 		<Paper className="yst-p-8 yst-flex-1 yst-flex-col">
-			<BoxTitle title={ __( "Notifications", "wordpress-seo" ) } counts={ 2 } Icon={ BellIcon } iconColor="blue" />
-			<List items={ notificationsList } bulletColor="blue" hidden={ false } />
+			<AlertsContext.Provider value={ notificationsTheme }>
+				<AlertTitle counts={ 2 } title={ __( "Notifications", "wordpress-seo" ) } />
+				<AlertsList items={ notificationsAlertsList } hidden={ false } />
 
-			<HiddenAlertsCollapsible label={ `${ hiddenNotificatins } ${ hiddenNotificationLabel }` }>
-				<List items={ notificationsList } bulletColor="blue" hidden={ true } />
-			</HiddenAlertsCollapsible>
+				<Collapsible label={ `${ hiddenNotifications } ${ hiddenNotificationLabel }` }>
+					<AlertsList items={ notificationsAlertsList } hidden={ true } />
+				</Collapsible>
+			</AlertsContext.Provider>
 		</Paper>
 	);
 };
diff --git a/packages/js/src/dashboard/components/problems.js b/packages/js/src/dashboard/components/problems.js
@@ -1,9 +1,10 @@
 import { __, _n } from "@wordpress/i18n";
 import { ExclamationCircleIcon } from "@heroicons/react/outline";
 import { Paper } from "@yoast/ui-library";
-import { List } from "./list";
-import { BoxTitle } from "./box-title";
-import { HiddenAlertsCollapsible } from "./hidden-alerts-collapsible";
+import { AlertsList } from "./alerts-list";
+import { AlertTitle } from "./alert-title";
+import { Collapsible } from "./collapsible";
+import { AlertsContext } from "../routes/alert-center";
 
 /**
  * @returns {JSX.Element} The problems component.
@@ -21,21 +22,29 @@ export const Problems = () => {
 	const hiddenProblems = 1;
 
 	const hiddenProblemsLabel = _n(
-		"hidden problem.",
-		"hidden problems.",
+		"hidden problem",
+		"hidden problems",
 		hiddenProblems,
 		"wordpress-seo"
 	);
 
+	const problemsTheme = {
+		Icon: ExclamationCircleIcon,
+		bulletClass: "yst-fill-red-500",
+		iconClass: "yst-text-red-500",
+	};
+
 	return (
 		<Paper className="yst-p-8 yst-flex-1 yst-flex-col">
-			<BoxTitle title={ __( "Problems", "wordpress-seo" ) } counts={ 2 } Icon={ ExclamationCircleIcon } />
-			<p className="yst-mt-2 yst-text-sm">{ __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" ) }</p>
-			<List items={ problemsList } />
+			<AlertsContext.Provider value={ problemsTheme }>
+				<AlertTitle title={ __( "Problems", "wordpress-seo" ) } counts={ 2 } />
+				<p className="yst-mt-2 yst-text-sm">{ __( "We have detected the following issues that affect the SEO of your site.", "wordpress-seo" ) }</p>
+				<AlertsList items={ problemsList } />
 
-			<HiddenAlertsCollapsible label={ `${ hiddenProblems } ${ hiddenProblemsLabel }` }>
-				<List items={ problemsList } hidden={ true } />
-			</HiddenAlertsCollapsible>
+				<Collapsible label={ `${ hiddenProblems } ${ hiddenProblemsLabel }` }>
+					<AlertsList items={ problemsList } hidden={ true } />
+				</Collapsible>
+			</AlertsContext.Provider>
 		</Paper>
 	);
 };
diff --git a/packages/js/src/dashboard/routes/alert-center.js b/packages/js/src/dashboard/routes/alert-center.js
@@ -1,6 +1,12 @@
 import { __ } from "@wordpress/i18n";
 import { Paper, Title } from "@yoast/ui-library";
 import { Notifications, Problems } from "../components";
+import { createContext } from "@wordpress/element";
+
+/**
+ * The context for the alerts.
+ */
+export const AlertsContext = createContext();
 
 /**
  * @returns {JSX.Element} The dashboard content placeholder.
@@ -17,7 +23,7 @@ export const AlertCenter = () => {
 				</div>
 			</header>
 		</Paper>
-		<div className="yst-flex yst-gap-8 yst-my-8 yst-items-start">
+		<div className="yst-grid lg:yst-grid-cols-2 yst-gap-8 yst-my-8 yst-items-start">
 			<Problems />
 			<Notifications />
 		</div>