fix: style and schema fixes

package.json

@@ -52,6 +52,7 @@
     "@plone/volto": "workspace:*",
     "@plone/registry": "workspace:*",
     "@plone/types": "workspace:*",
+    "@plone/components": "workspace:^",
     "@kitconcept/volto-logos-block": "workspace:*"
   },
   "devDependencies": {

packages/volto-logos-block/src/components/Logo/Edit.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import View from './View';
 import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
 import { layoutSchema } from './layoutSchema';

packages/volto-logos-block/src/components/Logo/View.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import { Message, Container } from 'semantic-ui-react';
+import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import cx from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { Container } from '@plone/components';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import type { logoData } from '@kitconcept/volto-logos-block/types/Logo';
@@ -21,20 +22,24 @@ interface logosViewProps {
   data: logoData;
   isEditMode: boolean;
 }
+
 const View: React.FC<logosViewProps> = (props: {
   data: logoData;
   isEditMode: boolean;
 }) => {
   const intl = useIntl();
   const { isEditMode } = props;
+
   const logos = props?.data?.data;
   const logosSize = props?.data?.logo_size;
 
+  const footer_logos_container_width = props?.data?.logo_width;
+
   return (
-    <div className="block logos">
-      <Container>
+    <div id="footer">
+      <Container className={cx({ [footer_logos_container_width]: 1 })}>
         <ul
-          className={cx('block-logos', {
+          className={cx('footer-logos', {
             [logosSize]: logosSize,
           })}
         >

packages/volto-logos-block/src/components/Logo/layoutSchema.js

@@ -36,7 +36,7 @@ const messages = defineMessages({
   },
   logo: {
     id: 'Logo image',
-    defaultMessage: 'Logo image',
+    defaultMessage: 'Logo',
   },
   AltText: {
     id: 'Alt text',
@@ -48,7 +48,11 @@ const messages = defineMessages({
   },
   logo_size: {
     id: 'logo_size',
-    defaultMessage: 'Logo size',
+    defaultMessage: 'Size',
+  },
+  width: {
+    id: 'width',
+    defaultMessage: 'Container Width',
   },
 });
 
@@ -112,7 +116,7 @@ export const layoutSchema = (props) => {
       {
         id: 'default',
         title: intl.formatMessage(messages.Default),
-        fields: ['logo_size', 'data'],
+        fields: ['logo_size', 'logo_width', 'data'],
       },
     ],
     properties: {
@@ -125,12 +129,14 @@ export const layoutSchema = (props) => {
 
       logo_size: {
         title: intl.formatMessage(messages.logo_size),
-        choices: [
-          ['s', intl.formatMessage(messages.Small)],
-          ['l', intl.formatMessage(messages.Large)],
-        ],
+        widget: 'logoBlocksizeWidget',
         default: 's',
       },
+      logo_width: {
+        title: intl.formatMessage(messages.width),
+        widget: 'logoBlockWidth',
+        default: 'default',
+      },
     },
     required: ['data'],
   };

packages/volto-logos-block/src/components/index.ts

@@ -1,5 +1,4 @@
 import LogoBlockEdit from './Logo/Edit';
 import LogoBlockView from './Logo/View';
-import Edit from './Edit';
 
-export { LogoBlockEdit, LogoBlockView, Edit };
+export { LogoBlockEdit, LogoBlockView };

packages/volto-logos-block/src/components/widgets/BlocksObjectWidget.tsx

@@ -1,8 +1,9 @@
-//From VLT
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import omit from 'lodash/omit';
-import { Accordion, Button, Segment } from 'semantic-ui-react';
+import { Accordion, Segment } from 'semantic-ui-react';
+
+import { Button } from '@plone/components';
 import DragDropList from '@plone/volto/components/manage/DragDropList/DragDropList';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
@@ -13,7 +14,6 @@ import {
   getBlocksLayoutFieldname,
   moveBlock,
 } from '@plone/volto/helpers/Blocks/Blocks';
-
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import deleteSVG from '@plone/volto/icons/delete.svg';

packages/volto-logos-block/src/components/widgets/LogoBlockSizeWidget.tsx

@@ -0,0 +1,63 @@
+import { defineMessages, useIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+import ButtonsWidget, {
+  type ButtonsWidgetProps,
+} from '@kitconcept/volto-light-theme/components/Widgets/ButtonsWidget';
+
+const messages = defineMessages({
+  s: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  l: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+  s: ['S', intl.formatMessage(messages.s)],
+  l: ['L', intl.formatMessage(messages.l)],
+});
+
+const DEFAULT_ACTIONS = [
+  {
+    name: 's',
+    label: 'Small',
+  },
+  {
+    name: 'l',
+    label: 'Large',
+  },
+];
+
+const SizeWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+
+  let filteredActions;
+  if (filterActions) {
+    filteredActions = actions.filter((action) =>
+      filterActions.includes(action.name),
+    );
+  } else {
+    filteredActions = actions;
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default SizeWidget;

packages/volto-logos-block/src/components/widgets/LogoBlockWidthWidget.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import type { IntlShape } from 'react-intl';
+
+import ButtonsWidget, {
+  type ButtonsWidgetProps,
+} from '@kitconcept/volto-light-theme/components/Widgets/ButtonsWidget';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  layout: {
+    id: 'Layout',
+    defaultMessage: 'Layout',
+  },
+});
+
+export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+  default: [imageFitSVG, intl.formatMessage(messages.default)],
+  layout: [imageWideSVG, intl.formatMessage(messages.layout)],
+});
+
+const DEFAULT_ACTIONS = [
+  {
+    name: 'default',
+    label: 'Default',
+  },
+  {
+    name: 'layout',
+    label: 'Layout',
+  },
+];
+
+const LogoBlockWidthWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  let filteredActions;
+  if (filterActions) {
+    filteredActions = actions.filter((action) =>
+      filterActions.includes(action.name),
+    );
+  } else {
+    filteredActions = actions;
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default LogoBlockWidthWidget;

packages/volto-logos-block/src/components/widgets/index.ts

@@ -1,3 +1,5 @@
 import BlocksObjectWidget from './BlocksObjectWidget';
+import LogoBlockSizeWidget from './LogoBlockSizeWidget';
+import LogoBlockWidthWidget from './LogoBlockWidthWidget';
 
-export { BlocksObjectWidget };
+export { BlocksObjectWidget, LogoBlockSizeWidget, LogoBlockWidthWidget };

packages/volto-logos-block/src/index.ts

@@ -1,20 +1,26 @@
-import { Edit } from './components';
 import { layoutSchema } from './components/Logo/layoutSchema';
-import { LogoBlockView } from './components';
+import { LogoBlockView, LogoBlockEdit } from './components';
 import freedomSVG from '@plone/volto/icons/freedom.svg';
-import './theme/logo.scss';
 import type { ConfigType } from '@plone/registry';
-import { BlocksObjectWidget } from './components/widgets';
+import {
+  BlocksObjectWidget,
+  LogoBlockSizeWidget,
+  LogoBlockWidthWidget,
+} from './components/widgets';
 import type { BlocksObjectWidgetProps } from './components/widgets/BlocksObjectWidget';
 import cloneDeep from 'lodash/cloneDeep';
 
+// import './theme/logo.scss';
+
 declare module '@plone/types' {
   export interface BlocksConfigData {
     //logo
     logo: {};
   }
   export interface WidgetsConfigByWidget {
     blocksObject_widget: React.FC<BlocksObjectWidgetProps>;
+    logoBlocksizeWidget: React.ComponentType<any>;
+    logoBlockWidth: React.ComponentType<any>;
   }
   export interface WidgetsConfigByType {
     logos: React.FC<BlocksObjectWidgetProps>;
@@ -28,7 +34,7 @@ const applyConfig = (config: ConfigType) => {
     group: 'common',
     icon: freedomSVG,
     view: LogoBlockView,
-    edit: Edit,
+    edit: LogoBlockEdit,
     mostUsed: true,
     sidebarTab: 1,
     schema: layoutSchema,
@@ -37,7 +43,9 @@ const applyConfig = (config: ConfigType) => {
   };
 
   config.widgets.widget.blocksObject_widget = BlocksObjectWidget;
+  config.widgets.widget.logoBlockWidth = LogoBlockWidthWidget;
   config.widgets.type.logos = BlocksObjectWidget;
+  config.widgets.widget.logoBlocksizeWidget = LogoBlockSizeWidget;
 
   return config;
 };