@eeacms/volto-accordion-block - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

CHANGELOG.md

@@ -7,5 +7,14 @@ ### Changelog
 
-#### [3.0.0](https://github.com/eea/volto-accordion-block/compare/2.1.0...3.0.0)
+#### [3.1.0](https://github.com/eea/volto-accordion-block/compare/3.0.0...3.1.0)
 
+- Align accordion style/settings/buttons to Volto Group block [`334ecb4`](https://github.com/eea/volto-accordion-block/commit/334ecb493379d16c7b4c0afef74580c38e897277)
+- Update docs [`475ec25`](https://github.com/eea/volto-accordion-block/commit/475ec251601941a2e0364563408d54fa6e88172a)
+- Add fixedLayout settings [`b874b69`](https://github.com/eea/volto-accordion-block/commit/b874b69c8a48e7e0002f2c68a1ab51d5abb5ff2d)
+
+### [3.0.0](https://github.com/eea/volto-accordion-block/compare/2.1.0...3.0.0)
+
+> 8 March 2021
+
 - use BlocksFrom from volto-core [`#11`](https://github.com/eea/volto-accordion-block/pull/11)
+- Release 3.0.0 [`77f096b`](https://github.com/eea/volto-accordion-block/commit/77f096b09660def2fa00ec264c19a93ed4689de5)
 - Cleanup Jenkinsfile DEPENDENCIES [`a3b3ef8`](https://github.com/eea/volto-accordion-block/commit/a3b3ef8c4d4bba72aa0796e1173feec1407d5dae)
@@ -12,0 +21,0 @@ - [JENKINS] - Fix cypress for SelectWidget [`2e0a92b`](https://github.com/eea/volto-accordion-block/commit/2e0a92b204f46da4772acc4dbb6cc733bed57d62)

DEVELOP.md

@@ -9,10 +9,8 @@ # volto-accordion-block
 
-        $ npm install -g yo
-        $ npm install -g @plone/generator-volto
-        $ npm install -g mrs-developer
+        npm install -g yo @plone/generator-volto mrs-developer
 
 1.  Create new volto app
 
-        $ yo @plone/volto my-volto-project --addon @eeacms/volto-accordion-block
-        $ cd my-volto-project
+        yo @plone/volto my-volto-project --addon @eeacms/volto-accordion-block --skip-install
+        cd my-volto-project
 
@@ -32,12 +30,13 @@ 1.  Add the following to `mrs.developer.json`:
 
-        $ yarn develop
-        $ yarn
+        yarn develop
+        yarn
 
 1.  Start backend
 
-        $ docker run -d --name plone -p 8080:8080 -e SITE=Plone plone
+        docker pull plone
+        docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
 
     ...wait for backend to setup and start - `Ready to handle requests`:
 
-        $ docker logs -f plone
+        docker logs -f plone
 
@@ -48,3 +47,3 @@ ...you can also check http://localhost:8080/Plone
 
-        $ yarn start
+        yarn start
 
@@ -55,2 +54,2 @@ 1.  Go to http://localhost:3000
 
-        $ cd src/addons/volto-accordion-block/
+        cd src/addons/volto-accordion-block/

package.json

 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "volto-accordion-block: Volto group block to add accordions",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -14,14 +14,32 @@ # volto-accordion-block
 
-1. Create new volto project if you don't already have one:
+### Try volto-accordion-block with Docker
 
+1. Get the latest Docker images
+
    ```
-   $ npm install -g yo @plone/generator-volto
-   $ yo @plone/volto my-volto-project --addon @eeacms/volto-accordion-block
+   docker pull plone
+   docker pull plone/volto
+   ```
 
-   $ cd my-volto-project
-   $ yarn add -W @eeacms/volto-accordion-block
+1. Start Plone backend
    ```
+   docker run -d --name plone -p 8080:8080 -e SITE=Plone -e PROFILES="profile-plone.restapi:blocks" plone
+   ```
 
-1. If you already have a volto project, just update `package.json`:
+1. Start Volto frontend
 
+   ```
+   docker run -it --rm -p 3000:3000 --link plone -e ADDONS="@eeacms/volto-accordion-block" plone/volto
+   ```
+
+1. Go to http://localhost:3000
+
+### Add volto-accordion-block to your Volto project
+
+1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
+
+1. Start Volto frontend
+
+* If you already have a volto project, just update `package.json`:
+
    ```JSON
@@ -33,11 +51,19 @@ "addons": [
    "dependencies": {
-       "@eeacms/volto-accordion-block": "^2.0.0"
+       "@eeacms/volto-accordion-block": "^3.0.0"
    }
    ```
 
+* If not, create one:
+
+   ```
+   npm install -g yo @plone/generator-volto
+   yo @plone/volto my-volto-project --addon @eeacms/volto-accordion-block
+   cd my-volto-project
+   ```
+
 1. Install new add-ons and restart Volto:
 
    ```
-   $ yarn
-   $ yarn start
+   yarn
+   yarn start
    ```
@@ -49,3 +75,2 @@
 
-
 ## How to contribute
@@ -52,0 +77,0 @@

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

 import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
-import { BlocksForm } from '@plone/volto/components';
+import { Button, Segment } from 'semantic-ui-react';
+import { BlocksForm, Icon } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
@@ -11,6 +12,16 @@ import { SidebarPortal } from '@plone/volto/components';
 
+import helpSVG from '@plone/volto/icons/help.svg';
+import EditBlockWrapper from './EditBlockWrapper';
 import './editor.less';
 
 const Edit = (props) => {
-  const { block, data, onChangeBlock, pathname, selected, manage } = props;
+  const {
+    block,
+    data,
+    onChangeBlock,
+    pathname,
+    selected,
+    manage,
+    formDescription,
+  } = props;
 
@@ -56,2 +67,3 @@ const metadata = props.metadata || props.properties;
       title: e.target.value,
+      '@type': 'accordionPanel',
     };
@@ -70,4 +82,19 @@ onChangeBlock(block, {
 
+  // Get editing instructions from block settings or props
+  let instructions = data?.instructions?.data || data?.instructions;
+  if (!instructions || instructions === '<p><br/></p>') {
+    instructions = formDescription;
+  }
+
   return (
-    <div className="accordion-block">
+    <fieldset className="accordion-block">
+      <legend
+        onClick={() => {
+          setSelectedBlock({});
+          props.setSidebarTab(1);
+        }}
+        aria-hidden="true"
+      >
+        {data.title || 'Accordion'}
+      </legend>
       {panels.map(([uid, panel], index) => (
@@ -86,3 +113,3 @@ <AccordionEdit
             title={data.placeholder}
-            description={data?.instructions?.data}
+            description={instructions}
             manage={manage}
@@ -129,25 +156,56 @@ allowedBlocks={data.allowedBlocks}
             pathname={pathname}
-          />
+          >
+            {({ draginfo }, editBlock, blockProps) => (
+              <EditBlockWrapper
+                draginfo={draginfo}
+                blockProps={blockProps}
+                disabled={data.disableInnerButtons}
+                extraControls={
+                  <>
+                    {instructions && (
+                      <>
+                        <Button
+                          icon
+                          basic
+                          title="Section help"
+                          onClick={() => {
+                            setSelectedBlock({});
+                            const tab = manage ? 0 : 1;
+                            props.setSidebarTab(tab);
+                          }}
+                        >
+                          <Icon name={helpSVG} className="" size="19px" />
+                        </Button>
+                      </>
+                    )}
+                  </>
+                }
+              >
+                {editBlock}
+              </EditBlockWrapper>
+            )}
+          </BlocksForm>
         </AccordionEdit>
       ))}
-      {Object.keys(selectedBlock).length === 0 && !data.readOnlySettings ? (
-        <SidebarPortal selected={true}>
-          <>
-            <InlineForm
-              schema={accordionBlockSchema()}
-              title="Accordion block"
-              onChangeField={(id, value) => {
-                onChangeBlock(block, {
-                  ...data,
-                  [id]: value,
-                });
-              }}
-              formData={data}
-            />
-          </>
-        </SidebarPortal>
-      ) : (
-        ''
-      )}
-    </div>
+      <SidebarPortal selected={selected && !Object.keys(selectedBlock).length}>
+        {instructions && (
+          <Segment attached>
+            <div dangerouslySetInnerHTML={{ __html: instructions }} />
+          </Segment>
+        )}
+        {!data?.readOnlySettings && (
+          <InlineForm
+            schema={accordionBlockSchema()}
+            title="Accordion block"
+            onChangeField={(id, value) => {
+              onChangeBlock(block, {
+                ...data,
+                [id]: value,
+              });
+            }}
+            formData={data}
+          />
+        )}
+      </SidebarPortal>
+    </fieldset>
   );
@@ -154,0 +212,0 @@ };

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

@@ -8,2 +8,3 @@ const Schema = {
       fields: [
+        'title',
         'placeholder',
@@ -14,6 +15,8 @@ 'instructions',
         'fixed',
+        'fixedLayout',
         'disableNewBlocks',
-        'readOnly',
+        'disableInnerButtons',
         'readOnlyTitles',
         'readOnlySettings',
+        'readOnly',
       ],
@@ -23,2 +26,7 @@ },
   properties: {
+    title: {
+      title: 'Title',
+      description: 'Section friendly name',
+      type: 'string',
+    },
     allowedBlocks: {
@@ -54,2 +62,8 @@ title: 'Allowed blocks',
     },
+    fixedLayout: {
+      title: 'Fixed layout',
+      description:
+        'Fixed layout, New panes (tabs) created by Editor within this block will be ignored',
+      type: 'boolean',
+    },
     disableNewBlocks: {
@@ -75,2 +89,7 @@ title: 'Disable new blocks',
     },
+    disableInnerButtons: {
+      title: 'Disable inner buttons',
+      description: 'Hide all block related buttons within this block',
+      type: 'boolean',
+    },
   },
@@ -77,0 +96,0 @@ required: [],

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

@@ -29,6 +29,17 @@ export const AccordionSchema = {
       title: 'Style',
-      fields: ['title_size', 'right_arrows', 'collapsed', 'non_exclusive'],
+      fields: [
+        'title',
+        'title_size',
+        'right_arrows',
+        'collapsed',
+        'non_exclusive',
+      ],
     },
   ],
   properties: {
+    title: {
+      title: 'Title',
+      description: 'Friendly name',
+      type: 'string',
+    },
     data: {
@@ -35,0 +46,0 @@ title: 'Accordion',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77895

increased by14.81%

Number of package files

27

increased by3.85%

Lines of code

1468

increased by20.23%

Number of lines in readme file

87

increased by40.32%

No dependency changes