design-comuni-plone-theme 8.0.0-alpha.39 → 8.0.0-alpha.40

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 (16) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +2 -2
  3. package/src/components/ItaliaTheme/View/BandoView/BandoView.jsx +1 -1
  4. package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx +64 -87
  5. package/src/components/ItaliaTheme/View/DocumentoView/DocumentoView.jsx +1 -1
  6. package/src/components/ItaliaTheme/View/EventoView/EventoView.jsx +1 -1
  7. package/src/components/ItaliaTheme/View/NewsItemView/NewsItemView.jsx +1 -1
  8. package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx +1 -1
  9. package/src/components/ItaliaTheme/View/PersonaView/PersonaView.jsx +1 -1
  10. package/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx +1 -1
  11. package/src/components/ItaliaTheme/View/UOView/UOView.jsx +1 -1
  12. package/src/components/ItaliaTheme/View/VenueView/VenueView.jsx +1 -1
  13. package/src/config/volto-gdpr-privacy-defaultPanelConfig.js +1 -0
  14. package/src/theme/ItaliaTheme/Components/_sideMenu.scss +54 -0
  15. package/src/theme/ItaliaTheme/Views/_common.scss +0 -10
  16. package/src/theme/site.scss +1 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [8.0.0-alpha.40](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.0-alpha.39...v8.0.0-alpha.40) (2023-06-27)
2
+
3
+
4
+ ### Features
5
+
6
+ * added accordion in SideMenu component ([#121](https://github.com/RedTurtle/design-comuni-plone-theme/issues/121)) ([1b342a0](https://github.com/RedTurtle/design-comuni-plone-theme/commit/1b342a0af2296342a36d13d274792d532b597bb3))
7
+ * updated gdpr add-on and enabled focus trap in cookie banner ([d860cb1](https://github.com/RedTurtle/design-comuni-plone-theme/commit/d860cb13955da2cb1ce0351767888c4b9cb4ebae))
8
+
1
9
  ## [8.0.0-alpha.39](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.0.0-alpha.38...v8.0.0-alpha.39) (2023-06-23)
2
10
 
3
11
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "design-comuni-plone-theme",
3
3
  "description": "Volto Theme for Italia design guidelines",
4
4
  "license": "GPL-v3",
5
- "version": "8.0.0-alpha.39",
5
+ "version": "8.0.0-alpha.40",
6
6
  "main": "src/index.js",
7
7
  "keywords": [
8
8
  "volto-addon",
@@ -133,7 +133,7 @@
133
133
  "volto-editablefooter": "5.0.1",
134
134
  "volto-feedback": "0.1.5",
135
135
  "volto-form-block": "3.1.0",
136
- "volto-gdpr-privacy": "2.0.0",
136
+ "volto-gdpr-privacy": "2.1.0",
137
137
  "volto-google-analytics": "2.0.0",
138
138
  "volto-multilingual-widget": "3.0.0",
139
139
  "volto-rss-block": "3.0.0",
package/src/components/ItaliaTheme/View/BandoView/BandoView.jsx CHANGED
@@ -65,7 +65,7 @@ const BandoView = ({ content, location }) => {
65
65
  showtassonomiaargomenti={true}
66
66
  showbandostate={true}
67
67
  />
68
- <div className="row border-top row-column-border row-column-menu-left">
68
+ <div className="row row-column-border row-column-menu-left">
69
69
  <aside className="col-lg-4">
70
70
  {__CLIENT__ && (
71
71
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx CHANGED
@@ -4,8 +4,12 @@
4
4
  import { defineMessages, useIntl } from 'react-intl';
5
5
  import React, { useEffect, useState, useCallback, useMemo } from 'react';
6
6
  import { throttle } from 'lodash';
7
- import { Progress } from 'design-react-kit';
8
- import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
7
+ import {
8
+ Progress,
9
+ Accordion,
10
+ AccordionBody,
11
+ AccordionHeader,
12
+ } from 'design-react-kit';
9
13
  import cx from 'classnames';
10
14
 
11
15
  const messages = defineMessages({
@@ -69,7 +73,9 @@ const SideMenu = ({ data, content_uid }) => {
69
73
  const [scrollY, setScrollY] = useState(0);
70
74
  const [isClient, setIsClient] = useState(false);
71
75
 
72
- const [isNavOpen, setIsNavOpen] = useState(false);
76
+ const [isNavOpen, setIsNavOpen] = useState(
77
+ __CLIENT__ ? window.innerWidth >= 992 : false,
78
+ );
73
79
 
74
80
  useEffect(() => {
75
81
  setIsClient(true);
@@ -121,14 +127,18 @@ const SideMenu = ({ data, content_uid }) => {
121
127
 
122
128
  const handleClickAnchor = (id) => (e) => {
123
129
  e.preventDefault();
124
- document.getElementById(id)?.scrollIntoView?.({
125
- behavior: 'smooth',
126
- block: 'start',
127
- });
128
- setIsNavOpen(false);
130
+ if (window.innerWidth < 992) {
131
+ setIsNavOpen(false);
132
+ }
133
+ // setTimeout hack should wait for rerender after setIsNavOpen
134
+ setTimeout(() => {
135
+ document.getElementById(id)?.scrollIntoView?.({
136
+ behavior: 'smooth',
137
+ block: 'start',
138
+ });
139
+ }, 0);
129
140
  };
130
141
 
131
- // const yCountEnd = document.querySelector('#main-content-section');
132
142
  const yCountEnd = isClient
133
143
  ? document.querySelector('#main-content-section')
134
144
  : null;
@@ -141,84 +151,51 @@ const SideMenu = ({ data, content_uid }) => {
141
151
  return headers?.length > 0 ? (
142
152
  <div className="sticky-wrapper navbar-wrapper page-side-menu">
143
153
  <nav className="navbar it-navscroll-wrapper navbar-expand-lg">
144
- <button
145
- className={
146
- isNavOpen
147
- ? 'custom-navbar-toggler focus--mouse'
148
- : 'custom-navbar-toggler'
149
- }
150
- type="button"
151
- aria-controls="navbarNavB"
152
- aria-expanded={isNavOpen ? 'true' : 'false'}
153
- aria-label="Toggle navigation"
154
- data-target="#navbarNavB"
155
- onClick={() => {
156
- setIsNavOpen(!isNavOpen);
157
- }}
158
- >
159
- <span className="it-list"></span>
160
- {intl.formatMessage(messages.index)}
161
- </button>
162
-
163
- <div
164
- className={
165
- isNavOpen ? 'navbar-collapsable expanded' : 'navbar-collapsable'
166
- }
167
- id="navbarNavB"
168
- style={isNavOpen ? { display: 'block' } : { display: 'none' }}
169
- >
170
- <div
171
- className="overlay"
172
- style={isNavOpen ? { display: 'block' } : { display: 'none' }}
173
- ></div>
174
- <div className="close-div visually-hidden">
175
- <button className="btn close-menu" type="button">
176
- <span className="it-close"></span>
177
- {intl.formatMessage(messages.close)}
178
- </button>
179
- </div>
180
- <a
181
- className="it-back-button"
182
- href="#"
183
- style={isNavOpen ? { display: 'block' } : { display: 'none' }}
184
- onClick={(e) => {
185
- e.preventDefault();
186
- setIsNavOpen(!isNavOpen);
187
- }}
188
- >
189
- <Icon
190
- className="align-top"
191
- color="primary"
192
- icon="it-chevron-left"
193
- style={{ ariaHidden: true }}
194
- size="sm"
195
- />
196
- <span>{intl.formatMessage(messages.back)}</span>
197
- </a>
198
- <div className="menu-wrapper">
199
- <div className="link-list-wrapper menu-link-list">
200
- <h3>{intl.formatMessage(messages.index)}</h3>
201
- <div className="mb-3">
202
- <Progress
203
- value={progressValue > 0 ? 100 * progressValue : 0}
204
- role="progressbar"
205
- />
206
- </div>
207
- <ul className="link-list" data-element="page-index">
208
- {headers.map((item, i) => (
209
- <li className="nav-item" key={item.id}>
210
- <a
211
- className={cx('nav-link', {
212
- active: item.id === activeSection,
213
- })}
214
- href={`#${item.id}`}
215
- onClick={handleClickAnchor(item.id)}
216
- >
217
- <span>{item.title}</span>
218
- </a>
219
- </li>
220
- ))}
221
- </ul>
154
+ <div className="menu-wrapper">
155
+ <div className="link-list-wrapper menu-link-list">
156
+ <div className="accordion-wrapper">
157
+ <Accordion>
158
+ <AccordionHeader
159
+ active={isNavOpen}
160
+ onToggle={() => {
161
+ setIsNavOpen(!isNavOpen);
162
+ }}
163
+ >
164
+ <h3>{intl.formatMessage(messages.index)}</h3>
165
+ </AccordionHeader>
166
+ <div className="mb-3">
167
+ <Progress
168
+ value={progressValue > 0 ? 100 * progressValue : 0}
169
+ role="progressbar"
170
+ />
171
+ </div>
172
+ <AccordionBody
173
+ active={isNavOpen}
174
+ className={
175
+ isNavOpen
176
+ ? 'accordion-collapse show'
177
+ : 'accordion-collapse collapse'
178
+ }
179
+ >
180
+ <ul className="link-list" data-element="page-index">
181
+ {headers.map((item, i) => {
182
+ return (
183
+ <li className="nav-item" key={item.id}>
184
+ <a
185
+ className={cx('nav-link', {
186
+ active: item.id === activeSection,
187
+ })}
188
+ href={`#${item.id}`}
189
+ onClick={handleClickAnchor(item.id)}
190
+ >
191
+ <span>{item.title}</span>
192
+ </a>
193
+ </li>
194
+ );
195
+ })}
196
+ </ul>
197
+ </AccordionBody>
198
+ </Accordion>
222
199
  </div>
223
200
  </div>
224
201
  </div>
package/src/components/ItaliaTheme/View/DocumentoView/DocumentoView.jsx CHANGED
@@ -72,7 +72,7 @@ const DocumentoView = ({ content, location }) => {
72
72
  {/* HEADER IMAGE */}
73
73
  <ContentImage content={content} position="afterHeader" />
74
74
 
75
- <div className="row border-top row-column-border row-column-menu-left">
75
+ <div className="row row-column-border row-column-menu-left">
76
76
  <aside className="col-lg-4">
77
77
  {__CLIENT__ && (
78
78
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
package/src/components/ItaliaTheme/View/EventoView/EventoView.jsx CHANGED
@@ -78,7 +78,7 @@ const EventoView = ({ content, location }) => {
78
78
  {/* HEADER IMAGE */}
79
79
  <ContentImage content={content} position="afterHeader" />
80
80
 
81
- <div className="row border-top row-column-border row-column-menu-left">
81
+ <div className="row row-column-border row-column-menu-left">
82
82
  <aside className="col-lg-4">
83
83
  {__CLIENT__ && (
84
84
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
package/src/components/ItaliaTheme/View/NewsItemView/NewsItemView.jsx CHANGED
@@ -84,7 +84,7 @@ const NewsItemView = ({ content, location }) => {
84
84
 
85
85
  {/* HEADER IMAGE */}
86
86
  <ContentImage content={content} position="afterHeader" />
87
- <div className="row border-top row-column-border row-column-menu-left">
87
+ <div className="row row-column-border row-column-menu-left">
88
88
  <aside className="col-lg-4">
89
89
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
90
90
  </aside>
package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx CHANGED
@@ -92,7 +92,7 @@ const PaginaArgomentoViewNoBlocks = ({ content }) => {
92
92
  {/* HEADER IMAGE */}
93
93
  <ContentImage content={content} position="afterHeader" />
94
94
 
95
- <div className="row border-top row-column-border row-column-menu-left">
95
+ <div className="row row-column-border row-column-menu-left">
96
96
  <aside className="col-lg-4">
97
97
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
98
98
  </aside>
package/src/components/ItaliaTheme/View/PersonaView/PersonaView.jsx CHANGED
@@ -58,7 +58,7 @@ const PersonaView = ({ content }) => {
58
58
  showdates={false}
59
59
  showtassonomiaargomenti={true}
60
60
  />
61
- <div className="row border-top row-column-border row-column-menu-left">
61
+ <div className="row row-column-border row-column-menu-left">
62
62
  <aside className="col-lg-4">
63
63
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
64
64
  </aside>
package/src/components/ItaliaTheme/View/ServizioView/ServizioView.jsx CHANGED
@@ -132,7 +132,7 @@ const ServizioView = ({ content, moment }) => {
132
132
  {/* HEADER IMAGE */}
133
133
  <ContentImage content={content} position="afterHeader" />
134
134
 
135
- <div className="row border-top row-column-border row-column-menu-left">
135
+ <div className="row row-column-border row-column-menu-left">
136
136
  <aside className="col-lg-4 ">
137
137
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
138
138
  </aside>
package/src/components/ItaliaTheme/View/UOView/UOView.jsx CHANGED
@@ -78,7 +78,7 @@ const UOView = ({ content }) => {
78
78
  {/* HEADER IMAGE */}
79
79
  <ContentImage content={content} position="afterHeader" />
80
80
 
81
- <div className="row border-top row-column-border row-column-menu-left">
81
+ <div className="row row-column-border row-column-menu-left">
82
82
  <aside className="col-lg-4">
83
83
  {__CLIENT__ && (
84
84
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
package/src/components/ItaliaTheme/View/VenueView/VenueView.jsx CHANGED
@@ -89,7 +89,7 @@ const VenueView = ({ content }) => {
89
89
  {/* HEADER IMAGE */}
90
90
  <ContentImage content={content} position="afterHeader" />
91
91
 
92
- <div className="row border-top row-column-border row-column-menu-left">
92
+ <div className="row row-column-border row-column-menu-left">
93
93
  <aside className="col-lg-4">
94
94
  {__CLIENT__ && (
95
95
  <SideMenu data={sideMenuElements} content_uid={content?.UID} />
package/src/config/volto-gdpr-privacy-defaultPanelConfig.js CHANGED
@@ -1,5 +1,6 @@
1
1
  const defaultPanelConfig = {
2
2
  last_updated: '2022-03-03T11:25:00+00:00', //it is used to know whether to resubmit the banner to the user if the choices have changed.
3
+ focusTrapEnabled: true,
3
4
 
4
5
  text: {
5
6
  //Text that is shown when the banner appears
package/src/theme/ItaliaTheme/Components/_sideMenu.scss ADDED
@@ -0,0 +1,54 @@
1
+ .page-side-menu {
2
+ .menu-wrapper {
3
+ width: 100%;
4
+ .accordion-wrapper {
5
+ .accordion {
6
+ border-bottom: none;
7
+ .accordion-header {
8
+ width: 100%;
9
+ display: block;
10
+ button.accordion-button {
11
+ border: none;
12
+ background: transparent;
13
+ width: 100%;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: space-between;
17
+
18
+ h3 {
19
+ padding: 0px;
20
+ }
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+
28
+ @media (max-width: #{map-get($grid-breakpoints, lg)}) {
29
+ .page-side-menu {
30
+ .menu-wrapper {
31
+ .accordion-wrapper {
32
+ .accordion {
33
+ .accordion-header {
34
+ button.accordion-button {
35
+ .accordion-title {
36
+ padding-bottom: 1.3em;
37
+ padding-top: 1.3em;
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ .navbar.it-navscroll-wrapper {
45
+ .menu-wrapper {
46
+ padding: 0;
47
+ }
48
+ }
49
+ }
50
+
51
+ .it-page-sections-container {
52
+ border-top: none !important;
53
+ }
54
+ }
package/src/theme/ItaliaTheme/Views/_common.scss CHANGED
@@ -78,16 +78,6 @@ picture.volto-image.responsive img.full-width {
78
78
  }
79
79
  }
80
80
 
81
- @media (max-width: #{map-get($grid-breakpoints, lg)}) {
82
- .page-side-menu {
83
- display: none;
84
- }
85
-
86
- .it-page-sections-container {
87
- border-top: none !important;
88
- }
89
- }
90
-
91
81
  .public-ui {
92
82
  .card.bigborder {
93
83
  border: 1px solid #d9dadb;
package/src/theme/site.scss CHANGED
@@ -37,6 +37,7 @@
37
37
  @import 'ItaliaTheme/Components/locationsMap';
38
38
  @import 'ItaliaTheme/Components/diffField';
39
39
  @import 'ItaliaTheme/Components/cmp-timeline';
40
+ @import 'ItaliaTheme/Components/sideMenu';
40
41
  @import 'ItaliaTheme/Components/loginAgid';
41
42
  @import 'ItaliaTheme/Components/pager';
42
43
  @import 'ItaliaTheme/Blocks/subblocks-edit';