@plone/volto 17.9.0 → 17.10.0

package/CHANGELOG.md

@@ -17,6 +17,16 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 17.10.0 (2024-01-11)
+
+### Feature
+
+- Enhanced `ColorPickerWidget` with additional color definitions, saving it as an object instead of a string. @sneridagh [#5585](https://github.com/plone/volto/issues/5585)
+
+### Internal
+
+- Update to latest @plone/scripts @sneridagh [#5612](https://github.com/plone/volto/issues/5612)
+
 ## 17.9.0 (2024-01-04)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "17.9.0",
+  "version": "17.10.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -186,13 +186,13 @@
   "release-it": {
     "hooks": {
       "before:bump": [
-        "yarn i18n"
+        "yarn i18n",
+        "yarn build:types"
       ],
       "after:bump": [
         "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft && pipx run towncrier build --yes --version ${version}",
         "make corepackagebump VERSION=${version}",
-        "make copyreleasenotestodocs",
-        "yarn build:types"
+        "make copyreleasenotestodocs"
       ],
       "after:release": "rm .changelog.draft"
     },
@@ -247,7 +247,7 @@
     "@loadable/component": "5.14.1",
     "@loadable/server": "5.14.0",
     "@loadable/webpack-plugin": "5.15.2",
-    "@plone/scripts": "3.0.1",
+    "@plone/scripts": "^3.2.1",
     "@testing-library/cypress": "9.0.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",

package/packages/volto-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plone/volto-slate",
-  "version": "17.9.0",
+  "version": "17.10.0",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Widgets/ColorPickerWidget.stories.tsx

@@ -0,0 +1,48 @@
+import ColorPickerWidget from './ColorPickerWidget';
+import WidgetStory from './story';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ColorPickerWidget> = {
+  title: 'Edit Widgets/ColorPicker',
+  component: WidgetStory.bind({
+    widget: ColorPickerWidget,
+  }),
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerWidget>;
+
+export const Default: Story = {
+  args: {
+    id: 'favoriteColor',
+    title: 'Favorite Color',
+    colors: [
+      { name: 'red', label: 'red' },
+      { name: 'yellow', label: 'yellow' },
+      { name: 'green', label: 'green' },
+    ],
+  },
+};
+
+export const WithEnhancedStyleConfig: Story = {
+  args: {
+    id: 'favoriteColor',
+    title: 'Favorite Color',
+    colors: [
+      { name: 'red', label: 'red', style: { '--background-color': 'red' } },
+      {
+        name: 'yellow',
+        label: 'yellow',
+        style: { '--background-color': 'yellow' },
+      },
+      { name: 'green', label: 'green' },
+    ],
+  },
+};

package/src/components/manage/Widgets/{ColorPickerWidget.jsx → ColorPickerWidget.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
 import { Grid, Button } from 'semantic-ui-react';
+import { isEqual } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -11,7 +11,31 @@ const messages = defineMessages({
   },
 });
 
-const ColorPickerWidget = (props) => {
+type Color =
+  | {
+      name: string;
+      label: string;
+      style: Record<`--${string}`, string>;
+    }
+  | {
+      name: string;
+      label: string;
+      style: undefined;
+    };
+
+export type ColorPickerWidgetProps = {
+  id: string;
+  title: string;
+  value: string;
+  default: string;
+  required: boolean;
+  missing_value: unknown;
+  className: string;
+  onChange: (id: string, value: any) => void;
+  colors: Color[];
+};
+
+const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   const { id, title, required, value, onChange, colors, className } = props;
 
   const intl = useIntl();
@@ -30,6 +54,7 @@ const ColorPickerWidget = (props) => {
       className={className}
       id={'field-' + id}
     >
+      {/* @ts-ignore */}
       <Grid>
         <Grid.Row>
           <Grid.Column
@@ -44,21 +69,29 @@ const ColorPickerWidget = (props) => {
 
               <div className="buttons">
                 {colors.map((color) => {
+                  let colorValue: string | Color['style'];
+                  const colorName = color.name;
+                  if (color.style !== undefined) {
+                    colorValue = color.style;
+                  } else {
+                    colorValue = color.name;
+                  }
                   return (
                     <Button
-                      key={id + color.name}
-                      className={color.name}
+                      key={id + colorName}
+                      className={colorName}
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         onChange(
                           id,
-                          value === color.name
+                          value === colorValue
                             ? props.missing_value
-                            : color.name,
+                            : colorValue,
                         );
                       }}
-                      active={value === color.name}
+                      style={color.style}
+                      active={isEqual(value, colorValue)}
                       circular
                       aria-label={color.label}
                       title={color.label}
@@ -74,20 +107,4 @@ const ColorPickerWidget = (props) => {
   ) : null;
 };
 
-ColorPickerWidget.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  colors: PropTypes.array,
-};
-
-ColorPickerWidget.defaultProps = {
-  required: false,
-  value: null,
-  onChange: null,
-  colors: [],
-};
-
 export default ColorPickerWidget;

package/src/components/manage/Widgets/ColorPickerWidget.stories.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import ColorPickerWidget from './ColorPickerWidget';
-import WidgetStory from './story';
-
-export const Default = WidgetStory.bind({
-  widget: ColorPickerWidget,
-});
-
-Default.args = {
-  id: 'favoriteColor',
-  title: 'Favorite Color',
-  colors: [
-    { name: 'red', label: 'red' },
-    { name: 'yellow', label: 'yellow' },
-    { name: 'green', label: 'green' },
-  ],
-};
-
-export default {
-  title: 'Edit Widgets/ColorPicker',
-  component: Default,
-  decorators: [
-    (Story) => (
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {},
-};