refactor(accordion): Use Volto core styling for theme - refs #153783

eea · Sep 27, 2022 · 414e859 · 414e859
1 parent dd7061d
commit 414e859
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "3.6.0",
+  "version": "4.0.0",
   "description": "volto-accordion-block: Volto accordion block",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,4 +1,5 @@
 export AccordionLayoutSchema from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/LayoutSchema';
+export { AccordionStylingSchema } from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/Schema';
 export AccordionBlockEdit from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/Edit';
 export AccordionBlockView from '@eeacms/volto-accordion-block/components/manage/Blocks/Accordion/View';
 export PanelsWidget from '@eeacms/volto-accordion-block/components/manage/Widgets/PanelsWidget';
diff --git a/src/components/manage/Blocks/Accordion/AccordionEdit.jsx b/src/components/manage/Blocks/Accordion/AccordionEdit.jsx
@@ -47,7 +47,7 @@ export default (props) => {
   }, [data.collapsed]);
 
   return (
-    <Accordion fluid styled className={data.theme}>
+    <Accordion fluid styled className={data.styles?.theme}>
       <React.Fragment>
         <Accordion.Title
           as={data.title_size}

diff --git a/src/components/manage/Blocks/Accordion/Edit.jsx b/src/components/manage/Blocks/Accordion/Edit.jsx
@@ -10,7 +10,7 @@ import { useIntl } from 'react-intl';
 import AccordionEdit from './AccordionEdit';
 import EditBlockWrapper from './EditBlockWrapper';
 import './editor.less';
-import { accordionBlockSchema } from './Schema';
+import { AccordionBlockSchema } from './Schema';
 import { emptyAccordion, getPanels } from './util';
 import { cloneDeep } from 'lodash';
 import config from '@plone/volto/registry';
@@ -67,7 +67,7 @@ const Edit = (props) => {
    * @returns {Object} defaultValues
    */
   const setInitialData = () => {
-    const accordionSchema = applySchemaEnhancer(accordionBlockSchema({ intl }));
+    const accordionSchema = applySchemaEnhancer(AccordionBlockSchema({ intl }));
     const defaultValues = Object.keys(accordionSchema.properties).reduce(
       (accumulator, currentVal) => {
         return accordionSchema.properties[currentVal].default
@@ -259,7 +259,7 @@ const Edit = (props) => {
         )}
         {!data?.readOnlySettings && (
           <BlockDataForm
-            schema={accordionBlockSchema({ intl })}
+            schema={AccordionBlockSchema({ intl })}
             title="Accordion block"
             onChangeField={(id, value) => {
               onChangeBlock(block, {

diff --git a/src/components/manage/Blocks/Accordion/Schema.js b/src/components/manage/Blocks/Accordion/Schema.js
@@ -5,9 +5,9 @@ const messages = defineMessages({
     id: 'Accordion',
     defaultMessage: 'Accordion',
   },
-  Style: {
-    id: 'Style',
-    defaultMessage: 'Style',
+  Options: {
+    id: 'Options',
+    defaultMessage: 'Options',
   },
   Title: {
     id: 'Title',
@@ -25,10 +25,6 @@ const messages = defineMessages({
     id: 'Accordion Title size',
     defaultMessage: 'Accordion Title size',
   },
-  theme: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
   right_arrows: {
     id: 'Title Icon on the right',
     defaultMessage: 'Title Icon on the right',
@@ -45,6 +41,26 @@ const messages = defineMessages({
     id: 'Allow multiple panels open at a time',
     defaultMessage: 'Allow multiple panels open at a time',
   },
+  Theme: {
+    id: 'Theme',
+    defaultMessage: 'Theme',
+  },
+  ThemeHelp: {
+    id: 'Accordion theme',
+    defaultMessage: 'Accordion theme',
+  },
+  ThemePrimary: {
+    id: 'Primary',
+    defaultMessage: 'Primary',
+  },
+  ThemeSecondary: {
+    id: 'Secondary',
+    defaultMessage: 'Secondary',
+  },
+  ThemeTertiary: {
+    id: 'Tertiary',
+    defaultMessage: 'Tertiary',
+  },
 });
 
 export const AccordionSchema = {
@@ -64,7 +80,7 @@ export const AccordionSchema = {
   required: [],
 };
 
-export const accordionBlockSchema = ({ intl }) => ({
+export const AccordionBlockSchema = ({ intl }) => ({
   title: 'Accordion block',
   fieldsets: [
     {
@@ -73,12 +89,11 @@ export const accordionBlockSchema = ({ intl }) => ({
       fields: ['data'],
     },
     {
-      id: 'style',
-      title: intl.formatMessage(messages.Style),
+      id: 'options',
+      title: intl.formatMessage(messages.Options),
       fields: [
         'title',
         'title_size',
-        'theme',
         'right_arrows',
         'collapsed',
         'non_exclusive',
@@ -109,18 +124,6 @@ export const accordionBlockSchema = ({ intl }) => ({
         ['h6', 'Heading 6'],
       ],
     },
-    theme: {
-      title: intl.formatMessage(messages.theme),
-      type: 'string',
-      factory: 'Choice',
-      choices: [
-        ['default', 'Default'],
-        ['primary', 'Primary'],
-        ['secondary', 'Secondary'],
-        ['tertiary', 'Tertiary'],
-      ],
-      default: 'default',
-    },
     right_arrows: {
       title: intl.formatMessage(messages.right_arrows),
       type: 'boolean',
@@ -140,3 +143,27 @@ export const accordionBlockSchema = ({ intl }) => ({
   },
   required: ['title'],
 });
+
+export const AccordionStylingSchema = ({ intl }) => ({
+  title: intl.formatMessage(messages.Accordion),
+  block: 'accordion',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme'],
+    },
+  ],
+  properties: {
+    theme: {
+      title: intl.formatMessage(messages.Theme),
+      description: intl.formatMessage(messages.ThemeHelp),
+      choices: [
+        ['primary', intl.formatMessage(messages.ThemePrimary)],
+        ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+        ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+      ],
+    },
+  },
+  required: [],
+});
diff --git a/src/components/manage/Blocks/Accordion/View.jsx b/src/components/manage/Blocks/Accordion/View.jsx
@@ -55,7 +55,7 @@ const View = (props) => {
             styled
             key={id}
             exclusive={!data.exclusive}
-            className={data.theme}
+            className={data.styles?.theme}
           >
             <React.Fragment>
               <Accordion.Title

diff --git a/src/index.js b/src/index.js
@@ -3,6 +3,7 @@ import {
   AccordionBlockEdit,
   AccordionBlockView,
   AccordionLayoutSchema,
+  AccordionStylingSchema,
 } from './components';
 import { PanelsWidget } from '@eeacms/volto-accordion-block/components';
 import rightSVG from '@plone/volto/icons/right-key.svg';
@@ -55,6 +56,8 @@ const applyConfig = (config) => {
     blockHasOwnFocusManagement: true,
     sidebarTab: 1,
     schema: extendedSchema(config),
+    stylesSchema: AccordionStylingSchema,
+    enableStyling: true,
     security: {
       addPermission: [],
       view: [],