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

package/.changelog.draft

@@ -1,26 +1,9 @@
-## 6.0.0-alpha.22 (2025-04-29)
-
-### Breaking
-
-- Remove `Anontools` from the headers.
-  If you want to add them, you can use the `header_actions` field in the site customization behaviors. @sneridagh [#522](https://github.com/kitconcept/volto-light-theme/pull/522)
-- Updated the footer structure and look and feel:
-  - Follow us, powered by `@plonegovbr/volto-social-media`
-  - Footer links
-  - Colophon
-
-  All of them are powered by their slots, so they are customizable.
-
-  @sneridagh [#525](https://github.com/kitconcept/volto-light-theme/pull/525)
+## 6.0.0-alpha.24 (2025-05-06)
 
 ### Feature
 
-- Allow `intranet_flag` in both headers. @sneridagh [#524](https://github.com/kitconcept/volto-light-theme/pull/524)
-- Added distribution core footer, only active if the `kitconcept.distributions.footer` is installed. @sneridagh [#525](https://github.com/kitconcept/volto-light-theme/pull/525)
-
-### Bugfix
-
-- Minor typo fix in color contrast check message. @danalvrz [#526](https://github.com/kitconcept/volto-light-theme/pull/526)
-- Fix customized object list widget when data doesn't contain a value yet. @davisagli [#527](https://github.com/kitconcept/volto-light-theme/pull/527)
+- 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,21 @@
 
 <!-- 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
+
+- 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)
+
 ## 6.0.0-alpha.22 (2025-04-29)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.22",
+  "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,12 +4,19 @@ 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 type { SiteFooterSettings } from '../../../types';
+import LinkList from '../../../primitives/LinkList';
+import type {
+  PloneGobrSocialMediaSettings,
+  SiteFooterSettings,
+} from '../../../types';
 import type { Content } from '@plone/types';
 import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
+  const social_links = useLiveData<
+    PloneGobrSocialMediaSettings['social_links']
+  >(content, 'plonegovbr.socialmedia.settings', 'social_links');
+
   const footer_links = useLiveData<SiteFooterSettings['footer_links']>(
     content,
     'voltolighttheme.footer',
@@ -18,7 +25,7 @@ const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
 
   const footer_logo = useLiveData<SiteFooterSettings['footer_logo']>(
     content,
-    'kitconcept.distributions.footer',
+    'kitconcept.footer',
     'footer_logo',
   );
 
@@ -33,16 +40,20 @@ const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
       })}
     >
       <div className="followus-and-links">
-        <div className="follow-us">
-          <span>
-            <FormattedMessage id="Follow us:" defaultMessage="Follow us:" />
-          </span>
-          <SlotRenderer name="followUs" content={content} />
-        </div>
-        <div className="footer-links">
-          <SlotRenderer name="footerLinks" content={content} />
-          <LinkList links={footer_links} />
-        </div>
+        {social_links?.length > 0 && (
+          <div className="follow-us">
+            <span>
+              <FormattedMessage id="Follow us:" defaultMessage="Follow us:" />
+            </span>
+            <SlotRenderer name="followUs" content={content} />
+          </div>
+        )}
+        {footer_links?.length > 0 && (
+          <div className="footer-links">
+            <SlotRenderer name="footerLinks" content={content} />
+            <LinkList links={footer_links} />
+          </div>
+        )}
       </div>
       {footer_logo?.data || footer_logo?.download ? (
         <div className="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/components/Widgets/ColorPicker.tsx

@@ -3,6 +3,7 @@ import { HexColorPicker, HexColorInput } from 'react-colorful';
 import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
 import { ColorSwatch, CloseIcon } from '@plone/components';
 import ColorContrastChecker from './ColorContrastChecker';
+import config from '@plone/volto/registry';
 
 const ColorPicker = (props: {
   id: string;
@@ -48,7 +49,9 @@ const ColorPicker = (props: {
           <CloseIcon size="S" />
         </Button>
       </FormFieldWrapper>
-      <ColorContrastChecker {...props} />
+      {config.settings.colorMap[props.id] && (
+        <ColorContrastChecker {...props} />
+      )}
     </>
   );
 };

package/src/components/Widgets/ObjectList.tsx

@@ -121,6 +121,18 @@ export type ObjectListWidgetProps = {
   }) => JSONSchema;
 };
 
+const EMPTY_SCHEMA = {
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+  properties: {},
+  required: [],
+};
+
 const ObjectListWidget = (props: ObjectListWidgetProps) => {
   const {
     block,
@@ -136,7 +148,9 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
     config.getUtility({
       type: 'schema',
       name: schemaName,
-    }).method || props.schema;
+    }).method ||
+    props.schema ||
+    EMPTY_SCHEMA;
 
   const [localActiveObject, setLocalActiveObject] = useState(
     props.activeObject ?? value?.length - 1,

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,8 @@ import type {
   SiteHeaderSettings,
   SiteThemeSettings,
   SiteFooterSettings,
+  StickyMenuSettings,
+  PloneGobrSocialMediaSettings,
 } from './types';
 
 defineMessages({
@@ -54,7 +56,9 @@ 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,16 @@ 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>;
+};
+
 export type CustomInheritBehavior<T> = {
   data: T;
   from: {
@@ -86,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>;
   }
 }