Merge pull request #32 from eea/develop

Release

Author: avoinea

CHANGELOG.md

@@ -4,23 +4,24 @@ 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).
 
+### [6.0.0](https://github.com/eea/volto-block-toc/compare/5.0.2...6.0.0) - 26 August 2024
+
+#### :rocket: New Features
+
+- feat: Add side menu variation - refs #272384 [dobri1408 - [`595a210`](https://github.com/eea/volto-block-toc/commit/595a21030a74ffa8a8dd833b6c3d1b83e4d35b33)]
+
+#### :hammer_and_wrench: Others
+
+- Release 6.0.0 [Alin Voinea - [`2dbf58c`](https://github.com/eea/volto-block-toc/commit/2dbf58c3a8f4aa02a114d6e2cfb1b25dcedc081f)]
 ### [5.0.2](https://github.com/eea/volto-block-toc/compare/5.0.1...5.0.2) - 13 May 2024
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`e421222`](https://github.com/eea/volto-block-toc/commit/e42122215c6ff6e1502632ffa990add919ddc1f7)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`29640f2`](https://github.com/eea/volto-block-toc/commit/29640f237937e12974f289c944ce51a3900db0df)]
 ### [5.0.1](https://github.com/eea/volto-block-toc/compare/5.0.0...5.0.1) - 22 April 2024
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`fa93184`](https://github.com/eea/volto-block-toc/commit/fa93184e49a35af45223aca195d568ba09fdff54)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`12ce383`](https://github.com/eea/volto-block-toc/commit/12ce38371021797c3a13135da6680f9222bc4b04)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`a79ed2d`](https://github.com/eea/volto-block-toc/commit/a79ed2d321c8e1551c4fd6ad6d5a07eb15d2223a)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`cd4e095`](https://github.com/eea/volto-block-toc/commit/cd4e0954417c86348567edffaa7a7cc647291612)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`e9ad6fd`](https://github.com/eea/volto-block-toc/commit/e9ad6fd4a78c3ecd23c8ba5486d4d1a2e69ba880)]
 - package.json [alin - [`30a7dbe`](https://github.com/eea/volto-block-toc/commit/30a7dbec2682f17c01d9cefd5f76e7e456fc91f3)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`0fde850`](https://github.com/eea/volto-block-toc/commit/0fde8502587b7a8a632ae2cd98c4ce9b61206ab3)]
 ## [5.0.0](https://github.com/eea/volto-block-toc/compare/4.0.0...5.0.0) - 17 April 2024
 
 #### :rocket: New Features
@@ -46,7 +47,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - include volto-anchors as dependency and update import of github-slugger [Teodor - [`b2cc084`](https://github.com/eea/volto-block-toc/commit/b2cc084e515882852e5702e670aa045f4ef429c4)]
 - fix horizontal menu variation [Teodor - [`9d339f8`](https://github.com/eea/volto-block-toc/commit/9d339f88f7061c62274a022b6ff063fdda07e6f5)]
 - fix table of contents default renderer as per volto 17 fix [Teodor - [`be8de3b`](https://github.com/eea/volto-block-toc/commit/be8de3bdbc20889d20f64fa0a839513df7d70bcb)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`561d863`](https://github.com/eea/volto-block-toc/commit/561d863557380f92832f9f38dfeaf18dedad78f1)]
 ### [3.0.8](https://github.com/eea/volto-block-toc/compare/3.0.7...3.0.8) - 19 February 2024
 
 #### :house: Internal changes
@@ -76,7 +76,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`ede85d4`](https://github.com/eea/volto-block-toc/commit/ede85d4ba7888001add18888d24f8c712af68bef)]
 - test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`8e48d6f`](https://github.com/eea/volto-block-toc/commit/8e48d6fd45f0ea2e91b64494cbc029152632bcee)]
 - test: Fix test config, coverage Refs #253277 [valentinab25 - [`4f80fe5`](https://github.com/eea/volto-block-toc/commit/4f80fe53f3fc31ef7f7c15955d6df412cfb139d7)]
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`d10a982`](https://github.com/eea/volto-block-toc/commit/d10a982c3173080bfcfc29e7a7367b223fa10258)]
 ### [3.0.5](https://github.com/eea/volto-block-toc/compare/3.0.4...3.0.5) - 22 May 2023
 
 #### :hammer_and_wrench: Others
@@ -102,14 +101,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Update Jenkinsfile [Claudia Ifrim - [`96e0797`](https://github.com/eea/volto-block-toc/commit/96e079736684c7b0fa8e7abaa0486f8b50b31b7c)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`66e274d`](https://github.com/eea/volto-block-toc/commit/66e274da2d5945e78c00c0e1b7a42b8a08966cbc)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`91a49d2`](https://github.com/eea/volto-block-toc/commit/91a49d2712097854d7ba75ffc361f757c5fd2175)]
 - update(jest): add @plone/volto-slate resolver refs- #153447 [nileshgulia1 - [`c98050d`](https://github.com/eea/volto-block-toc/commit/c98050d7aa3cc48f658a5d498e5232bd7b4b0ae7)]
 ### [3.0.1](https://github.com/eea/volto-block-toc/compare/3.0.0...3.0.1) - 30 June 2022
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`b3c16c6`](https://github.com/eea/volto-block-toc/commit/b3c16c6a31c38a44451b009af271f17244edbc1f)]
 ## [3.0.0](https://github.com/eea/volto-block-toc/compare/2.3.0...3.0.0) - 17 May 2022
 
 #### :hammer_and_wrench: Others
@@ -123,27 +119,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 2.3.0 [Alin Voinea - [`693f4bb`](https://github.com/eea/volto-block-toc/commit/693f4bbb13068e0b7c22353de5a451414e4d91a0)]
 - remove uneeded code [Miu Razvan - [`b554883`](https://github.com/eea/volto-block-toc/commit/b554883f393936e7a1e8e28ec2fcdc954982a4e7)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`9961973`](https://github.com/eea/volto-block-toc/commit/996197359b91c0769f1fd8a1891b55063dd6c1e5)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`a3f1404`](https://github.com/eea/volto-block-toc/commit/a3f1404ec40f9bde18495e0e02eb23609deca78a)]
 ### [2.2.5](https://github.com/eea/volto-block-toc/compare/2.2.4...2.2.5) - 3 January 2022
 
 ### [2.2.4](https://github.com/eea/volto-block-toc/compare/2.2.3...2.2.4) - 18 December 2021
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`1f07faa`](https://github.com/eea/volto-block-toc/commit/1f07faa181ece91cc97fc4087fc0a5bdd83292dc)]
 ### [2.2.3](https://github.com/eea/volto-block-toc/compare/2.2.2...2.2.3) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`6973d84`](https://github.com/eea/volto-block-toc/commit/6973d84e3fe20548be2cb7903d6cb23e93610c0d)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`bf8be2e`](https://github.com/eea/volto-block-toc/commit/bf8be2e0027002150a52b187e08f56b2f0905e54)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`c47d850`](https://github.com/eea/volto-block-toc/commit/c47d850e4feccb6c42ccb0e5463f32af62fed95b)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`5565395`](https://github.com/eea/volto-block-toc/commit/5565395a8b90cd5fd8650a24d0931b84306c0704)]
-- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`96d69df`](https://github.com/eea/volto-block-toc/commit/96d69dfc20e738c0f9af809a684dcb5b6c33cdf7)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`9509446`](https://github.com/eea/volto-block-toc/commit/950944640e317ac2e375311663a150d0e0166dd8)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`1c96364`](https://github.com/eea/volto-block-toc/commit/1c963640148edbb6978ab518dfa2743044234c91)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`421c23c`](https://github.com/eea/volto-block-toc/commit/421c23cb1ad5add8dc74796d8e93b8c5f88524d1)]
 ### [2.2.2](https://github.com/eea/volto-block-toc/compare/2.2.1...2.2.2) - 27 May 2021
 
 ### [2.2.1](https://github.com/eea/volto-block-toc/compare/2.2.0...2.2.1) - 14 May 2021
@@ -172,7 +158,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.0.0 [Alin Voinea - [`5501bf6`](https://github.com/eea/volto-block-toc/commit/5501bf6e97cd6dae5af9735bea0ab28dee10dd30)]
 - Release 1.0.0 [Alin Voinea - [`528b2e6`](https://github.com/eea/volto-block-toc/commit/528b2e69303482bdefd240b3d6d95e1690e43a5d)]
-- yarn prettier [Alin Voinea - [`18f812b`](https://github.com/eea/volto-block-toc/commit/18f812b776964062054bf6f77710c6a8ece1cc8f)]
 ### 0.1.0 - 21 October 2020
 
 #### :hammer_and_wrench: Others

cypress/e2e/01-toc-basics.cy.js

@@ -194,4 +194,54 @@ describe('Block Tests: Toc', () => {
     cy.contains('Volto Toc');
     cy.get('.table-of-contents  .dropdown').contains('More').click();
   });
+
+  it('Add Block: add side menu TOC', () => {
+    // Change page title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('Volto Toc');
+    cy.getSlate().click();
+
+    // Add TOC block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get(".blocks-chooser .ui.form .field.searchbox input[type='text']").type(
+      'table of contents',
+    );
+    cy.get('.button.toc').click();
+
+    cy.get('#sidebar-properties .form .react-select-container').first().click();
+    cy.contains('Side Menu').click();
+
+    // Add headings
+    cy.get('.ui.drag.block.inner.slate').click().type('Title 1').click();
+    cy.get('.ui.drag.block.inner.slate span span span').setSelection('Title 1');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').click().type('{enter}');
+
+    cy.get('.ui.drag.block.inner.slate').eq(1).click().type('Title 2').click();
+    cy.get('.ui.drag.block.inner.slate span span span')
+      .eq(1)
+      .setSelection('Title 2');
+    cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
+      force: true,
+    });
+    cy.get('.ui.drag.block.inner.slate').eq(1).click().type('{enter}');
+
+    // Save page
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // Check if the page contains the TOC and the headings
+    cy.contains('Volto Toc');
+    cy.contains('Title 1');
+    cy.contains('Title 2');
+    cy.get('a[href="#title-1"]').click();
+    cy.get('a[href="#title-2"]').click();
+    cy.get('h2[id="title-1"]').contains('Title 1');
+    cy.get('h2[id="title-2"]').contains('Title 2');
+    cy.get('.eea-side-menu').get('summary').click();
+    cy.get('.eea-side-menu');
+    cy.get('.eea-side-menu details').should('not.have.attr', 'open');
+  });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-block-toc",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "volto-block-toc: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/Block/TocView.jsx

@@ -14,6 +14,7 @@ import {
   getBlocksFieldname,
   getBlocksLayoutFieldname,
 } from '@plone/volto/helpers';
+import withDeviceSize from '@eeacms/volto-block-toc/hocs/withDeviceSize';
 
 export const getBlocksTocEntries = (properties, tocData) => {
   const blocksFieldName = getBlocksFieldname(properties);
@@ -132,7 +133,7 @@ const View = (props) => {
   const Renderer = variation?.view;
 
   return (
-    <div className={cx('table-of-contents', variation?.id)}>
+    <div className={cx('table-of-contents', variation?.id, props.device)}>
       {props.mode === 'edit' && !data.title && !tocEntries.length && (
         <Message>Table of content</Message>
       )}
@@ -155,4 +156,4 @@ View.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
 };
 
-export default injectIntl(withBlockExtensions(View));
+export default injectIntl(withBlockExtensions(withDeviceSize(View)));

src/Block/variations/SideMenu.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Slugger from 'github-slugger';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import { Icon } from '@plone/volto/components';
+
+import downIcon from '@plone/volto/icons/down-key.svg';
+import upIcon from '@plone/volto/icons/up-key.svg';
+
+import withEEASideMenu from '@eeacms/volto-block-toc/hocs/withEEASideMenu';
+import { normalizeString } from './helpers';
+import './less/side-menu.less';
+
+const RenderMenuItems = ({ items }) => (
+  <>
+    {items.map((item, index) => {
+      const { title, override_toc, plaintext, items: subItems } = item;
+      const slug = override_toc
+        ? Slugger.slug(normalizeString(plaintext))
+        : Slugger.slug(normalizeString(title));
+      return (
+        <React.Fragment key={index}>
+          <li className="toc-menu-list-item">
+            <AnchorLink href={`#${slug}`} className="toc-menu-list-title">
+              {title}
+            </AnchorLink>
+          </li>
+          {subItems && subItems.length > 0 && (
+            <RenderMenuItems items={subItems} />
+          )}
+        </React.Fragment>
+      );
+    })}
+  </>
+);
+
+const RenderTocEntries = ({
+  tocEntries,
+  title,
+  defaultOpen,
+  isMenuOpenOnOutsideClick,
+}) => {
+  const [isNavOpen, setIsNavOpen] = React.useState(!defaultOpen);
+
+  React.useEffect(() => {
+    if (isMenuOpenOnOutsideClick === false) setIsNavOpen(false);
+  }, [isMenuOpenOnOutsideClick]);
+
+  return (
+    <details open={isNavOpen}>
+      {/* eslint-disable-next-line */}
+      <summary
+        onClick={(e) => {
+          e.preventDefault();
+          setIsNavOpen(!isNavOpen);
+        }}
+        onKeyDown={(e) => {
+          if (e.keyCode === 13 || e.keyCode === 32) {
+            e.preventDefault();
+            setIsNavOpen(!isNavOpen);
+          }
+        }}
+        className="context-navigation-header accordion-header"
+      >
+        <span className="menuTitle">{title || ''}</span>
+        <Icon name={isNavOpen ? upIcon : downIcon} size="40px" />
+      </summary>
+      <nav className="toc-menu">
+        <ol className="toc-menu-list">
+          <RenderMenuItems items={tocEntries} />
+        </ol>
+      </nav>
+    </details>
+  );
+};
+
+const View = (props) => {
+  const { data, tocEntries, device, isMenuOpenOnOutsideClick } = props;
+  return (
+    <RenderTocEntries
+      defaultOpen={device === 'mobile' || device === 'tablet'}
+      tocEntries={tocEntries}
+      isMenuOpenOnOutsideClick={isMenuOpenOnOutsideClick}
+      title={data?.title}
+    />
+  );
+};
+
+View.propTypes = {
+  data: PropTypes.object.isRequired,
+  tocEntries: PropTypes.array,
+  mode: PropTypes.string,
+};
+
+export default withEEASideMenu(View);

src/Block/variations/index.js

@@ -1,6 +1,7 @@
 import AccordionMenu from './AccordionMenu';
 import DefaultTocRenderer from './DefaultTocRenderer';
 import HorizontalMenu from './HorizontalMenu';
+import SideMenu from './SideMenu';
 
 const ToCVariations = [
   {
@@ -19,6 +20,11 @@ const ToCVariations = [
     title: 'Accordion Menu',
     view: AccordionMenu,
   },
+  {
+    id: 'eea-side-menu',
+    title: 'Side Menu',
+    view: SideMenu,
+  },
 ];
 
 export default ToCVariations;

src/Block/variations/less/side-menu.less

@@ -0,0 +1,55 @@
+@import (multiple, reference, optional) '../../../../theme.config';
+
+@secondaryColor: #007b6c;
+@darkTextColor: #3d5265;
+
+.eea-side-menu {
+  .icon {
+    font-size: 1.4rem !important;
+  }
+
+  .content {
+    --bg-color: transparent;
+    padding: 0 !important;
+  }
+
+  .accordion.ui.fluid {
+    padding-top: 0;
+    margin-top: 0;
+    background-color: white;
+  }
+
+  .menuTitle {
+    font-size: 1.2rem;
+    font-weight: bold;
+  }
+
+  .toc-menu {
+    background-color: white;
+  }
+
+  .toc-menu-list {
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .toc-menu-list-title {
+    display: block;
+    padding: 0.75rem 1rem;
+    border-bottom: 2px solid @darkTextColor;
+    color: @darkTextColor;
+    font-weight: bold;
+  }
+
+  .toc-menu-list-item:hover {
+    .toc-menu-list-title {
+      color: @secondaryColor;
+      font-weight: bold;
+    }
+
+    .menuTitle {
+      color: @darkTextColor;
+    }
+  }
+}