Merge pull request #43 from wp-graphql/issue-40-sitewide-notice

Implement sitewide notification
wp-graphql · Dec 20, 2023 · 450f059 · 450f059 · headless-platform-by-wp-engine · Dec 20, 2023
2 parents fcff559 + 4c8493b
commit 450f059
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 9 deletions.
diff --git a/components/Layout.jsx b/components/Layout.jsx
@@ -10,14 +10,17 @@ import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Prose } from '@/components/Prose'
 import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
+import { SitewideNotice } from '@/components/SitewideNotice'
 import { collectHeadings } from '@/lib/utils'
 
 Layout.fragment = gql`
   fragment LayoutFragment on RootQuery {
+    ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
     ...FooterNavigationFragment
   }
+  ${SitewideNotice.fragment}
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
   ${FooterNavigation.fragment}
@@ -124,7 +127,8 @@ export function Layout({ data, children, toc, title }) {
 
   return (
     <>
-      <SiteHeader navigation={primaryNavigation} />
+      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
+      <SiteHeader navigation={primaryNavigation} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
 
       <main className='content'>
         <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">

diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx
@@ -8,13 +8,16 @@ import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation'
 import { Prose } from '@/components/Prose'
 import { SiteFooter } from '@/components/SiteFooter'
 import { SiteHeader } from '@/components/SiteHeader'
+import { SitewideNotice } from '@/components/SitewideNotice'
 
 LayoutArchive.fragment = gql`
   fragment LayoutArchiveFragment on RootQuery {
+    ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...DocsSidebarNavigationFragment
     ...FooterNavigationFragment
   }
+  ${SitewideNotice.fragment}
   ${PrimaryNavigation.fragment}
   ${DocsSidebarNavigation.fragment}
   ${FooterNavigation.fragment}
@@ -53,7 +56,8 @@ export function LayoutArchive({ data, children, title }) {
 
   return (
     <>
-      <SiteHeader navigation={primaryNavigation} />
+      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
+      <SiteHeader navigation={primaryNavigation} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
       <main className='content'>
         <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
           <div className="hidden lg:relative lg:block lg:flex-none">

diff --git a/components/LayoutFrontPage.jsx b/components/LayoutFrontPage.jsx
@@ -6,13 +6,16 @@ import { SiteFooter } from './SiteFooter'
 
 import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { SiteHeader } from '@/components/SiteHeader'
+import { SitewideNotice } from '@/components/SitewideNotice'
 
 
 LayoutFrontPage.fragment = gql`
   fragment LayoutFrontPageFragment on RootQuery {
+    ...SitewideNoticeFragment
     ...PrimaryNavigationFragment
     ...FooterNavigationFragment
   }
+  ${SitewideNotice.fragment}
   ${PrimaryNavigation.fragment}
   ${FooterNavigation.fragment}
 `
@@ -36,7 +39,8 @@ export function LayoutFrontPage({ data, children }) {
     : []
   return (
     <>
-      <SiteHeader navigation={primaryNavigation} data={data} />
+      <SitewideNotice displayNotice={data.sitewideNotice.sitewideNoticeFields.displayNotice} message={data.sitewideNotice.sitewideNoticeFields.message} />
+      <SiteHeader navigation={primaryNavigation} data={data} isNoticeVisible={data.sitewideNotice.sitewideNoticeFields.displayNotice} />
       <main className='content'>
         {children}
       </main>

diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx
@@ -10,9 +10,11 @@ import { PrimaryNavigation } from '@/components/PrimaryNavigation'
 import { Search } from '@/components/Search'
 import { ModeToggle } from '@/components/ThemeSelector'
 
-export function SiteHeader({ navigation }) {
+export function SiteHeader({ navigation, isNoticeVisible = false }) {
   let [isScrolled, setIsScrolled] = useState(false)
 
+  const headerTopPosition = isNoticeVisible ? 'top-12' : 'top-0';
+
   useEffect(() => {
     function onScroll() {
       setIsScrolled(window.scrollY > 0)
@@ -27,7 +29,9 @@ export function SiteHeader({ navigation }) {
   return (
     <header
       className={clsx(
-        'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
+        'sticky',
+        headerTopPosition,
+        'z-40 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
         isScrolled
           ? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
           : 'dark:bg-transparent',

diff --git a/components/SitewideNotice.jsx b/components/SitewideNotice.jsx
@@ -0,0 +1,22 @@
+import { gql } from '@apollo/client'
+
+SitewideNotice.fragment = gql`
+  fragment SitewideNoticeFragment on RootQuery {
+    sitewideNotice {
+      sitewideNoticeFields {
+        displayNotice
+        message
+      }
+    }
+  }
+`
+
+export function SitewideNotice({ displayNotice = false, message = '' }) {
+  if (displayNotice) {
+    return (
+      <div className="fixed inset-x-0 top-0 z-50 inline h-12 bg-sky-100 p-3 text-sky-900 dark:bg-sky-800 dark:text-sky-200">
+        <p className="text-center text-sm font-medium">{message}</p>
+      </div>
+    )
+  }
+}
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,5 +1,4 @@
 import { gql } from '@apollo/client';
-import clsx from 'clsx'
 import React, { useState } from 'react';
 
 import { Button } from "@/components/ui/button";
@@ -8,7 +7,7 @@ import { Card, CardFooter, CardHeader } from "@/components/ui/card";
 const AccordionItem = ({ title, content, isOpen, onClick }) => { 
   return (
     <>
-      <Button onClick={onClick} variant="primary" className="py-2 w-full text-left flex justify-between items-center">
+      <Button onClick={onClick} variant="primary" className="flex w-full items-center justify-between py-2 text-left">
         {title}
         <svg 
           xmlns="http://www.w3.org/2000/svg" 
@@ -22,7 +21,7 @@ const AccordionItem = ({ title, content, isOpen, onClick }) => {
         </svg>
       </Button>
       {isOpen && (
-        <div className="dark:bg-dark-muted bg-muted px-4 py-4">
+        <div className="dark:bg-dark-muted bg-muted p-4">
           {content}
         </div>
       )}
@@ -86,7 +85,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
           })}
         </CardHeader>
         <CardFooter>
-          <div className="flex justify-center items-center space-x-4 w-full">
+          <div className="flex w-full items-center justify-center space-x-4">
             <Button variant="ghost" onClick={toggleAll} className="w-full">
               {openItems.length === fieldTypeSettings?.nodes?.length ? 'Collapse All' : 'Expand All'}
             </Button>