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

package/.changelog.draft

@@ -1,7 +1,15 @@
-## 7.0.0-alpha.10 (2025-06-10)
+## 7.0.0-alpha.11 (2025-06-12)
 
 ### Bugfix
 
-- Fixed Person Teaser top variant. Added Storybook. @sneridagh 
+- 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 
 
 

package/CHANGELOG.md

@@ -8,6 +8,20 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.11 (2025-06-12)
+
+### 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 
+
 ## 7.0.0-alpha.10 (2025-06-10)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.10",
+  "version": "7.0.0-alpha.11",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,11 +32,16 @@
   "devDependencies": {
     "@plone/scripts": "^3.6.2",
     "@storybook/react": "^8.6.12",
+    "@testing-library/cypress": "10.0.3",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.8",
     "@types/lodash": "^4.14.201",
+    "@types/node": "^22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "typescript": "^5.7.3",
     "release-it": "^19.0.3",
+    "vitest": "^3.1.2",
     "@plone/types": "1.4.5"
   },
   "dependencies": {

package/src/stories/listing.stories.tsx

@@ -19,35 +19,36 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const PersonListing: Story = {
+export const Person: Story = {
   render: (args) => (
-    <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
-        <BlockWrapper {...args}>
-          <div className="block listing">
-            <ListingBody {...args} />
-          </div>
-        </BlockWrapper>
+    <BlockWrapper {...args}>
+      <div className="block listing">
+        <ListingBody {...args} />
       </div>
-    </Wrapper>
+    </BlockWrapper>
   ),
   args: {
     data: listingBlockPerson,
     listingItems: listingBlockPerson.items,
   },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div style={{ width: 'var(--default-container-width)' }}>
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
 };
 
-export const PersonListingSummary: Story = {
+export const PersonSummary: Story = {
   render: (args) => (
-    <Wrapper>
-      <div style={{ width: 'var(--default-container-width)' }}>
-        <BlockWrapper {...args}>
-          <div className="block listing summary">
-            <ListingBody {...args} />
-          </div>
-        </BlockWrapper>
+    <BlockWrapper {...args}>
+      <div className="block listing summary">
+        <ListingBody {...args} />
       </div>
-    </Wrapper>
+    </BlockWrapper>
   ),
   args: {
     data: {
@@ -60,4 +61,13 @@ export const PersonListingSummary: Story = {
       title: 'List with images',
     },
   },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div style={{ width: 'var(--default-container-width)' }}>
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
 };

package/src/stories/teaser.stories.tsx

@@ -53,7 +53,7 @@ export const Right: Story = {
   },
 };
 
-export const Center: Story = {
+export const Top: Story = {
   render: (args) => (
     <Wrapper>
       <div style={{ width: 'var(--default-container-width)' }}>
@@ -73,7 +73,7 @@ export const Center: Story = {
   },
 };
 
-export const PersonTeaser: Story = {
+export const PersonTeaserLeft: Story = {
   render: (args) => (
     <Wrapper>
       <div style={{ width: 'var(--default-container-width)' }}>

package/src/theme/blocks/_grid.scss

@@ -47,6 +47,14 @@
     a {
       text-decoration: none;
     }
+    &.file-teaser .card .card-inner .image-wrapper {
+      img {
+        aspect-ratio: var(
+          --file-image-aspect-ratio,
+          $aspect-ratio-A4
+        ) !important;
+      }
+    }
 
     .teaser-item {
       height: 100%;

package/src/theme/sticky-menu.scss

@@ -1,8 +1,15 @@
 .sticky-menu {
   position: fixed;
   z-index: 1000;
-  top: 373px;
+  top: 50vh;
   right: 0;
+  transform: translateY(-50%);
+  transition: all 0.2s linear;
+
+  @media (min-height: 920px) {
+    top: 373px;
+    transform: none;
+  }
 
   ul {
     display: flex;
@@ -45,6 +52,7 @@
   }
 }
 
+body.view-addview .sticky-menu,
 body.view-editview .sticky-menu {
   display: none;
 }

package/vitest.config.mjs

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+import voltoVitestConfig from '@plone/volto/vitest.config.mjs';
+import path from 'path';
+
+export default defineConfig({
+  ...voltoVitestConfig,
+  resolve: {
+    alias: {
+      '@plone/volto': path.resolve(__dirname, '../../core/packages/volto/src'), // Add paths accordingly
+      // 'promise-file-reader': require.resolve('promise-file-reader') // Add to identify dependency from package
+    },
+  },
+});