Improve ControlSection component

frontend/src/components/Map/components/ControlButton/ControlButton.tsx

@@ -1,26 +1,26 @@
+import { FormattedMessage } from 'react-intl';
+import { cn } from 'services/utils/cn';
+
 interface ControlButtonProps {
   icon: React.ReactNode;
   className?: string;
-  active?: boolean;
   onClick?: () => void;
 }
 
-export const ControlButton: React.FC<ControlButtonProps> = ({
-  icon,
-  className = '',
-  onClick,
-  active = false,
-}) => {
+export const ControlButton: React.FC<ControlButtonProps> = ({ icon, className = '', ...props }) => {
   return (
     <button
-      className={`h-10 w-10 rounded-lg shadow-md z-mapButton
-      ${active ? 'bg-primary1 text-white' : 'bg-white text-greyDarkColored'}
-      flex justify-center items-center mb-3
-      ${className}`}
-      onClick={onClick}
+      className={cn(
+        'h-10 w-10 rounded-lg shadow-md z-mapButton bg-white text-greyDarkColored flex justify-center items-center mb-3',
+        className,
+      )}
       type="button"
+      {...props}
     >
       {icon}
+      <span className="sr-only">
+        <FormattedMessage id={'search.map.panel.open'} />
+      </span>
     </button>
   );
 };

frontend/src/components/Map/components/ControlSection/ControlPanel/IconPatrimoine.tsx

@@ -1,5 +1,12 @@
-const SvgComponent: React.FC = () => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+const SvgComponent: React.FC = props => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
     <path
       fillRule="evenodd"
       clipRule="evenodd"

frontend/src/components/Map/components/ControlSection/ControlPanel/Line.tsx

@@ -1,37 +1,26 @@
-import styled from 'styled-components';
-import { colorPalette } from 'stylesheet';
 import { useIntl } from 'react-intl';
+import { cn } from 'services/utils/cn';
 import Check from './Check';
 
-const Wrapper = styled.button<{ active: boolean }>`
-  color: ${props => (props.active ? colorPalette.primary1 : colorPalette.greyDarkColored)};
-  display: flex;
-  align-items: center;
-  font-weight: bold;
-  text-align: left;
-`;
-const IconWrapper = styled.div`
-  & svg {
-    height: 25px;
-    width: 25px;
-    margin-right: 10px;
-  }
-`;
-
-const Text = styled.div`
-  flex: auto;
-`;
-
-export const Line: React.FC<{ Icon: any; active: boolean; toggle: () => void; transKey: string }> =
-  ({ Icon, active, toggle, transKey }) => {
-    const intl = useIntl();
-    return (
-      <Wrapper active={active} onClick={toggle} type="button">
-        <IconWrapper>
-          <Icon />
-        </IconWrapper>
-        <Text>{intl.formatMessage({ id: transKey })}</Text>
-        {<Check visibility={active ? 'auto' : 'hidden'} />}
-      </Wrapper>
-    );
-  };
+export const Line: React.FC<{
+  icon: any;
+  active: boolean;
+  toggle: () => void;
+  transKey: string;
+}> = ({ icon: Icon, active, toggle, transKey }) => {
+  const intl = useIntl();
+  return (
+    <button
+      className={cn(
+        'flex items-center text-left font-bold',
+        active ? 'text-primary1' : 'text-greyDarkColored',
+      )}
+      onClick={toggle}
+      type="button"
+    >
+      <Icon className="w-6 h-6 mr-3" />
+      <span className="flex-auto">{intl.formatMessage({ id: transKey })}</span>
+      <Check visibility={active ? 'auto' : 'hidden'} />
+    </button>
+  );
+};

frontend/src/components/Map/components/ControlSection/ControlPanel/index.tsx

@@ -1,4 +1,3 @@
-import styled from 'styled-components';
 import { Florist } from 'components/Icons/Florist';
 import { Signage } from 'components/Icons/Signage';
 import { Infrastructure } from 'components/Icons/Infrastructure';
@@ -12,25 +11,8 @@ import IconOutdoorSite from './IconOutdoorSite';
 import IconOutdoorRoute from './IconOutdoorRoute';
 import { ControlSectionProps } from '../ControlSection';
 
-const Wrapper = styled.div`
-  background: white;
-  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
-  padding: 16px;
-  border-radius: 16px;
-  width: 230px;
-  display: flex;
-  flex-flow: column;
-
-  & button {
-    margin-bottom: 16px;
-  }
-
-  & button:last-child {
-    margin-bottom: 8px;
-  }
-`;
-
-export const ControlPanel: React.FC<ControlSectionProps> = ({
+export const ControlPanel: React.FC<ControlSectionProps & { id: string }> = ({
+  id,
   trekChildrenVisibility,
   toggleTrekChildrenVisibility,
   poiVisibility,
@@ -53,87 +35,87 @@ export const ControlPanel: React.FC<ControlSectionProps> = ({
   toggleInfrastructureVisibility,
 }) => {
   return (
-    <Wrapper>
-      {trekChildrenVisibility !== null && (
+    <div className="flex flex-col bg-white shadow-lg p-4 rounded-2xl w-[230px] gap-4" id={id}>
+      {trekChildrenVisibility && toggleTrekChildrenVisibility && (
         <Line
-          Icon={IconLocation}
+          icon={IconLocation}
           active={trekChildrenVisibility === 'DISPLAYED'}
           toggle={toggleTrekChildrenVisibility}
           transKey="search.map.panel.trekChildren"
         />
       )}
-      {poiVisibility !== null && (
+      {poiVisibility && togglePoiVisibility && (
         <Line
-          Icon={Florist}
+          icon={Florist}
           active={poiVisibility === 'DISPLAYED'}
           toggle={togglePoiVisibility}
           transKey="search.map.panel.poi"
         />
       )}
-      {referencePointsVisibility !== null && (
+      {referencePointsVisibility && toggleReferencePointsVisibility && (
         <Line
-          Icon={IconDrapeau}
+          icon={IconDrapeau}
           active={referencePointsVisibility === 'DISPLAYED'}
           toggle={toggleReferencePointsVisibility}
           transKey="search.map.panel.referencePoints"
         />
       )}
-      {touristicContentVisibility !== null && (
+      {touristicContentVisibility && toggleTouristicContentVisibility && (
         <Line
-          Icon={IconPatrimoine}
+          icon={IconPatrimoine}
           active={touristicContentVisibility === 'DISPLAYED'}
           toggle={toggleTouristicContentVisibility}
           transKey="search.map.panel.touristicContent"
         />
       )}
-      {informationDeskMobileVisibility !== null && (
+      {informationDeskMobileVisibility && toggleInformationDeskVisibility && (
         <Line
-          Icon={IconInfo}
+          icon={IconInfo}
           active={informationDeskMobileVisibility === 'DISPLAYED'}
           toggle={toggleInformationDeskVisibility}
           transKey="search.map.panel.informationDesks"
         />
       )}
-      {coursesVisibility !== null && (
+      {coursesVisibility && toggleCoursesVisibility && (
         <Line
-          Icon={IconOutdoorRoute}
+          icon={IconOutdoorRoute}
           active={coursesVisibility === 'DISPLAYED'}
           toggle={toggleCoursesVisibility}
           transKey="search.map.panel.courses"
         />
       )}
-      {experiencesVisibility !== null && (
+      {experiencesVisibility && toggleExperiencesVisibility && (
         <Line
-          Icon={IconOutdoorSite}
+          icon={IconOutdoorSite}
           active={experiencesVisibility === 'DISPLAYED'}
           toggle={toggleExperiencesVisibility}
           transKey="search.map.panel.experiences"
         />
       )}
-      {signageVisibility !== null && (
+      {signageVisibility && toggleSignageVisibility && (
         <Line
-          Icon={Signage}
+          icon={Signage}
           active={signageVisibility === 'DISPLAYED'}
           toggle={toggleSignageVisibility}
           transKey="search.map.panel.signage"
         />
       )}
-      {infrastructureVisibility !== null && (
+      {infrastructureVisibility && toggleInfrastructureVisibility && (
         <Line
-          Icon={Infrastructure}
+          icon={Infrastructure}
           active={infrastructureVisibility === 'DISPLAYED'}
           toggle={toggleInfrastructureVisibility}
           transKey="search.map.panel.infrastructure"
         />
       )}
-      {serviceVisibility !== null && (
+      {serviceVisibility && toggleServiceVisibility && (
         <Line
-          Icon={MapPin}
+          icon={MapPin}
           active={serviceVisibility === 'DISPLAYED'}
           toggle={toggleServiceVisibility}
           transKey="search.map.panel.service"
         />
       )}
-    </Wrapper>
+    </div>
   );
 };

frontend/src/components/Map/components/ControlSection/ControlSection.tsx

@@ -1,33 +1,35 @@
 import { ChevronUp } from 'components/Icons/ChevronUp';
 import { Visibility } from 'components/Map/DetailsMap/useDetailsMap';
 import { ControlPosition } from 'leaflet';
+import { cn } from 'services/utils/cn';
+import { useId } from 'react';
 import { ControlButton } from '../ControlButton';
 import { useControlSection } from './useControlSection';
 import { ControlPanel } from './ControlPanel';
 import { Layers } from './Layers';
 import Control from '../CustomControl';
 
 export interface ControlSectionProps {
-  trekChildrenVisibility: Visibility;
-  toggleTrekChildrenVisibility: () => void;
-  poiVisibility: Visibility;
-  togglePoiVisibility: () => void;
-  referencePointsVisibility: Visibility;
-  toggleReferencePointsVisibility: () => void;
-  touristicContentVisibility: Visibility;
-  toggleTouristicContentVisibility: () => void;
-  informationDeskMobileVisibility: Visibility;
-  toggleInformationDeskVisibility: () => void;
-  coursesVisibility: Visibility;
-  toggleCoursesVisibility: () => void;
-  experiencesVisibility: Visibility;
-  toggleExperiencesVisibility: () => void;
-  signageVisibility: Visibility;
-  toggleSignageVisibility: () => void;
-  serviceVisibility: Visibility;
-  toggleServiceVisibility: () => void;
-  infrastructureVisibility: Visibility;
-  toggleInfrastructureVisibility: () => void;
+  trekChildrenVisibility?: Visibility;
+  toggleTrekChildrenVisibility?: () => void;
+  poiVisibility?: Visibility;
+  togglePoiVisibility?: () => void;
+  referencePointsVisibility?: Visibility;
+  toggleReferencePointsVisibility?: () => void;
+  touristicContentVisibility?: Visibility;
+  toggleTouristicContentVisibility?: () => void;
+  informationDeskMobileVisibility?: Visibility;
+  toggleInformationDeskVisibility?: () => void;
+  coursesVisibility?: Visibility;
+  toggleCoursesVisibility?: () => void;
+  experiencesVisibility?: Visibility;
+  toggleExperiencesVisibility?: () => void;
+  signageVisibility?: Visibility;
+  toggleSignageVisibility?: () => void;
+  serviceVisibility?: Visibility;
+  toggleServiceVisibility?: () => void;
+  infrastructureVisibility?: Visibility;
+  toggleInfrastructureVisibility?: () => void;
   className?: string;
   position?: ControlPosition;
 }
@@ -37,19 +39,26 @@ export const ControlSection: React.FC<ControlSectionProps> = ({
   position = 'topright',
   ...props
 }) => {
-  const { controlSectionState, expandControlSection, collapseControlSection } = useControlSection();
+  const { controlSectionState, toggleControlSection } = useControlSection();
+  const idControlSectionElement = useId();
+
+  if (Object.keys(props).length === 0) {
+    return null;
+  }
+
+  const icon = controlSectionState === 'COLLAPSED' ? <Layers size={24} /> : <ChevronUp size={30} />;
 
   return (
     <Control position={position}>
-      <div className={`flex flex-col items-end ${className}`}>
-        {controlSectionState === 'COLLAPSED' && (
-          <ControlButton icon={<Layers size={24} />} onClick={expandControlSection} />
-        )}
+      <div className={cn('flex flex-col items-end', className)}>
+        <ControlButton
+          aria-expanded={controlSectionState === 'EXPANDED' ? 'true' : 'false'}
+          aria-controls={idControlSectionElement}
+          icon={icon}
+          onClick={toggleControlSection}
+        />
         {controlSectionState === 'EXPANDED' && (
-          <>
-            <ControlButton icon={<ChevronUp size={30} />} onClick={collapseControlSection} />
-            <ControlPanel {...props} />
-          </>
+          <ControlPanel id={idControlSectionElement} {...props} />
         )}
       </div>
     </Control>

frontend/src/components/Map/components/ControlSection/useControlSection.tsx

@@ -4,11 +4,11 @@ export const useControlSection = () => {
   const [controlSectionState, setControlSectionState] = useState<'EXPANDED' | 'COLLAPSED'>(
     'COLLAPSED',
   );
-  const expandControlSection = () => setControlSectionState('EXPANDED');
-  const collapseControlSection = () => setControlSectionState('COLLAPSED');
+  const toggleControlSection = () =>
+    setControlSectionState(prevState => (prevState === 'COLLAPSED' ? 'EXPANDED' : 'COLLAPSED'));
+
   return {
     controlSectionState,
-    expandControlSection,
-    collapseControlSection,
+    toggleControlSection,
   };
 };

frontend/src/translations/ca.json

@@ -84,6 +84,8 @@
       "seeResult": "Mostrar el detall",
       "seeMe": "Mostrar la meva posició",
       "panel": {
+        "open": "Display layer selector",
+        "close": "Hide layer selector",
         "trekChildren": "Steps",
         "poi": "Heritage",
         "referencePoints": "Landmarks",

frontend/src/translations/de.json

@@ -84,6 +84,8 @@
       "seeResult": "Einzelheiten anzeigen",
       "seeMe": "Meinen Standpunkt sehen",
       "panel": {
+        "open": "Display layer selector",
+        "close": "Hide layer selector",
         "trekChildren": "Steps",
         "poi": "Heritage",
         "referencePoints": "Landmarken",

frontend/src/translations/en.json

@@ -87,6 +87,8 @@
       "seeResult": "Display details",
       "seeMe": "View my position",
       "panel": {
+        "open": "Display layer selector",
+        "close": "Hide layer selector",
         "trekChildren": "Steps",
         "poi": "Heritage",
         "referencePoints": "Landmarks",