@eeacms/volto-bise-policy 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -4,11 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [1.0.2](https://github.com/eea/volto-bise-policy/compare/1.0.1...1.0.2) - 29 March 2023
+### [1.0.4](https://github.com/eea/volto-bise-policy/compare/1.0.3...1.0.4) - 25 April 2023
+
+#### :rocket: New Features
+
+- feat(Footer.jsx): add support for customizing footer actions, copyright, social and contact actions from backend [Miu Razvan - [`33ae6fc`](https://github.com/eea/volto-bise-policy/commit/33ae6fc768a53bc72d31c8240924ca33e070a483)]
 
 #### :house: Internal changes
 
-- chore(package.json): reorder dependencies alphabetically [Miu Razvan - [`70e989e`](https://github.com/eea/volto-bise-policy/commit/70e989e40aac7a3ebf20a6ba6b493b6f82e1ec77)]
+- style(KeyFactsView.jsx): add optional chaining to line.upper.data [Miu Razvan - [`ea4df76`](https://github.com/eea/volto-bise-policy/commit/ea4df7686861d05d2fa56e104c54b5659255f176)]
+
+### [1.0.3](https://github.com/eea/volto-bise-policy/compare/1.0.2...1.0.3) - 12 April 2023
+
+### [1.0.2](https://github.com/eea/volto-bise-policy/compare/1.0.1...1.0.2) - 29 March 2023
 
 ### [1.0.1](https://github.com/eea/volto-bise-policy/compare/1.0.0...1.0.1) - 29 March 2023
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/razzle.extend.js

@@ -8,17 +8,18 @@ const modify = (config, { target, dev }, webpack) => {
   config.resolve.alias['../../theme.config'] = themeConfigPath;
   config.resolve.alias['../../theme'] = `${__dirname}/theme`;
   const projectRootPath = path.resolve('.');
-  const themeLessPath = `${projectRootPath}/node_modules/@eeacms/volto-eea-design-system/theme`;
+  const themeLessPath = `${projectRootPath}/node_modules/@eeacms/volto-spotlight/theme`;
 
-  config.resolve.alias['eea-design-system-theme'] = dev
-    ? `${projectRootPath}/src/addons/volto-eea-design-system/theme/themes/eea`
-    : `${themeLessPath}/themes/eea`;
+  config.resolve.alias['volto-spotlight-theme'] = dev
+    ? `${projectRootPath}/src/addons/volto-spotlight/theme/themes/spotlight`
+    : `${themeLessPath}/themes/spotlight`;
 
   const semanticLessPath = `${projectRootPath}/node_modules/semantic-ui-less`;
-  const hasDesignSystemInstalled = config.resolve.alias['eea-volto-themes'];
-  config.resolve.alias['eea-volto-theme-folder'] = hasDesignSystemInstalled
-    ? themeLessPath
-    : semanticLessPath;
+  const hasDesignSystemInstalled =
+    config.resolve.alias['volto-spotlight-themes'];
+  config.resolve.alias[
+    'volto-spotlight-theme-folder'
+  ] = hasDesignSystemInstalled ? themeLessPath : semanticLessPath;
 
   return config;
 };

package/src/components/manage/Blocks/KeyFacts/KeyFactsView.jsx

@@ -42,7 +42,7 @@ const View = ({ data }) => {
           <div className="facts-wrapper">
             {(lines || []).map((line, i) => (
               <div className="fact" key={i}>
-                {line.upper.data ? (
+                {line.upper?.data ? (
                   <>
                     <div
                       className="upper"

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

@@ -0,0 +1,55 @@
+import { cloneDeep } from 'lodash';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import imageNarrowSVG from '@eeacms/volto-bise-policy/../theme/assets/icons/image-narrow.svg';
+import leftSVG from '@eeacms/volto-bise-policy/../theme/assets/icons/image-half-left.svg';
+import rightSVG from '@eeacms/volto-bise-policy/../theme/assets/icons/image-half-right.svg';
+
+export const ALIGN_INFO_MAP = {
+  narrow_width: [imageNarrowSVG, 'Narrow width'],
+  container_width: [imageFitSVG, 'Container width'],
+  wide_width: [imageWideSVG, 'Wide width'],
+  full: [imageFullSVG, 'Full width'],
+  half_width_left: [leftSVG, 'Half width left'],
+  half_width_right: [rightSVG, 'Half width right'],
+};
+
+export const addStylingFieldsetSchemaEnhancer = ({ schema }) => {
+  const applied = schema?.properties?.styles;
+
+  if (!applied) {
+    const resSchema = cloneDeep(schema);
+
+    resSchema.fieldsets.push({
+      id: 'styling',
+      fields: ['styles'],
+      title: 'Styling',
+    });
+    resSchema.properties.styles = {
+      widget: 'object',
+      title: 'Styling',
+      schema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: ['size'],
+          },
+        ],
+        properties: {
+          size: {
+            widget: 'style_align',
+            title: 'Section size',
+            actions: Object.keys(ALIGN_INFO_MAP),
+            actionsInfoMap: ALIGN_INFO_MAP,
+          },
+        },
+        required: [],
+      },
+    };
+    return resSchema;
+  }
+
+  return schema;
+};

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -4,20 +4,85 @@
  */
 
 import React from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import EEAFooter from '@eeacms/volto-eea-design-system/ui/Footer/Footer';
 import config from '@plone/volto/registry';
 
-const Footer = (props) => {
+const Footer = () => {
   const { eea } = config.settings;
+  const {
+    footerActions = [],
+    copyrightActions = [],
+    socialActions = [],
+    contactActions = [],
+    contactExtraActions = [],
+  } = useSelector(
+    (state) => ({
+      footerActions: state.actions?.actions?.footer_actions,
+      copyrightActions: state.actions?.actions?.copyright_actions,
+      socialActions: state.actions?.actions?.social_actions,
+      contactActions: state.actions?.actions?.contact_actions,
+      contactExtraActions: state.actions?.actions?.contact_extra_actions,
+    }),
+    shallowEqual,
+  );
+  // ZMI > portal_actions > footer_actions
+  const actions = footerActions.length
+    ? footerActions.map((action) => ({
+        title: action.title,
+        link: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.actions;
+
+  // ZMI > portal_actions > copyright_actions
+  const copyright = copyrightActions.length
+    ? copyrightActions.map((action) => ({
+        title: action.title,
+        site: action.title,
+        link: flattenToAppURL(action.url),
+      }))
+    : eea.footerOpts.copyright;
+
+  // ZMI > portal_actions > social_actions
+  const social = socialActions.length
+    ? socialActions.map((action) => ({
+        name: action.id,
+        icon: action.icon,
+        link: action.url,
+      }))
+    : eea.footerOpts.social;
+
+  // ZMI > portal_actions > contact_actions
+  const contacts = contactActions.length
+    ? contactActions.map((action, idx) => ({
+        text: action.title,
+        icon: action.icon,
+        link: flattenToAppURL(action.url),
+        children:
+          idx === 0
+            ? contactExtraActions.map((child) => ({
+                text: child.title,
+                icon: child.icon,
+                link: flattenToAppURL(child.url),
+              }))
+            : [],
+      }))
+    : eea.footerOpts.contacts;
+
+  // Update options with actions from backend
+  const options = {
+    ...eea.footerOpts,
+    social,
+    contacts,
+  };
+
   return (
     <EEAFooter>
-      <EEAFooter.SubFooter {...eea.footerOpts} />
+      <EEAFooter.SubFooter {...options} />
       <EEAFooter.Header>{eea.footerOpts.header}</EEAFooter.Header>
       <EEAFooter.Sites sites={eea.footerOpts.sites} />
-      <EEAFooter.Actions
-        actions={eea.footerOpts.actions}
-        copyright={eea.footerOpts.copyright}
-      />
+      <EEAFooter.Actions actions={actions} copyright={copyright} />
     </EEAFooter>
   );
 };

package/src/index.js

@@ -1,4 +1,5 @@
 import installLink from '@plone/volto-slate/editor/plugins/AdvancedLink';
+import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-bise-policy/components/manage/Blocks/schema';
 
 import installBlocks from './components/manage/Blocks';
 import installStyles from './components/manage/Styles';
@@ -75,6 +76,29 @@ const applyConfig = (config) => {
   toolbarButtons.splice(linkIndex, 1, 'a');
   toolbarButtons.splice(advancedLinkIndex, 1);
 
+  // Customizations
+  // Group
+  if (config.blocks.blocksConfig.group) {
+    config.blocks.blocksConfig.group.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
+  // Columns
+  if (config.blocks.blocksConfig.columnsBlock) {
+    config.blocks.blocksConfig.columnsBlock.mostUsed = true;
+    config.blocks.blocksConfig.columnsBlock.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
+  // Listing
+  if (config.blocks.blocksConfig.listing) {
+    config.blocks.blocksConfig.listing.title = 'Listing (Content)';
+    config.blocks.blocksConfig.listing.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
+  // Hero image left
+  if (config.blocks.blocksConfig.hero_image_left) {
+    config.blocks.blocksConfig.hero_image_left.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
+  }
+
   return [installBlocks, installStyles].reduce(
     (acc, apply) => apply(acc),
     config,

package/theme/assets/icons/image-half-left.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+<g>
+<path fill-rule="nonzero" d="M18,13l2-2v14l-2-2h15l-2,2V11l2,2H18z M33,11v14H18V11H33z"/>
+<polygon points="3,31 33,31 33,29 3,29 "/>
+<polygon points="3,7 33,7 33,5 3,5 "/>
+<polygon points="12.3,15.8 14,17.5 5,17.5 6.7,15.8 5.9,15.1 3,18 5.9,20.9 6.7,20.2 5,18.5 14,18.5 12.3,20.2 13.1,20.9 16,18 
+	13.1,15.1 "/>
+	</g>
+</svg>

package/theme/assets/icons/image-half-right.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+<g>
+<path fill-rule="nonzero" d="M3,13l2-2v14l-2-2h15l-2,2V11l2,2H3z M18,11v14H3V11H18z"/>
+<polygon points="3,31 33,31 33,29 3,29 "/>
+<polygon points="3,7 33,7 33,5 3,5 "/>
+<polygon points="29.3,15.8 31,17.5 22.1,17.5 23.8,15.8 23,15.1 20.1,18 23,20.9 23.8,20.2 22.1,18.5 31,18.5 29.3,20.2 30.1,20.9 
+	33,18 30.1,15.1 "/>
+	</g>
+
+</svg>

package/theme/assets/icons/image-narrow.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <path d="M10 13L11.9333 11V25L10 23H26L24.0667 25V11L26 13H10ZM26 11V18V21.5V23.5V25H10V11H26Z" fill="black" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 31H29V29H7V31Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7 7H29V5H7V7Z" />
+</svg>

package/theme/collections/message.overrides

@@ -5,6 +5,10 @@
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
     font-style: italic;
-    box-shadow: none;
+    position: relative;
+
+    &.shadow-none {
+      box-shadow: none;
+    }
   }
 }

package/theme/extras/pluggables.less

@@ -49,22 +49,10 @@
   }
 }
 
-.marginless {
-  margin: 0;
+.marginless,
+div#view .ui.container > .marginless {
   margin-top: 0;
-  margin-right: 0;
   margin-bottom: 0;
-  margin-left: 0;
-}
-
-div#view .ui.container > {
-  .marginless {
-    margin: 0;
-    margin-top: 0;
-    margin-right: 0;
-    margin-bottom: 0;
-    margin-left: 0;
-  }
 }
 
 .padded {

package/theme/extras/widgets.less

@@ -0,0 +1,3 @@
+.align-widget .align-buttons {
+  flex-wrap: wrap;
+}

package/theme/globals/site.overrides

@@ -2,13 +2,14 @@
         Global Overrides
 *******************************/
 
-@import '../extras/keyfacts.less';
-@import '../extras/factsheets.less';
-@import '../extras/pluggables.less';
-@import '../extras/stylemenu.less';
-@import '../extras/tocnav.less';
-@import './helpers.less';
-@import './natura2000.less';
+@import '../extras/widgets';
+@import '../extras/keyfacts';
+@import '../extras/factsheets';
+@import '../extras/pluggables';
+@import '../extras/stylemenu';
+@import '../extras/tocnav';
+@import './helpers';
+@import './natura2000';
 
 // :root {
 //   .define-color(primary, #005248);
@@ -22,24 +23,6 @@
 //   .define-color(dark-tertiary, #2e3e4c);
 // }
 
-// body::-webkit-scrollbar {
-//   width: @scrollbarWidth;
-// }
-
-// body::-webkit-scrollbar-track {
-//   background: #F9F9F9;
-// }
-
-// body::-webkit-scrollbar-thumb {
-//   background-color: #B4B4B4;
-//   border-radius: 20px;
-//   border: 3px solid #FAF9F9;
-// }
-
-// body::-webkit-scrollbar-thumb:hover {
-//   background-color: #6A6A6A;
-// }
-
 @font-face {
   font-family: 'OpenSans';
   font-weight: normal;
@@ -111,9 +94,9 @@ p.has--clear--both:empty {
       // border-bottom: 2px solid @darkSecondaryColor;
     }
 
-    h2 {
-      // border-bottom: 2px solid @secondaryColor;
-    }
+    // h2 {
+    //   border-bottom: 2px solid @secondaryColor;
+    // }
 
     .column-blocks-wrapper {
       display: flex;
@@ -171,36 +154,24 @@ p.has--clear--both:empty {
     padding: 0 !important;
   }
 
-  /* TEXT */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  a,
-  span,
-  button {
-    font-family: OpenSans, 'Raleway', sans-serif;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: @primaryColor !important;
+  .eea.header a:hover {
+    color: @secondaryColor;
   }
 
-  h2 {
-    font-weight: 600;
-  }
-
-  a {
-    color: @secondaryColor;
-    font-weight: 600;
+  .content-area {
+    /* TEXT */
+    // h1,
+    // h2,
+    // h3,
+    // h4,
+    // h5,
+    // h6,
+    // p,
+    // a,
+    // span,
+    // button {
+    //   font-family: OpenSans, 'Raleway', sans-serif;
+    // }
 
     h1,
     h2,
@@ -208,12 +179,16 @@ p.has--clear--both:empty {
     h4,
     h5,
     h6 {
-      color: @secondaryColor !important;
+      color: @primaryColor !important;
+    }
+
+    h2 {
+      font-weight: 600;
     }
 
-    &:hover {
+    a {
       color: @secondaryColor;
-      text-decoration: underline;
+      font-weight: 600;
 
       h1,
       h2,
@@ -223,21 +198,6 @@ p.has--clear--both:empty {
       h6 {
         color: @secondaryColor !important;
       }
-    }
-  }
-
-  .light-links {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: @secondaryColor !important;
-    }
-
-    a {
-      color: @secondaryColor;
 
       &:hover {
         color: @secondaryColor;
@@ -253,15 +213,44 @@ p.has--clear--both:empty {
         }
       }
     }
-  }
 
-  .dark-links {
-    a {
-      color: @primaryColor;
+    .light-links {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: @secondaryColor !important;
+      }
 
-      &:hover {
+      a {
+        color: @secondaryColor;
+
+        &:hover {
+          color: @secondaryColor;
+          text-decoration: underline;
+
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6 {
+            color: @secondaryColor !important;
+          }
+        }
+      }
+    }
+
+    .dark-links {
+      a {
         color: @primaryColor;
-        text-decoration: underline;
+
+        &:hover {
+          color: @primaryColor;
+          text-decoration: underline;
+        }
       }
     }
   }
@@ -275,4 +264,12 @@ p.has--clear--both:empty {
   .ui.content-area {
     margin-bottom: 2rem;
   }
-} 
+}
+
+#toolbar {
+  z-index: 6;
+}
+
+.simple-data-table {
+  padding: 0;
+}

package/theme/globals/site.variables

@@ -4,8 +4,8 @@
 
 @import '@eeacms/volto-bise-policy/../theme/tokens/tokens';
 
-@fontName: 'OpenSans';
-@fontSize: 16px;
+// @fontName: 'OpenSans';
+// @fontSize: 16px;
 
 /*-------------------
     Brand Colors

package/theme/theme.config

@@ -18,12 +18,13 @@
 */
 
 /* Global */
-@site        : 'eea';
+@site        : 'mirage';
 @reset       : 'eea';
+@mixins      : 'mirage';
 
 /* Elements */
 @button      : 'eea';
-@container   : 'eea';
+@container   : 'mirage';
 @divider     : 'eea';
 @flag        : 'eea';
 @header      : 'eea';
@@ -77,39 +78,41 @@
 @main        : 'eea';
 @custom      : 'eea';
 /* EEA Design system custom components */
-@blockquote             : 'eea';
-@pullquote              : 'eea';
-@banner                 : 'eea';
-@timeline               : 'eea';
-@footer                 : 'eea';
-@header                 : 'eea';
-@tag                    : 'eea';
-@tags                   : 'eea';
-@tagList                : 'eea';
-@contextNavigation      : 'eea';
-@inpageNavigation       : 'eea';
-@avatar                 : 'eea';
-@divider                : 'eea';
-@testimonial            : 'eea';
-@avatarGrid             : 'eea';
-@keyContent             : 'eea';
-@publicationCard        : 'eea';
-@contentBox             : 'eea';
-@reverseCardGrid        : 'eea';
-@relatedContent         : 'eea';
-@share                  : 'eea';
-@faqContent             : 'eea';
-@reportCard             : 'eea';
-@faqFilter              : 'eea';
-@contentAccordion       : 'eea';
-@downloadLabeledIcon    : 'eea';
-@newTabLabeledIcon      : 'eea';
-@labeledIconGroup       : 'eea';
-@languageLabeledIcon    : 'eea';
-@callout                : 'eea';
-@quote                  : 'eea';
-@hero                   : 'eea';
-@copyright              : 'eea';
+@blockquote          : 'eea';
+@pullquote           : 'eea';
+@banner              : 'eea';
+@timeline            : 'eea';
+@footer              : 'eea';
+@header              : 'eea';
+@tag                 : 'eea';
+@tags                : 'eea';
+@tagList             : 'eea';
+@inpageNavigation    : 'eea';
+@contextNavigation   : 'eea';
+@avatar           : 'eea';
+@divider          : 'eea';
+@testimonial      : 'eea';
+@avatarGrid       : 'eea';
+@keyContent       : 'eea';
+@publicationCard  : 'eea';
+@contentBox       : 'mirage';
+@reverseCardGrid  : 'eea';
+@relatedContent   : 'eea';
+@share            : 'eea';
+@faqContent       : 'eea';
+@reportCard       : 'eea';
+@faqFilter        : 'eea';
+@contentAccordion : 'eea';
+@downloadLabeledIcon :'eea';
+@newTabLabeledIcon   : 'eea';
+@labeledIconGroup    : 'eea';
+@languageLabeledIcon : 'eea';
+@callout    : 'eea';
+@quote      : 'eea';
+@hero       : 'mirage';
+@copyright  : 'eea';
+@columns    : 'mirage';
+@spotlight  : 'mirage';
 
 /*******************************
             Folders
@@ -124,7 +127,7 @@
 /*******************************
          Import Theme
 *******************************/
-@import (multiple) "~eea-volto-theme-folder/theme.less";
+@import (multiple) "~volto-spotlight-theme-folder/theme.less";
 
 @fontPath: "~volto-themes/default/assets/fonts";