added HeaderTools sub-slots

Author: arybakov05

apps/seven/app/root.test.tsx

@@ -17,7 +17,7 @@ async function renderStub() {
             content: {} as any,
             site: {} as any,
             isAuthenticated: false,
-        }}
+          }}
           matches={[{} as any]}
         >
           <p>Root Layout</p>

packages/layout/config/slots.ts

@@ -5,11 +5,14 @@ import Footer from '../slots/Footer';
 import Logo from '../slots/Logo/Logo';
 import LanguageSwitcher from '../slots/LanguageSwitcher/LanguageSwitcher';
 import Navigation from '../slots/Navigation/Navigation';
-import HeaderTools from '../slots/Tools';
 import ContentArea from '../slots/ContentArea';
 import MainFooter from '../slots/MainFooter/MainFooter';
 import Breadcrumbs from '../slots/Breadcrumbs';
 import { NotContentTypeCondition } from '../helpers';
+import Anontools from '../slots/HeaderTools/Anontools';
+import HeaderTools from '../slots/HeaderTools/HeaderTools';
+import SearchWidget from '../slots/HeaderTools/SearchWidget';
+import SiteActions from '../slots/HeaderTools/SiteActions';
 
 export default function install(config: ConfigType) {
   // Main App Slot
@@ -36,16 +39,34 @@ export default function install(config: ConfigType) {
     component: Navigation,
   });
 
-  // Tools
+  // Header Tools
   config.registerSlotComponent({
     name: 'Tools',
-    slot: 'headertools',
+    slot: 'headerTools',
     component: HeaderTools,
   });
 
+  config.registerSlotComponent({
+    name: 'Tools',
+    slot: 'siteActions',
+    component: SiteActions,
+  });
+
+  config.registerSlotComponent({
+    name: 'Tools',
+    slot: 'anontools',
+    component: Anontools,
+  });
+
+  config.registerSlotComponent({
+    name: 'Tools',
+    slot: 'searchWidget',
+    component: SearchWidget,
+  });
+
   config.registerSlotComponent({
     name: 'Language Switcher',
-    slot: 'language-switcher',
+    slot: 'languageSwitcher',
     component: LanguageSwitcher,
   });
 

packages/layout/locales/de/common.json

@@ -0,0 +1,31 @@
+{
+  "layout": {
+    "slots": {
+      "tools": {
+        "languageSwitcher": {
+          "switchTo": "Zu {{ lang }} wechseln"
+        },
+        "anontools": {
+          "edit": "Bearbeiten",
+          "logout": "Abmelden",
+          "login": "Anmelden",
+          "register": "Registrieren"
+        },
+        "searchwidget": {
+          "searchSite": "Seite durchsuchen"
+        }
+      }
+    },
+    "contenttypes": {
+      "common": {
+        "size": "Größe:"
+      },
+      "image": {
+        "download": "Klicke, um das Bild in voller Größe herunterzuladen"
+      },
+      "file": {
+        "download": "Datei herunterladen"
+      }
+    }
+  }
+}

packages/layout/locales/en/common.json

@@ -1,7 +1,20 @@
 {
   "layout": {
-    "languageSwitcher": {
-      "switchTo": "Switch to {{ lang }}"
+    "slots": {
+      "tools": {
+        "languageSwitcher": {
+          "switchTo": "Switch to {{ lang }}"
+        },
+        "anontools": {
+          "edit": "Edit",
+          "logout": "Log Out",
+          "login": "Log In",
+          "register": "Register"
+        },
+        "searchWidget": {
+          "searchSite": "Search site"
+        }
+      }
     },
     "contenttypes": {
       "common": {

packages/layout/locales/it/common.json

@@ -1,7 +1,20 @@
 {
   "layout": {
-    "languageSwitcher": {
-      "switchTo": "Passa a {{ lang }}"
+    "slots": {
+      "tools": {
+        "languageSwitcher": {
+          "switchTo": "Passa a {{ lang }}"
+        },
+        "anontools": {
+          "edit": "Modifica",
+          "logout": "Disconnetti",
+          "login": "Accedi",
+          "register": "Registrati"
+        },
+        "searchWidget": {
+          "searchSite": "Cerca nel sito"
+        }
+      }
     },
     "contenttypes": {
       "common": {

packages/layout/slots/Breadcrumbs.tsx

@@ -17,7 +17,7 @@ const Breadcrumbs = (props: SlotComponentProps) => {
     icon: <HomeIcon size="sm" />,
   };
 
-  const breacrumbs = [rootItem, ...(items || [])];
+  const breadcrumbs = [rootItem, ...(items || [])];
 
   return (
     <SectionWrapper
@@ -26,7 +26,7 @@ const Breadcrumbs = (props: SlotComponentProps) => {
       width="layout"
       className="breadcrumbs"
     >
-      <PCBreadcrumbs items={breacrumbs}>
+      <PCBreadcrumbs items={breadcrumbs}>
         {(item) => (
           <PCBreadcrumb id={item['@id']} href={item['@id']}>
             {item.title}

packages/layout/slots/HeaderTools/Anontools.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import type { SlotComponentProps } from '../SlotRenderer';
+import { useTranslation } from 'react-i18next';
+import { Link } from '@plone/components/quanta';
+import config from '@plone/registry';
+import styles from './Tools.module.css';
+import { flattenToAppURL } from '@plone/helpers';
+
+const Anontools = (props: SlotComponentProps) => {
+  const { content } = props;
+  const { t } = useTranslation();
+
+  const returnUrl = flattenToAppURL(content['@id']);
+  const hasReturnUrl = returnUrl !== '' && returnUrl !== '/';
+
+  return (
+    <div className={clsx(styles['anontools'], 'anontools')}>
+      <Link href={`/login${hasReturnUrl ? `?return_url=${returnUrl}` : ''}`}>
+        {t('layout.slots.tools.anontools.login')}
+      </Link>
+      {config.settings.showSelfRegistration && (
+        <Link href="/register">
+          {t('layout.slots.tools.anontools.register')}
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default Anontools;

packages/layout/slots/HeaderTools/SearchWidget.tsx

@@ -0,0 +1,60 @@
+import { type FormEvent, useState } from 'react';
+import { Form, Input, Label, TextField } from 'react-aria-components';
+import type { SlotComponentProps } from '../SlotRenderer';
+import { useNavigate } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { Icon } from '@plone/components';
+import { Button } from '@plone/components/quanta';
+import styles from './Tools.module.css';
+import clsx from 'clsx';
+
+const SearchWidget = (props: SlotComponentProps) => {
+  const { location } = props;
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const pathname = location.pathname;
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    const path =
+      pathname?.length > 0 ? `&path=${encodeURIComponent(pathname)}` : '';
+
+    navigate(
+      `/search?SearchableText=${encodeURIComponent(searchQuery)}${path}`,
+    );
+
+    setSearchQuery('');
+    e.preventDefault();
+  };
+
+  return (
+    <Form
+      className={clsx(styles['searchwidget'], 'searchwidget')}
+      onSubmit={onSubmit}
+    >
+      <TextField name="search" type="text">
+        <Label className="sr-only">
+          {t('layout.slots.tools.searchWidget.searchSite')}
+        </Label>
+        <Input
+          placeholder={t('layout.slots.tools.searchWidget.searchSite')}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          value={searchQuery}
+        />
+      </TextField>
+      <Button type="submit">
+        <Icon size="sm">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+            <path
+              fillRule="evenodd"
+              d="M7,16 C7,11.038 11.037,7 16,7 C20.963,7 25,11.038 25,16 C25,20.962 20.963,25 16,25 C11.037,25 7,20.962 7,16 L7,16 Z M32.707,31.293 L24.448,23.034 C26.039,21.125 27,18.673 27,16 C27,9.935 22.065,5 16,5 C9.935,5 5,9.935 5,16 C5,22.065 9.935,27 16,27 C18.673,27 21.125,26.039 23.034,24.448 L31.293,32.707 L32.707,31.293 Z"
+            />
+          </svg>
+        </Icon>
+      </Button>
+    </Form>
+  );
+};
+
+export default SearchWidget;

packages/layout/slots/HeaderTools/SiteActions.tsx

@@ -0,0 +1,19 @@
+import { Link } from '@plone/components/quanta';
+import { useTranslation } from 'react-i18next';
+import type { SlotComponentProps } from '../SlotRenderer';
+
+const SiteActions = (props: SlotComponentProps) => {
+  const { location } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Link href={`/@@edit${location.pathname.replace(/^\/$/, '')}`}>
+        {t('layout.slots.tools.anontools.edit')}
+      </Link>
+      <Link href="/logout">{t('layout.slots.tools.anontools.logout')}</Link>
+    </>
+  );
+};
+
+export default SiteActions;

packages/layout/slots/HeaderTools/Tools.module.css

@@ -0,0 +1,49 @@
+@layer custom {
+  .anontools {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .searchwidget {
+    display: flex;
+    flex-direction: row-reverse;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    gap: 2px;
+
+    &:focus-within,
+    &:hover {
+      border: 2px solid var(--border);
+    }
+
+    input {
+      max-width: 200px;
+      height: 100%;
+      padding: 2px 8px;
+      border-radius: 0 8px 8px 0;
+      border-left: 2px solid transparent;
+
+      &:focus-visible {
+        outline: 2px solid var(--quanta-cobalt);
+      }
+    }
+
+    button {
+      box-sizing: content-box;
+      padding: 8px;
+      border-radius: 8px 0 0 8px;
+      background-color: transparent;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:focus {
+        outline: 2px solid var(--quanta-cobalt);
+        outline-offset: 0;
+      }
+    }
+  }
+}