@kitconcept/volto-light-theme 6.0.0-alpha.8 → 6.0.0-alpha.9

package/.changelog.draft

@@ -1,7 +1,12 @@
-## 6.0.0-alpha.8 (2024-12-13)
+## 6.0.0-alpha.9 (2024-12-17)
+
+### Feature
+
+- Added logos footer handlers for logo size and logos container size. Overall improvements for look and feel. @sneridagh [#451](https://github.com/kitconcept/volto-light-theme/pull/451)
 
 ### Bugfix
 
-- Remove the `aspect-ratio` handler by default in images and teasers. @sneridagh [#448](https://github.com/kitconcept/volto-light-theme/pull/448)
+- Remove teaser styling tab inside grids since it's empty. @sneridagh [#449](https://github.com/kitconcept/volto-light-theme/pull/449)
+- Remove the last dangling `aspect-ratio` handler from image block. @sneridagh [#450](https://github.com/kitconcept/volto-light-theme/pull/450)
 
 

package/CHANGELOG.md

@@ -8,6 +8,17 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.9 (2024-12-17)
+
+### Feature
+
+- Added logos footer handlers for logo size and logos container size. Overall improvements for look and feel. @sneridagh [#451](https://github.com/kitconcept/volto-light-theme/pull/451)
+
+### Bugfix
+
+- Remove teaser styling tab inside grids since it's empty. @sneridagh [#449](https://github.com/kitconcept/volto-light-theme/pull/449)
+- Remove the last dangling `aspect-ratio` handler from image block. @sneridagh [#450](https://github.com/kitconcept/volto-light-theme/pull/450)
+
 ## 6.0.0-alpha.8 (2024-12-13)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/types/index.d.ts",

package/src/components/Blocks/Teaser/schema.js

@@ -4,14 +4,8 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   return schema;
 };
 
-// Not sure why, but it was in the new one, check with blockModel3
-// export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-//   schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
-//   return schema;
-// };
 export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-  // Remove all the existing fields from the default schema
-  schema.properties.styles.schema.fieldsets[0].fields = [];
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
   return schema;
 };
 

package/src/components/Footer/FooterLogos.tsx

@@ -4,11 +4,15 @@ import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
 import { useSelector } from 'react-redux';
 import { Container } from '@plone/components';
+import cx from 'classnames';
 
 type FormState = {
   content: {
     data: Content;
   };
+  form: {
+    global: Content;
+  };
   navroot: {
     data: {
       navroot: Content;
@@ -20,11 +24,22 @@ const FooterLogos = () => {
   const navroot = useSelector<FormState, Content>(
     (state) => state.navroot.data.navroot,
   );
-  const logos = navroot?.footer_logos;
+  const formState = useSelector<FormState, Content>(
+    (state) => state.form.global,
+  );
+  const logos = formState?.footer_logos || navroot?.footer_logos;
+  const logosSize = formState?.footer_logos_size || navroot?.footer_logos_size;
+  const footer_logos_container_width =
+    formState?.footer_logos_container_width ||
+    navroot?.footer_logos_container_width;
 
   return (
-    <Container layout>
-      <ul className="footer-logos">
+    <Container className={cx({ [footer_logos_container_width]: 1 })}>
+      <ul
+        className={cx('footer-logos', {
+          [logosSize]: logosSize,
+        })}
+      >
         {!isEmpty(logos?.blocks)
           ? logos.blocks_layout.items.map((itemId) => {
               const logo = logos.blocks[itemId];
@@ -41,7 +56,7 @@ const FooterLogos = () => {
                 src: '',
                 srcAlt: '',
               };
-              if (logo?.href) {
+              if (logo?.href?.length > 0) {
                 logoInfo.hrefTitle = logo.href[0]['title'];
                 logoInfo.href = flattenToAppURL(logo.href[0]['@id']);
               }
@@ -49,6 +64,10 @@ const FooterLogos = () => {
                 logoInfo.logoHref = logo.logo[0]['@id'];
                 logoInfo.srcAlt = logo['alt'];
                 logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/${logo.logo[0].image_scales[logo.logo[0].image_field][0].download}`;
+              } else if (logo?.logo) {
+                logoInfo.logoHref = logo.logo[0]['@id'];
+                logoInfo.srcAlt = logo['alt'];
+                logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/@@images/image`;
               }
 
               if (!logoInfo.src) return null;

package/src/components/Widgets/ButtonsWidget.tsx

@@ -50,14 +50,22 @@ const ButtonsWidget = (props: ButtonsWidgetProps) => {
             key={action.name}
             aria-label={actionsInfoMap[action.name][1]}
             onPress={() => onChange(id, action.style || action.name)}
-            className={isEqual(value, action.style) ? 'active' : null}
+            className={
+              isEqual(value, action.style || action.name) ? 'active' : null
+            }
             isDisabled={disabled || isDisabled}
           >
-            <Icon
-              name={actionsInfoMap[action.name][0]}
-              title={actionsInfoMap[action.name][1] || action.name}
-              size="24px"
-            />
+            {typeof actionsInfoMap[action.name][0] === 'string' ? (
+              <div className="image-sizes-text">
+                {actionsInfoMap[action.name][0]}
+              </div>
+            ) : (
+              <Icon
+                name={actionsInfoMap[action.name][0]}
+                title={actionsInfoMap[action.name][1] || action.name}
+                size="24px"
+              />
+            )}
           </Button>
         ))}
       </div>

package/src/components/Widgets/SizeWidget.tsx

@@ -0,0 +1,68 @@
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  s: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  m: {
+    id: 'Medium',
+    defaultMessage: 'Medium',
+  },
+  l: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+  s: ['S', intl.formatMessage(messages.s)],
+  m: ['M', intl.formatMessage(messages.m)],
+  l: ['L', intl.formatMessage(messages.l)],
+});
+
+const DEFAULT_ACTIONS = [
+  {
+    name: 's',
+    label: 'Small',
+  },
+  {
+    name: 'm',
+    label: 'Medium',
+  },
+  {
+    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;

package/src/config/blocks.tsx

@@ -7,7 +7,7 @@ import { composeSchema } from '@plone/volto/helpers/Extensions';
 import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
 import { defaultStylingSchema } from '../components/Blocks/schema';
 import {
-  gridTeaserDisableAlignHandlersSchema,
+  gridTeaserDisableStylingSchema,
   teaserSchemaEnhancer,
 } from '../components/Blocks/Teaser/schema';
 import { videoBlockSchemaEnhancer } from '../components/Blocks/Video/schema';
@@ -24,7 +24,6 @@ import { SeparatorStylingSchema } from '../components/Blocks/Separator/schema';
 import {
   imageBlockSchemaEnhancer,
   standAloneImageBlockSchemaEnhancer,
-  aspectRatioSchemaEnhancer,
 } from '../components/Blocks/Image/schema';
 import { ImageBlockDataAdapter } from '../components/Blocks/Image/adapter';
 
@@ -136,6 +135,7 @@ export default function install(config: ConfigType) {
     if (!data['@type']) return {};
     if (data.theme) {
       const blockConfig = config.blocks.blocksConfig[data['@type']];
+      if (!blockConfig) return {};
       const blockStyleDefinitions =
         // We look up for the blockThemes in the block's config, then in the global config
         // We keep `colors` for BBB, but `themes` should be used
@@ -246,14 +246,13 @@ export default function install(config: ConfigType) {
   config.blocks.blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
     composeSchema(
       imageBlockSchemaEnhancer,
-      aspectRatioSchemaEnhancer,
       gridImageDisableSizeAndPositionHandlersSchema,
     );
   config.blocks.blocksConfig.gridBlock.blocksConfig.image.dataAdapter =
     ImageBlockDataAdapter;
 
   config.blocks.blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
-    composeSchema(gridTeaserDisableAlignHandlersSchema, teaserSchemaEnhancer);
+    composeSchema(teaserSchemaEnhancer, gridTeaserDisableStylingSchema);
 
   config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
     [['h2', 'h2']];

package/src/config/widgets.ts

@@ -6,6 +6,7 @@ import BlockAlignmentWidget from '../components/Widgets/BlockAlignmentWidget';
 import ColorPickerWidget from '../components/Widgets/ColorPickerWidget';
 import FooterLogosWidget from '../components/Widgets/FooterLogosWidget';
 import FooterLinksWidget from '../components/Widgets/FooterLinksWidget';
+import SizeWidget from '../components/Widgets/SizeWidget';
 
 declare module '@plone/types' {
   export interface WidgetsConfigByWidget {
@@ -15,6 +16,7 @@ declare module '@plone/types' {
     themingColorPicker: typeof ThemingColorPicker;
     footerLogos: typeof FooterLogosWidget;
     footerLinks: typeof FooterLinksWidget;
+    sizeWidget: React.ComponentType<any>;
   }
 }
 
@@ -26,6 +28,7 @@ export default function install(config: ConfigType) {
   config.widgets.widget.themingColorPicker = ThemingColorPicker;
   config.widgets.widget.footerLogos = FooterLogosWidget;
   config.widgets.widget.footerLinks = FooterLinksWidget;
+  config.widgets.widget.sizeWidget = SizeWidget;
 
   return config;
 }

package/src/index.ts

@@ -30,6 +30,8 @@ defineMessages({
 declare module '@plone/types' {
   export interface Content {
     footer_logos: BlocksData;
+    footer_logos_container_width: string;
+    footer_logos_size: string;
   }
 }
 

package/src/theme/_container.scss

@@ -6,6 +6,10 @@
     @include layout-container-width;
   }
 
+  &.default {
+    @include default-container-width;
+  }
+
   &.narrow {
     @include narrow-container-width;
   }

package/src/theme/_footer.scss

@@ -4,26 +4,24 @@
 
   ul.footer-logos {
     display: grid;
+    align-items: center;
     justify-content: center;
     padding: $pre-footer-vertical-spacing 0;
     padding-left: 0;
     margin-top: 0;
     margin-bottom: $spacing-medium;
-    gap: 20px;
-    grid-template-columns: repeat(3, 1fr);
+    gap: 60px 20px;
+    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
     list-style: none;
 
-    img {
-      max-width: 100%;
+    &.l img {
+      max-width: min(100%, 240px);
+      max-height: 165px;
     }
 
-    li.item:nth-child(3n + 1) {
-      /* Targets 1st, 4th, 7th, etc. */
-      justify-self: start;
-    }
-    li.item:nth-child(3n + 3) {
-      /* Targets 3rd, 6th, 9th, etc. */
-      justify-self: end;
+    &.s img {
+      max-width: min(100%, 175px);
+      max-height: 120px;
     }
   }
 

package/src/theme/_widgets.scss

@@ -1,4 +1,5 @@
-#sidebar-properties {
+#sidebar-properties,
+#sidebar-metadata {
   .field.widget {
     .buttons {
       display: flex;