@kitconcept/volto-light-theme 7.0.0-alpha.11 → 7.0.0-alpha.13

package/.changelog.draft

@@ -1,15 +1,7 @@
-## 7.0.0-alpha.11 (2025-06-12)
+## 7.0.0-alpha.13 (2025-06-18)
 
 ### Bugfix
 
-- Do not show sticky menu in add view. @sneridagh 
-- Fix aspect ratio for images in file grid teaser block @iRohitSingh 
-- Fixed position of sticky menu for small screens. @sneridagh 
-
-### Internal
-
-- Added visual regression tests for Storybook stories. @sneridagh [#576](https://github.com/kitconcept/volto-light-theme/pull/576)
-- Upgrade to Volto 18.23.0 @sneridagh 
-- Use `vitest` for unit tests. @sneridagh 
+- Fixed default `selectedItemAttrs` for Teaser to include Person specific attributes. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,24 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.13 (2025-06-18)
+
+### Bugfix
+
+- Fixed default `selectedItemAttrs` for Teaser to include Person specific attributes. @sneridagh 
+
+## 7.0.0-alpha.12 (2025-06-18)
+
+### Feature
+
+- Reintroduce an improved `Anontools` using `portal_actions`. @sneridagh [#581](https://github.com/kitconcept/volto-light-theme/pull/581)
+
+### Bugfix
+
+- Fix sticky menu precedence in z-index with the fat menu. @sneridagh [#582](https://github.com/kitconcept/volto-light-theme/pull/582)
+- Fixed listing in grids variations to match the standalone ones (except Grid). @sneridagh [#582](https://github.com/kitconcept/volto-light-theme/pull/582)
+- Fixed Person CSS in Search block. @sneridagh [#584](https://github.com/kitconcept/volto-light-theme/pull/584)
+
 ## 7.0.0-alpha.11 (2025-06-12)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.11",
+  "version": "7.0.0-alpha.13",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Anontools/Anontools.tsx

@@ -0,0 +1,59 @@
+// SemanticUI-free pre-@plone/components
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { useSelector, shallowEqual } from 'react-redux';
+import type { ActionsResponse, Content } from '@plone/types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  actions: {
+    actions: ActionsResponse;
+  };
+};
+
+const Anontools = () => {
+  const content = useSelector<FormState, Content>(
+    (state) => state.content.data,
+    shallowEqual,
+  );
+  const actions = useSelector<FormState, ActionsResponse>(
+    (state) => state.actions.actions,
+    shallowEqual,
+  );
+
+  const loginAction = actions.user?.find((o) => o.id === 'login');
+  const registerAction = actions.user?.find((o) => o.id === 'join');
+  const logoutAction = actions.user?.find((o) => o.id === 'logout');
+
+  return (
+    <>
+      {registerAction && (
+        <Link aria-label="register" to="/register">
+          <FormattedMessage id="Register" defaultMessage="Register" />
+        </Link>
+      )}
+      {loginAction && (
+        <Link
+          aria-label="login"
+          to={`/login${
+            content?.['@id']
+              ? `?return_url=${flattenToAppURL(content['@id'])}`
+              : ''
+          }`}
+        >
+          <FormattedMessage id="Log in" defaultMessage="Log in" />
+        </Link>
+      )}
+      {logoutAction && (
+        <Link aria-label="logout" to="/logout">
+          <FormattedMessage id="Log out" defaultMessage="Log out" />
+        </Link>
+      )}
+    </>
+  );
+};
+
+export default Anontools;

package/src/components/Blocks/Teaser/schema.js

@@ -3,6 +3,10 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   schema.properties.href.selectedItemAttrs.push('effective');
   schema.properties.href.selectedItemAttrs.push('start');
   schema.properties.href.selectedItemAttrs.push('end');
+  schema.properties.href.selectedItemAttrs.push('description');
+  schema.properties.href.selectedItemAttrs.push('contact_email');
+  schema.properties.href.selectedItemAttrs.push('contact_phone');
+  schema.properties.href.selectedItemAttrs.push('contact_room');
 
   return schema;
 };

package/src/components/Header/Header.tsx

@@ -75,6 +75,8 @@ const InternetHeader = ({ pathname, content }) => {
           <LanguageSelector />
 
           <div className="tools">
+            <SlotRenderer name="headerTools" content={content} />
+
             {header_actions &&
               Array.isArray(header_actions) &&
               header_actions.map((item) => (

package/src/config/blocks.tsx

@@ -277,6 +277,11 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
     [['h2', 'h2']];
 
+  config.blocks.blocksConfig.gridBlock.blocksConfig.listing.variations =
+    cloneDeep(
+      listingBlockVariations.filter((variation) => variation.id !== 'grid'),
+    );
+
   config.blocks.blocksConfig.introduction = {
     ...config.blocks.blocksConfig.introduction,
     unwantedButtons: ['heading-three', 'blockquote'],

package/src/config/slots.ts

@@ -5,6 +5,7 @@ import FollowUsLogoAndLinks from '../components/Footer/slots/FollowUsLogoAndLink
 import Colophon from '../components/Footer/slots/Colophon';
 import CoreFooter from '../components/Footer/slots/CoreFooter';
 import StickyMenu from '../components/StickyMenu/StickyMenu';
+import Anontools from '../components/Anontools/Anontools';
 import type { Content } from '@plone/types';
 
 export function hasInheritedBehavior(behavior: string) {
@@ -25,6 +26,12 @@ export default function install(config: ConfigType) {
     component: StickyMenu,
   });
 
+  config.registerSlotComponent({
+    slot: 'headerTools',
+    name: 'Anontools',
+    component: Anontools,
+  });
+
   config.registerSlotComponent({
     name: 'footerLogos',
     slot: 'preFooter',

package/src/stories/grid.teaser.stories.tsx

@@ -6,6 +6,7 @@ import {
   gridBlockThree,
   gridBlockFour,
   gridBlockTwoDocumentPerson,
+  gridBlockTwoPersonDifferentRatio,
   gridBlockOnePerson,
   gridBlockTwoPerson,
   gridBlockThreePerson,
@@ -31,7 +32,12 @@ type Story = StoryObj<typeof meta>;
 export const One: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -46,7 +52,12 @@ export const One: Story = {
 export const Two: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -61,7 +72,12 @@ export const Two: Story = {
 export const Three: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -76,7 +92,12 @@ export const Three: Story = {
 export const Four: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -94,7 +115,13 @@ export const OneInversed: Story = {
   },
   render: (args) => (
     <Wrapper>
-      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          padding: '40px',
+          backgroundColor: '#ecebeb',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -112,7 +139,13 @@ export const TwoInversed: Story = {
   },
   render: (args) => (
     <Wrapper>
-      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          padding: '40px',
+          backgroundColor: '#ecebeb',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -130,7 +163,13 @@ export const ThreeInversed: Story = {
   },
   render: (args) => (
     <Wrapper>
-      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          padding: '40px',
+          backgroundColor: '#ecebeb',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -148,7 +187,13 @@ export const FourInversed: Story = {
   },
   render: (args) => (
     <Wrapper>
-      <div style={{ padding: '40px', backgroundColor: '#ecebeb' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          padding: '40px',
+          backgroundColor: '#ecebeb',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -163,7 +208,12 @@ export const FourInversed: Story = {
 export const OnePerson: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -175,10 +225,35 @@ export const OnePerson: Story = {
   },
 };
 
-export const TwoDocumentPerson: Story = {
+export const TwoPerson: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwoPerson,
+  },
+};
+
+export const TwoDocumentAndPerson: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -190,10 +265,15 @@ export const TwoDocumentPerson: Story = {
   },
 };
 
-export const TwoPerson: Story = {
+export const TwoPersonsDifferentImageRatio: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -201,14 +281,19 @@ export const TwoPerson: Story = {
     </Wrapper>
   ),
   args: {
-    data: gridBlockTwoPerson,
+    data: gridBlockTwoPersonDifferentRatio,
   },
 };
 
 export const ThreePerson: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>
@@ -223,7 +308,12 @@ export const ThreePerson: Story = {
 export const FourPerson: Story = {
   render: (args) => (
     <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
+      <div
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
         <BlockWrapper {...args}>
           <GridBlockView {...args} />
         </BlockWrapper>

package/src/stories/mocks.ts

@@ -1,3 +1,5 @@
+import cloneDeep from 'lodash/cloneDeep';
+
 const demoImage = 'black-starry-night.jpg';
 const personImage = 'person.png';
 
@@ -262,6 +264,69 @@ export const personBlock = {
   title: 'Headline H2',
 };
 
+const altPersonBlock = cloneDeep(personBlock);
+
+altPersonBlock.href[0].image_scales.preview_image[0] = {
+  'content-type': 'image/jpeg',
+  download: demoImage,
+  filename: 'black-starry-night.jpg',
+  height: 286,
+  scales: {
+    great: {
+      download: demoImage,
+      height: 854,
+      width: 1200,
+    },
+    huge: {
+      download: demoImage,
+      height: 1138,
+      width: 1600,
+    },
+    icon: {
+      download: demoImage,
+      height: 22,
+      width: 32,
+    },
+    large: {
+      download: demoImage,
+      height: 569,
+      width: 800,
+    },
+    larger: {
+      download: demoImage,
+      height: 711,
+      width: 1000,
+    },
+    mini: {
+      download: demoImage,
+      height: 142,
+      width: 200,
+    },
+    preview: {
+      download: demoImage,
+      height: 284,
+      width: 400,
+    },
+    teaser: {
+      download: demoImage,
+      height: 427,
+      width: 600,
+    },
+    thumb: {
+      download: demoImage,
+      height: 91,
+      width: 128,
+    },
+    tile: {
+      download: demoImage,
+      height: 45,
+      width: 64,
+    },
+  },
+  size: 693013,
+  width: 200,
+};
+
 export const gridBlockOne = {
   '@type': 'gridBlock',
   blocks: {
@@ -644,6 +709,24 @@ export const gridBlockTwoPerson = {
   },
 };
 
+export const gridBlockTwoPersonDifferentRatio = {
+  '@type': 'gridBlock',
+  blocks: {
+    '281a22fb-c353-4b91-b2bc-88e6a52ed65a': {
+      ...personBlock,
+    },
+    'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1': {
+      ...altPersonBlock,
+    },
+  },
+  blocks_layout: {
+    items: [
+      '281a22fb-c353-4b91-b2bc-88e6a52ed65a',
+      'f34fa7dd-ce59-4f7f-b795-7d7f1e388df1',
+    ],
+  },
+};
+
 export const gridBlockThreePerson = {
   '@type': 'gridBlock',
   blocks: {

package/src/theme/_header.scss

@@ -585,7 +585,7 @@ body.has-toolbar.has-sidebar {
 
     .submenu-wrapper {
       position: absolute;
-      z-index: 11;
+      z-index: 12;
       right: 50%;
       left: 50%;
       width: 100vw;

package/src/theme/person.scss

@@ -1,4 +1,5 @@
 .card {
+  // Person teaser
   .person-teaser.has--align--left:not(.contained) &,
   .has--align--left:not(.contained) .person-teaser &,
   .has--align--center:not(.contained) .person-teaser &,
@@ -7,9 +8,23 @@
   .person-teaser.has--align--right:not(.contained) & {
     .card-inner {
       .image-wrapper {
-        flex: 0 1 var(--card-listing-image-size, 220px);
+        --person-image-max-width: 220px;
+        --person-image-max-height: 285px;
+        overflow: hidden;
+        aspect-ratio: 4 / 5;
+        block-size: auto; // derived from `aspect-ratio`
+
+        /* We allow the browser to adjust the real size within the maximums without
+         distorting the aspect ratio */
+        inline-size: 100%;
+        max-block-size: var(--person-image-max-height);
+        max-inline-size: var(--person-image-max-width);
+
         img {
-          aspect-ratio: initial !important;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: top center;
         }
       }
     }
@@ -35,12 +50,9 @@
   .has--align--center:not(.contained) .person-teaser &,
   .person-teaser.has--align--center:not(.contained) & {
     width: calc(var(--default-container-width) / 2);
-    margin-right: auto;
-    margin-left: auto;
 
     .image-wrapper {
-      display: flex;
-      justify-content: center;
+      margin: 0 auto;
     }
     .card-summary {
       padding-right: 0px;
@@ -61,24 +73,40 @@
     // --person-image-border-radius: 10000px;
     // --person-image-aspect-ratio: 1/1;
     .image-wrapper {
-      display: flex;
-      height: var(--person-image-height, 255px);
-      justify-content: center;
-      // Removed since it was causing the cards to have more width than the available container
-      // for +2 columns
-      // aspect-ratio: var(--image-aspect-ratio, 1.7777777778);
+      --person-image-max-width: 220px;
+      --person-image-max-height: 285px;
+      overflow: hidden;
+      margin: 0 auto;
+      aspect-ratio: 4 / 5;
+      block-size: auto; // derived from `aspect-ratio`
+
+      /* We allow the browser to adjust the real size within the maximums without
+       distorting the aspect ratio */
+      inline-size: 100%;
+      max-block-size: var(--person-image-max-height);
+      max-inline-size: var(--person-image-max-width);
 
       img {
-        max-width: 198px; // 255x198px Roughly 3:4 (enough to cover the 16:9 portrait height)
+        width: 100%;
         height: 100%;
-        flex: 0 1 auto;
-        border-radius: var(--person-image-border-radius, 0px);
-        aspect-ratio: var(--person-image-aspect-ratio, initial) !important;
         object-fit: cover;
         object-position: top center;
       }
     }
   }
+
+  .two .contained.person-teaser & {
+    .image-wrapper {
+      --person-image-max-width: 175px;
+    }
+  }
+
+  .three .contained.person-teaser &,
+  .four .contained.person-teaser & {
+    .image-wrapper {
+      --person-image-max-width: 138px;
+    }
+  }
 }
 
 // One column exception for contained person-teasers
@@ -107,6 +135,7 @@
 }
 
 // contained person-teasers do not have background color, so we need to set it to --theme-color
+body .block.gridBlock .block.teaser.contained.person-teaser,
 body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
   background: var(--theme-color);
 }
@@ -162,3 +191,13 @@ body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
     }
   }
 }
+
+// Person in search block
+.block.search.summary .listing-item.person-listing .listing-body {
+  align-self: center;
+}
+
+.block.search.summary .listing-item.person-listing img,
+.block-editor-search.summary .listing-item.person-listing img {
+  aspect-ratio: initial !important;
+}

package/src/theme/sticky-menu.scss

@@ -1,6 +1,6 @@
 .sticky-menu {
   position: fixed;
-  z-index: 1000;
+  z-index: 11;
   top: 50vh;
   right: 0;
   transform: translateY(-50%);

package/src/components/Anontools/Anontools.jsx

@@ -1,53 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import config from '@plone/volto/registry';
-import { useSelector, shallowEqual } from 'react-redux';
-
-const Anontools = () => {
-  const token = useSelector((state) => state.userSession.token, shallowEqual);
-  const content = useSelector((state) => state.content.data, shallowEqual);
-
-  const { settings } = config;
-
-  return (
-    !token && (
-      <div className="anontools">
-        {settings.showSelfRegistration && (
-          <Link aria-label="register" to="/register">
-            <FormattedMessage id="Register" defaultMessage="Register" />
-          </Link>
-        )}
-
-        <Link
-          aria-label="login"
-          to={`/login${
-            content?.['@id']
-              ? `?return_url=${flattenToAppURL(content['@id'])}`
-              : ''
-          }`}
-        >
-          <FormattedMessage id="Log in" defaultMessage="Log in" />
-        </Link>
-      </div>
-    )
-  );
-};
-
-export default Anontools;
-
-Anontools.propTypes = {
-  token: PropTypes.string,
-  content: PropTypes.shape({
-    '@id': PropTypes.string,
-  }),
-};
-
-Anontools.defaultProps = {
-  token: null,
-  content: {
-    '@id': null,
-  },
-};