Merge pull request #3531 from processing/curation-banner

Add Banner for Messaging + Announcements

Author: raclim

client/modules/IDE/components/Banner.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CrossIcon } from '../../../common/icons';
+
+/**
+ * Banner displays a dismissible announcement bar with a link and a close icon.
+ * It's typically used to highlight opportunities, but use and design can be flexible.
+ *
+ * This component is **presentational only** — visibility logic (open/close state) should be
+ * controlled by the parent via the `onClose` handler.
+ *
+ * @param {Object} props
+ * @param {function} props.onClose - Function called when the user clicks the close (✕) button
+ * @returns {JSX.Element} The banner component with a call-to-action link and a close button
+ *
+ * @example
+ * const [showBanner, setShowBanner] = useState(true);
+ *
+ * {showBanner && (
+ *   <Banner onClose={() => setShowBanner(false)} />
+ * )}
+ */
+
+const Banner = ({ onClose }) => {
+  // URL can be updated depending on the opportunity or announcement.
+  const bannerURL = 'https://openprocessing.org/curation/89576';
+  const bannerCopy = (
+    <>
+      We’re accepting p5.js sketches for a special curation exploring the new
+      features in p5.js 2.0!{' '}
+      <span style={{ fontWeight: 600 }}>Submit by July 13!</span>
+    </>
+  );
+
+  return (
+    <div className="banner">
+      <a href={bannerURL}>{bannerCopy}</a>
+      <button className="banner-close-button" onClick={onClose}>
+        <CrossIcon />
+      </button>
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  onClose: PropTypes.func.isRequired
+};
+
+export default Banner;

client/modules/IDE/pages/IDEView.jsx

@@ -27,6 +27,7 @@ import {
 } from '../components/Editor/MobileEditor';
 import IDEOverlays from '../components/IDEOverlays';
 import useIsMobile from '../hooks/useIsMobile';
+import Banner from '../components/Banner';
 import { P5VersionProvider } from '../hooks/useP5Version';
 
 function getTitle(project) {
@@ -105,6 +106,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
+  const [displayBanner, setDisplayBanner] = useState(true);
 
   const cmRef = useRef({});
 
@@ -171,6 +173,7 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
+      {displayBanner && <Banner onClose={() => setDisplayBanner(false)} />}
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />

client/styles/components/_banner.scss

@@ -0,0 +1,30 @@
+.banner {
+  width: 100%;
+  min-height: 2.2rem;
+  text-align: center;
+  padding: 1rem;
+  background-color: #DFED33; // yellow from p5.js website
+  border-bottom: 1px solid #000;
+
+  a {
+    color: #000;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 770px) {
+    min-height: 3.3rem;
+  }
+}
+
+.banner-close-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: center;
+  height: 20px;
+  width:20px;
+  float: right;
+}

client/styles/main.scss

@@ -55,6 +55,7 @@
 @import 'components/skip-link';
 @import 'components/stars';
 @import 'components/admonition';
+@import 'components/banner';
 
 @import 'layout/dashboard';
 @import 'layout/ide';