@kitconcept/volto-light-theme 5.0.1 → 6.0.0-alpha.0

package/src/components/Widgets/ThemingColorPicker.tsx

@@ -0,0 +1,33 @@
+import { ColorField, ColorPicker } from '@plone/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+import '@plone/components/src/styles/basic/ColorPicker.css';
+
+const ColorPickerWidget = (props: {
+  id: string;
+  title: string;
+  value: string;
+  default: string;
+  onChange: (id: string, value: any) => void;
+}) => {
+  return (
+    <FormFieldWrapper {...props} className="color">
+      <ColorPicker
+        defaultValue="#ffffff"
+        onChange={(value) =>
+          props.onChange(props.id, value?.toString('hex') || null)
+        }
+        value={props.value || '#ffffff'}
+      />
+      <ColorField
+        aria-label={`Pick a color for ${props.title}`}
+        value={props.value}
+        onChange={(value) =>
+          props.onChange(props.id, value?.toString('hex') || null)
+        }
+      />
+    </FormFieldWrapper>
+  );
+};
+
+export default ColorPickerWidget;

package/src/config/blocks.tsx

@@ -0,0 +1,352 @@
+import type { ConfigType } from '@plone/registry';
+import type { StyleDefinition } from '@plone/types';
+
+import cloneDeep from 'lodash/cloneDeep';
+
+import { composeSchema } from '@plone/volto/helpers/Extensions';
+import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
+import { defaultStylingSchema } from '../components/Blocks/schema';
+import { teaserSchemaEnhancer } from '../components/Blocks/Teaser/schema';
+import { videoBlockSchemaEnhancer } from '../components/Blocks/Video/schema';
+import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
+import { gridImageDisableSizeAndPositionHandlersSchema } from '@plone/volto/components/manage/Blocks/Image/schema';
+import { disableBgColorSchema } from '../components/Blocks/disableBgColorSchema';
+
+import TopSideFacets from '../components/Blocks/Search/TopSideFacets';
+
+import GridListingBlockTemplate from '../components/Blocks/Listing/GridTemplate';
+import { ButtonStylingSchema } from '../components/Blocks/Button/schema';
+import { SeparatorStylingSchema } from '../components/Blocks/Separator/schema';
+
+import { imageBlockSchemaEnhancer } from '../components/Blocks/Image/schema';
+import { ImageBlockDataAdapter } from '../components/Blocks/Image/adapter';
+
+import { AccordionSchemaEnhancer } from '../components/Blocks/Accordion/schema';
+
+import { searchBlockSchemaEnhancer } from '../components/Blocks/Search/schema';
+
+import gridSVG from '../icons/block_icn_grid.svg';
+import accordionSVG from '../icons/block_icn_accordion.svg';
+import descriptionSVG from '@plone/volto/icons/description.svg';
+
+import { tocBlockSchemaEnhancer } from '../components/Blocks/Toc/schema';
+import { mapsBlockSchemaEnhancer } from '../components/Blocks/Maps/schema';
+import { sliderBlockSchemaEnhancer } from '../components/Blocks/Slider/schema';
+import EventMetadataView from '../components/Blocks/EventMetadata/View';
+
+declare module '@plone/types' {
+  export interface BlocksConfigData {
+    introduction: BlockConfigBase;
+    heading: BlockConfigBase;
+    __button: BlockConfigBase;
+    separator: BlockConfigBase;
+    slider: BlockConfigBase;
+    eventMetadata: BlockConfigBase;
+    accordion: BlockConfigBase;
+    hero: BlockConfigBase;
+    slateTable: BlockConfigBase;
+  }
+  export interface BlockConfigBase {
+    themes?: StyleDefinition[];
+    allowedBlocks?: string[];
+    allowed_headline_tags?: string[][];
+    dataAdapter?: any;
+    unwantedButtons?: string[];
+    imageScale?: string;
+    allowed_headings?: string[][];
+  }
+  export interface BlocksFormData {
+    headline: string;
+    styles: string;
+  }
+}
+
+export default function install(config: ConfigType) {
+  // Initial block for event content type
+  config.blocks.initialBlocks = {
+    Event: [
+      { '@type': 'title' },
+      { '@type': 'eventMetadata', fixed: true, required: true },
+      { '@type': 'slate' },
+    ],
+  };
+
+  // Palettes
+  config.blocks.themes = [
+    {
+      style: {
+        '--theme-color': '#fff', // Block Wrapper
+        '--theme-high-contrast-color': '#ecebeb', // Cards in Grid block
+        '--theme-foreground-color': '#000',
+        '--theme-low-contrast-foreground-color': '#555555',
+      },
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      style: {
+        '--theme-color': '#ecebeb',
+        '--theme-high-contrast-color': '#fff',
+        '--theme-foreground-color': '#000',
+        '--theme-low-contrast-foreground-color': '#555555',
+      },
+      name: 'grey',
+      label: 'Grey',
+    },
+  ];
+
+  // Default block widths
+  config.blocks.widths = [
+    {
+      style: {
+        '--block-width': 'var(--narrow-container-width)',
+      },
+      name: 'narrow',
+      label: 'Narrow',
+    },
+    {
+      style: {
+        '--block-width': 'var(--default-container-width)',
+      },
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      style: {
+        '--block-width': 'var(--layout-container-width)',
+      },
+      name: 'layout',
+      label: 'Layout',
+    },
+    {
+      style: {
+        '--block-width': '100%',
+      },
+      name: 'full',
+      label: 'Full Width',
+    },
+  ];
+
+  function blockThemesEnhancer(data) {
+    if (!data['@type']) return {};
+    if (data.theme) {
+      const blockConfig = config.blocks.blocksConfig[data['@type']];
+      const blockStyleDefinitions =
+        // We look up for the blockThemes in the block's config, then in the global config
+        // We keep `colors` for BBB, but `themes` should be used
+        blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
+      return data.theme
+        ? findStyleByName(blockStyleDefinitions, data.theme)
+        : {};
+    } else {
+      // No theme, return default color
+      return findStyleByName(config.blocks.themes, 'default');
+    }
+  }
+
+  config.registerUtility({
+    name: 'blockThemesEnhancer',
+    type: 'styleWrapperStyleObjectEnhancer',
+    method: blockThemesEnhancer,
+  });
+
+  // No required blocks (eg. Title)
+  config.blocks.requiredBlocks = [
+    ...config.blocks.requiredBlocks,
+    'eventMetadata',
+  ];
+
+  // Remove Hero Block (No longer in Volto 18)
+  // TODO: Remove already?
+  if (config.blocks.blocksConfig?.hero) {
+    config.blocks.blocksConfig.hero.restricted = true;
+  }
+
+  // Default Blocks configuration
+
+  config.blocks.blocksConfig.accordion = {
+    ...config.blocks.blocksConfig.accordion,
+    mostUsed: true,
+    icon: accordionSVG,
+    allowedBlocks: [
+      'slate',
+      'teaser',
+      'image',
+      'listing',
+      'slateTable',
+      'separator',
+    ],
+    // Not needed anymore, as we have the the fallback in the StyleWrapperEnhancer
+    schemaEnhancer: composeSchema(
+      AccordionSchemaEnhancer,
+      defaultStylingSchema,
+    ),
+    sidebarTab: 1,
+  };
+
+  config.blocks.blocksConfig.slateTable = {
+    ...config.blocks.blocksConfig.slateTable,
+    schemaEnhancer: defaultStylingSchema,
+  };
+
+  config.blocks.blocksConfig.listing = {
+    ...config.blocks.blocksConfig.listing,
+    schemaEnhancer: defaultStylingSchema,
+    allowed_headline_tags: [['h2', 'h2']],
+    variations: [
+      ...config.blocks.blocksConfig.listing.variations,
+      {
+        id: 'grid',
+        title: 'Grid',
+        template: GridListingBlockTemplate,
+      },
+    ],
+  };
+
+  config.blocks.blocksConfig.image = {
+    ...config.blocks.blocksConfig.image,
+    schemaEnhancer: composeSchema(
+      defaultStylingSchema,
+      imageBlockSchemaEnhancer,
+    ),
+    dataAdapter: ImageBlockDataAdapter,
+  };
+
+  // Accordion internal `blocksConfig` amendments
+  // We cloneDeep the blocksConfig to avoid modifying the original object
+  // in subsequent modifications of the accordion block config
+  config.blocks.blocksConfig.accordion.blocksConfig = cloneDeep(
+    config.blocks.blocksConfig,
+  );
+
+  config.blocks.blocksConfig.accordion.blocksConfig.teaser.schemaEnhancer =
+    composeSchema(teaserSchemaEnhancer, disableBgColorSchema);
+
+  config.blocks.blocksConfig.gridBlock.themes = config.blocks.themes;
+  config.blocks.blocksConfig.gridBlock.schemaEnhancer = defaultStylingSchema;
+  config.blocks.blocksConfig.gridBlock.icon = gridSVG;
+
+  // Grids internal `blocksConfig` amendments
+  // Slate in grids must have an extra wrapper with the `slate` className
+  const OriginalSlateBlockView = config.blocks.blocksConfig.slate.view;
+  config.blocks.blocksConfig.gridBlock.blocksConfig.slate.view = (props) => {
+    return (
+      <div className="slate">
+        <OriginalSlateBlockView {...props} />
+      </div>
+    );
+  };
+
+  config.blocks.blocksConfig.gridBlock.blocksConfig.image.schemaEnhancer =
+    composeSchema(
+      imageBlockSchemaEnhancer,
+      gridImageDisableSizeAndPositionHandlersSchema,
+    );
+  config.blocks.blocksConfig.gridBlock.blocksConfig.image.dataAdapter =
+    ImageBlockDataAdapter;
+
+  config.blocks.blocksConfig.gridBlock.blocksConfig.teaser.schemaEnhancer =
+    composeSchema(gridTeaserDisableStylingSchema, teaserSchemaEnhancer);
+
+  config.blocks.blocksConfig.gridBlock.blocksConfig.listing.allowed_headline_tags =
+    [['h2', 'h2']];
+
+  config.blocks.blocksConfig.introduction = {
+    ...config.blocks.blocksConfig.introduction,
+    unwantedButtons: ['heading-three', 'blockquote'],
+    schemaEnhancer: defaultStylingSchema,
+  };
+
+  config.blocks.blocksConfig.slate = {
+    ...config.blocks.blocksConfig.slate,
+    schemaEnhancer: defaultStylingSchema,
+    sidebarTab: 1,
+  };
+
+  config.blocks.blocksConfig.teaser = {
+    ...config.blocks.blocksConfig.teaser,
+    group: 'teasers',
+    imageScale: 'larger',
+    schemaEnhancer: composeSchema(defaultStylingSchema, teaserSchemaEnhancer),
+  };
+
+  config.blocks.blocksConfig.video = {
+    ...config.blocks.blocksConfig.video,
+    schemaEnhancer: composeSchema(
+      defaultStylingSchema,
+      videoBlockSchemaEnhancer,
+    ),
+  };
+  config.blocks.blocksConfig.maps = {
+    ...config.blocks.blocksConfig.maps,
+    schemaEnhancer: composeSchema(
+      defaultStylingSchema,
+      mapsBlockSchemaEnhancer,
+    ),
+  };
+
+  config.blocks.blocksConfig.heading = {
+    ...config.blocks.blocksConfig.heading,
+    sidebarTab: 0,
+    allowed_headings: [['h2', 'h2']],
+    schemaEnhancer: defaultStylingSchema,
+  };
+
+  config.blocks.blocksConfig.search = {
+    ...config.blocks.blocksConfig.search,
+    schemaEnhancer: composeSchema(
+      defaultStylingSchema,
+      searchBlockSchemaEnhancer,
+    ),
+    variations: [
+      {
+        id: 'facetsTopSide',
+        title: 'Facets on top',
+        view: TopSideFacets,
+        isDefault: true,
+      },
+    ],
+  };
+
+  config.blocks.blocksConfig.__button = {
+    ...config.blocks.blocksConfig.__button,
+    schemaEnhancer: ButtonStylingSchema,
+  };
+
+  config.blocks.blocksConfig.eventMetadata = {
+    id: 'eventMetadata',
+    title: 'EventMetadata',
+    icon: descriptionSVG,
+    group: 'common',
+    view: EventMetadataView,
+    edit: EventMetadataView,
+    restricted: ({ properties, block }) =>
+      properties['@type'] === 'Event' ? false : true,
+    mostUsed: false,
+    sidebarTab: 0,
+  };
+
+  // Check if the separator is present before enhancing it
+  if (config.blocks.blocksConfig?.separator?.id) {
+    config.blocks.blocksConfig.separator = {
+      ...config.blocks.blocksConfig.separator,
+      schemaEnhancer: SeparatorStylingSchema,
+    };
+  }
+
+  // TOC Block
+  config.blocks.blocksConfig.toc = {
+    ...config.blocks.blocksConfig.toc,
+    schemaEnhancer: composeSchema(tocBlockSchemaEnhancer, defaultStylingSchema),
+    // remove horizontal variation
+    variations: [config.blocks.blocksConfig.toc.variations[0]],
+  };
+
+  // Slider Block
+  config.blocks.blocksConfig.slider = {
+    ...config.blocks.blocksConfig.slider,
+    schemaEnhancer: sliderBlockSchemaEnhancer,
+  };
+
+  return config;
+}

package/src/config/classExtenders.ts

@@ -0,0 +1,101 @@
+import type { ConfigType } from '@plone/registry';
+import { getPreviousNextBlock } from '@plone/volto/helpers/Blocks/Blocks';
+import { getCurrentStyleByName } from '../helpers/helpers';
+
+export default function install(config: ConfigType) {
+  // Register custom StyleWrapper ClassNames
+  config.settings.styleClassNameExtenders = [
+    ({ block, content, data, classNames }) => {
+      let styles = [];
+      const [previousBlock, nextBlock] = getPreviousNextBlock({
+        content,
+        block,
+      });
+
+      // Inject a class depending of which type is the next block
+      if (nextBlock?.['@type']) {
+        styles.push(`next--is--${nextBlock['@type']}`);
+      }
+
+      // Inject a class depending if previous is the same type of block
+      if (data?.['@type'] === previousBlock?.['@type']) {
+        styles.push('previous--is--same--block-type');
+      }
+
+      // Inject a class depending if next is the same type of block
+      if (data?.['@type'] === nextBlock?.['@type']) {
+        styles.push('next--is--same--block-type');
+      }
+
+      // Inject a class depending if it's the first of block type
+      if (data?.['@type'] !== previousBlock?.['@type']) {
+        styles.push('is--first--of--block-type');
+      }
+
+      // Inject a class depending if it's the last of block type
+      if (data?.['@type'] !== nextBlock?.['@type']) {
+        styles.push('is--last--of--block-type');
+      }
+
+      // Inject a class depending if it has a headline
+      if (data?.headline || previousBlock?.['@type'] === 'heading') {
+        styles.push('has--headline');
+      }
+
+      // Given a StyleWrapper defined `backgroundColor` style
+      const previousColor = previousBlock?.theme || 'default';
+
+      const currentColor = data?.theme || 'default';
+
+      const nextColor = nextBlock?.theme || 'default';
+
+      // Inject a class depending if the previous block has the same `backgroundColor`
+      if (currentColor === previousColor) {
+        styles.push('previous--has--same--backgroundColor');
+      } else if (currentColor !== previousColor) {
+        styles.push('previous--has--different--backgroundColor');
+      }
+
+      // Inject a class depending if the next block has the same `backgroundColor`
+      if (currentColor === nextColor) {
+        styles.push('next--has--same--backgroundColor');
+      } else if (currentColor !== nextColor) {
+        styles.push('next--has--different--backgroundColor');
+      }
+
+      return [...classNames, ...styles];
+    },
+  ];
+
+  // Blocks width convenience classes injection
+  config.settings.styleClassNameExtenders.push(
+    ({ data, classNames }: { data: any; classNames: Array<string> }) => {
+      const currentBlockWidth =
+        getCurrentStyleByName(
+          config.blocks.widths,
+          'blockWidth:noprefix',
+          data,
+        ) || 'default';
+      if (currentBlockWidth) {
+        return [...classNames, `has--block-width--${currentBlockWidth}`];
+      }
+      return classNames;
+    },
+  );
+
+  config.settings.styleClassNameExtenders.push(
+    ({ data, classNames }: { data: any; classNames: Array<string> }) => {
+      const currentBlockBackgroundColor = data?.theme || 'default';
+      if (currentBlockBackgroundColor) {
+        // This has intentionally a different class name than in `VLT3`
+        return [
+          ...classNames,
+          `has--background-color--${currentBlockBackgroundColor}`,
+        ];
+      }
+      return classNames;
+    },
+  );
+
+  return config;
+}

package/src/config/settings.ts

@@ -0,0 +1,35 @@
+import type { ConfigType } from '@plone/registry';
+
+declare module '@plone/types' {
+  export interface SettingsConfig {
+    slate: {
+      useLinkedHeadings: boolean;
+    };
+    userDefinedControlPanelColors: string[];
+  }
+}
+
+export default function install(config: ConfigType) {
+  config.settings.enableAutoBlockGroupingByBackgroundColor = true;
+  config.settings.navDepth = 3;
+  config.settings.enableFatMenu = true;
+  config.settings.slate.useLinkedHeadings = false;
+  config.settings.contentMetadataTagsImageField = 'preview_image';
+  config.settings.querystringSearchGet = true;
+
+  config.settings.siteLabel = '';
+  config.settings.intranetHeader = false;
+
+  config.settings.slidingSearchAnimation = true;
+  config.settings.openExternalLinkInNewTab = true;
+  config.settings.userDefinedControlPanelColors = [
+    'accent_color',
+    'accent_foreground_color',
+    'primary_color',
+    'primary_foreground_color',
+    'secondary_color',
+    'secondary_foreground_color',
+  ];
+
+  return config;
+}

package/src/config/slots.ts

@@ -0,0 +1,12 @@
+import type { ConfigType } from '@plone/registry';
+import Theming from '../components/Theming/Theming';
+
+export default function install(config: ConfigType) {
+  config.registerSlotComponent({
+    slot: 'aboveHeader',
+    name: 'Theming',
+    component: Theming,
+  });
+
+  return config;
+}

package/src/config/widgets.ts

@@ -0,0 +1,31 @@
+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';
+
+declare module '@plone/types' {
+  export interface WidgetsConfigByWidget {
+    BackgroundColorWidget: React.ComponentType<any>;
+    blockWidth: React.ComponentType<any>;
+    blockAlignment: React.ComponentType<any>;
+    themingColorPicker: typeof ThemingColorPicker;
+    footerLogos: typeof FooterLogosWidget;
+    footerLinks: typeof FooterLinksWidget;
+  }
+}
+
+export default function install(config: ConfigType) {
+  config.widgets.widget.BackgroundColorWidget = BackgroundColorWidget;
+  config.widgets.widget.blockWidth = BlockWidthWidget;
+  config.widgets.widget.blockAlignment = BlockAlignmentWidget;
+  config.widgets.widget.color_picker = ColorPickerWidget;
+  config.widgets.widget.themingColorPicker = ThemingColorPicker;
+  config.widgets.widget.footerLogos = FooterLogosWidget;
+  config.widgets.widget.footerLinks = FooterLinksWidget;
+
+  return config;
+}