flag color customisation for slider variants

.pnpmfile.cjs

@@ -0,0 +1,23 @@
+/* eslint-disable */
+const fs = require('fs');
+const path = require('path');
+
+const catalogPath = path.resolve(__dirname, 'core/catalog.json');
+let catalog = {};
+if (fs.existsSync(catalogPath)) {
+  const catalogData = fs.readFileSync(catalogPath, 'utf-8');
+  catalog = JSON.parse(catalogData);
+} else {
+  console.error('Catalog file does not exist at:', catalogPath);
+}
+
+module.exports = {
+  hooks: {
+    updateConfig(config) {
+      if (config.catalogs) {
+        config.catalogs.default ??= catalog;
+      }
+      return config;
+    },
+  },
+};

mrs.developer.json

@@ -4,14 +4,14 @@
     "package": "@plone/volto",
     "url": "git@github.com:plone/volto.git",
     "https": "https://github.com/plone/volto.git",
-    "tag": "19.0.0-alpha.17"
+    "tag": "19.2.0"
   },
   "volto-light-theme": {
     "output": "packages",
     "develop": false,
     "package": "@kitconcept/volto-light-theme",
     "url": "git@github.com:kitconcept/volto-light-theme.git",
     "https": "https://github.com/kitconcept/volto-light-theme.git",
-    "tag": "8.0.0a7"
+    "tag": "8.0.0a31"
   }
 }

package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@kitconcept/volto-bm3-compat": "1.0.0-alpha.1",
-    "@kitconcept/volto-light-theme": "8.0.0-alpha.7",
+    "@kitconcept/volto-light-theme": "8.0.0-alpha.31",
     "@kitconcept/volto-slider-block": "workspace:*",
     "@plone/registry": "workspace:*",
     "@plone/volto": "workspace:*"
@@ -62,4 +62,4 @@
     ]
   },
   "packageManager": "pnpm@10.20.0"
-}
+}

packages/volto-slider-block/news/+sliderFlagCustomisation.feature

@@ -0,0 +1 @@
+Slider block have flag color choices @Tishasoumya-02

packages/volto-slider-block/news/+updateVLT&Voltover.internal

@@ -0,0 +1 @@
+Update VLT and Volto version @Tishasoumya-02

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

@@ -16,6 +16,7 @@ const SliderView = (props) => {
     onChangeBlock,
     slideIndex,
     setSlideIndex,
+    style,
   } = props;
 
   const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
@@ -93,7 +94,10 @@ const SliderView = (props) => {
     <>
       <div
         className={cx('block slider', data.variation || 'default', className)}
-        style={{ '--slider-container-width': `${sliderContainerWidth}px` }}
+        style={{
+          ...style,
+          '--slider-container-width': `${sliderContainerWidth}px`,
+        }}
       >
         {data.slides?.length > 0 && (
           <>

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

@@ -7,6 +7,65 @@ import DefaultBody from './DefaultBody';
 import { SliderSchema } from './schema';
 import type { BlockConfigBase } from '@plone/types';
 
+export const SLIDER_COLORS = [
+  {
+    name: 'slider-custom-color-1',
+    label: 'Grey',
+    style: {
+      '--flagColor': '#ECEBEB',
+      '--flagColor-foreground': '#000',
+    },
+  },
+  {
+    name: 'slider-custom-color-2',
+    label: 'Teal',
+    style: {
+      '--flagColor': '#306F7E',
+      '--flagColor-foreground': '#fff',
+    },
+  },
+  {
+    name: 'slider-custom-color-3',
+    label: 'Sky Blue',
+    style: {
+      '--flagColor': '#91C9FA',
+      '--flagColor-foreground': '#000',
+    },
+  },
+  {
+    name: 'slider-custom-color-4',
+    label: 'Indigo',
+    style: {
+      '--flagColor': '#4B4BB8',
+      '--flagColor-foreground': '#fff',
+    },
+  },
+  {
+    name: 'slider-custom-color-5',
+    label: 'Peach',
+    style: {
+      '--flagColor': '#F5C1A9',
+      '--flagColor-foreground': '#000',
+    },
+  },
+  {
+    name: 'slider-custom-color-6',
+    label: 'Yellow',
+    style: {
+      '--flagColor': '#EEE38D',
+      '--flagColor-foreground': '#000',
+    },
+  },
+  {
+    name: 'slider-custom-color-7',
+    label: 'Black',
+    style: {
+      '--flagColor': '#000',
+      '--flagColor-foreground': '#fff',
+    },
+  },
+];
+
 const blockConfig: BlockConfigBase = {
   id: 'slider',
   title: 'Slider',
@@ -20,6 +79,7 @@ const blockConfig: BlockConfigBase = {
   dataAdapter: SliderBlockDataAdapter,
   enableAutoPlay: false,
   blockSchema: SliderSchema,
+  flagColors: SLIDER_COLORS,
   variations: [
     {
       id: 'default',

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

@@ -1,5 +1,6 @@
 import { defineMessages } from 'react-intl';
 import config from '@plone/volto/registry';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
 import { mergeSchemas } from '../helpers';
 import { v4 as uuid } from 'uuid';
 
@@ -72,6 +73,10 @@ const messages = defineMessages({
     id: 'Flag align',
     defaultMessage: 'Align',
   },
+  flagColor: {
+    id: 'flagColor',
+    defaultMessage: 'Flag color',
+  },
 });
 
 export const itemSchema = (props) =>
@@ -148,53 +153,73 @@ export const itemSchema = (props) =>
     config.blocks.blocksConfig.slider.extensions?.slideSchema || {},
   );
 
-export const SliderSchema = (props) =>
-  mergeSchemas(
-    {
-      title: props.intl.formatMessage(messages.Slider),
-      block: 'slider',
-      fieldsets: [
-        {
-          id: 'default',
-          title: 'Default',
-          fields: ['slides'],
-        },
-        ...(config.blocks.blocksConfig.slider.enableAutoPlay
-          ? [
-              {
-                id: 'autoplay',
-                title: props.intl.formatMessage(messages.Autoplay),
-                fields: ['autoplayEnabled', 'autoplayDelay', 'autoplayJump'],
-              },
-            ]
-          : []),
-      ],
-      properties: {
-        slides: {
-          widget: 'object_list',
-          title: props.intl.formatMessage(messages.items),
-          schema: itemSchema(props),
-          activeObject: props.activeObject,
-          setActiveObject: props.setActiveObject,
-          default: [{ '@id': uuid() }],
-        },
-        autoplayEnabled: {
-          title: props.intl.formatMessage(messages.AutoplayEnabled),
-          default: false,
-          type: 'boolean',
-        },
-        autoplayDelay: {
-          title: props.intl.formatMessage(messages.AutoplayDelay),
-          type: 'integer',
-          default: 4000,
-        },
-        autoplayJump: {
-          title: props.intl.formatMessage(messages.AutoplayJump),
-          default: false,
-          type: 'boolean',
-        },
+export const SliderSchema = (props) => {
+  const schema = {
+    title: props.intl.formatMessage(messages.Slider),
+    block: 'slider',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['slides'],
+      },
+      ...(config.blocks.blocksConfig.slider.enableAutoPlay
+        ? [
+            {
+              id: 'autoplay',
+              title: props.intl.formatMessage(messages.Autoplay),
+              fields: ['autoplayEnabled', 'autoplayDelay', 'autoplayJump'],
+            },
+          ]
+        : []),
+    ],
+    properties: {
+      slides: {
+        widget: 'object_list',
+        title: props.intl.formatMessage(messages.items),
+        schema: itemSchema(props),
+        activeObject: props.activeObject,
+        setActiveObject: props.setActiveObject,
+        default: [{ '@id': uuid() }],
+      },
+      autoplayEnabled: {
+        title: props.intl.formatMessage(messages.AutoplayEnabled),
+        default: false,
+        type: 'boolean',
+      },
+      autoplayDelay: {
+        title: props.intl.formatMessage(messages.AutoplayDelay),
+        type: 'integer',
+        default: 4000,
+      },
+      autoplayJump: {
+        title: props.intl.formatMessage(messages.AutoplayJump),
+        default: false,
+        type: 'boolean',
       },
-      required: [],
     },
+    required: [],
+  };
+
+  const flagColors = config.blocks.blocksConfig.slider.flagColors;
+
+  const defaultFlagColor =
+    props.data?.variation === 'simple'
+      ? 'slider-custom-color-1'
+      : 'slider-custom-color-7';
+
+  addStyling({ schema, intl: props.intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = ['flagColor'];
+  schema.properties.styles.schema.properties.flagColor = {
+    title: props.intl.formatMessage(messages.flagColor),
+    widget: 'color_picker',
+    colors: flagColors,
+    default: defaultFlagColor,
+  };
+
+  return mergeSchemas(
+    schema,
     config.blocks.blocksConfig.slider.extensions?.blockSchema || {},
   );
+};

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

@@ -1,4 +1,4 @@
-import blockConfig from './components';
+import blockConfig, { SLIDER_COLORS } from './components';
 import type { ConfigType } from '@plone/registry';
 
 import './theme/slider-base.css';
@@ -9,12 +9,23 @@ declare module '@plone/types' {
   }
   export interface BlockConfigBase {
     enableAutoPlay?: boolean;
+    flagColors?: Array<{
+      name: string;
+      label: string;
+      style: Record<string, string>;
+    }>;
   }
 }
 
 const applyConfig = (config: ConfigType) => {
   config.blocks.blocksConfig.slider = blockConfig;
 
+  config.registerUtility({
+    name: 'flagColor',
+    type: 'styleFieldDefinition',
+    method: (props: { data: any; container: any }) => SLIDER_COLORS,
+  });
+
   return config;
 };
 

packages/volto-slider-block/src/theme/slider-base.css

@@ -183,3 +183,13 @@
 .slick-active {
   visibility: visible;
 }
+
+.color-swatch-widget[class*='field-wrapper-flagColor'] {
+  div.react-aria-RadioGroup {
+    flex-wrap: wrap;
+  }
+  .color-swatch-option-handler {
+    background-color: var(--flagColor);
+    color: var(--flagColor-foreground);
+  }
+}