Merge pull request #9 from eea/develop

Refactor counter to use CSS class instead of inline style

CHANGELOG.md

@@ -4,9 +4,17 @@ 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).
 
+#### [4.3.0](https://github.com/eea/volto-group-block/compare/4.2.3...4.3.0)
+
+- Show help icon only if block instructions differ from section instructions [`a4ca4e5`](https://github.com/eea/volto-group-block/commit/a4ca4e58968dcfb947072a255c8f797df7977852)
+- [JENKINS] - Fix stylelint [`c897993`](https://github.com/eea/volto-group-block/commit/c8979933fda9366c8669aa2c494e7442e2ca4bae)
+- Refactor counter to use CSS class instead of inline style [`d676d7d`](https://github.com/eea/volto-group-block/commit/d676d7d2fa50eb4c16ab4d332a728ab9a8062c3a)
+
 #### [4.2.3](https://github.com/eea/volto-group-block/compare/4.2.2...4.2.3)
 
-- Cypress coverage [`8b53111`](https://github.com/eea/volto-group-block/commit/8b53111748b92de5943639f06c915e59951106f4)
+> 27 May 2021
+
+- Cypress coverage [`#8`](https://github.com/eea/volto-group-block/pull/8)
 
 #### [4.2.2](https://github.com/eea/volto-group-block/compare/4.2.1...4.2.2)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-group-block",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "volto-group-block: Volto block to be used to group other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/manage/Blocks/Group/Edit.jsx

@@ -14,6 +14,7 @@ import { Button, Segment } from 'semantic-ui-react';
 import EditBlockWrapper from './EditBlockWrapper';
 import EditSchema from './EditSchema';
 import helpSVG from '@plone/volto/icons/help.svg';
+import cx from 'classnames';
 import './editor.less';
 
 const Edit = (props) => {
@@ -86,21 +87,16 @@ const Edit = (props) => {
   };
   showCharCounter();
 
-  const colors = { ok: '#CCC', warning: 'darkorange', danger: 'crimson' };
-  const counterStyle = {
-    color:
-      charCount < Math.ceil(props.data.maxChars / 1.05)
-        ? colors.ok
-        : charCount < props.data.maxChars
-        ? colors.warning
-        : colors.danger,
-    textAlign: 'end',
-  };
+  const counterClass =
+    charCount < Math.ceil(props.data.maxChars / 1.05)
+      ? 'info'
+      : charCount < props.data.maxChars
+      ? 'warning'
+      : 'danger';
 
   const counterComponent = props.data.maxChars ? (
     <p
-      style={counterStyle}
-      className="counter"
+      className={cx('counter', counterClass)}
       onClick={() => {
         setSelectedBlock();
         props.setSidebarTab(1);

src/components/manage/Blocks/Group/EditBlockWrapper.jsx

@@ -86,6 +86,12 @@ class EditBlockWrapper extends React.Component {
       ? data.required
       : includes(config.blocks.requiredBlocks, type);
 
+    // Get editing instructions from block settings or props
+    let instructions = data?.instructions?.data || data?.instructions;
+    if (!instructions || instructions === '<p><br/></p>') {
+      instructions = '';
+    }
+
     return (
       <div ref={this.blockNode}>
         <div
@@ -104,7 +110,7 @@ class EditBlockWrapper extends React.Component {
           )}
           {visible && (
             <div className="block-toolbar">
-              {extraControls}
+              {instructions ? extraControls : ''}
 
               {!disabled && (
                 <>

src/components/manage/Blocks/Group/editor.less

@@ -50,6 +50,19 @@
     font-size: 85%;
     grid-gap: 0.5em;
     grid-template-columns: 98% auto;
+    text-align: end;
+
+    &.info {
+      color: #ccc;
+    }
+
+    &.danger {
+      color: crimson;
+    }
+
+    &.warning {
+      color: darkorange;
+    }
   }
 
   .blocks-form {