add new icons for panel chooser

src/components/index.js

@@ -2,4 +2,4 @@ export AccordionBlockEdit from './manage/Blocks/Accordion/Edit';
 export AccordionBlockView from './manage/Blocks/Accordion/View';
 export AccordionBlockSchema from './manage/Blocks/Accordion/Schema';
 
-export { options } from './manage/Blocks/Accordion/layout';
+export { options } from './manage/Blocks/Accordion/panels';

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

@@ -8,22 +8,15 @@ import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { accordionBlockSchema } from './Schema';
 import AccordionEdit from './AccordionEdit';
 import EditBlockWrapper from './EditBlockWrapper';
-import Layout from './Layout.jsx';
+import Panels from './Panels.jsx';
 import { empty, getColumns } from './util';
-import { options } from './layout';
+import { options } from './panels';
 import './editor.less';
 import upSVG from '@plone/volto/icons/up.svg';
 import tuneSVG from '@plone/volto/icons/tune.svg';
 
 const Edit = (props) => {
-  const {
-    block,
-    data,
-    onChangeBlock,
-    pathname,
-    selected,
-    data: { display },
-  } = props;
+  const { block, data, onChangeBlock, pathname, selected } = props;
 
   const metadata = props.metadata || props.properties;
   const properties = isEmpty(data?.data?.blocks)
@@ -67,19 +60,8 @@ const Edit = (props) => {
 
   return (
     <section className="section-block">
-      {!display && Object.keys(data).length === 1 ? (
-        <Layout
-          variants={options}
-          data={data}
-          onChange={(initialData) => {
-            onChangeBlock(block, {
-              ...data,
-              ...createPanes(initialData),
-            });
-          }}
-        />
-      ) : display && Object.keys(data).length === 2 ? (
-        <Layout
+      {Object.keys(data).length === 1 ? (
+        <Panels
           variants={options}
           data={data}
           onChange={(initialData) => {

src/components/manage/Blocks/Accordion/Layout.jsx → src/components/manage/Blocks/Accordion/Panels.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Segment, Card } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
+import './editor.less';
 
 export default ({ data, onChange, children, variants }) => {
   return (
@@ -9,8 +10,8 @@ export default ({ data, onChange, children, variants }) => {
       <Card.Group centered itemsPerRow={3}>
         {variants.map(({ icon, defaultData, title }, index) => (
           <Card key={index} onClick={() => onChange(defaultData)}>
-            <Card.Content>
-              <Icon name={icon} size="55" />
+            <Card.Content textAlign={'center'}>
+              <Icon name={icon} size="88" className={'panel-icon'} />
               {title ? <p>{title}</p> : ''}
             </Card.Content>
           </Card>

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

@@ -36,3 +36,7 @@
 .input-accordion-title {
   width: 100%;
 }
+
+.panel-icon {
+  width: 100%;
+}