@kitconcept/volto-light-theme 3.0.0-alpha.3 → 3.0.0

package/src/components/Navigation/Navigation.jsx

@@ -141,58 +141,48 @@ const Navigation = ({ pathname }) => {
                           {item.items &&
                             item.items.length > 0 &&
                             item.items.map((subitem) => (
-                              <div
-                                className="subitem-wrapper"
-                                key={subitem.url}
-                              >
-                                <li key={subitem.url}>
-                                  <NavLink
-                                    to={subitem.url}
-                                    onClick={() => closeMenu()}
-                                    className={cx({
-                                      current: isActive(subitem.url),
-                                    })}
-                                  >
-                                    <span className="left-arrow">&#8212;</span>
-                                    <span>
-                                      {subitem.nav_title || subitem.title}
-                                    </span>
-                                  </NavLink>
-                                </li>
+                              <li className="subitem-wrapper" key={subitem.url}>
+                                <NavLink
+                                  to={subitem.url}
+                                  onClick={() => closeMenu()}
+                                  className={cx({
+                                    current: isActive(subitem.url),
+                                  })}
+                                >
+                                  <span className="left-arrow">&#8212;</span>
+                                  <span>
+                                    {subitem.nav_title || subitem.title}
+                                  </span>
+                                </NavLink>
                                 <div className="sub-submenu">
                                   <ul>
                                     {subitem.items &&
                                       subitem.items.length > 0 &&
                                       subitem.items.map((subsubitem) => (
-                                        <div
+                                        <li
                                           className="subsubitem-wrapper"
                                           key={subsubitem.url}
                                         >
-                                          <li key={subsubitem.url}>
-                                            <NavLink
-                                              to={subsubitem.url}
-                                              onClick={() => closeMenu()}
-                                              className={cx({
-                                                current: isActive(
-                                                  subsubitem.url,
-                                                ),
-                                              })}
-                                            >
-                                              <span className="left-arrow">
-                                                &#8212;
-                                              </span>
-
-                                              <span>
-                                                {subsubitem.nav_title ||
-                                                  subsubitem.title}
-                                              </span>
-                                            </NavLink>
-                                          </li>
-                                        </div>
+                                          <NavLink
+                                            to={subsubitem.url}
+                                            onClick={() => closeMenu()}
+                                            className={cx({
+                                              current: isActive(subsubitem.url),
+                                            })}
+                                          >
+                                            <span className="left-arrow">
+                                              &#8212;
+                                            </span>
+                                            <span>
+                                              {subsubitem.nav_title ||
+                                                subsubitem.title}
+                                            </span>
+                                          </NavLink>
+                                        </li>
                                       ))}
                                   </ul>
                                 </div>
-                              </div>
+                              </li>
                             ))}
                         </ul>
                       </div>

package/src/components/SearchWidget/IntranetSearchWidget.jsx

@@ -0,0 +1,124 @@
+/**
+ * Intranet Search Widget component.
+ * @module components/SearchWidget
+ */
+
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { Form, Input } from 'semantic-ui-react';
+import { compose } from 'redux';
+import { PropTypes } from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { Icon } from '@plone/volto/components';
+import zoomSVG from '@plone/volto/icons/zoom.svg';
+
+const messages = defineMessages({
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+  searchSite: {
+    id: 'Search Site',
+    defaultMessage: 'Search Site',
+  },
+  placeholder: {
+    id: 'Search for People, E-Mail Address, Phone Number, ...',
+    defaultMessage: 'Search for People, E-Mail Address, Phone Number, ...',
+  },
+});
+
+/**
+ * IntranetSearchWidget component class.
+ * @class IntranetSearchWidget
+ * @extends Component
+ */
+class IntranetSearchWidget extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    pathname: PropTypes.string,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs WysiwygEditor
+   */
+  constructor(props) {
+    super(props);
+    this.onChangeText = this.onChangeText.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.state = {
+      text: '',
+    };
+  }
+
+  /**
+   * On change text
+   * @method onChangeText
+   * @param {object} event Event object.
+   * @param {string} value Text value.
+   * @returns {undefined}
+   */
+  onChangeText(event, { value }) {
+    this.setState({
+      text: value,
+    });
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @param {event} event Event object.
+   * @returns {undefined}
+   */
+  onSubmit(event) {
+    const path =
+      this.props.pathname?.length > 0
+        ? `&path=${encodeURIComponent(this.props.pathname)}`
+        : '';
+    this.props.history.push(
+      `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
+    );
+    // reset input value
+    this.setState({
+      text: '',
+    });
+    event.preventDefault();
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { intl } = this.props;
+    return (
+      <Form action="/search" onSubmit={this.onSubmit}>
+        <Form.Field className="searchbox">
+          <Input
+            aria-label={intl.formatMessage(messages.search)}
+            onChange={this.onChangeText}
+            name="SearchableText"
+            value={this.state.text}
+            transparent
+            autoComplete="off"
+            placeholder={intl.formatMessage(messages.placeholder)}
+            title={intl.formatMessage(messages.search)}
+          />
+          <button aria-label={intl.formatMessage(messages.search)}>
+            <Icon name={zoomSVG} size="37px" />
+          </button>
+        </Form.Field>
+      </Form>
+    );
+  }
+}
+
+export default compose(withRouter, injectIntl)(IntranetSearchWidget);

package/src/components/Theme/EventView.jsx

@@ -5,46 +5,42 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  hasBlocksData,
-  flattenHTMLToAppURL,
-  expandToBackendURL,
-} from '@plone/volto/helpers';
-import {
-  Image,
-  Grid,
-  Button,
-  Container as SemanticContainer,
-} from 'semantic-ui-react';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 
 import { FormattedDate } from '@plone/volto/components';
 import config from '@plone/volto/registry';
-import { UniversalLink } from '@plone/volto/components';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
-const EventTextfieldView = ({ content }) => (
-  <React.Fragment>
-    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.image && (
-      <Image
-        className="document-image"
-        src={content.image.scales.thumb.download}
-        floated="right"
-      />
-    )}
-    {content.text && (
-      <div
-        dangerouslySetInnerHTML={{
-          __html: flattenHTMLToAppURL(content.text.data),
-        }}
-      />
-    )}
-  </React.Fragment>
-);
+const EventTextfieldView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+  return (
+    <React.Fragment>
+      {content.title && (
+        <h1 className="documentFirstHeading">{content.title}</h1>
+      )}
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.preview_image && (
+        <Image
+          className="document-image ui right floated image"
+          item={content}
+          imageField="preview_image"
+          alt=""
+        />
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: flattenHTMLToAppURL(content.text.data),
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};
 
 /**
  * EventView view component class.
@@ -91,148 +87,7 @@ const EventView = (props) => {
       </div>
       {hasBlocksData(content) ? (
         <>
-          <RenderBlocks
-            {...props}
-            content={{
-              ...content,
-              blocks_layout: {
-                items: props.content.blocks_layout.items.slice(0, 1),
-              },
-            }}
-          />
-          <Grid stackable className="details-container">
-            <Grid.Row columns={2}>
-              <Grid.Column>
-                <div>
-                  <div className="event-title">
-                    <span className="event-heading">
-                      <FormattedMessage id="Start" defaultMessage="Start" />
-                    </span>
-                    <div className="event-detail">
-                      {' '}
-                      <FormattedDate
-                        date={content?.start}
-                        format={dateOptions}
-                      />{' '}
-                      {props.intl.locale === 'de' ? ' Uhr' : ''}
-                    </div>
-                    <div className="separator"></div>
-                  </div>
-                  <div className="event-title">
-                    <span className="event-heading">
-                      {' '}
-                      <FormattedMessage id="End" defaultMessage="End" />
-                    </span>
-                    <div className="event-detail">
-                      {' '}
-                      <FormattedDate
-                        date={content?.end}
-                        format={dateOptions}
-                      />{' '}
-                      {props.intl.locale === 'de' ? ' Uhr' : ''}
-                    </div>
-                    <div className="separator"></div>
-                  </div>
-                  {content?.location && (
-                    <div className="event-title">
-                      <span className="event-heading">
-                        <FormattedMessage
-                          id="Location"
-                          defaultMessage="Location"
-                        />
-                      </span>
-                      <div className="event-detail">{content?.location}</div>
-                    </div>
-                  )}
-                </div>
-              </Grid.Column>
-              <Grid.Column>
-                <div>
-                  {content?.event_url && (
-                    <div className="event-title">
-                      <span className="event-heading">
-                        <FormattedMessage
-                          id="Website"
-                          defaultMessage="Website"
-                        />
-                      </span>
-                      <div className="event-detail">
-                        <UniversalLink
-                          className="event-url"
-                          href={content.event_url}
-                        >
-                          {content.event_url}
-                        </UniversalLink>
-                      </div>
-                      <div className="separator"></div>
-                    </div>
-                  )}
-
-                  {(content?.contact_name ||
-                    content?.contact_email ||
-                    content?.contact_email) && (
-                    <div className="event-title">
-                      <span className="event-heading">
-                        <FormattedMessage
-                          id="Contact"
-                          defaultMessage="Contact"
-                        />
-                      </span>
-                      <div className="event-detail">
-                        <div>
-                          {content?.contact_name && (
-                            <p>{content.contact_name}</p>
-                          )}
-                          {content?.contact_email && (
-                            <p>
-                              <a href={`mailto:${content.contact_email}`}>
-                                {content.contact_email}
-                              </a>
-                            </p>
-                          )}
-                          {content?.contact_phone && (
-                            <p>
-                              <FormattedMessage
-                                id="Phone"
-                                defaultMessage="Phone"
-                              />{' '}
-                              <a href={`tel:${content.contact_phone}`}>
-                                {content.contact_phone}
-                              </a>
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </Grid.Column>
-              <div className="event-button">
-                <a
-                  className="ics-download"
-                  target="_blank"
-                  rel="noreferrer"
-                  href={`${expandToBackendURL(content['@id'])}/ics_view`}
-                >
-                  <Button className="event-btn">
-                    <FormattedMessage
-                      id="ICS-Download"
-                      defaultMessage="ICS Download"
-                    />
-                  </Button>
-                </a>
-              </div>
-            </Grid.Row>
-          </Grid>
-          <RenderBlocks
-            {...props}
-            content={{
-              ...content,
-              blocks_layout: {
-                items: props.content.blocks_layout.items.slice(1),
-              },
-            }}
-          />
+          <RenderBlocks {...props} />
         </>
       ) : (
         <EventTextfieldView {...props} />

package/src/index.js

@@ -10,6 +10,7 @@ import { videoBlockSchemaEnhancer } from './components/Blocks/Video/schema';
 import { gridTeaserDisableStylingSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
 import { gridImageDisableSizeAndPositionHandlersSchema } from '@plone/volto/components/manage/Blocks/Image/schema';
 import { disableBgColorSchema } from './components/Blocks/disableBgColorSchema';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
 
 import ContainerQueriesPolyfill from './components/CQPolyfill';
 import Container from './components/Atoms/Container/Container';
@@ -27,10 +28,12 @@ import { searchBlockSchemaEnhancer } from './components/Blocks/Search/schema';
 
 import gridSVG from './icons/block_icn_grid.svg';
 import accordionSVG from './icons/block_icn_accordion.svg';
+import descriptionSVG from '@plone/volto/icons/description.svg';
 import EventView from './components/Theme/EventView';
 import { tocBlockSchemaEnhancer } from './components/Blocks/Toc/schema';
 import { mapsBlockSchemaEnhancer } from './components/Blocks/Maps/schema';
 import { sliderBlockSchemaEnhancer } from './components/Blocks/Slider/schema';
+import EventMetadataView from './components/Blocks/EventMetadata/View';
 
 const BG_COLORS = [
   { name: 'transparent', label: 'Transparent' },
@@ -55,11 +58,26 @@ const applyConfig = (config) => {
   config.settings.slate.useLinkedHeadings = false;
   config.settings.contentMetadataTagsImageField = 'preview_image';
 
+  // Initial block for event content type
+  config.blocks.initialBlocks = {
+    Event: [
+      { '@type': 'title' },
+      { '@type': 'eventMetadata', fixed: true, required: true },
+      { '@type': 'slate' },
+    ],
+  };
+
+  config.settings.siteLabel = '';
+  config.settings.intranetHeader = false;
+
   // Remove Hero Block
   config.blocks.blocksConfig.hero.restricted = true;
 
   // No required blocks (eg. Title)
-  config.blocks.requiredBlocks = [];
+  config.blocks.requiredBlocks = [
+    ...config.blocks.requiredBlocks,
+    'eventMetadata',
+  ];
 
   // Register custom Container component
   config.registerComponent({
@@ -296,6 +314,20 @@ const applyConfig = (config) => {
     colors: BG_COLORS,
   };
 
+  config.blocks.blocksConfig.eventMetadata = {
+    id: 'eventMetadata',
+    title: 'EventMetadata',
+    icon: descriptionSVG,
+    group: 'common',
+    view: EventMetadataView,
+    edit: EventMetadataView,
+    schema: BlockSettingsSchema,
+    restricted: ({ properties, block }) =>
+      properties['@type'] === 'Event' ? false : true,
+    mostUsed: false,
+    sidebarTab: 0,
+  };
+
   // Check if the separator is present before enhancing it
   if (config.blocks.blocksConfig?.separator?.id) {
     config.blocks.blocksConfig.separator = {

package/src/theme/_header.scss

@@ -96,6 +96,7 @@
         border: none;
         border-radius: 50%;
         background-color: transparent;
+        color: $black;
         transition:
           background-color 200ms ease-in-out,
           color 300ms ease-in-out;
@@ -220,8 +221,25 @@
   .tools-wrapper {
     display: flex;
     flex-direction: row-reverse;
+    justify-content: space-between;
     padding-top: 16px;
 
+    .intranet {
+      padding: 10px $spacing-small;
+      margin-top: -16px;
+      margin-left: 213px;
+      background-color: $secondary-grey;
+      @media only screen and (max-width: $narrow-container-width) {
+        margin-left: 0px;
+      }
+
+      p {
+        @include marginal-title();
+        font-weight: 400;
+        text-transform: capitalize;
+      }
+    }
+
     .language-selector {
       padding-left: 40px;
     }
@@ -265,6 +283,99 @@
   }
 }
 
+// Intranet Header
+
+.header-wrapper.intranet-header {
+  .header {
+    flex-direction: column;
+
+    .logo-nav-wrapper {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+
+      .logo {
+        flex: 0 1 auto;
+      }
+
+      @media only screen and (max-width: $narrow-container-width) {
+        position: relative;
+      }
+
+      .mobile-nav.mobile.only {
+        @media only screen and (max-width: $narrow-container-width) {
+          position: absolute;
+          top: 19px;
+          right: 0;
+        }
+
+        .menu-drawer {
+          @media only screen and (max-width: $computer-breakpoint) {
+            top: 210px;
+          }
+        }
+      }
+      .navigation {
+        flex-basis: 100%;
+        margin: 29px auto 0 auto;
+      }
+    }
+
+    .search-wrapper {
+      flex: 0 1 auto;
+      align-self: center;
+      margin-left: 209px;
+      @media only screen and (max-width: $narrow-container-width) {
+        width: 100%;
+        margin-left: 0%;
+      }
+
+      .search {
+        width: 100%;
+        border-bottom: 2px solid $secondary-grey;
+        .field.searchbox {
+          border: none;
+
+          .ui.input input {
+            width: 500px;
+
+            &::placeholder {
+              color: #808080;
+              @include body-text();
+            }
+            @media only screen and (max-width: $narrow-container-width) {
+              width: 100%;
+            }
+          }
+
+          button {
+            @media only screen and (max-width: $narrow-container-width) {
+              padding-left: 9px;
+            }
+            &:hover {
+              background-color: transparent;
+              color: $black;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+
+    .tools-wrapper {
+      justify-content: space-between;
+      @media only screen and (max-width: $narrow-container-width) {
+        flex-direction: row;
+      }
+
+      .tools {
+        @media only screen and (max-width: $narrow-container-width) {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 /* we have to align the search hide with desktop naviation hide.
 And destktop navigation uses different breakpoint for different mode and it is coming
 from volto core */
@@ -409,6 +520,7 @@ body.has-toolbar.has-sidebar {
             color: $white;
 
             a {
+              padding-bottom: 0;
               font-size: 14px;
               font-weight: 400;
               line-height: 18px;
@@ -490,12 +602,7 @@ body.has-toolbar.has-sidebar {
             }
           }
 
-          li {
-            position: relative;
-            padding-top: 0;
-          }
-
-          li a.current {
+          a.current {
             .left-arrow {
               visibility: visible;
             }
@@ -513,14 +620,13 @@ body.has-toolbar.has-sidebar {
         display: flex;
       }
 
-      li {
-        padding: 8px 0;
-      }
-
-      li a {
+      a {
+        position: relative;
         display: inline-flex;
         align-items: flex-start;
+        padding-bottom: 8px;
         color: $black;
+
         @include body-text-bold();
 
         span {