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

package/src/components/Logo/Logo.jsx

@@ -1,44 +1,50 @@
 // SemanticUI-free pre-@plone/components
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import config from '@plone/volto/registry';
-import { UniversalLink } from '@plone/volto/components';
-import { toBackendLang } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 const messages = defineMessages({
-  site: {
-    id: 'Site',
-    defaultMessage: 'Site',
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
   },
-  homepage: {
-    id: 'Back to homepage',
-    defaultMessage: 'Back to homepage',
+  logoOf: {
+    id: 'Logo of',
+    defaultMessage: 'Logo of',
   },
 });
 
 const Logo = () => {
-  const { settings } = config;
-  const lang = useSelector((state) => state.intl.locale);
   const intl = useIntl();
   const site = useSelector((state) => state.site.data);
+  const navroot = useSelector((state) => state.navroot.data);
+  const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
+  const navRootLogo = navroot?.navroot?.logo?.download || null;
+  const navRootLogoWidth = navroot?.navroot?.logo?.width || null;
+  const navRootLogoHeight = navroot?.navroot?.logo?.height || null;
 
   return (
-    <UniversalLink
-      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
-      title={intl.formatMessage(messages.site)}
-    >
+    <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
       <img
         src={
-          site['plone.site_logo']
-            ? flattenToAppURL(site['plone.site_logo'])
-            : LogoImage
+          navRootLogo
+            ? flattenToAppURL(navRootLogo)
+            : site['plone.site_logo']
+              ? flattenToAppURL(site['plone.site_logo'])
+              : LogoImage
+        }
+        width={navRootLogoWidth}
+        height={navRootLogoHeight}
+        alt={
+          intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
+        }
+        title={
+          intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
         }
-        alt={intl.formatMessage(messages.homepage)}
-        title={intl.formatMessage(messages.homepage)}
       />
-    </UniversalLink>
+    </Link>
   );
 };
 

package/src/components/MobileNavigation/MobileNavigation.jsx

@@ -7,8 +7,9 @@ import { CSSTransition } from 'react-transition-group';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 
 import config from '@plone/volto/registry';
-import { Icon, SearchWidget } from '@plone/volto/components';
-import { toBackendLang } from '@plone/volto/helpers';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import arrowRightSVG from '@plone/volto/icons/right-key.svg';
 import arrowLeftSVG from '@plone/volto/icons/left-key.svg';
 import { MobileNavigationToggler } from './MobileNavigationToggler';

package/src/components/MobileNavigation/MobileToolsFooter.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LanguageSelector } from '@plone/volto/components';
+import LanguageSelector from '@plone/volto/components/theme/LanguageSelector/LanguageSelector';
 
 export const MobileToolsFooter = () => (
   <ul className="mobile-tools">

package/src/components/Navigation/Navigation.jsx

@@ -7,11 +7,12 @@ import { NavLink } from 'react-router-dom';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 import { useIntl, defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
 import config from '@plone/volto/registry';
 
-import { getNavigation } from '@plone/volto/actions';
-import { Icon } from '@plone/volto/components';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import NavItem from '@plone/volto/components/theme/Navigation/NavItem';
 

package/src/components/SearchWidget/IntranetSearchWidget.jsx

@@ -10,7 +10,7 @@ import { compose } from 'redux';
 import { PropTypes } from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 
 const messages = defineMessages({

package/src/components/SearchWidget/SearchWidget.jsx

@@ -6,7 +6,7 @@ import { compose } from 'redux';
 import { PropTypes } from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
 

package/src/components/Theme/EventView.jsx

@@ -5,11 +5,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { hasBlocksData } from '@plone/volto/helpers/Blocks/Blocks';
+import { flattenHTMLToAppURL } from '@plone/volto/helpers/Url/Url';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
-import { FormattedDate } from '@plone/volto/components';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import config from '@plone/volto/registry';
 import { FormattedMessage, injectIntl } from 'react-intl';
 

package/src/components/Theme/FileView.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Container as SemanticContainer } from 'semantic-ui-react';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL } from '@plone/volto/helpers/';
 import config from '@plone/volto/registry';
 import FileType from '../../helpers/Filetype';
 

package/src/components/Theme/NewsItemView.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
-import { FormattedDate } from '@plone/volto/components';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import config from '@plone/volto/registry';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 

package/src/components/Theming/Theming.tsx

@@ -0,0 +1,52 @@
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import type { Content } from '@plone/types';
+import { useSelector } from 'react-redux';
+import isEmpty from 'lodash/isEmpty';
+import config from '@plone/registry';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  form: {
+    global: Content;
+  };
+};
+
+// TODO: Change when we have the final list of colors
+// and if they are nested in the serialization under a key
+function buildStyleTag(content: Content, colors: string[]) {
+  if (Array.isArray(colors)) {
+    return colors
+      .filter((color) => content[color])
+      .map((color) => {
+        return `--${color.replace(/_/g, '-')}: ${content[color]}; `;
+      })
+      .join('');
+  }
+}
+
+const Theming = ({ navRoot }) => {
+  const colorFields = config.settings.userDefinedControlPanelColors;
+  const formData = useSelector<FormState, Content>(
+    (state) => state.form.global,
+  );
+
+  const liveContent = navRoot ? (!isEmpty(formData) ? formData : navRoot) : {};
+
+  return (
+    <>
+      <Helmet>
+        <style>
+          {`
+:root {
+  ${buildStyleTag(liveContent, colorFields)}
+}
+                `}
+        </style>
+      </Helmet>
+    </>
+  );
+};
+
+export default Theming;

package/src/components/Widgets/AlignWidget.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
-import { Icon } from '@plone/volto/components';
+import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { Button } from 'semantic-ui-react';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';

package/src/components/Widgets/BackgroundColorWidget.tsx

@@ -0,0 +1,18 @@
+import ColorPickerWidget from '@plone/volto/components/manage/Widgets/ColorPickerWidget';
+import config from '@plone/volto/registry';
+import type { ColorPickerWidgetProps } from '@plone/volto/components/manage/Widgets/ColorPickerWidget';
+
+const BackgroundColorWidget = (props: ColorPickerWidgetProps) => {
+  const colors: ColorPickerWidgetProps['colors'] =
+    config.settings.backgroundColors;
+
+  const defaultValue = colors.find(
+    (color) => color.name === config.settings.defaultBackgroundColor,
+  )?.style;
+
+  return (
+    <ColorPickerWidget {...props} default={defaultValue} colors={colors} />
+  );
+};
+
+export default BackgroundColorWidget;

package/src/components/Widgets/BlockAlignmentWidget.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageLeftSVG from '@plone/volto/icons/image-left.svg';
+import imageRightSVG from '@plone/volto/icons/image-right.svg';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+});
+
+export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+  left: [imageLeftSVG, intl.formatMessage(messages.left)],
+  right: [imageRightSVG, intl.formatMessage(messages.right)],
+  center: [imageFitSVG, intl.formatMessage(messages.center)],
+});
+
+const DEFAULT_ACTIONS = [
+  {
+    style: {
+      '--block-alignment': 'var(--align-left)',
+    },
+    name: 'left',
+    label: 'Left',
+  },
+  {
+    style: {
+      '--block-alignment': 'var(--align-center)',
+    },
+    name: 'center',
+    label: 'Center',
+  },
+  {
+    style: {
+      '--block-alignment': 'var(--align-right)',
+    },
+    name: 'right',
+    label: 'Right',
+  },
+];
+
+const BlockAlignmentWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  let filteredActions;
+  if (filterActions) {
+    filteredActions = actions.filter((action) =>
+      filterActions.includes(action.name),
+    );
+  } else {
+    filteredActions = actions;
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default BlockAlignmentWidget;

package/src/components/Widgets/BlockWidthWidget.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import type { IntlShape } from 'react-intl';
+
+const messages = defineMessages({
+  narrow: {
+    id: 'Narrow',
+    defaultMessage: 'Narrow',
+  },
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  layout: {
+    id: 'Layout',
+    defaultMessage: 'Layout',
+  },
+  full: {
+    id: 'Full',
+    defaultMessage: 'Full',
+  },
+});
+
+export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
+  default: [imageFitSVG, intl.formatMessage(messages.default)],
+  layout: [imageWideSVG, intl.formatMessage(messages.layout)],
+  full: [imageFullSVG, intl.formatMessage(messages.full)],
+});
+
+const DEFAULT_ACTIONS = [
+  {
+    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': 'unset',
+    },
+    name: 'full',
+    label: 'Full',
+  },
+];
+
+const BlockWidthWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  let filteredActions;
+  if (filterActions) {
+    filteredActions = actions.filter((action) =>
+      filterActions.includes(action.name),
+    );
+  } else {
+    filteredActions = actions;
+  }
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default BlockWidthWidget;