Merge remote-tracking branch 'origin' into cc-check-poc

kitconcept · Jan 24, 2025 · 4f67d71 · 4f67d71
2 parents 47ff9be + d41e605
commit 4f67d71
Show file tree

Hide file tree

Showing 14 changed files with 851 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,21 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.10 (2025-01-07)
+
+### Breaking
+
+- Rename the name of the widget from `themingColorPicker` to `themeColorPicker`. @sneridagh [#455](https://github.com/kitconcept/volto-light-theme/pull/455)
+
+### Bugfix
+
+- Removed the non-breaking space from the external URL icon, removing the strange underline. @Tishasoumya-02 [#438](https://github.com/kitconcept/volto-light-theme/pull/438)
+- Improve usability of the theme color picker widget. Fix error when removing a logo. @sneridagh [#455](https://github.com/kitconcept/volto-light-theme/pull/455)
+
+### Internal
+
+- Update to latest Volto 18.4.0. @sneridagh [#455](https://github.com/kitconcept/volto-light-theme/pull/455)
+
 ## 6.0.0-alpha.9 (2024-12-17)
 
 ### Feature

diff --git a/mrs.developer.json b/mrs.developer.json
@@ -4,7 +4,7 @@
     "package": "@plone/volto",
     "url": "git@github.com:plone/volto.git",
     "https": "https://github.com/plone/volto.git",
-    "tag": "18.2.3"
+    "tag": "18.4.0"
   },
   "volto-button-block": {
     "develop": false,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme-dev",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-alpha.10",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "types": "src/types/index.d.ts",

diff --git a/packages/volto-light-theme/CHANGELOG.md b/packages/volto-light-theme/CHANGELOG.md
@@ -8,6 +8,21 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.10 (2025-01-07)
+
+### Breaking
+
+- Rename the name of the widget from `themingColorPicker` to `themeColorPicker`. @sneridagh [#455](https://github.com/kitconcept/volto-light-theme/pull/455)
+
+### Bugfix
+
+- Removed the non-breaking space from the external URL icon, removing the strange underline. @Tishasoumya-02 [#438](https://github.com/kitconcept/volto-light-theme/pull/438)
+- Improve usability of the theme color picker widget. Fix error when removing a logo. @sneridagh [#455](https://github.com/kitconcept/volto-light-theme/pull/455)
+
+### Internal
+
+- Update to latest Volto 18.4.0. @sneridagh [#455](https://github.com/kitconcept/volto-light-theme/pull/455)
+
 ## 6.0.0-alpha.9 (2024-12-17)
 
 ### Feature

diff --git a/packages/volto-light-theme/news/438.bugfix b/packages/volto-light-theme/news/438.bugfix
diff --git a/packages/volto-light-theme/news/458.feature b/packages/volto-light-theme/news/458.feature
@@ -0,0 +1 @@
+Added inner and outter logo container width and constraints. @sneridagh
diff --git a/packages/volto-light-theme/package.json b/packages/volto-light-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.9",
+  "version": "6.0.0-alpha.10",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/types/index.d.ts",
@@ -45,7 +45,9 @@
   },
   "dependencies": {
     "@plone/components": "workspace:^",
-    "uuid": "^11.0.0"
+    "uuid": "^11.0.0",
+    "react-aria-components": "^1.5.0",
+    "react-colorful": "^5.6.1"
   },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.6",

diff --git a/packages/volto-light-theme/src/components/Footer/FooterLogos.tsx b/packages/volto-light-theme/src/components/Footer/FooterLogos.tsx
@@ -64,7 +64,7 @@ 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) {
+              } else if (logo?.logo && logo.logo[0]) {
                 logoInfo.logoHref = logo.logo[0]['@id'];
                 logoInfo.srcAlt = logo['alt'];
                 logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/@@images/image`;

diff --git a/...components/Widgets/ThemingColorPicker.tsx → ...ponents/Widgets/RACThemingColorPicker.tsx b/...components/Widgets/ThemingColorPicker.tsx → ...ponents/Widgets/RACThemingColorPicker.tsx
diff --git a/packages/volto-light-theme/src/components/Widgets/ThemeColorPicker.tsx b/packages/volto-light-theme/src/components/Widgets/ThemeColorPicker.tsx
@@ -0,0 +1,53 @@
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
+import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
+import { ColorSwatch, CloseIcon } from '@plone/components';
+
+const ColorPickerWidget = (props: {
+  id: string;
+  title: string;
+  value: string;
+  default: string;
+  onChange: (id: string, value: any) => void;
+}) => {
+  const { id, onChange, value } = props;
+
+  return (
+    <FormFieldWrapper {...props} className="theme-color-picker">
+      <DialogTrigger>
+        <Button className="theme-color-picker-button">
+          <ColorSwatch color={value || '#fff'} />
+        </Button>
+
+        <Popover placement="bottom start">
+          <Dialog className="theme-color-picker-dialog">
+            <HexColorPicker
+              color={value || ''}
+              onChange={(value) => {
+                // edge case for Batman value
+                if (value !== '#NaNNaNNaN') {
+                  onChange(id, value);
+                }
+              }}
+            />
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+      <HexColorInput
+        color={value || ''}
+        onChange={(value) => onChange(id, value)}
+        prefixed
+      />
+      <Button
+        className="theme-color-picker-reset react-aria-Button"
+        onPress={() => {
+          onChange(id, '');
+        }}
+      >
+        <CloseIcon size="S" />
+      </Button>
+    </FormFieldWrapper>
+  );
+};
+
+export default ColorPickerWidget;
diff --git a/packages/volto-light-theme/src/config/widgets.ts b/packages/volto-light-theme/src/config/widgets.ts
@@ -1,19 +1,19 @@
 import type { ConfigType } from '@plone/registry';
-import ThemingColorPicker from '../components/Widgets/ThemingColorPicker';
 import BackgroundColorWidget from '../components/Widgets/BackgroundColorWidget';
 import BlockWidthWidget from '../components/Widgets/BlockWidthWidget';
 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';
+import ThemeColorPicker from '../components/Widgets/ThemeColorPicker';
 
 declare module '@plone/types' {
   export interface WidgetsConfigByWidget {
     BackgroundColorWidget: React.ComponentType<any>;
     blockWidth: React.ComponentType<any>;
     blockAlignment: React.ComponentType<any>;
-    themingColorPicker: typeof ThemingColorPicker;
+    themeColorPicker: typeof ThemeColorPicker;
     footerLogos: typeof FooterLogosWidget;
     footerLinks: typeof FooterLinksWidget;
     sizeWidget: React.ComponentType<any>;
@@ -25,7 +25,7 @@ export default function install(config: ConfigType) {
   config.widgets.widget.blockWidth = BlockWidthWidget;
   config.widgets.widget.blockAlignment = BlockAlignmentWidget;
   config.widgets.widget.color_picker = ColorPickerWidget;
-  config.widgets.widget.themingColorPicker = ThemingColorPicker;
+  config.widgets.widget.themeColorPicker = ThemeColorPicker;
   config.widgets.widget.footerLogos = FooterLogosWidget;
   config.widgets.widget.footerLinks = FooterLinksWidget;
   config.widgets.widget.sizeWidget = SizeWidget;

diff --git a/packages/volto-light-theme/src/theme/_footer.scss b/packages/volto-light-theme/src/theme/_footer.scss
@@ -11,9 +11,13 @@
     margin-top: 0;
     margin-bottom: $spacing-medium;
     gap: 60px 20px;
-    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     list-style: none;
 
+    &.s {
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    }
+
     &.l img {
       max-width: min(100%, 240px);
       max-height: 165px;

diff --git a/packages/volto-light-theme/src/theme/_widgets.scss b/packages/volto-light-theme/src/theme/_widgets.scss
@@ -29,7 +29,7 @@
   }
 }
 
-.field.color {
+.field.theme-color-picker {
   .wrapper {
     min-height: 40px;
     flex-grow: 1 !important;
@@ -49,9 +49,28 @@
     align-items: center;
 
     input {
+      height: 32px;
       padding-left: 8px;
+      border-bottom-left-radius: 0px;
+      border-top-left-radius: 0px;
       line-height: 1;
     }
+
+    .theme-color-picker-button .react-aria-ColorSwatch {
+      border-bottom-right-radius: 0px;
+      border-top-right-radius: 0px;
+      cursor: pointer;
+    }
+
+    .theme-color-picker-reset {
+      position: absolute;
+      right: 15px;
+
+      &[data-hovered='true'] {
+        cursor: pointer;
+        opacity: 0.7;
+      }
+    }
   }
 
   label.color-contrast-label {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Added inner and outter logo container width and constraints. @sneridagh