Release 3.14.0

docs/changelog.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 3.14.0 (2023-06-19)
+
+**✨ Improvements**
+
+- Refactoring of children cards in treks and outdoor sites detail pages (#921)
+- Set anchors to navigate between sections of detail pages (#922)
+
+**🐛 Fixes**
+
+- Fix related sites and courses in outdoor site detail pages (#846)
+- Fix carousel on Events, Outdoor sites and courses detail pages (#909)
+- Handle sub-filters values as string like others filters values (#911)
+- Fix display of information desks with null fields (#918)
+
+**💥 Breaking changes**
+
+- The migration from tailwind version 2 to 3 includes some minor breaking change of utility classes. It will be necessary to be careful that the classes used in your customization are still ok. See the upgrade guide from the official documentation https://tailwindcss.com/docs/upgrade-guide
+- Translations keys related to `sensitiveAreas` [changed](https://github.com/GeotrekCE/Geotrek-rando-v3/pull/922/files#diff-5b2422febb084ac7226b93c9cbb7e0406aeac5fcd0bcbee9a21515fdcc0eac6c), check if you have replaced them in your customization
+- The identifier of the information desk section in the details page has changed from `details_informationDesks` to `details_practicalInformations`.
+
 ## 3.13.6 (2023-04-18)
 
 **✨ Improvements**
@@ -30,7 +50,6 @@
 
 - Avoid unnecessary fetch for obtaining map items (regression since v3.13.3) (#887)
 
-
 3.13.3 (2023-03-16)
 -------------------
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.13.6",
+  "version": "3.14.0",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",
@@ -41,7 +41,7 @@
     "@tanstack/react-query": "^4.10.3",
     "@tanstack/react-query-devtools": "^4.11.0",
     "@zeit/next-source-maps": "^0.0.4-canary.1",
-    "autoprefixer": "10.3.4",
+    "autoprefixer": "^10.4.14",
     "axios": "0.25.0",
     "compression": "^1.7.4",
     "cypress": "^4.12.1",
@@ -78,8 +78,8 @@
     "store": "^2.0.12",
     "striptags": "^3.2.0",
     "styled-components": "^5.3.6",
-    "tailwind-merge": "0.9.0",
-    "tailwindcss": "^2.0.2",
+    "tailwind-merge": "^1.12.0",
+    "tailwindcss": "^3.3.1",
     "ts-node": "^10.9.1",
     "typesafe-actions": "^5.1.0",
     "wait-on": "6.0.0"

frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx

@@ -16,7 +16,7 @@ export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label }) => {
     <Link href={href}>
       <span className="flex flex-col items-center mt-6 text-greyDarkColored bg-white transition-colors hover:text-primary3">
         <FilledSvg src={iconUrl} className="h-9 desktop:w-12" />
-        <span className="w-20 text-sm text-center text-greyDarkColored mt-2 overflow-ellipsis overflow-hidden">
+        <span className="w-20 text-sm text-center text-greyDarkColored mt-2 text-ellipsis overflow-hidden">
           {label}
         </span>
       </span>

frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx

@@ -75,7 +75,7 @@ const ControlCollapseButton: React.FC<{ expandedState: 'EXPANDED' | 'COLLAPSED'
   expandedState,
 }) => {
   if (expandedState === 'EXPANDED') {
-    return <ChevronDown size={48} className="transform rotate-180" />;
+    return <ChevronDown size={48} className="rotate-180" />;
   }
   return (
     <div className="flex flex-col items-center mr-4 text-P2">

frontend/src/components/CardIcon/CardIcon.tsx

@@ -52,7 +52,7 @@ export const CardIcon: React.FC<Props> = ({ iconUri = '', iconName = '', color }
       className="absolute top-4 left-4 h-8 flex items-center rounded-full shadow-sm text-white border-2 border-white border-solid overflow-hidden"
       color={color}
     >
-      <Icon color={color} iconUri={iconUri} className="w-7 h-7 flex-shrink-0" />
+      <Icon color={color} iconUri={iconUri} className="w-7 h-7 shrink-0" />
       {iconName && <div className="pr-3 whitespace-nowrap">{iconName}</div>}
     </Wrapper>
   );

frontend/src/components/Footer/PortalContact/PortalContact.tsx

@@ -37,9 +37,9 @@ export const PortalContact: React.FC<PortalContactProps> = ({
         >
           {name !== undefined && <PortalContactTitle name={name} />}
           {openState === 'OPENED' ? (
-            <Minus size={24} className="flex-shrink-0" />
+            <Minus size={24} className="shrink-0" />
           ) : (
-            <Plus size={24} className="flex-shrink-0" />
+            <Plus size={24} className="shrink-0" />
           )}
         </div>
         <PortalContactContent

frontend/src/components/Footer/PortalLinks/PortalLinks.tsx

@@ -35,9 +35,9 @@ export const PortalLinks: React.FC<PortalLinksProps> = ({ name, links }) => {
         >
           <PortalLinksTitle name={name} />
           {openState === 'OPENED' ? (
-            <Minus size={24} className="flex-shrink-0" />
+            <Minus size={24} className="shrink-0" />
           ) : (
-            <Plus size={24} className="flex-shrink-0" />
+            <Plus size={24} className="shrink-0" />
           )}
         </div>
         <PortalLinksMobileContent

frontend/src/components/Header/BurgerMenu/__tests__/__snapshots__/BurgerMenu.test.tsx.snap

@@ -84,7 +84,7 @@ Object {
                       tabindex="0"
                     >
                       <span
-                        class="flex-grow"
+                        class="grow"
                         id="verticalMenu_section"
                       >
                         En savoir plus
@@ -177,7 +177,7 @@ Object {
                       tabindex="0"
                     >
                       <span
-                        class="flex-grow"
+                        class="grow"
                         id="verticalMenu_section"
                       >
                         Langue
@@ -348,7 +348,7 @@ Object {
                     tabindex="0"
                   >
                     <span
-                      class="flex-grow"
+                      class="grow"
                       id="verticalMenu_section"
                     >
                       En savoir plus
@@ -441,7 +441,7 @@ Object {
                     tabindex="0"
                   >
                     <span
-                      class="flex-grow"
+                      class="grow"
                       id="verticalMenu_section"
                     >
                       Langue

frontend/src/components/Header/BurgerMenuSection/BurgerMenuSection.tsx

@@ -43,7 +43,7 @@ export const BurgerMenuSection: React.FC<Props> = ({ title, items, languages })
           <AccordionItemButton
             className={`${classNameTitle} ${openState === 'CLOSED' ? classNameBorder : ''}`}
           >
-            <span id="verticalMenu_section" className="flex-grow">
+            <span id="verticalMenu_section" className="grow">
               {title}
             </span>
             {openState === 'OPENED' ? closeIcon : openIcon}

frontend/src/components/Header/Header.tsx

@@ -32,11 +32,11 @@ export const Header: React.FC = () => {
       <BurgerMenu config={config.menu} displayState={headerState} menuItems={menuItems} />
       <Container
         state={headerState}
-        className="h-11 bg-primary1 flex flex-row items-center sticky z-header px-3 shadow-sm text-primary3 flex-shrink-0"
+        className="h-11 bg-primary1 flex flex-row items-center sticky z-header px-3 shadow-sm text-primary3 shrink-0"
         id="header"
       >
         <Link href={routes.HOME} className="flex items-center">
-          <div className="flex-shrink-0" id="header_logo">
+          <div className="shrink-0" id="header_logo">
             <img
               id="header_logoImg"
               className="h-9 desktop:h-18 mr-3 rounded-md"

frontend/src/components/ImageWithLegend/index.tsx

@@ -1,6 +1,6 @@
 import { Attachment } from 'modules/interface';
 import { FormattedMessage } from 'react-intl';
-import { twMerge } from 'tailwind-merge';
+import { cn } from 'services/utils/cn';
 import { ImgHTMLAttributes, useId } from 'react';
 import Link from 'next/link';
 import { getGlobalConfig } from 'modules/utils/api.config';
@@ -35,10 +35,7 @@ export const ImageWithLegend: React.FC<ImageWithLegendProps> = ({
     >
       <img
         alt={attachment?.legend ?? ''}
-        className={twMerge(
-          'object-cover object-center overflow-hidden w-full h-full',
-          classNameImage,
-        )}
+        className={cn(`object-cover object-center overflow-hidden w-full h-full ${classNameImage}`)}
         id={imageId}
         loading={loading ?? 'eager'}
         src={attachment?.url ? attachment.url : getGlobalConfig().fallbackImageUri}

frontend/src/components/InlineMenu/InlineMenu.tsx

@@ -41,7 +41,7 @@ const InlineMenu: React.FC<InlineMenuProps> = ({
             {intl.formatMessage({
               id: 'header.seeMore',
             })}
-            <ChevronDown size={16} className="flex-shrink-0 ml-1" />
+            <ChevronDown size={16} className="shrink-0 ml-1" />
           </summary>
           <div className={menuClassName}>
             {subSections.map(menuItem => {
@@ -84,7 +84,7 @@ const InlineMenu: React.FC<InlineMenuProps> = ({
           <details className="flex-row">
             <summary className={controlClassName}>
               {language?.toUpperCase()}
-              <ChevronDown size={16} className="flex-shrink-0 ml-1" />
+              <ChevronDown size={16} className="shrink-0 ml-1" />
             </summary>
             <div className={menuClassName}>
               {supportedLanguages.map(locale => (

frontend/src/components/Layout/Layout.tsx

@@ -9,7 +9,7 @@ export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <div className="flex flex-col min-h-full">
       <Header />
-      <main className="relative flex-grow">
+      <main className="relative grow">
         <ConditionallyRender client>
           <Loader loaded={!isNavigationLoading} className="z-loader absolute inset-0">
             {children}

frontend/src/components/Map/DetailsMap/MapChildren.tsx

@@ -104,7 +104,7 @@ export const MapChildren: React.FC<Props> = props => {
         <GeometryList contents={props.touristicContentPoints} />
       )}
 
-      {visibleSection === 'sensitiveAreasRef' && (
+      {visibleSection === 'sensitiveAreas' && (
         <SensitiveAreas contents={props.sensitiveAreasGeometry} />
       )}
 

frontend/src/components/Map/DetailsMap/PointReport.tsx

@@ -54,9 +54,9 @@ export const PointReport: React.FC = () => {
   return (
     <>
       {(!coordinatesReportTouched || !isMobile) && (
-        <div className="text-sm absolute top-6 left-1/2 transform -translate-x-1/2 z-10 py-2 desktop:py-3 px-3 desktop:px-3 rounded-2xl border-2 border-solid border-red bg-white z-mapButton">
+        <div className="text-sm absolute top-6 left-1/2 -translate-x-1/2 z-10 py-2 desktop:py-3 px-3 desktop:px-3 rounded-2xl border-2 border-solid border-red bg-white z-mapButton">
           <p className="flex gap-2 text-red">
-            <AlertCircle className="flex-shrink-0" size={24} />
+            <AlertCircle className="shrink-0" size={24} />
             <span>
               <FormattedMessage id="report.mapButton.create" />
             </span>

frontend/src/components/MobileFilterMenu/MobileFilterMenuSection/index.tsx

@@ -34,7 +34,7 @@ export const MobileFilterMenuSection: React.FC<Props> = ({
       <div className={classNameSectionName} style={{ color }}>
         {title}
       </div>
-      <ChevronDown className={`transform -rotate-90 text-primary1`} size={24} color={color} />
+      <ChevronDown className={`-rotate-90 text-primary1`} size={24} color={color} />
     </div>
   );
 };

frontend/src/components/Popup/index.tsx

@@ -32,17 +32,14 @@ const PopupContent: React.FC<PopupProps> = ({ children, onClose, title }) => {
       aria-modal="true"
     >
       <div className="flex items-center justify-center min-h-screen text-center sm:block sm:p-0 overscroll-contain">
-        <div
-          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-          aria-hidden="true"
-        />
+        <div className="fixed inset-0 bg-gray-500/75 transition-opacity" aria-hidden="true" />
 
         <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
           &#8203;
         </span>
 
         {onClose !== undefined && <ClickOutside onClick={onClose} />}
-        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full z-10">
           <div className="flex flex-col bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
             <div className="flex justify-between mb-4">
               {title !== undefined ? <h1 className="text-xl">{title}</h1> : <span />}

frontend/src/components/Report/Report.tsx

@@ -71,7 +71,7 @@ const Report: React.FC<Props> = ({ displayMobileMap, startPoint, trekId }) => {
         {!isMobile && (
           <MapReportButton className="mr-1" onClick={handleReportButtonClick}>
             <FormattedMessage id={'report.button'} />
-            <Arrow className={`transform ${displayForm ? '-' : ''}rotate-90`} size={24} />
+            <Arrow className={`${displayForm ? '-' : ''}rotate-90`} size={24} />
           </MapReportButton>
         )}
       </div>

frontend/src/components/pages/details/Details.tsx

@@ -96,8 +96,8 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
       sizes.detailsHeaderDesktop,
   });
 
-  const positiveElevation = parseInt(details?.informations.elevation ?? '0', 10);
-  const negativeElevation = parseInt(details?.informations.negativeElevation ?? '0', 10);
+  const positiveElevation = Number(details?.informations.elevation ?? 0);
+  const negativeElevation = Number(details?.informations.negativeElevation ?? 0);
 
   const higherDifferenceElevation = Math.max(positiveElevation, Math.abs(negativeElevation));
 
@@ -189,15 +189,17 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
                     {details.children.length > 0 && (
                       <div ref={setChildrenRef} id="details_trekChildren_ref">
                         <DetailsChildrenSection
-                          trekChildren={details.children.map(child => ({
+                          id="children"
+                          items={details.children.map(child => ({
                             ...child,
                             id: `${child.id}`,
                           }))}
-                          trekId={id}
+                          parentId={id}
                           title={intl.formatMessage(
                             { id: 'details.childrenFullTitle' },
                             { count: details.children.length },
                           )}
+                          type="TREK"
                         />
                       </div>
                     )}
@@ -238,7 +240,7 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
                     {getGlobalConfig().enableMeteoWidget &&
                       details.cities_raw?.[0] &&
                       hasNavigator && (
-                        <DetailsSection className={marginDetailsChild}>
+                        <DetailsSection htmlId="details_forecast" className={marginDetailsChild}>
                           <DetailsMeteoWidget code={details.cities_raw[0]} />
                         </DetailsSection>
                       )}
@@ -257,11 +259,11 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
                       <div ref={setSensitiveAreasRef} id="details_sensitiveAreas_ref">
                         <DetailsSection
                           htmlId="details_sensitiveAreas"
-                          titleId="details.sensitiveAreas.title"
+                          titleId="details.sensitiveAreasTitle"
                           className={marginDetailsChild}
                         >
                           <span className="mb-4 desktop:mb-8">
-                            <FormattedMessage id="details.sensitiveAreas.intro" />
+                            <FormattedMessage id="details.sensitiveAreasIntro" />
                           </span>
                           {details.sensitiveAreas.map((sensitiveArea, i) => (
                             <DetailsSensitiveArea
@@ -306,7 +308,7 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
                       <div ref={setPracticalInformationsRef} id="details_practicalInformationRef">
                         {details.informationDesks.length > 0 && (
                           <DetailsSection
-                            htmlId="details_informationDesks"
+                            htmlId="details_practicalInformations"
                             titleId="details.informationDesks"
                             className={marginDetailsChild}
                           >
@@ -482,7 +484,7 @@ export const DetailsUIWithoutContext: React.FC<Props> = ({ detailsId, parentId,
                           if (currentChild.geometry) {
                             children.push({
                               ...currentChild.geometry,
-                              id: `DETAILS-TREK_CHILDREN-${currentChild.geometry.id}`,
+                              id: `TREK-${currentChild.geometry.id}`,
                             });
                           }
                           return children;

frontend/src/components/pages/details/components/DetailsAdvice/DetailsAdvice.tsx

@@ -15,7 +15,7 @@ export const DetailsAdvice: React.FC<DetailsAdviceProps> = ({ className, text })
       rounded-2xl border-2 border-solid border-greyDarkColored
       ${className ?? ''}`}
     >
-      <div className="mr-2 desktop:mr-4 flex-shrink-0 w-6 h-6 desktop:h-12 desktop:w-12 self-start">
+      <div className="mr-2 desktop:mr-4 shrink-0 w-6 h-6 desktop:h-12 desktop:w-12 self-start">
         <AlertTriangle />
       </div>
       <div className="text-greyDarkColored desktop:font-bold text-Mobile-C2 desktop:text-P1 my-auto">

frontend/src/components/pages/details/components/DetailsAdvice/__tests__/__snapshots__/DetailsAdvice.test.tsx.snap

@@ -12,7 +12,7 @@ Object {
         id="details_recommandationAdvice"
       >
         <div
-          class="mr-2 desktop:mr-4 flex-shrink-0 w-6 h-6 desktop:h-12 desktop:w-12 self-start"
+          class="mr-2 desktop:mr-4 shrink-0 w-6 h-6 desktop:h-12 desktop:w-12 self-start"
         >
           <svg
             fill="none"
@@ -47,7 +47,7 @@ Object {
       id="details_recommandationAdvice"
     >
       <div
-        class="mr-2 desktop:mr-4 flex-shrink-0 w-6 h-6 desktop:h-12 desktop:w-12 self-start"
+        class="mr-2 desktop:mr-4 shrink-0 w-6 h-6 desktop:h-12 desktop:w-12 self-start"
       >
         <svg
           fill="none"

frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx

@@ -116,7 +116,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
           >
             <OptionalLink redirectionUrl={redirectionUrl}>{descriptionStyled}</OptionalLink>
             <span
-              className="text-primary1 underline cursor-pointer flex-shrink-0 desktop:ml-1"
+              className="text-primary1 underline cursor-pointer shrink-0 desktop:ml-1"
               onClick={toggleTruncateState}
             >
               <FormattedMessage