diff --git a/src/App.tsx b/src/App.tsx index 18b9af7..9e617a8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,11 +4,13 @@ import { useNotes } from './hooks/useNotes' import NoteList from './components/NoteList' import NoteEditor from './components/NoteEditor' import FloatingButton from './components/FloatingButton' +import RgpdInfo from './components/RgpdInfo' function App() { const { notes, addNote, updateNote, deleteNote } = useNotes() const [selectedId, setSelectedId] = useState(null) const [creating, setCreating] = useState(false) + const [showRgpd, setShowRgpd] = useState(false) const selectedNote = selectedId === null ? null : (notes.find((note) => note.id === selectedId) ?? null) @@ -51,6 +53,14 @@ function App() { ) : null}

Notes

+ @@ -76,6 +86,8 @@ function App() { {!creating && !selectedNote && } + + setShowRgpd(false)} /> ) } diff --git a/src/components/RgpdInfo.test.tsx b/src/components/RgpdInfo.test.tsx new file mode 100644 index 0000000..9296fc5 --- /dev/null +++ b/src/components/RgpdInfo.test.tsx @@ -0,0 +1,31 @@ +import { render, screen } from '@testing-library/react' +import { describe, expect, it, vi } from 'vitest' +import RgpdInfo from './RgpdInfo' + +describe('RgpdInfo', () => { + it('renders nothing when closed', () => { + const { container } = render() + + expect(container).toBeEmptyDOMElement() + }) + + it('renders the GDPR information when open', () => { + render() + + expect(screen.getByRole('dialog', { name: 'Protection des données (RGPD)' })).toBeInTheDocument() + expect(screen.getByText('localStorage', { exact: false })).toBeInTheDocument() + expect( + screen.getByText(/ne sont jamais partagées avec des tiers/i), + ).toBeInTheDocument() + expect(screen.getByText(/aucune transmission vers un serveur externe/i)).toBeInTheDocument() + }) + + it('calls onClose when the close button is clicked', () => { + const onClose = vi.fn() + render() + + screen.getByRole('button', { name: 'Fermer' }).click() + + expect(onClose).toHaveBeenCalled() + }) +}) \ No newline at end of file diff --git a/src/components/RgpdInfo.tsx b/src/components/RgpdInfo.tsx new file mode 100644 index 0000000..d18e24e --- /dev/null +++ b/src/components/RgpdInfo.tsx @@ -0,0 +1,39 @@ +import type { RgpdInfoProps } from '../interfaces/rgpd-info' + +function RgpdInfo({ open, onClose }: RgpdInfoProps) { + if (!open) return null + + return ( +
+
+

+ Protection des données (RGPD) +

+
    +
  • + Vos données sont stockées uniquement dans le +  stockage local de votre navigateur. +
  • +
  • Elles ne sont jamais partagées avec des tiers.
  • +
  • Aucune transmission vers un serveur externe.
  • +
+
+ +
+
+
+ ) +} + +export default RgpdInfo \ No newline at end of file diff --git a/src/interfaces/rgpd-info.ts b/src/interfaces/rgpd-info.ts new file mode 100644 index 0000000..69ecfa4 --- /dev/null +++ b/src/interfaces/rgpd-info.ts @@ -0,0 +1,4 @@ +export interface RgpdInfoProps { + open: boolean + onClose: () => void +} \ No newline at end of file