@kitconcept/volto-light-theme 2.1.0 → 3.0.0-alpha.0

package/CHANGELOG.md

@@ -8,6 +8,46 @@
 
 <!-- towncrier release notes start -->
 
+## 3.0.0-alpha.0 (2023-12-27)
+
+### Breaking
+
+- Upgraded the dependency on `@kitconcept/volto-slider-block` to use `6.0.0`.
+
+  This is a drop-in replacement, so no action is required for the existing slider blocks you may have already in your sites.
+  However, the CSS classes of the structural slider block elements changed in this version.
+  The inner (visible objects) CSS classes remain unchanged.
+  If you have customized them in your project, you may have to update them, although the structural class names are rarely customized aside from vertical spacing properties.
+  They are mapped 1:1 with the previous ones, following this table correspondence:
+
+  | Old className   | New className    |
+  | --------------- | ---------------- |
+  | slick-slider    | slider-wrapper   |
+  | slick-list      | slider-viewport  |
+  | slick-track     | slider-container |
+  | slick-slide     | slider-slide     |
+  | slick-arrow     | slider-button    |
+  | slick-prev      | slider-button-prev |
+  | slick-next      | slider-slide-next  |
+  | slick-next      | slider-slide-next  |
+  | slick-dots      | slider-dots      |
+  | slick-dot       | slider-dot       |
+
+  For more information, please check the https://github.com/kitconcept/volto-slider-block/blob/main/README.md [#288](https://github.com/kitconcept/volto-light-theme/pull/288)
+
+### Bugfix
+
+- Fix showing up uploaded logo from site controlpanel. @iFlameing [#291](https://github.com/kitconcept/volto-light-theme/pull/291)
+- Un-pin `eslint-plugin-jsx-a11y` version @sneridagh [#299](https://github.com/kitconcept/volto-light-theme/pull/299)
+- Fix Blocks chooser styling @iRohitSingh [#307](https://github.com/kitconcept/volto-light-theme/pull/307)
+- Remove id selector from listings because of css specificity @steffenri [#309](https://github.com/kitconcept/volto-light-theme/pull/309)
+- Fix margins of h1 in sitemap view @steffenri [#312](https://github.com/kitconcept/volto-light-theme/pull/312)
+- Fix homepage link for all language codes (#298) @steffenri [#313](https://github.com/kitconcept/volto-light-theme/pull/313)
+
+### Internal
+
+- Upgrade slider to 6.1.0 @sneridagh [#316](https://github.com/kitconcept/volto-light-theme/pull/316)
+
 ## 2.1.0 (2023-12-13)
 
 ### Feature

package/Makefile

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

package/README.md

@@ -118,14 +118,15 @@ It is recommended that your project or policy add-on `package.json` include the
 
 ```json
   "dependencies": {
-    "@eeacms/volto-accordion-block": "9.0.0",
-    "@kitconcept/volto-button-block": "2.1.0",
-    "@kitconcept/volto-dsgvo-banner": "1.3.0",
-    "@kitconcept/volto-heading-block": "2.2.0",
-    "@kitconcept/volto-introduction-block": "1.0.0",
-    "@kitconcept/volto-light-theme": "1.0.0",
-    "@kitconcept/volto-separator-block": "4.0.0",
-    "@kitconcept/volto-highlight-block": "3.0.0",
+    "@eeacms/volto-accordion-block": "^10.4.0",
+    "@kitconcept/volto-button-block": "^2.3.1",
+    "@kitconcept/volto-dsgvo-banner": "^1.3.0",
+    "@kitconcept/volto-heading-block": "^2.4.0",
+    "@kitconcept/volto-highlight-block": "^3.0.0",
+    "@kitconcept/volto-introduction-block": "^1.0.0",
+    "@kitconcept/volto-separator-block": "^4.0.0",
+    "@kitconcept/volto-slider-block": "^6.0.0",
+    "@kitconcept/volto-light-theme": "^2.0.0",
   }
 ```
 
@@ -155,7 +156,7 @@ Then, declare the theme in your project `package.json`:
   "theme": "@kitconcept/volto-light-theme",
 ```
 
-Alternativelly, you can also declare it in your project's `volto.config.js`:
+Alternatively, you can also declare it in your project's `volto.config.js`:
 
 ```js
 const addons = [];
@@ -169,9 +170,9 @@ module.exports = {
 
 You can specify your project add-ons in `volto.config.js`, but sometimes is better to have them all in one place (in your policy add-on) for portability.
 
-## Feature flags
+## Feature Flags
 
-### Enable fat menu
+### Enable Fat Menu
 
 Since 2.0.0, the light theme has a fat menu (below the main site sections) triggered clickin on one of them.
 It's behind a feature flag, as opt-out:
@@ -220,7 +221,7 @@ Run `make help` to list the available commands.
 - Docker
 - Node 18 (e.g. via nvm)
 
-### Development environment Setup
+### Development Environment Setup
 
 Run once
 
@@ -231,7 +232,7 @@ make dev
 which will build and launch the backend and frontend containers.
 There's no need to build them again after doing it the first time unless something has changed from the container setup.
 
-In order to make the local IDE play well with this setup, is it required to run once `yarn` to install locally the required packages (ESlint, Prettier, Stylelint).
+To make the local IDE play well with this setup, it is required to run `yarn` once to install the required packages (ESlint, Prettier, Stylelint).
 
 Run
 
@@ -260,7 +261,7 @@ This will start both the frontend and backend containers.
 
 ### Stop Backend (Docker)
 
-After developing, in order to stop the running backend, don't forget to run:
+After developing, to stop the running backend, don't forget to run:
 
 Run
 
@@ -324,7 +325,7 @@ Run
 make test-acceptance
 ```
 
-To run Cypress tests afterwards.
+To run Cypress tests afterward.
 
 When finished, don't forget to shutdown the backend server.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "2.1.0",
+  "version": "3.0.0-alpha.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -41,7 +41,7 @@
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
     "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -71,7 +71,7 @@
     "@kitconcept/volto-highlight-block": "^3.0.0",
     "@kitconcept/volto-introduction-block": "^1.0.0",
     "@kitconcept/volto-separator-block": "^4.0.0",
-    "@kitconcept/volto-slider-block": "5.1.1",
-    "@plone/volto": "^17.5.0"
+    "@kitconcept/volto-slider-block": "^6.1.0",
+    "@plone/volto": "^17.6.1"
   }
 }

package/src/components/Logo/Logo.jsx

@@ -5,6 +5,7 @@ import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
 import { toBackendLang } from '@plone/volto/helpers';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
+import { flattenToAppURL } from '@plone/volto/helpers';
 
 const messages = defineMessages({
   site: {
@@ -21,6 +22,7 @@ const Logo = () => {
   const { settings } = config;
   const lang = useSelector((state) => state.intl.locale);
   const intl = useIntl();
+  const site = useSelector((state) => state.site.data);
 
   return (
     <UniversalLink
@@ -28,7 +30,11 @@ const Logo = () => {
       title={intl.formatMessage(messages.site)}
     >
       <img
-        src={LogoImage}
+        src={
+          site['plone.site_logo']
+            ? flattenToAppURL(site['plone.site_logo'])
+            : LogoImage
+        }
         alt={intl.formatMessage(messages.plonesite)}
         title={intl.formatMessage(messages.plonesite)}
       />

package/src/components/MobileNavigation/MobileNavigation.jsx

@@ -6,7 +6,9 @@ import cx from 'classnames';
 
 import { CSSTransition } from 'react-transition-group';
 
+import config from '@plone/volto/registry';
 import { Icon } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import arrowRightSVG from '@plone/volto/icons/right-key.svg';
 import arrowLeftSVG from '@plone/volto/icons/left-key.svg';
 import { MobileToolsFooter } from './MobileToolsFooter';
@@ -38,6 +40,7 @@ const MobileNavigation = (props) => {
     tertiaryMenuOpened,
     isTertiaryMobileMenuOpen,
   } = menuState;
+  const { settings } = config;
   const intl = useIntl();
   const menus = React.useRef(null);
   const currentLang = useSelector((state) => state.intl.locale);
@@ -163,7 +166,14 @@ const MobileNavigation = (props) => {
         <div className="menu-drawer">
           <ul className="sections">
             <li className="header">
-              <Link to={`/${currentLang}`} onClick={closeMenus}>
+              <Link
+                to={
+                  settings.isMultilingual
+                    ? `/${toBackendLang(currentLang)}`
+                    : '/'
+                }
+                onClick={closeMenus}
+              >
                 <FormattedMessage id="Home" defaultMessage="Home" />
               </Link>
             </li>

package/src/theme/_bgcolor-blocks-layout.scss

@@ -51,6 +51,19 @@
   }
 }
 
+// Slider
+#page-document .blocks-group-wrapper.grey:has(.block.slider:first-child) {
+  padding-top: 0;
+  padding-bottom: 0px; // Adjust for the padding from the slider itself
+}
+
+#page-document .blocks-group-wrapper.grey .block.slider,
+.block-editor-slider.has--backgroundColor--grey {
+  .slider-dot:not(.slider-dot--selected)::after {
+    background: #fff;
+  }
+}
+
 // Edit mode adjustments
 .block-editor-gridBlock.has--backgroundColor--grey .block h2.headline {
   padding-top: $spacing-xlarge;

package/src/theme/_blocks-chooser.scss

@@ -0,0 +1,3 @@
+.blocks-chooser .ui.form .searchbox.field {
+  height: unset !important;
+}

package/src/theme/_sitemap.scss

@@ -3,6 +3,8 @@
   #page-sitemap {
     h1 {
       @include page-title();
+      @include vertical-space-h1();
+      @include word-break();
     }
 
     ul {

package/src/theme/blocks/_listing.scss

@@ -1,5 +1,5 @@
 // Listing Block
-#main .block.listing,
+.block.listing,
 .column > .block.listing,
 .block.search,
 .block-editor-search {

package/src/theme/blocks/_slider.scss

@@ -1,8 +1,4 @@
 // Slider Block
-:root {
-  --slider-block-edit-width-adjustment: 40px;
-}
-
 $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
 
 .block.slider {
@@ -11,84 +7,33 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     padding-bottom: 0;
   }
 
-  .highlight-image-wrapper img {
-    // Override Volto's Image Component inline style aspect ratio.
-    aspect-ratio: $sliderImagesAspectRatio !important;
+  .slider-viewport {
+    margin-bottom: 0;
   }
 
-  .teaser-item,
-  .grid-teaser-item {
-    flex-direction: column;
-  }
-  .teaser-item {
-    padding-bottom: $spacing-xlarge;
+  .slider-dots {
+    padding-bottom: 40px;
   }
 
-  .slide-wrapper:not(.empty-slide) {
-    padding-bottom: $spacing-xlarge;
-  }
+  .highlight-image-wrapper {
+    display: flex; // Small gap was appearing between the wrapper and the image (??)
 
-  .slick-arrow {
-    width: 50px;
-    // Equal to the space we give at the bottom to place the buttons
-    height: calc(100% - $spacing-xlarge);
-    background-color: rgba(0, 0, 0, 0.15);
-    color: $white;
-    // border: 2px solid red;
-    opacity: 0;
-    transition: opacity 0.2s ease-in;
-    &:hover {
-      opacity: 1;
+    img {
+      // Override Volto's Image Component inline style aspect ratio.
+      aspect-ratio: $sliderImagesAspectRatio !important;
     }
   }
 
-  .slick-next,
-  .slick-prev {
-    top: initial;
-  }
-
-  .slick-next {
-    right: 0;
-    // Equal to the space we give at the bottom to place the buttons
-    bottom: $spacing-xlarge;
-    @media only screen and (max-width: $computer-width) {
-      display: none !important;
-    }
+  .teaser-item,
+  .grid-teaser-item {
+    flex-direction: column;
   }
-
-  .slick-prev {
-    z-index: 9;
-    left: 0;
-    @media only screen and (max-width: $computer-width) {
-      display: none !important;
-    }
+  .teaser-item {
+    padding-bottom: $spacing-medium;
   }
 
-  .slick-dots {
-    bottom: 34px;
-    line-height: 0;
-
-    li,
-    button {
-      width: 46px;
-      height: 6px;
-      padding: 0;
-      background-color: $secondary-grey;
-    }
-
-    li.slick-active button {
-      background-color: $black;
-    }
-
-    li {
-      margin-right: 13px;
-      margin-left: 0;
-    }
-
-    button:before {
-      display: none;
-      content: '';
-    }
+  .slide-wrapper:not(.empty-slide) {
+    padding-bottom: $spacing-xlarge;
   }
 
   .teaser-item.top {

package/src/theme/main.scss

@@ -31,6 +31,7 @@
 @import 'blocks/toc';
 @import 'blocks/table';
 @import 'blocks/maps';
+@import 'blocks-chooser';
 
 @import 'temp';