Refactor SidebarPanel to pass in buttons as elements (#1271)

Closes
RaspberryPiFoundation/digital-editor-issues#991

Author: jamiebenstead

CHANGELOG.md

@@ -14,8 +14,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
-- Changed SidebarPanel to accept an array of buttons (#1270)
 - Updated Design System react to v2.6.2 (#1261)
+- Changed SidebarPanel to accept an array of buttons (#1270)
+- Changed SidebarPanel to use an array of buttons as elements (#1271)
 
 ### Fixed
 

src/components/Menus/Sidebar/FilePanel/FilePanel.jsx

@@ -51,14 +51,14 @@ const FilePanel = ({ isMobile }) => {
   const buttons = readOnly
     ? []
     : [
-        {
-          text: t("filePanel.newFileButton"),
-          textAlways: true,
-          icon: <PlusIcon />,
-          onClick: openNewFileModal,
-          className: "btn--primary",
-          fill: true,
-        },
+        <DesignSystemButton
+          text={t("filePanel.newFileButton")}
+          textAways={true}
+          icon={<PlusIcon />}
+          onClick={openNewFileModal}
+          className="btn--primary"
+          fill={true}
+        />,
       ];
 
   if (!project || !project.components) {

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx

@@ -147,27 +147,27 @@ const InstructionsPanel = () => {
         instructionsEditable
           ? hasInstructions
             ? [
-                {
-                  className: "btn--secondary",
-                  text: t("instructionsPanel.removeInstructions"),
-                  onClick: () => setShowModal(true),
-                  fill: true,
-                  textAlways: true,
-                  small: true,
-                },
+                <DesignSystemButton
+                  className="btn--secondary"
+                  text={t("instructionsPanel.removeInstructions")}
+                  onClick={() => setShowModal(true)}
+                  fill={true}
+                  textAlways={true}
+                  small={true}
+                />,
               ]
             : [
-                {
-                  className: "btn--primary",
-                  icon: "add",
-                  text: t("instructionsPanel.emptyState.addInstructions"),
-                  onClick: addInstructions,
-                  fill: true,
-                  textAlways: true,
-                  small: true,
-                },
+                <DesignSystemButton
+                  className="btn--primary"
+                  icon="add"
+                  text={t("instructionsPanel.emptyState.addInstructions")}
+                  onClick={addInstructions}
+                  fill={true}
+                  textAlways={true}
+                  small={true}
+                />,
               ]
-          : null
+          : []
       }
       {...{ Footer: hasMultipleSteps && ProgressBar }}
     >

src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.jsx

@@ -13,6 +13,7 @@ import { MOBILE_MEDIA_QUERY } from "../../../../utils/mediaQueryBreakpoints";
 import { useMediaQuery } from "react-responsive";
 import SaveStatus from "../../../SaveStatus/SaveStatus";
 import { navigateToProjectsPageEvent } from "../../../../events/WebComponentCustomEvents";
+import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 
 const ProjectsPanel = () => {
   const { t } = useTranslation();
@@ -38,12 +39,13 @@ const ProjectsPanel = () => {
 
   const buttons = isLoggedIn
     ? [
-        {
-          className: "btn--primary projects-panel__your-projects-button",
-          onClick: navigateToProjectsPage,
-          text: t("projectsPanel.yourProjectsButton"),
-          textAlways: true,
-        },
+        <DesignSystemButton
+          key="your-projects"
+          className="btn--primary projects-panel__your-projects-button"
+          onClick={navigateToProjectsPage}
+          text={t("projectsPanel.yourProjectsButton")}
+          textAlways
+        />,
       ]
     : [];
 

src/components/Menus/Sidebar/SidebarPanel.jsx

@@ -4,7 +4,6 @@ import classNames from "classnames";
 import PropTypes from "prop-types";
 import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 import { useMediaQuery } from "react-responsive";
-import DesignSystemButton from "../../DesignSystemButton/DesignSystemButton";
 
 const SidebarPanel = (props) => {
   const {
@@ -22,11 +21,7 @@ const SidebarPanel = (props) => {
       <div className="sidebar__panel-header">
         <h2 className="sidebar__panel-heading">{heading}</h2>
         {buttons?.length > 0 && (
-          <div className="sidebar__panel-buttons">
-            {buttons.map((btn, i) => (
-              <DesignSystemButton key={i} {...btn} />
-            ))}
-          </div>
+          <div className="sidebar__panel-buttons">{buttons}</div>
         )}
       </div>
       <div className="sidebar__panel-content">{children}</div>
@@ -68,7 +63,7 @@ SidebarPanel.propTypes = {
   children: PropTypes.any.isRequired,
   heading: PropTypes.string.isRequired,
   className: PropTypes.string,
-  buttons: PropTypes.arrayOf(PropTypes.object),
+  buttons: PropTypes.arrayOf(PropTypes.node),
 };
 
 export default SidebarPanel;

src/components/Menus/Sidebar/SidebarPanel.test.js

@@ -26,7 +26,7 @@ test("Renders footer", () => {
 
 test("Renders a single button", () => {
   render(
-    <SidebarPanel heading="heading" buttons={[{ text: "button" }]}>
+    <SidebarPanel heading="heading" buttons={[<button key="1">button</button>]}>
       some content
     </SidebarPanel>,
   );
@@ -37,7 +37,10 @@ test("Renders multiple buttons", () => {
   render(
     <SidebarPanel
       heading="heading"
-      buttons={[{ text: "button one" }, { text: "button two" }]}
+      buttons={[
+        <button key="1">button one</button>,
+        <button key="2">button two</button>,
+      ]}
     >
       some content
     </SidebarPanel>,