@plone/volto 15.0.0-alpha.5 → 15.0.0-alpha.6

package/src/config/Blocks.jsx

@@ -56,6 +56,11 @@ import TopSideFacets from '@plone/volto/components/manage/Blocks/Search/layout/T
 import {
   SelectFacet,
   CheckboxFacet,
+  DateRangeFacet,
+  ToggleFacet,
+  ToggleFacetFilterListEntry,
+  SelectFacetFilterListEntry,
+  DateRangeFacetFilterListEntry,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 
@@ -438,12 +443,38 @@ const blocksConfig = {
             title: 'Select',
             view: SelectFacet,
             isDefault: true,
+            schemaEnhancer: SelectFacet.schemaEnhancer,
+            stateToValue: SelectFacet.stateToValue,
+            valueToQuery: SelectFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
           },
           {
             id: 'checkboxFacet',
             title: 'Checkbox',
             view: CheckboxFacet,
             isDefault: false,
+            schemaEnhancer: CheckboxFacet.schemaEnhancer,
+            stateToValue: CheckboxFacet.stateToValue,
+            valueToQuery: CheckboxFacet.valueToQuery,
+            filterListComponent: SelectFacetFilterListEntry,
+          },
+          {
+            id: 'daterangeFacet',
+            title: 'Date range',
+            view: DateRangeFacet,
+            isDefault: false,
+            stateToValue: DateRangeFacet.stateToValue,
+            valueToQuery: DateRangeFacet.valueToQuery,
+            filterListComponent: DateRangeFacetFilterListEntry,
+          },
+          {
+            id: 'toggleFacet',
+            title: 'Toggle',
+            view: ToggleFacet,
+            isDefault: false,
+            stateToValue: ToggleFacet.stateToValue,
+            valueToQuery: ToggleFacet.valueToQuery,
+            filterListComponent: ToggleFacetFilterListEntry,
           },
         ],
       },

package/src/helpers/Extensions/index.js

@@ -1,2 +1,2 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions from './withBlockExtensions';
+export withBlockExtensions, { resolveExtension } from './withBlockExtensions';

package/src/helpers/Extensions/withBlockExtensions.js

@@ -5,6 +5,10 @@
 import React from 'react';
 import config from '@plone/volto/registry';
 
+/**
+ * Retrieves the extension (variation) settings from the provided
+ * configuration, based on incoming data.
+ */
 export function resolveExtension(name, extensions, data) {
   const selectedExtension = data[name];
 

package/src/helpers/Extensions/withBlockExtensions.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import withBlockExtensions from './withBlockExtensions';
+import withBlockExtensions, { resolveExtension } from './withBlockExtensions';
 import config from '@plone/volto/registry';
 import { render } from '@testing-library/react';
 
@@ -56,3 +56,28 @@ describe('withBlockExtensions', () => {
     expect(container).toMatchSnapshot();
   });
 });
+
+describe('resolveExtensions', () => {
+  it('resolves the extensions from provided configuration', () => {
+    const data = { variation: 'extB' };
+    const extensions = {
+      variations: [
+        {
+          id: 'extA',
+          payload: 'extA specific',
+        },
+        {
+          id: 'extB',
+          payload: 'extB specific',
+        },
+      ],
+    };
+
+    const resolved = resolveExtension(
+      'variation',
+      extensions['variations'],
+      data,
+    );
+    expect(resolved.payload).toEqual('extB specific');
+  });
+});

package/src/helpers/index.js

@@ -84,6 +84,7 @@ export {
   withVariationSchemaEnhancer,
   withBlockExtensions,
   applySchemaEnhancer,
+  resolveExtension,
 } from './Extensions';
 export { asyncConnect } from './AsyncConnect';
 export { userHasRoles } from './User/User';

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

@@ -1057,4 +1057,33 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
       height: 28px !important;
     }
   }
+
+  .daterange-facet {
+    .ui.date-input input {
+      height: auto;
+    }
+
+    .ui-button {
+      margin: 0;
+    }
+
+    .DateInput {
+      width: 40%;
+      min-width: 75px;
+    }
+
+    .DateRangePickerInput_arrow_svg {
+      margin: 0 6px;
+    }
+
+    .DateRangePicker_picker {
+      z-index: 10;
+    }
+
+    .radio {
+      display: flex;
+      min-height: 37px;
+      align-items: center;
+    }
+  }
 }