From fb842740a8556fe73c23bd922a6c71c1b0fa0152 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 20 Aug 2024 15:18:52 +0200
Subject: [PATCH 1/2] Updated accordion block

---
 .../components/blocks/Accordion/EditItem.tsx  | 48 ++++++-------------
 .../components/blocks/Accordion/ViewItem.tsx  | 18 +++++--
 .../blocks/Accordion/styles.module.css        | 22 ++++++++-
 packages/volto-blocks/src/icons/arrow-up.svg  |  2 +-
 4 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/packages/volto-blocks/src/components/blocks/Accordion/EditItem.tsx b/packages/volto-blocks/src/components/blocks/Accordion/EditItem.tsx
index 7d76927..c6259a6 100644
--- 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
index 6b92998..bb50805 100644
--- 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
index e834e8d..66caf54 100644
--- 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
index 2645bf9..8776fdf 100644
--- a/packages/volto-blocks/src/icons/arrow-up.svg
+++ b/packages/volto-blocks/src/icons/arrow-up.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="11.061" height="6.591" viewBox="0 0 11.061 6.591">
-  <path fill="none" stroke="#fff" stroke-width="1.5" d="m.53 6.061 5-5 5 5" data-name="Arrow – Blue Default - Up"/>
+  <path stroke-width="1.5" d="m.53 6.061 5-5 5 5" />
 </svg>
\ No newline at end of file

From 51286520405c3b7d3d7405e8dbc35d9a74ac5ae0 Mon Sep 17 00:00:00 2001
From: Piero Nicolli <piero.nicolli@redturtle.it>
Date: Tue, 20 Aug 2024 15:46:00 +0200
Subject: [PATCH 2/2] Renamed repository, we are adding more add-ons to it

---
 README.md    | 16 +++++-----------
 package.json |  8 ++++----
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index c4c03a0..16d653c 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
-# RedTurtle Blocks (@redturtle/volto-blocks)
+# RedTurtle Add-ons (@redturtle/volto-addons)
 
 Common blocks to reuse for building Plone sites
 
-[![npm](https://img.shields.io/npm/v/@redturtle/volto-blocks)](https://www.npmjs.com/package/@redturtle/volto-blocks)
-[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://redturtle.github.io/volto-blocks/)
-[![Code analysis checks](https://github.com/redturtle/volto-blocks/actions/workflows/code.yml/badge.svg)](https://github.com/redturtle/volto-blocks/actions/workflows/code.yml)
-[![Unit tests](https://github.com/redturtle/volto-blocks/actions/workflows/unit.yml/badge.svg)](https://github.com/redturtle/volto-blocks/actions/workflows/unit.yml)
+[![npm](https://img.shields.io/npm/v/@redturtle/volto-addons)](https://www.npmjs.com/package/@redturtle/volto-addons)
+[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://redturtle.github.io/volto-addons/)
+[![Code analysis checks](https://github.com/redturtle/volto-addons/actions/workflows/code.yml/badge.svg)](https://github.com/redturtle/volto-addons/actions/workflows/code.yml)
+[![Unit tests](https://github.com/redturtle/volto-addons/actions/workflows/unit.yml/badge.svg)](https://github.com/redturtle/volto-addons/actions/workflows/unit.yml)
 
 ## Features
 
@@ -66,12 +66,6 @@ Add `@redturtle/volto-blocks` to your `volto.config.js`:
 const addons = ['@redturtle/volto-blocks'];
 ```
 
-If this package provides a Volto theme, and you want to activate it, then add the following to your `volto.config.js`:
-
-```javascript
-const theme = '@redturtle/volto-blocks';
-```
-
 ## Test installation
 
 Visit http://localhost:3000/ in a browser, login, and check the awesome new features.
diff --git a/package.json b/package.json
index 88b85e8..81b1190 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,15 @@
 {
-  "name": "@redturtle/volto-blocks-dev",
+  "name": "@redturtle/volto-addons",
   "version": "1.0.3",
   "description": "Common blocks to reuse for building Plone sites",
   "author": "RedTurtle",
-  "homepage": "https://github.com/RedTurtle/volto-blocks",
+  "homepage": "https://github.com/RedTurtle/volto-addons",
   "repository": {
     "type": "git",
-    "url": "https://github.com/RedTurtle/volto-blocks"
+    "url": "https://github.com/RedTurtle/volto-addons"
   },
   "bugs": {
-    "url": "https://github.com/RedTurtle/volto-blocks/issues"
+    "url": "https://github.com/RedTurtle/volto-addons/issues"
   },
   "license": "MIT",
   "keywords": [