@eeacms/volto-marine-policy 1.0.0

package/src/customizations/@eeacms/volto-block-style/StyleWrapper/schema.js

@@ -0,0 +1,217 @@
+import config from '@plone/volto/registry';
+
+export const StyleSchema = () => {
+  return {
+    title: 'Styles',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+      {
+        id: 'presets',
+        title: 'Preset styles',
+        fields: ['style_name'],
+      },
+      {
+        id: 'standard',
+        title: 'Standard',
+        fields: [
+          'textAlign',
+          'fontSize',
+          'fontWeight',
+          'align',
+          'stretch',
+          'size',
+          'isDropCap',
+        ],
+      },
+      {
+        id: 'decorations',
+        title: 'Decorations',
+        fields: [
+          'backgroundImage',
+          'backgroundColor',
+          'textColor',
+          'borderRadius',
+          'shadowDepth',
+          'shadowColor',
+        ],
+      },
+      {
+        id: 'layout',
+        title: 'Layout',
+        fields: ['margin', 'padding', 'size', 'align', 'stretch'], // todo: width, conflicts with size
+      },
+      {
+        id: 'advanced',
+        title: 'Advanced',
+        fields: [
+          'useAsPageHeader',
+          'theme',
+          'hidden',
+          'height',
+          'isScreenHeight',
+          'customClass',
+          'customId',
+          'clear',
+        ],
+      },
+    ],
+    properties: {
+      theme: {
+        title: 'Theme',
+        description: 'A predefined theme, applicable just to this block',
+        widget: 'theme_picker',
+        colors: [
+          ...(config.settings && config.settings.themeColors
+            ? config.settings.themeColors.map(({ value, title }) => ({
+                name: value,
+                label: title,
+              }))
+            : []),
+        ],
+      },
+      style_name: {
+        title: 'Style',
+        widget: 'style_select',
+      },
+      textAlign: {
+        title: 'Text align',
+        widget: 'style_text_align',
+      },
+      align: {
+        title: 'Align',
+        widget: 'style_align',
+      },
+      stretch: {
+        title: 'Stretch',
+        widget: 'style_stretch',
+      },
+      fontSize: {
+        title: 'Font size',
+        description: 'Relative to normal size of text in the block',
+        choices: [
+          ['xx-small', 'xx-small'],
+          ['x-small', 'x-small'],
+          ['small', 'small'],
+          ['medium', 'medium'],
+          ['large', 'large'],
+          ['x-large', 'x-large'],
+          ['xx-large', 'xx-large'],
+          ['xxx-large', 'xxx-large'],
+        ],
+      },
+      fontWeight: {
+        title: 'Font weight',
+        description: 'The weight (or boldness) of the font',
+        choices: [
+          ['300', 'Light'],
+          ['400', 'Regular'],
+          ['500', 'Medium'],
+          ['600', 'SemiBold'],
+          ['700', 'Bold'],
+        ],
+      },
+      margin: {
+        title: 'Margin',
+        widget: 'quad_size',
+      },
+      padding: {
+        title: 'Padding',
+        widget: 'quad_size',
+      },
+      size: {
+        title: 'Box size',
+        widget: 'style_size',
+      },
+      height: {
+        title: 'Element height',
+        widget: 'text',
+        description: 'Element height, expressed as CSS dimension',
+      },
+      isScreenHeight: {
+        title: 'Screen height',
+        description: 'Maximize block to viewport height',
+        type: 'boolean',
+      },
+      backgroundImage: {
+        title: 'Background image',
+        widget: 'url',
+      },
+      backgroundColor: {
+        title: 'Background color',
+        type: 'color',
+        widget: 'style_simple_color',
+        available_colors: config.settings.available_colors,
+      },
+      textColor: {
+        title: 'Text color',
+        type: 'color',
+        widget: 'style_simple_color',
+        available_colors: config.settings.available_colors,
+      },
+      customClass: {
+        title: 'Custom CSS Class',
+        description: 'A custom CSS class, applicable just to this block',
+      },
+      customId: {
+        title: 'Custom Id',
+        description: 'A custom id, applicable just to this block',
+      },
+      isDropCap: {
+        title: 'Drop cap',
+        description: 'First letter is styled as a drop cop',
+        type: 'boolean',
+      },
+      hidden: {
+        title: 'Hidden',
+        description: 'Hide this block',
+        type: 'boolean',
+      },
+      useAsPageHeader: {
+        title: 'Use as page header',
+        description: 'Use this block as page header',
+        type: 'boolean',
+      },
+      shadowDepth: {
+        widget: 'slider',
+        title: 'Shadow depth',
+        settings: {
+          min: 0,
+          max: 24,
+          step: 1,
+          start: 0,
+        },
+      },
+      shadowColor: {
+        title: 'Shadow color',
+        type: 'color',
+        widget: 'style_simple_color',
+        available_colors: config.settings.available_colors,
+      },
+      borderRadius: {
+        widget: 'slider',
+        title: 'Rounded Corner',
+        settings: {
+          min: 0,
+          max: 24,
+          step: 1,
+          start: 0,
+        },
+      },
+      clear: {
+        title: 'Clear floats',
+        description: 'Pushes selected block under floated content',
+        choices: [
+          [null, 'None'],
+          ['left', 'Left'],
+          ['right', 'Right'],
+          ['both', 'Both'],
+        ],
+      },
+    },
+    required: [],
+  };
+};

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/Header.jsx

@@ -0,0 +1,358 @@
+/**
+ * Header component.
+ * @module components/theme/Header/Header
+ */
+
+import React from 'react'; // , { Component }
+import { useHistory } from 'react-router-dom';
+import cx from 'classnames';
+import { Container, Menu, Grid, Dropdown } from 'semantic-ui-react'; // Dropdown,
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
+import closeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/close-line.svg';
+import searchIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/search-line.svg';
+import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/menu-line.svg';
+
+import HeaderSearchPopUp from '@eeacms/volto-marine-policy/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderSearchPopUp';
+import HeaderMenuPopUp from '@eeacms/volto-marine-policy/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderMenuPopUp';
+import PropTypes from 'prop-types';
+
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+Header.propTypes = {
+  transparency: PropTypes.bool,
+  inverted: PropTypes.bool,
+};
+
+function Header({ children }) {
+  return <div className="eea header">{children}</div>;
+}
+
+const TopHeader = ({ children }) => (
+  <div className="top bar">
+    <Container>{children}</Container>
+  </div>
+);
+
+const TopItem = ({ children, className, id }) => (
+  <div className={cx('item', 'header-top-item', className)} id={id}>
+    {children}
+  </div>
+);
+
+const TopDropdownMenu = ({
+  children,
+  className,
+  icon,
+  hasLanguageDropdown = false,
+  id,
+  tabletText,
+  mobileText,
+  text,
+  viewportWidth,
+}) => {
+  const isTablet = viewportWidth < 991;
+  const isMobile = viewportWidth < 767;
+
+  const Component = ({ mobileText }) => {
+    return (
+      <>
+        {children.props['aria-label'] === 'language switcher' ? (
+          hasLanguageDropdown && (
+            <Dropdown
+              id={id}
+              className={className}
+              text={mobileText || text}
+              icon={icon || 'chevron down'}
+              aria-label="dropdown"
+              role="dropdown"
+              lazyLoad
+              closeOnChange={true}
+              closeOnBlur={false}
+              closeOnEscape={true}
+            >
+              <Dropdown.Menu role="option">{children}</Dropdown.Menu>
+            </Dropdown>
+          )
+        ) : (
+          <Dropdown
+            id={id}
+            className={className}
+            text={mobileText || text}
+            icon={icon || 'chevron down'}
+            role="dropdown"
+            aria-label="dropdown"
+            lazyLoad
+            closeOnChange={true}
+            closeOnBlur={false}
+            closeOnEscape={true}
+          >
+            <Dropdown.Menu role="option">{children}</Dropdown.Menu>
+          </Dropdown>
+        )}
+      </>
+    );
+  };
+  return (
+    <>
+      {isMobile ? (
+        <Component mobileText={mobileText} />
+      ) : isTablet ? (
+        <Component mobileText={tabletText} />
+      ) : (
+        <Component />
+      )}
+    </>
+  );
+};
+
+const Main = ({
+  logo,
+  menuItems,
+  menuItemsLayouts,
+  renderMenuItem,
+  renderGlobalMenuItem,
+  headerSearchBox,
+  pathname,
+  transparency,
+  inverted,
+  hideSearch,
+  isMultilingual,
+}) => {
+  const history = useHistory();
+  const [activeItem, setActiveItem] = React.useState(pathname);
+  const [menuIsActive, setMenuIsActive] = React.useState(false);
+  const [searchIsActive, setSearchIsActive] = React.useState(false);
+  const [burger, setBurger] = React.useState('');
+  const searchInputRef = React.useRef(null);
+  const [isClient, setIsClient] = React.useState();
+  const itemsLayouts = menuItemsLayouts || config.settings?.menuItemsLayouts;
+
+  React.useEffect(() => setIsClient(true), []);
+
+  React.useEffect(() => {
+    setMenuIsActive(false);
+    setSearchIsActive(false);
+    setBurger('');
+    // remove active menu when we have no pathname which means we hit logo to go home
+    //remove the lang route in order to check if empty
+    //setActiveItem as pathname when pathname changed
+    if (
+      !pathname ||
+      (isMultilingual === true && !pathname?.split('/')?.slice(2)?.join('/'))
+    ) {
+      setActiveItem('');
+    } else setActiveItem(pathname);
+  }, [isMultilingual, pathname]);
+
+  React.useEffect(() => {
+    if (searchIsActive) {
+      searchInputRef.current && searchInputRef.current.focus();
+    }
+  }, [searchIsActive]);
+
+  const searchOnClick = (e, x) => {
+    if (menuIsActive === true) {
+      setBurger('');
+      setMenuIsActive(false);
+      setActiveItem('');
+    }
+    setSearchIsActive(!searchIsActive);
+  };
+
+  const mobileBurgerOnClick = () => {
+    if (searchIsActive === true) {
+      setSearchIsActive(false);
+    }
+
+    if (burger === '') {
+      setBurger('open');
+      setMenuIsActive(true);
+    } else {
+      setBurger('');
+      setMenuIsActive(false);
+      setActiveItem('');
+    }
+  };
+
+  const menuOnClickOutside = () => {
+    // restore active element if nothing was selected from the menu dropdown
+    if (pathname !== activeItem) {
+      setActiveItem(pathname);
+    }
+    // close mobile navigation when clicking outside if we have value for nav
+    if (burger) {
+      setBurger('');
+    }
+    // always close the  menu
+    setMenuIsActive(false);
+  };
+
+  const menuOnClick = (e, item) => {
+    if (searchIsActive) setSearchIsActive(false);
+    setActiveItem(item['@id'] || item.url);
+    if (item.items.length) {
+      setMenuIsActive(true);
+    } else {
+      if (isInternalURL(item.url)) {
+        history.push(item.url);
+      } else if (isClient) {
+        window.location.replace(item.url);
+      }
+    }
+  };
+
+  // Listens for escape keydown event
+  React.useEffect(() => {
+    const escKeyPressed = (e) => {
+      if (e.key === 'Escape') {
+        // menuOnClickOutside();
+        // restore active element if nothing was selected from the menu dropdown
+        if (pathname !== activeItem) {
+          setActiveItem(pathname);
+        }
+        // close mobile navigation when clicking outside if we have value for nav
+        if (burger) {
+          setBurger('');
+        }
+        // always close the  menu & search
+        setMenuIsActive(false);
+        setSearchIsActive(false);
+      }
+    };
+
+    document.addEventListener('keydown', escKeyPressed);
+
+    return () => {
+      document.removeEventListener('keydown', escKeyPressed);
+    };
+  }, [activeItem, burger, pathname]);
+
+  // React.useEffect(() => {
+  //   if (searchIsActive || burger === 'open' || menuIsActive) {
+  //     document.body.style.overflow = 'hidden';
+  //   } else {
+  //     document.body.style.overflow = 'unset';
+  //   }
+  // }, [searchIsActive, burger, menuIsActive]);
+
+  const node = React.useRef();
+  const searchButtonRef = React.useRef();
+  const mobileMenuBurgerRef = React.useRef();
+  const desktopMenuRef = React.useRef();
+
+  // disable sticky setting until feature is more stable
+  // const isScrollingUp = useScrollingUp();
+  // <div
+  // className={`main bar ${transparency ? 'transparency' : ''} ${
+  //     isScrollingUp ? 'sticky' : ''
+  // }`}
+  // >
+  return (
+    <div
+      className={`main bar ${transparency ? 'transparency' : ''}`}
+      ref={node}
+    >
+      <Container>
+        <Grid>
+          <Grid.Column mobile={8} tablet={8} computer={4}>
+            {logo}
+          </Grid.Column>
+          <Grid.Column mobile={4} tablet={4} computer={8}>
+            <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
+              {menuItems && (
+                <ul
+                  className="ui text eea-main-menu tablet or lower hidden menu"
+                  ref={desktopMenuRef}
+                  id={'navigation'}
+                >
+                  {menuItems.map((item) => (
+                    <Menu.Item
+                      name={item['@id'] || item.url}
+                      key={item['@id'] || item.url}
+                      as={'li'}
+                      active={
+                        activeItem.indexOf(item['@id']) !== -1 ||
+                        activeItem.indexOf(item.url) !== -1
+                      }
+                    >
+                      {renderGlobalMenuItem(item, {
+                        onClick: menuOnClick,
+                      })}
+                    </Menu.Item>
+                  ))}
+                </ul>
+              )}
+              {!hideSearch && (
+                <button
+                  className="search-action"
+                  onClick={searchOnClick}
+                  tabIndex="0"
+                  aria-pressed="false"
+                  aria-haspopup="true"
+                  ref={searchButtonRef}
+                >
+                  {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
+                  <LazyLoadImage
+                    src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
+                    alt="search button open/close"
+                  />
+                </button>
+              )}
+              <Header.BurgerAction
+                className={`mobile ${burger}`}
+                onClick={mobileBurgerOnClick}
+                ref={mobileMenuBurgerRef}
+              >
+                <LazyLoadImage
+                  src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
+                  alt="menu icon open/close"
+                />
+              </Header.BurgerAction>
+            </div>
+          </Grid.Column>
+        </Grid>
+      </Container>
+      {searchIsActive && (
+        <HeaderSearchPopUp
+          onClose={searchOnClick}
+          searchInputRef={searchInputRef}
+          triggerRefs={[searchButtonRef]}
+          headerSearchBox={headerSearchBox}
+        />
+      )}
+      <HeaderMenuPopUp
+        renderMenuItem={renderMenuItem}
+        activeItem={activeItem}
+        menuItems={menuItems}
+        menuItemsLayouts={itemsLayouts}
+        pathName={pathname}
+        onClose={menuOnClickOutside}
+        triggerRefs={[mobileMenuBurgerRef, desktopMenuRef]}
+        visible={menuIsActive}
+      />
+    </div>
+  );
+};
+
+const BurgerAction = React.forwardRef((props, ref) => (
+  <button
+    ref={ref}
+    className={`burger-action ${props.className}`}
+    tabIndex="0"
+    aria-pressed="false"
+    aria-haspopup="true"
+    onClick={props.onClick}
+  >
+    {props.children}
+  </button>
+));
+
+Header.BurgerAction = BurgerAction;
+Header.Main = Main;
+Header.TopDropdownMenu = TopDropdownMenu;
+Header.TopHeader = TopHeader;
+Header.TopItem = TopItem;
+
+export default Header;