@kitconcept/volto-light-theme 6.0.0-alpha.8 → 6.0.0

package/src/helpers/doesNodeContainClick.js

@@ -0,0 +1,64 @@
+// Legacy code from Semantic UI React
+import some from 'lodash/some';
+import invoke from 'lodash/invoke';
+import inRange from 'lodash/inRange';
+import isNil from 'lodash/isNil';
+import first from 'lodash/first';
+
+/**
+ * Determines if a click's coordinates are within the bounds of a node.
+ *
+ * @see https://github.com/Semantic-Org/Semantic-UI-React/pull/2384
+ *
+ * @param {object} node - A DOM node.
+ * @param {object} e - A SyntheticEvent or DOM Event.
+ * @returns {boolean}
+ */
+const doesNodeContainClick = (node, e) => {
+  if (some([e, node], isNil)) return false;
+
+  // if there is an e.target and it is in the document, use a simple node.contains() check
+  if (e.target) {
+    invoke(e.target, 'setAttribute', 'data-suir-click-target', true);
+
+    if (document.querySelector('[data-suir-click-target=true]')) {
+      invoke(e.target, 'removeAttribute', 'data-suir-click-target');
+      return node.contains(e.target);
+    }
+  }
+
+  // Below logic handles cases where the e.target is no longer in the document.
+  // The result of the click likely has removed the e.target node.
+  // Instead of node.contains(), we'll identify the click by X/Y position.
+
+  // return early if the event properties aren't available
+  // prevent measuring the node and repainting if we don't need to
+  const { clientX, clientY } = e;
+  if (some([clientX, clientY], isNil)) return false;
+
+  // false if the node is not visible
+  const clientRects = node.getClientRects();
+  // Heads Up!
+  // getClientRects returns a DOMRectList, not an array nor a plain object
+  // We explicitly avoid isEmpty and check .length to cover all possible shapes
+  if (
+    !node.offsetWidth ||
+    !node.offsetHeight ||
+    !clientRects ||
+    !clientRects.length
+  )
+    return false;
+
+  // false if the node doesn't have a valid bounding rect
+  const { top, bottom, left, right } = first(clientRects);
+  if (some([top, bottom, left, right], isNil)) return false;
+
+  // we add a small decimal to the upper bound just to make it inclusive
+  // don't add an whole pixel (1) as the event/node values may be decimal sensitive
+  return (
+    inRange(clientY, top, bottom + 0.001) &&
+    inRange(clientX, left, right + 0.001)
+  );
+};
+
+export default doesNodeContainClick;

package/src/helpers/useLiveData.ts

@@ -0,0 +1,29 @@
+import { useSelector } from 'react-redux';
+import type { Content } from '@plone/types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  form: {
+    global: Content;
+  };
+};
+
+export function useLiveData<T>(
+  content: Content,
+  behavior: string,
+  field: string,
+) {
+  const current = content?.['@components']?.inherit?.[behavior]?.data?.[
+    field
+  ] as T;
+
+  const formData = useSelector<FormState, T>(
+    (state) => state.form.global?.[field],
+  );
+
+  const data = formData ?? current;
+
+  return data;
+}

package/src/index.ts

@@ -12,9 +12,18 @@ import installBlocks from './config/blocks';
 import installClassExtenders from './config/classExtenders';
 import installWidgets from './config/widgets';
 import installSlots from './config/slots';
+import installSummary from './config/summary';
 
 import '@plone/components/dist/basic.css';
-import type { BlocksData } from '@plone/types';
+
+import type {
+  CustomInheritBehavior,
+  SiteHeaderSettings,
+  SiteThemeSettings,
+  SiteFooterSettings,
+  StickyMenuSettings,
+  PloneGobrSocialMediaSettings,
+} from './types';
 
 defineMessages({
   Press: {
@@ -25,11 +34,32 @@ defineMessages({
     id: 'Sitemap',
     defaultMessage: 'Sitemap',
   },
+  List: {
+    id: 'List',
+    defaultMessage: 'List',
+  },
+  listWithImages: {
+    id: 'List with images',
+    defaultMessage: 'List with images',
+  },
 });
 
 declare module '@plone/types' {
   export interface Content {
-    footer_logos: BlocksData;
+    footer_logos_container_width: string;
+    footer_logos_size: string;
+    footer_logo_link: string;
+  }
+
+  export interface Expanders {
+    inherit: {
+      'voltolighttheme.header': CustomInheritBehavior<SiteHeaderSettings>;
+      'voltolighttheme.theme': CustomInheritBehavior<SiteThemeSettings>;
+      'voltolighttheme.footer': CustomInheritBehavior<SiteFooterSettings>;
+      'kitconcept.sticky_menu': CustomInheritBehavior<StickyMenuSettings>;
+      'kitconcept.footer': CustomInheritBehavior<SiteFooterSettings>;
+      'plonegovbr.socialmedia.settings': CustomInheritBehavior<PloneGobrSocialMediaSettings>;
+    };
   }
 }
 
@@ -39,6 +69,7 @@ const applyConfig = (config: ConfigType) => {
   installClassExtenders(config);
   installWidgets(config);
   installSlots(config);
+  installSummary(config);
 
   // Register a custom Container component from @plone/components
   config.registerComponent({

package/src/primitives/IconLinkList.tsx

@@ -0,0 +1,69 @@
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import type { iconLink } from '../types';
+
+type IconLinkListProps = {
+  iconLinks: Array<iconLink>;
+};
+
+const IconLinkList = (props: IconLinkListProps) => {
+  const { iconLinks } = props;
+
+  return (
+    <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 (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>
+            );
+          })
+        : null}
+    </ul>
+  );
+};
+
+export default IconLinkList;

package/src/primitives/LinkList.tsx

@@ -0,0 +1,35 @@
+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';
+
+type LinksProps = { links: Array<Link> };
+
+const LinkList = (props: LinksProps) => {
+  const { links } = props;
+
+  return (
+    <ul>
+      {links && Array.isArray(links)
+        ? links.map((link) => {
+            if (isEmpty(link) || !link.href) return null;
+
+            const title = link.title || link.href[0]['title'];
+            const href = flattenToAppURL(link.href[0]?.['@id']);
+
+            if (!href) return null;
+
+            return (
+              <li className="item" key={href}>
+                <UniversalLink href={href} openLinkInNewTab={link.openInNewTab}>
+                  {title}
+                </UniversalLink>
+              </li>
+            );
+          })
+        : null}
+    </ul>
+  );
+};
+
+export default LinkList;

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

@@ -23,7 +23,8 @@
     color: var(--theme-foreground-color);
   }
 
-  a:not(.item):not(
+  :not(.teaser-item)
+    > a:not(.item):not(
       :has(> .teaser-item),
       :has(> .listing-body),
       :has(> .card-container)
@@ -81,6 +82,9 @@
 
 // Color map
 @mixin use-theme-colors() {
+  #page-document {
+    background: var(--primary-color);
+  }
   // Page title
   h1.documentFirstHeading {
     color: var(--theme-foreground-color);
@@ -95,6 +99,11 @@
     h2 {
       color: var(--theme-foreground-color);
     }
+    .ui.bulleted.list li {
+      &::before {
+        color: var(--link-foreground-color) !important;
+      }
+    }
   }
 
   // Blocks
@@ -168,6 +177,7 @@
         border-bottom-color: var(--theme-foreground-color) !important;
 
         a > .listing-body {
+          .headline,
           h3,
           h2,
           a,
@@ -651,15 +661,6 @@
         }
       }
 
-      // Use values assigned to the parent Grid block
-      .block {
-        --theme-high-contrast-color: inherit !important;
-        --theme-color: inherit !important;
-        --theme-high-contrast-color: inherit !important;
-        --theme-foreground-color: inherit !important;
-        --theme-low-contrast-foreground-color: inherit !important;
-      }
-
       .block.teaser {
         padding-top: 0;
         background: var(--theme-high-contrast-color);
@@ -734,6 +735,12 @@
       }
     }
 
+    &.eventMetadata {
+      .details-container {
+        color: var(--theme-foreground-color);
+      }
+    }
+
     .cookie-consent-buttons {
       button.button {
         color: black;
@@ -845,8 +852,11 @@
     }
 
     [class^='block-editor-'] {
-      a.slate-editor-link {
-        color: var(--theme-foreground-color);
+      a.slate-editor-link span[data-slate-string='true'] {
+        color: var(
+          --link-foreground-color,
+          --theme-foreground-color
+        ) !important;
       }
 
       .block {
@@ -914,6 +924,14 @@
             }
           }
         }
+
+        .eventMetadata {
+          color: var(--theme-foreground-color);
+
+          a {
+            color: var(--link-foreground-color, --theme-foreground-color);
+          }
+        }
       }
     }
   }
@@ -1140,6 +1158,26 @@
         & > span,
         & > div {
           color: var(--primary-foreground-color);
+
+          .ui.pagination.menu {
+            background: var(--primary-color);
+
+            a.item {
+              color: var(--primary-foreground-color);
+
+              &:not([aria-current='true']) {
+                color: var(--link-foreground-color);
+              }
+
+              &.disabled {
+                color: var(--primary-foreground-color) !important;
+                opacity: 0.8;
+              }
+            }
+            a.item:not([aria-current='true']) {
+              color: var(--link-foreground-color);
+            }
+          }
         }
 
         #content-core {

package/src/theme/_container.scss

@@ -6,6 +6,10 @@
     @include layout-container-width;
   }
 
+  &.default {
+    @include default-container-width;
+  }
+
   &.narrow {
     @include narrow-container-width;
   }

package/src/theme/_content.scss

@@ -4,6 +4,7 @@
   // the required vertical spacing
   padding: 0;
   margin-top: 0;
+  margin-bottom: 0;
 }
 
 .contenttype-news-item {
@@ -18,6 +19,7 @@
     @include adjustMarginsToContainer($default-container-width);
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
+    color: var(--primary-foreground-color);
     .day {
       @include body-text-bold();
       letter-spacing: 1px;
@@ -79,6 +81,7 @@
   .dates {
     margin-top: $spacing-medium;
     margin-bottom: $spacing-medium;
+    color: var(--primary-foreground-color);
     @container (max-width: #{$largest-mobile-screen} ) {
       margin-bottom: $spacing-small;
     }
@@ -88,6 +91,9 @@
       letter-spacing: 1px;
       text-transform: uppercase;
     }
+    .day + .head-title::before {
+      content: '|';
+    }
   }
 
   .details-container {