feat(accordion): add icon configuration for size and type

CHANGELOG.md

@@ -4,9 +4,18 @@ 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).
 
+#### [3.4.14](https://github.com/eea/volto-accordion-block/compare/3.4.13...3.4.14)
+
+- Update style on edit mode [`212eda4`](https://github.com/eea/volto-accordion-block/commit/212eda4b49852388c1b486abc52f991cf2fab3fb)
+- feat(accordion): add semantic icon configuration [`438b91c`](https://github.com/eea/volto-accordion-block/commit/438b91cc4d75b24bb4093be0e9b5d3b314b4bdb5)
+- feat(accordion): add icon 'size' configuration [`7f32d54`](https://github.com/eea/volto-accordion-block/commit/7f32d5403abe8be295d8b698cab3df83939b85e0)
+
 #### [3.4.13](https://github.com/eea/volto-accordion-block/compare/3.4.12...3.4.13)
 
+> 18 January 2022
+
 - Initialize empty active index [`#43`](https://github.com/eea/volto-accordion-block/pull/43)
+- Merge pull request #44 from eea/develop [`2006fdd`](https://github.com/eea/volto-accordion-block/commit/2006fdd81589a1dafe381c85e112a75b71632873)
 - initialize empty activeIndex [`0105982`](https://github.com/eea/volto-accordion-block/commit/01059821035e2006ab5347597646deabc8762fa3)
 
 #### [3.4.12](https://github.com/eea/volto-accordion-block/compare/3.4.11...3.4.12)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "3.4.13",
+  "version": "3.4.14",
   "description": "volto-accordion-block: Volto accordion block",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/manage/Blocks/Accordion/AccordionEdit.jsx

@@ -1,8 +1,8 @@
-import { Icon } from '@plone/volto/components';
+import { Icon as VoltoIcon } from '@plone/volto/components';
 import cx from 'classnames';
 import React from 'react';
 import AnimateHeight from 'react-animate-height';
-import { Accordion, Input } from 'semantic-ui-react';
+import { Accordion, Input, Icon } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 
 export default (props) => {
@@ -16,7 +16,8 @@ export default (props) => {
     index,
   } = props;
   const [activeIndex, setActiveIndex] = React.useState([0]);
-  const { titleIcons } = config.blocks.blocksConfig.accordion;
+  const accordionConfig = config.blocks.blocksConfig.accordion;
+  const { titleIcons } = accordionConfig;
 
   const handleClick = (e, itemProps) => {
     const { index } = itemProps;
@@ -58,23 +59,25 @@ export default (props) => {
             'align-arrow-right': props?.data?.right_arrows,
           })}
         >
-          {isExclusive(index) ? (
-            <Icon
+          {accordionConfig.semanticIcon ? (
+            <Icon name={accordionConfig.semanticIcon} />
+          ) : isExclusive(index) ? (
+            <VoltoIcon
               name={
                 props?.data?.right_arrows
                   ? titleIcons.opened.rightPosition
                   : titleIcons.opened.leftPosition
               }
-              size="24px"
+              size={titleIcons.size}
             />
           ) : (
-            <Icon
-              size="24px"
+            <VoltoIcon
               name={
                 props?.data?.right_arrows
                   ? titleIcons.closed.rightPosition
                   : titleIcons.closed.leftPosition
               }
+              size={titleIcons.size}
             />
           )}
           {!data.readOnlyTitles ? (

src/components/manage/Blocks/Accordion/View.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { RenderBlocks } from '@plone/volto/components';
 import { getPanels, accordionBlockHasValue } from './util';
-import { Accordion } from 'semantic-ui-react';
+import { Accordion, Icon } from 'semantic-ui-react';
 import { withBlockExtensions } from '@plone/volto/helpers';
 
 import cx from 'classnames';
-import { Icon } from '@plone/volto/components';
+import { Icon as VoltoIcon } from '@plone/volto/components';
 import AnimateHeight from 'react-animate-height';
 import config from '@plone/volto/registry';
 import './editor.less';
@@ -15,7 +15,8 @@ const View = (props) => {
   const panels = getPanels(data.data);
   const metadata = props.metadata || props.properties;
   const [activeIndex, setActiveIndex] = React.useState([]);
-  const { titleIcons } = config.blocks.blocksConfig.accordion;
+  const accordionConfig = config.blocks.blocksConfig.accordion;
+  const { titleIcons } = accordionConfig;
   const handleClick = (e, itemProps) => {
     const { index } = itemProps;
     if (data.non_exclusive) {
@@ -59,23 +60,25 @@ const View = (props) => {
                   'align-arrow-right': props?.data?.right_arrows,
                 })}
               >
-                {isExclusive(index) ? (
-                  <Icon
+                {accordionConfig.semanticIcon ? (
+                  <Icon name={accordionConfig.semanticIcon} />
+                ) : isExclusive(index) ? (
+                  <VoltoIcon
                     name={
                       props?.data?.right_arrows
                         ? titleIcons.opened.rightPosition
                         : titleIcons.opened.leftPosition
                     }
-                    size="24px"
+                    size={titleIcons.size}
                   />
                 ) : (
-                  <Icon
+                  <VoltoIcon
                     name={
                       props?.data?.right_arrows
                         ? titleIcons.closed.rightPosition
                         : titleIcons.closed.leftPosition
                     }
-                    size="24px"
+                    size={titleIcons.size}
                   />
                 )}
                 <span>{panel?.title}</span>

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

@@ -47,6 +47,14 @@
     padding-top: 1rem;
     padding-bottom: 0.1rem;
     margin: 0;
+
+    .ui.styled.accordion {
+      .active.title {
+        input {
+          color: #fff !important;
+        }
+      }
+    }
   }
 
   .blocks-form {
@@ -84,16 +92,16 @@
 
 // View
 .accordion-block {
-  .accordion {
+  .ui.accordion {
     margin-top: 0 !important;
     clear: both; /* ensure floated images from content area don't spill over next accordion title */
   }
 
   .accordion-title {
     text-transform: none !important;
 
-    &.align-arrow-left {
-      padding-left: 0 !important;
+    i.icon {
+      order: unset !important;
     }
   }
 
@@ -150,10 +158,6 @@
   .block.selected {
     z-index: 2;
   }
-
-  .content.active {
-    padding: 9px !important;
-  }
 }
 
 @media print {

src/index.js

@@ -46,6 +46,7 @@ const applyConfig = (config) => {
     titleIcons: {
       closed: { leftPosition: rightSVG, rightPosition: leftSVG },
       opened: { leftPosition: downSVG, rightPosition: downSVG },
+      size: '24px',
     },
     view: AccordionBlockView,
     edit: AccordionBlockEdit,