@plone/volto 18.0.0-alpha.35 → 18.0.0-alpha.37

package/theme/themes/pastanaga/extras/blocks.less

@@ -401,7 +401,6 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
       padding: 4px;
       border-radius: 1px;
       margin-left: 4px;
-      color: @brown !important;
 
       &:hover {
         background-color: #edf1f2 !important;
@@ -414,13 +413,50 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
       }
     }
   }
+}
+
+.toolbar-buttons {
+  // used by the ImageUploadWidget
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+}
+
+.image-upload-widget-toolbar {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+
+  .icon.circled {
+    border: 1px solid #e4e8ec;
+    background: #f3f5f7;
+    box-shadow: inset 0 0 0 0.14285714rem transparent !important;
+  }
+}
+
+div.image-upload-widget-image {
+  position: relative;
+
+  img {
+    max-width: 100% !important;
+  }
+}
+
+.image-upload-widget {
+  text-align: center;
 
-  .ui.active.basic.icon.button {
-    border: 1px solid #2996da;
-    background: transparent !important;
+  .toolbar-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
   }
 }
 
+.ui.active.basic.icon.button {
+  border: 1px solid #2996da;
+  background: transparent !important;
+}
+
 // Hero block
 .block.hero {
   clear: both;

package/theme/themes/pastanaga/extras/grid.less

@@ -396,9 +396,9 @@ body.has-toolbar.has-sidebar .drag.gridBlock.handle.wrapper {
 
 // Aspect ratio on all images
 .grid-image-wrapper img,
-.gridBlock .block.image img,
-.block-editor-gridBlock .block-editor-image img,
-.block-editor-image.contained img {
+.gridBlock .block.image img:not(.placeholder),
+.block-editor-gridBlock .block-editor-image img:not(.placeholder),
+.block-editor-image.contained img:not(.placeholder) {
   width: 100%;
   aspect-ratio: @grid-images-aspect-ratio;
   object-fit: cover;

package/theme/themes/pastanaga/extras/teaser.less

@@ -164,3 +164,56 @@
     }
   }
 }
+
+#sidebar-properties .ui.form {
+  .teaser.block.overwrite.actions {
+    display: flex;
+    flex-direction: column;
+
+    > div {
+      display: flex;
+      justify-content: space-between;
+
+      .ui.label {
+        padding-left: 0;
+        background: unset;
+        font-size: 15px;
+        text-transform: capitalize;
+      }
+    }
+
+    h3 {
+      text-transform: capitalize;
+    }
+
+    .ui.button:hover {
+      background: none !important;
+    }
+  }
+
+  .ui.message.warning:has(.teaser.block.overwrite.actions) {
+    display: block;
+  }
+}
+
+#sidebar-properties .ui.segment.attached.actions {
+  display: flex;
+  justify-content: center;
+  padding: 1.5em 1em;
+  border-top: none;
+
+  .ui.buttons.refresh.teaser button {
+    display: flex;
+    align-items: center;
+    padding: 0.5833em 0.833em;
+    background-color: #e8e8e8 !important;
+    color: rgba(0, 0, 0, 0.6) !important;
+    font-size: 0.85714286rem;
+    font-weight: bold;
+
+    svg {
+      padding: 0 0 0 0.5em;
+      margin-right: 0;
+    }
+  }
+}

package/theme/themes/pastanaga/extras/widgets.less

@@ -172,3 +172,111 @@ body.babel-view .field.language-independent-field {
     }
   }
 }
+
+.image-widget {
+  container-type: inline-size;
+
+  .no-image-wrapper {
+    display: flex;
+    width: ~'min(100%, 450px)';
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .toolbar-inner {
+    display: flex;
+    width: ~'min(100%, 450px)';
+    height: 40px;
+    padding: 4px;
+    border-radius: 2px;
+    background-color: rgba(255, 255, 255, 0.975);
+    box-shadow:
+      0 0 8px rgba(0, 0, 0, 0.1),
+      0 2px 4px rgba(0, 0, 0, 0.05);
+
+    .ui.form & .ui.input input[type='text'] {
+      height: initial;
+    }
+
+    & > svg {
+      display: inline-block !important;
+      box-sizing: content-box;
+      padding: 4px;
+      margin-right: 4px;
+      color: @brown !important;
+    }
+
+    .ui.input {
+      width: 100%;
+      margin-left: 8px;
+    }
+
+    .ui.input > input {
+      padding: 0;
+      border: none;
+    }
+
+    .ui.icon.button {
+      padding: 4px;
+      border-radius: 1px;
+      margin-left: -3px;
+      color: @brown !important;
+
+      &:hover {
+        background-color: #edf1f2 !important;
+      }
+    }
+
+    .ui.buttons:first-child {
+      & .ui.icon.button {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @blueArctic: #e2f1fd;
+  @greySnow: #f3f5f7;
+  @greySmoke: #e4e8ec;
+
+  .image-widget-preview-wrapper {
+    position: relative;
+  }
+
+  .ui.basic.button.remove-block-button {
+    position: absolute;
+    z-index: 2;
+    top: 6px;
+    right: 2px;
+    background-color: transparent;
+    box-shadow: none;
+
+    .icon {
+      height: 18px !important;
+    }
+
+    .circled {
+      padding: 8px;
+      border: 1px solid @greySmoke;
+      background: @greySnow;
+
+      &:hover {
+        background-color: @greySmoke;
+      }
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  .image-widget-filepath-preview {
+    display: flex;
+    align-items: center;
+    padding: 5px;
+    word-break: break-all;
+
+    a {
+      margin-left: 5px;
+    }
+  }
+}

package/types/components/manage/AnchorPlugin/useLinkEditor.d.ts

@@ -0,0 +1,7 @@
+export default useLinkEditor;
+declare function useLinkEditor(): {
+    anchorNode: React.MutableRefObject<undefined>;
+    show: () => void;
+    LinkEditor: (props: any) => import("react/jsx-runtime").JSX.Element;
+};
+import React from 'react';

package/types/components/manage/Blocks/Teaser/schema.d.ts

@@ -1,4 +1,5 @@
-export function TeaserSchema({ intl }: {
+export function TeaserSchema({ data, intl }: {
+    data: any;
     intl: any;
 }): {
     title: any;
@@ -15,6 +16,12 @@ export function TeaserSchema({ intl }: {
             selectedItemAttrs: string[];
             allowExternals: boolean;
         };
+        overwrite: {
+            title: any;
+            description: any;
+            type: string;
+            default: boolean;
+        };
         title: {
             title: any;
         };
@@ -37,7 +44,7 @@ export function TeaserSchema({ intl }: {
             type: string;
         };
     };
-    required: any[];
+    required: string[];
 };
 export function gridTeaserDisableStylingSchema({ schema, formData, intl }: {
     schema: any;

package/types/components/manage/Widgets/ImageWidget.d.ts

@@ -0,0 +1,10 @@
+export function ImageToolbar({ className, data, id, onChange, selected }: {
+    className: any;
+    data: any;
+    id: any;
+    onChange: any;
+    selected: any;
+}): import("react/jsx-runtime").JSX.Element;
+export const ImageInput: any;
+export default ImageUploadWidget;
+declare function ImageUploadWidget(props: any): import("react/jsx-runtime").JSX.Element;

package/types/components/manage/Widgets/ImageWidget.stories.d.ts

@@ -0,0 +1,11 @@
+export const Default: any;
+export const Filled: any;
+export const Inline: any;
+declare namespace _default {
+    export let title: string;
+    export { ImageWidget as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export let argTypes: {};
+}
+export default _default;
+import ImageWidget from './ImageWidget';

package/types/config/Widgets.d.ts

@@ -14,6 +14,7 @@ export namespace widgetMapping {
         export { DatetimeWidget as date };
         export { PasswordWidget as password };
         export { FileWidget as file };
+        export { ImageWidget as image };
         export { AlignWidget as align };
         export { ButtonsWidget as buttons };
         export { UrlWidget as url };
@@ -108,6 +109,7 @@ import { TextareaWidget } from '@plone/volto/components/manage/Widgets';
 import { DatetimeWidget } from '@plone/volto/components/manage/Widgets';
 import { PasswordWidget } from '@plone/volto/components/manage/Widgets';
 import { FileWidget } from '@plone/volto/components/manage/Widgets';
+import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
 import { AlignWidget } from '@plone/volto/components/manage/Widgets';
 import { ButtonsWidget } from '@plone/volto/components/manage/Widgets';
 import { InternalUrlWidget } from '@plone/volto/components/manage/Widgets';

package/types/helpers/Blocks/cloneBlocks.d.ts

@@ -0,0 +1 @@
+export declare function cloneBlocks(blocksData: any): any;

package/types/helpers/Blocks/cloneBlocks.test.d.ts

@@ -0,0 +1 @@
+export {};