@kitconcept/volto-light-theme 6.0.0-alpha.9 → 6.0.1

package/src/components/Widgets/schema/iconLinkListSchema.ts

@@ -0,0 +1,98 @@
+import type { BlockEditProps } from '@plone/types';
+import { defineMessages } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  Target: {
+    id: 'Target',
+    defaultMessage: 'Target',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  AltText: {
+    id: 'Alt text',
+    defaultMessage: 'Alt text',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  icon: {
+    id: 'Item icon',
+    defaultMessage: 'Item icon',
+  },
+  item: {
+    id: 'Item',
+    defaultMessage: 'Item',
+  },
+  addItem: {
+    id: 'Add item',
+    defaultMessage: 'Add item',
+  },
+  headline: {
+    id: 'Headline',
+    defaultMessage: 'Headline',
+  },
+  hideDescription: {
+    id: 'Hide description',
+    defaultMessage: 'Hide description',
+  },
+  settings: {
+    id: 'Settings',
+    defaultMessage: 'Settings',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+});
+
+export function iconLinkListSchema({
+  props,
+  intl,
+}: {
+  props: BlockEditProps;
+  intl: IntlShape;
+}) {
+  return {
+    title: intl.formatMessage(messages.item),
+    addMessage: intl.formatMessage(messages.addItem),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['title', 'icon', 'alt', 'href', 'openLinkInNewTab'],
+      },
+    ],
+
+    properties: {
+      title: {
+        title: intl.formatMessage(messages.title),
+      },
+      icon: {
+        title: intl.formatMessage(messages.icon),
+        widget: 'object_browser',
+        selectedItemAttrs: ['Title', 'Description', 'image_field', '@type'],
+        mode: 'image',
+        allowExternals: true,
+      },
+      alt: {
+        title: intl.formatMessage(messages.AltText),
+      },
+      href: {
+        title: intl.formatMessage(messages.Target),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+        allowExternals: true,
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+}

package/src/config/blocks.tsx

@@ -39,6 +39,7 @@ import { tocBlockSchemaEnhancer } from '../components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from '../components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from '../components/Blocks/Slider/schema';
 import EventMetadataView from '../components/Blocks/EventMetadata/View';
+import isEmpty from 'lodash/isEmpty';
 
 declare module '@plone/types' {
   export interface BlocksConfigData {
@@ -131,15 +132,23 @@ export default function install(config: ConfigType) {
     },
   ];
 
-  function blockThemesEnhancer(data) {
+  function blockThemesEnhancer({ data, container }) {
     if (!data['@type']) return {};
+    const blockConfig = config.blocks.blocksConfig[data['@type']];
+    if (!blockConfig) return {};
+    const blockStyleDefinitions =
+      // We look up for the blockThemes in the block's config, then in the global config
+      // We keep `colors` for BBB, but `themes` should be used
+      blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
+
+    if (
+      !isEmpty(container) &&
+      container.theme &&
+      (!data.theme || data.theme === 'default')
+    ) {
+      return findStyleByName(blockStyleDefinitions, container.theme);
+    }
     if (data.theme) {
-      const blockConfig = config.blocks.blocksConfig[data['@type']];
-      if (!blockConfig) return {};
-      const blockStyleDefinitions =
-        // We look up for the blockThemes in the block's config, then in the global config
-        // We keep `colors` for BBB, but `themes` should be used
-        blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
       return data.theme
         ? findStyleByName(blockStyleDefinitions, data.theme)
         : {};
@@ -155,11 +164,11 @@ export default function install(config: ConfigType) {
     method: blockThemesEnhancer,
   });
 
-  // No required blocks (eg. Title)
+  // No required blocks except eventMetadata
   config.blocks.requiredBlocks = [
     ...config.blocks.requiredBlocks,
     'eventMetadata',
-  ];
+  ].filter((block) => block !== 'title');
 
   // Remove Hero Block (No longer in Volto 18)
   // TODO: Remove already?
@@ -194,18 +203,29 @@ export default function install(config: ConfigType) {
     schemaEnhancer: defaultStylingSchema,
   };
 
+  const relabelVariation = (id, title) => {
+    const variation = config.blocks.blocksConfig.listing.variations.find(
+      (variation) => variation.id === id,
+    );
+    return variation ? { ...variation, title } : variation;
+  };
+  const listingBlockVariations = [
+    relabelVariation('default', 'List'),
+    relabelVariation('summary', 'List with images'),
+    {
+      id: 'grid',
+      title: 'Grid',
+      template: GridListingBlockTemplate,
+    },
+    ...config.blocks.blocksConfig.listing.variations.filter(
+      (variation) => !['default', 'summary'].includes(variation.id),
+    ),
+  ].filter((variation) => !!variation);
   config.blocks.blocksConfig.listing = {
     ...config.blocks.blocksConfig.listing,
     schemaEnhancer: defaultStylingSchema,
     allowed_headline_tags: [['h2', 'h2']],
-    variations: [
-      ...config.blocks.blocksConfig.listing.variations,
-      {
-        id: 'grid',
-        title: 'Grid',
-        template: GridListingBlockTemplate,
-      },
-    ],
+    variations: listingBlockVariations,
   };
 
   config.blocks.blocksConfig.image = {

package/src/config/settings.ts

@@ -5,31 +5,73 @@ declare module '@plone/types' {
     slate: {
       useLinkedHeadings: boolean;
     };
-    userDefinedControlPanelColors: string[];
   }
 }
 
+type apiExpanderInherit = {
+  match: string;
+  GET_CONTENT: string[];
+  querystring:
+    | { [key: string]: string }
+    | ((
+        config,
+        querystring: { config: ConfigType; querystring: object },
+      ) => { [key: string]: string });
+};
+
 export default function install(config: ConfigType) {
+  const EXPANDERS_INHERIT_BEHAVIORS =
+    'voltolighttheme.header,voltolighttheme.theme,voltolighttheme.footer,kitconcept.footer,kitconcept.sticky_menu';
   config.settings.enableAutoBlockGroupingByBackgroundColor = true;
   config.settings.navDepth = 3;
-  config.settings.enableFatMenu = true;
   config.settings.slate.useLinkedHeadings = false;
   config.settings.contentMetadataTagsImageField = 'preview_image';
   config.settings.querystringSearchGet = true;
 
-  config.settings.siteLabel = '';
-  config.settings.intranetHeader = false;
-
   config.settings.slidingSearchAnimation = true;
   config.settings.openExternalLinkInNewTab = true;
-  config.settings.userDefinedControlPanelColors = [
-    'accent_color',
-    'accent_foreground_color',
-    'primary_color',
-    'primary_foreground_color',
-    'secondary_color',
-    'secondary_foreground_color',
+
+  config.settings.apiExpanders = [
+    ...config.settings.apiExpanders,
+    {
+      match: '',
+      GET_CONTENT: ['inherit'],
+      querystring: (config, querystring) => {
+        if (querystring['expand.inherit.behaviors']) {
+          return {
+            'expand.inherit.behaviors': querystring[
+              'expand.inherit.behaviors'
+            ].concat(',', EXPANDERS_INHERIT_BEHAVIORS),
+          };
+        } else {
+          return {
+            'expand.inherit.behaviors': EXPANDERS_INHERIT_BEHAVIORS,
+          };
+        }
+      },
+    } as apiExpanderInherit,
   ];
 
+  config.settings.colorMap = {
+    primary_color: {
+      colorPair: 'primary_foreground_color',
+      default: '#ffffff',
+    },
+    primary_foreground_color: {
+      colorPair: 'primary_color',
+      default: '#000000',
+    },
+    secondary_color: {
+      colorPair: 'secondary_foreground_color',
+      default: '#ecebeb',
+    },
+    secondary_foreground_color: {
+      colorPair: 'secondary_color',
+      default: '#000000',
+    },
+    accent_color: { colorPair: 'accent_foreground_color', default: '#ecebeb' },
+    accent_foreground_color: { colorPair: 'accent_color', default: '#ffffff' },
+  };
+
   return config;
 }

package/src/config/slots.ts

@@ -1,6 +1,16 @@
 import type { ConfigType } from '@plone/registry';
 import Theming from '../components/Theming/Theming';
-import FooterLogos from '../components/Footer/FooterLogos';
+import FooterLogos from '../components/Footer/slots/FooterLogos';
+import FollowUsLogoAndLinks from '../components/Footer/slots/FollowUsLogoAndLinks';
+import Colophon from '../components/Footer/slots/Colophon';
+import CoreFooter from '../components/Footer/slots/CoreFooter';
+import StickyMenu from '../components/StickyMenu/StickyMenu';
+import type { Content } from '@plone/types';
+
+export function hasInheritedBehavior(behavior: string) {
+  return ({ content }: { content: Content }) =>
+    Object.keys(content?.['@components']?.inherit || {}).includes(behavior);
+}
 
 export default function install(config: ConfigType) {
   config.registerSlotComponent({
@@ -9,11 +19,36 @@ export default function install(config: ConfigType) {
     component: Theming,
   });
 
+  config.registerSlotComponent({
+    slot: 'aboveHeader',
+    name: 'StickyMenu',
+    component: StickyMenu,
+  });
+
   config.registerSlotComponent({
     name: 'footerLogos',
     slot: 'preFooter',
     component: FooterLogos,
   });
 
+  config.registerSlotComponent({
+    name: 'coreFooter',
+    slot: 'footer',
+    component: CoreFooter,
+    predicates: [hasInheritedBehavior('kitconcept.footer')],
+  });
+
+  config.registerSlotComponent({
+    name: 'PostFooterFollowUsLogoAndLinks',
+    slot: 'postFooter',
+    component: FollowUsLogoAndLinks,
+  });
+
+  config.registerSlotComponent({
+    name: 'Colophon',
+    slot: 'postFooter',
+    component: Colophon,
+  });
+
   return config;
 }

package/src/config/summary.ts

@@ -0,0 +1,24 @@
+import type { ConfigType } from '@plone/registry';
+import NewsItemSummary from '../components/Summary/NewsItemSummary';
+import EventSummary from '../components/Summary/EventSummary';
+import FileSummary from '../components/Summary/FileSummary';
+
+export default function install(config: ConfigType) {
+  config.registerComponent({
+    name: 'Summary',
+    component: NewsItemSummary,
+    dependencies: ['News Item'],
+  });
+  config.registerComponent({
+    name: 'Summary',
+    component: EventSummary,
+    dependencies: ['Event'],
+  });
+  config.registerComponent({
+    name: 'Summary',
+    component: FileSummary,
+    dependencies: ['File'],
+  });
+
+  return config;
+}

package/src/config/widgets.ts

@@ -1,34 +1,68 @@
 import type { ConfigType } from '@plone/registry';
-import ThemingColorPicker from '../components/Widgets/ThemingColorPicker';
-import BackgroundColorWidget from '../components/Widgets/BackgroundColorWidget';
-import BlockWidthWidget from '../components/Widgets/BlockWidthWidget';
-import BlockAlignmentWidget from '../components/Widgets/BlockAlignmentWidget';
-import ColorPickerWidget from '../components/Widgets/ColorPickerWidget';
-import FooterLogosWidget from '../components/Widgets/FooterLogosWidget';
-import FooterLinksWidget from '../components/Widgets/FooterLinksWidget';
-import SizeWidget from '../components/Widgets/SizeWidget';
+import BlockWidth from '../components/Widgets/BlockWidth';
+import BlockAlignment from '../components/Widgets/BlockAlignment';
+import ColorSwatch from '../components/Widgets/ColorSwatch';
+import Size from '../components/Widgets/Size';
+import ColorPicker from '../components/Widgets/ColorPicker';
+import ThemeColorSwatch from '../components/Widgets/ThemeColorSwatch';
+import BlocksObject from '../components/Widgets/BlocksObject';
+import ObjectList from '../components/Widgets/ObjectList';
+import { headerActionsSchema } from '../components/Widgets/schema/headerActionsSchema';
+import { footerLogosSchema } from '../components/Widgets/schema/footerLogosSchema';
+import { footerLinksSchema } from '../components/Widgets/schema/footerLinksSchema';
+import { iconLinkListSchema } from '../components/Widgets/schema/iconLinkListSchema';
 
 declare module '@plone/types' {
   export interface WidgetsConfigByWidget {
-    BackgroundColorWidget: React.ComponentType<any>;
-    blockWidth: React.ComponentType<any>;
-    blockAlignment: React.ComponentType<any>;
-    themingColorPicker: typeof ThemingColorPicker;
-    footerLogos: typeof FooterLogosWidget;
-    footerLinks: typeof FooterLinksWidget;
-    sizeWidget: React.ComponentType<any>;
+    themeColorSwatch: typeof ColorSwatch;
+    blockWidth: typeof BlockWidth;
+    blockAlignment: typeof BlockAlignment;
+    size: typeof Size;
+    colorPicker: typeof ColorPicker;
+    blocksObject: typeof BlocksObject;
   }
 }
 
 export default function install(config: ConfigType) {
-  config.widgets.widget.BackgroundColorWidget = BackgroundColorWidget;
-  config.widgets.widget.blockWidth = BlockWidthWidget;
-  config.widgets.widget.blockAlignment = BlockAlignmentWidget;
-  config.widgets.widget.color_picker = ColorPickerWidget;
-  config.widgets.widget.themingColorPicker = ThemingColorPicker;
-  config.widgets.widget.footerLogos = FooterLogosWidget;
-  config.widgets.widget.footerLinks = FooterLinksWidget;
-  config.widgets.widget.sizeWidget = SizeWidget;
+  // Color picker widget override - use our own non-semanticUI widget
+  // This is the widget that given an array of colors, you can choose one of them
+  // `color_picker` is a terrible name for this widget, it should be `colorSwatch`
+  // ToDo: Rename it in Volto 19
+  config.widgets.widget.color_picker = ColorSwatch;
+
+  // ObjectList widget override - use our own non-semanticUI widget
+  // it uses also dnd-kit for drag and drop
+  config.widgets.widget.object_list = ObjectList;
+
+  config.widgets.widget.blockWidth = BlockWidth;
+  config.widgets.widget.blockAlignment = BlockAlignment;
+  config.widgets.widget.colorPicker = ColorPicker;
+  config.widgets.widget.size = Size;
+  config.widgets.widget.themeColorSwatch = ThemeColorSwatch;
+
+  config.registerUtility({
+    name: 'headerActions',
+    type: 'schema',
+    method: headerActionsSchema,
+  });
+
+  config.registerUtility({
+    name: 'footerLogos',
+    type: 'schema',
+    method: footerLogosSchema,
+  });
+
+  config.registerUtility({
+    name: 'footerLinks',
+    type: 'schema',
+    method: footerLinksSchema,
+  });
+
+  config.registerUtility({
+    name: 'iconLinkList',
+    type: 'schema',
+    method: iconLinkListSchema,
+  });
 
   return config;
 }

package/src/customizations/volto/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -0,0 +1,8 @@
+/**
+ * OVERRIDE DefaultBody.jsx
+ * REASON: Look up Summary component.
+ */
+
+import DefaultBody from '../../../../../../components/Blocks/Teaser/DefaultBody';
+
+export default DefaultBody;

package/src/customizations/volto/components/theme/Tags/Tags.jsx

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Tags.jsx
+ * REASON: This theme uses a custom pre-@plone/components component
+ * SemanticUI-free located at the components folder.
+ * To override it, override the @kitconcept/volto-light-theme one instead of
+ * this one.
+ */
+
+import Tags from '../../../../../components/Tags/Tags';
+
+export default Tags;

package/src/customizations/volto/components/theme/View/RenderBlocks.jsx

@@ -88,7 +88,7 @@ const RenderBlocks = (props) => {
         const themes =
           config.blocks.blocksConfig[
             content[blocksFieldname][group[0]]['@type']
-          ].themes ?? config.blocks.themes;
+          ]?.themes ?? config.blocks.themes;
 
         return (
           <MaybeWrap
@@ -145,6 +145,7 @@ const RenderBlocks = (props) => {
                       id={block}
                       block={block}
                       data={blockData}
+                      isContainer={isContainer}
                     >
                       <Block
                         id={block}

package/src/helpers/DndSortableList.tsx

@@ -0,0 +1,138 @@
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+const SortableItem = (props) => {
+  const { uid, children, item, index, activeObject } = props;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: uid,
+    });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style}>
+      {children({ uid, item, index, activeObject, attributes, listeners })}
+    </div>
+  );
+};
+
+interface DndSortableListProps {
+  /**
+   * An object containing all items, ideally with a `@id` key with the item's
+   * unique identifier (UID).
+   *
+   * If none provided, the item index in the array is used.
+   *
+   */
+  items: Array<Record<string, any>>;
+
+  /**
+   * A function to handle the end of a drag operation.
+   * @param {DragEndEvent} event - The drag end event.
+   */
+  handleDragEnd: (event: DragEndEvent) => void;
+
+  /**
+   * The currently active object being dragged.
+   */
+  activeObject: any;
+
+  /**
+   * A function to set the active object.
+   * @param {any} object - The object to set as active.
+   */
+  setActiveObject: (object: any) => void;
+
+  /**
+   * A render prop function to render each sortable item.
+   * @param {object} params - The parameters for rendering the item.
+   * @param {string} params.uid - The unique identifier of the item.
+   * @param {any} params.item - The item data.
+   * @param {number} params.index - The index of the item in the sorted list.
+   * @param {any} params.activeObject - The currently active object being dragged.
+   * @param {object} params.attributes - The attributes for the sortable item.
+   * @param {object} params.listeners - The listeners for the sortable item.
+   * @returns {React.ReactNode} - The rendered sortable item.
+   */
+  children: (params: {
+    uid: string;
+    item: any;
+    index: number;
+    activeObject: any;
+    attributes: any;
+    listeners: any;
+  }) => React.ReactNode;
+}
+
+const arrayToObject = (arr: Record<string, any>[]): Record<string, any> => {
+  return arr.reduce((acc, item) => {
+    acc[item['@id']] = item;
+    return acc;
+  }, {});
+};
+
+const DndSortableList = (props: DndSortableListProps) => {
+  const { items, children, handleDragEnd, activeObject, setActiveObject } =
+    props;
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  function handleDragStart(event: DragStartEvent) {
+    setActiveObject(null);
+  }
+
+  const itemIds = items ? items.map((item, index) => item['@id'] || index) : [];
+  const itemsByUid = items ? arrayToObject(items) : {};
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+        {itemIds.map((uid, index) => {
+          const item = itemsByUid[uid];
+          return (
+            <SortableItem
+              key={uid}
+              uid={uid}
+              index={index}
+              item={item}
+              activeObject={activeObject}
+            >
+              {children}
+            </SortableItem>
+          );
+        })}
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default DndSortableList;

package/src/helpers/dates.js

@@ -0,0 +1,22 @@
+const LONG_DATE_FORMAT = {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+};
+
+export const parseDateFromCatalog = (value) => {
+  if (value.startsWith('1969')) {
+    return null;
+  }
+  return new Date(value);
+};
+
+export const formatDateRange = ({
+  start,
+  end,
+  format = LONG_DATE_FORMAT,
+  locale = 'default',
+}) => {
+  const formatter = new Intl.DateTimeFormat(locale || 'default', format);
+  return formatter.formatRange(start, end);
+};