design-comuni-plone-theme 11.23.0 → 11.23.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 
 
+## [11.23.2](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.23.1...v11.23.2) (2024-09-24)
+
+
+### Bug Fixes
+
+* added condition for spid user link redirect ([#776](https://github.com/RedTurtle/design-comuni-plone-theme/issues/776)) ([8ab726b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/8ab726b52fb22df66d76f1b00089cb4aa0f07968))
+
+
+### Documentation
+
+* updated publiccode and release log ([19a712d](https://github.com/RedTurtle/design-comuni-plone-theme/commit/19a712d35570da2a97bf811c72f4d87343c4e2dc))
+
+## [11.23.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.23.0...v11.23.1) (2024-09-19)
+
+
+### Bug Fixes
+
+* **a11y:** used p with h classname to ensure correct heading order ([#770](https://github.com/RedTurtle/design-comuni-plone-theme/issues/770)) ([2ab487e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2ab487e1a799e48fbbb98e89ca7d195ed37b3ea6))
+* changed focus color ([#772](https://github.com/RedTurtle/design-comuni-plone-theme/issues/772)) ([e3c4e45](https://github.com/RedTurtle/design-comuni-plone-theme/commit/e3c4e45cc06e18c10ae1c51327e4762d0197f767))
+
+
+### Documentation
+
+* updated publiccode and release log ([de02c1e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/de02c1e5ad7f71ecdd8f1dbd6b97dfe7bdec67d2))
+
 ## [11.23.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.22.1...v11.23.0) (2024-09-19)
 
 

package/RELEASE.md

@@ -41,6 +41,18 @@
 - ...
 -->
 
+## Versione 11.23.2 (24/09/2024)
+
+### Migliorie
+
+- Gli utenti SPID vengono ora direttamente rediretti al link finale quando viene utilizzato un CT di tipo Collegamento
+
+## Versione 11.23.1 (19/09/2024)
+
+### Migliorie
+
+- Il colore del focus da tastiera sugli elementi della pagina è ora bianco e nero per garantire sempre un contrasto ottimale su tutti gli sfondi.
+
 ## Versione 11.23.0 (19/09/2024)
 
 ### Migliorie

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.23.0",
+  "version": "11.23.2",
   "main": "src/index.js",
   "repository": {
     "type": "git",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-09-19'
+releaseDate: '2024-09-24'
 softwareType: standalone/web
-softwareVersion: 11.23.0
+softwareVersion: 11.23.2
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/BottomBody.jsx

@@ -26,9 +26,9 @@ const BottomBody = ({ data, intl, hasArguments }) => {
         <div
           className={data?.centerAlignment ? 'col-lg-12 mb-3' : 'col-lg-auto'}
         >
-          <h6 className="text-uppercase text-center mt-1">
+          <p className="h6 text-uppercase text-center mt-1">
             {intl?.formatMessage(messages.otherArguments)}
-          </h6>
+          </p>
         </div>
         <div className={data?.centerAlignment ? 'col-lg-12' : 'col-lg-auto'}>
           {data?.arguments?.map((argument, index) => (

package/src/components/ItaliaTheme/Footer/FooterInfos.jsx

@@ -62,7 +62,7 @@ const FooterInfos = () => {
             widths={['xs', 'sm', 'md', 'lg', 'xl']}
             key={index}
           >
-            <h4>
+            <p className="h4">
               {column?.title && (
                 <ConditionalLink
                   condition={column.titleLink?.length > 0}
@@ -75,7 +75,7 @@ const FooterInfos = () => {
                   {column.title}
                 </ConditionalLink>
               )}
-            </h4>
+            </p>
             {column.showSocial && <FooterSocials />}
 
             <div

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderEventDates.jsx

@@ -63,7 +63,7 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
     }
   }
   return content['@type'] === 'Event' ? (
-    <h4 className="py-2">
+    <p className="h4 py-2">
       {!wholeDay &&
         !openEnd &&
         !renderOnlyStart &&
@@ -80,7 +80,7 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
       {eventRecurrenceText && (
         <div className="recurrence small">{eventRecurrenceText}</div>
       )}
-    </h4>
+    </p>
   ) : null;
 };
 

package/src/components/ItaliaTheme/View/Commons/RelatedItems.jsx

@@ -82,7 +82,9 @@ const RelatedItems = ({
                   <>
                     <Row>
                       <Col className="text-center">
-                        <h3>{intl.formatMessage(messages.related_items)}</h3>
+                        <h2 className="h3">
+                          {intl.formatMessage(messages.related_items)} ???
+                        </h2>
                       </Col>
                     </Row>
                     <Row className="mt-lg-4">
@@ -131,7 +133,9 @@ const RelatedItems = ({
               <>
                 <Row>
                   <Col className="text-center">
-                    <h3>{intl.formatMessage(messages.related_items)}</h3>
+                    <h2 className="h3">
+                      {intl.formatMessage(messages.related_items)}
+                    </h2>
                   </Col>
                 </Row>
                 <Row className="mt-lg-4">

package/src/components/ItaliaTheme/View/Commons/SideMenu.jsx

@@ -163,7 +163,7 @@ const SideMenu = ({ data, content_uid }) => {
                   }}
                   aria-controls="side-menu-body"
                 >
-                  <h3>{intl.formatMessage(messages.index)}</h3>
+                  <h2 className="h3">{intl.formatMessage(messages.index)}</h2>
                 </AccordionHeader>
                 <div className="mb-3">
                   <Progress

package/src/components/ItaliaTheme/View/PuntoDiContattoView/PuntoDiContattoView.jsx

@@ -105,7 +105,7 @@ const PuntoDiContattoView = (props) => {
             {content?.value_punto_contatto?.map((pdc, i) => {
               return (
                 <div className="my-2" key={i}>
-                  <h5 className="h6">
+                  <p className="h6">
                     {messages[pdc?.pdc_type] === undefined
                       ? pdc?.pdc_type
                       : intl.formatMessage(messages[pdc.pdc_type])}
@@ -113,7 +113,7 @@ const PuntoDiContattoView = (props) => {
                     <span className="ms-1">
                       {renderPDCItemValue(pdc, intl)}
                     </span>
-                  </h5>
+                  </p>
                 </div>
               );
             })}

package/src/components/ItaliaTheme/View/VenueView/VenueWhere.jsx

@@ -39,7 +39,7 @@ const VenueWhere = ({ content }) => {
       <Card className="card card-teaser border-left-card preview-image-card card-big-io-comune shadow mt-3 rounded mb-4">
         <CardBody>
           <CardTitle>
-            <h5 className="card-title">{content.title}</h5>
+            <h3 className="h5 card-title">{content.title}</h3>
           </CardTitle>
           <CardText>
             <p>

package/src/customizations/volto/components/theme/View/LinkView.jsx

@@ -0,0 +1,75 @@
+// CUSTOMIZATION:
+// - Added condition to check if user is SPID user (16-18 and 21)
+
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
+
+const LinkView = ({ token, content }) => {
+  const history = useHistory();
+  const userIsSpidUser = useSelector(
+    (state) => state.users.user.roles.length === 0,
+  );
+
+  useEffect(() => {
+    if (!token || userIsSpidUser) {
+      const { remoteUrl } = content;
+      if (isInternalURL(remoteUrl)) {
+        history.replace(flattenToAppURL(remoteUrl));
+      } else if (!__SERVER__) {
+        window.location.href = flattenToAppURL(remoteUrl);
+      }
+    }
+  }, [content, history, token, userIsSpidUser]);
+  const { title, description, remoteUrl } = content;
+  const { openExternalLinkInNewTab } = config.settings;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-document">
+      <h1 className="documentFirstHeading">{title}</h1>
+      {content.description && (
+        <p className="documentDescription">{description}</p>
+      )}
+      {remoteUrl && (
+        <p>
+          <FormattedMessage
+            id="The link address is:"
+            defaultMessage="The link address is:"
+          />{' '}
+          <UniversalLink
+            href={remoteUrl}
+            openLinkInNewTab={
+              openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+            }
+          >
+            {flattenToAppURL(remoteUrl)}
+          </UniversalLink>
+        </p>
+      )}
+    </Container>
+  );
+};
+
+LinkView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    remoteUrl: PropTypes.string,
+  }),
+  token: PropTypes.string,
+};
+
+LinkView.defaultProps = {
+  content: null,
+  token: null,
+};
+
+export default LinkView;

package/src/theme/ItaliaTheme/Addons/volto-gdpr-privacy.scss

@@ -49,11 +49,6 @@
           outline: none;
           vertical-align: baseline;
 
-          input:focus ~ label::before {
-            box-shadow: $gdpr-focus-shadow !important;
-            outline: none !important;
-          }
-
           label {
             position: relative;
             display: block;
@@ -240,19 +235,6 @@ body.has-toolbar-collapsed {
   }
 }
 
-.gdpr-privacy-banner
-  .gdpr-privacy-content-wrapper
-  .gdpr-privacy-content
-  .buttons
-  button.gdpr-privacy-banner-button:focus,
-.gdpr-privacy-banner
-  .gdpr-privacy-content-wrapper
-  .gdpr-privacy-content
-  a:focus {
-  box-shadow: $gdpr-focus-shadow;
-  outline: none !important;
-}
-
 .gdpr-privacy-banner
   .gdpr-privacy-content-wrapper
   .gdpr-privacy-content

package/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss

@@ -15,7 +15,8 @@
         min-width: 150px;
 
         &:focus-within {
-          box-shadow: 0 0 0 2px $focus-outline-color;
+          border: 2px solid $inner-focus-border !important;
+          box-shadow: 0 0 0 2px $outer-focus-outline !important;
         }
 
         .react-select__control {
@@ -57,7 +58,8 @@
             }
 
             &.DateInput_input__focused {
-              box-shadow: 0 0 0 2px $focus-outline-color;
+              border: 2px solid $inner-focus-border !important;
+              box-shadow: 0 0 0 2px $outer-focus-outline !important;
             }
           }
 

package/src/theme/ItaliaTheme/Widgets/_reactSelect.scss

@@ -20,6 +20,7 @@
 .react-select__control,
 .react-select__control:hover {
   &.react-select__control--is-focused {
-    box-shadow: 0 0 0 2px $focus-outline-color !important;
+    border: 2px solid $inner-focus-border !important;
+    box-shadow: 0 0 0 2px $outer-focus-outline !important;
   }
 }

package/src/theme/ItaliaTheme/_common.scss

@@ -7,11 +7,8 @@
   button.btn,
   button.rounded-right {
     &:focus {
-      border-color: $focus-outline-color !important;
-      box-shadow:
-        inset 0 1px 0 $focus-outline-color,
-        0 1px 1px $focus-outline-color,
-        0 0 0 0.2rem $focus-outline-color !important;
+      border: 2px solid $inner-focus-border !important;
+      box-shadow: 0 0 0 2px $outer-focus-outline !important;
       outline: none;
     }
   }

package/src/theme/_site-variables.scss

@@ -30,12 +30,7 @@ $gdpr-accept-all: #005700 !default;
 $gdpr-toggle-checked: #005700 !default;
 $gdpr-toggle: #b22515 !default;
 $gdpr-toggle-border: #000 !default;
-$gdpr-focus-color: #ff9800 !default;
 $gdpr-link-color: #004285 !default;
-$gdpr-focus-shadow:
-  inset 0 1px 0 rgba(255, 255, 255, 0.15),
-  0 1px 1px rgba(0, 0, 0, 0.075),
-  0 0 0 0.2rem $gdpr-focus-color !default;
 
 $caption-text: #455b71 !default;
 
@@ -63,3 +58,7 @@ $dvt-navigation-v-padding: 15px !default;
 $spacer: 16px;
 $ribbon-spacing-h: calc($spacer * 3);
 $ribbon-width: calc($spacer * 2);
+
+// accessible focus colors
+$outer-focus-outline: #000 !default;
+$inner-focus-border: #fff !default;

package/src/theme/bootstrap-override/bootstrap-italia/_focus.scss

@@ -1,3 +1,9 @@
+:focus:not(.focus--mouse),
+%focus {
+  box-shadow: 0 0 0 2px $outer-focus-outline !important;
+  border: 2px solid $inner-focus-border !important;
+}
+
 .skiplinks a:focus:not(.focus--mouse) {
   border: 2px solid;
 }

package/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss

@@ -15,10 +15,11 @@
 
       .it-search-wrapper {
         a.search-link {
-          outline: $header-center-bg-color 2px solid !important;
+          border: $header-center-bg-color 2px solid !important;
 
           &:focus {
-            box-shadow: 0 0 0 5px $focus-outline-color !important;
+            outline: 2.5px solid $inner-focus-border !important;
+            box-shadow: 0 0 0 5px $outer-focus-outline !important;
           }
         }
       }