Merge pull request #36 from eea/develop

Develop

CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+### [5.4.4](https://github.com/eea/volto-hero-block/compare/5.4.3...5.4.4) - 19 October 2023
+
+#### :house: Internal changes
+
+- chore: husky, lint-staged use fixed versions [valentinab25 - [`f220c0b`](https://github.com/eea/volto-hero-block/commit/f220c0b8fe543d504e532d539a1d606df3e94265)]
+
+#### :hammer_and_wrench: Others
+
+- test: add cypress test for hero block and fix error in DX Layout - refs #254894 [Crețu Mihaela - [`e4c9e3f`](https://github.com/eea/volto-hero-block/commit/e4c9e3f1d579826de25fa3ca0b829a1f8a65a744)]
+- * docs: add demo gif - refs #253277 [ana-oprea - [`ac59025`](https://github.com/eea/volto-hero-block/commit/ac59025036d2b96fe5fee76abbf15e9f3ef151b9)]
 ### [5.4.3](https://github.com/eea/volto-hero-block/compare/5.4.2...5.4.3) - 13 October 2023
 
 #### :house: Internal changes

README.md

@@ -14,12 +14,11 @@
 [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-hero-block-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-hero-block-develop)
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-hero-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-hero-block-develop)
 
-
 Enhanced Hero Block [Volto](https://github.com/plone/volto) add-on
 
 ## Features
 
-![Hero Block](https://github.com/eea/volto-hero-block/raw/master/docs/volto-hero.gif)
+![Hero Block](https://raw.githubusercontent.com/eea/volto-hero-block/raw/master/docs/volto-hero-block.gif "Hero Block")
 
 ## Upgrade
 
@@ -48,19 +47,19 @@ Go to http://localhost:3000
 
 1. Start Volto frontend
 
-* If you already have a volto project, just update `package.json`:
+- If you already have a volto project, just update `package.json`:
 
-   ```JSON
-   "addons": [
-       "@eeacms/volto-hero-block"
-   ],
+  ```JSON
+  "addons": [
+      "@eeacms/volto-hero-block"
+  ],
 
    "dependencies": {
        "@eeacms/volto-hero-block": "*"
    }
    ```
 
-* If not, create one:
+- If not, create one:
 
    ```
    npm install -g yo @plone/generator-volto

cypress/e2e/02-dexterity-controlpanel-layout.cy.js

@@ -0,0 +1,83 @@
+import { slateLayoutBeforeEach, slateLayoutAfterEach } from '../support/e2e';
+
+describe('ControlPanel: Dexterity Content-Types Layout', () => {
+  beforeEach(slateLayoutBeforeEach);
+  afterEach(slateLayoutAfterEach);
+
+  it('Edit Blocks Layout for Book', () => {
+    cy.visit('/controlpanel/dexterity-types');
+    cy.waitForResourceToLoad('@navigation');
+    cy.waitForResourceToLoad('@breadcrumbs');
+    cy.waitForResourceToLoad('@actions');
+    cy.waitForResourceToLoad('@types');
+
+    cy.get('a[href="/controlpanel/dexterity-types/book"]').should(
+      'have.text',
+      'book',
+    );
+
+    cy.visit('/controlpanel/dexterity-types/book/layout');
+    cy.get('#page-controlpanel-layout').contains(
+      'Can not edit Layout for book',
+    );
+    cy.get('#page-controlpanel-layout button').click();
+
+    // Wait a bit for draftjs to load, without this the title block
+    // custom placeholder is missing and cypress gives a timeout error
+    cy.wait(1000);
+    cy.get('input[id="field-placeholder"]').type('Book title');
+    cy.get('label[for="field-required"]').click();
+    cy.get('label[for="field-fixed"]').click();
+
+    cy.getSlate().click();
+
+    cy.get('.ui.basic.icon.button.block-add-button:visible').click();
+    cy.get('.blocks-chooser .title').contains('Common').click();
+    cy.get('.content.active.common .button.hero')
+      .contains('Hero')
+      .click({ force: true });
+
+    cy.get('#toolbar-save').click();
+
+    cy.visit('/cypress');
+    cy.waitForResourceToLoad('@navigation');
+    cy.waitForResourceToLoad('@breadcrumbs');
+    cy.waitForResourceToLoad('@actions');
+    cy.waitForResourceToLoad('@types');
+
+    cy.get('button[class="add"]').click();
+    cy.get('#toolbar-add-book').click();
+    cy.get('.block.title').contains('Book title');
+    cy.get('.block.hero div[role="presentation"]').click();
+
+    // Add text and button
+    cy.get('.hero-block-text div[role="textbox"]')
+      .click()
+      .type('My hero block');
+    cy.get('label[for="field-fullWidth"]').click();
+    cy.get('label[for="field-fullHeight"]').click();
+    cy.get('label[for="field-quoted"]').click();
+    cy.get('label[for="field-spaced"]').click();
+    cy.get('.field-wrapper-buttonLabel #field-buttonLabel').click().type('Label')
+    cy.get('#field-buttonLabel').click().type('my button');
+    cy.get('.inline.field.field-attached-image .ui.input')
+      .click()
+      .type('https://eea.github.io/volto-eea-design-system/img/eea_icon.png');
+    cy.get(
+      '.inline.field.field-attached-image .ui.buttons .primary.button',
+    ).click();
+
+    // Change book title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My First Book');
+    cy.get('.documentFirstHeading').contains('My First Book');
+
+    cy.get('#toolbar-save').click();
+    cy.get('.documentFirstHeading').contains('My First Book');
+    // Check if the button exist
+    cy.get('.hero-block-meta .button').contains('my button');
+    cy.get('.hero-block-image-wrapper');
+    cy.get('.eea.hero-block.spaced.inverted.full-height');
+    cy.get('.hero-block-meta.text-left .button').contains('Label')
+  });
+});

cypress/support/e2e.js

@@ -61,6 +61,22 @@ export const slateJsonAfterEach = (contentType = 'slate') => {
   slateAfterEach();
 };
 
+export const slateLayoutBeforeEach = (contentType = 'book') => {
+  cy.autologin();
+  cy.addContentType(contentType);
+  cy.createContent({
+    contentType: 'Document',
+    contentId: 'cypress',
+    contentTitle: 'Cypress',
+  });
+};
+
+export const slateLayoutAfterEach = (contentType = 'book') => {
+  cy.autologin();
+  cy.removeContentType(contentType);
+  cy.removeContent('cypress');
+};
+
 export const getSelectedSlateEditor = () => {
   return cy.get('.slate-editor.selected [contenteditable=true]').click();
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -27,8 +27,8 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "husky": "*",
-    "lint-staged": "*",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
     "md5": "^2.3.0"
   },
   "lint-staged": {

src/components/Blocks/Hero/Edit.jsx

@@ -20,6 +20,7 @@ import {
   createSlateHeader,
   getFieldURL,
 } from '@eeacms/volto-hero-block/helpers';
+import { HeroBlockSchema } from './schema';
 import Copyright from './Copyright';
 import Hero from './Hero';
 
@@ -53,11 +54,10 @@ const Edit = (props) => {
   const { text, copyright, copyrightIcon, copyrightPosition } = data;
   const copyrightPrefix = config.blocks.blocksConfig.hero.copyrightPrefix || '';
   const schema = React.useMemo(() => {
-    const blockSchema = config.blocks.blocksConfig.hero.schema;
-    if (isFunction(blockSchema)) {
-      return blockSchema(props);
+    if (isFunction(HeroBlockSchema)) {
+      return HeroBlockSchema(props);
     }
-    return blockSchema;
+    return HeroBlockSchema;
   }, [props]);
 
   const withBlockProperties = React.useCallback(

src/components/Blocks/Hero/Edit.test.jsx

@@ -110,4 +110,22 @@ describe('Edit component', () => {
     fireEvent.focus(getByText('Add text...'));
     expect(onSelectBlock).toHaveBeenCalled();
   });
+
+  it('renders without copyrightPrefix', () => {
+    config.blocks = {
+      blocksConfig: {
+        hero: {
+          schema: () => ({
+            title: 'Hero',
+          }),
+        },
+      },
+    };
+    const onSelectBlock = jest.fn();
+    render(
+      <Provider store={store}>
+        <Edit onSelectBlock={onSelectBlock} />
+      </Provider>,
+    );
+  });
 });