feat: start homepage mobile

frontend/gatsby-browser.js

@@ -1 +1,2 @@
+import "./src/styles/normalize.css";
 import "./src/styles/global.css";

frontend/package.json

@@ -20,7 +20,7 @@
  "babel-plugin-styled-components": "^2.1.3",
  "copy-to-clipboard": "^3.3.3",
  "focus-trap-react": "^10.1.4",
- "gatsby": "^5.10.0",
+ "gatsby": "^5.11.0",
  "gatsby-plugin-gatsby-cloud": "^5.10.0",
  "gatsby-plugin-image": "^3.10.0",
  "gatsby-plugin-manifest": "^5.10.0",
@@ -61,7 +61,8 @@
  "gatsby-plugin-postcss": "^6.11.0",
  "gatsby-plugin-root-import": "^2.0.9",
  "postcss": "^8.4.25",
- "prettier": "^2.8.8",
+ "prettier": "2.8.8",
+ "prettier-plugin-tailwindcss": "^0.4.0",
  "tailwindcss": "^3.3.2",
  "webpack-cli": "^5.1.1"
  }

frontend/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+ plugins: [require("prettier-plugin-tailwindcss")],
+};

frontend/src/components/Search.js

@@ -1,81 +1,50 @@
 import MagicLink from "components/base/MagicLink";
-import Section from "components/base/Section";
-import Background from "components/misc/Background";
-import Cloud from "components/search/Cloud";
-import SearchBar from "components/search/SearchBar";
-import Title from "components/search/Title";
+import CloudAnimated from "components/search/CloudAnimated";
+import SearchInput from "components/search/SearchInput";
+import TitleAnimated from "components/search/TitleAnimated";
 import { navigate } from "gatsby";
 import React from "react";
-import styled from "styled-components";
 import { formatPlaceUrl } from "utils/formatPlaceUrl";
-import Suggestions from "./search/Suggestions";
+import useIframe from "hooks/useIframe";
+import SuggestionsButtons from "./search/SuggestionsButtons";
 
-const Wrapper = styled.div`
- position: relative;
- margin: 0 auto 10rem;
- padding: 0 0 6.5rem;
+export default function Search({ handlePlaceSelection }) {
+ const iframe = useIframe();
 
- ${(props) => props.theme.mq.medium} {
- min-height: ${(props) => (props.iframe ? "50rem" : "100vh")};
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 0;
- }
- ${(props) => props.theme.mq.small} {
- margin-bottom: 5rem;
- }
-`;
-const StyledSection = styled(Section)`
- position: relative;
- margin: 0 auto;
- ${(props) => props.theme.mq.medium} {
- padding: 0;
- }
-`;
-const SearchBarSizer = styled.div`
- position: relative;
- height: 4.5rem;
- margin-bottom: 2.5rem;
-`;
-const WidgetFooter = styled.div`
- position: absolute;
- bottom: 1rem;
- width: 100%;
- text-align: center;
-`;
-const WidgetLink = styled(MagicLink)`
- font-size: 0.75rem;
- color: ${(props) => props.theme.colors.footer};
- text-decoration: none;
-`;
-
-export default function Search(props) {
  return (
- <Wrapper iframe={props.iframe} className={props.className}>
- <Background />
- <StyledSection first>
- <Cloud />
- <Title />
- <SearchBarSizer>
- <SearchBar
- handlePlaceSelection={
- props.handlePlaceSelection ||
- ((place) => {
+ <div
+ iframe={iframe.toString()}
+ className={[
+ "relative -mx-4 flex flex-col items-center justify-start bg-gradient-to-r from-[#d1edff] via-[#f8fafd] to-[#d6eeff] px-4",
+ // iframe ? "min-h-[50rem]" : "min-h-screen",
+ ].join(" ")}
+ >
+ <section className="relative flex w-full flex-col pb-6">
+ <CloudAnimated />
+ <TitleAnimated />
+ <div className="relative mb-4 px-2">
+ <SearchInput
+ handlePlaceSelection={(place) => {
+ if (handlePlaceSelection) {
+ handlePlaceSelection(place);
+ } else {
  navigate(formatPlaceUrl(place) + window.location.search);
- })
- }
+ }
+ }}
  />
- </SearchBarSizer>
- <Suggestions />
- </StyledSection>
- {props.iframe && (
- <WidgetFooter>
- <WidgetLink to="https://recosante.beta.gouv.fr/donnees-personnelles">
+ </div>
+ <SuggestionsButtons />
+ </section>
+ {!!iframe && (
+ <div className="mt-auto w-full text-center">
+ <MagicLink
+ className="text-xs text-footer no-underline"
+ to="https://recosante.beta.gouv.fr/donnees-personnelles"
+ >
  En savoir plus sur la gestion de vos données personnelles
- </WidgetLink>
- </WidgetFooter>
+ </MagicLink>
+ </div>
  )}
- </Wrapper>
+ </div>
  );
 }

frontend/src/components/base/Button.js

@@ -85,21 +85,33 @@ const Wrapper = styled(MagicLink)`
  text-align: center;
  }
 `;
-export default function Button(props) {
+export default function Button({
+ className,
+ to,
+ onClick,
+ disabled,
+ fetching,
+ hollow,
+ expand,
+ noExpand,
+ color,
+ type,
+ children,
+}) {
  return (
  <Wrapper
- className={props.className}
- to={props.to}
- onClick={props.onClick}
- disabled={props.disabled}
- fetching={props.fetching}
- hollow={props.hollow ? 1 : 0}
- expand={props.expand ? 1 : 0}
- noExpand={props.noExpand ? 1 : 0}
- color={props.color}
- type={props.type}
+ className={className}
+ to={to}
+ onClick={onClick}
+ disabled={disabled}
+ fetching={fetching}
+ hollow={hollow ? 1 : 0}
+ expand={expand ? 1 : 0}
+ noExpand={noExpand ? 1 : 0}
+ color={color}
+ type={type}
  >
- <span>{props.children}</span>
+ <span>{children}</span>
  </Wrapper>
  );
 }

frontend/src/components/base/MagicLink.js

@@ -2,35 +2,48 @@ import { useLocation } from "@reach/router";
 import { Link } from "gatsby";
 import React from "react";
 
-export default function MagicLink(props) {
+export default function MagicLink({
+ to,
+ className,
+ onClick,
+ children,
+ ...props
+}) {
  const { search } = useLocation();
- return !props.to ? (
- <button
- className={props.className}
- onClick={props.onClick}
- aria-label={props["aria-label"]}
- >
- {props.children}
- </button>
- ) : props.to.includes(":") || props.to.includes(".") ? (
- <a
- className={props.className}
- href={props.to}
- onClick={props.onClick || null}
- target="_blank"
- rel="noreferrer noopener"
- aria-label={props["aria-label"]}
- >
- {props.children}
- </a>
- ) : (
+ if (!to) {
+ return (
+ <button
+ className={className}
+ onClick={onClick}
+ aria-label={props["aria-label"]}
+ >
+ {children}
+ </button>
+ );
+ }
+ const isExternalLink = to.includes("://") || to.includes(".");
+ if (isExternalLink) {
+ return (
+ <a
+ className={className}
+ href={to}
+ onClick={onClick || null}
+ target="_blank"
+ rel="noreferrer noopener"
+ aria-label={props["aria-label"]}
+ >
+ {children}
+ </a>
+ );
+ }
+ return (
  <Link
- className={props.className}
- to={props.to + (!props.to.includes("?") ? search : "")}
- onClick={props.onClick || null}
+ className={className}
+ to={to + (!to.includes("?") ? search : "")}
+ onClick={onClick || null}
  aria-label={props["aria-label"]}
  >
- {props.children}
+ {children}
  </Link>
  );
 }

frontend/src/components/base/Section.js

@@ -1,6 +1,7 @@
+import React from 'react';
 import styled from "styled-components";
 
-const Section = styled.section`
+const SectionStyled= styled.section`
  position: relative;
  width: ${(props) => (props.small ? 35.5 : props.medium ? 48 : 73)}rem;
  max-width: 100%;
@@ -28,4 +29,6 @@ Section.Subtitle = styled.h3`
  }
 `;
 
-export default Section;
+export default function Section(props) {
+ return <SectionStyled {...props} />;
+}

frontend/src/components/layout/Header.js

@@ -1,34 +1,22 @@
 import { useLocation } from "@reach/router";
-import SearchBar from "components/search/SearchBar";
+import SearchInput from "components/search/SearchInput";
 import { navigate } from "gatsby";
 import React from "react";
-import styled from "styled-components";
 import { formatPlaceUrl } from "utils/formatPlaceUrl";
 import Logos from "./header/Logos";
 import MobileSearch from "./header/MobileSearch";
 
-const StyledSearchBar = styled(SearchBar)`
- top: -1rem;
- left: auto;
- right: 0;
- font-size: 1rem;
-
- ${(props) => props.theme.mq.medium} {
- max-width: none;
- transform: none;
- }
-`;
-
 export default function Header() {
  const { pathname } = useLocation();
 
  return (
- <header className="absolute w-full py-0 px-4 z-[1000] bg-white" role="banner">
- <div className="flex justify-between items-center max-w-6xl mx-auto">
+ <header className="z-[1000] w-full bg-white px-4 py-0" role="banner">
+ <div className="mx-auto flex max-w-6xl items-center justify-between">
  <Logos />
  {pathname !== "/" && (
- <div className="hidden sm:block relative">
- <StyledSearchBar
+ <div className="relative hidden sm:block">
+ <SearchInput
+ className=" xl:transform-[initial] -top-4 left-auto right-0 !max-w-none !transform-none text-base xl:max-w-[initial]"
  placeholder="Entrez une ville"
  handlePlaceSelection={(place) => {
  navigate(formatPlaceUrl(place) + window.location.search);