@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/internalChecks.test.ts

@@ -0,0 +1,94 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const recommendedAddonsPath = path.resolve(
+  __dirname,
+  '../../../..',
+  'recommendedAddons.json',
+);
+const mrsDeveloperPath = path.resolve(
+  __dirname,
+  '../../..',
+  'mrs.developer.json',
+);
+
+const readJSON = <T>(filePath: string): T =>
+  JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+
+const normalizeVersion = (version: unknown) =>
+  typeof version === 'string' ? version.replace(/^[\\^~]/, '') : version;
+
+const excludedPackages = new Set(['@eeacms/volto-accordion-block']);
+
+describe('internal checks', () => {
+  it('keeps recommended add-ons in sync with mrs.developer.json', () => {
+    const recommendedAddons = readJSON<Record<string, string>>(
+      recommendedAddonsPath,
+    );
+    const mrsDeveloper = readJSON<Record<string, unknown>>(mrsDeveloperPath);
+
+    const mrsByPackage = Object.entries(mrsDeveloper).reduce<
+      Record<string, Record<string, unknown> & { configKey: string }>
+    >((acc, [configKey, configValue]) => {
+      if (
+        configValue &&
+        typeof configValue === 'object' &&
+        'package' in configValue
+      ) {
+        acc[String((configValue as Record<string, unknown>).package)] = {
+          ...(configValue as Record<string, unknown>),
+          configKey,
+        };
+      }
+      return acc;
+    }, {});
+
+    const issues: string[] = [];
+
+    Object.entries(recommendedAddons).forEach(
+      ([packageName, recommendedVersion]) => {
+        if (excludedPackages.has(packageName)) return;
+
+        const mrsEntry = mrsByPackage[packageName];
+
+        if (!mrsEntry) {
+          issues.push(
+            `${packageName} is listed in recommendedAddons.json but missing from frontend/mrs.developer.json.`,
+          );
+          return;
+        }
+
+        const mrsVersion =
+          (mrsEntry.tag as string | undefined) ||
+          (mrsEntry.branch as string | undefined) ||
+          (mrsEntry.version as string | undefined);
+
+        if (!mrsVersion) {
+          issues.push(
+            `${packageName} (${mrsEntry.configKey}) has no tag, branch, or version specified in frontend/mrs.developer.json.`,
+          );
+          return;
+        }
+
+        const normalizedRecommended = normalizeVersion(recommendedVersion);
+        const normalizedMrsVersion = normalizeVersion(mrsVersion);
+
+        if (
+          recommendedVersion !== mrsVersion &&
+          normalizedRecommended !== normalizedMrsVersion
+        ) {
+          issues.push(
+            `${packageName} differs: recommendedAddons.json=${recommendedVersion} vs frontend/mrs.developer.json(${mrsEntry.configKey})=${mrsVersion}.`,
+          );
+        }
+      },
+    );
+
+    expect(issues).toEqual([]);
+  });
+});

package/src/primitives/Card/Card.stories.tsx

@@ -165,7 +165,10 @@ export const CustomImage: Story = {
   render: (args) => (
     <div
       className="card-listing"
-      style={{ width: 'var(--default-container-width)' }}
+      style={{
+        width: 'var(--default-container-width)',
+        '--theme-high-contrast-color': '#ecebeb',
+      }}
     >
       <Card href={args.href}>
         <Card.Image>

package/src/primitives/Card/Card.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Card from './Card';
 
 vi.mock(
@@ -43,10 +43,16 @@ vi.mock(
 
 type SummaryProps = {
   a11yLabelId?: string;
+  LinkToItem?: React.ElementType;
 };
 
-const SummaryContent = ({ a11yLabelId }: SummaryProps) => (
-  <h3 id={a11yLabelId}>Card title</h3>
+const SummaryContent = ({
+  a11yLabelId,
+  LinkToItem = React.Fragment,
+}: SummaryProps) => (
+  <h3 id={a11yLabelId}>
+    <LinkToItem>Card title</LinkToItem>
+  </h3>
 );
 
 const BodyContent = () => <div>Body content</div>;
@@ -64,26 +70,20 @@ describe('Card', () => {
 
   it('is interactive when an href is provided', () => {
     const { container } = renderCard({ href: '/target', className: 'custom' });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    expect(card).toHaveAttribute('role', 'link');
-    expect(card).toHaveAttribute('tabindex', '0');
 
     const anchor = container.querySelector('a');
     expect(anchor).not.toBeNull();
     expect(anchor).toHaveAttribute('href', '/target');
+    expect(anchor).toHaveClass('card-primary-link');
   });
 
   it('is interactive when an item is provided', () => {
     const { container } = renderCard({ item: { '@id': '/item-target' } });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    expect(card).toHaveAttribute('role', 'link');
-    expect(card).toHaveAttribute('tabindex', '0');
 
     const anchor = container.querySelector('a');
     expect(anchor).not.toBeNull();
     expect(anchor).toHaveAttribute('href', '/item-target');
+    expect(anchor).toHaveClass('card-primary-link');
   });
 
   it('is not interactive when neither href nor item is provided', () => {
@@ -112,26 +112,4 @@ describe('Card', () => {
     expect(card).not.toHaveAttribute('tabindex');
     expect(container.querySelector('a')).toBeNull();
   });
-
-  it('triggers navigation handlers when interactive', () => {
-    const clickSpy = vi
-      .spyOn(HTMLAnchorElement.prototype, 'click')
-      .mockImplementation(() => {});
-    const selectionSpy = vi
-      .spyOn(window, 'getSelection')
-      .mockReturnValue({ toString: () => '' } as unknown as Selection);
-
-    const { container } = renderCard({ href: '/target' });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    fireEvent.click(card);
-    fireEvent.keyDown(card, { key: 'Enter' });
-    fireEvent.keyDown(card, { key: ' ' });
-    fireEvent.keyDown(card, { key: 'Escape' });
-
-    expect(clickSpy).toHaveBeenCalledTimes(3);
-
-    clickSpy.mockRestore();
-    selectionSpy.mockRestore();
-  });
 });

package/src/primitives/Card/Card.tsx

@@ -52,49 +52,32 @@ const Card = (props: CardProps) => {
   const { className, openLinkInNewTab } = props;
 
   const a11yLabelId = React.useId();
-  const linkRef = React.useRef<HTMLAnchorElement>(null);
-
-  const triggerNavigation = () => {
-    // Only navigate if there is *no* text selection
-    const hasSelection = !!window.getSelection()?.toString();
-    if (!hasSelection) {
-      linkRef.current?.click();
-    }
-  };
-
   const isInteractive = !!props.href || !!props.item;
 
-  const onClick: React.MouseEventHandler<HTMLDivElement> = () => {
-    if (isInteractive) triggerNavigation();
-  };
-
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!isInteractive) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      triggerNavigation();
-    }
-  };
+  const LinkToItem = React.useCallback(
+    ({ children }: { children: React.ReactNode }) => {
+      return (
+        <ConditionalLink
+          className="card-primary-link"
+          condition={isInteractive}
+          href={href}
+          item={item}
+          openLinkInNewTab={openLinkInNewTab}
+        >
+          {children}
+        </ConditionalLink>
+      );
+    },
+    [href, item, isInteractive, openLinkInNewTab],
+  );
 
   return (
-    <div
-      className={cx('card', className)}
-      onClick={isInteractive ? onClick : undefined}
-      onKeyDown={isInteractive ? onKeyDown : undefined}
-      role={isInteractive ? 'link' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {/* @ts-expect-error since this has no children, should fail */}
-      <ConditionalLink
-        aria-labelledby={a11yLabelId}
-        condition={isInteractive}
-        href={href}
-        item={item}
-        openLinkInNewTab={openLinkInNewTab}
-        ref={linkRef}
-      />
+    <div className={cx('card', className)}>
       <div className="card-inner">
-        {childrenWithProps(props.children, { a11yLabelId })}
+        {childrenWithProps(props.children, {
+          a11yLabelId,
+          LinkToItem,
+        })}
       </div>
     </div>
   );
@@ -144,14 +127,21 @@ const CardImage = (props: CardImageProps) => {
 type CardSummaryProps = {
   /** The ID of the element that labels the card. */
   a11yLabelId?: string;
+  LinkToItem?: React.ElementType;
   children?: React.ReactNode;
 };
 
-const CardSummary = (props: CardSummaryProps) => (
-  <div className="card-summary">
-    {childrenWithProps(props.children, { a11yLabelId: props.a11yLabelId })}
-  </div>
-);
+const CardSummary = (props: CardSummaryProps) => {
+  const { a11yLabelId, LinkToItem } = props;
+  return (
+    <div className="card-summary">
+      {childrenWithProps(props.children, {
+        a11yLabelId,
+        LinkToItem,
+      })}
+    </div>
+  );
+};
 
 const CardActions = (props: any) => (
   <div className="actions-wrapper">{props.children}</div>

package/src/primitives/IconLinkList.tsx

@@ -6,6 +6,58 @@ type IconLinkListProps = {
   iconLinks: Array<iconLink>;
 };
 
+export const IconLinkListTemplate = ({ item }) => {
+  const itemInfo: {
+    title: string;
+    hrefTitle: string;
+    href: string;
+    itemHref: string;
+    src: string;
+    srcAlt: string;
+  } = {
+    title: '',
+    hrefTitle: '',
+    href: '',
+    itemHref: '',
+    src: '',
+    srcAlt: '',
+  };
+
+  // If the item has title, always set it
+  itemInfo.title = item ? item?.title || item?.href?.[0]?.['title'] || '' : '';
+  if (item?.href?.length > 0) {
+    itemInfo.title = item.title || item.href[0]['title'];
+    itemInfo.href = flattenToAppURL(item.href[0]['@id']);
+  }
+  if (item?.icon && item.icon[0]?.image_scales) {
+    itemInfo.itemHref = item.icon[0]['@id'];
+    itemInfo.srcAlt = item['alt'];
+    itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/${item.icon[0].image_scales[item.icon[0].image_field][0].download}`;
+  } else if (item?.icon && item.icon[0]) {
+    itemInfo.itemHref = item.icon[0]['@id'];
+    itemInfo.srcAlt = item['alt'];
+    itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/@@images/image`;
+  }
+
+  if (!itemInfo.src) return null;
+  return (
+    <li className="item" key={item['@id']}>
+      {/* @ts-ignore */}
+      <ConditionalLink
+        condition={itemInfo.href}
+        to={itemInfo.href}
+        title={itemInfo.hrefTitle || itemInfo.srcAlt}
+        openLinkInNewTab={item.openInNewTab}
+      >
+        <div className="image-wrapper">
+          <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
+        </div>
+        <span className="title">{itemInfo.title}</span>
+      </ConditionalLink>
+    </li>
+  );
+};
+
 const IconLinkList = (props: IconLinkListProps) => {
   const { iconLinks } = props;
 
@@ -13,58 +65,7 @@ const IconLinkList = (props: IconLinkListProps) => {
     <ul>
       {iconLinks && Array.isArray(iconLinks)
         ? iconLinks.map((item) => {
-            const itemInfo: {
-              title: string;
-              hrefTitle: string;
-              href: string;
-              itemHref: string;
-              src: string;
-              srcAlt: string;
-            } = {
-              title: '',
-              hrefTitle: '',
-              href: '',
-              itemHref: '',
-              src: '',
-              srcAlt: '',
-            };
-
-            // If the item has title, always set it
-            itemInfo.title = item
-              ? item?.title || item?.href?.[0]?.['title'] || ''
-              : '';
-            if (item?.href?.length > 0) {
-              itemInfo.title = item.title || item.href[0]['title'];
-              itemInfo.href = flattenToAppURL(item.href[0]['@id']);
-            }
-            if (item?.icon && item.icon[0]?.image_scales) {
-              itemInfo.itemHref = item.icon[0]['@id'];
-              itemInfo.srcAlt = item['alt'];
-              itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/${item.icon[0].image_scales[item.icon[0].image_field][0].download}`;
-            } else if (item?.icon && item.icon[0]) {
-              itemInfo.itemHref = item.icon[0]['@id'];
-              itemInfo.srcAlt = item['alt'];
-              itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/@@images/image`;
-            }
-
-            if (!itemInfo.src) return null;
-
-            return (
-              <li className="item" key={item['@id']}>
-                {/* @ts-ignore */}
-                <ConditionalLink
-                  condition={itemInfo.href}
-                  to={itemInfo.href}
-                  title={itemInfo.hrefTitle || itemInfo.srcAlt}
-                  openLinkInNewTab={item.openInNewTab}
-                >
-                  <div className="image-wrapper">
-                    <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
-                  </div>
-                  <span>{itemInfo.title}</span>
-                </ConditionalLink>
-              </li>
-            );
+            return <IconLinkListTemplate item={item} key={item['@id']} />;
           })
         : null}
     </ul>

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

@@ -17,7 +17,7 @@
   & > strong,
   & > em,
   & > figcaption,
-  & > a:not(.item),
+  & > a,
   & > blockquote,
   & > h2,
   & > h3,
@@ -25,16 +25,6 @@
     color: var(--theme-foreground-color);
   }
 
-  :not(.teaser-item)
-    > a:not(.item):not(
-      :has(> .teaser-item),
-      :has(> .listing-body),
-      :has(> .card-container)
-    ) {
-    color: var(--link-foreground-color, --theme-foreground-color);
-    text-decoration: underline;
-  }
-
   &:first-child:has(> .documentFirstHeading) {
     padding-top: 0;
   }
@@ -407,6 +397,14 @@
   }
 }
 
+// Banner block, if next block has different bgcolor it snaps to the bottom
+#page-document
+  .blocks-group-wrapper:has(
+    :last-child.banner.next--has--different--backgroundColor
+  ) {
+  padding-bottom: 0;
+}
+
 // Color map
 @mixin use-theme-colors() {
   #page-document {
@@ -439,7 +437,8 @@
     &.__button {
       & > .button.container,
       & > .block-inner-container {
-        & button {
+        & button,
+        a {
           border-color: var(--theme-foreground-color);
           background-color: var(--theme-color);
 
@@ -494,7 +493,8 @@
     &.listing,
     &.search,
     &.rssBlock {
-      h2.headline {
+      h2.headline,
+      h2.block-title {
         color: var(--theme-foreground-color);
       }
 
@@ -505,40 +505,26 @@
       .listing-item {
         border-bottom-color: var(--theme-foreground-color) !important;
 
-        a > .listing-body {
-          .headline,
-          h3,
-          h2,
-          a,
-          p,
-          span {
-            color: var(--theme-foreground-color);
-          }
+        .headline,
+        h3,
+        h2,
+        a,
+        p,
+        span {
+          color: var(--theme-foreground-color);
         }
 
         .head-title span,
         .head-title {
           color: var(--theme-foreground-color);
         }
-
-        .card-container {
-          background-color: var(--theme-high-contrast-color);
-
-          .content,
-          .content p {
-            color: var(--theme-foreground-color);
-          }
-        }
       }
-      /* I have removed the .card-container className that's why I have to write this css
-       * I will remove all the .card-container className from repo.
-      */
       &.grid .card,
       & .grid-variation .card {
         background-color: var(--theme-high-contrast-color);
 
-        .content,
-        .content p {
+        .card-summary,
+        .card-summary p {
           color: var(--theme-foreground-color);
         }
       }
@@ -1122,19 +1108,28 @@
     }
   }
 
-  table.ui.table.slate-table-block {
-    border-color: var(--theme-low-contrast-foreground-color);
+  table.ui.celled.table.slate-table-block {
+    border-color: color-mix(
+      in srgb,
+      var(--theme-color) 75%,
+      var(--theme-foreground-color)
+    );
 
     tr td,
     th {
-      border-color: var(--theme-low-contrast-foreground-color);
+      border-color: color-mix(
+        in srgb,
+        var(--theme-color) 75%,
+        var(--theme-foreground-color)
+      );
     }
 
     th {
       background-color: var(--theme-high-contrast-color) !important;
+      color: var(--theme-low-contrast-foreground-color);
 
-      p {
-        color: var(--theme-low-contrast-foreground-color) !important;
+      * {
+        color: inherit;
       }
     }
 
@@ -1269,12 +1264,15 @@
             color: var(--header-foreground);
           }
         }
+        .language-selector a {
+          color: var(--header-foreground);
+        }
       }
 
       // Navigation
       nav.navigation {
-        button.item {
-          color: var(--header-foreground);
+        .item {
+          color: var(--header-foreground, var(--primary-foreground-color));
         }
         .submenu-wrapper {
           .submenu.active {
@@ -1426,12 +1424,12 @@
     }
 
     a.section {
-      color: var(--link-foreground-color, --breadcrumbs-foreground);
+      color: var(--breadcrumbs-foreground, --link-foreground-color);
     }
 
     a.home {
       svg {
-        fill: var(--link-foreground-color, --breadcrumbs-foreground) !important;
+        fill: var(--breadcrumbs-foreground, --link-foreground-color) !important;
       }
     }
   }

package/src/theme/_content.scss

@@ -1,3 +1,12 @@
+@mixin day-with-head-title-separator {
+  .day:has(+ .head-title) {
+    &::after {
+      margin-left: 8px;
+      content: '|';
+    }
+  }
+}
+
 .ui.basic.segment.content-area {
   // We cancel the padding and margin from the segment
   // allowing the content elements to be the ones that push for
@@ -18,6 +27,8 @@
   #page-document .dates {
     @include default-container-width();
     @include adjustMarginsToContainer($default-container-width);
+    @include day-with-head-title-separator();
+
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
     color: var(--primary-foreground-color);
@@ -27,13 +38,6 @@
       text-transform: uppercase;
     }
 
-    .head-title:has(+ .day) {
-      &::after {
-        margin-left: 8px;
-        content: '|';
-      }
-    }
-
     @container (max-width: #{$tablet-breakpoint} ) {
       .day,
       .head-title {
@@ -91,6 +95,7 @@
     }
   }
   .dates {
+    @include day-with-head-title-separator();
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
     color: var(--primary-foreground-color);
@@ -103,12 +108,6 @@
       letter-spacing: 1px;
       text-transform: uppercase;
     }
-    .head-title {
-      &::after {
-        margin-left: 8px;
-        content: '|';
-      }
-    }
     @container (max-width: #{$tablet-breakpoint} ) {
       .day,
       .head-title {