Feat/export concepts

app/src/js/applications/collections/dropdown/dropdown.scss

@@ -65,9 +65,18 @@
 }
 
 .dropdown__info ul li {
-  padding: 10px 16px;
+  padding: 0;
   border-bottom: 1px solid #e9edff;
   font-size: 14px;
+  display: flex;
+}
+.dropdown__info ul button {
+  padding: 10px 0 10px 16px;
+  width: 100%;
+}
+
+.dropdown__info ul button:hover, .dropdown__info ul button:focus {
+  background-color: var(--color-1);
 }
 
 .dropdown__info ul li:last-child {

app/src/js/applications/collections/dropdown/dropdown.spec.js

@@ -0,0 +1,35 @@
+import ExportButton from '.';
+import { fireEvent, render } from '@testing-library/react';
+
+describe('DropDown', () => {
+	it('should be closed by default', () => {
+		const { container } = render(<ExportButton actions={[]} />);
+		expect(container.querySelector('.dropdown__content').classList).toContain(
+			'inactive'
+		);
+	});
+	it('should be opened after clicking on the trigger button', () => {
+		const { container } = render(<ExportButton actions={[<button>Action 1</button>]} />);
+		fireEvent.click(container.querySelector('button'));
+		expect(container.querySelector('.dropdown__content').classList).toContain(
+			'active'
+		);
+	});
+	it('should be closed when pressing the Escape key', () => {
+		const { container } = render(<ExportButton actions={[]} />);
+		fireEvent.click(container.querySelector('button'));
+		fireEvent.keyDown(container.querySelector('.dropdown'), {
+			key: 'Escape',
+			code: 'Escape',
+			keyCode: 27,
+			charCode: 27,
+		});
+		expect(container.querySelector('.dropdown__content').classList).toContain(
+			'inactive'
+		);
+	});
+	it('should display the actions props', () => {
+        const { container } = render(<ExportButton actions={[<button>Action 1</button>]} />);
+        expect(container.querySelector("li button").innerHTML).toContain('Action 1');
+    });
+});

app/src/js/applications/collections/dropdown/index.js

@@ -30,8 +30,22 @@ const useOutsideClick = (el, initialState) => {
 const ExportButton = ({ actions }) => {
 	const dropdownRef = useRef(null);
 	const [open, setOpen] = useOutsideClick(dropdownRef, false);
+
+	const onKeyDown = e => {
+		if(open && e.key === "Escape"){
+			setOpen(false);
+			dropdownRef.current.querySelector("button").focus();
+		}
+	}
+	useEffect(() => {
+		if(open){
+			dropdownRef.current.querySelector("li *")?.focus();
+		}
+	}, [open]);
+
+
 	return (
-		<div className="dropdown col-md-2" ref={dropdownRef}>
+		<div className="dropdown col-md-2" ref={dropdownRef} onKeyDown={onKeyDown}>
 			<Button col={12} action={() => setOpen(!open)} label={D.btnExporter} />
 			<div
 

app/src/js/applications/collections/export-buttons/index.js

@@ -5,10 +5,10 @@ import React from 'react';
 export default ({ exportHandler }) => {
 	return (
 		<ExportButton actions={[
-			<button type="button" onClick={() => exportHandler('ods', false)}>{D.btnOdsExporter}</button>,
-			<button type="button" onClick={() => exportHandler('odt', false)}>{D.btnOdtLg1Exporter}</button>,
-			<button type="button" onClick={() => exportHandler('odt', false, 'lg2')}>{D.btnOdtLg2Exporter}</button>,
-			<button type="button" onClick={() => exportHandler('odt', true)}>{D.btnCollectionConceptExporter}</button>
+			<button key="ods-export" type="button" onClick={() => exportHandler('ods', false)}>{D.btnOdsExporter}</button>,
+			<button key="odt-export-lg1" type="button" onClick={() => exportHandler('odt', false)}>{D.btnOdtLg1Exporter}</button>,
+			<button key="odt-export-lg2" type="button" onClick={() => exportHandler('odt', false, 'lg2')}>{D.btnOdtLg2Exporter}</button>,
+			<button key="collection-export" type="button" onClick={() => exportHandler('odt', true)}>{D.btnCollectionConceptExporter}</button>
 		]}></ExportButton>
 	)
 }

app/src/js/applications/collections/modal/index.js

@@ -2,7 +2,6 @@ import D from '../../../i18n/build-dictionary';
 import { Button } from '@inseefr/wilco';
 import Modal from 'react-modal';
 import { useCallback, useState } from 'react';
-//import './index.scss';
 
 export const CollectionExportModal = ({ close, ids, exportOdt, exportOds, app = "operations", withConcepts: defaultWithConcepts }) => {
 	const [lang, setLang] = useState('lg1');