@kitconcept/volto-light-theme 3.0.1 → 3.1.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.15.1"
+  VOLTO_VERSION: "17.15.5"
 
 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.15.1"
+  VOLTO_VERSION: "17.15.5"
 
 jobs:
   meta:

package/CHANGELOG.md

@@ -8,6 +8,25 @@
 
 <!-- towncrier release notes start -->
 
+## 3.1.0 (2024-03-08)
+
+### Feature
+
+- [Vertical Spacing] Reduce spacing between title and description in teaser block @iFlameing [#353](https://github.com/kitconcept/volto-light-theme/pull/353)
+- Add eu and es translations @erral [#358](https://github.com/kitconcept/volto-light-theme/pull/358)
+
+### Bugfix
+
+- Fix header tabbing order @iRohitSingh [#251](https://github.com/kitconcept/volto-light-theme/pull/251)
+- Fix show figcaption tag if ther is no caption @iRohitSingh [#350](https://github.com/kitconcept/volto-light-theme/pull/350)
+- Safer pass by value instead of by reference when modifying internal `blockConfig` data @sneridagh [#361](https://github.com/kitconcept/volto-light-theme/pull/361)
+
+### Internal
+
+- @plone/components as dependency
+  Use the `Container` component from @plone/components instead of the local one.
+  The one in `src/components/Atoms/Container/Container.jsx` is deprecated and will be removed in the next major release. @sneridagh [#360](https://github.com/kitconcept/volto-light-theme/pull/360)
+
 ## 3.0.1 (2024-03-04)
 
 ### Bugfix

package/Makefile

@@ -21,8 +21,8 @@ GREEN=`tput setaf 2`
 RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
-PLONE_VERSION=6.0.9
-VOLTO_VERSION=17.15.1
+PLONE_VERSION=6
+VOLTO_VERSION=17.15.5
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'

package/README.md

@@ -9,32 +9,34 @@
 
 ## Vision
 
-The Volto Light Theme main vision is to provide kitconcept a theme to build upon the projects to come after the release of Plone 6.
+The main vision of the Volto Light Theme is to serve as a foundation for kitconcept's future projects, following the release of Plone 6.
 
-It should contain all the feedback and success stories in UI/UX side that the company had during the last years projects.
+It contains the feedback from the company's last years projects and the success stories in the UI/UX side.
 
-It should also be future proof, so it has to be aligned with the upcoming Volto vision in terms of theming strategy decided by the Plone community.
+It aims to be future proof, so it has to be aligned with the upcoming Volto vision in terms of theming strategy decided by the Plone community.
 
 ![Volto-Light-Theme](https://github.com/kitconcept/volto-light-theme/raw/main/volto-light-theme.png)
 
-## Requirements
+## Requirements and specs
 
 ### It should not use any SemanticUI component or styling
 
 Volto will abandon SemanticUI as default design component system in the mid term, and we should be prepared for it.
 
-We will achieve that not using any SemanticUI component, nor any related styling (`.ui.XXX`) in our upcoming themes.
+We will achieve that by not using any SemanticUI component, nor any related styling (`.ui.XXX`) in our upcoming themes.
 
 The Volto strategy is:
 
-- To provide a very basic and structural Vanilla components to build upon theming and CMSUI as well.
-- These components will be based in a headless component system. The best positioned right now is [react-aria](https://react-spectrum.adobe.com/react-aria/).
-- The theming could be done using these basic components or dropping in the component system of the developer/integrator choice. The presence of Volto's component registry system could help for adapting, if required.
-- The CMSUI will be isolated from the theming because it will be extremely CSS specific, so leaks from theming-CMSUI won't happen.
+- Provide a very basic and structural Vanilla components to build upon theming and CMSUI as well (`@plone/components`)
+- These components will be based in a headless component system [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html)
+- Volto projects can be themed using `@plone/components` as baseline or use a complete different design or component system of the developer/integrator choice. The presence of Volto's component registry system could help for adapting, if required.
 
 #### Volto components `customizations` use case
 
-If possible, we will switch to SemanticUI-less components in case of they exist. Specially if the elements that we are customizing are clearly "theme" (eg. header/footer, etc). In the case of other Volto customizations that are not clear part of the theme (eg. Search block), it's fine to stick using what the original is using (SemanticUI). When Volto will make the switch in the future, we should then adapt all the customizations to match the one in the Volto core.
+If possible, we will switch to SemanticUI-less components when `@plone/components` is ready.
+Specially if the elements that we are customizing are clearly "theme" (eg. header/footer, etc).
+In the case of other Volto customizations that are not clear part of the theme (eg. Search block), it's fine to stick using what the original is using (SemanticUI).
+When Volto will make the switch in the future, we should then adapt all the customizations to match the one in the Volto core.
 The approach used is to use a proxy to a component of the `components` folder. This way it's easier to keep track of changes, and another add-on can customize again the light theme component, not the original Volto customization.
 
 ### It should use kitconcept's layout used in FZJ/DLR projects
@@ -55,9 +57,9 @@ Since the new container queries spec is out, we will be introducing it to the cu
 
 We will start organising the files in the root of `theme` folder, to differentiate from a normal "SemanticUI" theme. Take a look at the current state. We will follow this convention:
 
-- One less file per component/block
-- All less files loading are centralized in one main less file `custom.less` in this project, could be different in the future.
-- Vanilla headless components are named under `atoms` folder.
+- One file per component/block
+- Use the Volto theme facility using the SCSS scape hatch provided so other add-ons can hook to it.
+- The styling is centralized in `main.scss`, the rest of the files are loaded from there.
 
 ## Why a headless component system?
 
@@ -69,6 +71,8 @@ This theme has the concept of block "grouping" given two consecutive blocks with
 
 The wrappers have the classnames `blocks-group-wrapper` and the name of the background color, eg. `grey`, defaulting to `transparent` if no `backgroundColor` property is set in the styling block wrapper in the block.
 
+**Disclaimer**: This might change in the near future, since we are developing a new integral Block Model for VLT and Volto.
+
 ### Vertical spacing rules
 
 These main rules spec applies to the theme:
@@ -93,7 +97,7 @@ We use container queries when do care explicitly about how the styling is being
 
 Reason: The container queries allow us to abstract the width from the sidebar and toolbar in edit mode, showing the content area as it will be in that size, in view mode.
 
-Remember: The margins in responsive are being taken care with container queries in `layout.scss`. So everything related to that, goes like it works in there, with container queries. See implementations for details in case you need it.
+**Remember**: The margins in responsive are being taken care with container queries in `layout.scss`. So everything related to that, goes like it works in there, with container queries. See implementations for details in case you need it.
 
 ## Specification
 
@@ -214,6 +218,15 @@ We have totally different header for intranet sites. If you want that, you can e
 ```js
 config.settings.intranetHeader = true;
 ```
+## Releases
+
+The releases follow a semantic versioning model.
+
+### Definition of breaking change
+
+In general, the same rules as Volto releases applies.
+However, in VLT we add an extra exception: The vertical spacing is carefully curated and considered an important feature of the theme and because of that, changes and improvements in the vertical spacing are **NOT** considered breaking changes.
+They will be noted properly in the changelog.
 
 ## Upgrade Guide
 

package/locales/es/LC_MESSAGES/volto.po

@@ -0,0 +1,340 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2024-02-08T13:36:14.317Z\n"
+"PO-Revision-Date: \n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language: es\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+"X-Generator: Poedit 3.0.1\n"
+
+#. Default: "Back"
+#: components/MobileNavigation/MobileNavigation
+msgid "Back"
+msgstr "Atrás"
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr "Color de fondo"
+
+#. Default: "Block Width"
+#: components/Blocks/Button/schema
+msgid "Block Width"
+msgstr "Anchura del bloque"
+
+#. Default: "Breadcrumbs"
+#: components/Breadcrumbs/Breadcrumbs
+msgid "Breadcrumbs"
+msgstr "Rastro de migas"
+
+#. Default: "Browse the site, drop an image, or type an URL"
+#: components/Blocks/Image/Edit
+msgid "Browse the site, drop an image, or type an URL"
+msgstr "Busque en el sitio, arrastra una imagen o escriba una URL"
+
+#. Default: "Button text"
+#: components/Blocks/Slider/schema
+msgid "Button text"
+msgstr "Texto del botón"
+
+#. Default: "Center"
+#: components/Widgets/AlignWidget
+msgid "Center"
+msgstr "Centrar"
+
+#. Default: "Close menu"
+#: components/MobileNavigation/MobileNavigation
+#: components/Navigation/Navigation
+msgid "Close menu"
+msgstr "Cerrar menú"
+
+#. Default: "Contact"
+#: components/Theme/EventView
+msgid "Contact"
+msgstr "Contacto"
+
+#. Default: "Continue reading"
+#: components/Blocks/Slider/DefaultBody
+msgid "Continue reading"
+msgstr "Seguir leyendo"
+
+#. Default: "Copyright"
+#: components/Footer/Footer
+msgid "Copyright"
+msgstr "Copyright"
+
+#. Default: "Description"
+#: components/Blocks/Image/schema
+msgid "Description"
+msgstr "Descripción"
+
+#. Default: "Distributed under the {license}."
+#: components/Footer/Footer
+msgid "Distributed under the {license}."
+msgstr "Distribuido bajo {license}"
+
+#. Default: "End"
+#: components/Theme/EventView
+msgid "End"
+msgstr "Fin"
+
+#. Default: "Flag align"
+#: components/Blocks/Slider/schema
+msgid "Flag align"
+msgstr "Alinear"
+
+#. Default: "Full"
+#: components/Widgets/AlignWidget
+msgid "Full"
+msgstr "Completo"
+
+#. Default: "GNU GPL license"
+#: components/Footer/Footer
+msgid "GNU GPL license"
+msgstr "Licencia GNU GPL"
+
+#. Default: "Hide Button"
+#: components/Blocks/Slider/schema
+msgid "Hide Button"
+msgstr "Esconder botón"
+
+#. Default: "Home"
+#: components/Breadcrumbs/Breadcrumbs
+#: components/MobileNavigation/MobileNavigation
+msgid "Home"
+msgstr "Inicio"
+
+#. Default: "ICS Download"
+#: components/Theme/EventView
+msgid "ICS-Download"
+msgstr "Descargar archivo ICS"
+
+#. Default: "Image"
+#: components/Blocks/Image/ImageSidebar
+msgid "Image"
+msgstr "Imagen"
+
+#. Default: "Left"
+#: components/Widgets/AlignWidget
+msgid "Left"
+msgstr "Izquierda"
+
+#. Default: "Location"
+#: components/Theme/EventView
+msgid "Location"
+msgstr "Ubicación"
+
+#. Default: "Log in"
+#: components/Anontools/Anontools
+msgid "Log in"
+msgstr "Entrar"
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr "Página siguiente"
+
+#. Default: "No date"
+#: components/Theme/EventView
+msgid "No date"
+msgstr "No hay fecha"
+
+#. Default: "No image selected"
+#: components/Blocks/Image/ImageSidebar
+msgid "No image selected"
+msgstr "No se ha seleccionado imagen"
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr "No se han encontrado elementos"
+
+#. Default: "Open menu"
+#: components/MobileNavigation/MobileNavigation
+#: components/Navigation/Navigation
+msgid "Open menu"
+msgstr "Abrir menú"
+
+#. Default: "Overview"
+#: components/MobileNavigation/MobileNavigation
+msgid "Overview"
+msgstr "Resumen"
+
+#. Default: "Phone"
+#: components/Theme/EventView
+msgid "Phone"
+msgstr "Teléfono"
+
+#. Default: "Please choose an existing content as source for this element"
+#: components/Blocks/Slider/DefaultBody
+msgid "Please choose an existing content as source for this element"
+msgstr "Elija un contenido para utilizarlo como fuente de datos para este elemento"
+
+#. Default: "Plone Foundation"
+#: components/Footer/Footer
+msgid "Plone Foundation"
+msgstr "Fundación Plone"
+
+#. Default: "Plone Site"
+#: components/Logo/Logo
+msgid "Plone Site"
+msgstr "Sitio Plone"
+
+#. Default: "Plone{reg} Open Source CMS/WCM"
+#: components/Footer/Footer
+msgid "Plone{reg} Open Source CMS/WCM"
+msgstr "Plone{reg} Gestor de Contenido de Código Abierto"
+
+#. Default: "Powered by Plone & Python"
+#: components/Footer/Footer
+msgid "Powered by Plone & Python"
+msgstr "Hecho con Plone & Python"
+
+#. Default: "Press"
+#: index
+msgid "Press"
+msgstr "Pulsar"
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr "Página anterior"
+
+#. Default: "Register"
+#: components/Anontools/Anontools
+msgid "Register"
+msgstr "Registrar usuario"
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr "Resultado"
+
+#. Default: "Right"
+#: components/Widgets/AlignWidget
+msgid "Right"
+msgstr "Derecha"
+
+#. Default: "Search"
+#: 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 en el Sitio"
+
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr "Busca personas, dirección de correo electrónico, teléfonos, ..."
+
+#. Default: "Search results"
+#: components/Blocks/Search/components/SearchDetails
+msgid "Search results"
+msgstr "Resultados de búsqueda"
+
+#. Default: "Searched for"
+#: components/Blocks/Search/components/SearchDetails
+msgid "Searched for"
+msgstr "Ha buscado"
+
+#. Default: "Site"
+#: components/Logo/Logo
+msgid "Site"
+msgstr "Sitio"
+
+#. Default: "Sitemap"
+#: index
+msgid "Sitemap"
+msgstr "Mapa del sitio"
+
+#. Default: "Sorting"
+#: components/Blocks/Search/TopSideFacets
+msgid "Sorting"
+msgstr "Ordenación"
+
+#. Default: "Source"
+#: components/Blocks/Slider/DefaultBody
+msgid "Source"
+msgstr "Origen"
+
+#. Default: "Start"
+#: components/Theme/EventView
+msgid "Start"
+msgstr "Inicio"
+
+#. Default: "Switch to"
+#: components/LanguageSelector/LanguageSelector
+msgid "Switch to"
+msgstr "Cambiar a"
+
+#. Default: "The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
+#: components/Footer/Footer
+msgid "The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
+msgstr "{plonecms} es {copyright} 2000-{current_year} de la {plonefoundation} y amigos."
+
+#. Default: "Title"
+#: components/Blocks/Image/schema
+msgid "Title"
+msgstr "Título"
+
+#. Default: "Uploading image"
+#: components/Blocks/Image/Edit
+msgid "Uploading image"
+msgstr "Cargando imagen"
+
+#. Default: "Website"
+#: components/Theme/EventView
+msgid "Website"
+msgstr "Sitio web"
+
+#. Default: "Wide"
+#: components/Widgets/AlignWidget
+msgid "Wide"
+msgstr "Ancho"
+
+#. Default: "Clear image"
+#: components/Blocks/Image/ImageSidebar
+msgid "image_block_clear"
+msgstr "Limpiar imagen"
+
+#. Default: "Image preview"
+#: components/Blocks/Image/ImageSidebar
+msgid "image_block_preview"
+msgstr "Previsualización de la imagen"
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr "Cargando"
+
+#. Default: "More info"
+#: components/Blocks/Slider/DefaultBody
+msgid "moreInfo"
+msgstr "Más información"
+
+#. Default: "of"
+#: components/Blocks/Listing/ListingBody
+msgid "of"
+msgstr "de"
+
+#. Default: ""
+#: components/Header/Header
+msgid "siteLabel"
+msgstr " "

package/locales/eu/LC_MESSAGES/volto.po

@@ -0,0 +1,340 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2024-02-08T13:36:14.317Z\n"
+"PO-Revision-Date: \n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language: eu\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+"X-Generator: Poedit 3.0.1\n"
+
+#. Default: "Back"
+#: components/MobileNavigation/MobileNavigation
+msgid "Back"
+msgstr "Atzera"
+
+#. Default: "Background color"
+#: components/Blocks/schema
+msgid "Background color"
+msgstr "Atzeko planoaren kolorea"
+
+#. Default: "Block Width"
+#: components/Blocks/Button/schema
+msgid "Block Width"
+msgstr "Blokearen zabalera"
+
+#. Default: "Breadcrumbs"
+#: components/Breadcrumbs/Breadcrumbs
+msgid "Breadcrumbs"
+msgstr "Breadcrumbak"
+
+#. Default: "Browse the site, drop an image, or type an URL"
+#: components/Blocks/Image/Edit
+msgid "Browse the site, drop an image, or type an URL"
+msgstr "Bilatu atarian, arrastatu irudia edo idatzi URL bat"
+
+#. Default: "Button text"
+#: components/Blocks/Slider/schema
+msgid "Button text"
+msgstr "Botoiaren testua"
+
+#. Default: "Center"
+#: components/Widgets/AlignWidget
+msgid "Center"
+msgstr "Erdiratu"
+
+#. Default: "Close menu"
+#: components/MobileNavigation/MobileNavigation
+#: components/Navigation/Navigation
+msgid "Close menu"
+msgstr "Itxi menua"
+
+#. Default: "Contact"
+#: components/Theme/EventView
+msgid "Contact"
+msgstr "Kontaktua"
+
+#. Default: "Continue reading"
+#: components/Blocks/Slider/DefaultBody
+msgid "Continue reading"
+msgstr "Jarraitu irakurtzen"
+
+#. Default: "Copyright"
+#: components/Footer/Footer
+msgid "Copyright"
+msgstr "Copyright"
+
+#. Default: "Description"
+#: components/Blocks/Image/schema
+msgid "Description"
+msgstr "Deskribapena"
+
+#. Default: "Distributed under the {license}."
+#: components/Footer/Footer
+msgid "Distributed under the {license}."
+msgstr "{lizentzia} lizentziapean banatua."
+
+#. Default: "End"
+#: components/Theme/EventView
+msgid "End"
+msgstr "Amaiera"
+
+#. Default: "Flag align"
+#: components/Blocks/Slider/schema
+msgid "Flag align"
+msgstr "Alineazioa"
+
+#. Default: "Full"
+#: components/Widgets/AlignWidget
+msgid "Full"
+msgstr "Osoa"
+
+#. Default: "GNU GPL license"
+#: components/Footer/Footer
+msgid "GNU GPL license"
+msgstr "GNU GPL"
+
+#. Default: "Hide Button"
+#: components/Blocks/Slider/schema
+msgid "Hide Button"
+msgstr "Ezkutatu botoia"
+
+#. Default: "Home"
+#: components/Breadcrumbs/Breadcrumbs
+#: components/MobileNavigation/MobileNavigation
+msgid "Home"
+msgstr "Hasiera"
+
+#. Default: "ICS Download"
+#: components/Theme/EventView
+msgid "ICS-Download"
+msgstr "Deskargatu ICS fitxategia "
+
+#. Default: "Image"
+#: components/Blocks/Image/ImageSidebar
+msgid "Image"
+msgstr "Irudia"
+
+#. Default: "Left"
+#: components/Widgets/AlignWidget
+msgid "Left"
+msgstr "Ezkerrean"
+
+#. Default: "Location"
+#: components/Theme/EventView
+msgid "Location"
+msgstr "Kokalekua"
+
+#. Default: "Log in"
+#: components/Anontools/Anontools
+msgid "Log in"
+msgstr "Sartu"
+
+#. Default: "Next Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Next Page"
+msgstr "Hurrengo orria"
+
+#. Default: "No date"
+#: components/Theme/EventView
+msgid "No date"
+msgstr "Datarik ez"
+
+#. Default: "No image selected"
+#: components/Blocks/Image/ImageSidebar
+msgid "No image selected"
+msgstr "Ez da irudirik aukeratu"
+
+#. Default: "No items found in this container."
+#: components/Blocks/Listing/ListingBody
+msgid "No items found in this container."
+msgstr "Ez dago elementurik"
+
+#. Default: "Open menu"
+#: components/MobileNavigation/MobileNavigation
+#: components/Navigation/Navigation
+msgid "Open menu"
+msgstr "Ireki menua"
+
+#. Default: "Overview"
+#: components/MobileNavigation/MobileNavigation
+msgid "Overview"
+msgstr "Gainbegirada"
+
+#. Default: "Phone"
+#: components/Theme/EventView
+msgid "Phone"
+msgstr "Telefonoa"
+
+#. Default: "Please choose an existing content as source for this element"
+#: components/Blocks/Slider/DefaultBody
+msgid "Please choose an existing content as source for this element"
+msgstr "Aukeratu eduki bat elementu honen iturburu gisa"
+
+#. Default: "Plone Foundation"
+#: components/Footer/Footer
+msgid "Plone Foundation"
+msgstr "Plone Fundazioa"
+
+#. Default: "Plone Site"
+#: components/Logo/Logo
+msgid "Plone Site"
+msgstr "Plone Ataria"
+
+#. Default: "Plone{reg} Open Source CMS/WCM"
+#: components/Footer/Footer
+msgid "Plone{reg} Open Source CMS/WCM"
+msgstr "Plone{reg} Kode Irekiko EKS"
+
+#. Default: "Powered by Plone & Python"
+#: components/Footer/Footer
+msgid "Powered by Plone & Python"
+msgstr "Plone & Pythonekin egina"
+
+#. Default: "Press"
+#: index
+msgid "Press"
+msgstr "Sakatu"
+
+#. Default: "Previous Page"
+#: components/Blocks/Listing/ListingBody
+msgid "Previous Page"
+msgstr "Aurreko orria"
+
+#. Default: "Register"
+#: components/Anontools/Anontools
+msgid "Register"
+msgstr "Eman izena"
+
+#. Default: "Result"
+#: components/Blocks/Listing/ListingBody
+msgid "Result"
+msgstr "Emaitza"
+
+#. Default: "Right"
+#: components/Widgets/AlignWidget
+msgid "Right"
+msgstr "Eskuman"
+
+#. Default: "Search"
+#: components/Blocks/Search/components/SearchInput
+#: components/Blocks/Search/TopSideFacets
+#: components/MobileNavigation/MobileNavigation
+#: components/SearchWidget/IntranetSearchWidget
+#: components/SearchWidget/SearchWidget
+msgid "Search"
+msgstr "Bilatu"
+
+#. Default: "Search Site"
+#: components/SearchWidget/IntranetSearchWidget
+#: components/SearchWidget/SearchWidget
+msgid "Search Site"
+msgstr "Bilatu atarian"
+
+#. Default: "Search for People, E-Mail Address, Phone Number, ..."
+#: components/SearchWidget/IntranetSearchWidget
+msgid "Search for People, E-Mail Address, Phone Number, ..."
+msgstr "Bilatu pertsonak, eposta helbideak, telefono zenbakiak, ..."
+
+#. Default: "Search results"
+#: components/Blocks/Search/components/SearchDetails
+msgid "Search results"
+msgstr "Bilaketaren emaitzak"
+
+#. Default: "Searched for"
+#: components/Blocks/Search/components/SearchDetails
+msgid "Searched for"
+msgstr "Hau bilatu duzu"
+
+#. Default: "Site"
+#: components/Logo/Logo
+msgid "Site"
+msgstr "Ataria"
+
+#. Default: "Sitemap"
+#: index
+msgid "Sitemap"
+msgstr "Webgunearen mapa"
+
+#. Default: "Sorting"
+#: components/Blocks/Search/TopSideFacets
+msgid "Sorting"
+msgstr "Ordenazioa"
+
+#. Default: "Source"
+#: components/Blocks/Slider/DefaultBody
+msgid "Source"
+msgstr "Iturburua"
+
+#. Default: "Start"
+#: components/Theme/EventView
+msgid "Start"
+msgstr "Hasiera"
+
+#. Default: "Switch to"
+#: components/LanguageSelector/LanguageSelector
+msgid "Switch to"
+msgstr "Hona aldatu"
+
+#. Default: "The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
+#: components/Footer/Footer
+msgid "The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
+msgstr "{plonecms} {copyright} 2000-{current_year} {plonefoundation} eta lagunek egindakoa"
+
+#. Default: "Title"
+#: components/Blocks/Image/schema
+msgid "Title"
+msgstr "Izenburua"
+
+#. Default: "Uploading image"
+#: components/Blocks/Image/Edit
+msgid "Uploading image"
+msgstr "Irudia kargatzen"
+
+#. Default: "Website"
+#: components/Theme/EventView
+msgid "Website"
+msgstr "Webgunea"
+
+#. Default: "Wide"
+#: components/Widgets/AlignWidget
+msgid "Wide"
+msgstr "Zabala"
+
+#. Default: "Clear image"
+#: components/Blocks/Image/ImageSidebar
+msgid "image_block_clear"
+msgstr "Garbitu"
+
+#. Default: "Image preview"
+#: components/Blocks/Image/ImageSidebar
+msgid "image_block_preview"
+msgstr "Irudia aurreikusi"
+
+#. Default: "Loading"
+#: components/Blocks/Listing/ListingBody
+msgid "loading"
+msgstr "Kargatzen"
+
+#. Default: "More info"
+#: components/Blocks/Slider/DefaultBody
+msgid "moreInfo"
+msgstr "Informazio gehiago"
+
+#. Default: "of"
+#: 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.1",
+  "version": "3.1.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -63,6 +63,9 @@
     "@kitconcept/volto-separator-block",
     "@kitconcept/volto-slider-block"
   ],
+  "dependencies": {
+    "@plone/components": "2.0.0-alpha.6"
+  },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.0",
     "@kitconcept/volto-button-block": "^2.3.1",
@@ -72,6 +75,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.15.1"
+    "@plone/volto": "^17.15.5"
   }
 }

package/src/components/Atoms/Container/Container.jsx

@@ -7,6 +7,10 @@ const Container = (props) => {
   const classes = cx('a', 'container', className, { layout, narrow });
 
   const Component = getElementType(Container, props);
+  // eslint-disable-next-line no-console
+  console.warning(
+    'The Container component in: @kitconcept/volto-light-theme/src/components/Atoms/Container/Container.jsx is deprecated, and it will be removed in the next major release of this package. Please use the one in @plone/components instead.',
+  );
   return (
     <Component {...rest} className={classes}>
       {children}

package/src/components/Atoms/README.md

@@ -0,0 +1 @@
+This components are deprecated, and they will be removed in the next major release of this package.

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

@@ -3,7 +3,8 @@ 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';
+import { Container } from '@plone/components';
+
 const EventMetadataView = (props) => {
   const content = props.properties;
   const dateOptions = {

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

@@ -32,6 +32,10 @@ export const ImageView = ({ className, data, detached, properties, style }) => {
   }
 
   const Image = config.getComponent({ name: 'Image' }).component;
+  const shouldRenderCaption =
+    data.title ||
+    data.description ||
+    (data?.copyright_and_sources ?? data.credit?.data);
 
   return (
     <div
@@ -112,11 +116,13 @@ export const ImageView = ({ className, data, detached, properties, style }) => {
                   loading="lazy"
                   responsive={true}
                 />
-                <Caption
-                  title={data.title}
-                  description={data.description}
-                  credit={data?.copyright_and_sources ?? data.credit?.data}
-                />
+                {shouldRenderCaption && (
+                  <Caption
+                    title={data.title}
+                    description={data.description}
+                    credit={data?.copyright_and_sources ?? data.credit?.data}
+                  />
+                )}
               </figure>
             );
             if (href) {

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
-import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+import { Container } from '@plone/components';
 
 import { Icon } from '@plone/volto/components';
 import { getBreadcrumbs } from '@plone/volto/actions';

package/src/components/Footer/Footer.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { useSelector, shallowEqual } from 'react-redux';
 import { UniversalLink, Logo } from '@plone/volto/components';
-import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+import { Container } from '@plone/components';
 import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 

package/src/components/Header/Header.jsx

@@ -1,7 +1,7 @@
 // SemanticUI-free pre-@plone/components
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+import { Container } from '@plone/components';
 import MobileNavigation from '../MobileNavigation/MobileNavigation';
 import { useIntl, defineMessages } from 'react-intl';
 import config from '@plone/volto/registry';
@@ -28,18 +28,6 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
   return (
     <>
       <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>
         <div className="tools-wrapper">
           <LanguageSelector />
 
@@ -58,6 +46,18 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
             </div>
           )}
         </div>
+        <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>
       </div>
     </>
   );

package/src/components/SearchWidget/SearchWidget.jsx

@@ -142,12 +142,14 @@ class SearchWidget extends Component {
                     messages.searchSite,
                   )}
                   title={this.props.intl.formatMessage(messages.search)}
+                  tabIndex={this.state.active ? '0' : '-1'} // Conditional tabIndex
                   ref={(input) => {
                     this.refInput = input;
                   }}
                 />
                 <button
                   aria-label={this.props.intl.formatMessage(messages.search)}
+                  tabIndex={this.state.active ? '0' : '-1'}
                 >
                   <Icon name={zoomSVG} size="48px" />
                 </button>

package/src/index.js

@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import { cloneDeep } from 'lodash';
 
 import { composeSchema, getPreviousNextBlock } from '@plone/volto/helpers';
 import {
@@ -13,7 +14,7 @@ import { disableBgColorSchema } from './components/Blocks/disableBgColorSchema';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
 
 import ContainerQueriesPolyfill from './components/CQPolyfill';
-import Container from './components/Atoms/Container/Container';
+import { Container } from '@plone/components';
 import TopSideFacets from './components/Blocks/Search/TopSideFacets';
 
 import GridListingBlockTemplate from './components/Blocks/Listing/GridTemplate';
@@ -71,7 +72,9 @@ const applyConfig = (config) => {
   config.settings.intranetHeader = false;
 
   // Remove Hero Block
-  config.blocks.blocksConfig.hero.restricted = true;
+  if (config.blocks.blocksConfig?.hero) {
+    config.blocks.blocksConfig.hero.restricted = true;
+  }
 
   // No required blocks (eg. Title)
   config.blocks.requiredBlocks = [
@@ -79,7 +82,7 @@ const applyConfig = (config) => {
     'eventMetadata',
   ];
 
-  // Register custom Container component
+  // Register our custom Container component
   config.registerComponent({
     name: 'Container',
     component: Container,
@@ -198,57 +201,45 @@ const applyConfig = (config) => {
     dataAdapter: ImageBlockDataAdapter,
   };
 
-  config.blocks.blocksConfig.accordion.blocksConfig = {
-    ...config.blocks.blocksConfig,
-    teaser: {
-      ...config.blocks.blocksConfig.teaser,
-      schemaEnhancer: composeSchema(teaserSchemaEnhancer, disableBgColorSchema),
-    },
+  // Accordion internal `blocksConfig` amendments
+  // We cloneDeep the blocksConfig to avoid modifying the original object
+  // in subsequent modifications of the accordion block config
+  config.blocks.blocksConfig.accordion.blocksConfig = cloneDeep(
+    config.blocks.blocksConfig,
+  );
+
+  config.blocks.blocksConfig.accordion.blocksConfig.teaser.schemaEnhancer =
+    composeSchema(teaserSchemaEnhancer, disableBgColorSchema);
+
+  config.blocks.blocksConfig.gridBlock.colors = BG_COLORS;
+  config.blocks.blocksConfig.gridBlock.schemaEnhancer = defaultStylingSchema;
+  config.blocks.blocksConfig.gridBlock.icon = gridSVG;
+
+  // Grids internal `blocksConfig` amendments
+  // Slate in grids must have an extra wrapper with the `slate` className
+  const OriginalSlateBlockView = config.blocks.blocksConfig.slate.view;
+  config.blocks.blocksConfig.gridBlock.blocksConfig.slate.view = (props) => {
+    return (
+      <div className="slate">
+        <OriginalSlateBlockView {...props} />
+      </div>
+    );
   };
 
-  config.blocks.blocksConfig.gridBlock = {
-    ...config.blocks.blocksConfig.gridBlock,
-    colors: BG_COLORS,
-    schemaEnhancer: defaultStylingSchema,
-    icon: gridSVG,
-  };
+  config.blocks.blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
+    composeSchema(
+      imageBlockSchemaEnhancer,
+      gridImageDisableSizeAndPositionHandlersSchema,
+    );
 
-  config.blocks.blocksConfig.gridBlock.blocksConfig = {
-    ...config.blocks.blocksConfig,
-    slate: {
-      ...config.blocks.blocksConfig.slate,
-      // Slate in grids must have an extra wrapper with the `slate` className
-      view: (props) => {
-        const EnhancedSlateViewComponent =
-          config.blocks.blocksConfig.slate.view;
-        return (
-          <div className="slate">
-            <EnhancedSlateViewComponent {...props} />
-          </div>
-        );
-      },
-    },
-    image: {
-      ...config.blocks.blocksConfig.image,
-      schemaEnhancer: composeSchema(
-        imageBlockSchemaEnhancer,
-        gridImageDisableSizeAndPositionHandlersSchema,
-      ),
-    },
-    teaser: {
-      ...config.blocks.blocksConfig.teaser,
-      schemaEnhancer: composeSchema(
-        gridTeaserDisableStylingSchema,
-        teaserSchemaEnhancer,
-      ),
-    },
-    listing: {
-      ...config.blocks.blocksConfig.listing,
-      allowed_headline_tags: [['h2', 'h2']],
-      schemaEnhancer: removeStylingSchema,
-      variations: [],
-    },
-  };
+  config.blocks.blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
+    composeSchema(gridTeaserDisableStylingSchema, teaserSchemaEnhancer);
+
+  config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
+    [['h2', 'h2']];
+  config.blocks.blocksConfig.gridBlock.blocksConfig.listingschemaEnhancer =
+    removeStylingSchema;
+  config.blocks.blocksConfig.gridBlock.blocksConfig.listingvariations = [];
 
   config.blocks.blocksConfig.introduction = {
     ...config.blocks.blocksConfig.introduction,

package/src/theme/{atoms/_container.scss → _container.scss}

@@ -1,3 +1,4 @@
+.q.container,
 .a.container {
   container-type: inline-size;
 

package/src/theme/_header.scss

@@ -1,6 +1,6 @@
 .header-wrapper .header {
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
 
   .logo-nav-wrapper {
     display: flex;

package/src/theme/_layout.scss

@@ -52,18 +52,21 @@
 
 // We expect initially three main containers
 .header-wrapper {
+  .q.container,
   .a.container {
     @include container-preference-order(12);
   }
 }
 
 .content-area {
+  .q.container,
   .a.container {
     @include container-preference-order(10);
   }
 }
 
 footer {
+  .q.container,
   .a.container {
     @include container-preference-order(8);
   }
@@ -115,6 +118,7 @@ footer {
 
 // Slate Style External Links
 .content-area .ui.container,
+.content-area .q.container,
 .content-area .a.container {
   a.external:after,
   a.external:after {
@@ -124,6 +128,7 @@ footer {
   }
 }
 .content-area #page-edit .ui.container,
+.content-area .q.container,
 .content-area .a.container {
   a.external:after,
   a.external:after {
@@ -137,6 +142,7 @@ footer {
 External link removal for all the blocks.
 */
 .content-area #page-edit .ui.container,
+.content-area .q.container,
 .content-area .a.container {
   .block.button,
   .block.listing,

package/src/theme/blocks/_teaser.scss

@@ -100,7 +100,7 @@
     }
     h2 {
       margin-top: 0;
-      margin-bottom: 40px;
+      margin-bottom: 20px;
       @include text-heading-h2();
       @container (max-width: #{$largest-mobile-screen}) {
         @include text-heading-h3();

package/src/theme/main.scss

@@ -6,7 +6,7 @@
 @import 'utils';
 @import 'layout';
 
-@import 'atoms/container';
+@import 'container';
 
 @import 'toolbar';
 @import 'header';