Merge pull request #1831 from BaseAdresseNationale/feat/v2-map-search…

…-first-integration

Feat/v2 map search first integration

src/app/page.tsx

@@ -4,6 +4,7 @@ import { Button } from '@codegouvfr/react-dsfr/Button'
 import Section from '@/components/Section'
 import SectionHero from '@/components/SectionHero'
 import SectionTilesList from '@/components/SectionTilesList'
+import SectionSearchBAN from '@/components/SectionSearchBAN'
 import BlogGrid from '@/components/BlogGrid'
 import SectionQuotes from '@/components/SectionQuotes'
 import { getStats } from '@/lib/api-ban'
@@ -53,6 +54,8 @@ export default async function Home() {
         </p>
       </SectionHero>
 
+      <SectionSearchBAN />
+
       <SectionTilesList
         data={dataBAN}
         title="Utilisez la Base Adresse Nationale"

src/components/SectionQuotes/SectionQuotes.tsx

@@ -31,8 +31,8 @@ function SectionQuotes({ title, data, theme }: SectionQuotesProps) {
         ))}
       </QuoteWrapper>
       <QuoteWrapperFooter>
-        <a className="fr-link fr-icon-chat-3-line fr-link--icon-right" href="#">Découvrez tous les témoignages</a>
-        <a className="fr-link fr-icon-france-line fr-link--icon-right" href="#">Quelles communes ont mis à jour leur base ? </a>
+        <a className="fr-link fr-link--icon-left fr-icon-chat-3-line" href="#">Découvrez tous les témoignages</a>
+        <a className="fr-link fr-link--icon-left fr-icon-france-line" href="#">Quelles communes ont mis à jour leur base ? </a>
       </QuoteWrapperFooter>
     </Section>
   )

src/components/SectionSearchBAN/SectionSearchBAN.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react'
+
+import SectionSearchBAN from './SectionSearchBAN'
+
+const meta = {
+  title: 'Layout-Components/SectionSearchBAN',
+  component: SectionSearchBAN,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+  },
+}

src/components/SectionSearchBAN/SectionSearchBAN.styles.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  min-height: 18rem;
+  display: flex;
+  gap: 3rem;
+  padding: 2rem 0;
+
+  flex-direction: column;
+  @media screen and (min-width: 768px) {
+      flex-direction: row;
+  }
+`
+
+export const FormWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+
+export const FormWrapperFooter = styled.footer`
+  padding: 1.5rem 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+
+  flex-direction: column;
+  align-items: flex-start;
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+`
+
+export const IntroWrapper = styled.div`
+  display: block;
+  text-align: center;
+  max-width: 25rem;
+`
+
+export const Title = styled.h2`
+  font-size: 1.5rem;
+  margin-bottom: 0.2em;
+`
+
+export const FormDescription = styled.div`
+  font-size: 1rem;
+  margin-bottom: .5em;
+`

src/components/SectionSearchBAN/SectionSearchBAN.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useState } from 'react'
+import PropTypes from 'prop-types'
+import Image from 'next/image'
+import { SearchBar } from '@codegouvfr/react-dsfr/SearchBar'
+
+import Section from '@/components/Section'
+
+import {
+  Wrapper,
+  FormWrapper,
+  FormWrapperFooter,
+  IntroWrapper,
+  Title,
+  FormDescription,
+} from './SectionSearchBAN.styles'
+
+interface InputSearchBANProps {
+  id?: string
+}
+
+function InputSearch() {
+  const [search, onSearchChange] = useState('')
+  const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null)
+
+  return (
+    <>
+      <SearchBar
+        renderInput={({ className, id, placeholder, type }) => (
+          <input
+            ref={setInputElement}
+            className={className}
+            id={id}
+            placeholder={placeholder}
+            type={type}
+            value={search}
+            onChange={event => onSearchChange(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape' && inputElement !== null) {
+                inputElement.blur()
+              }
+            }}
+          />
+        )}
+      />
+      {/*
+        -> Sample of search results :
+        <p>Search results for: {search}</p>
+      */}
+    </>
+
+  )
+}
+
+function SectionSearchBAN({ id }: InputSearchBANProps) {
+  return (
+    <Section id={id}>
+      <Wrapper>
+        <IntroWrapper>
+          <Title>Votre adresse est elle bien renseignée ?</Title>
+          <Image src="./img/map.svg" alt="picto map" width={141} height={140} />
+        </IntroWrapper>
+        <FormWrapper>
+          <Title>Recherchez dans la base adresse nationale</Title>
+          <FormDescription>Saisissez votre adresse, une voie, un lieu-dit ou une commune</FormDescription>
+          <InputSearch />
+          <FormWrapperFooter>
+            <a className="fr-link fr-link--icon-left fr-icon-road-map-line" href="#">Consulter directement la carte</a>
+            <a className="fr-link fr-link--icon-left fr-icon-questionnaire-line" href="#">J’ai un soucis avec mon adresse, pourquoi ?</a>
+          </FormWrapperFooter>
+        </FormWrapper>
+      </Wrapper>
+    </Section>
+  )
+}
+
+SectionSearchBAN.propTypes = {}
+
+export default SectionSearchBAN

src/components/SectionSearchBAN/index.ts

@@ -0,0 +1 @@
+export { default } from './SectionSearchBAN'