@kitconcept/volto-light-theme 3.0.0-alpha.3 → 3.0.0

package/.github/workflows/acceptance.yml

@@ -4,7 +4,7 @@ on: [push, pull_request]
 env:
   ADDON_NAME: "@kitconcept/volto-light-theme"
   ADDON_PATH: "volto-light-theme"
-  VOLTO_VERSION: "17.11.5"
+  VOLTO_VERSION: "17.12.1"
 
 jobs:
 

package/.github/workflows/deploy.yml

@@ -11,7 +11,7 @@ on:
 env:
   ENVIRONMENT: "light-theme.kitconcept.io"
   IMAGE_NAME: "ghcr.io/kitconcept/voltolighttheme-frontend"
-  VOLTO_VERSION: "17.11.5"
+  VOLTO_VERSION: "17.12.1"
 
 jobs:
   meta:

package/CHANGELOG.md

@@ -8,6 +8,23 @@
 
 <!-- towncrier release notes start -->
 
+## 3.0.0 (2024-02-14)
+
+### Feature
+
+- Add options to show intranet label and implement intranet header for intranet sites. @iFlameing [#304](https://github.com/kitconcept/volto-light-theme/pull/304)
+- Add Event Metadata block @iRohitSingh [#334](https://github.com/kitconcept/volto-light-theme/pull/334)
+
+### Bugfix
+
+- Fix Navigation fails html validator due to use of divs inside ul tag @iRohitSingh [#289](https://github.com/kitconcept/volto-light-theme/pull/289)
+- Fixed the Caption for Images, Video Blocks etc. to use semantically correct HTML Structure @Molochem [#341](https://github.com/kitconcept/volto-light-theme/pull/341)
+- Fix missing key in `Header` component @sneridagh [#345](https://github.com/kitconcept/volto-light-theme/pull/345)
+
+### Internal
+
+- Support for enhanced initial blocks in config - Update to Volto 17.12.1 @sneridagh [#342](https://github.com/kitconcept/volto-light-theme/pull/342)
+
 ## 3.0.0-alpha.3 (2024-02-02)
 
 ### Feature

package/Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6.0.9
-VOLTO_VERSION=17.11.5
+VOLTO_VERSION=17.12.1
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'

package/README.md

@@ -181,6 +181,40 @@ It's behind a feature flag, as opt-out:
 config.settings.enableFatMenu = true;
 ```
 
+### Show Site Label
+
+If you want to show a label on top of site you can pass label name to `siteLabel` property.
+
+```js
+config.settings.siteLabel = 'Plone Intranet';
+```
+
+If you wanted a translated label then you have to define a translation object in `defineMessages` function provided by react-intl.
+
+Here is the code snippets you have to add in your addon index.js file.
+If you don't have addon, you can also add in your config.js file in root of your frontend folder.
+
+```js
+import { defineMessages } from 'react-intl';
+
+defineMessages({
+  siteLabel: {
+    id: 'siteLabel',
+    defaultMessage: ' ',
+  },
+});
+
+```
+Then add the translation you want in your `locale` file.
+
+### Show intranetHeader
+
+We have totally different header for intranet sites. If you want that, you can enable it by passing `intranetHeader` property.
+
+```js
+config.settings.intranetHeader = true;
+```
+
 ## Upgrade Guide
 
 See a detailed upgrade guide in: https://github.com/kitconcept/volto-light-theme/blob/main/UPGRADE-GUIDE.md

package/acceptance/cypress/tests/main/nav.cy.js

@@ -27,7 +27,6 @@ context('Navigation Acceptance Tests', () => {
       path: '/level-1/level-2',
     });
 
-
     cy.visit('/');
     cy.viewport('macbook-16');
   });
@@ -44,17 +43,12 @@ context('Navigation Acceptance Tests', () => {
     cy.get('ul.desktop-menu button').contains('Level 1').click();
     cy.get('.subitem-wrapper').findByText('Level 2').click();
     cy.get('.documentFirstHeading').should('have.text', 'Level 2');
-
   });
 
   it('Open 3rd level', function () {
     cy.wait('@content');
     cy.get('ul.desktop-menu button').contains('Level 1').click();
-    cy.get('.subsubitem-wrapper li').findByText('Level 3').click();
+    cy.get('.subsubitem-wrapper').findByText('Level 3').click();
     cy.get('.documentFirstHeading').should('have.text', 'Level 3');
-
   });
 });
-
-
-

package/locales/de/LC_MESSAGES/volto.po

@@ -228,15 +228,22 @@ msgstr "Rechts"
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr "Suche"
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr "Seite durchsuchen"
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -253,7 +260,6 @@ msgid "Site"
 msgstr "Seite"
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr "Übersicht"
@@ -327,3 +333,8 @@ msgstr ""
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr "von"
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -223,15 +223,22 @@ msgstr ""
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr ""
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr ""
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -248,7 +255,6 @@ msgid "Site"
 msgstr ""
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr ""
@@ -322,3 +328,8 @@ msgstr ""
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr ""
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""

package/locales/pt_BR/volto.po

@@ -223,15 +223,22 @@ msgstr "Direita"
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr "Buscar"
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr "Buscar no site"
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -248,7 +255,6 @@ msgid "Site"
 msgstr "Site"
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr "Mapa do Site"
@@ -322,3 +328,8 @@ msgstr "Mais informações"
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr "de"
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-02-01T15:37:22.956Z\n"
+"POT-Creation-Date: 2024-02-08T13:36:14.317Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -225,15 +225,22 @@ msgstr ""
 #: components/Blocks/Search/components/SearchInput
 #: components/Blocks/Search/TopSideFacets
 #: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search"
 msgstr ""
 
 #. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
 #: components/SearchWidget/SearchWidget
 msgid "Search Site"
 msgstr ""
 
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr ""
+
 #. Default: "Search results"
 #: components/Blocks/Search/components/SearchDetails
 msgid "Search results"
@@ -250,7 +257,6 @@ msgid "Site"
 msgstr ""
 
 #. Default: "Sitemap"
-#: components/Header/Header
 #: index
 msgid "Sitemap"
 msgstr ""
@@ -324,3 +330,8 @@ msgstr ""
 #: components/Blocks/Listing/ListingBody
 msgid "of"
 msgstr ""
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -72,6 +72,6 @@
     "@kitconcept/volto-introduction-block": "^1.0.0",
     "@kitconcept/volto-separator-block": "^4.0.0",
     "@kitconcept/volto-slider-block": "^6.1.0",
-    "@plone/volto": "^17.11.5"
+    "@plone/volto": "^17.12.1"
   }
 }

package/src/components/Blocks/EventMetadata/View.jsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedDate } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
+import { expandToBackendURL } from '@plone/volto/helpers';
+import Container from '../../../components/Atoms/Container/Container';
+const EventMetadataView = (props) => {
+  const content = props.properties;
+  const dateOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  };
+
+  return (
+    <div className="block eventMetadata ">
+      <Container className="details-container">
+        <div className="content-container">
+          <div className="event-details">
+            <div className="event-title">
+              <span className="event-heading">
+                <FormattedMessage id="Start" defaultMessage="Start" />
+              </span>
+              <div className="event-detail">
+                {' '}
+                {content?.start && (
+                  <FormattedDate date={content?.start} format={dateOptions} />
+                )}{' '}
+                {props.intl.locale === 'de' ? ' Uhr' : ''}
+              </div>
+              <div className="separator"></div>
+            </div>
+            <div className="event-title">
+              <span className="event-heading">
+                {' '}
+                <FormattedMessage id="End" defaultMessage="End" />
+              </span>
+              <div className="event-detail">
+                {' '}
+                {content?.end && (
+                  <FormattedDate date={content?.end} format={dateOptions} />
+                )}{' '}
+                {props.intl.locale === 'de' ? ' Uhr' : ''}
+              </div>
+              <div className="separator"></div>
+            </div>
+            {content?.location && (
+              <div className="event-title">
+                <span className="event-heading">
+                  <FormattedMessage id="Location" defaultMessage="Location" />
+                </span>
+                <div className="event-detail">{content?.location}</div>
+              </div>
+            )}
+          </div>
+
+          <div className="event-details">
+            {content?.event_url && (
+              <div className="event-title">
+                <span className="event-heading">
+                  <FormattedMessage id="Website" defaultMessage="Website" />
+                </span>
+                <div className="event-detail">
+                  <UniversalLink className="event-url" href={content.event_url}>
+                    {content.event_url}
+                  </UniversalLink>
+                </div>
+                <div className="separator"></div>
+              </div>
+            )}
+
+            {(content?.contact_name ||
+              content?.contact_email ||
+              content?.contact_email) && (
+              <div className="event-title">
+                <span className="event-heading">
+                  <FormattedMessage id="Contact" defaultMessage="Contact" />
+                </span>
+                <div className="event-detail">
+                  <div>
+                    {content?.contact_name && <p>{content.contact_name}</p>}
+                    {content?.contact_email && (
+                      <p>
+                        <a href={`mailto:${content.contact_email}`}>
+                          {content.contact_email}
+                        </a>
+                      </p>
+                    )}
+                    {content?.contact_phone && (
+                      <p>
+                        <FormattedMessage id="Phone" defaultMessage="Phone" />{' '}
+                        <a href={`tel:${content.contact_phone}`}>
+                          {content.contact_phone}
+                        </a>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="event-button">
+          <a
+            className="ics-download"
+            target="_blank"
+            rel="noreferrer"
+            href={
+              content && content['@id']
+                ? `${expandToBackendURL(content['@id'])}/ics_view `
+                : ''
+            }
+          >
+            <button className="event-btn">
+              <FormattedMessage
+                id="ICS-Download"
+                defaultMessage="ICS Download"
+              />
+            </button>
+          </a>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default injectIntl(EventMetadataView);

package/src/components/Caption/Caption.jsx

@@ -19,15 +19,15 @@ const Caption = ({ as = 'figcaption', title, description, credit }) => {
 
   return (
     <As>
-      {title && <div className="title">{title}</div>}
+      {title && <h2 className="title">{title}</h2>}
       {description && (
-        <div className="description">
+        <p className="description">
           {description.split('\n').map((line, index) => (
-            <div key={index}>{line || '\u00A0'}</div>
+            <p key={index}>{line || '\u00A0'}</p>
           ))}
-        </div>
+        </p>
       )}
-      {credit && <div className="credits">{credit}</div>}
+      {credit && <p className="credits">{credit}</p>}
     </As>
   );
 };

package/src/components/Header/Header.jsx

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
+import { useIntl, defineMessages } from 'react-intl';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
+import IntranetSearchWidget from '../SearchWidget/IntranetSearchWidget';
 
 import {
   Anontools,
@@ -13,42 +17,126 @@ import {
   UniversalLink,
 } from '@plone/volto/components';
 
-const Header = (props) => {
-  const { pathname } = props;
-  const token = useSelector((state) => state.userSession.token);
-  const siteAction = useSelector(
-    (state) => state.content.data?.['@components']?.actions?.site_actions,
-  );
+const messages = defineMessages({
+  siteLabel: {
+    id: 'siteLabel',
+    defaultMessage: ' ',
+  },
+});
 
+const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
   return (
-    <header className="header-wrapper">
-      <Container layout>
-        <div className="header">
-          <div className="logo-nav-wrapper">
-            <div className="logo">
-              <Logo />
-            </div>
-            <Navigation pathname={pathname} />
-            <MobileNavigation pathname={pathname} />
-            <div className="search-wrapper navigation-desktop">
-              <div className="search">
-                <SearchWidget />
-              </div>
+    <>
+      <div className="header">
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
+          </div>
+          <Navigation pathname={pathname} />
+          <MobileNavigation pathname={pathname} />
+          <div className="search-wrapper navigation-desktop">
+            <div className="search">
+              <SearchWidget />
             </div>
           </div>
-          <div className="tools-wrapper">
-            <LanguageSelector />
+        </div>
+        <div className="tools-wrapper">
+          <LanguageSelector />
+
+          <div className="tools">
+            {!token && <Anontools />}
+            {siteAction &&
+              siteAction.map((item) => (
+                <UniversalLink key={item.url} href={item.url}>
+                  {item.title}
+                </UniversalLink>
+              ))}
+          </div>
+          {siteLabel && (
+            <div className="intranet">
+              <p>{siteLabel}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
 
-            <div className="tools">
-              {!token && <Anontools />}
+const IntranetHeader = ({ pathname, siteLabel, token, siteAction }) => {
+  return (
+    <>
+      <div className="header">
+        <div className="tools-wrapper">
+          <LanguageSelector />
 
-              {siteAction &&
-                siteAction.map((item) => (
-                  <UniversalLink href={item.url}>{item.title}</UniversalLink>
-                ))}
+          <div className="tools">
+            {!token && <Anontools />}
+            {siteAction &&
+              siteAction.map((item) => (
+                <UniversalLink href={item.url}>{item.title}</UniversalLink>
+              ))}
+          </div>
+          {siteLabel && (
+            <div className="intranet">
+              <p>{siteLabel}</p>
             </div>
+          )}
+        </div>
+        <div className="logo-nav-wrapper">
+          <div className="logo">
+            <Logo />
           </div>
+          <div className="search-wrapper">
+            <div className="search">
+              <IntranetSearchWidget />
+            </div>
+          </div>
+          <Navigation pathname={pathname} />
+          <MobileNavigation pathname={pathname} />
         </div>
+      </div>
+    </>
+  );
+};
+
+const Header = (props) => {
+  const { pathname } = props;
+  let siteLabel = config.settings.siteLabel;
+  const intranetHeader = config.settings.intranetHeader;
+  const token = useSelector((state) => state.userSession.token);
+  const siteAction = useSelector(
+    (state) => state.content.data?.['@components']?.actions?.site_actions,
+  );
+  const intl = useIntl();
+  const translatedSiteLabel = intl.formatMessage(messages.siteLabel);
+
+  siteLabel =
+    siteLabel &&
+    (translatedSiteLabel !== 'siteLabel' && translatedSiteLabel !== ' '
+      ? translatedSiteLabel
+      : siteLabel);
+
+  return (
+    <header
+      className={cx('header-wrapper', { 'intranet-header': intranetHeader })}
+    >
+      <Container layout>
+        {intranetHeader ? (
+          <IntranetHeader
+            pathname={pathname}
+            siteLabel={siteLabel}
+            token={token}
+            siteAction={siteAction}
+          />
+        ) : (
+          <InternetHeader
+            pathname={pathname}
+            siteLabel={siteLabel}
+            token={token}
+            siteAction={siteAction}
+          />
+        )}
       </Container>
     </header>
   );