Transfer enhanced VLT schema (#30)

* Transfer enhanced VLT schema

* Remove SemanticUI button

* changelog

* lock

Author: sneridagh

.eslintrc.js

@@ -39,6 +39,11 @@ module.exports = {
         message:
           'Importing from barrel files is not allowed. Please use direct imports of the modules instead.',
       },
+      {
+        name: 'semantic-ui-react',
+        message:
+          'Semantic UI is not allowed in this add-on. Please use `@plone/components` instead.',
+      },
     ],
     'react/jsx-key': [2, { checkFragmentShorthand: true }],
   },

packages/volto-button-block/news/30.breaking

@@ -0,0 +1 @@
+Removed SemancticUI Button, use `@plone/components` button instead. @sneridagh

packages/volto-button-block/news/30.feature

@@ -0,0 +1 @@
+Transfer VLT enhanced schema to the add-on. @sneridagh

packages/volto-button-block/package.json

@@ -26,7 +26,8 @@
     "@kitconcept/volto-bm3-compat"
   ],
   "dependencies": {
-    "@kitconcept/volto-bm3-compat": "1.0.0-alpha.1"
+    "@kitconcept/volto-bm3-compat": "1.0.0-alpha.1",
+    "@plone/components": "workspace:*"
   },
   "peerDependencies": {
     "classnames": "^2.5.1",

packages/volto-button-block/src/components/View.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Button } from 'semantic-ui-react';
+import { Button } from '@plone/components';
 import cx from 'classnames';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { BlockWrapper } from '@kitconcept/volto-bm3-compat';

packages/volto-button-block/src/components/schema.js

@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 
 const messages = defineMessages({
   ButtonBlock: {
@@ -25,18 +26,25 @@ const messages = defineMessages({
     id: 'Open in a new tab',
     defaultMessage: 'Open in a new tab',
   },
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
 });
 
 export const ButtonSchema = (props) => {
   const { intl } = props;
-
-  return {
+  const schema = {
     title: intl.formatMessage(messages.ButtonBlock),
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
-        fields: ['title', 'href', 'openLinkInNewTab', 'inneralign'],
+        fields: ['title', 'href', 'openLinkInNewTab'],
       },
     ],
 
@@ -51,17 +59,38 @@ export const ButtonSchema = (props) => {
         selectedItemAttrs: ['Title', 'Description', 'hasPreviewImage'],
         allowExternals: true,
       },
-      inneralign: {
-        title: props.intl.formatMessage(messages.innerAlign),
-        widget: 'align',
-        actions: ['left', 'center', 'right'],
-        default: 'left',
-      },
       openLinkInNewTab: {
         title: intl.formatMessage(messages.openLinkInNewTab),
         type: 'boolean',
       },
     },
     required: [],
   };
+
+  addStyling({ schema, intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'align:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    filterActions: ['narrow', 'default'],
+  };
+
+  schema.properties.styles.schema.properties['align:noprefix'] = {
+    widget: 'blockAlignment',
+    title: intl.formatMessage(messages.Alignment),
+    default: 'left',
+  };
+
+  return schema;
 };