@kitconcept/volto-light-theme 6.0.0-alpha.23 → 6.0.0-alpha.24

package/.changelog.draft

@@ -1,8 +1,9 @@
-## 6.0.0-alpha.23 (2025-04-30)
+## 6.0.0-alpha.24 (2025-05-06)
 
-### Bugfix
+### Feature
 
-- Do not use the color contrast checker if the field is not in the color map settings config. @sneridagh [#529](https://github.com/kitconcept/volto-light-theme/pull/529)
-- Adjustments to the footer, conditional "Follow us" text and footer_links container. @sneridagh [#529](https://github.com/kitconcept/volto-light-theme/pull/529)
+- Added `sticky_menu` slot. @sneridagh [#523](https://github.com/kitconcept/volto-light-theme/pull/523)
+- Better naming for the specific kitconcept's behaviors for distributions. @sneridagh [#530](https://github.com/kitconcept/volto-light-theme/pull/530)
+- Use `--image-aspect-ratio` for all images. @danalvrz [#533](https://github.com/kitconcept/volto-light-theme/pull/533)
 
 

package/CHANGELOG.md

@@ -8,6 +8,14 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.24 (2025-05-06)
+
+### Feature
+
+- Added `sticky_menu` slot. @sneridagh [#523](https://github.com/kitconcept/volto-light-theme/pull/523)
+- Better naming for the specific kitconcept's behaviors for distributions. @sneridagh [#530](https://github.com/kitconcept/volto-light-theme/pull/530)
+- Use `--image-aspect-ratio` for all images. @danalvrz [#533](https://github.com/kitconcept/volto-light-theme/pull/533)
+
 ## 6.0.0-alpha.23 (2025-04-30)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.23",
+  "version": "6.0.0-alpha.24",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -33,7 +33,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "release-it": "^17.7.0",
-    "@plone/types": "1.4.1"
+    "@plone/types": "1.4.3"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",

package/src/components/Footer/slots/CoreFooter.tsx

@@ -8,30 +8,30 @@ import type { Content } from '@plone/types';
 const CoreFooter = ({ content }: { content: Content }) => {
   const footer_address = useLiveData<SiteFooterSettings['footer_address']>(
     content,
-    'kitconcept.distributions.footer',
+    'kitconcept.footer',
     'footer_address',
   );
 
   const footer_column_left_header = useLiveData<
     SiteFooterSettings['footer_column_left_header']
-  >(content, 'kitconcept.distributions.footer', 'footer_column_left_header');
+  >(content, 'kitconcept.footer', 'footer_column_left_header');
   const footer_column_left = useLiveData<
     SiteFooterSettings['footer_column_left']
-  >(content, 'kitconcept.distributions.footer', 'footer_column_left');
+  >(content, 'kitconcept.footer', 'footer_column_left');
 
   const footer_column_middle_header = useLiveData<
     SiteFooterSettings['footer_column_middle_header']
-  >(content, 'kitconcept.distributions.footer', 'footer_column_middle_header');
+  >(content, 'kitconcept.footer', 'footer_column_middle_header');
   const footer_column_middle = useLiveData<
     SiteFooterSettings['footer_column_middle']
-  >(content, 'kitconcept.distributions.footer', 'footer_column_middle');
+  >(content, 'kitconcept.footer', 'footer_column_middle');
 
   const footer_column_right_header = useLiveData<
     SiteFooterSettings['footer_column_right_header']
-  >(content, 'kitconcept.distributions.footer', 'footer_column_right_header');
+  >(content, 'kitconcept.footer', 'footer_column_right_header');
   const footer_column_right = useLiveData<
     SiteFooterSettings['footer_column_right']
-  >(content, 'kitconcept.distributions.footer', 'footer_column_right');
+  >(content, 'kitconcept.footer', 'footer_column_right');
 
   return (
     <Container className="footer">

package/src/components/Footer/slots/FollowUsLogoAndLinks.tsx

@@ -4,7 +4,7 @@ import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { Container } from '@plone/components';
 import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
-import LinkList from '../LinkList';
+import LinkList from '../../../primitives/LinkList';
 import type {
   PloneGobrSocialMediaSettings,
   SiteFooterSettings,
@@ -25,7 +25,7 @@ const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
 
   const footer_logo = useLiveData<SiteFooterSettings['footer_logo']>(
     content,
-    'kitconcept.distributions.footer',
+    'kitconcept.footer',
     'footer_logo',
   );
 

package/src/components/StickyMenu/StickyMenu.tsx

@@ -0,0 +1,36 @@
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import IconLinkList from '@kitconcept/volto-light-theme/primitives/IconLinkList';
+import type { StickyMenuSettings } from '../../types';
+import type { Content } from '@plone/types';
+
+const StickyMenu = ({ content }: { content: Content }) => {
+  const menuData = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'sticky_menu',
+  );
+
+  const sticky_menu_color = useLiveData<
+    StickyMenuSettings['sticky_menu_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_color');
+
+  const sticky_menu_foreground_color = useLiveData<
+    StickyMenuSettings['sticky_menu_foreground_color']
+  >(content, 'kitconcept.sticky_menu', 'sticky_menu_foreground_color');
+
+  return (
+    <div
+      className="sticky-menu"
+      style={
+        {
+          '--sticky-menu-color': sticky_menu_color,
+          '--sticky-menu-foreground-color': sticky_menu_foreground_color,
+        } as React.CSSProperties
+      }
+    >
+      <IconLinkList iconLinks={menuData} />
+    </div>
+  );
+};
+
+export default StickyMenu;

package/src/config/settings.ts

@@ -21,7 +21,7 @@ type apiExpanderInherit = {
 
 export default function install(config: ConfigType) {
   const EXPANDERS_INHERIT_BEHAVIORS =
-    'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,kitconcept.distributions.footer';
+    'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,kitconcept.footer,kitconcept.sticky_menu';
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
   config.settings.navDepth = 3;
   config.settings.slate.useLinkedHeadings = false;

package/src/config/slots.ts

@@ -4,6 +4,7 @@ import FooterLogos from '../components/Footer/slots/FooterLogos';
 import FollowUsLogoAndLinks from '../components/Footer/slots/FollowUsLogoAndLinks';
 import Colophon from '../components/Footer/slots/Colophon';
 import CoreFooter from '../components/Footer/slots/CoreFooter';
+import StickyMenu from '../components/StickyMenu/StickyMenu';
 import type { Content } from '@plone/types';
 
 export function hasInheritedBehavior(behavior: string) {
@@ -18,6 +19,12 @@ export default function install(config: ConfigType) {
     component: Theming,
   });
 
+  config.registerSlotComponent({
+    slot: 'aboveHeader',
+    name: 'StickyMenu',
+    component: StickyMenu,
+  });
+
   config.registerSlotComponent({
     name: 'footerLogos',
     slot: 'preFooter',
@@ -28,7 +35,7 @@ export default function install(config: ConfigType) {
     name: 'coreFooter',
     slot: 'footer',
     component: CoreFooter,
-    predicates: [hasInheritedBehavior('kitconcept.distributions.footer')],
+    predicates: [hasInheritedBehavior('kitconcept.footer')],
   });
 
   config.registerSlotComponent({

package/src/index.ts

@@ -21,6 +21,7 @@ import type {
   SiteHeaderSettings,
   SiteThemeSettings,
   SiteFooterSettings,
+  StickyMenuSettings,
   PloneGobrSocialMediaSettings,
 } from './types';
 
@@ -55,7 +56,8 @@ declare module '@plone/types' {
       'voltolighttheme.header': CustomInheritBehavior<SiteHeaderSettings>;
       'voltolighttheme.theme': CustomInheritBehavior<SiteThemeSettings>;
       'voltolighttheme.footer': CustomInheritBehavior<SiteFooterSettings>;
-      'kitconcept.distributions.footer': CustomInheritBehavior<SiteFooterSettings>;
+      'kitconcept.sticky_menu': CustomInheritBehavior<StickyMenuSettings>;
+      'kitconcept.footer': CustomInheritBehavior<SiteFooterSettings>;
       'plonegovbr.socialmedia.settings': CustomInheritBehavior<PloneGobrSocialMediaSettings>;
     };
   }

package/src/{components/Footer → primitives}/IconLinkList.tsx

@@ -1,6 +1,6 @@
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
-import type { iconLink } from '../../types';
+import type { iconLink } from '../types';
 
 type IconLinkListProps = {
   iconLinks: Array<iconLink>;

package/src/{components/Footer → primitives}/LinkList.tsx

@@ -1,7 +1,7 @@
 import isEmpty from 'lodash/isEmpty';
 import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import type { Link } from '../../types';
+import type { Link } from '../types';
 
 type LinksProps = { links: Array<Link> };
 

package/src/theme/_footer.scss

@@ -293,7 +293,7 @@
     &:before {
       display: block;
       padding-top: 50px;
-      border-top: 1px solid $black;
+      border-top: 1px solid var(--footer-foreground, $black);
       content: '';
       @include default-container-width();
     }

package/src/theme/_utils.scss

@@ -37,7 +37,7 @@
 
 @mixin default-aspect-ratio {
   height: auto; // needed width width, height props and aspect ratio
-  aspect-ratio: $aspect-ratio;
+  aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
   object-fit: cover;
   object-position: top left;
 }

package/src/theme/_variables.scss

@@ -114,6 +114,11 @@ $secondary-grey: #ececec !default;
   syntax: '<color>';
 }
 
+@property --image-aspect-ratio {
+  inherits: true;
+  syntax: '<number> | auto';
+}
+
 :root {
   --background: initial;
   --text-color: initial;

package/src/theme/blocks/_highlight.scss

@@ -1,4 +1,6 @@
 .block.highlight {
+  --highlight-images-aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
+
   .teaser-item.top .highlight-description {
     .title h2 {
       @include highlight-title();

package/src/theme/blocks/_listing.scss

@@ -82,7 +82,7 @@
       img {
         width: 220px;
         height: min-content;
-        aspect-ratio: $aspect-ratio !important;
+        aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
         @container (max-width: #{$largest-mobile-screen}) {
           width: 100%;
           min-width: 335px;
@@ -177,7 +177,7 @@
       img.item-image {
         width: 100%;
         margin: 0;
-        aspect-ratio: $aspect-ratio !important;
+        aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
       }
 
       .item {

package/src/theme/blocks/_maps.scss

@@ -1,14 +1,14 @@
 .block.maps {
   iframe {
     height: unset;
-    aspect-ratio: $aspect-ratio;
+    aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
   }
   &.align.left {
     iframe {
       height: unset;
       margin-right: 20px !important;
       margin-bottom: 20px !important;
-      aspect-ratio: $aspect-ratio;
+      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
       @container (max-width: #{$largest-mobile-screen}) {
         margin-bottom: $spacing-large !important;
       }
@@ -21,7 +21,7 @@
       height: unset;
       margin-bottom: 20px !important;
       margin-left: 20px !important;
-      aspect-ratio: $aspect-ratio;
+      aspect-ratio: var(--image-aspect-ratio, $aspect-ratio);
       @container (max-width: #{$largest-mobile-screen}) {
         margin-bottom: $spacing-large !important;
       }

package/src/theme/main.scss

@@ -34,6 +34,7 @@
 @import 'blocks/maps';
 @import 'blocks-chooser';
 @import 'blocks/eventMetadata';
+@import 'sticky-menu';
 
 @import 'temp';
 

package/src/theme/sticky-menu.scss

@@ -0,0 +1,50 @@
+.sticky-menu {
+  position: fixed;
+  z-index: 1000;
+  top: 373px;
+  right: 0;
+
+  ul {
+    display: flex;
+    width: 115px;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+
+    li a {
+      display: flex;
+      height: 93px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 2px;
+      background: var(--sticky-menu-color, #555);
+      color: var(--sticky-menu-foreground-color, #fff);
+      font-family: Inter;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 18px; /* 180% */
+      text-transform: capitalize;
+    }
+
+    .image-wrapper {
+      height: 65px;
+    }
+
+    img {
+      width: 100%;
+      max-width: 65px;
+      height: auto;
+    }
+  }
+
+  @media only screen and (max-width: $largest-mobile-screen) {
+    display: none;
+  }
+}
+
+body.view-editview .sticky-menu {
+  display: none;
+}

package/src/types.d.ts

@@ -75,6 +75,12 @@ export type SiteFooterSettings = {
   footer_links: Array<Link>;
 };
 
+export type StickyMenuSettings = {
+  sticky_menu: Array<iconLink>;
+  sticky_menu_color: string;
+  sticky_menu_foreground_color: string;
+};
+
 export type PloneGobrSocialMediaSettings = {
   social_links: Array<iconLink>;
 };
@@ -90,6 +96,7 @@ export type CustomInheritBehavior<T> = {
 declare module '@plone/types' {
   export interface Content {
     footer_logos: Array<footerLogo>;
+    sticky_menu: Array<stickyMenu>;
     footer_links: Array<Link>;
   }
 }