Instructions empty state (#1165)

RaspberryPiFoundation · Jan 16, 2025 · ade61b2 · ade61b2
1 parent e8b547d
commit ade61b2
Show file tree

Hide file tree

Showing 10 changed files with 426 additions and 218 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Show instructions option in sidebar if instructions are editable (#1164)
 - Open instructions panel by default if instructions are editable (#1164)
 - Downloading project instructions (#1160)
+- Downloading project instructions (#1160)
+- Show instructions option in sidebar if instructions are editable (#1164)
+- Open instructions panel by default if instructions are editable (#1164)
+- Instructions empty state to show when instructions are editable (#1165)
 
 ### Changed
 

diff --git a/package.json b/package.json
@@ -54,6 +54,7 @@
     "prismjs": "^1.29.0",
     "prompts": "2.4.0",
     "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.2",
     "rc-resize-observer": "^1.3.1",
     "re-resizable": "6.9.9",
     "react": "^18.1.0",

diff --git a/src/assets/markdown/demoInstructions.md b/src/assets/markdown/demoInstructions.md
@@ -0,0 +1,20 @@
+# How instructions work
+
+## Enabling instructions
+
+Any text written here will be visible to students in the sidebar
+
+If you decide you do not want instructions, simply leave this panel blank.
+
+## Writing instructions
+
+Write your instructions using [Markdown](https://www.markdownguide.org/)
+### What you can do
+
+Lists:
+
+- Bullet points
+- Bullet points
+
+1. numbered steps
+2. numbered steps
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
@@ -255,4 +255,17 @@
       white-space: pre-wrap;
     }
   }
+
+  .project-instructions__empty {
+    background-color: $rpf-teal-100;
+    border-radius: $space-0-5;
+    display: flex;
+    flex-direction: column;
+    gap: $space-1-5;
+    padding: $space-1;
+  }
+
+  .project-instructions__empty-text {
+    margin: 0;
+  }
 }
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useMemo, useState } from "react";
 import SidebarPanel from "../SidebarPanel";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
 import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
+import { Link } from "react-router-dom";
 
 import ProgressBar from "./ProgressBar/ProgressBar";
 import "../../../../assets/stylesheets/Instructions.scss";
@@ -12,7 +13,9 @@ import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 import "prismjs/plugins/line-highlight/prism-line-highlight.css";
 import { quizReadyEvent } from "../../../../events/WebComponentCustomEvents";
 import { setCurrentStepPosition } from "../../../../redux/InstructionsSlice";
+import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import { setProjectInstructions } from "../../../../redux/EditorSlice";
+import demoInstructions from "../../../../assets/markdown/demoInstructions.md";
 
 const InstructionsPanel = () => {
   const instructionsEditable = useSelector(
@@ -65,11 +68,11 @@ const InstructionsPanel = () => {
 
   useEffect(() => {
     const setStepContent = (content) => {
-      if (!stepContent?.current) return;
-
-      stepContent.current.parentElement.scrollTo({ top: 0 });
-      stepContent.current.innerHTML = content;
-      applySyntaxHighlighting(stepContent.current);
+      if (stepContent.current) {
+        stepContent.current?.parentElement.scrollTo({ top: 0 });
+        stepContent.current.innerHTML = content;
+        applySyntaxHighlighting(stepContent.current);
+      }
     };
     if (isQuiz && !quizCompleted) {
       setStepContent(quiz.questions[quiz.currentQuestion]);
@@ -97,6 +100,24 @@ const InstructionsPanel = () => {
     }
   }, [quizCompleted, currentStepPosition, numberOfSteps, dispatch, isQuiz]);
 
+  const addInstructions = () => {
+    dispatch(setProjectInstructions(demoInstructions));
+  };
+
+  const AddInstructionsButton = () => {
+    return (
+      <DesignSystemButton
+        className="btn--primary"
+        icon="add"
+        text={t("instructionsPanel.emptyState.addInstructions")}
+        onClick={addInstructions}
+        fill
+        textAlways
+        small
+      />
+    );
+  };
+
   const onChange = (e) => {
     dispatch(setProjectInstructions(e.target.value));
   };
@@ -105,34 +126,75 @@ const InstructionsPanel = () => {
     <SidebarPanel
       defaultWidth="30vw"
       heading={t("instructionsPanel.projectSteps")}
+      Button={instructionsEditable && !hasInstructions && AddInstructionsButton}
       {...{ Footer: hasMultipleSteps && ProgressBar }}
     >
-      {instructionsEditable ? (
-        <Tabs
-          onSelect={(index) => {
-            setInstructionsTab(index);
-          }}
-        >
-          <TabList>
-            <Tab>{t("instructionsPanel.edit")}</Tab>
-            <Tab>{t("instructionsPanel.view")}</Tab>
-          </TabList>
-          <TabPanel>
-            <textarea
-              data-testid="instructionTextarea"
-              value={project.instructions}
-              onChange={onChange}
-            ></textarea>
-          </TabPanel>
-          <TabPanel>
-            <>
-              <div className="project-instructions" ref={stepContent}></div>
-            </>
-          </TabPanel>
-        </Tabs>
-      ) : (
-        <div className="project-instructions" ref={stepContent}></div>
-      )}
+      <div className="project-instructions">
+        {instructionsEditable ? (
+          hasInstructions ? (
+            <div>
+              {instructionsEditable && (
+                <Tabs
+                  onSelect={(index) => {
+                    setInstructionsTab(index);
+                  }}
+                >
+                  <TabList>
+                    <Tab>{t("instructionsPanel.edit")}</Tab>
+                    <Tab>{t("instructionsPanel.view")}</Tab>
+                  </TabList>
+                  <TabPanel>
+                    <textarea
+                      data-testid="instructionTextarea"
+                      value={project.instructions}
+                      onChange={onChange}
+                    ></textarea>
+                  </TabPanel>
+                  <TabPanel>
+                    <>
+                      <div
+                        className="project-instructions"
+                        ref={stepContent}
+                      ></div>
+                    </>
+                  </TabPanel>
+                </Tabs>
+              )}
+            </div>
+          ) : (
+            <div className="project-instructions__empty">
+              <p className="project-instructions__empty-text">
+                {t("instructionsPanel.emptyState.purpose")}
+              </p>
+              <p className="project-instructions__empty-text">
+                {t("instructionsPanel.emptyState.location")}
+              </p>
+              <p className="project-instructions__empty-text">
+                {() => (
+                  <Trans
+                    i18nKey="instructionsPanel.emptyState.markdown"
+                    components={[
+                      <Link
+                        href="https://commonmark.org/help/"
+                        target="_blank"
+                        rel="noreferrer"
+                      />,
+                    ]}
+                  />
+                )}
+              </p>
+              <p className="project-instructions__empty-text">
+                {t("instructionsPanel.emptyState.edits")}
+              </p>
+            </div>
+          )
+        ) : (
+          <div
+            className="project-instructions__content"
+            ref={stepContent}
+          ></div>
+        )}
+      </div>
     </SidebarPanel>
   );
 };