Updated accordion block

RedTurtle · Aug 20, 2024 · fb84274 · fb84274
1 parent 99d45be
commit fb84274
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 41 deletions.
diff --git a/packages/volto-blocks/src/components/blocks/Accordion/EditItem.tsx b/packages/volto-blocks/src/components/blocks/Accordion/EditItem.tsx
@@ -1,14 +1,11 @@
-import { useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import cx from 'classnames';
-import { Icon } from '@plone/volto/components';
 
 import type { ArrayElement } from '@plone/types';
 
 import { TextEditorWidget } from '@redturtle/volto-rt-slate';
 
 import styles from '@redturtle/volto-blocks/components/blocks/Accordion/styles.module.css';
-import arrowUpSVG from '@redturtle/volto-blocks/icons/arrow-up.svg';
 import type { AccordionData } from '@redturtle/volto-blocks/components/blocks/Accordion/schema';
 
 type Props = {
@@ -27,7 +24,6 @@ export default function EditItem({
   selected,
 }: Props) {
   const intl = useIntl();
-  const [collapsed, setCollapsed] = useState(true);
 
   if (__SERVER__) {
     return <div />;
@@ -36,7 +32,7 @@ export default function EditItem({
   return (
     <div className={cx('block-accordion-item', styles.item)}>
       <TextEditorWidget
-        className={cx('block-accordion-item-title', styles.itemTitle)}
+        wrapClass={cx('block-accordion-item-title', styles.itemTitle)}
         as="h3"
         block={data['@id']}
         data={data}
@@ -49,35 +45,19 @@ export default function EditItem({
         showToolbar={false}
         placeholder={intl.formatMessage(messages.title)}
       />
-      <button
-        type="button"
-        id={'accordion' + data['@id']}
-        aria-expanded={!collapsed}
-        aria-controls={'section' + data['@id']}
-        onClick={() => setCollapsed(!collapsed)}
-      >
-        <Icon className="arrow-button" name={arrowUpSVG} size="6px" />
-      </button>
-      <div
-        id={'section' + data['@id']}
-        role="region"
-        aria-labelledby={'accordion' + data['@id']}
-        hidden={collapsed}
-      >
-        <TextEditorWidget
-          className={cx('block-accordion-item-text', styles.itemText)}
-          as="div"
-          block={data['@id']}
-          data={data}
-          fieldName="text"
-          selected={selected && focusOn === 'text' + data['@id']}
-          setSelected={() => setFocusOn('text' + data['@id'])}
-          onChangeBlock={(id: string, value: { text: string }) => {
-            onChange(id, 'text', value.text);
-          }}
-          placeholder={intl.formatMessage(messages.text)}
-        />
-      </div>
+      <TextEditorWidget
+        wrapClass={cx('block-accordion-item-text', styles.itemText)}
+        as="div"
+        block={data['@id']}
+        data={data}
+        fieldName="text"
+        selected={selected && focusOn === 'text' + data['@id']}
+        setSelected={() => setFocusOn('text' + data['@id'])}
+        onChangeBlock={(id: string, value: { text: string }) => {
+          onChange(id, 'text', value.text);
+        }}
+        placeholder={intl.formatMessage(messages.text)}
+      />
     </div>
   );
 }

diff --git a/packages/volto-blocks/src/components/blocks/Accordion/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/Accordion/ViewItem.tsx
@@ -23,19 +23,27 @@ export default function EditItem({ data }: Props) {
         <button
           type="button"
           aria-expanded={!collapsed}
-          aria-controls={'section' + data['@id']}
-          id={'accordion' + data['@id']}
+          aria-controls={'section-' + data['@id']}
+          id={'accordion-' + data['@id']}
           onClick={() => setCollapsed(!collapsed)}
+          className={cx('block-accordion-item-button', styles.button)}
         >
           {data.title}
-          <Icon className="arrow-button" name={arrowUpSVG} size="6px" />
+          <Icon
+            className={cx('block-accordion-button-icon', styles.icon, {
+              collapsed,
+            })}
+            name={arrowUpSVG}
+            size="0.5em"
+          />
         </button>
       </h3>
       <div
-        id={'section' + data['@id']}
+        id={'section-' + data['@id']}
         role="region"
-        aria-labelledby={'accordion' + data['@id']}
+        aria-labelledby={'accordion-' + data['@id']}
         hidden={collapsed}
+        className={cx('block-accordion-item-text', styles.itemText)}
       >
         <TextBlockView data={{ value: data.text ?? {} }} />
       </div>

diff --git a/packages/volto-blocks/src/components/blocks/Accordion/styles.module.css b/packages/volto-blocks/src/components/blocks/Accordion/styles.module.css
@@ -10,7 +10,27 @@
   break-inside: avoid;
 }
 
-@container (width > 700px) {
+.itemTitle,
+:global(.block) .itemTitle h3:last-child {
+  margin-top: 0;
+}
+
+.button {
+  padding: 0;
+  border: 0;
+  background: 0 none;
+  cursor: pointer;
+}
+
+.icon {
+  transition: 0.2s transform ease;
+}
+
+:global(.collapsed).icon {
+  transform: scaleY(-1);
+}
+
+@container (width < 700px) {
   .wrapper {
     column-count: 1;
   }

diff --git a/packages/volto-blocks/src/icons/arrow-up.svg b/packages/volto-blocks/src/icons/arrow-up.svg