Merge pull request #13 from eea/develop

CHANGELOG.md

@@ -4,7 +4,15 @@ 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).
 
-### [2.0.6](https://github.com/eea/volto-circularity-policy/compare/2.0.5...2.0.6) - 9 January 2023
+### [2.0.7](https://github.com/eea/volto-circularity-policy/compare/2.0.6...2.0.7) - 10 January 2023
+
+#### :hammer_and_wrench: Others
+
+- hover styles [nileshgulia1 - [`2df0fde`](https://github.com/eea/volto-circularity-policy/commit/2df0fde2784b457e7a0bad1df40e0c2874f1cee7)]
+- stylelint fix [nileshgulia1 - [`d701316`](https://github.com/eea/volto-circularity-policy/commit/d70131627f9b79e1c870dbf89bab27b236723267)]
+- stylelint fix [nileshgulia1 - [`d723ed8`](https://github.com/eea/volto-circularity-policy/commit/d723ed8d89a448a02798ebdd00513abd2fc3f358)]
+- enhance schema of call-to-action block [nileshgulia1 - [`e6c8667`](https://github.com/eea/volto-circularity-policy/commit/e6c86671338293ef4dcfd6b7fd0640dc648a9cc1)]
+### [2.0.6](https://github.com/eea/volto-circularity-policy/compare/2.0.5...2.0.6) - 10 January 2023
 
 #### :hammer_and_wrench: Others
 
@@ -77,7 +85,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Update index.js [Alexandru Ghica - [`e2d4a83`](https://github.com/eea/volto-circularity-policy/commit/e2d4a830be79bf2bab31bda20930a8a06b14fc18)]
 - Update index.js [Alexandru Ghica - [`192b5a6`](https://github.com/eea/volto-circularity-policy/commit/192b5a646d1709dac695a9d7687b73ee2d57f48a)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`82e8bd5`](https://github.com/eea/volto-circularity-policy/commit/82e8bd5a84b5fd39203d31abb4e94f5f55c09f8e)]
 ### [0.1.1](https://github.com/eea/volto-circularity-policy/compare/0.1.0...0.1.1) - 27 June 2022
 
 #### :hammer_and_wrench: Others

package.json

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

src/index.js

@@ -5,7 +5,56 @@ import {
   BodyClassView,
 } from '@eeacms/volto-circularity-policy/components/manage/Blocks/BodyClass';
 import worldSVG from '@plone/volto/icons/world.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import { makeInlineElementPlugin } from '@plone/volto-slate/elementEditor';
+import { LINK } from '@plone/volto-slate/constants';
+import { LinkElement } from '@plone/volto-slate/editor/plugins/AdvancedLink/render';
+import { withLink } from '@plone/volto-slate/editor/plugins/AdvancedLink/extensions';
+import { linkDeserializer } from '@plone/volto-slate/editor/plugins/AdvancedLink/deserialize';
+import LinkEditSchema from '@plone/volto-slate/editor/plugins/AdvancedLink/schema';
+import { defineMessages } from 'react-intl';
+
 import './less/slate-metadata.less';
+import './less/slate-styles.less';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit link',
+    defaultMessage: 'Edit link',
+  },
+  delete: {
+    id: 'Remove link',
+    defaultMessage: 'Remove link',
+  },
+  document_view: {
+    id: 'Document View',
+    defaultMessage: 'Document View',
+  },
+  herosection_view: {
+    id: 'Hero Section View',
+    defaultMessage: 'Hero Section View',
+  },
+  fullwidth_view: {
+    id: 'Full Width View',
+    defaultMessage: 'Full Width View',
+  },
+  improving: {
+    id: 'Improving',
+    defaultMessage: 'Improving',
+  },
+  deteriotating: {
+    id: 'Deteriotating',
+    defaultMessage: 'Deteriotating',
+  },
+  stable: {
+    id: 'Stable',
+    defaultMessage: 'Stable',
+  },
+  no_trend: {
+    id: 'No trend',
+    defaultMessage: 'No trend',
+  },
+});
 
 const applyConfig = (config) => {
   // #137187 Keycloak integration
@@ -109,6 +158,60 @@ const applyConfig = (config) => {
     ) || []),
   ];
 
+  config.settings.slate.styleMenu = config.settings.slate.styleMenu || {};
+  config.settings.slate.styleMenu.blockStyles = [
+    ...(config.settings.slate.styleMenu?.blockStyles || []),
+    { cssClass: 'box-headings-type-1', label: 'Box headings type 1' },
+    { cssClass: 'box-headings-type-2', label: 'Box headings type 2' },
+  ];
+
+  // Call to Action enhance schema
+  if (config.blocks.blocksConfig.callToActionBlock) {
+    const oldSchemaEnhancer =
+      config.blocks.blocksConfig.callToActionBlock.schemaEnhancer;
+    config.blocks.blocksConfig.callToActionBlock.schemaEnhancer = ({
+      formData,
+      schema,
+      intl,
+    }) => {
+      const resSchema = oldSchemaEnhancer({ formData, schema, intl });
+      resSchema.properties.styles.schema.properties.theme.choices.push(
+        ['improving', intl.formatMessage(messages.improving)],
+        ['deteriotating', intl.formatMessage(messages.deteriotating)],
+        ['no-trend', intl.formatMessage(messages.no_trend)],
+        ['stable', intl.formatMessage(messages.stable)],
+      );
+      return resSchema;
+    };
+  }
+
+  //advancedlink is currently not working properly/not recognized in fise, so we add it to config manually
+  const { slate } = config.settings;
+
+  slate.toolbarButtons = [...(slate.toolbarButtons || []), LINK];
+  slate.expandedToolbarButtons = [
+    ...(slate.expandedToolbarButtons || []),
+    LINK,
+  ];
+
+  slate.htmlTagsToSlate.A = linkDeserializer;
+
+  const opts = {
+    title: 'Link',
+    pluginId: LINK,
+    elementType: LINK,
+    element: LinkElement,
+    isInlineElement: true,
+    editSchema: LinkEditSchema,
+    extensions: [withLink],
+    hasValue: (formData) => !!formData.link,
+    toolbarButtonIcon: linkSVG,
+    messages,
+  };
+
+  const [installLinkEditor] = makeInlineElementPlugin(opts);
+  config = installLinkEditor(config);
+
   return config;
 };
 

src/less/slate-styles.less

@@ -0,0 +1,65 @@
+/* stylelint-disable */
+
+.box-headings-type-1 {
+  background-color: #004b7f;
+  color: White;
+  padding: 0.5rem;
+}
+
+.box-headings-type-2 {
+  background-color: #3d5265;
+  color: white;
+  padding: 0.5rem;
+}
+
+//Call to action styles
+
+.block.call-to-action {
+  .ui.button.improving {
+    padding: 0.5rem 2rem;
+    border-radius: 10px;
+    background-color: #007b6c;
+    color: white;
+
+    &:hover {
+      background-color: #007b6c;
+      color: white;
+    }
+  }
+
+  .ui.button.deteriotating {
+    padding: 0.5rem 2rem;
+    border-radius: 10px;
+    background-color: #b83230;
+    color: white;
+
+    &:hover {
+      background-color: #b83230;
+      color: white;
+    }
+  }
+
+  .ui.button.no-trend {
+    padding: 0.5rem 2rem;
+    border-radius: 10px;
+    background-color: #bcbec0;
+    color: black;
+
+    &:hover {
+      background-color: #bcbec0;
+      color: black;
+    }
+  }
+
+  .ui.button.stable {
+    padding: 0.5rem 2rem;
+    border-radius: 10px;
+    background-color: #ff9933;
+    color: black;
+
+    &:hover {
+      background-color: #ff9933;
+      color: black;
+    }
+  }
+}