Merge branch 'main' into us_57555_icon_and_text

RedTurtle · Aug 21, 2024 · 3eadd9a · 3eadd9a
2 parents d627841 + 5128652
commit 3eadd9a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 56 deletions.
diff --git 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
@@ -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": [

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