@kitconcept/volto-light-theme 1.0.0-rc.0

package/src/components/Blocks/Search/TopSideFacets.jsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import {
+  SearchInput,
+  SearchDetails,
+  Facets,
+  // FilterList,
+  SortOn,
+} from '@plone/volto/components/manage/Blocks/Search/components';
+import { Grid } from 'semantic-ui-react';
+import { flushSync } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  searchButtonText: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+  sort: {
+    id: 'Sorting',
+    defaultMessage: 'Sorting',
+  },
+});
+
+const TopSideFacets = (props) => {
+  const {
+    children,
+    data,
+    totalItems,
+    facets,
+    setFacets,
+    setSortOn,
+    setSortOrder,
+    sortOn,
+    sortOrder,
+    onTriggerSearch,
+    searchedText, // search text for previous search
+    // searchText, // search text currently being entered (controlled input)
+    isEditMode,
+    querystring = {},
+    // searchData,
+    // mode = 'view',
+    // variation,
+  } = props;
+  const { showSearchButton } = data;
+  const isLive = !showSearchButton;
+  const intl = useIntl();
+
+  const FacetWrapper = ({ children }) => {
+    const colWidth = data.facets.length < 5 ? 12 / data.facets.length : 4;
+    return (
+      <Grid.Column mobile={12} tablet={colWidth} computer={colWidth}>
+        {children}
+      </Grid.Column>
+    );
+  };
+
+  return (
+    <>
+      {data.headline && <h2 className="headline">{data.headline}</h2>}
+
+      <Grid className="searchBlock-facets" stackable>
+        <Grid.Row>
+          <Grid.Column>
+            {(Object.keys(data).includes('showSearchInput')
+              ? data.showSearchInput
+              : true) && (
+              <div className="search-input-resultscount-sort">
+                <div className="search-wrapper">
+                  <SearchInput {...props} isLive={isLive} />
+                  {/* {data.showSearchButton && (
+                    <Button primary onClick={() => onTriggerSearch(searchText)}>
+                      {data.searchButtonLabel ||
+                        intl.formatMessage(messages.searchButtonText)}
+                    </Button>
+                  )} */}
+                </div>
+
+                <div className="search-details-sort">
+                  <SearchDetails
+                    text={searchedText}
+                    total={totalItems}
+                    as="h5"
+                  />
+                  <div className="sort-on-wrapper">
+                    <span className="sort-label">
+                      {intl.formatMessage(messages.sort)}
+                    </span>
+                    <SortOn
+                      data={data}
+                      querystring={querystring}
+                      isEditMode={isEditMode}
+                      sortOn={sortOn}
+                      sortOrder={sortOrder}
+                      setSortOn={(sortOn) => {
+                        flushSync(() => {
+                          setSortOn(sortOn);
+                          onTriggerSearch(searchedText || '', facets, sortOn);
+                        });
+                      }}
+                      setSortOrder={(sortOrder) => {
+                        flushSync(() => {
+                          setSortOrder(sortOrder);
+                          onTriggerSearch(
+                            searchedText || '',
+                            facets,
+                            sortOn,
+                            sortOrder,
+                          );
+                        });
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {data.facets?.length > 0 && (
+              <div className="facets">
+                {data.facetsTitle && <h3>{data.facetsTitle}</h3>}
+                <Grid verticalAlign="bottom" columns={12}>
+                  <Facets
+                    data={data}
+                    querystring={querystring}
+                    facets={facets}
+                    setFacets={(f) => {
+                      flushSync(() => {
+                        setFacets(f);
+                        onTriggerSearch(searchedText || '', f);
+                      });
+                    }}
+                    facetWrapper={FacetWrapper}
+                  />
+                </Grid>
+              </div>
+            )}
+            {/* <div className="search-filters-sort">
+              <FilterList
+                {...props}
+                isEditMode={isEditMode}
+                setFacets={(f) => {
+                  flushSync(() => {
+                    setFacets(f);
+                    onTriggerSearch(searchedText || '', f);
+                  });
+                }}
+              />
+            </div> */}
+          </Grid.Column>
+        </Grid.Row>
+
+        <Grid.Row>
+          <Grid.Column>{children}</Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </>
+  );
+};
+
+export default TopSideFacets;

package/src/components/Blocks/Slate/ExtraAlignWrapper.js

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+
+// This extra wrapper is required to fulfill the "all blocks snap to 1440"
+// on some of the blocks, the ones that are more pure, eg. the ones the view is
+// super simple, and a single element (p or an h)... So it's required on slate
+// blocks and heading
+const ExtraAlignWrapper = (Component) => ({ ...props }) => {
+  const { data } = props;
+
+  return (
+    <div
+      className={cx(`${data['@type']}`, {
+        [data.align]: data.align,
+        [data.styles?.align]: data.styles?.align,
+      })}
+    >
+      <Component {...props} />
+    </div>
+  );
+};
+
+export default ExtraAlignWrapper;

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

@@ -0,0 +1,5 @@
+export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
+  schema.properties.href.selectedItemAttrs.push('getRemoteUrl');
+
+  return schema;
+};

package/src/components/Blocks/schema.js

@@ -0,0 +1,38 @@
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+import { defineMessages } from 'react-intl';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  backgroundColor: {
+    id: 'Background color',
+    defaultMessage: 'Background color',
+  },
+});
+
+export const defaultStylingSchema = ({ schema, formData, intl }) => {
+  const BG_COLORS = [
+    { name: 'transparent', label: 'Transparent' },
+    { name: 'grey', label: 'Grey' },
+  ];
+
+  const colors =
+    config.blocks?.blocksConfig?.[formData['@type']]?.colors || BG_COLORS;
+
+  const defaultBGColor =
+    config.blocks?.blocksConfig?.[formData['@type']]?.defaultBGColor;
+
+  addStyling({ schema, intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    'backgroundColor',
+  ];
+  schema.properties.styles.schema.properties.backgroundColor = {
+    widget: 'color_picker',
+    title: intl.formatMessage(messages.backgroundColor),
+    colors,
+    default: defaultBGColor,
+  };
+
+  return schema;
+};

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -0,0 +1,117 @@
+// SemanticUI-free pre-@plone/components
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { Link } from 'react-router-dom';
+import { defineMessages, injectIntl } from 'react-intl';
+import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+
+import { Icon } from '@plone/volto/components';
+import { getBreadcrumbs } from '@plone/volto/actions';
+import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+
+import homeSVG from '@plone/volto/icons/home.svg';
+
+const messages = defineMessages({
+  home: {
+    id: 'Home',
+    defaultMessage: 'Home',
+  },
+  breadcrumbs: {
+    id: 'Breadcrumbs',
+    defaultMessage: 'Breadcrumbs',
+  },
+});
+
+/**
+ * Breadcrumbs container class.
+ */
+export class BreadcrumbsComponent extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getBreadcrumbs: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+    root: PropTypes.string,
+    items: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string,
+        url: PropTypes.string,
+      }),
+    ).isRequired,
+  };
+
+  componentDidMount() {
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
+      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
+        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
+      }
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    return (
+      <div
+        role="navigation"
+        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
+        className="breadcrumbs"
+      >
+        <Container layout>
+          <div className="breadcrumb">
+            <Link
+              to={this.props.root || '/'}
+              className="home"
+              title={this.props.intl.formatMessage(messages.home)}
+            >
+              <Icon name={homeSVG} size="25px" />
+            </Link>
+            {this.props.items.map((item, index, items) => [
+              <div className="divider" key={`divider-${item.url}`} />,
+              index < items.length - 1 ? (
+                <Link key={item.url} to={item.url} className="section">
+                  {item.title}
+                </Link>
+              ) : (
+                <div className="section active" key={item.url}>
+                  {item.title}
+                </div>
+              ),
+            ])}
+          </div>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      items: state.breadcrumbs.items,
+      root: state.breadcrumbs.root,
+    }),
+    { getBreadcrumbs },
+  ),
+)(BreadcrumbsComponent);

package/src/components/CQPolyfill.jsx

@@ -0,0 +1,9 @@
+// import CQpolifillJS from 'file-loader?name=[name].[ext]!../static/container-query-polyfill.modern';
+
+const ContainerQueriesPolyfill = () => {
+  return (
+    <script src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"></script>
+  );
+};
+
+export default ContainerQueriesPolyfill;

package/src/components/Footer/Footer.jsx

@@ -0,0 +1,131 @@
+// SemanticUI-free pre-@plone/components
+import React from 'react';
+
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { useSelector, shallowEqual } from 'react-redux';
+import { UniversalLink, Logo } from '@plone/volto/components';
+import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  copyright: {
+    id: 'Copyright',
+    defaultMessage: 'Copyright',
+  },
+});
+
+/**
+ * Component to display the footer.
+ * @function Footer
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component
+ */
+const Footer = ({ intl }) => {
+  const { settings } = config;
+  const { lang, siteActions = [] } = useSelector(
+    (state) => ({
+      lang: state.intl.locale,
+      siteActions: state.actions?.actions?.site_actions,
+    }),
+    shallowEqual,
+  );
+  return (
+    <footer id="footer">
+      <Container layout className="footer">
+        <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="http://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="http://creativecommons.org/licenses/GPL/2.0/"
+                >
+                  <FormattedMessage
+                    id="GNU GPL license"
+                    defaultMessage="GNU GPL license"
+                  />
+                </a>
+              ),
+            }}
+          />
+        </div>
+        <ul>
+          {/* wrap in div for a11y reasons: listitem role cannot be on the <a> element directly */}
+          {siteActions?.length
+            ? siteActions.map((item) => (
+                <li className="item" key={item.id}>
+                  <UniversalLink
+                    className="item"
+                    href={
+                      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>
+        <div className="logo">
+          <Logo />
+        </div>
+        <a className="item powered-by" href="https://plone.org">
+          <FormattedMessage
+            id="Powered by Plone & Python"
+            defaultMessage="Powered by Plone & Python"
+          />
+        </a>
+      </Container>
+    </footer>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Footer.propTypes = {
+  /**
+   * i18n object
+   */
+};
+
+export default injectIntl(Footer);

package/src/components/Header/Header.jsx

@@ -0,0 +1,64 @@
+// SemanticUI-free pre-@plone/components
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import Container from '@kitconcept/volto-light-theme/components/Atoms/Container/Container';
+import { Link } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Anontools,
+  LanguageSelector,
+  Logo,
+  Navigation,
+  SearchWidget,
+} from '@plone/volto/components';
+
+const Header = (props) => {
+  const { pathname } = props;
+  const token = useSelector((state) => state.userSession.token);
+
+  return (
+    <header className="header-wrapper">
+      <Container layout>
+        <div className="header">
+          <div className="logo-nav-wrapper">
+            <div className="logo">
+              <Logo />
+            </div>
+            <Navigation pathname={pathname} />
+            <div className="search-wrapper">
+              <div className="search">
+                <SearchWidget />
+              </div>
+            </div>
+          </div>
+          <div className="tools-wrapper">
+            <LanguageSelector />
+
+            <div className="tools">
+              {!token && <Anontools />}
+
+              <Link aria-label="register" to="/register">
+                <FormattedMessage id="Register" defaultMessage="Registration" />
+              </Link>
+              <Link aria-label="sitemap" to="/sitemap">
+                <FormattedMessage id="Sitemap" defaultMessage="Sitemap" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </header>
+  );
+};
+
+Header.propTypes = {
+  token: PropTypes.string,
+  pathname: PropTypes.string.isRequired,
+};
+
+Header.defaultProps = {
+  token: null,
+};
+
+export default Header;

package/src/components/Logo/Logo.jsx

@@ -0,0 +1,39 @@
+// 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 LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
+
+const messages = defineMessages({
+  site: {
+    id: 'Site',
+    defaultMessage: 'Site',
+  },
+  plonesite: {
+    id: 'Plone Site',
+    defaultMessage: 'Plone Site',
+  },
+});
+
+const Logo = () => {
+  const { settings } = config;
+  const lang = useSelector((state) => state.intl.locale);
+  const intl = useIntl();
+
+  return (
+    <UniversalLink
+      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
+      title={intl.formatMessage(messages.site)}
+    >
+      <img
+        src={LogoImage}
+        alt={intl.formatMessage(messages.plonesite)}
+        title={intl.formatMessage(messages.plonesite)}
+      />
+    </UniversalLink>
+  );
+};
+
+export default Logo;