Add licences link to Scratch projects

public/translations/en.json

@@ -284,6 +284,7 @@
     "cookies": "Cookies",
     "accessibility": "Accessibility",
     "safeguarding": "Safeguarding",
+    "licenses": "Licenses",
     "charity": "Raspberry Pi Foundation - UK registered charity 1129409",
     "settingsMenu": {
       "heading": "Settings",

src/assets/stylesheets/InfoPanel.scss

@@ -17,16 +17,19 @@
   display: flex;
   flex-direction: column;
 
-  a {
+  a, button {
     @include font-size-1(regular);
+    font-family: inherit;
     font-weight: $font-weight-bold;
     text-decoration: underline;
   }
-}
 
-.info-panel__link {
-  &:last-of-type {
-    margin-block-end: $space-1;
+  button {
+    border: 3px solid transparent;
+  }
+
+  p {
+    margin-block-start: $space-1;
   }
 }
 
@@ -36,7 +39,8 @@
     background-color: $rpf-grey-600;
   }
 
-  .info-panel__links a {
+  .info-panel__links a,
+  .info-panel__links button {
     color: $rpf-text-primary-darkmode;
   }
 }
@@ -47,7 +51,8 @@
     background-color: $rpf-grey-50;
   }
 
-  .info-panel__links a {
+  .info-panel__links a,
+  .info-panel__links button {
     color: $rpf-text-primary;
   }
 }

src/components/Menus/Sidebar/InfoPanel/InfoPanel.jsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { Modal } from "@raspberrypifoundation/design-system-react";
 import SidebarPanel from "../SidebarPanel";
 
 import "../../../../assets/stylesheets/InfoPanel.scss";
@@ -24,6 +26,10 @@ const feedbackUrl = (url) => {
 
 const InfoPanel = ({ feedbackFormUrl = CODE_EDITOR_FEEDBACK_URL }) => {
   const { t } = useTranslation();
+  const [isLicensesModalOpen, setIsLicensesModalOpen] = useState(false);
+  const projectType = useSelector((state) => state.editor.project.project_type);
+  const isScratchProject = projectType === "code_editor_scratch";
+
   const links = [
     {
       id: "help",
@@ -74,8 +80,28 @@ const InfoPanel = ({ feedbackFormUrl = CODE_EDITOR_FEEDBACK_URL }) => {
             {link.text}
           </a>
         ))}
+        {isScratchProject && (
+          <button
+            type="button"
+            className="info-panel__link"
+            onClick={() => setIsLicensesModalOpen(true)}
+          >
+            {t("sidebar.licenses")}
+          </button>
+        )}
         <p>{t("sidebar.charity")}</p>
       </div>
+
+      {isScratchProject && (
+        <Modal
+          isOpen={isLicensesModalOpen}
+          setIsOpen={setIsLicensesModalOpen}
+          heading={t("sidebar.licenses")}
+          showCloseButton
+        >
+          <p>Hello, this is a test modal content.</p>
+        </Modal>
+      )}
     </SidebarPanel>
   );
 };