@eeacms/volto-eea-design-system 1.16.0 → 1.18.0

package/theme/themes/eea/extras/banner.less

@@ -59,9 +59,9 @@
         align-items: @mobileActionsAlignItems;
         justify-content: flex-end;
 
-        > .action {
+        .action {
           .ui.basic.inverted.button {
-            /* used basic inverted button for minimun overrides on box-shadow and active state background */
+            /* used basic inverted button for minimum overrides on box-shadow and active state background */
             box-shadow: @bannerActionButtonBoxShadow !important;
 
             &:active {
@@ -166,7 +166,7 @@
           flex-direction: @tabletActionsFlexDirection;
           align-items: @tabletActionsAlignItems;
 
-          > .action {
+          .action {
             min-width: @tabletActionsActionMinWidth;
 
             .ui.basic.inverted.button i.icon {

package/theme/themes/eea/modules/accordion.overrides

@@ -7,9 +7,9 @@
 }
 
 .ui.accordion button.title {
-  background: transparent;
   width: 100%;
   border: none;
+  background: transparent;
 }
 
 .ui.accordion {
@@ -60,7 +60,18 @@
       color: @iconColor;
       font-size: @iconFontSize;
       line-height: @iconFontSize;
+    }
+
+    &.filter {
+      .icon {
+        margin: @filterIconMargin;
+        color: var(--text-color, @filterTextColor);
+        font-size: @filterIconFontSize;
+      }
 
+      .ui.input input::placeholder {
+        color: var(--text-color, @filterTextColor);
+      }
     }
   }
 
@@ -75,9 +86,9 @@
   }
 
   .content {
+    padding: @contentPadding;
     background: @contentBackground;
     color: @contentColor;
-    padding: @contentPadding;
   }
 }
 
@@ -94,11 +105,12 @@
      Styled
 ---------------*/
 
-.ui.styled.accordion  .title,
-.ui.styled.accordion  .title:hover,
-.ui.styled.accordion  .title:focus-visible {
+.ui.styled.accordion .title,
+.ui.styled.accordion .title:hover,
+.ui.styled.accordion .title:focus-visible {
   background-color: @styledActiveTitleBackground;
 }
+
 .ui.styled.accordion .active.title input {
   color: @styledActiveTitleColor;
 }
@@ -125,8 +137,7 @@
    Variations
 ---------------*/
 .ui.accordion[class*='ary'] .active.title,
-.ui.accordion[class*='ary'] .filter
- {
+.ui.accordion[class*='ary'] .filter {
   --text-color-hover: white;
   --text-color: white;
 }
@@ -136,6 +147,7 @@
 .ui.accordion.primary .filter {
   --bg-color: @primaryColorCSSVar;
 }
+
 .ui.accordion.primary .title:not(.active, .filter):hover,
 .ui.accordion.primary .title:not(.active, .filter):focus-visible {
   --text-color-hover: @primaryColorCSSVar;
@@ -146,6 +158,7 @@
 .ui.accordion.secondary .filter {
   --bg-color: @secondaryColorCSSVar;
 }
+
 .ui.accordion.secondary .title:not(.active, .filter):hover,
 .ui.accordion.secondary .title:not(.active, .filter):focus-visible {
   --text-color-hover: @secondaryColorCSSVar;
@@ -156,14 +169,26 @@
 .ui.accordion.tertiary .filter {
   --bg-color: @tertiaryColorCSSVar;
 }
+
 .ui.accordion.tertiary .title:not(.active, .filter):hover,
 .ui.accordion.tertiary .title:not(.active, .filter):focus-visible {
   --text-color-hover: @tertiaryColorCSSVar;
 }
 
 @media only screen and (max-width: @largestMobileScreen) {
-  .accordion-block h1 * { font-size: @mobileH1; }
-  .accordion-block h2 * { font-size: @mobileH2; }
-  .accordion-block h3 * { font-size: @mobileH3; }
-  .accordion-block h4 * { font-size: @mobileH4; }
+  .accordion-block h1 * {
+    font-size: @mobileH1;
+  }
+
+  .accordion-block h2 * {
+    font-size: @mobileH2;
+  }
+
+  .accordion-block h3 * {
+    font-size: @mobileH3;
+  }
+
+  .accordion-block h4 * {
+    font-size: @mobileH4;
+  }
 }

package/theme/themes/eea/modules/accordion.variables

@@ -36,6 +36,8 @@
 @iconOrder: 1; // Icon after text of the title
 @filterIconWidth: 3rem;
 @filterIconFontSize: 2rem;
+@filterIconMargin: 0 10px;
+@filterTextColor: @grey-4;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;

package/theme/themes/eea/views/item.overrides

@@ -172,6 +172,27 @@
   }
 }
 
+.flex-items-wrapper.items-2-columns .flex-item {
+  width: var(--flex-item-width, 100%);
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+  .flex-items-wrapper.items-2-columns  .flex-item {
+    --flex-item-width: calc(@width / 2 - 1%);
+  }
+
+  .flex-items-wrapper.items-3-columns .flex-item {
+    --flex-item-width: calc(@width / 3);
+  }
+
+  .flex-items-wrapper.items-4-columns .flex-item {
+    --flex-item-width: calc(@width / 4);
+  }
+
+  .flex-items-wrapper.items-5-columns .flex-item {
+    --flex-item-width: calc(@width / 5);
+  }
+}
+
 
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {

package/src/i18n.js

@@ -1,180 +0,0 @@
-/* eslint no-console: 0 */
-/**
- * i18n script.
- * @module scripts/i18n
- */
-
-const { find, keys, map, concat, reduce } = require('lodash');
-const glob = require('glob').sync;
-const fs = require('fs');
-const Pofile = require('pofile');
-const babel = require('@babel/core');
-
-/**
- * Extract messages into separate JSON files
- * @function extractMessages
- * @return {undefined}
- */
-function extractMessages() {
-  map(glob('src/**/*.js?(x)'), (filename) => {
-    babel.transformFileSync(filename, {}, (err) => {
-      if (err) {
-        console.log(err);
-      }
-    });
-  });
-}
-
-/**
- * Get messages from separate JSON files
- * @function getMessages
- * @return {Object} Object with messages
- */
-function getMessages() {
-  return reduce(
-    concat(
-      {},
-      ...map(
-        // We ignore the existing customized shadowed components ones, since most
-        // probably we won't be overriding them
-        // If so, we should do it in the config object or somewhere else
-        glob('build/messages/src/**/*.json', {
-          ignore: 'build/messages/src/customizations/**',
-        }),
-        (filename) =>
-          map(JSON.parse(fs.readFileSync(filename, 'utf8')), (message) => ({
-            ...message,
-            filename: filename.match(/build\/messages\/src\/(.*).json$/)[1],
-          })),
-      ),
-    ),
-    (current, value) => {
-      let result = current;
-      if (current.id) {
-        result = {
-          [current.id]: {
-            defaultMessage: current.defaultMessage,
-            filenames: [current.filename],
-          },
-        };
-      }
-
-      if (result[value.id]) {
-        result[value.id].filenames.push(value.filename);
-      } else {
-        result[value.id] = {
-          defaultMessage: value.defaultMessage,
-          filenames: [value.filename],
-        };
-      }
-      return result;
-    },
-  );
-}
-
-/**
- * Convert messages to pot format
- * @function messagesToPot
- * @param {Object} messages Messages
- * @return {string} Formatted pot string
- */
-function messagesToPot(messages) {
-  return map(keys(messages).sort(), (key) =>
-    [
-      ...map(messages[key].filenames, (filename) => `#: ${filename}`),
-      `# defaultMessage: ${messages[key].defaultMessage}`,
-      `msgid "${key}"`,
-      'msgstr ""',
-    ].join('\n'),
-  ).join('\n\n');
-}
-
-/**
- * Pot header
- * @function potHeader
- * @return {string} Formatted pot header
- */
-function potHeader() {
-  return `msgid ""
-msgstr ""
-"Project-Id-Version: Plone\\n"
-"POT-Creation-Date: ${new Date().toISOString()}\\n"
-"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\\n"
-"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\\n"
-"MIME-Version: 1.0\\n"
-"Content-Type: text/plain; charset=utf-8\\n"
-"Content-Transfer-Encoding: 8bit\\n"
-"Plural-Forms: nplurals=1; plural=0;\\n"
-"Language-Code: en\\n"
-"Language-Name: English\\n"
-"Preferred-Encodings: utf-8\\n"
-"Domain: volto\\n"
-
-`;
-}
-
-/**
- * Format header
- * @function formatHeader
- * @param {Array} comments Array of comments
- * @param {Object} headers Object of header items
- * @return {string} Formatted header
- */
-function formatHeader(comments, headers) {
-  return [
-    ...map(comments, (comment) => `# ${comment}`),
-    'msgid ""',
-    'msgstr ""',
-    ...map(keys(headers), (key) => `"${key}: ${headers[key]}\\n"`),
-    '',
-  ].join('\n');
-}
-
-/**
- * Sync po by the pot file
- * @function syncPoByPot
- * @return {undefined}
- */
-function syncPoByPot() {
-  const pot = Pofile.parse(fs.readFileSync('locales/volto.pot', 'utf8'));
-
-  map(glob('locales/**/*.po'), (filename) => {
-    const po = Pofile.parse(fs.readFileSync(filename, 'utf8'));
-
-    fs.writeFileSync(
-      filename,
-      `${formatHeader(po.comments, po.headers)}
-${map(pot.items, (item) => {
-  const poItem = find(po.items, { msgid: item.msgid });
-  return [
-    `${map(item.references, (ref) => `#: ${ref}`).join('\n')}`,
-    `msgid "${item.msgid}"`,
-    `msgstr "${poItem ? poItem.msgstr : ''}"`,
-  ].join('\n');
-}).join('\n\n')}\n`,
-    );
-  });
-}
-
-// Main tasks
-console.log('Extracting messages from source files...');
-extractMessages();
-console.log('Synchronizing messages to pot file...');
-// We only write the pot file if it's really different
-const newPot = `${potHeader()}${messagesToPot(getMessages())}\n`.replace(
-  /"POT-Creation-Date:(.*)\\n"/,
-  '',
-);
-const oldPot = fs
-  .readFileSync('locales/volto.pot', 'utf8')
-  .replace(/"POT-Creation-Date:(.*)\\n"/, '');
-
-if (newPot !== oldPot) {
-  fs.writeFileSync(
-    'locales/volto.pot',
-    `${potHeader()}${messagesToPot(getMessages())}\n`,
-  );
-}
-console.log('Synchronizing messages to po files...');
-syncPoByPot();
-console.log('done!');