@kitconcept/volto-light-theme 1.0.0-rc.0

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Anontools.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 Anontools from '../../../../../components/Anontools/Anontools';
+
+export default Anontools;

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Breadcrumbs.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 Breadcrumbs from '../../../../../components/Breadcrumbs/Breadcrumbs';
+
+export default Breadcrumbs;

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Footer.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 Footer from '../../../../../components/Footer/Footer';
+
+export default Footer;

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Header.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 Header from '../../../../../components/Header/Header';
+
+export default Header;

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Logo.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 Logo from '../../../../../components/Logo/Logo';
+
+export default Logo;

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Navigation.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 Navigation from '../../../../../components/Navigation/Navigation';
+
+export default Navigation;

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

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE SearchWidget.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 SearchWidget from '../../../../../components/SearchWidget/SearchWidget';
+
+export default SearchWidget;

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

@@ -0,0 +1,164 @@
+/**
+ * OVERRIDE RenderBlocks.jsx
+ * REASON: This version enables auto-grouping of blocks that share the same style property
+ * in the StylingWrapper. In the future one could improve it by enabling a way to choose the
+ * grouping property, eg. using a property other than `backgroundColor`.
+ * FILE: https://github.com/plone/volto/blob/9882c66da42e5440ca1c949d829b78f2b1328683/src/components/theme/View/RenderBlocks.jsx#L25
+ * FILE VERSION: Volto 17.0.0-alpha.16
+ * DATE: 2023-06-28
+ * DEVELOPER: @sneridagh
+ */
+
+import React from 'react';
+import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+import { map } from 'lodash';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from '@plone/volto/helpers';
+import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
+import config from '@plone/volto/registry';
+import { ViewDefaultBlock } from '@plone/volto/components';
+import cx from 'classnames';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+  invalidBlock: {
+    id: 'Invalid Block',
+    defaultMessage: 'Invalid block - Will be removed on saving',
+  },
+});
+
+export function groupByBGColor(blocks, blocks_layout) {
+  const result = [];
+  let currentArr = [];
+  let currentBGColor;
+
+  blocks_layout.items.forEach((blockId) => {
+    let currentBlockColor =
+      blocks[blockId]?.styles?.backgroundColor ?? 'transparent';
+
+    if (currentBlockColor !== currentBGColor) {
+      currentBGColor = currentBlockColor;
+      // write it only if the array has some block inside
+      if (currentArr.length > 0) {
+        result.push(currentArr);
+        currentArr = [];
+      }
+    }
+
+    currentArr.push(blockId);
+  });
+  result.push(currentArr);
+  return result;
+}
+
+const RenderBlocks = (props) => {
+  const { blockWrapperTag, content, isContainer, location, metadata } = props;
+  const intl = useIntl();
+  const blocksFieldname = getBlocksFieldname(content);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
+  const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
+  const CustomTag = props.as || React.Fragment;
+
+  const grouped = groupByBGColor(
+    content[blocksFieldname],
+    content[blocksLayoutFieldname],
+  );
+
+  return hasBlocksData(content) ? (
+    <CustomTag>
+      {map(grouped, (group) => (
+        <MaybeWrap
+          key={`block-group-${group[0]}`}
+          condition={
+            config.settings.enableAutoBlockGroupingByBackgroundColor &&
+            !isContainer
+          }
+          className={cx(
+            'blocks-group-wrapper',
+            content[blocksFieldname][group[0]]?.styles?.backgroundColor ??
+              'transparent',
+          )}
+        >
+          {map(group, (block) => {
+            const Block =
+              blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
+                ?.view || ViewDefaultBlock;
+
+            const blockData = applyBlockDefaults({
+              data: content[blocksFieldname][block],
+              intl,
+              metadata,
+              properties: content,
+            });
+
+            if (content[blocksFieldname]?.[block]?.['@type'] === 'empty') {
+              return (
+                <MaybeWrap
+                  key={block}
+                  condition={blockWrapperTag}
+                  as={blockWrapperTag}
+                >
+                  <RenderEmptyBlock />
+                </MaybeWrap>
+              );
+            }
+
+            if (Block) {
+              return (
+                <MaybeWrap
+                  key={block}
+                  condition={blockWrapperTag}
+                  as={blockWrapperTag}
+                >
+                  <StyleWrapper
+                    key={block}
+                    {...props}
+                    id={block}
+                    block={block}
+                    data={blockData}
+                  >
+                    <Block
+                      id={block}
+                      metadata={metadata}
+                      properties={content}
+                      data={blockData}
+                      path={getBaseUrl(location?.pathname || '')}
+                      blocksConfig={blocksConfig}
+                    />
+                  </StyleWrapper>
+                </MaybeWrap>
+              );
+            }
+
+            if (blockData) {
+              return (
+                <div key={block}>
+                  {intl.formatMessage(messages.unknownBlock, {
+                    block: content[blocksFieldname]?.[block]?.['@type'],
+                  })}
+                </div>
+              );
+            }
+
+            return (
+              <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>
+            );
+          })}
+        </MaybeWrap>
+      ))}
+    </CustomTag>
+  ) : (
+    ''
+  );
+};
+
+export default RenderBlocks;

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

@@ -0,0 +1,308 @@
+import { groupByBGColor } from './RenderBlocks';
+describe('groupByBGColor', () => {
+  it('grid + grid + slate grey', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': '__grid',
+        },
+        2: {
+          '@type': '__grid',
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([[1, 2], [3]]);
+  });
+
+  it('grid + grid grey + slate grey', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': '__grid',
+        },
+        2: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([[1], [2, 3]]);
+  });
+
+  it('slate grey + slate grey + slate grey ', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        2: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([[1, 2, 3]]);
+  });
+
+  it('slate grey + slate + slate grey ', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        2: {
+          '@type': 'slate',
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([
+      [1],
+      [2],
+      [3],
+    ]);
+  });
+
+  it('grid + grid + slate grey + slate grey + slate + slate', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': '__grid',
+        },
+        2: {
+          '@type': '__grid',
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        4: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        5: {
+          '@type': 'slate',
+        },
+        6: {
+          '@type': 'slate',
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3, 4, 5, 6],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([
+      [1, 2],
+      [3, 4],
+      [5, 6],
+    ]);
+  });
+
+  it('grid + grid + slate grey + slate grey + slate + slate - transparent', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': '__grid',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        2: {
+          '@type': '__grid',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        4: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        5: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        6: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3, 4, 5, 6],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([
+      [1, 2],
+      [3, 4],
+      [5, 6],
+    ]);
+  });
+
+  it('grid + grid + slate grey + slate grey + slate + slate - transparent mixed', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': '__grid',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        2: {
+          '@type': '__grid',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        3: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        4: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        5: {
+          '@type': 'slate',
+        },
+        6: {
+          '@type': 'slate',
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3, 4, 5, 6],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([
+      [1, 2],
+      [3, 4],
+      [5, 6],
+    ]);
+  });
+
+  it('grid + grid + slate grey + slate grey + slate + slate - transparent mixed', () => {
+    const content = {
+      blocks: {
+        1: {
+          '@type': '__grid',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        2: {
+          '@type': '__grid',
+        },
+        3: {
+          '@type': '__grid',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+        4: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        5: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'grey',
+          },
+        },
+        6: {
+          '@type': 'slate',
+        },
+        7: {
+          '@type': 'slate',
+        },
+        8: {
+          '@type': 'slate',
+          styles: {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+      blocks_layout: {
+        items: [1, 2, 3, 4, 5, 6, 7, 8],
+      },
+    };
+    const { blocks, blocks_layout } = content;
+
+    expect(groupByBGColor(blocks, blocks_layout)).toStrictEqual([
+      [1, 2, 3],
+      [4, 5],
+      [6, 7, 8],
+    ]);
+  });
+});

package/src/icons/block_icn_accordion.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><polygon points="30.16 19.36 33.44 16.03 26.88 16.03 30.16 19.36"/><polygon points="30.09 8.02 26.88 11.35 33.44 11.35 30.09 8.02"/><polygon points="30.16 27.5 33.44 24.17 26.88 24.17 30.16 27.5"/><polygon points="2.79 12.98 4.79 12.98 4.79 6.68 24.46 6.68 24.46 4.68 2.79 4.68 2.79 12.98"/><polygon points="2.79 21.12 4.79 21.12 4.79 18.03 24.46 18.03 24.46 16.03 2.79 16.03 2.79 21.12"/><polygon points="2.79 28.61 4.79 28.61 4.79 26.17 24.46 26.17 24.46 24.17 2.79 24.17 2.79 28.61"/></svg>

package/src/icons/block_icn_grid.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M25.55,3.83H3.83V32.17H32.17V3.83ZM5.83,30.17V5.83H10V30.17Zm6.2,0V5.83h5V30.17Zm7,0V5.83h4.55V30.17Zm11.17,0H25.55V5.83h4.62Z"/></svg>