feat: title and description added to accordion block (#766)

* feat: accordion block title and description * chore: i18n * chore: readme.md * chore: release.md * fix: removed important and draft code
RedTurtle · Sep 17, 2024 · 7915b92 · 7915b92
1 parent d3ff444
commit 7915b92
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 2 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -49,7 +49,7 @@
 
 ### Novità
 
-- ...
+- Aggiunti campi per l'inserimento del titolo e della descrizione nel blocco accordion
 
 ### Fix
 

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -232,6 +232,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -626,6 +627,7 @@ msgstr ""
 msgid "Thank you."
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -217,6 +217,7 @@ msgstr "Between {start} and {end}"
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -611,6 +612,7 @@ msgstr ""
 msgid "Thank you."
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -226,6 +226,7 @@ msgstr ""
 msgid "Description"
 msgstr "Descripción..."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -620,6 +621,7 @@ msgstr "Texto..."
 msgid "Thank you."
 msgstr "Gracias."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -234,6 +234,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -628,6 +629,7 @@ msgstr ""
 msgid "Thank you."
 msgstr "Merci."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -217,6 +217,7 @@ msgstr "Dal {start} al {end}"
 msgid "Description"
 msgstr "Descrizione"
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -611,6 +612,7 @@ msgstr "Testo..."
 msgid "Thank you."
 msgstr "Grazie."
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-09-05T11:07:39.844Z\n"
+"POT-Creation-Date: 2024-09-10T13:47:23.738Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -219,6 +219,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock
 # defaultMessage: Descrizione...
@@ -613,6 +614,7 @@ msgstr ""
 msgid "Thank you."
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Accordion/Edit
 #: components/ItaliaTheme/Blocks/ContactsBlock/Edit
 #: components/ItaliaTheme/Blocks/IconBlocks/Edit
 #: components/ItaliaTheme/Blocks/VideoGallery/Edit

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
@@ -12,6 +12,7 @@ import {
   SubblocksEdit,
   SubblocksWrapper,
 } from 'volto-subblocks';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import { SidebarPortal } from '@plone/volto/components';
 import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
@@ -24,6 +25,14 @@ const messages = defineMessages({
     id: 'Add accordion item',
     defaultMessage: 'Aggiungi elemento',
   },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Titolo...',
+  },
+  description: {
+    id: 'Description placeholder',
+    defaultMessage: 'Descrizione...',
+  },
 });
 /**
  * Edit Accordion block class.
@@ -107,6 +116,56 @@ class Edit extends SubblocksEdit {
         <div className="full-width section section-muted section-inset-shadow py-5 is-edit-mode">
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
+              <div className="block-header">
+                <div className="title">
+                  <TextEditorWidget
+                    {...this.props}
+                    showToolbar={false}
+                    data={this.props.data}
+                    key={'title'}
+                    fieldName="title"
+                    selected={this.state.selectedField === 'title'}
+                    setSelected={(f) => {
+                      this.setState({
+                        selectedField: f,
+                        subIndexSelected: -1,
+                      });
+                    }}
+                    placeholder={this.props.intl.formatMessage(messages.title)}
+                    focusNextField={() => {
+                      this.setState({ selectedField: 'description' });
+                    }}
+                  />
+                </div>
+
+                <div className="description">
+                  <TextEditorWidget
+                    {...this.props}
+                    showToolbar={true}
+                    data={this.props.data}
+                    fieldName="description"
+                    selected={this.state.selectedField === 'description'}
+                    setSelected={(f) => {
+                      this.setState({
+                        selectedField: f,
+                        subIndexSelected: -1,
+                      });
+                    }}
+                    placeholder={this.props.intl.formatMessage(
+                      messages.description,
+                    )}
+                    focusPrevField={() => {
+                      this.setState({ selectedField: 'title' });
+                    }}
+                    focusNextField={() => {
+                      this.setState({
+                        selectedField: null,
+                        subIndexSelected: 0,
+                      });
+                    }}
+                  />
+                </div>
+              </div>
               <CardBody tag="div">
                 <SubblocksWrapper node={this.node}>
                   {this.state.subblocks.map((subblock, subindex) => (

diff --git a/src/components/ItaliaTheme/Blocks/Accordion/View.jsx b/src/components/ItaliaTheme/Blocks/Accordion/View.jsx
@@ -6,6 +6,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import ViewBlock from './Block/ViewBlock';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import { Container, Card, CardBody } from 'design-react-kit';
 
 /**
@@ -25,6 +26,14 @@ const AccordionView = ({ data, block }) => {
         <div className="full-width section section-muted section-inset-shadow py-5">
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
+              <div className="block-header">
+                {data.title && <div className="title">{data.title}</div>}
+                {data.description && (
+                  <div className="description">
+                    <TextBlockView data={{ value: data.description }} />
+                  </div>
+                )}
+              </div>
               <CardBody tag="div">
                 {data.subblocks.map((subblock, index) => (
                   <ViewBlock

diff --git a/src/theme/ItaliaTheme/Blocks/_accordion.scss b/src/theme/ItaliaTheme/Blocks/_accordion.scss
@@ -3,6 +3,11 @@ $accordion-icon-color: #7fb2e5;
 .block.accordion {
   .section.full-width {
     height: auto;
+    .title {
+      font-size: 2.35rem;
+      font-weight: bold;
+      line-height: 3rem;
+    }
 
     @media (max-width: #{map-get($grid-breakpoints, md)}) {
       padding: 0.5em;