Cleanup and headings for Accordion titles

src/components/index.js

@@ -1,6 +1,5 @@
-export AccordionBlockEdit from './manage/Blocks/Accordion/Edit';
-export AccordionBlockView from './manage/Blocks/Accordion/View';
-export AccordionBlockSchema from './manage/Blocks/Accordion/Schema';
-export PanelWidget from './manage/Widgets/PanelWidget';
+export AccordionBlockEdit from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/Edit';
+export AccordionBlockView from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/View';
+export PanelWidget from '@eeacms/volto-accordion-block/components/manage/Widgets/PanelWidget';
 
-export { options } from './manage/Blocks/Accordion/panels';
+export { options } from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/panels';

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

@@ -1,21 +1,14 @@
 import React from 'react';
 import { Accordion, Input } from 'semantic-ui-react';
 
-import { applyTitleSize } from '@eeacms/volto-accordion-block/components/manage/Styles';
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
 import rightSVG from '@plone/volto/icons/right-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
 import AnimateHeight from 'react-animate-height';
-export default ({
-  children,
-  coldata,
-  handleTitleChange,
-  colId,
-  column,
-  data,
-}) => {
+export default (props) => {
+  const { children, handleTitleChange, colId, column, data } = props;
   const [activeIndex, setActiveIndex] = React.useState(0);
   function handleClick(e, titleProps) {
     const { index } = titleProps;
@@ -24,8 +17,9 @@ export default ({
     setActiveIndex(newIndex);
   }
 
+  const CustomTag = `${data.as || 'div'}`;
   return (
-    <div>
+    <div className="block-accordion">
       <Accordion fluid styled>
         <React.Fragment>
           <Accordion.Title
@@ -34,22 +28,20 @@ export default ({
             onClick={handleClick}
             className="accordion-title"
           >
-            <div
+            <CustomTag
               className={cx('align-arrow-left', {
                 'align-arrow-right': data?.arrow_select,
               })}
             >
               {activeIndex === 0 ? (
-                <Icon name={downSVG} size="20px" />
+                <Icon name={downSVG} />
               ) : (
                 <Icon
                   name={rightSVG}
                   className={cx({ 'rotate-arrow': data?.arrow_select })}
-                  size="20px"
                 />
               )}
               <Input
-                {...applyTitleSize(data?.title_size || {})}
                 fluid
                 className="input-accordion-title"
                 transparent
@@ -58,21 +50,17 @@ export default ({
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => handleTitleChange(e, [colId, column])}
               />
-            </div>
+            </CustomTag>
           </Accordion.Title>
-          <div>
-            <Accordion.Content active={activeIndex === 0}>
-              <div style={{ margin: '1em' }}>
-                <AnimateHeight
-                  animateOpacity
-                  duration={500}
-                  height={activeIndex === 0 ? 'auto' : 0}
-                >
-                  {children}
-                </AnimateHeight>
-              </div>
-            </Accordion.Content>
-          </div>
+          <Accordion.Content active={activeIndex === 0}>
+            <AnimateHeight
+              animateOpacity
+              duration={500}
+              height={activeIndex === 0 ? 'auto' : 0}
+            >
+              {children}
+            </AnimateHeight>
+          </Accordion.Content>
         </React.Fragment>
       </Accordion>
     </div>

src/components/manage/Blocks/Accordion/Schema.js

@@ -1,80 +1,3 @@
-const Schema = {
-  title: 'Accordion block settings',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: [
-        'placeholder',
-        'instructions',
-        'allowedBlocks',
-        'as',
-        'required',
-        'fixed',
-        'disableNewBlocks',
-        'readOnly',
-      ],
-    },
-  ],
-  properties: {
-    allowedBlocks: {
-      title: 'Allowed blocks',
-      description: 'Allow only the following blocks types',
-      type: 'array',
-      items: {
-        choices: [],
-      },
-    },
-    placeholder: {
-      title: 'Helper text',
-      description:
-        'A short hint that describes the expected value within this block',
-      type: 'string',
-    },
-    instructions: {
-      title: 'Instructions',
-      description: 'Detailed expected value within this block',
-      type: 'string',
-      widget: 'richtext',
-    },
-    as: {
-      title: 'HTML5 element',
-      description: 'Select HTML5 element to be used for this block',
-      type: 'string',
-      factory: 'Choice',
-      default: 'div',
-      choices: [
-        ['div', 'div'],
-        ['section', 'section'],
-        ['article', 'article'],
-        ['aside', 'aside'],
-        ['details', 'details'],
-      ],
-    },
-    required: {
-      title: 'Required',
-      description: "Don't allow deletion of this block",
-      type: 'boolean',
-    },
-    fixed: {
-      title: 'Fixed position',
-      description: 'Disable drag & drop on this block',
-      type: 'boolean',
-    },
-    disableNewBlocks: {
-      title: 'Disable new blocks',
-      description: 'Disable creation of new blocks after this block',
-      type: 'boolean',
-    },
-    readOnly: {
-      title: 'Read-only',
-      description: 'Disable editing on this block',
-      type: 'boolean',
-    },
-  },
-  required: [],
-};
-
 export const AccordionSchema = {
   title: 'Accordion',
   fieldsets: [
@@ -103,7 +26,7 @@ export const accordionBlockSchema = () => ({
     {
       id: 'style',
       title: 'Style',
-      fields: ['title_size', 'arrow_select'],
+      fields: ['as', 'arrow_select'],
     },
   ],
   properties: {
@@ -116,18 +39,18 @@ export const accordionBlockSchema = () => ({
       type: 'panels',
       schema: AccordionSchema,
     },
-    title_size: {
+    as: {
       title: 'Title size',
       description: 'Accordion Title size',
       type: 'string',
       factory: 'Choice',
       default: 'h6',
       choices: [
-        ['30px', 'h2'],
-        ['24px', 'h3'],
-        ['20px', 'h4'],
-        ['18px', 'h5'],
-        ['16px', 'h6'],
+        ['h2', 'h2'],
+        ['h3', 'h3'],
+        ['h4', 'h4'],
+        ['h5', 'h5'],
+        ['h6', 'h6'],
       ],
     },
     arrow_select: {
@@ -138,5 +61,3 @@ export const accordionBlockSchema = () => ({
   },
   required: ['title'],
 });
-
-export default Schema;

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { RenderBlocks } from '@eeacms/volto-blocks-form/components';
 import { getColumns, GroupblockHasValue } from './util';
 import { Accordion } from 'semantic-ui-react';
-import { applyTitleSize } from '@eeacms/volto-accordion-block/components/manage/Styles';
 
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
@@ -13,20 +12,18 @@ import AnimateHeight from 'react-animate-height';
 import './editor.less';
 
 const View = (props) => {
-  const {
-    data: { data = {} },
-  } = props;
-  const columnList = getColumns(data);
+  const { data } = props;
+  const CustomTag = `${data.as || 'div'}`;
+  const columnList = getColumns(data.data);
   const metadata = props.metadata || props.properties;
   const [activeIndex, setActiveIndex] = React.useState(0);
   function handleClick(e, titleProps) {
     const { index } = titleProps;
     const newIndex = activeIndex === index ? -1 : index;
-
     setActiveIndex(newIndex);
   }
   return (
-    <div>
+    <div className="block-accordion">
       {columnList.map(([id, column], index) => {
         return GroupblockHasValue(column) ? (
           <Accordion fluid styled key={id}>
@@ -37,44 +34,37 @@ const View = (props) => {
                 onClick={handleClick}
                 className="accordion-title"
               >
-                <div
+                <CustomTag
                   className={cx('align-arrow-left', {
                     'align-arrow-right': props?.data?.arrow_select,
                   })}
                 >
                   {activeIndex === index ? (
-                    <Icon name={downSVG} size="20px" />
+                    <Icon name={downSVG} />
                   ) : (
                     <Icon
                       name={rightSVG}
-                      size="20px"
                       className={cx({
                         'rotate-arrow': props?.data?.arrow_select,
                       })}
                     />
                   )}
-                  <p {...applyTitleSize(props?.data?.title_size || {})}>
-                    {column?.blocks_layout?.title}
-                  </p>
-                </div>
+                  {column?.blocks_layout?.title}
+                </CustomTag>
               </Accordion.Title>
-              <div>
-                <Accordion.Content active={activeIndex === index}>
-                  <div>
-                    <AnimateHeight
-                      animateOpacity
-                      duration={500}
-                      height={activeIndex === index ? 'auto' : 0}
-                    >
-                      <RenderBlocks
-                        {...props}
-                        metadata={metadata}
-                        content={column}
-                      />
-                    </AnimateHeight>
-                  </div>
-                </Accordion.Content>
-              </div>
+              <Accordion.Content active={activeIndex === index}>
+                <AnimateHeight
+                  animateOpacity
+                  duration={500}
+                  height={activeIndex === index ? 'auto' : 0}
+                >
+                  <RenderBlocks
+                    {...props}
+                    metadata={metadata}
+                    content={column}
+                  />
+                </AnimateHeight>
+              </Accordion.Content>
             </React.Fragment>
           </Accordion>
         ) : null;

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

@@ -1,6 +1,10 @@
 .block-editor-accordion {
   margin: 0 -2.2rem;
 
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 !important;
+  }
+
   .ui.card {
     .content {
       color: #68778d;
@@ -42,15 +46,24 @@
   }
 }
 
+.block-accordion {
+  .content {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+}
+
 .align-arrow-left {
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 
 .align-arrow-right {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
+  align-items: center;
 }
 
 .input-accordion-title {