@eeacms/volto-eea-design-system 1.0.0-beta.5 → 1.0.0-beta.6

package/CHANGELOG.md

@@ -4,6 +4,46 @@ 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.0-beta.6](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.5...1.0.0-beta.6) - 10 March 2023
+
+#### :rocket: New Features
+
+- feat(site): serve Roboto fonts from eea design system package instead of google fonts  #311 from eea/roboto-library [ichim-david - [`f6a1b3e`](https://github.com/eea/volto-eea-design-system/commit/f6a1b3e3864a0bc8602e9c434ff70746bba59f44)]
+
+#### :bug: Bug Fixes
+
+- fix(storybook): add fontDisplay [Giorgos Stamatis - [`078966a`](https://github.com/eea/volto-eea-design-system/commit/078966a6a5c7277d36fcd31bb4c0704bcc43e523)]
+- fix: full-width is now properly sized [Miu Razvan - [`6e2e348`](https://github.com/eea/volto-eea-design-system/commit/6e2e3482d658febbd692112608df14279bed05e7)]
+
+#### :nail_care: Enhancements
+
+- change(colors:) update the design system colour palette  #312 from eea/update-color-palette [ichim-david - [`a5fb694`](https://github.com/eea/volto-eea-design-system/commit/a5fb69465717dbdc0fe8091640a0e46f66199b65)]
+- change(image): copyright position fixes, moved image floating to image-block-container [David Ichim - [`53422e0`](https://github.com/eea/volto-eea-design-system/commit/53422e0ea345a7cb6e8cb07bf9006b48d86ded58)]
+- refactor(storybook): restored site variables [Giorgos Stamatis - [`a48478b`](https://github.com/eea/volto-eea-design-system/commit/a48478bae9bdf1d9275be999e1ec8382f10a2fec)]
+- refactor(docusaurus): added roboto library [Giorgos Stamatis - [`19de7b1`](https://github.com/eea/volto-eea-design-system/commit/19de7b19fe795870102000bfebbf452d88b3a7b1)]
+- refactor(storybook): added roboto library [Giorgos Stamatis - [`e991621`](https://github.com/eea/volto-eea-design-system/commit/e9916215728dda0ff423f8196e7442588058042e)]
+- change(copyright): implemented copyright hover design [David Ichim - [`6b12441`](https://github.com/eea/volto-eea-design-system/commit/6b1244163de7ff58d1529fdd791502c862ee48ec)]
+- refactor(tokens): update colours [Giorgos Stamatis - [`3a2c1e1`](https://github.com/eea/volto-eea-design-system/commit/3a2c1e1da8f0224e08f9f8afac3f0a74f7ce91d3)]
+
+#### :house: Internal changes
+
+- chore(storybook): switched google fonts to true [Giorgos Stamatis - [`4a8cae4`](https://github.com/eea/volto-eea-design-system/commit/4a8cae46582356cc24ec3cd7ec47e692bc67a6a5)]
+- chore(lint): lint [Giorgos Stamatis - [`9b0f125`](https://github.com/eea/volto-eea-design-system/commit/9b0f1256a8b0a583ac7724a8d88259c615d7e0c7)]
+- chore(storybook): lint [Giorgos Stamatis - [`29bc809`](https://github.com/eea/volto-eea-design-system/commit/29bc809ab2e9fa4207b8b067785e6b17e91db3b4)]
+- chore(colours): changed back yellow 6 [Giorgos Stamatis - [`87c9bbc`](https://github.com/eea/volto-eea-design-system/commit/87c9bbc0ec9a2a0f4bf8eeb03525d43ce6f502be)]
+
+#### :house: Documentation changes
+
+- docs(colours): accessibility [Dora Anastasiou - [`ee342aa`](https://github.com/eea/volto-eea-design-system/commit/ee342aa6af3863d243222eaa89709be2ba61f988)]
+- docs(colours): colours update [Dora Anastasiou - [`161007e`](https://github.com/eea/volto-eea-design-system/commit/161007e2480aa79517c4ca772364a12a0756f1af)]
+
+#### :hammer_and_wrench: Others
+
+- test(cypress): Use latest stable Volto for testing [Alin Voinea - [`2051661`](https://github.com/eea/volto-eea-design-system/commit/20516617ae045f48c37a7ac7ad05c3d1090339b3)]
+- Update What's new section [Alin Voinea - [`caa4b5d`](https://github.com/eea/volto-eea-design-system/commit/caa4b5d93affa7b63a332eaed9e73ea161a508cf)]
+- Prepare final release 1.0.0 [Alin Voinea - [`ef4383d`](https://github.com/eea/volto-eea-design-system/commit/ef4383d05b295cbbb377f877522b9f83cd0873ef)]
+- lint fix [David Ichim - [`599f509`](https://github.com/eea/volto-eea-design-system/commit/599f5098904f607bd694dd5d2e642c8820f11b3c)]
+- Back to dev [Alin Voinea - [`80cd3df`](https://github.com/eea/volto-eea-design-system/commit/80cd3df3534e46e52ba246256c3d990a52753bbd)]
 ### [1.0.0-beta.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.4...1.0.0-beta.5) - 7 March 2023
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,6 +21,7 @@
   ],
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
+    "@fontsource/roboto": "4.5.8",
     "react-countup": "^6.3.0",
     "react-lazy-load-image-component": "1.5.6",
     "react-slick": "^0.28.1",

package/src/helpers/useOnScreen.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable react-hooks/exhaustive-deps */
 import React from 'react';
 

package/templates/eea.hbs

@@ -2,7 +2,7 @@
 title: What's new
 ---
 
-### EEA Design System (1.0.0-beta)
+### EEA Design System (1.0.0)
 
 #### Components ready to be used
 
@@ -10,13 +10,12 @@ The following components are ready to be used as Volto `blocks`, `slate` integra
 - Accordion `block`
 - Call to Action `block`
 - Callout - part of the Description `block`, `slate`
-- Card - part of the Teaser `block` and Listing `block`, it includes several variations like round card e.g., used for Avatar (except the Landscape card variation- image on left/right)
-- Content Box `block styler`
+- Card - part of the Teaser `block` and Listing `block`, it includes several variations like round card e.g., used for Avatar
 - Divider `block`
 - Headings `slate`
 - Hero `block`
 - Item `block` - used for text with an icon (remixicon or custom SVG/image) on the left/right
-- List `slate` - ordered and unordered (description list still WIP)
+- List `slate` - ordered and unordered
 - Quote `block`
 - Statistic `block`
 - Tag `block`
@@ -24,14 +23,13 @@ The following components are ready to be used as Volto `blocks`, `slate` integra
 - Tabs `block`
 - Timeline `block`
 
-#### Work-in-progress
+#### Future releases
 
 Below is a non-exhaustive list of the work-in-progress which is planned for future releases:
 - Navigation Portlet (used on the left/right hand of content) is still WIP and should not be used
 - When using the Table `block`, please be aware of enabling the responsive design manually (it should be on by default in later releases)
 - Description list (dt, dd) is still missing from slate editor
 - Slate enhancements, e.g. the inclusion of various font weights and text alignment (left, centered, right)
-- Better theming engine across several components, e.g., a consistent way to apply Primary, Secondary, and Tertiary colors to elements and automatic inversion of font text to white when necessary.
 - Spacing/padding system via the `block styler`. We do have design-tokens; however, these are not exposed to the volto block styler. We want to add the ability for editors to consistently apply various spacing/padding on certain components in order to allow a better alignment when components are used together.
 - Harmonize component naming across docusarurus, storybook, code, and Volto.
 - Improve docusaurus and storybook with more components, controls, and variations in order to better reflect what is possible in Volto.

package/theme/theme.config

@@ -135,5 +135,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */

package/theme/theme.less

@@ -48,9 +48,13 @@
        Fonts
 -------------------*/
 
-.loadFonts() when (@importGoogleFonts) {
-  @import (css)
-    url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}');
+.loadFonts() {
+  @import (css) '~@fontsource/roboto/latin-300.css';
+  @import (css) '~@fontsource/roboto/latin-400.css';
+  @import (css) '~@fontsource/roboto/latin-500.css';
+  @import (css) '~@fontsource/roboto/latin-700.css';
+  @import (css) '~@fontsource/roboto/latin-400-italic.css';
+  @import (css) '~@fontsource/roboto/latin-700-italic.css';
 }
 
 /*------------------

package/theme/themes/eea/elements/container.overrides

@@ -120,6 +120,11 @@ body {
   margin-left: -50vw !important;
 }
 
+[class~="view-defaultview"] [id="page-document"] > .full-width,
+[class~="view-viewview"] [id="page-document"] > .full-width {
+  max-width: initial !important;
+}
+
 .has--size--full:not(.block-editor-columnsBlock) .ui.grid {
   margin-left: 0;
   margin-right: 0;

package/theme/themes/eea/elements/image.overrides

@@ -47,3 +47,74 @@
 .block .ui.massive.image {
   width: @massiveWidth;
 }
+
+
+/*--------------
+  Image block float changes
+---------------*/
+
+.image-block {
+  position: relative;
+}
+
+// remove block.less margin from image, we set margin on block instead
+.block.image.align img {
+  margin-bottom: 0 !important;
+}
+
+// remove float from images, set on block instead
+.block.image.align.right,
+.block.image.align.left {
+  img {
+    max-width: 100% !important;
+    float: none !important;
+    margin: 0 !important;
+  }
+}
+
+/* edit page fixes for float issues */
+#page-edit  .image {
+  max-width: 100%;
+  min-height: @imageMinHeight;
+}
+#page-edit  .image.left,
+#page-edit  .image.right,
+#page-document > .image.left,
+#page-document > .image.right {
+  float: none;
+}
+
+.image-block-container {
+  position: relative;
+}
+
+/* if the image is smaller than the content area the copyright
+  isn't as big as the image unless the image is inline-block
+*/
+.image-block-container.center {
+  display: inline-block;
+}
+
+.image-block-container.right {
+  margin-left: @imageBlockContainerLeftMargin;
+  float: right;
+}
+
+.image-block-container.left {
+  margin-right: @imageBlockContainerRightMargin;
+  float: left;
+}
+
+/* Set max size on image-block-container, by default it's set to block image */
+.image.align:not(.full, .center) .image-block-container {
+  max-width: @imageAlignLargeMaxWidth;
+}
+
+.image.align:not(.full, .center) .image-block-container.medium {
+  max-width: @imageAlignMediumMaxWidth;
+}
+
+.image.align:not(.full, .center) .image-block-container.small {
+  max-width: @imageAlignSmallMaxWidth;
+}
+

package/theme/themes/eea/elements/image.variables

@@ -13,6 +13,14 @@
 @imageVerticalMargin: 0.5rem;
 @imageBorder: 1px solid rgba(0, 0, 0, 0.1);
 
+/* Image block container */
+@imageBlockContainerLeftMargin: @rem-space-4;
+@imageBlockContainerRightMargin: @rem-space-4;
+@imageMinHeight: @rem-space-6;
+@imageAlignLargeMaxWidth: 50%;
+@imageAlignMediumMaxWidth: 25%;
+@imageAlignSmallMaxWidth: 15%;
+
 /*-------------------
        Types
 --------------------*/

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

@@ -14,6 +14,8 @@
         display: flex;
         color: @copyrightContentColor;
         font-size: @copyrightContentFontSize;
+        min-height: @copyrightMinHeight;
+        align-items: @copyrightAlignItems;
         line-height: @copyrightLineHeight;
         gap: @copyrightContentPaddingRight;
     }
@@ -27,3 +29,23 @@
     margin: 0; // override default
   }
 }
+
+
+.copyright-wrapper {
+  position: absolute;
+  z-index: @z-index-8;
+  bottom: @copyrightWrapperBottom;
+  width: 100%;
+  padding-right: @copyrightWrapperPaddingLeft;
+  padding-left: @copyrightWrapperPaddingRight;
+}
+
+.copyright-hover-container {
+  position: absolute;
+  z-index: @z-index-8;
+  bottom: 0;
+  padding: @copyrightHoverContainerPadding;
+  background-color: @copyrightHoverContainerBackgroundColor;
+  border-radius: @copyrightHoverContainerBorderRadius;
+  color: @copyrightHoverContainerColor;
+}

package/theme/themes/eea/extras/copyright.variables

@@ -9,3 +9,19 @@
 @copyrightContentFontSize: @font-size-00;
 @copyrightLineHeight: @font-lineheight-0;
 @copyrightContentPaddingRight: @rem-space-1;
+@copyrightWrapperPaddingLeft: @rem-space-3;
+@copyrightWrapperPaddingRight: @rem-space-3;
+@copyrightWrapperBottom: @rem-space-4;
+@copyrightMinHeight: @rem-space-8;
+@copyrightAlignItems: center;
+
+/* Image block */
+@floatImageLeftMaxWidth: 50%;
+@floatImageRightMaxWidth: 50%;
+
+
+
+@copyrightHoverContainerPadding: @rem-space-1 @rem-space-2;
+@copyrightHoverContainerBackgroundColor: @tertiaryColor;
+@copyrightHoverContainerBorderRadius: @rem-space-1;
+@copyrightHoverContainerColor: @grey-1;

package/theme/themes/eea/globals/site.overrides

@@ -75,6 +75,12 @@ h2, h3, h4, h5, h6 {
   margin-bottom: @rem-space-4;
 }
 
+// clear any floats if we add a columns block as a floated image
+// can modify the width of the column block children
+.styled-columnsBlock {
+  clear: both;
+}
+
 // text smaller than body has extra letterspacing as described in docusaurus
 .tiny,
 .caption,

package/theme/themes/eea/globals/site.variables

@@ -11,6 +11,7 @@
 
 @fontName          : 'Roboto';
 @fontSmoothing     : antialiased;
+@fontDisplay       : swap;
 
 @headerFont        : @fontName, Arial, 'Helvetica Neue', Helvetica, sans-serif;
 @pageFont          : @fontName, Arial, 'Helvetica Neue', Helvetica, sans-serif;

package/theme/themes/eea/tokens/colors.less

@@ -23,10 +23,10 @@
 @red-6: #5C1918;
 
 @green-0: #C8FFF8;
-@green-1: #85FFF1;
-@green-2: #00F5D8;
-@green-3: #00CCB4;
-@green-4: #00A390;
+@green-1: #A0E5DC;
+@green-2: #78CAC0;
+@green-3: #50B0A4;
+@green-4: #289588;
 @green-5: #007B6C;
 @green-6: #005248;
 
@@ -36,7 +36,7 @@
 @yellow-3: #FAC50D;
 @yellow-4: #FDAF20;
 @yellow-5: #FF9933;
-@yellow-6: #E56B38;
+@yellow-6: #C35527;
 
 @blue-0: #A0D7FF;
 @blue-1: #47B3FF;
@@ -48,7 +48,7 @@
 
 @blue-grey-0: #DAE8F4;
 @blue-grey-1: #ACCAE5;
-@blue-grey-2: #8EA6C2;
+@blue-grey-2: #87A7C3;
 @blue-grey-3: #6989A5;
 @blue-grey-4: #4C677F;
 @blue-grey-5: #3D5265;