@eeacms/volto-cca-policy 0.1.1

package/src/components/theme/Banner/Banner.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { Icon, Button, Grid } from 'semantic-ui-react';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
+import config from '@plone/volto/registry';
+
+const socialPlatforms = {
+  facebook: {
+    shareLink: (url) => `https://facebook.com/sharer.php?u=${url}`,
+  },
+  twitter: {
+    shareLink: (url) => `https://www.twitter.com/share?url=${url}`,
+  },
+  linkedin: {
+    shareLink: (url) =>
+      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  },
+  reddit: {
+    shareLink: (url, title) => `https://reddit.com/submit?url=${url}`,
+  },
+};
+
+export const getImageSource = (image) => {
+  if (image?.download) return image.download;
+  if (image?.encoding)
+    return `data:${image['content-type']};${image['encoding']},${image['data']}`;
+  return null;
+};
+
+export const sharePage = (url, platform) => {
+  if (!socialPlatforms[platform]) return;
+  const link = document.createElement('a');
+  link.setAttribute('href', socialPlatforms[platform].shareLink(url));
+  link.setAttribute('target', '_blank');
+  link.setAttribute('rel', 'noreferrer');
+  link.click();
+};
+
+const Banner = ({ children }) => {
+  return <div className="eea banner">{children}</div>;
+};
+
+Banner.Action = ({ title, icon, color, onClick, className }) => {
+  return (
+    <div className="action">
+      <Button className={className} basic icon inverted onClick={onClick}>
+        <Icon className={icon} color={color}></Icon>
+        <span className="mobile hidden">{title}</span>
+      </Button>
+    </div>
+  );
+};
+
+Banner.Content = ({ children, actions }) => {
+  return (
+    <div className="content">
+      <Grid>
+        <Grid.Column mobile={10} tablet={9} computer={9}>
+          {children}
+        </Grid.Column>
+        <Grid.Column mobile={2} tablet={3} computer={3} className="actions">
+          {actions}
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+};
+
+Banner.Title = ({ children }) => (
+  <h1 className="documentFirstHeading">{children}</h1>
+);
+Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
+Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
+  const locale = config.settings.dateLocale || 'en-gb';
+  if (hidden || !value) return '';
+  if (type === 'date' && value)
+    return (
+      <span className={`field ${type}`} title={title.replace('{}', value)}>
+        {label}{' '}
+        {formatDate({
+          date: value,
+          format: {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+          },
+          locale: locale,
+        })}
+      </span>
+    );
+  return <span className={`field ${type}`}>{value}</span>;
+};
+
+export default compose(
+  connect((state) => ({
+    content: state.content.data,
+  })),
+)(Banner);

package/src/components/theme/Banner/View.jsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useMemo } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import { defineMessages, injectIntl } from 'react-intl';
+import { startCase } from 'lodash';
+import qs from 'querystring';
+import { Container, Popup } from 'semantic-ui-react';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import Banner from './Banner';
+import { getImageSource, sharePage } from './Banner';
+
+import './styles.less';
+
+const messages = defineMessages({
+  share: {
+    id: 'Share',
+    defaultMessage: 'Share',
+  },
+  share_to: {
+    id: 'Share to',
+    defaultMessage: 'Share to',
+  },
+  download: {
+    id: 'Download',
+    defaultMessage: 'Download',
+  },
+  created: {
+    id: 'Created',
+    defaultMessage: 'Created',
+  },
+  created_on: {
+    id: 'Created on',
+    defaultMessage: 'Created on',
+  },
+  published: {
+    id: 'Published',
+    defaultMessage: 'Published',
+  },
+  published_on: {
+    id: 'Published on',
+    defaultMessage: 'Published on',
+  },
+  modified: {
+    id: 'Modified',
+    defaultMessage: 'Modified',
+  },
+  modified_on: {
+    id: 'Modified on',
+    defaultMessage: 'Modified on',
+  },
+});
+
+const friendlyId = (id) => {
+  if (typeof id !== 'string') return id;
+  return startCase(id);
+};
+
+const ContainerWrapper = ({ fluid, children }) => {
+  if (fluid) return <React.Fragment>{children}</React.Fragment>;
+  return <Container>{children}</Container>;
+};
+
+const Title = ({ config = {}, properties }) => {
+  const view = useMemo(() => {
+    return config.view;
+  }, [config.view]);
+
+  if (view) {
+    return view;
+  }
+  return <Banner.Title>{properties['title']}</Banner.Title>;
+};
+
+const View = (props) => {
+  const { banner = {}, fluid, intl, location, types = [] } = props;
+  const metadata = props.metadata || props.properties;
+  const {
+    info = [],
+    hideContentType,
+    hideCreationDate,
+    hidePublishingDate,
+    hideModificationDate,
+    hideShareButton,
+    hideDownloadButton,
+    // contentType,
+  } = props.data;
+  // Set query parameters
+  const parameters = useMemo(
+    () => qs.parse(location.search.replace('?', '')) || {},
+    [location],
+  );
+  // Set dates
+  const getDate = useCallback(
+    (hidden, key) => {
+      return !hidden && metadata[key] ? metadata[key] : null;
+    },
+    [metadata],
+  );
+  const creationDate = useMemo(() => getDate(hideCreationDate, 'created'), [
+    getDate,
+    hideCreationDate,
+  ]);
+  const publishingDate = useMemo(
+    () => getDate(hidePublishingDate, 'effective'),
+    [getDate, hidePublishingDate],
+  );
+  const modificationDate = useMemo(
+    () => getDate(hideModificationDate, 'modified'),
+    [getDate, hideModificationDate],
+  );
+  // Set image source
+  const image = getImageSource(metadata['image']);
+  // Get type
+  const type = useMemo(() => {
+    return (
+      types.filter(
+        (type) =>
+          flattenToAppURL(type['@id']) ===
+          `/@types/${metadata['@type'] || parameters.type}`,
+      )[0]?.title ||
+      friendlyId(metadata['@type']) ||
+      metadata['@type'] ||
+      parameters.type
+    );
+  }, [types, metadata, parameters]);
+
+  return (
+    <Banner {...props}>
+      <div
+        className={image ? 'image' : ''}
+        style={image ? { backgroundImage: `url(${image})` } : {}}
+      >
+        <div className="gradient">
+          <ContainerWrapper fluid={fluid}>
+            <Banner.Content
+              actions={
+                <>
+                  {!hideShareButton && (
+                    <Popup
+                      className="share-popup"
+                      content={() => (
+                        <>
+                          <p>{intl.formatMessage(messages.share_to)}</p>
+                          <div className="actions">
+                            <Banner.Action
+                              icon="ri-facebook-fill"
+                              onClick={() => {
+                                sharePage(metadata['@id'], 'facebook');
+                              }}
+                            />
+                            <Banner.Action
+                              icon="ri-twitter-fill"
+                              onClick={() => {
+                                sharePage(metadata['@id'], 'twitter');
+                              }}
+                            />
+                            <Banner.Action
+                              icon="ri-linkedin-fill"
+                              onClick={() => {
+                                sharePage(metadata['@id'], 'linkedin');
+                              }}
+                            />
+                          </div>
+                        </>
+                      )}
+                      position="bottom center"
+                      size="small"
+                      trigger={
+                        <Banner.Action
+                          icon="ri-share-fill"
+                          title={intl.formatMessage(messages.share)}
+                          className="share"
+                          onClick={() => {}}
+                        />
+                      }
+                    />
+                  )}
+                  {!hideDownloadButton && (
+                    <Banner.Action
+                      icon="ri-download-2-fill"
+                      title={intl.formatMessage(messages.download)}
+                      className="download"
+                      onClick={() => {
+                        window.print();
+                      }}
+                    />
+                  )}
+                </>
+              }
+            >
+              <Title config={banner.title} properties={metadata} />
+              <Banner.Metadata>
+                <Banner.MetadataField
+                  type="type"
+                  hidden={hideContentType}
+                  // value={contentType || properties['@type'] || parameters.type}
+                  value={type}
+                />
+                <Banner.MetadataField
+                  type="date"
+                  label={intl.formatMessage(messages.created)}
+                  value={creationDate}
+                  title={`${intl.formatMessage(messages.created_on)} {}`}
+                />
+                <Banner.MetadataField
+                  type="date"
+                  label={intl.formatMessage(messages.published)}
+                  value={publishingDate}
+                  title={`${intl.formatMessage(messages.published_on)} {}`}
+                />
+                <Banner.MetadataField
+                  type="date"
+                  label={intl.formatMessage(messages.modified)}
+                  value={modificationDate}
+                  title={`${intl.formatMessage(messages.modified_on)} {}`}
+                />
+                {info.map((item, index) => (
+                  <Banner.MetadataField
+                    key={`header-info-${index}`}
+                    value={item.description}
+                  />
+                ))}
+              </Banner.Metadata>
+            </Banner.Content>
+          </ContainerWrapper>
+        </div>
+      </div>
+    </Banner>
+  );
+};
+
+export default compose(
+  injectIntl,
+  withRouter,
+  connect((state) => {
+    return {
+      types: state.types.types,
+    };
+  }),
+)(View);

package/src/components/theme/Banner/styles.less

@@ -0,0 +1,20 @@
+.ui.block.title .eea.banner .content {
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+.eea.banner .documentFirstHeading {
+  border-bottom: none;
+  margin-bottom: 0;
+
+  &::before {
+    content: none;
+  }
+}
+
+.share-popup {
+  .actions {
+    display: flex;
+    flex-flow: row;
+  }
+}

package/src/components/theme/CustomCSS/CustomCSS.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import config from '@plone/volto/registry';
+
+const CustomCSS = (props) => {
+  return (
+    <link
+      rel={'stylesheet'}
+      href={`${config.settings.apiPath}/voltoCustom.css`}
+    />
+  );
+};
+export default CustomCSS;

package/src/components/theme/DraftBackground/DraftBackground.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import './draft.css';
+import { BodyClass } from '@plone/volto/helpers';
+
+const DraftBackground = ({ review_state }) => {
+  const draftClass = `wf-state-${review_state}`;
+  return <BodyClass className={draftClass} />;
+};
+function propsAreEqual(prevProps, nextProps) {
+  return prevProps.review_state === nextProps.review_state;
+}
+
+export default connect((state) => ({
+  review_state: state.content.data?.review_state,
+}))(React.memo(DraftBackground, propsAreEqual));

package/src/components/theme/DraftBackground/draft.css

@@ -0,0 +1,3 @@
+.view-viewview:not(.wf-state-published) .content-area {
+  background-image: url('draft.png') !important;
+}

package/src/components/theme/Homepage/HomePageInverseView.jsx

@@ -0,0 +1,60 @@
+/**
+ * Document view component.
+ * @module components/theme/View/HomePageInverseView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DefaultView } from '@plone/volto/components/';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+import { hasBlocksData } from '@plone/volto/helpers';
+
+/**
+ * Component to display the default view.
+ * @function HomePageInverseView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const HomePageInverseView = ({ content }) => {
+  return hasBlocksData(content) ? (
+    <>
+      <BodyClass className="homepage homepage-inverse" />
+      <DefaultView content={content} />
+    </>
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+HomePageInverseView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default HomePageInverseView;

package/src/components/theme/Homepage/HomePageView.jsx

@@ -0,0 +1,60 @@
+/**
+ * Document view component.
+ * @module components/theme/View/HomePageView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DefaultView } from '@plone/volto/components/';
+
+import { BodyClass } from '@plone/volto/helpers';
+
+import { hasBlocksData } from '@plone/volto/helpers';
+
+/**
+ * Component to display the default view.
+ * @function HomePageView
+ * @param {Object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const HomePageView = ({ content }) => {
+  return hasBlocksData(content) ? (
+    <>
+      <BodyClass className="homepage" />
+      <DefaultView content={content} />
+    </>
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+HomePageView.propTypes = {
+  /**
+   * Content of the object
+   */
+  content: PropTypes.shape({
+    /**
+     * Title of the object
+     */
+    title: PropTypes.string,
+    /**
+     * Description of the object
+     */
+    description: PropTypes.string,
+    /**
+     * Text of the object
+     */
+    text: PropTypes.shape({
+      /**
+       * Data of the text of the object
+       */
+      data: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
+export default HomePageView;

package/src/components/theme/Logo.jsx

@@ -0,0 +1,34 @@
+import { useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+
+import { Logo } from '@eeacms/volto-eea-design-system/ui';
+import LogoImage from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/eea-logo.svg';
+
+const messages = defineMessages({
+  site: {
+    id: 'Site',
+    defaultMessage: 'Site',
+  },
+  eeasite: {
+    id: 'European Environment Agency',
+    defaultMessage: 'European Environment Agency',
+  },
+});
+
+const EEALogo = () => {
+  const lang = useSelector((state) => state.intl.locale);
+  const intl = useIntl();
+  const url = config.settings.isMultilingual ? `/${lang}` : '/';
+
+  return (
+    <Logo
+      src={LogoImage}
+      url={url}
+      title={intl.formatMessage(messages.site)}
+      alt={intl.formatMessage(messages.eeasite)}
+    />
+  );
+};
+
+export default EEALogo;

package/src/components/theme/SubsiteClass.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import cx from 'classnames';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { BodyClass } from '@plone/volto/helpers';
+import { isSubsiteRoot } from 'volto-subsites/utils';
+
+const SubsiteClass = () => {
+  const subsite = useSelector(
+    (state) => state.content?.data?.['@components']?.subsite || {},
+  );
+  const location = useLocation();
+
+  return (
+    <BodyClass
+      className={cx('subsite', `subsite-${subsite.subsite_css_class?.token}`, {
+        'subsite-root': isSubsiteRoot(location.pathname, subsite),
+      })}
+    />
+  );
+};
+export default SubsiteClass;

package/src/components/theme/Widgets/TokenWidget.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
+
+export const TokenWidget = ({ value, children, className }) =>
+  value ? (
+    <span className={cx(className, 'token', 'widget')}>
+      {value.map((tag) => (
+        <Tag href={`http://search.apps.eea.europa.eu/?q=${tag}`} key={tag}>
+          {children ? children(tag) : tag}
+        </Tag>
+      ))}
+    </span>
+  ) : (
+    ''
+  );