@kitconcept/volto-light-theme 6.0.0-alpha.9 → 6.0.1

package/src/components/Footer/FooterLinks.tsx

@@ -1,57 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import { addAppURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import type { BlocksData } from '@plone/types';
-import config from '@plone/volto/registry';
-
-type FooterLinksProps = { links: BlocksData; siteActions: any; lang: string };
-
-const FooterLinks = (props: FooterLinksProps) => {
-  const { lang, links, siteActions } = props;
-
-  return (
-    <ul className="footer-links">
-      {!isEmpty(links?.blocks)
-        ? links.blocks_layout.items.map((itemId) => {
-            const link = links.blocks[itemId];
-
-            if (isEmpty(link) || !link.href) return null;
-
-            const title = link.title || link.href[0]['title'];
-            const href = flattenToAppURL(link.href[0]?.['@id']);
-
-            if (!href) return null;
-
-            return (
-              <li className="item" key={href}>
-                <UniversalLink href={href}>{title}</UniversalLink>
-              </li>
-            );
-          })
-        : siteActions?.length
-          ? siteActions.map((item) => (
-              <li className="item" key={item.id}>
-                <UniversalLink
-                  className="item"
-                  href={
-                    config.settings.isMultilingual
-                      ? `/${lang}/${
-                          item.url
-                            ? flattenToAppURL(item.url)
-                            : addAppURL(item.id)
-                        }`
-                      : item.url
-                        ? flattenToAppURL(item.url)
-                        : addAppURL(item.id)
-                  }
-                >
-                  {item?.title}
-                </UniversalLink>
-              </li>
-            ))
-          : null}
-    </ul>
-  );
-};
-
-export default FooterLinks;

package/src/components/Header/Header.jsx

@@ -1,161 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-import { Container } from '@plone/components';
-import MobileNavigation from '../MobileNavigation/MobileNavigation';
-import { useIntl, defineMessages } from 'react-intl';
-import config from '@plone/volto/registry';
-import cx from 'classnames';
-import IntranetSearchWidget from '../SearchWidget/IntranetSearchWidget';
-
-import Anontools from '@plone/volto/components/theme/Anontools/Anontools';
-import LanguageSelector from '@plone/volto/components/theme/LanguageSelector/LanguageSelector';
-import Logo from '@plone/volto/components/theme/Logo/Logo';
-import Navigation from '@plone/volto/components/theme/Navigation/Navigation';
-import SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-
-import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
-
-const messages = defineMessages({
-  siteLabel: {
-    id: 'siteLabel',
-    defaultMessage: ' ',
-  },
-});
-
-const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
-  return (
-    <>
-      <div className="header">
-        <div className="tools-wrapper">
-          <LanguageSelector />
-
-          <div className="tools">
-            {!token && <Anontools />}
-            {siteAction &&
-              siteAction.map((item) => (
-                <UniversalLink key={item.url} href={item.url}>
-                  {item.title}
-                </UniversalLink>
-              ))}
-          </div>
-          {siteLabel && (
-            <div className="intranet">
-              <p>{siteLabel}</p>
-            </div>
-          )}
-        </div>
-        <div className="logo-nav-wrapper">
-          <div className="logo">
-            <Logo />
-          </div>
-          <Navigation pathname={pathname} />
-          <MobileNavigation pathname={pathname} />
-          <div className="search-wrapper navigation-desktop">
-            <div className="search">
-              <SearchWidget />
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
-
-const IntranetHeader = ({ pathname, siteLabel, token, siteAction }) => {
-  return (
-    <>
-      <div className="header">
-        <div className="tools-wrapper">
-          <LanguageSelector />
-
-          <div className="tools">
-            {!token && <Anontools />}
-            {siteAction &&
-              siteAction.map((item) => (
-                <UniversalLink key={item.url} href={item.url}>
-                  {item.title}
-                </UniversalLink>
-              ))}
-          </div>
-          {siteLabel && (
-            <div className="intranet">
-              <p>{siteLabel}</p>
-            </div>
-          )}
-        </div>
-        <div className="logo-nav-wrapper">
-          <div className="logo">
-            <Logo />
-          </div>
-          <div className="search-wrapper">
-            <div className="search">
-              <IntranetSearchWidget />
-            </div>
-          </div>
-          <Navigation pathname={pathname} />
-          <MobileNavigation pathname={pathname} />
-        </div>
-      </div>
-    </>
-  );
-};
-
-const Header = (props) => {
-  const { pathname } = props;
-  let siteLabel = config.settings.siteLabel;
-  const intranetHeader = config.settings.intranetHeader;
-  const token = useSelector((state) => state.userSession.token);
-  const content = useSelector((state) => state.content.data);
-  const siteAction = useSelector(
-    (state) => state.content.data?.['@components']?.actions?.site_actions,
-  );
-  const navRoot = useSelector((state) => state.navroot?.data?.navroot);
-  const intl = useIntl();
-  const translatedSiteLabel = intl.formatMessage(messages.siteLabel);
-
-  siteLabel =
-    siteLabel &&
-    (translatedSiteLabel !== 'siteLabel' && translatedSiteLabel !== ' '
-      ? translatedSiteLabel
-      : siteLabel);
-
-  return (
-    <>
-      <SlotRenderer name="aboveHeader" content={content} navRoot={navRoot} />
-      <header
-        className={cx('header-wrapper', { 'intranet-header': intranetHeader })}
-      >
-        <Container layout>
-          {intranetHeader ? (
-            <IntranetHeader
-              pathname={pathname}
-              siteLabel={siteLabel}
-              token={token}
-              siteAction={siteAction}
-            />
-          ) : (
-            <InternetHeader
-              pathname={pathname}
-              siteLabel={siteLabel}
-              token={token}
-              siteAction={siteAction}
-            />
-          )}
-        </Container>
-      </header>
-    </>
-  );
-};
-
-Header.propTypes = {
-  token: PropTypes.string,
-  pathname: PropTypes.string.isRequired,
-};
-
-Header.defaultProps = {
-  token: null,
-};
-
-export default Header;

package/src/components/Logo/Logo.jsx

@@ -1,51 +0,0 @@
-// SemanticUI-free pre-@plone/components
-import { defineMessages, useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
-import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-
-const messages = defineMessages({
-  home: {
-    id: 'Home',
-    defaultMessage: 'Home',
-  },
-  logoOf: {
-    id: 'Logo of',
-    defaultMessage: 'Logo of',
-  },
-});
-
-const Logo = () => {
-  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 (
-    <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
-      <img
-        src={
-          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']
-        }
-      />
-    </Link>
-  );
-};
-
-export default Logo;

package/src/components/Widgets/AlignWidget.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-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';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-  wide: {
-    id: 'Wide',
-    defaultMessage: 'Wide',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-const AlignWidget = (props) => {
-  const intl = useIntl();
-
-  const {
-    id,
-    onChange,
-    actions = ['left', 'right', 'center', 'full'],
-    value,
-  } = props;
-
-  React.useEffect(() => {
-    if (!props.value && props.default) {
-      props.onChange(props.id, props.default);
-    }
-  });
-
-  const ICON_MAP = {
-    left: imageLeftSVG,
-    right: imageRightSVG,
-    center: imageFitSVG,
-    wide: imageWideSVG,
-    full: imageFullSVG,
-  };
-
-  return (
-    <FormFieldWrapper {...props} className="align-widget">
-      <div className="align-buttons">
-        {actions.map((action) => (
-          <Button.Group key={action}>
-            <Button
-              icon
-              basic
-              aria-label={intl.formatMessage(messages[action])}
-              onClick={() => onChange(id, action)}
-              active={(action === 'center' && !value) || value === action}
-            >
-              <Icon name={ICON_MAP[action]} size="24px" />
-            </Button>
-          </Button.Group>
-        ))}
-      </div>
-    </FormFieldWrapper>
-  );
-};
-
-export default AlignWidget;

package/src/components/Widgets/BackgroundColorWidget.tsx

@@ -1,17 +0,0 @@
-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.blocks.themes;
-
-  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/BlocksObjectWidget.tsx

@@ -1,333 +0,0 @@
-import { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import omit from 'lodash/omit';
-import { Accordion, Button, Segment } from 'semantic-ui-react';
-import DragDropList from '@plone/volto/components/manage/DragDropList/DragDropList';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import { applySchemaDefaults } from '@plone/volto/helpers/Blocks/Blocks';
-import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
-import {
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
-  moveBlock,
-} from '@plone/volto/helpers/Blocks/Blocks';
-
-import upSVG from '@plone/volto/icons/up-key.svg';
-import downSVG from '@plone/volto/icons/down-key.svg';
-import deleteSVG from '@plone/volto/icons/delete.svg';
-import addSVG from '@plone/volto/icons/add.svg';
-import dragSVG from '@plone/volto/icons/drag.svg';
-import { v4 as uuid } from 'uuid';
-import type { BlocksData } from '@plone/types';
-
-const messages = defineMessages({
-  labelRemoveItem: {
-    id: 'Remove item',
-    defaultMessage: 'Remove item',
-  },
-  labelCollapseItem: {
-    id: 'Collapse item',
-    defaultMessage: 'Collapse item',
-  },
-  labelShowItem: {
-    id: 'Show item',
-    defaultMessage: 'Show item',
-  },
-  emptyObjectList: {
-    id: 'Empty object list',
-    defaultMessage: 'Empty object list',
-  },
-  add: {
-    id: 'Add (object list)',
-    defaultMessage: 'Add',
-  },
-});
-
-export type BlocksObjectWidgetProps = {
-  id: string;
-  block: string;
-  fieldSet: string;
-  title: string;
-  value?: BlocksData;
-  default?: string | object;
-  required?: boolean;
-  missing_value?: unknown;
-  className?: string;
-  onChange: (id: string, value: any) => void;
-  activeObject: number;
-  setActiveObject: (index: number) => void;
-};
-
-function deleteBlock(formData, blockId: string) {
-  const blocksFieldname = getBlocksFieldname(formData);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(formData);
-
-  let newFormData = {
-    ...formData,
-    [blocksLayoutFieldname]: {
-      items: formData[blocksLayoutFieldname].items.filter(
-        (value) => value !== blockId,
-      ),
-    },
-    [blocksFieldname]: omit(formData[blocksFieldname], [blockId]),
-  };
-
-  return newFormData;
-}
-
-/**
- * This is a DataGridField-equivalent widget for schema-based values.
- * The shape of the items in the array is defined using a schema.
- *
- * ObjectListWidget can receive an optional `schemaExtender` prop which is
- * a function that can mutate the schema for each individual item in the array.
- * An example schema definition of the a field that renders with the
- * ObjectListWidget:
- *
- * ```jsx
- *  columns: {
- *    title: 'Columns',
- *    description: 'Leave empty to show all columns',
- *    schema: SomeItemSchema,
- *    widget: 'object_list',
- *    schemaExtender: (schema, data) => {
- *      const mutated = lodash.cloneDeep(schema);
- *      mutated.properties.extraField = {
- *        title: 'Extra field',
- *      }
- *      mutated.fieldsets[0].fields.push('extraField');
- *      return mutated;
- *    },
- *    activeObject: 0, // Current active object drilled down from the schema (if present)
- *    setActiveObject: () => {} // The current active object state updater function drilled down from the schema (if present)
- *  },
- * ```
- */
-const ObjectListWidget = (props: BlocksObjectWidgetProps) => {
-  const { block, fieldSet, id, schema, value, onChange, schemaExtender } =
-    props;
-  const [localActiveObject, setLocalActiveObject] = useState(
-    props.activeObject ?? value?.blocks_layout?.items?.length - 1,
-  );
-
-  let activeObject: number, setActiveObject: (index: number) => void;
-  if (
-    (props.activeObject || props.activeObject === 0) &&
-    props.setActiveObject
-  ) {
-    activeObject = props.activeObject;
-    setActiveObject = props.setActiveObject;
-  } else {
-    activeObject = localActiveObject;
-    setActiveObject = setLocalActiveObject;
-  }
-
-  const intl = useIntl();
-
-  function handleChangeActiveObject(e, blockProps) {
-    const { index } = blockProps;
-    const newIndex = activeObject === index ? -1 : index;
-
-    setActiveObject(newIndex);
-  }
-  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
-
-  const topLayerShadow = '0 1px 1px rgba(0,0,0,0.15)';
-  const secondLayer = ', 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0,0,0,0.15)';
-  const thirdLayer = ', 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0,0,0,0.15)';
-
-  return (
-    <div className="objectlist-widget">
-      <FormFieldWrapper {...props} noForInFieldLabel className="objectlist">
-        <div className="add-item-button-wrapper">
-          <Button
-            compact
-            icon
-            aria-label={
-              objectSchema.addMessage ||
-              `${intl.formatMessage(messages.add)} ${objectSchema.title}`
-            }
-            onClick={(e) => {
-              e.preventDefault();
-              const newId = uuid();
-              const data = {};
-
-              const objSchema = schemaExtender
-                ? schemaExtender(schema, data, intl)
-                : objectSchema;
-              const dataWithDefaults = applySchemaDefaults({
-                data,
-                schema: objSchema,
-                intl,
-              });
-
-              onChange(id, {
-                ...(value || {}),
-                blocks: {
-                  ...value?.blocks,
-                  [newId]: dataWithDefaults,
-                },
-                blocks_layout: {
-                  ...value?.blocks_layout,
-                  items: [...(value?.blocks_layout?.items || []), newId],
-                },
-              });
-
-              setActiveObject(value?.blocks_layout?.items?.length || 0);
-            }}
-          >
-            <Icon name={addSVG} size="18px" />
-            &nbsp;
-            {/* Custom addMessage in schema, else default to English */}
-            {objectSchema.addMessage ||
-              `${intl.formatMessage(messages.add)} ${objectSchema.title}`}
-          </Button>
-        </div>
-        {value?.blocks_layout?.items?.length === 0 && (
-          <input
-            aria-labelledby={`fieldset-${
-              fieldSet || 'default'
-            }-field-label-${id}`}
-            type="hidden"
-            value={intl.formatMessage(messages.emptyObjectList)}
-          />
-        )}
-      </FormFieldWrapper>
-      {/* {value?.blocks_layout?.items.map((blockId, index) => {
-        const blockData = value?.blocks[blockId];
-        return (
-          <ObjectWidget
-            id={`${blockId}-${index}`}
-            key={`ow-${blockId}-${index}`}
-            block={block}
-            schema={
-              schemaExtender
-                ? schemaExtender(schema, blockData, intl)
-                : objectSchema
-            }
-            value={blockData}
-            onChange={(fi, fv) => {
-              const changedBlockId = fi.slice(0, -2);
-              const newvalue = { ...value.blocks[changedBlockId], ...fv };
-              onChange(id, {
-                ...value,
-                blocks: { ...value.blocks, [changedBlockId]: newvalue },
-              });
-            }}
-          />
-        );
-      })} */}
-      <DragDropList
-        style={{
-          boxShadow: `${topLayerShadow}${value?.blocks_layout?.items?.length > 1 ? secondLayer : ''}${
-            value?.blocks_layout?.items?.length > 2 ? thirdLayer : ''
-          }`,
-        }}
-        forwardedAriaLabelledBy={`fieldset-${
-          fieldSet || 'default'
-        }-field-label-${id}`}
-        childList={
-          value?.blocks_layout?.items?.map((blockId) => [
-            blockId,
-            value.blocks[blockId],
-          ]) || []
-        }
-        onMoveItem={(result) => {
-          const { source, destination } = result;
-          if (!destination) {
-            return;
-          }
-          const newFormData = moveBlock(value, source.index, destination.index);
-          onChange(id, newFormData);
-          return true;
-        }}
-      >
-        {({ child, childId, index, draginfo }) => {
-          return (
-            <div
-              ref={draginfo.innerRef}
-              {...draginfo.draggableProps}
-              key={childId}
-            >
-              <Accordion key={index} fluid styled>
-                <Accordion.Title
-                  active={activeObject === index}
-                  index={index}
-                  onClick={handleChangeActiveObject}
-                  aria-label={`${
-                    activeObject === index
-                      ? intl.formatMessage(messages.labelCollapseItem)
-                      : intl.formatMessage(messages.labelShowItem)
-                  } #${index + 1}`}
-                >
-                  <button
-                    style={{
-                      visibility: 'visible',
-                      display: 'inline-block',
-                    }}
-                    {...draginfo.dragHandleProps}
-                    className="drag handle"
-                  >
-                    <Icon name={dragSVG} size="18px" />
-                  </button>
-
-                  <div className="accordion-title-wrapper">
-                    {`${objectSchema.title} #${index + 1}`}
-                  </div>
-                  <div className="accordion-tools">
-                    <button
-                      aria-label={`${intl.formatMessage(
-                        messages.labelRemoveItem,
-                      )} #${index + 1}`}
-                      onClick={() => {
-                        onChange(id, deleteBlock(value, childId));
-                      }}
-                    >
-                      <Icon name={deleteSVG} size="20px" color="#e40166" />
-                    </button>
-                    {activeObject === index ? (
-                      <Icon name={upSVG} size="20px" />
-                    ) : (
-                      <Icon name={downSVG} size="20px" />
-                    )}
-                  </div>
-                </Accordion.Title>
-                <Accordion.Content active={activeObject === index}>
-                  <Segment>
-                    <ObjectWidget
-                      id={`${childId}-${index}`}
-                      key={`ow-${childId}-${index}`}
-                      block={block}
-                      schema={
-                        schemaExtender
-                          ? schemaExtender(schema, child, intl)
-                          : objectSchema
-                      }
-                      value={child}
-                      onChange={(fi, fv) => {
-                        const changedBlockId = fi.slice(0, -2);
-                        const newvalue = {
-                          ...value.blocks[changedBlockId],
-                          ...fv,
-                        };
-                        onChange(id, {
-                          ...value,
-                          blocks: {
-                            ...value.blocks,
-                            [changedBlockId]: newvalue,
-                          },
-                        });
-                      }}
-                    />
-                  </Segment>
-                </Accordion.Content>
-              </Accordion>
-            </div>
-          );
-        }}
-      </DragDropList>
-    </div>
-  );
-};
-export default ObjectListWidget;