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

package/CHANGELOG.md

@@ -4,9 +4,43 @@ 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.5](https://github.com/eea/volto-eea-website-policy/compare/0.2.4...0.2.5)
+
+- Rounded card via style wrapper [`6728684`](https://github.com/eea/volto-eea-website-policy/commit/67286844b00902aa4c6b316b50be35db95c531f0)
+- Revert "Rounded Card variation - refs #148723" [`0168a86`](https://github.com/eea/volto-eea-website-policy/commit/0168a86fa644a9b848e37c7f5054eb4308c36784)
+- Disable Image Cards block [`3ed8dc3`](https://github.com/eea/volto-eea-website-policy/commit/3ed8dc311cad8e30a8c918ecec7b21cc99260c50)
+- Rounded Card variation - refs #148723 [`4b46731`](https://github.com/eea/volto-eea-website-policy/commit/4b46731e25962bbb6e7159d0db8a9a642a95eb53)
+
+#### [0.2.4](https://github.com/eea/volto-eea-website-policy/compare/0.2.3...0.2.4)
+
+> 13 June 2022
+
+- Release [`#10`](https://github.com/eea/volto-eea-website-policy/pull/10)
+- Fix listing block title: Listing (Content) [`cec2760`](https://github.com/eea/volto-eea-website-policy/commit/cec276082c3fc1b5486c996c3746a6958fb3a1a9)
+- Add theme to teaser stylewrapper [`60eeb28`](https://github.com/eea/volto-eea-website-policy/commit/60eeb28b7793708c59d0af73ffb09895e8f2c87d)
+- Fix className vs class warning [`fea1603`](https://github.com/eea/volto-eea-website-policy/commit/fea1603eefd628d57640a6b94ddbbb7edfb0d841)
+- Custom card view for teaser [`c8eded0`](https://github.com/eea/volto-eea-website-policy/commit/c8eded011b8317cce9f842526f5d86771f54797b)
+
+#### [0.2.3](https://github.com/eea/volto-eea-website-policy/compare/0.2.2...0.2.3)
+
+> 10 June 2022
+
+- Add Item block [`#9`](https://github.com/eea/volto-eea-website-policy/pull/9)
+- 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 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.5",
   "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/components/Blocks/Teaser/Card.jsx

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

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

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

@@ -0,0 +1,18 @@
+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}`;
+  }
+}

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,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';
+import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
 
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
@@ -8,7 +10,6 @@ const applyConfig = (config) => {
   //   // Restrict slate metadata mentions to Layout only
   //   config.settings.layoutOnlySlateMetadataMentions = true;
   // }
-
   // Callout slate button
   config = installCallout(config);
 
@@ -62,6 +63,53 @@ 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;
+  }
+
+  // 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;
+  }
+
+  // Listing
+  if (config.blocks.blocksConfig.listing) {
+    config.blocks.blocksConfig.listing.title = 'Listing (Content)';
+  }
+
+  // Custom blocks
+  config = [installItemBlock, customizeTeaserBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+  config.blocks.blocksConfig.item.mostUsed = true;
+
+  // Disable some blocks
+  if (config.blocks.blocksConfig.imagecards) {
+    config.blocks.blocksConfig.imagecards.restricted = true;
+  }
+
   // Done
   return config;
 };