@kitconcept/volto-light-theme 6.0.0-alpha.8 → 6.0.0

package/src/components/Blocks/Teaser/DefaultBody.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Message } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const TeaserDefaultTemplate = (props) => {
+  const { className, data, isEditMode, style } = props;
+  const intl = useIntl();
+  const href = data.href?.[0] || {};
+  const image = data.preview_image?.[0];
+  const url = data.preview_image?.[0]?.['@id'];
+
+  const Image = config.getComponent('Image').component;
+  const Summary =
+    config.getComponent({
+      name: 'Summary',
+      dependencies: [href['@type']],
+    }).component || DefaultSummary;
+  const { openExternalLinkInNewTab } = config.settings;
+
+  return (
+    <div className={cx('block teaser', className)} style={style}>
+      <>
+        {!href && isEditMode && (
+          <Message>
+            <div className="teaser-item placeholder">
+              <img src={imageBlockSVG} alt="" />
+              <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+            </div>
+          </Message>
+        )}
+        {href && (
+          <MaybeWrap
+            condition={!isEditMode}
+            as={UniversalLink}
+            href={href['@id']}
+            target={
+              data.openLinkInNewTab ||
+              (openExternalLinkInNewTab && !isInternalURL(href['@id']))
+                ? '_blank'
+                : null
+            }
+          >
+            <div className="teaser-item default">
+              {url && !image?.image_field ? (
+                <div className="image-wrapper">
+                  <Image src={url} alt="" loading="lazy" responsive={true} />
+                </div>
+              ) : (
+                (href.hasPreviewImage || href.image_field || image) && (
+                  <div className="image-wrapper">
+                    <Image
+                      item={image || href}
+                      imageField={image ? image.image_field : href.image_field}
+                      alt=""
+                      loading="lazy"
+                      responsive={true}
+                    />
+                  </div>
+                )
+              )}
+              <div className="content">
+                <Summary item={{ ...href, ...data }} HeadingTag="h2" />
+              </div>
+            </div>
+          </MaybeWrap>
+        )}
+      </>
+    </div>
+  );
+};
+
+TeaserDefaultTemplate.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default TeaserDefaultTemplate;

package/src/components/Blocks/Teaser/schema.js

@@ -4,14 +4,8 @@ export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   return schema;
 };
 
-// Not sure why, but it was in the new one, check with blockModel3
-// export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-//   schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
-//   return schema;
-// };
 export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-  // Remove all the existing fields from the default schema
-  schema.properties.styles.schema.fieldsets[0].fields = [];
+  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
   return schema;
 };
 

package/src/components/Footer/ColumnLinks.tsx

@@ -0,0 +1,35 @@
+import isEmpty from 'lodash/isEmpty';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import type { Link } from '../../types';
+
+type ColumnLinksProps = { links: Array<Link> };
+
+const ColumnLinks = (props: ColumnLinksProps) => {
+  const { links } = props;
+
+  return (
+    <ul>
+      {links && Array.isArray(links)
+        ? links.map((link) => {
+            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} openLinkInNewTab={link.openInNewTab}>
+                  {title}
+                </UniversalLink>
+              </li>
+            );
+          })
+        : null}
+    </ul>
+  );
+};
+
+export default ColumnLinks;

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,32 @@
+import { useSelector, shallowEqual } from 'react-redux';
+import { Container } from '@plone/components';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
+import type { Content } from '@plone/types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  form: {
+    global: Content;
+  };
+};
+
+const Footer = () => {
+  const content = useSelector<FormState, Content>(
+    (state) => state.content.data,
+    shallowEqual,
+  );
+
+  return (
+    <footer id="footer">
+      <SlotRenderer name="preFooter" content={content} />
+      <SlotRenderer name="footer" content={content} />
+      <Container className="post-footer">
+        <SlotRenderer name="postFooter" content={content} />
+      </Container>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/Footer/slots/Colophon.tsx

@@ -0,0 +1,24 @@
+import { Container } from '@plone/components';
+import Copyright from './Copyright';
+import Logo from '../../Logo/Logo';
+import type { Content } from '@plone/types';
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import type { SiteHeaderSettings } from '../../../types';
+
+const Colophon = ({ content }: { content: Content }) => {
+  const logo = useLiveData<SiteHeaderSettings['logo']>(
+    content,
+    'voltolighttheme.header',
+    'logo',
+  );
+
+  return (
+    <Container className="colophon">
+      <div className="powered-by">Powered by Plone and Volto Light Theme</div>
+      <Copyright />
+      {!logo && <Logo />}
+    </Container>
+  );
+};
+
+export default Colophon;

package/src/components/Footer/slots/Copyright.tsx

@@ -0,0 +1,65 @@
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Container } from '@plone/components';
+
+const messages = defineMessages({
+  copyright: {
+    id: 'Copyright',
+    defaultMessage: 'Copyright',
+  },
+});
+
+const Copyright = () => {
+  const intl = useIntl();
+
+  return (
+    <Container className="default copyright">
+      <div className="footer-message">
+        <FormattedMessage
+          id="The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
+          defaultMessage="The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
+          values={{
+            plonecms: (
+              <FormattedMessage
+                id="Plone{reg} Open Source CMS/WCM"
+                defaultMessage="Plone{reg} Open Source CMS/WCM"
+                values={{ reg: <sup>®</sup> }}
+              />
+            ),
+            copyright: (
+              <abbr title={intl.formatMessage(messages.copyright)}>©</abbr>
+            ),
+            current_year: new Date().getFullYear(),
+            plonefoundation: (
+              <a className="item" href="https://plone.org/foundation">
+                <FormattedMessage
+                  id="Plone Foundation"
+                  defaultMessage="Plone Foundation"
+                />
+              </a>
+            ),
+          }}
+        />{' '}
+        <br />
+        <FormattedMessage
+          id="Distributed under the {license}."
+          defaultMessage="Distributed under the {license}."
+          values={{
+            license: (
+              <a
+                className="item"
+                href="https://www.gnu.org/licenses/old-licenses/lgpl-2.0.html"
+              >
+                <FormattedMessage
+                  id="GNU GPL license"
+                  defaultMessage="GNU GPL v2 license"
+                />
+              </a>
+            ),
+          }}
+        />
+      </div>
+    </Container>
+  );
+};
+
+export default Copyright;

package/src/components/Footer/slots/CoreFooter.tsx

@@ -0,0 +1,82 @@
+import { Container } from '@plone/components';
+import Logo from '@plone/volto/components/theme/Logo/Logo';
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import ColumnLinks from '../ColumnLinks';
+import type { SiteFooterSettings } from '../../../types';
+import type { Content } from '@plone/types';
+
+const CoreFooter = ({ content }: { content: Content }) => {
+  const footer_address = useLiveData<SiteFooterSettings['footer_address']>(
+    content,
+    'kitconcept.footer',
+    'footer_address',
+  );
+
+  const footer_column_left_header = useLiveData<
+    SiteFooterSettings['footer_column_left_header']
+  >(content, 'kitconcept.footer', 'footer_column_left_header');
+  const footer_column_left = useLiveData<
+    SiteFooterSettings['footer_column_left']
+  >(content, 'kitconcept.footer', 'footer_column_left');
+
+  const footer_column_middle_header = useLiveData<
+    SiteFooterSettings['footer_column_middle_header']
+  >(content, 'kitconcept.footer', 'footer_column_middle_header');
+  const footer_column_middle = useLiveData<
+    SiteFooterSettings['footer_column_middle']
+  >(content, 'kitconcept.footer', 'footer_column_middle');
+
+  const footer_column_right_header = useLiveData<
+    SiteFooterSettings['footer_column_right_header']
+  >(content, 'kitconcept.footer', 'footer_column_right_header');
+  const footer_column_right = useLiveData<
+    SiteFooterSettings['footer_column_right']
+  >(content, 'kitconcept.footer', 'footer_column_right');
+
+  return (
+    <Container className="footer">
+      <Container className="default">
+        <div className="footer-grid">
+          <div className="address-column">
+            <Logo />
+            <p
+              style={{ whiteSpace: 'pre-line' }}
+              dangerouslySetInnerHTML={{
+                __html: footer_address,
+              }}
+            />
+          </div>
+
+          {footer_column_left && (
+            <div className="column-left">
+              {footer_column_left_header && (
+                <h2>{footer_column_left_header}</h2>
+              )}
+              <ColumnLinks links={footer_column_left} />
+            </div>
+          )}
+
+          {footer_column_middle && (
+            <div className="column-middle">
+              {footer_column_middle_header && (
+                <h2>{footer_column_middle_header}</h2>
+              )}
+              <ColumnLinks links={footer_column_middle} />
+            </div>
+          )}
+
+          {footer_column_right && (
+            <div className="column-right">
+              {footer_column_right_header && (
+                <h2>{footer_column_right_header}</h2>
+              )}
+              <ColumnLinks links={footer_column_right} />
+            </div>
+          )}
+        </div>
+      </Container>
+    </Container>
+  );
+};
+
+export default CoreFooter;

package/src/components/Footer/slots/FollowUsLogoAndLinks.tsx

@@ -0,0 +1,80 @@
+import { FormattedMessage } from 'react-intl';
+import cx from 'classnames';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import { Container } from '@plone/components';
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import LinkList from '../../../primitives/LinkList';
+import type {
+  PloneGobrSocialMediaSettings,
+  SiteFooterSettings,
+} from '../../../types';
+import type { Content } from '@plone/types';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
+
+const FollowUsPostFooterLogoAndLinks = ({ content }: { content: Content }) => {
+  const social_links = useLiveData<
+    PloneGobrSocialMediaSettings['social_links']
+  >(content, 'plonegovbr.socialmedia.settings', 'social_links');
+
+  const footer_links = useLiveData<SiteFooterSettings['footer_links']>(
+    content,
+    'voltolighttheme.footer',
+    'footer_links',
+  );
+
+  const footer_logo = useLiveData<SiteFooterSettings['footer_logo']>(
+    content,
+    'kitconcept.footer',
+    'footer_logo',
+  );
+
+  const footerLogoSrc = footer_logo?.data
+    ? `data:${footer_logo['content-type']};base64,${footer_logo.data}`
+    : flattenToAppURL(footer_logo?.download);
+
+  return content ? (
+    <Container
+      className={cx('default follow-us-links-and-logo', {
+        'no-logo': !footer_logo?.data && !footer_logo?.download,
+      })}
+    >
+      <div className="followus-and-links">
+        {social_links?.length > 0 && (
+          <div className="follow-us">
+            <span>
+              <FormattedMessage id="Follow us:" defaultMessage="Follow us:" />
+            </span>
+            <SlotRenderer name="followUs" content={content} />
+          </div>
+        )}
+        {footer_links?.length > 0 && (
+          <div className="footer-links">
+            <SlotRenderer name="footerLinks" content={content} />
+            <LinkList links={footer_links} />
+          </div>
+        )}
+      </div>
+      {footer_logo?.data || footer_logo?.download ? (
+        <div className="footer-logo">
+          <span>
+            <FormattedMessage
+              id="Sponsored by:"
+              defaultMessage="Sponsored by:"
+            />
+          </span>
+          {/* @ts-ignore */}
+          <ConditionalLink
+            condition={content?.footer_logo_link}
+            to={content?.footer_logo_link}
+            openLinkInNewTab={true}
+          >
+            <img src={footerLogoSrc} alt="Sponsor Logo" />
+          </ConditionalLink>
+        </div>
+      ) : null}
+    </Container>
+  ) : null;
+};
+
+export default FollowUsPostFooterLogoAndLinks;

package/src/components/Footer/slots/FooterLogos.tsx

@@ -0,0 +1,44 @@
+import { useSelector, shallowEqual } from 'react-redux';
+import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import LogosContainer from '../../LogosContainer/LogosContainer';
+import type { Content } from '@plone/types';
+import type { SiteFooterSettings } from '../../../types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  form: {
+    global: Content;
+  };
+};
+
+const FooterLogos = () => {
+  const content = useSelector<FormState, Content>(
+    (state) => state.content.data,
+    shallowEqual,
+  );
+
+  const footer_logos = useLiveData<SiteFooterSettings['footer_logos']>(
+    content,
+    'voltolighttheme.footer',
+    'footer_logos',
+  );
+
+  const footer_logos_size = useLiveData<
+    SiteFooterSettings['footer_logos_size']
+  >(content, 'voltolighttheme.footer', 'footer_logos_size');
+  const footer_logos_container_width = useLiveData<
+    SiteFooterSettings['footer_logos_container_width']
+  >(content, 'voltolighttheme.footer', 'footer_logos_container_width');
+
+  return footer_logos?.length > 0 ? (
+    <LogosContainer
+      logos={footer_logos}
+      logos_size={footer_logos_size}
+      logos_container_width={footer_logos_container_width}
+    />
+  ) : null;
+};
+
+export default FooterLogos;