@eeacms/volto-eea-website-policy 0.2.0 → 0.2.3

package/CHANGELOG.md

@@ -4,8 +4,37 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.3](https://github.com/eea/volto-eea-website-policy/compare/0.2.2...0.2.3)
+
+- prettier fix [`c2a6d2d`](https://github.com/eea/volto-eea-website-policy/commit/c2a6d2d3b12ce771b9b4413c5a6db157ccd9d1fc)
+- Update index.js [`fb73895`](https://github.com/eea/volto-eea-website-policy/commit/fb7389509bc7e207942762c5e02a93d0168a6fba)
+- removed change from commit 719e3778 [`29e636b`](https://github.com/eea/volto-eea-website-policy/commit/29e636b34ab02992c67cc5960f4dc6b21b1b4e71)
+- added navDepth to level 4 in order to fill mega menu [`719e377`](https://github.com/eea/volto-eea-website-policy/commit/719e37785cfa2ed37568c82a34dc470b52483d04)
+- Rearrange Block Chooser [`9a5c118`](https://github.com/eea/volto-eea-website-policy/commit/9a5c1187ba21fa1898394a4b6cf6dd68bd68f258)
+- Move Item block un components folder [`9fb6ab2`](https://github.com/eea/volto-eea-website-policy/commit/9fb6ab2fb02cc5c1a7e25367de5ebe7109bd3dc4)
+- Set default sizes for image & icon in Item block [`af22ec7`](https://github.com/eea/volto-eea-website-policy/commit/af22ec78b2c6fd1d033dc1acfec5e64f8926cd77)
+- Add helpers functions [`353581c`](https://github.com/eea/volto-eea-website-policy/commit/353581cc6602b5e573eee93c74a67656203c0968)
+- Add Item block [`617bfe2`](https://github.com/eea/volto-eea-website-policy/commit/617bfe2b827708ddb2c5eecd8fe1cc6fee37f60a)
+- Add Teaser block folder's structure [`9457dd4`](https://github.com/eea/volto-eea-website-policy/commit/9457dd4ffaa2631eceb46bfd1ec2d201e8b3d7a8)
+
+#### [0.2.2](https://github.com/eea/volto-eea-website-policy/compare/0.2.1...0.2.2)
+
+> 24 May 2022
+
+- Install callout and remove blockquote - refs #148688 [`#8`](https://github.com/eea/volto-eea-website-policy/pull/8)
+
+#### [0.2.1](https://github.com/eea/volto-eea-website-policy/compare/0.2.0...0.2.1)
+
+> 25 March 2022
+
+- 137187 keycloak integration for plone6 (#3) [`#6`](https://github.com/eea/volto-eea-website-policy/pull/6)
+- 137187 keycloak integration for plone6 [`#3`](https://github.com/eea/volto-eea-website-policy/pull/3)
+
 #### [0.2.0](https://github.com/eea/volto-eea-website-policy/compare/0.1.1...0.2.0)
 
+> 18 March 2022
+
+- Release [`#5`](https://github.com/eea/volto-eea-website-policy/pull/5)
 - Enable multilingual - refs #146771 [`#4`](https://github.com/eea/volto-eea-website-policy/pull/4)
 - Release 0.2.0 [`4b72206`](https://github.com/eea/volto-eea-website-policy/commit/4b72206675ab13ed81567df590849613581d7f10)
 - Update index.js [`0f5be15`](https://github.com/eea/volto-eea-website-policy/commit/0f5be1553b608f49c9a61bbc69a0f90219260a83)

package/jest-addon.config.js

@@ -9,6 +9,7 @@ module.exports = {
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
     'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -16,8 +16,12 @@
     "type": "git",
     "url": "git@github.com:eea/volto-eea-website-policy.git"
   },
+  "addons": [
+    "volto-slate"
+  ],
   "dependencies": {
-    "@plone/scripts": "*"
+    "@plone/scripts": "*",
+    "volto-slate": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

package/src/components/Blocks/Item/Edit.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import config from '@plone/volto/registry';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import SlateEditor from 'volto-slate/editor/SlateEditor';
+import { handleKey } from 'volto-slate/blocks/Text/keyboard';
+import { uploadContent, saveSlateBlockSelection } from 'volto-slate/actions';
+
+import { createSlateParagraph } from '@eeacms/volto-eea-website-policy/helpers';
+
+import Item from './Item';
+import getSchema from './schema';
+
+const Edit = (props) => {
+  const { slate } = config.settings;
+  const {
+    data = {},
+    block = null,
+    selected = false,
+    index,
+    properties,
+    onChangeBlock,
+    onSelectBlock,
+  } = props;
+  const { description } = data;
+  const schema = React.useMemo(() => getSchema(props), [props]);
+
+  const withBlockProperties = React.useCallback(
+    (editor) => {
+      editor.getBlockProps = () => props;
+      return editor;
+    },
+    [props],
+  );
+
+  const handleFocus = React.useCallback(() => {
+    if (!selected) {
+      onSelectBlock(block);
+    }
+  }, [onSelectBlock, selected, block]);
+
+  return (
+    <>
+      <Item {...data} mode="edit">
+        <SlateEditor
+          index={index}
+          properties={properties}
+          extensions={slate.textblockExtensions}
+          renderExtensions={[withBlockProperties]}
+          value={createSlateParagraph(description)}
+          onChange={(description) => {
+            onChangeBlock(block, {
+              ...data,
+              description,
+            });
+          }}
+          block={block}
+          onFocus={handleFocus}
+          onKeyDown={handleKey}
+          selected={selected}
+          placeholder="Add item description..."
+          slateSettings={slate}
+        />
+      </Item>
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default connect(
+  (state, props) => {
+    const blockId = props.block;
+    return {
+      defaultSelection: blockId
+        ? state.slate_block_selections?.[blockId]
+        : null,
+      uploadRequest: state.upload_content?.[props.block]?.upload || {},
+      uploadedContent: state.upload_content?.[props.block]?.data || {},
+    };
+  },
+  {
+    uploadContent,
+    saveSlateBlockSelection, // needed as editor blockProps
+  },
+)(Edit);

package/src/components/Blocks/Item/Item.jsx

@@ -0,0 +1,50 @@
+import cx from 'classnames';
+import { Item as UiItem, Icon } from 'semantic-ui-react';
+import { serializeText } from '@eeacms/volto-eea-website-policy/helpers';
+
+function Item({
+  assetType,
+  children,
+  description,
+  extra,
+  header,
+  icon,
+  iconSize = 'huge',
+  iconTheme,
+  image,
+  imageSize = 'tile',
+  meta,
+  mode = 'view',
+  styles = {},
+}) {
+  const { verticalAlign } = styles;
+  return (
+    <UiItem.Group unstackable className="row">
+      <UiItem className={cx(styles?.theme)}>
+        {assetType === 'image' && image && (
+          <UiItem.Image
+            src={`${image}/@@images/image/preview`}
+            className={cx('ui', imageSize)}
+            alt={header || 'Item image'}
+          />
+        )}
+        {assetType === 'icon' && icon && (
+          <Icon className={cx(icon, iconTheme)} size={iconSize} />
+        )}
+        <UiItem.Content verticalAlign={verticalAlign}>
+          {header && <UiItem.Header>{header}</UiItem.Header>}
+          {meta && <UiItem.Meta>{meta}</UiItem.Meta>}
+          {description && mode === 'view' && (
+            <UiItem.Description>
+              {serializeText(description)}
+            </UiItem.Description>
+          )}
+          {mode === 'edit' && children}
+          {extra && <UiItem.Extra>{extra}</UiItem.Extra>}
+        </UiItem.Content>
+      </UiItem>
+    </UiItem.Group>
+  );
+}
+
+export default Item;

package/src/components/Blocks/Item/View.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import Item from './Item';
+
+const View = (props) => {
+  const { data = {} } = props;
+  return <Item {...data} />;
+};
+
+export default View;

package/src/components/Blocks/Item/index.js

@@ -0,0 +1,32 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import ItemEdit from './Edit';
+import ItemView from './View';
+import { stylingSchema } from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.item = {
+    id: 'item',
+    title: 'Item',
+    icon: codeSVG,
+    group: 'common',
+    edit: ItemEdit,
+    view: ItemView,
+    blockHasOwnFocusManagement: true,
+    stylesSchema: stylingSchema,
+    enableStyling: true,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  config.settings.blocksWithFootnotesSupport = {
+    ...(config.settings.blocksWithFootnotesSupport || {}),
+    item: ['description'],
+  };
+
+  return config;
+};

package/src/components/Blocks/Item/schema.js

@@ -0,0 +1,101 @@
+export default ({ data }) => {
+  const { assetType = 'image' } = data;
+  return {
+    title: 'Item',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['assetType'],
+      },
+      ...(assetType === 'image'
+        ? [{ id: 'image', title: 'Image', fields: ['image', 'imageSize'] }]
+        : []),
+      ...(assetType === 'icon'
+        ? [{ id: 'icon', title: 'Icon', fields: ['icon', 'iconSize'] }]
+        : []),
+    ],
+    properties: {
+      assetType: {
+        title: 'Asset type',
+        choices: [
+          ['image', 'Image'],
+          ['icon', 'Icon'],
+        ],
+        default: 'image',
+      },
+      image: {
+        title: 'Image',
+        widget: 'attachedimage',
+      },
+      imageSize: {
+        title: 'Image size',
+        choices: [
+          ['mini', 'Mini'],
+          ['tile', 'Tile'],
+          ['tiny', 'Tiny'],
+          ['small', 'Small'],
+          ['large', 'Large'],
+          ['big', 'Big'],
+          ['huge', 'Huge'],
+          ['massive', 'Massive'],
+        ],
+        default: 'tile',
+      },
+      icon: {
+        title: 'Icon name',
+      },
+      iconSize: {
+        title: 'Icon size',
+        choices: [
+          ['mini', 'Mini'],
+          ['tiny', 'Tiny'],
+          ['small', 'Small'],
+          ['large', 'Large'],
+          ['big', 'Big'],
+          ['huge', 'Huge'],
+          ['massive', 'Massive'],
+        ],
+        default: 'huge',
+      },
+      iconTheme: {
+        title: 'Icon theme',
+        choices: [
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+        ],
+      },
+    },
+    required: [],
+  };
+};
+
+export const stylingSchema = ({ intl }) => ({
+  title: 'Item style',
+  block: 'item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme', 'verticalAlign'],
+    },
+  ],
+  properties: {
+    theme: {
+      title: 'Theme',
+      choices: [
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+      ],
+    },
+    verticalAlign: {
+      title: 'Vertical align',
+      choices: [
+        ['top', 'Top'],
+        ['middle', 'Middle'],
+        ['bottom', 'Bottom'],
+      ],
+    },
+  },
+  required: [],
+});

package/src/helpers.js

@@ -0,0 +1,11 @@
+import { isArray } from 'lodash';
+import config from '@plone/volto/registry';
+import { serializeNodes } from 'volto-slate/editor/render';
+
+export const createSlateParagraph = (text) => {
+  return isArray(text) ? text : config.settings.slate.defaultValue();
+};
+
+export const serializeText = (text) => {
+  return isArray(text) ? serializeNodes(text) : text;
+};

package/src/index.js

@@ -1,3 +1,7 @@
+import { runtimeConfig } from '@plone/volto/runtime_config';
+import installCallout from 'volto-slate/editor/plugins/Callout';
+import installItemBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Item';
+
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
   //   // Restrict block-style to Layout only
@@ -5,6 +9,13 @@ const applyConfig = (config) => {
   //   // Restrict slate metadata mentions to Layout only
   //   config.settings.layoutOnlySlateMetadataMentions = true;
   // }
+  // Callout slate button
+  config = installCallout(config);
+
+  // Remove blockquote slate button
+  config.settings.slate.toolbarButtons = config.settings.slate.toolbarButtons.filter(
+    (item) => item !== 'blockquote',
+  );
 
   // Disable tags on View
   config.settings.showTags = false;
@@ -19,6 +30,27 @@ const applyConfig = (config) => {
   // Date format for EU
   config.settings.dateLocale = 'en-gb';
 
+  // #137187 Keycloak integration
+  if (runtimeConfig['RAZZLE_KEYCLOAK'] === 'Yes') {
+    config.settings.externalRoutes = [
+      ...(config.settings.externalRoutes || []),
+      {
+        match: {
+          path: '/login',
+          exact: true,
+          strict: false,
+        },
+      },
+      {
+        match: {
+          path: '/logout',
+          exact: true,
+          strict: false,
+        },
+      },
+    ];
+  }
+
   // Working-copy
   config.settings.hasWorkingCopySupport = true;
 
@@ -30,6 +62,43 @@ const applyConfig = (config) => {
     (item) => item.code,
   ) || ['en'];
 
+  // Block chooser
+  config.blocks.blocksConfig.image.mostUsed = false;
+  config.blocks.blocksConfig.video.mostUsed = false;
+
+  // Grid/Teaser block (kitconcept)
+  if (config.blocks.blocksConfig.__grid) {
+    config.blocks.blocksConfig.__grid.restricted = true;
+  }
+  if (config.blocks.blocksConfig.imagesGrid) {
+    config.blocks.blocksConfig.imagesGrid.restricted = true;
+  }
+  if (config.blocks.blocksConfig.teaser) {
+    config.blocks.blocksConfig.teaser.restricted = true;
+  }
+  if (config.blocks.blocksConfig.teaserGrid) {
+    config.blocks.blocksConfig.teaserGrid.title = 'Teaser (Cards)';
+  }
+
+  // Divider
+  if (config.blocks.blocksConfig.dividerBlock) {
+    config.blocks.blocksConfig.dividerBlock.mostUsed = true;
+  }
+
+  // Call to Action
+  if (config.blocks.blocksConfig.callToActionBlock) {
+    config.blocks.blocksConfig.callToActionBlock.mostUsed = true;
+  }
+
+  // Columns
+  if (config.blocks.blocksConfig.columnsBlock) {
+    config.blocks.blocksConfig.columnsBlock.mostUsed = true;
+  }
+
+  // Custom blocks
+  config = [installItemBlock].reduce((acc, apply) => apply(acc), config);
+  config.blocks.blocksConfig.item.mostUsed = true;
+
   // Done
   return config;
 };