@eeacms/volto-eea-website-policy 0.3.3 → 0.4.0

package/package.json

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

package/src/index.js

@@ -1,7 +1,5 @@
 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';
-import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
 import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
 
 const applyConfig = (config) => {
@@ -100,12 +98,10 @@ const applyConfig = (config) => {
   }
 
   // Custom blocks
-  config = [
-    installItemBlock,
-    installContextNavigationBlock,
-    customizeTeaserBlock,
-  ].reduce((acc, apply) => apply(acc), config);
-  config.blocks.blocksConfig.item.mostUsed = true;
+  config = [installContextNavigationBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
 
   // Disable some blocks
   if (config.blocks.blocksConfig.imagecards) {

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

@@ -1,98 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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', 'iconTheme'],
-            },
-          ]
-        : []),
-    ],
-    properties: {
-      assetType: {
-        title: 'Asset type',
-        choices: [
-          ['image', 'Image'],
-          ['icon', 'Icon'],
-        ],
-        default: 'image',
-      },
-      image: {
-        title: 'Image',
-        widget: 'attachedimage',
-      },
-      imageSize: {
-        title: 'Image size',
-        choices: [
-          // commented as they were too small to use as item icons
-          // ['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'],
-          ['tertiary', 'Tertiary'],
-        ],
-      },
-    },
-    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'],
-        ['tertiary', 'Tertiary'],
-      ],
-    },
-    verticalAlign: {
-      title: 'Vertical align',
-      choices: [
-        ['top', 'Top'],
-        ['middle', 'Middle'],
-        ['bottom', 'Bottom'],
-      ],
-    },
-  },
-  required: [],
-});

package/src/components/Blocks/Teaser/Card.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Message } from 'semantic-ui-react';
-import { defineMessages, useIntl } from 'react-intl';
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { getTeaserImageURL } from './utils';
-import { MaybeWrap } from '@plone/volto/components';
-import { UniversalLink } from '@plone/volto/components';
-import cx from 'classnames';
-
-const messages = defineMessages({
-  PleaseChooseContent: {
-    id: 'Please choose an existing content as source for this element',
-    defaultMessage:
-      'Please choose an existing content as source for this element',
-  },
-});
-
-const TeaserCardTemplate = (props) => {
-  const { data, isEditMode } = props;
-  const intl = useIntl();
-  const href = data.href?.[0];
-  const image = data.preview_image?.[0];
-
-  return (
-    <>
-      {!href && isEditMode && (
-        <Message>
-          <div className="grid-teaser-item placeholder">
-            <img src={imageBlockSVG} alt="" />
-            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
-          </div>
-        </Message>
-      )}
-      {href && (
-        <MaybeWrap
-          condition={!isEditMode}
-          as={UniversalLink}
-          href={href['@id']}
-          target={data.openLinkInNewTab ? '_blank' : null}
-        >
-          <div
-            className={cx(
-              'ui fluid card',
-              data?.styles?.theme,
-              data?.styles?.rounded ? 'rounded big' : '',
-            )}
-          >
-            {(href.hasPreviewImage || href.image_field || image) && (
-              <div className="image">
-                <img
-                  src={flattenToAppURL(getTeaserImageURL(href, image))}
-                  alt="a"
-                />
-              </div>
-            )}
-            <div className="content">
-              {data?.head_title && (
-                <div className="meta">{data?.head_title}</div>
-              )}
-              <div className="header">{data?.title}</div>
-              {!data.hide_description && (
-                <p className="description">{data?.description}</p>
-              )}
-            </div>
-          </div>
-        </MaybeWrap>
-      )}
-    </>
-  );
-};
-
-TeaserCardTemplate.propTypes = {
-  data: PropTypes.objectOf(PropTypes.any).isRequired,
-  isEditMode: PropTypes.bool,
-};
-
-export default TeaserCardTemplate;

package/src/components/Blocks/Teaser/Schema.js

@@ -1,70 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  Type: {
-    id: 'Teaser',
-    defaultMessage: 'Teaser',
-  },
-  Theme: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
-  ThemeHelp: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
-  ThemeDefault: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  ThemePrimary: {
-    id: 'Primary',
-    defaultMessage: 'Primary',
-  },
-  ThemeSecondary: {
-    id: 'Secondary',
-    defaultMessage: 'Secondary',
-  },
-  ThemeTertiary: {
-    id: 'Tertiary',
-    defaultMessage: 'Tertiary',
-  },
-  Rounded: {
-    id: 'Rounded',
-    defaultMessage: 'Rounded',
-  },
-  RoundedHelp: {
-    id: 'Rounded Image',
-    defaultMessage: 'Rounded Image',
-  },
-});
-
-export const StylingSchema = ({ intl }) => ({
-  title: intl.formatMessage(messages.Type),
-  block: 'teaserGrid',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['theme', 'rounded'],
-    },
-  ],
-  properties: {
-    theme: {
-      title: intl.formatMessage(messages.Theme),
-      description: intl.formatMessage(messages.ThemeHelp),
-      choices: [
-        ['', intl.formatMessage(messages.ThemeDefault)],
-        ['primary', intl.formatMessage(messages.ThemePrimary)],
-        ['secondary', intl.formatMessage(messages.ThemeSecondary)],
-        ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
-      ],
-    },
-    rounded: {
-      title: intl.formatMessage(messages.Rounded),
-      description: intl.formatMessage(messages.RoundedHelp),
-      type: 'boolean',
-    },
-  },
-  required: [],
-});

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

@@ -1,26 +0,0 @@
-import TeaserCardTemplate from './Card';
-import { StylingSchema } from './Schema';
-
-export default (config) => {
-  // Teaser
-  if (config.blocks.blocksConfig.teaser) {
-    config.blocks.blocksConfig.teaser.variations = [
-      ...(config.blocks.blocksConfig.teaser.variations || []),
-      {
-        id: 'card',
-        isDefault: true,
-        title: 'Card (top image)',
-        template: TeaserCardTemplate,
-      },
-    ];
-    config.blocks.blocksConfig.teaser.enableStyling = true;
-    config.blocks.blocksConfig.teaser.stylesSchema = StylingSchema;
-  }
-
-  // Teaser Grid
-  if (config.blocks.blocksConfig.teaserGrid) {
-    config.blocks.blocksConfig.teaserGrid.title = 'Teaser (Cards)';
-  }
-
-  return config;
-};

package/src/components/Blocks/Teaser/utils.js

@@ -1,18 +0,0 @@
-import { isInternalURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-
-export function getTeaserImageURL(href, image) {
-  const imageScale =
-    config.blocks.blocksConfig['teaser'].imageScale || 'preview';
-  if (image) {
-    if (isInternalURL(image['@id'])) {
-      return `${image['@id']}/@@images/image/${imageScale}`;
-    } else {
-      return image['@id'];
-    }
-  } else {
-    return `${href['@id']}/@@images/${
-      href.image_field || 'preview_image'
-    }/${imageScale}`;
-  }
-}