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

package/CHANGELOG.md

@@ -4,9 +4,24 @@ 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)
 
-- Install callout and remove blockquote - refs #148688 [`53ba5a7`](https://github.com/eea/volto-eea-website-policy/commit/53ba5a7153e30f4f41221323393e41d53132fdae)
+> 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)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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,5 +1,6 @@
 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') {
@@ -8,7 +9,6 @@ const applyConfig = (config) => {
   //   // Restrict slate metadata mentions to Layout only
   //   config.settings.layoutOnlySlateMetadataMentions = true;
   // }
-
   // Callout slate button
   config = installCallout(config);
 
@@ -62,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;
 };