@eeacms/volto-eea-design-system 1.0.0-beta.1 → 1.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/package.json +1 -1
  3. package/src/ui/Footer/Footer.jsx +1 -1
  4. package/src/ui/Footer/Footer.stories.js +4 -1
  5. package/src/ui/Footer/FooterActions.jsx +17 -6
  6. package/src/ui/Header/Header.jsx +1 -0
  7. package/templates/eea.hbs +1 -1
  8. package/theme/themes/eea/extras/footer.less +13 -13
  9. package/theme/themes/eea/extras/footer.variables +10 -7
  10. package/theme/themes/eea/extras/inpageNavigation.less +1 -0
package/CHANGELOG.md CHANGED
@@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ ### [1.0.0-beta.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.1...1.0.0-beta.2) - 13 February 2023
8
+
9
+ #### :bug: Bug Fixes
10
+
11
+ - fix(accessibility): added navigation and footer id's for skip link [David Ichim - [`48354b9`](https://github.com/eea/volto-eea-design-system/commit/48354b908e7d1a87b4e1a965d225e8f1b3e0ac59)]
12
+ - fix(footer): action or copyright links are simple a tags for external link [David Ichim - [`9af5070`](https://github.com/eea/volto-eea-design-system/commit/9af5070187ec975e58387f133afedcf1bbc47a50)]
13
+
14
+ #### :nail_care: Enhancements
15
+
16
+ - change(navigation): raise z-index of go to top link [David Ichim - [`485ca72`](https://github.com/eea/volto-eea-design-system/commit/485ca7291da7a156b6b580c42e46d4f3602211bb)]
17
+ - change(footer): modified footer gap [David Ichim - [`b8a820a`](https://github.com/eea/volto-eea-design-system/commit/b8a820ac90c7d6664e4d4655c2c06edfa976c64e)]
18
+ - change(footer): added gap for actions and copyright [David Ichim - [`7d32ddd`](https://github.com/eea/volto-eea-design-system/commit/7d32ddd3c28a48c6c2fb73dea373bb5873b6f76b)]
19
+ - change(footer): typos and modified footer links to be center aligned [David Ichim - [`ac23f04`](https://github.com/eea/volto-eea-design-system/commit/ac23f046bcac06525985dff7520bb2766dec44ec)]
20
+ - change(footer): removed extra text and date from copyright section [David Ichim - [`af47bbe`](https://github.com/eea/volto-eea-design-system/commit/af47bbec298678fece6f879fbc18fe2e01ab0894)]
21
+
22
+ #### :house: Internal changes
23
+
24
+ - chore(docs): Update eea.hbs template to beta - refs #158717 [Alin Voinea - [`196538e`](https://github.com/eea/volto-eea-design-system/commit/196538ed7bb9dab36a0efb4cef84e96dd3038ff8)]
25
+
26
+ #### :hammer_and_wrench: Others
27
+
28
+ - change version to beta 2 [David Ichim - [`cbb0798`](https://github.com/eea/volto-eea-design-system/commit/cbb07981454b28de840561eca281888e8bc29f9e)]
29
+ - Beta release [Alin Voinea - [`4ad51b3`](https://github.com/eea/volto-eea-design-system/commit/4ad51b3c2bbb75f19af14fa56afdbddf57b6c95e)]
7
30
  ### [1.0.0-beta.1](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.15...1.0.0-beta.1) - 9 February 2023
8
31
 
9
32
  #### :rocket: New Features
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-eea-design-system",
3
- "version": "1.0.0-beta.1",
3
+ "version": "1.0.0-beta.2",
4
4
  "description": "@eeacms/volto-eea-design-system: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: IDM2 A-Team",
package/src/ui/Footer/Footer.jsx CHANGED
@@ -23,7 +23,7 @@ import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
23
23
  const Footer = (props) => {
24
24
  const { children } = props;
25
25
  return (
26
- <footer>
26
+ <footer id={'footer'}>
27
27
  <div className="footer-wrapper">
28
28
  <Container>{children}</Container>
29
29
  </div>
package/src/ui/Footer/Footer.stories.js CHANGED
@@ -36,7 +36,10 @@ Default.args = {
36
36
  { link: '/#', title: 'Sitemap' },
37
37
  { link: '/#', title: 'CMS Login' },
38
38
  ],
39
- copyright: [{ link: '/#', site: 'EEA' }],
39
+ copyright: [
40
+ { link: 'https://status.eea.europa.eu/', title: 'System status' },
41
+ { link: '/#', title: '© Copyright 2023 EEA' },
42
+ ],
40
43
  sites: [
41
44
  { link: '/#', src: Marine, alt: 'WISE marine' },
42
45
  { link: '/#', src: Freshwater, alt: 'WISE freshwater' },
package/src/ui/Footer/FooterActions.jsx CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import { Link } from 'react-router-dom';
3
2
  import { Grid } from 'semantic-ui-react';
4
3
 
5
4
  const FooterActions = (props) => {
@@ -14,9 +13,14 @@ const FooterActions = (props) => {
14
13
  <div className="actions">
15
14
  {props.actions &&
16
15
  props.actions.map((action, index) => (
17
- <Link to={action.link} key={index}>
16
+ <a
17
+ href={action.link}
18
+ key={index}
19
+ target={'_blank'}
20
+ rel={'noreferrer'}
21
+ >
18
22
  {action.title}
19
- </Link>
23
+ </a>
20
24
  ))}
21
25
  </div>
22
26
  </Grid.Column>
@@ -25,9 +29,16 @@ const FooterActions = (props) => {
25
29
  <div className="copyright">
26
30
  {props.copyright &&
27
31
  props.copyright.map((copyright, index) => (
28
- <Link to={copyright.link} key={index}>
29
- &copy; Copyright {new Date().getFullYear()} {copyright.site}
30
- </Link>
32
+ <>
33
+ <a
34
+ href={copyright.link}
35
+ key={index}
36
+ target={'_blank'}
37
+ rel={'noreferrer'}
38
+ >
39
+ {copyright.title}
40
+ </a>
41
+ </>
31
42
  ))}
32
43
  </div>
33
44
  </Grid.Column>
package/src/ui/Header/Header.jsx CHANGED
@@ -236,6 +236,7 @@ const Main = ({
236
236
  <div
237
237
  className="ui text eea-main-menu tablet or lower hidden menu"
238
238
  ref={desktopMenuRef}
239
+ id={'navigation'}
239
240
  >
240
241
  {menuItems.map((item) => (
241
242
  <Menu.Item
package/templates/eea.hbs CHANGED
@@ -2,7 +2,7 @@
2
2
  title: What's new
3
3
  ---
4
4
 
5
- ### EEA Design System (1.0.0-alpha)
5
+ ### EEA Design System (1.0.0-beta)
6
6
 
7
7
  #### Components ready to be used
8
8
 
package/theme/themes/eea/extras/footer.less CHANGED
@@ -49,13 +49,13 @@ footer .theme-sites {
49
49
  }
50
50
 
51
51
  .subfooter .contact-block {
52
- margin-bottom: @tabletContactBlockMarginbottom;
52
+ margin-bottom: @tabletContactBlockMarginBottom;
53
53
  }
54
54
 
55
55
  .contact-block .subcontact a {
56
- font-size: @computerSubcontactIconFontSize;
57
- margin-right: @computerSubcontactIconMarginRight;
58
- font-weight: @computerSubcontactIconFontWeight;
56
+ font-size: @computerSubContactIconFontSize;
57
+ margin-right: @computerSubContactIconMarginRight;
58
+ font-weight: @computerSubContactIconFontWeight;
59
59
  }
60
60
 
61
61
  .subfooter .contact {
@@ -97,17 +97,22 @@ footer .footer-wrapper .menu {
97
97
  .actions {
98
98
  display: flex;
99
99
  justify-content: center;
100
+ flex-wrap: wrap;
101
+ gap: @menuFooterActionsGap;
100
102
  }
101
103
 
102
104
  .copyright {
103
105
  display: flex;
104
106
  justify-content: center;
107
+ flex-wrap: wrap;
108
+ gap: @menuFooterCopyrightGap;
105
109
  }
106
110
 
107
111
  a {
108
112
  color: @menuLinkColor;
109
113
  font-weight: @menuFontWeight;
110
114
  font-size: @mobileMenuFontSize;
115
+ text-align: @menuLinkTextAlign;
111
116
  cursor: pointer;
112
117
  margin-inline: 12px;
113
118
 
@@ -172,8 +177,8 @@ footer .footer-wrapper .menu {
172
177
  }
173
178
 
174
179
  .contact-block .subcontact a {
175
- font-size: @tabletSubcontactIconFontSize;
176
- margin-right: @tabletSubcontactIconMarginRight;
180
+ font-size: @tabletSubContactIconFontSize;
181
+ margin-right: @tabletSubContactIconMarginRight;
177
182
  }
178
183
 
179
184
  .subfooter .social {
@@ -188,11 +193,6 @@ footer .footer-wrapper .menu {
188
193
  }
189
194
  }
190
195
 
191
- footer .footer-wrapper .menu {
192
- .actions {
193
- justify-content: flex-end;
194
- }
195
- }
196
196
  }
197
197
 
198
198
  @media only screen and (min-width: @computerBreakpoint) {
@@ -227,8 +227,8 @@ footer .footer-wrapper .menu {
227
227
  }
228
228
 
229
229
  .contact-block .subcontact a {
230
- font-size: @computerSubcontactIconFontSize;
231
- margin-right: @computerSubcontactIconMarginRight;
230
+ font-size: @computerSubContactIconFontSize;
231
+ margin-right: @computerSubContactIconMarginRight;
232
232
  }
233
233
 
234
234
  .subfooter .contact {
package/theme/themes/eea/extras/footer.variables CHANGED
@@ -29,7 +29,7 @@
29
29
  @mobileThemeSitesLogoMargin : 0 auto @rem-space-8;
30
30
  @computerThemeSitesLogoMargin : 0 auto @rem-space-10;
31
31
 
32
- /* Subfooter Item Header */
32
+ /* Sub-footer Item Header */
33
33
  @mobileItemHeaderMarginBottom : @space-5;
34
34
  @computerItemHeaderMarginBottom : @space-12;
35
35
  @computerLogoHeaderMarginLeft : -50px;
@@ -39,7 +39,7 @@
39
39
 
40
40
  /* Contact Info */
41
41
  @tabletContactBlockMarginInline : 0;
42
- @tabletContactBlockMarginbottom : @space-4;
42
+ @tabletContactBlockMarginBottom : @space-4;
43
43
  @mobileContactMargin : @space-4 0;
44
44
  @tabletContactMargin : @rem-space-050 0;
45
45
  @contactFontSize : @font-size-3;
@@ -49,11 +49,11 @@
49
49
  @mobileContactIconMarginRight : @space-3;
50
50
  @mobileContactIconFontSize : @font-size-4;
51
51
  @computerContactIconFontSize : @font-size-9;
52
- @tabletSubcontactIconFontSize : @font-size-0;
53
- @computerSubcontactIconFontSize : @font-size-1;
54
- @tabletSubcontactIconMarginRight : @rem-space-2;
55
- @computerSubcontactIconMarginRight : @rem-space-4;
56
- @computerSubcontactIconFontWeight : @font-weight-4;
52
+ @tabletSubContactIconFontSize : @font-size-0;
53
+ @computerSubContactIconFontSize : @font-size-1;
54
+ @tabletSubContactIconMarginRight : @rem-space-2;
55
+ @computerSubContactIconMarginRight : @rem-space-4;
56
+ @computerSubContactIconFontWeight : @font-weight-4;
57
57
 
58
58
  /* Social Icons */
59
59
  @mobileSocialIconsMargin : @rem-space-2 0 @rem-space-8;
@@ -69,9 +69,12 @@
69
69
  /* Footer Menu */
70
70
 
71
71
  @menuLinkColor : @white;
72
+ @menuLinkTextAlign : center;
72
73
  @menuFontWeight : @font-weight-4;
73
74
  @mobileMenuFontSize : @font-size-0;
74
75
  @mobileMenuCopyrightFontSize : @font-size-00;
75
76
  @mobileMenuCopyrightFontWeight : @font-weight-3;
76
77
  @mobileMenuFontWeight : @font-weight-4;
77
78
  @computerMenuFontSize : @font-size-1;
79
+ @menuFooterActionsGap : @size-1 0;
80
+ @menuFooterCopyrightGap : @size-1 0;
package/theme/themes/eea/extras/inpageNavigation.less CHANGED
@@ -21,6 +21,7 @@
21
21
  border-radius: @circularRadius;
22
22
  color: @navColor;
23
23
  font-weight: @navFontWeight;
24
+ z-index: @z-index-important;
24
25
 
25
26
  /* Icon align fix */
26
27
  > div > i.icon,