@kitconcept/volto-light-theme 7.6.7 → 7.8.0

package/src/components/StickyMenu/MobileCarouselArrowButton.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { EmblaCarouselType } from 'embla-carousel';
+import type { ComponentPropsWithRef } from 'react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+import leftArrowSVG from '@plone/volto/icons/left-key.svg';
+
+type UsePrevNextButtonsType = {
+  prevBtnDisabled: boolean;
+  nextBtnDisabled: boolean;
+  onPrevButtonClick: () => void;
+  onNextButtonClick: () => void;
+};
+
+export const usePrevNextButtons = (
+  emblaApi: EmblaCarouselType | undefined,
+): UsePrevNextButtonsType => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return;
+    emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev());
+    setNextBtnDisabled(!emblaApi.canScrollNext());
+  }, []);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onSelect).on('select', onSelect);
+  }, [emblaApi, onSelect]);
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  };
+};
+
+type PropType = ComponentPropsWithRef<'button'>;
+
+export const PrevButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--prev"
+      type="button"
+      {...restProps}
+    >
+      <Icon name={leftArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};
+
+export const NextButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--next"
+      type="button"
+      {...restProps}
+    >
+      <Icon name={rightArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};

package/src/components/StickyMenu/MobileStickyMenu.tsx

@@ -0,0 +1,76 @@
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import { IconLinkListTemplate } from '@kitconcept/volto-light-theme/primitives/IconLinkList';
+import type { StickyMenuSettings } from '../../types';
+import useEmblaCarousel from 'embla-carousel-react';
+import type { EmblaOptionsType } from 'embla-carousel';
+
+import {
+  usePrevNextButtons,
+  PrevButton,
+  NextButton,
+} from './MobileCarouselArrowButton';
+import type { Content } from '@plone/types';
+
+const MobileStickyMenu = ({ content }: { content: Content }) => {
+  const options: EmblaOptionsType = {};
+  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi);
+  const showMobileStickyMenu = useLiveData<StickyMenuSettings['sticky_menu']>(
+    content,
+    'kitconcept.sticky_menu',
+    'enable_mobile_sticky_menu',
+  );
+  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');
+
+  if (!showMobileStickyMenu) {
+    return null;
+  }
+
+  return (
+    <div
+      className="mobile-sticky-menu"
+      role="navigation"
+      aria-label="Mobile Sticky menu"
+      style={
+        {
+          '--sticky-menu-color': sticky_menu_color,
+          '--sticky-menu-foreground-color': sticky_menu_foreground_color,
+        } as React.CSSProperties
+      }
+    >
+      <section className="embla">
+        <div className="embla__viewport" ref={emblaRef}>
+          <div className="embla__container">
+            {menuData &&
+              menuData.map((item) => (
+                <ul className="embla__slide" key={item['@id']}>
+                  <IconLinkListTemplate item={item} />
+                </ul>
+              ))}
+          </div>
+        </div>
+        <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+        <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+      </section>
+    </div>
+  );
+};
+
+export default MobileStickyMenu;

package/src/components/Theme/EventView.jsx

@@ -73,14 +73,14 @@ const EventView = (props) => {
   return (
     <Container id="page-document" className="view-wrapper event-view">
       <div className="dates">
-        {content?.head_title && (
-          <span className="head-title"> {content?.head_title}</span>
-        )}{' '}
         {formattedDate ? (
           <span className="day" suppressHydrationWarning>
             {formattedDate}
           </span>
-        ) : null}
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
+        )}
       </div>
       {hasBlocksData(content) ? (
         <>

package/src/components/Theme/NewsItemView.jsx

@@ -21,9 +21,6 @@ const NewsItemView = ({ content }) => {
   return (
     <Container id="page-document" className="view-wrapper newsitem-view">
       <div className="dates">
-        {content?.head_title && (
-          <span className="head-title"> {content?.head_title}</span>
-        )}{' '}
         {content.effective ? (
           <FormattedDate
             key="day"
@@ -35,7 +32,10 @@ const NewsItemView = ({ content }) => {
             }}
             className="day"
           />
-        ) : null}
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
+        )}
       </div>
       <RenderBlocks content={content} />
     </Container>

package/src/config/blocks.tsx

@@ -31,6 +31,8 @@ import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
 
 import { searchBlockSchemaEnhancer } from '../components/Blocks/Search/schema';
 
+import { BannerStylingSchema } from '../components/Blocks/Banner/schema';
+
 import gridSVG from '../icons/block_icn_grid.svg';
 import accordionSVG from '../icons/block_icn_accordion.svg';
 import descriptionSVG from '@plone/volto/icons/description.svg';
@@ -61,6 +63,7 @@ declare module '@plone/types' {
     hero: BlockConfigBase;
     slateTable: BlockConfigBase;
     eventCalendar: BlockConfigBase;
+    banner: BlockConfigBase;
   }
   export interface BlockConfigBase {
     themes?: StyleDefinition[];
@@ -365,6 +368,11 @@ export default function install(config: ConfigType) {
     schemaEnhancer: defaultStylingSchema,
   };
 
+  config.blocks.blocksConfig.banner = {
+    ...config.blocks.blocksConfig.banner,
+    schemaEnhancer: BannerStylingSchema,
+  };
+
   config.blocks.blocksConfig.search = {
     ...config.blocks.blocksConfig.search,
     schemaEnhancer: composeSchema(

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 MobileStickyMenu from '../components/StickyMenu/MobileStickyMenu';
 import Anontools from '../components/Anontools/Anontools';
 import type { Content } from '@plone/types';
 
@@ -57,5 +58,11 @@ export default function install(config: ConfigType) {
     component: Colophon,
   });
 
+  config.registerSlotComponent({
+    name: 'MobileStickyMenu',
+    slot: 'preFooter',
+    component: MobileStickyMenu,
+  });
+
   return config;
 }

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

@@ -407,6 +407,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 {
@@ -1269,6 +1277,9 @@
             color: var(--header-foreground);
           }
         }
+        .language-selector a {
+          color: var(--header-foreground);
+        }
       }
 
       // Navigation

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 {

package/src/theme/_footer.scss

@@ -343,6 +343,7 @@
   .main-footer + .post-footer {
     background-color: var(--primary-color, $white);
     color: var(--primary-foreground-color, $black);
+    --social-network-icon-color-main: var(--primary-foreground-color, $black);
   }
 }
 

package/src/theme/_mobile-sticky-menu.scss

@@ -0,0 +1,92 @@
+.mobile-sticky-menu {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  display: flex;
+  display: none;
+  width: 100%;
+  height: 100px;
+  flex-direction: column;
+  background-color: var(--sticky-menu-color, #555);
+  @media only screen and (max-width: $narrow-container-width) {
+    display: block;
+  }
+
+  .embla {
+    position: relative;
+    --slide-size: 33%;
+
+    .embla__button {
+      display: flex;
+      height: 100px;
+      align-items: center;
+      padding: 0px;
+      border: none;
+      background-color: transparent;
+      color: var(--sticky-menu-foreground-color, #fff);
+      cursor: pointer;
+      font-size: 30px;
+    }
+    .embla__button--prev {
+      position: absolute;
+      top: 0px;
+      left: -5px;
+    }
+    .embla__button--next {
+      position: absolute;
+      top: 0px;
+      right: -5px;
+    }
+    .embla__viewport {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      width: 85%;
+
+      .embla__container {
+        display: flex;
+        height: 100px;
+        touch-action: pan-y pinch-zoom;
+        touch-action: pan-x;
+
+        .embla__slide {
+          min-width: 0;
+          flex: 0 0 var(--slide-size);
+          padding: 0px;
+          margin: 0px;
+          transform: translate3d(0, 0, 0);
+
+          .image-wrapper {
+            display: block;
+            width: 65px;
+            height: 65px;
+            img {
+              display: block;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          li {
+            list-style: none;
+          }
+
+          span {
+            display: block;
+            color: var(--sticky-menu-foreground-color, #fff);
+            font-size: 10px;
+            font-weight: 700;
+            line-height: 12px;
+          }
+
+          a {
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            padding: 5px 10px 15px 10px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/blocks/_banner.scss

@@ -0,0 +1,3 @@
+.block.banner.has--block-width--layout {
+  max-width: 100% !important;
+}

package/src/theme/blocks/_teaser.scss

@@ -131,6 +131,7 @@
       border-bottom: none;
     }
     &.next--is--__button {
+      margin-bottom: 0 !important;
       .card-inner,
       .teaser-item.default {
         padding-bottom: 40px;

package/src/theme/main.scss

@@ -37,7 +37,9 @@
 @import 'blocks/rss';
 @import 'blocks/eventSearch';
 @import 'blocks/error-boundary';
+@import 'blocks/banner';
 @import 'sticky-menu';
+@import 'mobile-sticky-menu';
 @import 'card';
 @import 'insets';
 @import 'person';

package/src/theme/sticky-menu.scss

@@ -4,7 +4,7 @@ body.cms-ui .sticky-menu {
 
 .sticky-menu {
   position: fixed;
-  z-index: 11;
+  z-index: 13;
   top: 50vh;
   right: 0;
   transform: translateY(-50%);

package/src/types.d.ts

@@ -81,6 +81,7 @@ export type StickyMenuSettings = {
   sticky_menu: Array<iconLink>;
   sticky_menu_color: string;
   sticky_menu_foreground_color: string;
+  enable_mobile_sticky_menu: boolean;
 };
 
 export type PloneGobrSocialMediaSettings = {